/*
Theme Name: İslami Okul
Theme URI: https://www.islamiokul.com
Author: islamiokul.com
Description: islamiokul.com için özel yazılmış tema — okuma, arama ve kütüphane odaklı.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: islamiokul
*/

/* ==========================================================================
   1. Tasarım belirteçleri
   ========================================================================== */
:root {
  --zemin: #F6F4EE;
  --kagit: #FFFFFF;
  --kagit-2: #FBFAF6;
  --murekkep: #1C2430;
  --metin: #2F3B48;
  --soluk: #5A6472;
  --cizgi: #E4E0D5;
  --cizgi-acik: #EEEAE0;
  --baslik: #17365D;
  --vurgu: #1F6E6A;
  --vurgu-koyu: #1A5C58;
  --vurgu-zemin: #EAF3F2;
  --vurgu-cizgi: #CFE3E0;
  --altin: #8A6A22;
  --altin-parlak: #D9B45A;
  --altin-zemin: #F3EBD8;
  --panel: #17365D;
  --panel-koyu: #10263F;
  --panel-metin: #E9EEF5;
  --panel-soluk: #B9C6D6;
  --golge: 0 1px 2px rgba(16, 38, 63, .05), 0 8px 28px rgba(16, 38, 63, .07);

  --serif: "Literata", Georgia, "Amiri", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", "Amiri", sans-serif;
  --arapca: "Amiri", "Traditional Arabic", "Scheherazade New", serif;

  --genislik: 1240px;
  --okuma: 740px;
  --r: 14px;
  --r-k: 10px;
  --okuma-boyut: 19px;
  color-scheme: light;
}

[data-tema="koyu"] {
  --zemin: #0D1724;
  --kagit: #132238;
  --kagit-2: #172941;
  --murekkep: #E9EEF5;
  --metin: #D3DBE6;
  --soluk: #A9B6C8;
  --cizgi: #243957;
  --cizgi-acik: #1C304D;
  --baslik: #E6EDF7;
  --vurgu: #2E9A92;
  --vurgu-koyu: #3AB0A7;
  --vurgu-zemin: #12302F;
  --vurgu-cizgi: #1F4A47;
  --altin: #D9B45A;
  --altin-zemin: #2A2416;
  --panel: #0F2036;
  --panel-koyu: #0A1626;
  --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* ==========================================================================
   2. Temel
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--baslik); text-decoration: none; }
a:hover { color: var(--vurgu); }
:focus-visible { outline: 3px solid var(--altin-parlak); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--baslik); font-weight: 600; line-height: 1.25; }
button, input, select, textarea { font: inherit; color: inherit; }
.gizli-metin {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.atla { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--kagit); padding: 10px 16px; border-radius: 8px; }
.atla:focus { left: 8px; }
.kap { max-width: var(--genislik); margin: 0 auto; padding: 0 20px; }
.ar, [lang="ar"] { font-family: var(--arapca); }
.ikon { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Düğmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: var(--r-k); border: 1px solid transparent;
  font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.dugme--ana { background: var(--vurgu); color: #fff; }
.dugme--ana:hover { background: var(--vurgu-koyu); color: #fff; }
.dugme--cizgi { background: var(--kagit); border-color: var(--cizgi); color: var(--baslik); }
.dugme--cizgi:hover { border-color: var(--vurgu); color: var(--vurgu); }
.ikon-dugme {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-k); border: 1px solid var(--cizgi); background: var(--kagit); color: var(--baslik); cursor: pointer;
}
.ikon-dugme:hover { border-color: var(--vurgu); color: var(--vurgu); }

/* Etiketler */
.ust-yazi { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--altin); }
.rozet { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--vurgu-zemin); color: var(--vurgu-koyu); }
.rozet--altin { background: var(--altin-zemin); color: var(--altin); }
[data-tema="koyu"] .rozet { color: #8FD3CC; }

/* ==========================================================================
   3. Üst bilgi
   ========================================================================== */
.ust-serit { background: var(--panel); color: var(--panel-metin); font-size: 14px; }
.ust-serit .kap { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: space-between; min-height: 38px; }
.ust-serit a { color: var(--panel-metin); }
.ust-serit a:hover { color: var(--altin-parlak); }
.ust-serit__sol, .ust-serit__sag { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.ust-serit__oge { display: inline-flex; gap: 8px; align-items: center; }
.ust-serit .ikon { width: 16px; height: 16px; stroke: var(--altin-parlak); }

.baslik-alani { background: var(--kagit); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 50; }
.baslik-alani .kap { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.logo { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; }
.logo img { height: 56px; width: auto; display: block; }
[data-tema="koyu"] .logo img { background: #fff; border-radius: 10px; padding: 4px 8px; }
.logo__yazi { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--baslik); }

.ana-menu { display: none; }
.ana-menu ul { list-style: none; margin: 0; padding: 0; }
.ana-menu > ul { display: flex; gap: 2px; align-items: center; }
.ana-menu li { position: relative; }
.ana-menu a { display: flex; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 8px; font-weight: 600; font-size: 15.5px; color: var(--baslik); white-space: nowrap; }
.ana-menu a:hover, .ana-menu .current-menu-item > a, .ana-menu .current-menu-ancestor > a { color: var(--vurgu); }
.ana-menu .menu-item-has-children > a::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 4px; opacity: .6;
}
.ana-menu .sub-menu {
  position: absolute; left: 0; top: 100%; min-width: 260px; padding: 8px; background: var(--kagit);
  border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.ana-menu li:hover > .sub-menu, .ana-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ana-menu .sub-menu a { padding: 10px 12px; font-weight: 500; font-size: 15.5px; }
.ana-menu .sub-menu a:hover { background: var(--vurgu-zemin); }
.baslik-arac { display: flex; gap: 8px; align-items: center; }
.soru-sor-dugme { display: none; white-space: nowrap; }

/* Mobil menü */
.mobil-menu { position: fixed; inset: 0; z-index: 100; display: none; }
.mobil-menu.acik { display: block; }
.mobil-menu__perde { position: absolute; inset: 0; background: rgba(8, 18, 32, .55); }
.mobil-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--kagit);
  padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--golge);
}
.mobil-menu__ust { display: flex; justify-content: space-between; align-items: center; }
.mobil-menu ul { list-style: none; margin: 0; padding: 0; }
.mobil-menu a { display: block; padding: 12px 10px; border-radius: 8px; font-weight: 600; color: var(--baslik); }
.mobil-menu a:hover { background: var(--vurgu-zemin); }
.mobil-menu .sub-menu { padding-left: 14px; border-left: 2px solid var(--cizgi); margin: 0 0 6px 10px; }
.mobil-menu .sub-menu a { font-weight: 500; padding: 9px 10px; }

