/* ═══════════════════════════════════════════════════════════════════════
   KATEGORİ BLOKLARI — renkli, İslami motifli çerçeve  ·  Beyribey Bilişim

   Her blok TEK bir renkten beslenir: şablon `--kat` değişkenini kategorinin
   panelde seçilen renginden yazar. Başlığın koyu, gövdenin açık tonu bu tek
   renkten color-mix ile TÜRETİLİR — panelde tek alan doldurmak yetsin diye.

   Motif: köşelerde sekiz köşeli yıldız (rub'el hizb) ve başlık altında ince
   çift çizgi. Figür yok, ağır desen yok — zarif kalsın.
   ═══════════════════════════════════════════════════════════════════════ */

.kblok {
  --kat: #0e4d40;
  /* color-mix desteklenmeyen tarayıcıda yedek olarak kâğıt tonları */
  --kat-bas: color-mix(in srgb, var(--kat) 92%, #000);
  --kat-govde: color-mix(in srgb, var(--kat) 7%, var(--sayfa));
  --kat-cizgi: color-mix(in srgb, var(--kat) 28%, var(--sayfa));
  --kat-yazi: color-mix(in srgb, var(--kat) 82%, #000);

  margin-block: 40px;
  border: 1px solid var(--kat-cizgi);
  background: var(--kat-govde);
}

/* ── BAŞLIK: koyu ton ── */
.kblok__bas {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px;
  background: var(--kat-bas);
  color: #fff;
  position: relative;
}
/* başlık altında ince çift çizgi — gazete/dergi dokusu */
.kblok__bas::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 3px;
  border-top: 1px solid var(--kat-cizgi);
  border-bottom: 1px solid var(--kat-cizgi);
  background: var(--sayfa);
}
.kblok__bas h2 {
  font: 700 18px/1.2 var(--serif); letter-spacing: -.015em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kblok__tum {
  margin-inline-start: auto; flex: none;
  font: 600 12px var(--sans); letter-spacing: .06em;
  color: rgba(255, 255, 255, .82);
  padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .28);
}
.kblok__tum:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ── KÖŞE MOTİFİ: sekiz köşeli yıldız (rub'el hizb) ── */
.kblok__motif {
  width: 16px; height: 16px; flex: none; opacity: .55;
  background:
    linear-gradient(45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%),
    linear-gradient(90deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%);
  color: #e8c98a;
}
.kblok__motif--sag { order: 3; }

/* ── GÖVDE: açık ton ── */
.kblok__govde { padding: 26px 20px 22px; }
.kblok__ic {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0;
}
.kblok__ic > * { min-width: 0; }
.kblok__one { padding-inline-end: 28px; }
.kblok__one .kart__res { margin-bottom: 14px; }
.kblok__one .h2 { font-size: clamp(21px, 2.1vw, 27px); }
.kblok__one .h2 a:hover { color: var(--kat-yazi); }

.kblok__liste {
  padding-inline-start: 28px;
  border-inline-start: 1px solid var(--kat-cizgi);
  display: flex; flex-direction: column;
}
.kblok__liste > * { padding-block: 14px; border-bottom: 1px solid var(--kat-cizgi); }
.kblok__liste > *:first-child { padding-top: 0; }
.kblok__liste > *:last-child { border-bottom: 0; padding-bottom: 0; }
.kblok__liste .h6 a:hover { color: var(--kat-yazi); }

/* koyu temada tonlar ters yönde türetilir */
:root[data-tema="koyu"] .kblok {
  --kat-bas: color-mix(in srgb, var(--kat) 62%, #000);
  --kat-govde: color-mix(in srgb, var(--kat) 12%, var(--sayfa));
  --kat-cizgi: color-mix(in srgb, var(--kat) 38%, var(--sayfa));
  --kat-yazi: color-mix(in srgb, var(--kat) 55%, #fff);
}

/* color-mix yoksa: blok yine okunur kalsın (renk yalnız çerçeve ve başlıkta) */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .kblok { background: var(--sayfa); border-color: var(--cizgi); }
  .kblok__bas { background: var(--kat); }
  .kblok__liste { border-inline-start-color: var(--cizgi); }
  .kblok__liste > * { border-bottom-color: var(--cizgi-2); }
}

/* ── ÜÇLÜ DÜZEN: 3 sütun resimli kart (blok_duzeni=uclu/izgara) ── */
.kblok__uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 26px; }
.kblok__uclu .kart__res { margin-bottom: 11px; }
.kblok__uclu .h5 { font-size: 16.5px; line-height: 1.3; }
.kblok__uclu .h5 a:hover { color: var(--kat-yazi); }
.kblok__uclu .meta { margin-top: 6px; }

/* ── İKİLİ DÜZEN: 2 büyük kart + altta 2 başlık satırı (blok_duzeni=ikili) ── */
.kblok__ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 30px; }
.kblok__ikili .ki .kart__res { margin-bottom: 13px; }
.kblok__ikili .h4 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.22; }
.kblok__ikili .h4 a:hover, .kblok__ikili .h6 a:hover { color: var(--kat-yazi); }
.kblok__ikili .dek { margin-top: 7px; }
.kblok__ikili .meta { margin-top: 7px; }
.kblok__ikili .ki-alt {
  padding: 12px 0 0 14px; border-top: 1px solid var(--kat-cizgi);
  border-inline-start: 3px solid var(--kat); align-self: start;
}

