/* ====================================================
   FANTAZI — MEDYA KİTİ (marka logoları / renk / kurallar)
   ==================================================== */
.page-body { padding-bottom: var(--space-64); }
.mkit { display: flex; flex-direction: column; gap: var(--space-44); }

.mkit-sec__title { font-size: var(--fs-20); margin-bottom: var(--space-20); padding-bottom: var(--space-12); border-bottom: 1px solid var(--renk-cizgi); }

/* --- Renk paleti --- */
.mkit-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
.mcolor { background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); overflow: hidden; }
.mcolor__swatch { height: 120px; }
.mcolor__info { padding: var(--space-16); }
.mcolor__ad { display: block; font-weight: var(--fw-bold); color: var(--renk-koyu); margin-bottom: var(--space-10); }
.mcolor__codes { display: flex; flex-direction: column; gap: 5px; }
.mcolor__codes > div { display: flex; justify-content: space-between; font-size: var(--fs-13); }
.mcolor__codes dt { color: var(--renk-metin-soft); font-weight: var(--fw-semibold); }
.mcolor__codes dd { color: var(--renk-metin); font-variant-numeric: tabular-nums; }

/* --- Logo kullanımı --- */
.mkit-usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
.musage { text-align: center; }
.musage__frame {
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; padding: var(--space-32); margin-bottom: var(--space-12);
}
.musage__frame img { max-width: 70%; height: auto; }
.musage__frame--light { background: var(--renk-beyaz); }
.musage__frame--dark { background: var(--renk-koyu); }
.musage__frame--soft { background: var(--renk-soft); }
.musage__label { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--renk-metin-soft); }

/* --- Kurallar (do / dont) --- */
.mkit-rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }
.mrule { background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: var(--space-20) var(--space-24); }
.mrule__head { display: flex; align-items: center; gap: var(--space-10); font-weight: var(--fw-bold); margin-bottom: var(--space-14); }
.mrule__head .icon { width: 22px; height: 22px; padding: 4px; border-radius: var(--radius-full); flex-shrink: 0; }
.mrule--do .mrule__head { color: var(--renk-koyu); }
.mrule--do .mrule__head .icon { background: var(--renk-nude); color: var(--renk-koyu); }
.mrule--dont .mrule__head { color: var(--renk-marka); }
.mrule--dont .mrule__head .icon { background: var(--renk-soft); color: var(--renk-marka); }
.mrule ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-10); }
.mrule li { position: relative; padding-left: var(--space-16); font-size: var(--fs-14); color: var(--renk-metin); line-height: 1.5; }
.mrule li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--renk-nude); }

/* --- İndirilebilir dosyalar --- */
.mkit-files { display: grid; grid-template-columns: repeat(var(--mkit-files-kolon, 4), 1fr); gap: var(--space-20); }
.mfile { display: flex; flex-direction: column; }
.mfile__name { font-size: var(--fs-13); color: var(--renk-metin-soft); margin-bottom: var(--space-8); }
.mfile__preview {
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; padding: var(--space-20); margin-bottom: var(--space-10);
}
.mfile__preview img { max-width: 80%; height: auto; }
.mfile__preview--light { background: var(--renk-beyaz); }
.mfile__preview--dark { background: var(--renk-koyu); }
.mfile__btn { width: 100%; }

.mkit-note { margin-top: var(--space-20); font-size: var(--fs-14); color: var(--renk-metin-soft); }
.mkit-note a { color: var(--renk-marka); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 989px) {
  .mkit-colors { grid-template-columns: repeat(2, 1fr); }
  .mkit-files { grid-template-columns: repeat(min(var(--mkit-files-kolon, 4), 2), 1fr); }
  .mkit-usage { grid-template-columns: 1fr; }
  .mkit-rules { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mkit-colors { grid-template-columns: 1fr; }
  .mkit-files { grid-template-columns: 1fr; }
}