/* Arama katmanı */
.arama-katman { position: fixed; inset: 0; z-index: 110; display: none; background: rgba(8, 18, 32, .6); padding: 10vh 16px 16px; }
.arama-katman.acik { display: block; }
.arama-katman__kutu { max-width: 720px; margin: 0 auto; background: var(--kagit); border-radius: 18px; padding: 22px; box-shadow: var(--golge); }
.arama-katman__ipucu { font-size: 14px; color: var(--soluk); margin: 12px 4px 0; }

@media (min-width: 1080px) {
  .ana-menu { display: block; }
  .menu-ac { display: none; }
  .soru-sor-dugme { display: inline-flex; }
}

/* ==========================================================================
   4. Arama formu
   ========================================================================== */
.arama-formu {
  display: flex; background: var(--kagit); border: 2px solid var(--baslik); border-radius: 12px; overflow: hidden; max-width: 680px;
}
[data-tema="koyu"] .arama-formu { border-color: var(--vurgu); }
.arama-formu input[type="search"] {
  flex: 1 1 auto; min-width: 0; border: 0; padding: 16px 18px; font-size: 17px; background: transparent; outline: none;
}
.arama-formu button {
  border: 0; background: var(--baslik); color: var(--kagit); padding: 0 24px; font-weight: 700; display: flex; gap: 8px; align-items: center; cursor: pointer;
}
[data-tema="koyu"] .arama-formu button { background: var(--vurgu); color: #fff; }
.arama-formu button:hover { background: var(--vurgu); color: #fff; }

/* ==========================================================================
   5. Ana sayfa
   ========================================================================== */
.karsilama { background: var(--kagit); border-bottom: 1px solid var(--cizgi); }
.karsilama .kap { display: grid; gap: 40px; padding-top: 48px; padding-bottom: 56px; align-items: center; }
.karsilama__metin { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.karsilama h1 { margin: 0; font-size: clamp(34px, 5vw, 52px); line-height: 1.12; }
.karsilama__alt { margin: 0; font-size: 19px; color: var(--metin); max-width: 600px; }
.sik-arananlar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; }
.sik-arananlar span { color: var(--soluk); margin-right: 2px; }
.cip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--kagit-2); color: var(--baslik); }
.cip:hover { border-color: var(--vurgu); }