/* ── LİSTE DÜZENİ: iki sütunlu gazete listesi, sağda küçük resim ── */
.kblok__ltiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.kblok__ltiste .ls {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding-block: 13px; border-bottom: 1px solid var(--kat-cizgi); min-width: 0;
}
.kblok__ltiste .ls:nth-child(-n+2) { padding-top: 0; }
.kblok__ltiste .ls:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.kblok__ltiste .ls__ic { min-width: 0; }
.kblok__ltiste .h6 { font-size: 15.5px; line-height: 1.32; }
.kblok__ltiste .h6 a:hover { color: var(--kat-yazi); }
.kblok__ltiste .meta { margin-top: 5px; }
.kblok__ltiste .ls__res {
  flex: none; width: 96px; height: 68px; overflow: hidden; background: var(--sayfa-2);
}
.kblok__ltiste .ls__res img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .kblok__ic { grid-template-columns: 1fr; }
  .kblok__one { padding-inline-end: 0; padding-bottom: 22px; }
  .kblok__liste {
    padding-inline-start: 0; border-inline-start: 0;
    border-top: 1px solid var(--kat-cizgi); padding-top: 6px;
  }
  .kblok__uclu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .kblok__ikili { grid-template-columns: 1fr; gap: 18px; }
  .kblok__ltiste { grid-template-columns: 1fr; }
  .kblok__ltiste .ls:nth-child(-n+2) { padding-top: 13px; }
  .kblok__ltiste .ls:first-child { padding-top: 0; }
  .kblok__ltiste .ls:nth-last-child(-n+2) { border-bottom: 1px solid var(--kat-cizgi); padding-bottom: 13px; }
  .kblok__ltiste .ls:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 640px) {
  .kblok__uclu { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kblok { margin-block: 26px; }
  .kblok__bas { padding: 11px 14px; gap: 10px; }
  .kblok__bas h2 { font-size: 16px; }
  .kblok__motif { width: 13px; height: 13px; }
  .kblok__motif--sag { display: none; }   /* dar ekranda başlığa yer aç */
  .kblok__govde { padding: 20px 14px 18px; }
}

@media print {
  .kblok { border-color: #999; background: none; }
  .kblok__bas { background: none; color: #000; border-bottom: 2px solid #000; }
  .kblok__bas h2 { color: #000; }
  .kblok__motif, .kblok__tum { display: none; }
}