.hadise-git { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--vurgu-zemin); border: 1px solid var(--vurgu-cizgi); max-width: 680px; }
.hadise-git label { font-weight: 700; color: var(--vurgu-koyu); font-size: 15px; margin-right: 4px; }
[data-tema="koyu"] .hadise-git label { color: #8FD3CC; }
.hadise-git select, .hadise-git input { min-height: 44px; border: 1px solid var(--vurgu-cizgi); border-radius: 8px; background: var(--kagit); padding: 0 10px; }
.hadise-git input { width: 110px; }

.gunun-hadisi {
  position: relative; overflow: hidden; background: var(--panel); color: #fff; border-radius: 18px; padding: 30px;
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.gunun-hadisi__desen { position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; opacity: .3; stroke: var(--altin-parlak); fill: none; stroke-width: .8; }
.gunun-hadisi .ust-yazi { color: var(--altin-parlak); }
.gunun-hadisi__ar { margin: 0; font-family: var(--arapca); font-size: 29px; line-height: 1.95; text-align: right; }
.gunun-hadisi__tr { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--panel-metin); }
.gunun-hadisi__kaynak { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--panel-soluk); border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }
.gunun-hadisi__kaynak a { color: var(--altin-parlak); font-weight: 600; }

.gunluk { padding: 28px 0 8px; }
.gunluk__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.gunluk__oge {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--r); color: var(--baslik); font-weight: 600; min-height: 64px;
}
.gunluk__oge:hover { border-color: var(--vurgu); box-shadow: var(--golge); }
.gunluk__oge .ikon { color: var(--vurgu); width: 24px; height: 24px; }

.bolum { padding: 56px 0 8px; }
.bolum--kagit { background: var(--kagit); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); padding-bottom: 56px; margin-top: 56px; }
.bolum__bas { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.bolum__bas h2 { margin: 6px 0 0; font-size: clamp(28px, 3.4vw, 36px); }
.bolum__hepsi { font-weight: 600; padding: 10px 0; }

.dallar { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dal {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--r); color: var(--murekkep); min-height: 150px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dal:hover { border-color: var(--vurgu); box-shadow: var(--golge); transform: translateY(-2px); color: var(--murekkep); }
.dal__ust { display: flex; justify-content: space-between; align-items: center; }
.dal__harf { width: 46px; height: 46px; border-radius: 12px; background: var(--vurgu-zemin); color: var(--vurgu); display: flex; align-items: center; justify-content: center; font-family: var(--arapca); font-size: 24px; }
.dal__sayi { font-size: 14px; font-weight: 600; color: var(--soluk); }
.dal__ad { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--baslik); }
.dal__aciklama { font-size: 15px; color: var(--metin); line-height: 1.5; }

.iki-sutun { display: grid; gap: 28px; align-items: start; }
.soru-listesi { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; }
.soru {
  display: flex; gap: 18px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--cizgi-acik); color: var(--murekkep);
}
.soru:last-child { border-bottom: 0; }
.soru:hover { background: var(--kagit-2); color: var(--murekkep); }
.soru__tarih { flex: 0 0 56px; text-align: center; font-size: 13px; color: var(--soluk); line-height: 1.25; }
.soru__gun { display: block; font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--baslik); }
.soru__govde { flex: 1 1 auto; min-width: 0; }
.soru__dal { display: block; font-size: 12.5px; font-weight: 700; color: var(--vurgu); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.soru__baslik { display: block; font-family: var(--serif); font-size: 18.5px; font-weight: 600; line-height: 1.35; color: var(--baslik); }
.soru .ikon { color: var(--soluk); }

.soru-kutusu { background: var(--vurgu-zemin); border: 1px solid var(--vurgu-cizgi); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.soru-kutusu h3 { margin: 0; font-size: 24px; }
.soru-kutusu p { margin: 0; color: var(--metin); }

.raflar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.raf:first-child { grid-column: span 2; }
@media (min-width: 900px) { .raflar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.raf {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 168px; padding: 20px;
  border-radius: 12px; color: #fff; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.raf:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--golge); }
.raf::after { content: ""; position: absolute; inset: auto -30px -30px auto; width: 120px; height: 120px; border: 1px solid rgba(232, 207, 143, .35); transform: rotate(45deg); }
.raf .ikon { width: 28px; height: 28px; stroke: #E8CF8F; stroke-width: 1.8; }
.raf__ad { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; }
.raf__alt { font-size: 14px; color: rgba(255, 255, 255, .82); margin-top: 4px; }
.raf--1 { background: #17365D; } .raf--2 { background: #1F4A57; } .raf--3 { background: #1F6E6A; }
.raf--4 { background: #2B5876; } .raf--5 { background: #3C4E6B; } .raf--6 { background: #4A5A50; } .raf--7 { background: #5B4A2E; }
.one-cikan-eserler { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.one-cikan-eserler span { color: var(--soluk); font-size: 15px; margin-right: 2px; }
.one-cikan-eserler a { padding: 8px 14px; border-radius: 8px; background: var(--zemin); border: 1px solid var(--cizgi); font-size: 15px; font-weight: 600; }

.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.kart { display: flex; flex-direction: column; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; color: var(--murekkep); transition: box-shadow .15s, border-color .15s; }
.kart:hover { box-shadow: var(--golge); border-color: var(--vurgu-cizgi); color: var(--murekkep); }
.kart__gorsel { aspect-ratio: 16 / 9; background: #1F4A57; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kart__oynat { position: absolute; left: 14px; bottom: 14px; width: 48px; height: 48px; box-shadow: 0 2px 10px rgba(0,0,0,.25); border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.kart__oynat svg { width: 20px; height: 20px; fill: #17365D; margin-left: 3px; }
.kart__govde { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.kart__dal { font-size: 12.5px; font-weight: 700; color: var(--vurgu); text-transform: uppercase; letter-spacing: .06em; }
.kart__baslik { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--baslik); margin: 0; }
.kart__ozet { font-size: 15.5px; color: var(--metin); margin: 0; }
.kart__meta { font-size: 14px; color: var(--soluk); }

@media (min-width: 900px) {
  .karsilama .kap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .iki-sutun { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); }
}

/* ==========================================================================
   6. Yazı sayfası
   ========================================================================== */
.okuma-cubugu { position: fixed; left: 0; top: 0; height: 4px; width: 0; background: var(--vurgu); z-index: 60; transition: width .1s linear; }
.yazi-bas { background: var(--kagit); border-bottom: 1px solid var(--cizgi); }
.yazi-bas .kap { padding-top: 32px; padding-bottom: 36px; }
.konum { font-size: 14px; color: var(--soluk); display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 18px; }
.konum a { color: var(--soluk); }
.konum a:hover { color: var(--vurgu); }
.konum__ayrac { opacity: .5; }
.yazi-bas__rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.yazi-bas h1 { margin: 0; max-width: 940px; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.18; }
.yazi-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 15px; color: var(--soluk); align-items: center; }
.yazi-meta__oge { display: inline-flex; gap: 6px; align-items: center; }
.yazi-meta .ikon { width: 16px; height: 16px; }

.yazi-govde { display: grid; gap: 36px; padding-top: 36px; padding-bottom: 56px; align-items: start; }
.yazi-yan { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.icindekiler { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px; }
.icindekiler summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.icindekiler summary::-webkit-details-marker { display: none; }
.icindekiler summary .ust-yazi { margin: 0; }
.icindekiler ol { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.icindekiler a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--metin); }
.icindekiler a:hover { background: var(--vurgu-zemin); color: var(--vurgu-koyu); }
.icindekiler a.etkin { background: var(--vurgu-zemin); color: var(--vurgu-koyu); font-weight: 600; }
.icindekiler .alt a { padding-left: 22px; font-size: 14.5px; }
[data-tema="koyu"] .icindekiler a.etkin, [data-tema="koyu"] .icindekiler a:hover { color: #8FD3CC; }

.okuma-ayar { display: flex; gap: 8px; align-items: center; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px 14px; }
.okuma-ayar span { font-size: 14px; color: var(--soluk); margin-right: auto; }

.yazi-paylas { display: flex; flex-wrap: wrap; gap: 8px; }

/* İçerik tipografisi */
.icerik { min-width: 0; max-width: var(--okuma); font-family: var(--serif); font-size: var(--okuma-boyut); line-height: 1.8; color: var(--metin); overflow-wrap: break-word; }
.icerik > *:first-child { margin-top: 0; }
.icerik p { margin: 0 0 1.1em; }
.icerik h2 { font-size: 1.55em; margin: 1.8em 0 .6em; line-height: 1.3; }
.icerik h3 { font-size: 1.25em; margin: 1.6em 0 .5em; }
.icerik h4 { font-size: 1.08em; margin: 1.4em 0 .4em; }
.icerik a { color: var(--vurgu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.icerik ul, .icerik ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.icerik li { margin-bottom: .45em; }
.icerik blockquote { margin: 1.4em 0; padding: 18px 22px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); font-style: normal; }
.icerik blockquote p:last-child { margin-bottom: 0; }
.icerik img { border-radius: 10px; }
.icerik figure { margin: 1.4em 0; }
.icerik figcaption { font-family: var(--sans); font-size: 14px; color: var(--soluk); margin-top: 8px; }
.icerik table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 16px; margin: 1.4em 0; display: block; overflow-x: auto; }
.icerik th, .icerik td { border: 1px solid var(--cizgi); padding: 10px 12px; text-align: left; vertical-align: top; }
.icerik th { background: var(--kagit-2); color: var(--baslik); }
.icerik hr { border: 0; border-top: 1px solid var(--cizgi); margin: 2em 0; }
.icerik sup a { text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: .75em; }
.icerik .ar { font-size: 1.22em; line-height: 1.9; }
.icerik .ar-paragraf, .icerik p[dir="rtl"], .icerik div[dir="rtl"] {
  font-family: var(--arapca); font-size: 1.45em; line-height: 2.05; text-align: right; color: var(--murekkep);
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px 22px; margin: 1.2em 0;
}
.icerik .ar-paragraf .ar { font-size: 1em; }
.icerik .wp-block-file, .icerik .wp-block-button__link { font-family: var(--sans); }

.yazi-sonu { max-width: var(--okuma); display: flex; flex-direction: column; gap: 24px; margin-top: 36px; }
.etiketler { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--sans); }
.onceki-sonraki { display: grid; gap: 12px; border-top: 1px solid var(--cizgi); padding-top: 26px; }
.onceki-sonraki a { display: flex; flex-direction: column; gap: 4px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px 18px; }
.onceki-sonraki a:hover { border-color: var(--vurgu); }
.onceki-sonraki__yon { font-size: 13px; color: var(--soluk); }
.onceki-sonraki__baslik { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.4; }
.onceki-sonraki .sonraki { text-align: right; }
.ilgili h2 { font-size: 26px; margin: 0 0 16px; }

@media (min-width: 700px) { .onceki-sonraki { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) {
  .yazi-govde { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
  .yazi-yan { position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .yazi-govde--tam { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

/* ==========================================================================
   7. Liste sayfaları (kategori, arama, arşiv)
   ========================================================================== */
.liste-bas { background: var(--kagit); border-bottom: 1px solid var(--cizgi); }
.liste-bas .kap { padding-top: 32px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 12px; }
.liste-bas h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); }
.liste-bas__aciklama { margin: 0; color: var(--metin); max-width: 760px; font-size: 18px; }
.liste-bas__aciklama p { margin: 0; }
.alt-dallar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.liste-govde { padding-top: 32px; padding-bottom: 56px; }
.liste-sayi { color: var(--soluk); font-size: 15px; margin: 0 0 18px; }
.sayfalama { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sayfalama .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--r-k); background: var(--kagit); border: 1px solid var(--cizgi); font-weight: 600; }
.sayfalama .current { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.bos-sonuc { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 32px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.bos-sonuc .arama-formu { width: 100%; }

/* ==========================================================================
   8. Alt bilgi
   ========================================================================== */
.alt-bilgi { background: var(--panel-koyu); color: var(--panel-soluk); margin-top: 0; }
.alt-bilgi .kap { padding-top: 52px; padding-bottom: 28px; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.alt-bilgi h2 { font-size: 16px; font-family: var(--sans); font-weight: 700; color: #fff; margin: 0 0 12px; }
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alt-bilgi a { color: var(--panel-soluk); }
.alt-bilgi a:hover { color: var(--altin-parlak); }
.alt-bilgi__marka { font-family: var(--serif); font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.alt-bilgi__alt { border-top: 1px solid rgba(255, 255, 255, .12); }
.alt-bilgi__alt .kap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; padding-bottom: 24px; font-size: 14px; grid-template-columns: none; }

/* ==========================================================================
   9. Sayfa ve 404
   ========================================================================== */
.sayfa-govde { padding-top: 36px; padding-bottom: 56px; display: flex; justify-content: center; }
.hata-404 { padding: 72px 0; text-align: center; }
.hata-404 .kap { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.hata-404__ar { font-family: var(--arapca); font-size: 42px; color: var(--altin); margin: 0; }
.hata-404 .arama-formu { width: 100%; }

/* Bağımsız sayfa çerçevesi */
.gomulu-cerceve { width: 100%; border: 1px solid var(--cizgi); border-radius: 18px; background: var(--kagit); min-height: 70vh; display: block; }
.gomulu-serit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 18px 0 14px; }

/* Gece modunda yazı içindeki satır içi (Word'den gelen) renkleri yumuşat */
[data-tema="koyu"] .icerik [style*="color"] { color: inherit !important; }
[data-tema="koyu"] .icerik h2[style*="color"], [data-tema="koyu"] .icerik h3[style*="color"], [data-tema="koyu"] .icerik h4[style*="color"] { color: var(--baslik) !important; }
[data-tema="koyu"] .icerik [style*="background"] { background: var(--kagit-2) !important; border-color: var(--cizgi) !important; }
[data-tema="koyu"] .icerik a[style*="color"] { color: var(--vurgu-koyu) !important; }

/* Telefonda üst şerit tek satır */
@media (max-width: 699px) {
  .ust-serit__sag, .ust-serit__oge + .ust-serit__oge { display: none; }
  .ust-serit .kap { min-height: 34px; }
  .logo img { height: 46px; }
  .baslik-alani .kap { min-height: 66px; gap: 10px; }
  .baslik-arac { gap: 6px; }
  .okuma-ayar span { display: none; }
  .okuma-ayar { justify-content: flex-end; }
  .yazi-yan { flex-direction: row; flex-wrap: wrap; }
  .yazi-yan .icindekiler { flex: 1 1 100%; }
  .gunun-hadisi { padding: 24px; }
  .gunun-hadisi__ar { font-size: 25px; }
}

/* Hata bildirimi penceresi */
.io-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; }
.io-modal[hidden] { display: none; }
.io-modal__perde { position: absolute; inset: 0; background: rgba(8, 18, 32, .55); }
.io-modal__kutu { position: relative; width: 100%; max-width: 480px; background: var(--kagit); border-radius: 18px; padding: 28px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 12px; }
.io-modal__kutu h3 { margin: 0; font-size: 22px; padding-right: 48px; }
.io-modal__kutu p { margin: 0; color: var(--metin); font-size: 15px; }
.io-modal__kutu textarea, .io-modal__kutu input { width: 100%; border: 1px solid var(--cizgi); border-radius: var(--r-k); padding: 12px 14px; background: var(--kagit-2); font-size: 16px; }
.io-modal__kapat { position: absolute; top: 16px; right: 16px; }
.io-modal__uyari { color: #B03A2E !important; font-weight: 600; }
.io-modal__tamam { color: var(--vurgu) !important; font-weight: 700; }
.io-hata-satir { margin: 2.2em 0 0; font-family: var(--sans); }
.io-hata-satir .dugme { font-size: 15px; }
.bildir-kutu { width: 100%; max-width: 680px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 22px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.bildir-kutu input[type="email"] { width: 100%; border: 1px solid var(--cizgi); border-radius: var(--r-k); padding: 12px 14px; background: var(--kagit-2); }

/* Eski kütüphane şablonları (child temadan taşındı; okuyucu aşamasında yeniden tasarlanacak) */
body[class*="page-template-kitap-kapak"] #ana-icerik,
body[class*="page-template-kutuphane-ana"] #ana-icerik,
body[class*="page-template-kutuphane-reader"] #ana-icerik,
body[class*="page-template-kitap-reader"] #ana-icerik { max-width: 1100px; margin: 0 auto; padding: 28px 20px 56px; }

/* Eski kısa kodların karşılıkları */
.io-kutu { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px 22px; margin: 1.2em 0; }
.io-sutun { margin: 0 0 1em; }

/* WordPress hizalama sınıfları */
.alignleft { float: left; margin: .3em 1.2em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.2em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .ust-serit, .baslik-alani, .yazi-yan, .alt-bilgi, .okuma-cubugu, .yazi-sonu .onceki-sonraki, .ilgili { display: none !important; }
  body { background: #fff; } .icerik { max-width: none; font-size: 12pt; }
}