/* =========================================================================
   Fi Yayınları — arayüz katmanı
   Ana tema (Bookory) dosyalarına dokunulmaz; her şey buradan üstüne yazar.
   ========================================================================= */

:root {
  --fi-ink:      #101821;
  --fi-ink-2:    #55636E;
  /* Soluk metin. Yalnız BEYAZDA ölçülmüştü (4,64) ama --fi-mist ve
     --fi-mist-2 zeminlerinde 4,28 ve 3,91'e düşüyordu. Üç zeminde de
     geçen ilk ton: beyaz 5,77 · mist 5,32 · mist-2 4,86. */
  --fi-ink-3:    #5D6770;
  --fi-paper:    #FFFFFF;
  /* Nötrler markaya göre seçilir: yeşil markada yeşile çalıyorlardı,
     kırmızı markada sıcağa çalıyorlar. Saf gri "seçilmemiş" gibi durur. */
  --fi-mist:     #F8F5F4;
  --fi-mist-2:   #F1EAE9;
  --fi-line:     #EBE0DE;
  /* Tablolarda satır ayracı. Tanımsızken `border: 1px solid var(--fi-line-soft)`
     bildirimi tümüyle geçersiz oluyor ve çizgi hiç çizilmiyordu. */
  --fi-line-soft: #F5EEED;
  /* Marka rengi. Tonlar WCAG AA'ya göre seçildi:
     --fi-ana beyaz YAZI taşıyan zemin (4,98:1),
     --fi-ana-koyu beyaz üstünde YAZI olarak kullanılıyor (7,33:1). */
  --fi-ana:       #D32F2F;
  --fi-ana-koyu:  #A6221A;
  --fi-ana-soluk: #FBE9E7;
  /* Hata / yıkıcı eylem. Marka kırmızı olduğu için bu tondan belirgin
     biçimde KOYU seçildi; anlamı asıl taşıyan yine metin ve simge. */
  --fi-red:      #8A1F14;

  /* Beyaz yazı taşıyan KOYU YÜZEY. --fi-ink hem metin rengi hem zemin olarak
     kullanılıyordu; koyu modda metin rengi açığa dönünce beyaz yazılı bu
     zeminler beyaz üstünde beyaz kalıyordu. Ayrı belirteç, her iki modda da
     koyu kalır. */
  --fi-koyu-yuzey: #101821;

  /* Bayi yoğunluk ölçeği — haritadaki il dolguları. Mavi: harita marka
     rengiyle yarışmasın, veri olarak okunsun (geri bildirim 7). Basamaklar
     kırmızı ölçeğin kontrast profilini koruyor; zemine göre 1,2 → 6,2. */
  --fi-yog-0: #E0E4E9;   /* bayi yok */
  --fi-yog-1: #B4CCE8;   /* 1 bayi   */
  --fi-yog-2: #6A97CE;   /* 2–4      */
  --fi-yog-3: #1C5CA6;   /* 5+       */
  --fi-kapak-zemin: #F4F1F0;  /* kapak tablası — kapak görselleri beyaz zeminli
                                  çekildiği için tabla da açık kalmalı */
  --fi-yog-vurgu:  #2F7CD1;   /* imleç ve klavye odağı */
  --fi-yog-secili: #0E3A6B;   /* seçili il */
  /* Marka renginin ZEMİN olarak kullanıldığı hâli (rozet, düğme). --fi-ana-koyu
     koyu modda AÇIK bir metin tonuna dönüyor; beyaz yazı taşıyan zeminler için
     ayrı belirteç gerekiyor. Beyaz yazı: açık 7,33:1 · koyu 6,45:1. */
  --fi-ana-yuzey: #A6221A;

  --fi-f: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fi-r:  14px;
  --fi-r-s: 8px;

  --fi-gecis: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* ================================================================ BANNER */

/* Slider Revolution eklentisi yok — ana sayfadaki boş slider bölümünü gizle */
.home .elementor-element-12ae548 { display: none !important; }

.fi-hero {
  position: relative;
  background:
    linear-gradient(118deg, #8F1C16 0%, #A6221A 46%, #C0271C 100%);
  color: #fff;
  padding: clamp(44px, 5.5vw, 80px) 24px clamp(76px, 8vw, 118px);
  /* clip yerine hidden kullanılırsa banner bir kaydırma kabına dönüşür ve
     sekmeye odaklanıldığında tarayıcı içeriği yana kaydırır. */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* sağ üstte açılı aydınlık panel — referanstaki diyagonal ayrım */
.fi-hero::before {
  content: "";
  position: absolute;
  inset: -20% -30% -20% 42%;
  background: linear-gradient(120deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 70%);
  transform: skewX(-11deg);
  z-index: -1;
}
/* yumuşak ışık */
.fi-hero::after {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  right: -80px; top: -220px;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 62%);
  z-index: -1;
}

/* Kahramanda artık yalnızca kitaplar var: iki sütunlu düzen tek sütuna
   indi, kapaklar bandın tamamını kullanıyor. */
.fi-hero-ic {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: block;
  font-family: var(--fi-f);
}

/* ------------------------------------------------------------------ sol */

.fi-hero-ust {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
  margin: 0 0 18px;
}

.fi-hero-baslik {
  font-family: var(--fi-f);
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}

.fi-hero-vurgu { position: relative; white-space: nowrap; }
.fi-hero-vurgu::after {
  content: "";
  position: absolute;
  right: -.17em; top: .08em;
  width: .17em; height: .17em;
  border-radius: 50%;
  /* Kırmızı kahraman zemininde kırmızı nokta kayboluyordu; beyaz duruyor. */
  background: #fff;
}

.fi-hero-alt {
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.58;
  font-weight: 500;
  color: rgba(255,255,255,.80);
  max-width: 42ch;
  margin: 0 0 clamp(26px, 3vw, 36px);
}

.fi-hero-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

.fi-dugme--parlak {
  background: #fff; border-color: #fff; color: var(--fi-koyu-yuzey) !important;
}
.fi-dugme--parlak:hover { background: var(--fi-mist); border-color: var(--fi-mist); color: var(--fi-ink) !important; }

.fi-dugme--seffaf {
  background: transparent;
  border-color: rgba(255,255,255,.42);
  color: #fff !important;
}
.fi-dugme--seffaf:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff !important; }

/* ------------------------------------------------------------------ sağ */

.fi-hero-sag { display: flex; flex-direction: column; gap: 20px; }

.fi-sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.fi-sekme {
  appearance: none;
  cursor: pointer;
  font-family: var(--fi-f);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  transition: background var(--fi-gecis), border-color var(--fi-gecis), color var(--fi-gecis), transform var(--fi-gecis);
}
.fi-sekme span { font-size: 12px; font-weight: 700; opacity: .72; }
.fi-sekme:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.fi-sekme.aktif {
  background: #fff;
  border-color: #fff;
  color: var(--fi-koyu-yuzey);
  transform: translateY(-1px);
}
.fi-sekme.aktif span { opacity: .55; }

/* --- kitap sahnesi ----------------------------------------------------- */

/* Sahne, sınıfın Define kitaplarının tamamını taşıyor: üç kapaklık yelpaze
   yerine bir kapak duvarı. Yükseklik sabit değil — 6 kitaplık sınıfla 9
   kitaplık sınıf aynı kutuya sıkıştırılmıyor. */
.fi-sahne {
  position: relative;
  perspective: 1100px;
  --fi-x: 0px; --fi-y: 0px; --fi-egim: 0deg;
}

/* Izgara değil sarmalı sıra: son satır ortalanıyor. Izgarada 9 kitap
   7+2 diye asimetrik dağılıyordu. Sabit üst genişlik de şart — esneyen
   kapak, tek kitaplı sınıfta bütün bandı kaplayıp devasa duruyordu. */
.fi-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  animation: fi-set-gir 320ms ease both;
}
.fi-sahne-kitap { flex: 0 1 138px; max-width: 138px; }
.fi-set[hidden] { display: none !important; }

@keyframes fi-set-gir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.fi-sahne-kitap {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 32px -16px rgba(0,0,0,.55);
  transform: translate3d(calc(var(--fi-x) * .35), calc(var(--fi-y) * .35), 0);
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2,.7,.3,1), box-shadow var(--fi-gecis);
  text-decoration: none !important;
}
.fi-sahne-kitap img { display: block; width: 100%; height: auto; }
.fi-sahne-kitap .fi-kapak { width: 100%; margin: 0; box-shadow: none; }
.fi-sahne-kitap .fi-kapak .fi-kapak-ders { font-size: 16px; line-height: 1.15; }
.fi-sahne-kitap .fi-kapak .fi-kapak-ic { padding: 18px 13px 15px 19px; }
.fi-sahne-kitap .fi-kapak .fi-kapak-sinif { font-size: 32px; top: 14px; right: 14px; }

.fi-sahne-kitap:hover {
  position: relative;
  z-index: 4;
  transform: translate3d(calc(var(--fi-x) * .35), calc(var(--fi-y) * .35 - 6px), 60px) scale(1.05);
  box-shadow: 0 30px 54px -18px rgba(0,0,0,.62);
}

.fi-sahne-git {
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition: color var(--fi-gecis), border-color var(--fi-gecis);
}
.fi-sahne-git:hover { color: #fff !important; border-color: #fff; }

/* --- alt dalga ---------------------------------------------------------- */

.fi-hero-dalga {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(48px, 6vw, 90px);
  display: block;
  z-index: 1;
}
.fi-hero-dalga path { fill: var(--fi-paper); }

/* --- mobil -------------------------------------------------------------- */

@media (max-width: 900px) {
  .fi-hero::before { inset: -20% -40% 44% -40%; transform: skewY(-6deg); }
}
@media (max-width: 640px) {
  .fi-hero { padding-left: 18px; padding-right: 18px; }
  .fi-set { gap: 10px; }
  .fi-sahne-kitap { flex-basis: 96px; max-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-set, .fi-sahne-kitap { transition: none; }
  .fi-set { animation: none; }
}

/* ========================================================== KAPAKSIZ KİTAP */

.fi-kapak {
  position: relative;
  display: block;
  /* Gerçek kapaklar dikey; yer tutucu da aynı oranda dursun ki ızgarada
     başlıklar aynı hizaya gelsin. */
  width: min(78%, 260px);
  margin: 0 auto;
  aspect-ratio: 5 / 7;
  border-radius: var(--fi-r-s);
  box-shadow: 0 18px 34px -20px rgba(16, 24, 33, .55);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--fi-kapak-renk) 90%, #000 0%) 0%,
      color-mix(in srgb, var(--fi-kapak-renk) 74%, #000 26%) 100%);
  overflow: hidden;
  font-family: var(--fi-f);
}

/* kitap sırtı */
.fi-kapak-sirt {
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .16);
}

.fi-kapak-ic {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 24px 18px 20px 26px;
  color: #fff;
}

.fi-kapak-sinif {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 46px;
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .30);
  text-align: right;
}
.fi-kapak-sinif small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 3px;
}

.fi-kapak-seri {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.fi-kapak-ders {
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.fi-kapak-tur {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .66);
  margin-top: 2px;
}

/* =============================================================== ÜRÜN KARTI */

.bookory-products .product-block,
ul.products .product-block {
  border-radius: var(--fi-r);
  transition: transform var(--fi-gecis);
}

ul.products li.product img,
.bookory-products li.product img {
  border-radius: var(--fi-r-s);
}

ul.products li.product,
.bookory-products li.product {
  transition: transform var(--fi-gecis);
}
ul.products li.product:hover,
.bookory-products li.product:hover {
  transform: translateY(-4px);
}

.woocommerce-loop-product__title,
.bookory-products .woocommerce-loop-product__title {
  font-family: var(--fi-f) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: -.012em;
}
.woocommerce-loop-product__title a { color: var(--fi-ink) !important; }
.woocommerce-loop-product__title a:hover { color: var(--fi-ana-koyu) !important; }

/* yazar satırı (tema burayı marka taksonomisinden basıyor) */
.woocommerce-loop-product__author {
  font-family: var(--fi-f);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fi-ink-3);
}
.woocommerce-loop-product__author a { color: inherit !important; }
.woocommerce-loop-product__author a:hover { color: var(--fi-ana-koyu) !important; }

/* ders rozeti */
.fi-rozet {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--fi-f);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fi-rozet-renk, var(--fi-ink-2));
}

/* ============================================================ ARŞİV BAŞLIĞI */

.woocommerce-products-header,
.taxonomy-description,
.term-description {
  font-family: var(--fi-f);
}

.term-description,
.taxonomy-description {
  max-width: 70ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--fi-ink-2);
  font-weight: 500;
  margin: 0 0 26px;
  padding-left: 16px;
  border-left: 3px solid var(--fi-ana);
}
.term-description p:last-child,
.taxonomy-description p:last-child { margin-bottom: 0; }

.fi-arsiv-sayac {
  font-family: var(--fi-f);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fi-ana-koyu);
  margin: 0 0 10px;
}

/* ============================================================== KENAR ÇUBUĞU */

#secondary .widget {
  font-family: var(--fi-f);
  background: var(--fi-mist);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  padding: 22px 22px 24px;
  margin-bottom: 20px;
}
#secondary .widget .widget-title,
#secondary .widget .gamma {
  font-family: var(--fi-f) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fi-ink-3) !important;
  display: block;
  margin-bottom: 14px;
}
#secondary .widget ul li a { font-weight: 600; color: var(--fi-ink) !important; }
#secondary .widget ul li a:hover { color: var(--fi-ana-koyu) !important; }

/* ================================================================ YAZAR DİZİNİ */

.fi-yazar-dizini { font-family: var(--fi-f); }
.fi-yazar-grup { break-inside: avoid; }
.fi-yazar-harf {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em;
  color: var(--fi-ana-koyu) !important;
  border-bottom: 2px solid var(--fi-line) !important;
  opacity: 1 !important;
}
.fi-yazar-liste li a {
  font-weight: 600;
  color: var(--fi-ink) !important;
}
.fi-yazar-liste li a:hover { color: var(--fi-ana-koyu) !important; }
.fi-yazar-adet {
  font-weight: 600;
  color: var(--fi-ink-3);
  opacity: 1 !important;
}

/* ==================================================== DÜĞMELER / SAYFALAMA */

.woocommerce-pagination ul.page-numbers {
  font-family: var(--fi-f);
  display: flex;
  gap: 6px;
  border: 0 !important;
}
.woocommerce-pagination .page-numbers li > * {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fi-r-s);
  border: 1px solid var(--fi-line);
  font-weight: 700;
  color: var(--fi-ink);
  transition: background var(--fi-gecis), color var(--fi-gecis), border-color var(--fi-gecis);
}
.woocommerce-pagination .page-numbers li > .current {
  background: var(--fi-koyu-yuzey);
  border-color: var(--fi-koyu-yuzey);
  color: #fff;
}
.woocommerce-pagination .page-numbers li > a:hover {
  border-color: var(--fi-ink);
}

/* =============================================================== ERİŞİLEBİLİRLİK */

a:focus-visible,
button:focus-visible,
.fi-sinif:focus-visible,
.fi-seri-cip:focus-visible {
  outline: 3px solid var(--fi-ana);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .fi-sinif:hover, ul.products li.product:hover { transform: none; }
}

/* ==================================================================== MOBİL */

@media (max-width: 640px) {
  .fi-hero { padding-left: 18px; padding-right: 18px; }
  .fi-sinif-secici { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fi-sinif { padding: 18px 16px 16px; }
  .fi-sinif-no { font-size: 38px; }
  .fi-kapak-ic { padding: 20px 16px 16px 22px; }
  .fi-kapak-sinif { font-size: 30px; top: 16px; right: 16px; }
}

/* =========================================================================
   ANA SAYFA — Elementor'suz, katalogdan üretilen bölümler
   ========================================================================= */

.fi-ana { font-family: var(--fi-f); }

/* tam genişlik: .col-full kabından taşar */
.fi-tam {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.fi-bolum { padding: clamp(54px, 7vw, 92px) 0; }
.fi-bolum + .fi-bolum { border-top: 1px solid var(--fi-line); }

.fi-bolum-bas { margin-bottom: clamp(26px, 3vw, 40px); }
.fi-bolum-bas--satir {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.fi-bolum-ust {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fi-ana-koyu);
  margin: 0 0 10px;
}
.fi-bolum-ust--acik { color: rgba(255,255,255,.62); }

.fi-bolum-baslik {
  font-family: var(--fi-f);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.032em;
  color: var(--fi-ink);
  margin: 0;
  text-wrap: balance;
}

.fi-bolum-alt {
  font-size: 16.5px;
  line-height: 1.58;
  font-weight: 500;
  color: var(--fi-ink-2);
  max-width: 56ch;
  margin: 14px 0 0;
}

/* ------------------------------------------------------------- düğmeler */

.fi-dugme, button.fi-dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--fi-koyu-yuzey);
  border: 1.5px solid var(--fi-ink);
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--fi-gecis), color var(--fi-gecis), border-color var(--fi-gecis), transform var(--fi-gecis);
}
.fi-dugme:hover, button.fi-dugme:hover { transform: translateY(-2px); background: var(--fi-ana-koyu); border-color: var(--fi-ana-koyu); }

.fi-dugme--cizgi {
  background: transparent;
  color: var(--fi-ink) !important;
  border-color: var(--fi-line);
}
.fi-dugme--cizgi:hover { background: var(--fi-koyu-yuzey); color: #fff !important; border-color: var(--fi-koyu-yuzey); }

.fi-dugme--acik {
  background: #fff;
  border-color: #fff;
  color: var(--fi-koyu-yuzey) !important;
}
.fi-dugme--acik:hover { background: var(--fi-ana); border-color: var(--fi-ana); color: #fff !important; }

/* --------------------------------------------------------------- seriler */

.fi-seri-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.fi-seri-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px 22px;
  background: var(--fi-paper);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  text-decoration: none !important;
  overflow: hidden;
  transition: transform var(--fi-gecis), box-shadow var(--fi-gecis);
}
.fi-seri-kart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--fi-seri-renk);
}
.fi-seri-kart:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px -24px rgba(16,24,33,.45);
}

.fi-seri-ad {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--fi-ink);
}
/* Seri ve ders renkleri ROZET zemini olarak seçilmişti (beyaz yazıyla).
   Küçük METİN olarak açık zeminde kullanıldıklarında AA'nın altına düşüyorlar:
   Hadi+ 2,84 · Wifi 3,82 · Define 4,04. %75 siyahla karıştırınca hepsi
   4,69:1 ve üstüne çıkıyor. Rozet kullanımlarına dokunulmuyor. */
.fi-seri-adet {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fi-seri-renk);
  color: color-mix(in srgb, var(--fi-seri-renk) 75%, #000);
}
.fi-seri-metin {
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--fi-ink-2);
  margin-top: 2px;
}
.fi-seri-git {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fi-ink);
}
.fi-seri-kart:hover .fi-seri-git { color: color-mix(in srgb, var(--fi-seri-renk) 75%, #000); }

/* --------------------------------------------------------------- dersler */

.fi-ders-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.fi-ders-kart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--fi-r-s);
  background: var(--fi-mist);
  border: 1px solid transparent;
  border-left: 4px solid var(--fi-ders-renk);
  text-decoration: none !important;
  transition: background var(--fi-gecis), transform var(--fi-gecis);
}
.fi-ders-kart:hover { background: var(--fi-mist-2); transform: translateX(3px); }

.fi-ders-ad {
  font-size: 15px;
  font-weight: 700;
  color: var(--fi-ink);
  line-height: 1.25;
}
.fi-ders-adet {
  font-size: 15px;
  font-weight: 800;
  color: var(--fi-ders-renk);
  color: color-mix(in srgb, var(--fi-ders-renk) 75%, #000);   /* bkz. .fi-seri-adet */
  font-variant-numeric: tabular-nums;
}

.fi-tur-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.fi-tur-etiket {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-ink-3); margin-right: 4px;
}
.fi-tur-cip, .fi-yazar-cip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  font-size: 13.5px; font-weight: 700;
  color: var(--fi-ink) !important; text-decoration: none !important;
  transition: background var(--fi-gecis), border-color var(--fi-gecis), color var(--fi-gecis);
}
.fi-tur-cip span, .fi-yazar-cip span {
  font-size: 11.5px; font-weight: 700; color: var(--fi-ink-3);
  font-variant-numeric: tabular-nums;
}
.fi-tur-cip:hover, .fi-yazar-cip:hover {
  background: var(--fi-koyu-yuzey); border-color: var(--fi-koyu-yuzey); color: #fff !important;
}
.fi-tur-cip:hover span, .fi-yazar-cip:hover span { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------- kitap vitrini */

.fi-kitap-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 26px 20px;
}

.fi-kitap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none !important;
  transition: transform var(--fi-gecis);
}
.fi-kitap:hover { transform: translateY(-5px); }

.fi-kitap-gorsel {
  display: block;
  background: var(--fi-kapak-zemin);
  border-radius: var(--fi-r);
  padding: 18px;
  aspect-ratio: 1 / 1.12;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fi-kitap-gorsel img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(16,24,33,.24));
  /* Kapak görsellerinin beyaz zemini dosyanın içinde. Tablanın üstünde bu
     beyaz dikdörtgen bir çerçeve gibi görünüyordu. Çarpma karışımıyla beyaz
     tablaya karışıyor, geriye yalnızca kitap kalıyor. */
  mix-blend-mode: multiply;
}
.fi-kitap-gorsel .fi-kapak { width: min(72%, 190px); }

.fi-kitap-bilgi { display: flex; flex-direction: column; gap: 5px; }
.fi-kitap-ad {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--fi-ink);
}
.fi-kitap:hover .fi-kitap-ad { color: var(--fi-ana-koyu); }
.fi-kitap-meta { font-size: 12.5px; font-weight: 600; color: var(--fi-ink-3); }
.fi-kitap .fi-rozet { align-self: flex-start; margin-bottom: 2px; }

/* ------------------------------------------------------------- bantlar */

.fi-band {
  background: var(--fi-koyu-yuzey);
  color: #fff;
  padding: clamp(52px, 6.5vw, 88px) 24px;
  margin-top: clamp(54px, 7vw, 92px);
}
.fi-band--acik {
  background:
    radial-gradient(700px 340px at 82% 8%, #C0271C 0%, transparent 60%),
    #4A100C;
}
/* Bandın zemini artık kırmızı; üst etiketi de marka kırmızısı olsaydı
   kırmızı üstünde kırmızı kalırdı. Beyaza yakın ton kullanılıyor. */
.fi-band .fi-bolum-ust { color: rgba(255, 255, 255, .72); }

.fi-band-ic {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.fi-band-ic--dar { grid-template-columns: 1fr; max-width: 760px; text-align: center; }
.fi-band-ic--dar .fi-band-alt { margin-inline: auto; }
.fi-band-ic--dar .fi-band-dugmeler { justify-content: center; }

.fi-band-baslik {
  font-size: clamp(27px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.032em;
  color: #fff;
  margin: 0 0 14px;
  text-wrap: balance;
}
.fi-band-alt {
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(255,255,255,.74);
  max-width: 52ch;
  margin: 0 0 24px;
}
.fi-band-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.fi-band .fi-dugme--cizgi { color: #fff !important; border-color: rgba(255,255,255,.32); }
.fi-band .fi-dugme--cizgi:hover { background: #fff; color: var(--fi-koyu-yuzey) !important; border-color: #fff; }

.fi-band-sayilar { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fi-band-sayilar li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--fi-r-s);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.fi-band-sayilar strong {
  font-size: 34px; font-weight: 800; letter-spacing: -.04em;
  color: #fff; font-variant-numeric: tabular-nums; min-width: 58px;
}
.fi-band-sayilar span { font-size: 13px; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,.66); }

/* ------------------------------------------------------ dijital ürünler */

.fi-dijital-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.fi-dijital {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 24px 22px;
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  background: var(--fi-paper);
  text-decoration: none !important;
  transition: border-color var(--fi-gecis), transform var(--fi-gecis), box-shadow var(--fi-gecis);
}
.fi-dijital:hover {
  transform: translateY(-4px);
  border-color: var(--fi-ana);
  box-shadow: 0 20px 38px -26px rgba(16,24,33,.42);
}
.fi-dijital-ad { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--fi-ink); }
.fi-dijital-metin { font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--fi-ink-2); }
.fi-dijital-git {
  margin-top: auto; padding-top: 14px;
  font-size: 13px; font-weight: 700; color: var(--fi-ana-koyu);
}

/* -------------------------------------------------------------- yazarlar */

.fi-yazar-serit { display: flex; flex-wrap: wrap; gap: 9px; }

/* ------------------------------------------------------------------ blog */

.fi-yazi-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.fi-yazi {
  display: flex; flex-direction: column;
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform var(--fi-gecis), box-shadow var(--fi-gecis);
}
.fi-yazi:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -26px rgba(16,24,33,.42); }
.fi-yazi-gorsel { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fi-mist); }
.fi-yazi-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.fi-yazi-bilgi { display: flex; flex-direction: column; gap: 7px; padding: 22px 22px 24px; }
.fi-yazi-tarih {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-yazi-ad { font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.022em; color: var(--fi-ink); }
.fi-yazi:hover .fi-yazi-ad { color: var(--fi-ana-koyu); }
.fi-yazi-ozet { font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--fi-ink-2); }

/* ----------------------------------------------------------------- mobil */

@media (max-width: 860px) {
  .fi-band-ic { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fi-kitap-izgara { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .fi-ders-izgara { grid-template-columns: repeat(2, 1fr); }
  .fi-bolum-bas--satir { align-items: flex-start; flex-direction: column; }
  .fi-band-sayilar strong { font-size: 28px; min-width: 48px; }
}

/* =========================================================================
   KİTAP SAYFASI
   ========================================================================= */

.fi-kitap-sayfa { font-family: var(--fi-f); }

.fi-kitap-ust {
  display: grid;
  grid-template-columns: minmax(240px, 400px) 1fr;
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
  padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5vw, 64px);
}

.fi-kitap-kapak {
  position: sticky;
  top: 24px;
  background: var(--fi-kapak-zemin);
  border-radius: var(--fi-r);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fi-kitap-kapak img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fi-r-s);
  filter: drop-shadow(0 22px 34px rgba(16,24,33,.28));
  mix-blend-mode: multiply;
}
.fi-kitap-kapak .fi-kapak { width: min(86%, 300px); }

/* --- kimlik ------------------------------------------------------------ */

.fi-kitap-kimlik { display: flex; flex-direction: column; gap: 18px; }

.fi-kitap-etiketler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fi-kitap-etiketler .fi-rozet { text-decoration: none !important; margin: 0; }
.fi-etiket {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--fi-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--fi-ink-2) !important;
  text-decoration: none !important;
  transition: border-color var(--fi-gecis), color var(--fi-gecis);
}
.fi-etiket:hover { border-color: var(--fi-ink); color: var(--fi-ink) !important; }

.fi-kitap-h1 {
  font-family: var(--fi-f) !important;
  font-size: clamp(26px, 3.6vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em;
  color: var(--fi-ink) !important;
  margin: 0 !important;
  text-wrap: balance;
}

.fi-kitap-yazarlar {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fi-ink);
  line-height: 1.6;
}
.fi-kitap-yazarlar span {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fi-ink-3);
  margin-bottom: 4px;
}
.fi-kitap-yazarlar a { color: var(--fi-ink) !important; text-decoration: none; border-bottom: 1.5px solid var(--fi-line); }
.fi-kitap-yazarlar a:hover { color: var(--fi-ana-koyu) !important; border-color: var(--fi-ana); }

.fi-kitap-isbn {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fi-ink-3);
}
.fi-kitap-isbn strong { color: var(--fi-ink-2); font-variant-numeric: tabular-nums; }

/* --- künye ------------------------------------------------------------- */

.fi-kunye {
  margin: 4px 0 0;
  border-top: 1px solid var(--fi-line);
}
.fi-kunye-satir {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fi-line-soft, var(--fi-line));
}
.fi-kunye dt { font-size: 14px; font-weight: 600; color: var(--fi-ink-2); margin: 0; }
.fi-kunye dd {
  font-size: 14px; font-weight: 700; color: var(--fi-ink); margin: 0;
  text-align: right; font-variant-numeric: tabular-nums;
}

.fi-kitap-aciklama {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--fi-ink-2);
}
.fi-kitap-aciklama p:last-child { margin-bottom: 0; }

/* --- temin --------------------------------------------------------------- */

.fi-kitap-temin {
  margin-top: 6px;
  padding: 22px 24px;
  border-radius: var(--fi-r);
  background: var(--fi-ana-soluk);
  border: 1px solid #F6C9C4;
}
.fi-kitap-temin p {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fi-ana-koyu);
}
.fi-kitap-temin strong { color: var(--fi-ana-koyu); }

/* --- ilişkili ------------------------------------------------------------ */

.fi-kitap-iliskili { border-top: 1px solid var(--fi-line); }

@media (max-width: 860px) {
  .fi-kitap-ust { grid-template-columns: 1fr; }
  .fi-kitap-kapak { position: static; max-width: 340px; }
}

/* --- yer tutucu kapak: küçük kartlarda ölçek ---------------------------- */

.fi-kapak-ders { hyphens: none; overflow-wrap: normal; word-break: normal; }

.fi-kitap-gorsel .fi-kapak .fi-kapak-ic { padding: 16px 12px 14px 18px; gap: 2px; }
.fi-kitap-gorsel .fi-kapak .fi-kapak-ders { font-size: 15px; line-height: 1.15; }
.fi-kitap-gorsel .fi-kapak .fi-kapak-sinif { font-size: 30px; top: 13px; right: 13px; }
.fi-kitap-gorsel .fi-kapak .fi-kapak-seri { font-size: 9.5px; letter-spacing: .14em; }
.fi-kitap-gorsel .fi-kapak .fi-kapak-tur  { font-size: 10.5px; }
.fi-kitap-gorsel .fi-kapak .fi-kapak-sirt { width: 6px; }

ul.products .fi-kapak .fi-kapak-ders,
.bookory-products .fi-kapak .fi-kapak-ders { font-size: 17px; line-height: 1.15; }

/* --- banner düğmeleri: temel .fi-dugme kuralı dosyada sonra geldiği için
       özgüllüğü artırıyoruz (yoksa koyu zeminli hâli kazanıyor) ---------- */

.fi-hero .fi-dugme--parlak {
  background: #fff;
  border-color: #fff;
  color: var(--fi-koyu-yuzey) !important;
}
.fi-hero .fi-dugme--parlak:hover {
  background: var(--fi-mist);
  border-color: var(--fi-mist);
  color: var(--fi-ink) !important;
  transform: translateY(-2px);
}

.fi-hero .fi-dugme--seffaf {
  background: transparent;
  border-color: rgba(255,255,255,.45);
  color: #fff !important;
}
.fi-hero .fi-dugme--seffaf:hover {
  background: rgba(255,255,255,.14);
  border-color: #fff;
  color: #fff !important;
}

/* =========================================================================
   SAYFA BAŞLIĞI BANDI — ana sayfa dışındaki her sayfanın üstü
   ========================================================================= */

.fi-sayfa-bas {
  background:
    radial-gradient(760px 340px at 12% -30%, #FBEAE8 0%, transparent 64%),
    var(--fi-mist);
  border-bottom: 1px solid var(--fi-line);
  padding: clamp(38px, 5vw, 66px) 24px clamp(32px, 4vw, 52px);
  margin-bottom: clamp(30px, 4vw, 48px);
}
.fi-sayfa-bas-ic { max-width: 1180px; margin: 0 auto; font-family: var(--fi-f); }

.fi-sayfa-ust {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fi-ana-koyu);
  margin: 0 0 12px;
}

.fi-sayfa-h1 {
  font-family: var(--fi-f) !important;
  font-size: clamp(30px, 4.4vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -.034em;
  color: var(--fi-ink) !important;
  margin: 0 !important;
  text-wrap: balance;
  max-width: 22ch;
}

.fi-sayfa-alt {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--fi-ink-2);
  max-width: 62ch;
  margin-top: 14px;
}
.fi-sayfa-alt p { margin: 0 0 10px; max-width: none; }
.fi-sayfa-alt p:last-child { margin-bottom: 0; }

.fi-sayfa-sayac {
  margin: 16px 0 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fi-ana-koyu);
}

/* =============================================================== ARŞİVLER */

.fi-arsiv { font-family: var(--fi-f); padding-bottom: clamp(48px, 6vw, 80px); }

.fi-arsiv-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--fi-line);
}
.fi-tur-cip.aktif {
  background: var(--fi-koyu-yuzey);
  border-color: var(--fi-koyu-yuzey);
  color: #fff !important;
}
.fi-tur-cip.aktif span { color: rgba(255,255,255,.6); }

.fi-arsiv-arac {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 22px;
}
.fi-arsiv-arac .woocommerce-ordering select {
  font-family: var(--fi-f);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--fi-line);
  background: var(--fi-paper);
  color: var(--fi-ink);
}

.fi-eksenler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 24px;
  border-top: 1px solid var(--fi-line);
}
.fi-eksen {
  font-size: 14px;
  font-weight: 700;
  color: var(--fi-ink) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid var(--fi-line);
  padding-bottom: 2px;
  transition: border-color var(--fi-gecis), color var(--fi-gecis);
}
.fi-eksen:hover { color: var(--fi-ana-koyu) !important; border-color: var(--fi-ana); }

/* boş sonuç */
.fi-bos {
  padding: clamp(40px, 6vw, 72px) 28px;
  border: 1px dashed var(--fi-line);
  border-radius: var(--fi-r);
  text-align: center;
  background: var(--fi-mist);
}
.fi-bos-baslik {
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: var(--fi-ink); margin: 0 0 8px;
}
.fi-bos p { color: var(--fi-ink-2); margin: 0 auto 18px; max-width: 46ch; }

/* ============================================================ İÇ SAYFALAR */

.fi-sayfa { font-family: var(--fi-f); padding-bottom: clamp(48px, 6vw, 80px); }
.fi-sayfa--elementor { padding-bottom: 0; }

.fi-sayfa-gorsel { margin-bottom: clamp(24px, 3vw, 38px); }
.fi-sayfa-gorsel img { width: 100%; height: auto; border-radius: var(--fi-r); }

.fi-sayfa-icerik {
  max-width: 72ch;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--fi-ink-2);
}
.fi-sayfa--elementor .fi-sayfa-icerik { max-width: none; }

.fi-sayfa-icerik h2,
.fi-sayfa-icerik h3,
.fi-sayfa-icerik h4 {
  font-family: var(--fi-f);
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--fi-ink);
  margin: 1.9em 0 .5em;
  text-wrap: balance;
}
.fi-sayfa-icerik h2 { font-size: clamp(22px, 2.6vw, 30px); }
.fi-sayfa-icerik h3 { font-size: 20px; }
.fi-sayfa-icerik h4 { font-size: 17px; }
.fi-sayfa-icerik p { margin: 0 0 1.1em; max-width: none; }
.fi-sayfa-icerik ul, .fi-sayfa-icerik ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.fi-sayfa-icerik li { margin-bottom: .45em; }
.fi-sayfa-icerik a { color: var(--fi-ana-koyu); }
.fi-sayfa-icerik strong { color: var(--fi-ink); }
.fi-sayfa-icerik img { max-width: 100%; height: auto; border-radius: var(--fi-r-s); }
.fi-sayfa-icerik blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--fi-ana);
  color: var(--fi-ink);
  font-weight: 500;
}
.fi-sayfa-icerik table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fi-sayfa-icerik th, .fi-sayfa-icerik td {
  padding: 10px 12px; border-bottom: 1px solid var(--fi-line); text-align: left;
}

/* alt sayfalar (örn. /yasal/) */
.fi-alt-sayfalar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
}
.fi-alt-sayfa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s);
  font-size: 15px;
  font-weight: 700;
  color: var(--fi-ink) !important;
  text-decoration: none !important;
  transition: border-color var(--fi-gecis), transform var(--fi-gecis), color var(--fi-gecis);
}
.fi-alt-sayfa:hover {
  border-color: var(--fi-ana);
  color: var(--fi-ana-koyu) !important;
  transform: translateX(3px);
}

/* ================================================================== YAZI */

.fi-yazi-sayfa { font-family: var(--fi-f); padding-bottom: clamp(48px, 6vw, 80px); }
.fi-yazi-kapak { margin-bottom: clamp(24px, 3vw, 38px); }
.fi-yazi-kapak img { width: 100%; height: auto; border-radius: var(--fi-r); }
.fi-yazi-diger { border-top: 1px solid var(--fi-line); margin-top: clamp(40px, 5vw, 64px); }

/* =================================================================== 404 */

.fi-404 {
  font-family: var(--fi-f);
  padding-bottom: clamp(48px, 6vw, 90px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  max-width: 780px;
}
.fi-404-arama .search-form { display: flex; gap: 10px; }
.fi-404-arama .search-field {
  flex: 1;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--fi-line);
  font-family: var(--fi-f);
  font-size: 15px;
}
.fi-404-arama .search-submit {
  padding: 13px 24px;
  border-radius: 999px;
  border: 0;
  background: var(--fi-koyu-yuzey);
  color: #fff;
  font-family: var(--fi-f);
  font-weight: 700;
  cursor: pointer;
}

/* ========================================================== SAYFALAMA (blog) */

.navigation.pagination { margin-top: clamp(32px, 4vw, 48px); }
.navigation.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  border-radius: var(--fi-r-s);
  border: 1px solid var(--fi-line);
  font-family: var(--fi-f); font-weight: 700; font-size: 14px;
  color: var(--fi-ink); text-decoration: none;
}
.navigation.pagination .page-numbers.current {
  background: var(--fi-koyu-yuzey); border-color: var(--fi-koyu-yuzey); color: #fff;
}

/* --- gezinme izi -------------------------------------------------------- */

.fi-iz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fi-ink-3);
  margin-bottom: 16px;
}
.fi-iz a { color: var(--fi-ink-3) !important; text-decoration: none; }
.fi-iz a:hover { color: var(--fi-ana-koyu) !important; }
.fi-iz span[aria-current] { color: var(--fi-ink-2); }
.fi-iz-ayrac { opacity: .45; }

/* ekran okuyucuya görünür, göze görünmez başlık */
.fi-gizli-baslik {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* =========================================================== ARAMA ÖNERİSİ */

.fi-oneri {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  z-index: 9999;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--fi-paper);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  box-shadow: 0 26px 54px -22px rgba(16,24,33,.42);
  font-family: var(--fi-f);
  min-width: 320px;
  padding: 8px;
}
.fi-oneri[hidden] { display: none; }

.fi-oneri-grup { padding: 6px 0; }
.fi-oneri-grup + .fi-oneri-grup { border-top: 1px solid var(--fi-line-soft); margin-top: 4px; }
.fi-oneri-etiket {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fi-ink-3); padding: 6px 12px 8px;
}

.fi-oneri a { text-decoration: none !important; }

.fi-oneri-terim {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--fi-r-s);
  color: var(--fi-ink) !important; font-size: 14px; font-weight: 600;
}
.fi-oneri-terim:hover { background: var(--fi-mist); }
.fi-oneri-tip {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fi-ana-koyu); background: var(--fi-ana-soluk);
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.fi-oneri-adet { margin-left: auto; font-size: 12px; color: var(--fi-ink-3); font-variant-numeric: tabular-nums; }

.fi-oneri-kitap {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--fi-r-s);
}
.fi-oneri-kitap:hover { background: var(--fi-mist); }
.fi-oneri-kitap img,
.fi-oneri-kapak {
  width: 38px; height: 50px; flex: 0 0 38px;
  object-fit: contain; border-radius: 3px;
}
.fi-oneri-kapak { display: block; }
.fi-oneri-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fi-oneri-ad {
  font-size: 14px; font-weight: 700; color: var(--fi-ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fi-oneri-alt { font-size: 12px; font-weight: 600; color: var(--fi-ink-3); }

.fi-oneri-tumu {
  display: block; text-align: center;
  margin-top: 6px; padding: 11px;
  border-top: 1px solid var(--fi-line-soft);
  font-size: 13.5px; font-weight: 700;
  color: var(--fi-ana-koyu) !important;
}
.fi-oneri-tumu:hover { background: var(--fi-mist); border-radius: var(--fi-r-s); }

.fi-oneri-bos { padding: 18px 14px; }
.fi-oneri-bos p { margin: 0 0 10px; font-size: 14px; color: var(--fi-ink-2); }
.fi-oneri-sinif { display: flex; flex-wrap: wrap; gap: 7px; }
.fi-oneri-sinif a {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--fi-line);
  font-size: 13px; font-weight: 700; color: var(--fi-ink) !important;
}
.fi-oneri-sinif a:hover { background: var(--fi-koyu-yuzey); color: #fff !important; border-color: var(--fi-koyu-yuzey); }

/* ========================================================= KATALOG FİLTRESİ */

.fi-arsiv-duzen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}

.fi-filtre-ac {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid var(--fi-line); background: var(--fi-paper);
  font-family: var(--fi-f); font-size: 14.5px; font-weight: 700;
  color: var(--fi-ink); cursor: pointer;
  transition: border-color var(--fi-gecis), background var(--fi-gecis);
  min-height: 44px;
}
.fi-filtre-ac:hover { border-color: var(--fi-ink); }
.fi-filtre-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--fi-ana); color: #fff;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.fi-sirala select {
  font-family: var(--fi-f); font-size: 14px; font-weight: 600;
  padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--fi-line); background: var(--fi-paper);
  color: var(--fi-ink); min-height: 44px; cursor: pointer;
}

/* --- aktif çipler ------------------------------------------------------- */

.fi-aktif {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 20px;
}
.fi-aktif-cip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 13px; border-radius: 999px;
  background: var(--fi-koyu-yuzey); color: #fff !important;
  font-size: 13px; font-weight: 700; text-decoration: none !important;
  min-height: 34px;
}
.fi-aktif-cip span:first-child {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; opacity: .55;
}
.fi-aktif-x { font-size: 16px; line-height: 1; opacity: .6; }
.fi-aktif-cip:hover .fi-aktif-x { opacity: 1; }
.fi-aktif-temizle {
  font-size: 13px; font-weight: 700;
  color: var(--fi-ink-2) !important; text-decoration: none !important;
  border-bottom: 1.5px solid var(--fi-line); padding-bottom: 1px;
}
.fi-aktif-temizle:hover { color: var(--fi-ana-koyu) !important; border-color: var(--fi-ana); }

/* --- panel -------------------------------------------------------------- */

.fi-filtre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px 26px;
  padding: 24px 26px;
  margin-bottom: 28px;
  background: var(--fi-mist);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  font-family: var(--fi-f);
}
.fi-filtre-bas { display: none; }

.fi-filtre-grup { border: 0; margin: 0; padding: 0; min-width: 0; }
.fi-filtre-grup legend {
  padding: 0 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-filtre-secenekler { display: flex; flex-wrap: wrap; gap: 7px; }

.fi-secenek {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  font-size: 13.5px; font-weight: 600;
  color: var(--fi-ink) !important; text-decoration: none !important;
  min-height: 36px;
  transition: background var(--fi-gecis), border-color var(--fi-gecis), color var(--fi-gecis);
}
.fi-secenek span {
  font-size: 11.5px; font-weight: 700; color: var(--fi-ink-3);
  font-variant-numeric: tabular-nums;
}
.fi-secenek:hover { border-color: var(--fi-ink); }
.fi-secenek.secili {
  background: var(--fi-ana-yuzey); border-color: var(--fi-ana-yuzey); color: #fff !important;
}
.fi-secenek.secili span { color: rgba(255,255,255,.7); }

/* --- mobil: alttan açılan panel (UX 38) --------------------------------- */

@media (max-width: 780px) {
  .fi-filtre {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998;
    display: none;
    grid-template-columns: 1fr;
    max-height: 82vh;
    overflow-y: auto;
    margin: 0;
    border-radius: 18px 18px 0 0;
    border: 0;
    box-shadow: 0 -18px 46px -16px rgba(16,24,33,.45);
    background: var(--fi-paper);
    padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  }
  body.fi-filtre-acik { overflow: hidden; }
  body.fi-filtre-acik .fi-filtre { display: grid; }
  body.fi-filtre-acik::after {
    content: ""; position: fixed; inset: 0; z-index: 9997;
    background: rgba(16,24,33,.45);
  }

  .fi-filtre-bas {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 4px;
    border-bottom: 1px solid var(--fi-line);
  }
  .fi-filtre-baslik { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
  .fi-filtre-kapat, button.fi-filtre-kapat {
    appearance: none; border: 0; background: var(--fi-mist);
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 20px; line-height: 1; color: var(--fi-ink); cursor: pointer;
  }
  .fi-secenek { min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
  .fi-sirala select { flex: 1; }
  .fi-arsiv-duzen { flex-wrap: nowrap; }
  .fi-filtre-ac { flex: 0 0 auto; }
}

@media (min-width: 781px) {
  .fi-filtre-ac { display: none; }
}

/* ===================================================== KİTAP SAYFASI EKLERİ */

/* --- güncellik rozetleri (UX 21) --- */
.fi-guncellik { display: flex; flex-wrap: wrap; gap: 7px; }
.fi-guncel-rozet {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--fi-line);
  font-size: 12px; font-weight: 700; color: var(--fi-ink-2);
}
.fi-guncel-rozet--yesil {
  background: var(--fi-ana-soluk); border-color: #F6C9C4; color: var(--fi-ana-koyu);
}
.fi-guncel-rozet--uyari { background: #FBF1DE; border-color: #EEDCB5; color: #8A5F0F; }

/* --- bu kitap kimin için (UX 15) --- */
.fi-kimin-icin {
  padding: 16px 18px; border-radius: var(--fi-r-s);
  background: var(--fi-mist); border-left: 3px solid var(--fi-ders-renk, var(--fi-ana));
}
.fi-kimin-etiket {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fi-ink-3); margin-bottom: 6px;
}
.fi-kimin-icin p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fi-ink-2); }
.fi-kimin-icin strong { color: var(--fi-ink); }

/* --- kaynak bağlantıları --- */
.fi-kaynaklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.fi-kaynak {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: var(--fi-r-s);
  border: 1px solid var(--fi-line); background: var(--fi-paper);
  text-decoration: none !important;
  transition: border-color var(--fi-gecis), transform var(--fi-gecis);
}
.fi-kaynak:hover { border-color: var(--fi-ana); transform: translateY(-2px); }
.fi-kaynak-ad  { font-size: 14.5px; font-weight: 700; color: var(--fi-ink); }
.fi-kaynak-alt { font-size: 12px; font-weight: 600; color: var(--fi-ink-3); }

/* --- kapak büyütme (UX 18) --- */
/* Kapak düğmesi.
   Sıfırlama yeterli değildi: tema kendi düğme biçimini daha yüksek
   özgüllükle (.woocommerce button.button gibi) veriyor ve kapağın çevresine
   kalın kırmızı bir zemin koyuyordu — kullanıcı buna "resimlerdeki kırmızı
   çerçeve" dedi. Bu düğme bir kap, görünür bir düğme değil; sıfırlamayı
   özgüllüğü artırıp ve marka düğmelerinden ayırarak sabitliyoruz. */
button.fi-kapak-ac, .fi-kitap-kapak button.fi-kapak-ac, .fi-kitap-gorsel button.fi-kapak-ac {
  appearance: none; -webkit-appearance: none;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  color: inherit;
  min-height: 0; line-height: 0;
  cursor: zoom-in; position: relative; display: block; width: 100%;
}
button.fi-kapak-ac:hover, button.fi-kapak-ac:focus {
  background: none !important; box-shadow: none !important;
}
.fi-kapak-buyut {
  position: absolute; bottom: 10px; right: 10px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(16,24,33,.78); color: #fff;
  font-family: var(--fi-f); font-size: 11.5px; font-weight: 700;
  opacity: 0; transition: opacity var(--fi-gecis);
}
.fi-kapak-ac:hover .fi-kapak-buyut, button.fi-kapak-ac:hover .fi-kapak-buyut, .fi-kapak-ac:focus-visible .fi-kapak-buyut, button.fi-kapak-ac:focus-visible .fi-kapak-buyut { opacity: 1; }

.fi-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10,16,13,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; cursor: zoom-out;
}
.fi-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.fi-lightbox-kapat {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.fi-lightbox-kapat:hover { background: rgba(255,255,255,.26); }

/* --- paylaş (UX 24) --- */
.fi-paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.fi-paylas-etiket {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-ink-3); margin-right: 2px;
}
.fi-paylas-dugme, button.fi-paylas-dugme {
  appearance: none; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--fi-line); background: var(--fi-paper);
  font-family: var(--fi-f); font-size: 13px; font-weight: 700;
  color: var(--fi-ink) !important; text-decoration: none !important;
  min-height: 38px;
  transition: border-color var(--fi-gecis), background var(--fi-gecis);
}
.fi-paylas-dugme:hover, button.fi-paylas-dugme:hover { border-color: var(--fi-ink); background: var(--fi-mist); }

/* --- içindekiler --- */
.fi-icindekiler { list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 34px; }
.fi-icindekiler li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--fi-line-soft);
  break-inside: avoid; font-size: 14.5px; color: var(--fi-ink);
}
.fi-icindekiler li span {
  font-size: 11.5px; font-weight: 700; color: var(--fi-ink-3);
  font-variant-numeric: tabular-nums; min-width: 20px;
}

/* --- Kod haftalık takvim (UX 19) --- */
.fi-takvim {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px;
}
.fi-takvim li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; aspect-ratio: 1;
  border-radius: var(--fi-r-s);
  background: var(--fi-mist); border: 1px solid var(--fi-line);
}
.fi-takvim-no {
  font-size: 17px; font-weight: 800; color: var(--fi-ders-renk, var(--fi-ink));
  font-variant-numeric: tabular-nums; line-height: 1;
}
.fi-takvim-ad { font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fi-ink-3); }

.fi-icindekiler-bolum, .fi-takvim-bolum { border-top: 1px solid var(--fi-line); }

@media (max-width: 640px) {
  .fi-icindekiler { columns: 1; }
}

/* --- yazdırma --- */
@media print {
  .fi-hero, .fi-sayfa-bas, .fi-paylas, .fi-kitap-temin, .fi-kitap-iliskili,
  #secondary, .site-footer, .fi-filtre, .fi-arsiv-duzen, .bookory-mobile-nav,
  .fi-oneri, .fi-takvim-bolum { display: none !important; }
  body { background: #fff; color: #000; }
  .fi-kitap-ust { grid-template-columns: 200px 1fr; gap: 24px; }
  a[href]::after { content: ""; }
}

/* ============================================================ BAYİ HARİTASI */

.fi-harita-kap { font-family: var(--fi-f); }

.fi-harita-ust {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.fi-harita-baslik {
  font-size: clamp(24px, 3vw, 34px); font-weight: 800;
  letter-spacing: -.028em; color: var(--fi-ink); margin: 0;
}
.fi-harita-alt { margin: 8px 0 0; font-size: 15px; color: var(--fi-ink-2); max-width: 50ch; }

.fi-harita-secim select {
  font-family: var(--fi-f); font-size: 14.5px; font-weight: 600;
  padding: 12px 18px; border-radius: 999px; min-height: 46px;
  border: 1px solid var(--fi-line); background: var(--fi-paper); color: var(--fi-ink);
  min-width: 220px; cursor: pointer;
}

/* Başlangıçta harita TAM GENİŞLİK: Türkiye yatay bir ülke, 1000×422'lik
   kadrajı dar bir sütuna sıkıştırmak haritayı okunmaz yapıyordu.
   İl seçilince düzen ikiye bölünüyor: yakınlaşmış il solda, bayiler sağda. */
.fi-harita-duzen {
  display: grid; grid-template-columns: 1fr; gap: 26px;
  align-items: start;
}
.fi-harita-acik .fi-harita-duzen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

/* --- harita ------------------------------------------------------------- */

.fi-harita {
  position: relative;
  background: var(--fi-mist);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  padding: 18px;
  overflow: hidden;
}
.fi-harita svg {
  width: 100%; height: auto; display: block;
  /* Oranı JS yazıyor: tam görünümde 1000/422, il görünümünde 4/3. */
}

/* --- Türkiye'ye dön --- */
.fi-harita-geri, button.fi-harita-geri {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: var(--fi-f); font-size: 13.5px; font-weight: 700;
  background: var(--fi-paper); color: var(--fi-ink);
  border: 1px solid var(--fi-line);
  box-shadow: 0 6px 18px -10px rgba(16, 24, 33, .5);
}
.fi-harita-geri:hover, button.fi-harita-geri:hover { border-color: var(--fi-ana-koyu); color: var(--fi-ana-koyu); }
.fi-harita-geri[hidden], button.fi-harita-geri[hidden] { display: none !important; }

/* Yakınlaşmışken komşu iller bağlam olarak soluk kalsın — nerede olduğunu
   göstermeye yetecek kadar, dikkati dağıtmayacak kadar. */

.fi-harita-uyari { margin: 18px 0 0; max-width: 62ch; }

.fi-harita .fi-il {
  fill: var(--fi-yog-0);
  stroke: var(--fi-paper);
  stroke-width: .6;
  cursor: pointer;
  transition: fill 160ms ease;
  outline: none;
}
.fi-harita .fi-il--var    { fill: var(--fi-yog-1); }
.fi-harita .fi-il--orta   { fill: var(--fi-yog-2); }
.fi-harita .fi-il--yogun  { fill: var(--fi-yog-3); }

/* Vurgu ve seçim ölçeğin kendi ailesinden: harita mavi olunca kırmızı bir
   seçim lekesi ölçeğin dışına düşüyordu. */
.fi-harita .fi-il:hover        { fill: var(--fi-yog-vurgu); }
.fi-harita .fi-il:focus-visible{ fill: var(--fi-yog-vurgu); stroke: var(--fi-ink); stroke-width: 1.6; }
.fi-harita .fi-il--secili      { fill: var(--fi-yog-secili) !important; stroke: var(--fi-paper); stroke-width: 1.6; }

/* İmleç ipucu — ilin adı ve bayi sayısı, imleci izleyerek.
   pointer-events:none olmazsa kutu imlecin altındaki ile girip çıkışı
   tetikler ve ipucu titrer. */
.fi-harita-ipucu {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--fi-koyu-yuzey);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(16, 24, 33, .85);
  font-family: var(--fi-f);
  line-height: 1.25;
  max-width: 220px;
}
.fi-harita-ipucu b      { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.fi-harita-ipucu span   { font-size: 12px; font-weight: 600; opacity: .78; }
.fi-harita-ipucu[hidden]{ display: none !important; }


/* --- panel -------------------------------------------------------------- */

.fi-harita-panel {
  background: var(--fi-paper);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  padding: 24px;
  position: sticky; top: 20px;
  max-height: 78vh; overflow-y: auto;
}
.fi-harita-panel[hidden] { display: none !important; }

.fi-panel-bas { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--fi-line); }
.fi-panel-baslik { font-size: 21px; font-weight: 800; letter-spacing: -.022em; color: var(--fi-ink); margin: 0; }
.fi-panel-adet {
  margin: 4px 0 0; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fi-ana-koyu);
}
.fi-panel-bos p { margin: 0 0 10px; font-size: 15px; color: var(--fi-ink-2); }
.fi-panel-bos .fi-panel-baslik { color: var(--fi-ink); margin-bottom: 8px; }
.fi-panel-uyari {
  padding: 12px 14px; border-radius: var(--fi-r-s);
  background: #FBF1DE; color: #8A5F0F !important; font-size: 13.5px !important;
}

.fi-ilce-baslik {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fi-ink-3); margin: 20px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--fi-line-soft);
}
.fi-ilce-baslik span {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  background: var(--fi-mist); color: var(--fi-ink-2); letter-spacing: 0;
}

.fi-bayi-liste { list-style: none; margin: 0; padding: 0; }
.fi-bayi {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 0; border-bottom: 1px solid var(--fi-line-soft);
}
.fi-bayi:last-child { border-bottom: 0; }
.fi-bayi-ad { font-size: 15px; font-weight: 700; color: var(--fi-ink); }
.fi-bayi-satir { font-size: 13.5px; color: var(--fi-ink-2); line-height: 1.45; }
.fi-bayi-eylem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fi-bayi-eylem a {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--fi-line);
  font-size: 12.5px; font-weight: 700;
  color: var(--fi-ink) !important; text-decoration: none !important;
  min-height: 34px; display: inline-flex; align-items: center;
}
.fi-bayi-eylem a:hover { background: var(--fi-koyu-yuzey); color: #fff !important; border-color: var(--fi-koyu-yuzey); }

@media (max-width: 900px) {
  /* Dar ekranda iki sütun yok: yakınlaşmış harita üstte, bayiler altta. */
  .fi-harita-duzen,
  .fi-harita-acik .fi-harita-duzen { grid-template-columns: 1fr; }
  .fi-harita-panel { position: static; max-height: none; }
  .fi-harita-geri, button.fi-harita-geri { left: 12px; top: 12px; padding: 8px 14px; font-size: 13px; }
}

/* =============================================================== SİHİRBAZ */

.fi-sihirbaz {
  font-family: var(--fi-f);
  background: var(--fi-mist);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  padding: clamp(24px, 3.5vw, 40px);
}

.fi-sihirbaz-adimlar {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 0 0 26px; padding: 0;
}
.fi-sihirbaz-adimlar li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--fi-ink-3);
}
.fi-sihirbaz-adimlar li span {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fi-surface-2, #E8EEEA); color: var(--fi-ink-3);
  font-size: 12.5px; font-weight: 800;
}
.fi-sihirbaz-adimlar li.aktif { color: var(--fi-ink); }
.fi-sihirbaz-adimlar li.aktif span { background: var(--fi-koyu-yuzey); color: #fff; }
.fi-sihirbaz-adimlar li.bitti span { background: var(--fi-ana); color: #fff; }
.fi-sihirbaz-adimlar li.bitti { color: var(--fi-ana-koyu); }

.fi-adim-soru {
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 800;
  letter-spacing: -.024em; color: var(--fi-ink); margin: 0 0 20px;
  text-wrap: balance;
}

.fi-adim-secenekler { display: flex; flex-wrap: wrap; gap: 10px; }
.fi-adim-secenekler--sinif { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.fi-adim-secenekler--amac  { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.fi-sec {
  appearance: none; cursor: pointer; text-align: left;
  font-family: var(--fi-f); font-size: 14.5px; font-weight: 700;
  color: var(--fi-ink);
  background: var(--fi-paper); border: 1.5px solid var(--fi-line);
  border-radius: 999px; padding: 12px 20px; min-height: 46px;
  transition: border-color var(--fi-gecis), transform var(--fi-gecis), background var(--fi-gecis);
}
.fi-sec:hover { border-color: var(--fi-ink); transform: translateY(-2px); }
.fi-sec--atla { color: var(--fi-ink-3); font-weight: 600; }

.fi-sec--sinif {
  border-radius: var(--fi-r);
  display: flex; flex-direction: column; gap: 1px;
  padding: 18px 20px; min-height: 104px;
}
.fi-sec-no { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.fi-sec-ad { font-size: 14px; font-weight: 700; }
.fi-sec-adet { font-size: 12px; font-weight: 600; color: var(--fi-ink-3); margin-top: 5px; }

.fi-sec--amac {
  border-radius: var(--fi-r);
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px;
}
.fi-sec-baslik { font-size: 15.5px; font-weight: 700; }
.fi-sec-alt { font-size: 13px; font-weight: 500; color: var(--fi-ink-2); line-height: 1.45; }

.fi-sihirbaz-alt {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--fi-line);
}
.fi-sihirbaz-geri {
  appearance: none; cursor: pointer; background: none; border: 0;
  font-family: var(--fi-f); font-size: 14px; font-weight: 700;
  color: var(--fi-ink-2); padding: 8px 0;
}
.fi-sihirbaz-geri:hover { color: var(--fi-ink); }
.fi-sihirbaz-ozet {
  font-size: 13px; font-weight: 700; color: var(--fi-ana-koyu);
  letter-spacing: .02em;
}

/* ======================================================== SERİ MATRİSİ */

.fi-matris-bolum { border-top: 1px solid var(--fi-line); }
.fi-matris-kaydir { overflow-x: auto; }

.fi-matris {
  width: 100%; border-collapse: collapse; min-width: 520px;
  font-family: var(--fi-f);
}
.fi-matris th, .fi-matris td {
  padding: 12px 10px; text-align: center;
  border-bottom: 1px solid var(--fi-line-soft);
}
.fi-matris thead th {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fi-ink-3); border-bottom: 1.5px solid var(--fi-ink);
}
.fi-matris tbody th {
  text-align: left; font-size: 14.5px; font-weight: 700; color: var(--fi-ink);
  white-space: nowrap; padding-right: 18px;
}
.fi-matris-yok { color: var(--fi-ink-3); opacity: .5; }
.fi-matris-var a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 36px; padding: 0 12px;
  border-radius: var(--fi-r-s);
  background: var(--fi-ana-soluk); color: var(--fi-ana-koyu) !important;
  font-size: 14px; font-weight: 800; text-decoration: none !important;
  font-variant-numeric: tabular-nums;
  transition: background var(--fi-gecis), color var(--fi-gecis);
}
.fi-matris-var a:hover { background: var(--fi-ana-yuzey); color: #fff !important; }

/* ===================================================== SON BAKILANLAR */

.fi-son-bakilan { border-top: 1px solid var(--fi-line); }
.fi-son-bakilan[hidden] { display: none; }

/* ================================================================ FORMLAR */

.fi-giris { font-size: 17px; line-height: 1.6; color: var(--fi-ink-2); }
.fi-not {
  font-size: 14px; color: var(--fi-ink-2);
  padding: 14px 16px; border-radius: var(--fi-r-s);
  background: var(--fi-mist); border: 1px solid var(--fi-line);
}

.wpcf7-form { font-family: var(--fi-f); max-width: 620px; }

.fi-form-adim { border: 0; margin: 0 0 8px; padding: 0; }
.fi-form-adim legend {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-ink-3);
  padding: 0 0 14px;
}
.fi-form-adim[hidden] { display: none; }

.wpcf7-form label { display: block; font-size: 14.5px; font-weight: 600; color: var(--fi-ink); }
.wpcf7-form p { margin: 0 0 16px; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  font-family: var(--fi-f); font-size: 15px;
  padding: 12px 15px; margin-top: 6px;
  border: 1.5px solid var(--fi-line); border-radius: var(--fi-r-s);
  background: var(--fi-paper); color: var(--fi-ink);
  min-height: 46px;
}
.wpcf7-form textarea { min-height: 110px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
  outline: none; border-color: var(--fi-ana); box-shadow: 0 0 0 3px var(--fi-ana-soluk);
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item { display: inline-flex; margin: 0 14px 8px 0; }
.wpcf7-form .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.wpcf7-form input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; margin: 0; }

.wpcf7-form .wpcf7-submit, .wpcf7-form .fi-dugme, .wpcf7-form button.fi-dugme {
  cursor: pointer;
}
.wpcf7-form .wpcf7-submit {
  font-family: var(--fi-f); font-size: 15px; font-weight: 700;
  padding: 14px 28px; min-height: 48px;
  border: 0; border-radius: 999px;
  background: var(--fi-koyu-yuzey); color: #fff;
  transition: background var(--fi-gecis), transform var(--fi-gecis);
}
.wpcf7-form .wpcf7-submit:hover { background: var(--fi-ana-koyu); transform: translateY(-2px); }

/* --- adım göstergesi --- */
.fi-form-gosterge {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 0 0 24px; padding: 0 0 18px;
  border-bottom: 1px solid var(--fi-line);
}
.fi-form-gosterge li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--fi-ink-3);
}
.fi-form-gosterge li span {
  width: 25px; height: 25px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fi-mist-2); color: var(--fi-ink-3); font-size: 12px; font-weight: 800;
}
.fi-form-gosterge li.aktif { color: var(--fi-ink); }
.fi-form-gosterge li.aktif span { background: var(--fi-koyu-yuzey); color: #fff; }
.fi-form-gosterge li.bitti { color: var(--fi-ana-koyu); }
.fi-form-gosterge li.bitti span { background: var(--fi-ana); color: #fff; }

.fi-form-gezinme { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* --- hata bildirimi (UX 46) --- */
.fi-form-duyuru {
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: var(--fi-r-s);
  background: #FBEAE7; border: 1px solid #F0C9C2;
  color: #9A2E22; font-size: 14.5px; font-weight: 600;
}
.fi-form-duyuru[hidden] { display: none; }

.wpcf7-form .fi-alan-hatali,
.wpcf7-form .wpcf7-not-valid {
  border-color: #C0392B !important;
  background: #FEF7F6;
}
.wpcf7-not-valid-tip {
  display: block; margin-top: 5px;
  font-size: 13px; font-weight: 600; color: #A5382A;
}
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0; padding: 13px 16px;
  border-radius: var(--fi-r-s); border-width: 1px;
  font-size: 14.5px; font-weight: 600;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: var(--fi-ana-soluk); border-color: #F6C9C4; color: var(--fi-ana-koyu);
}

/* [hidden] her zaman kazansın — display:flex/inline-flex onu eziyordu */
[hidden] { display: none !important; }

/* ==================================================================== SSS */

.fi-sss { max-width: 760px; }
.fi-sss-oge {
  border-bottom: 1px solid var(--fi-line);
  font-family: var(--fi-f);
}
.fi-sss-oge summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0;
  font-size: 16.5px; font-weight: 700; color: var(--fi-ink);
  min-height: 56px;
}
.fi-sss-oge summary::-webkit-details-marker { display: none; }
.fi-sss-oge summary::after {
  content: "+"; margin-left: auto;
  font-size: 22px; font-weight: 600; line-height: 1;
  color: var(--fi-ink-3); transition: transform var(--fi-gecis), color var(--fi-gecis);
}
.fi-sss-oge[open] summary::after { content: "−"; color: var(--fi-ana-koyu); }
.fi-sss-oge summary:hover { color: var(--fi-ana-koyu); }
.fi-sss-cevap { padding: 0 0 20px; }
.fi-sss-cevap p {
  margin: 0; font-size: 15.5px; line-height: 1.65;
  color: var(--fi-ink-2); max-width: 66ch;
}
.fi-sss-cevap a { color: var(--fi-ana-koyu); }
.fi-sss-cevap strong { color: var(--fi-ink); }

/* ======================================================== ÖĞRETMEN GÖRÜŞLERİ */

.fi-gorusler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; font-family: var(--fi-f);
}
.fi-gorus {
  margin: 0; padding: 26px 24px;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  display: flex; flex-direction: column; gap: 18px;
}
.fi-gorus blockquote {
  margin: 0; padding: 0; border: 0;
  font-size: 15.5px; line-height: 1.6; color: var(--fi-ink);
  font-weight: 500;
}
.fi-gorus blockquote p { margin: 0 0 10px; }
.fi-gorus blockquote p:last-child { margin: 0; }
.fi-gorus blockquote::before {
  content: "“"; display: block;
  font-size: 44px; line-height: .6; color: var(--fi-ana);
  margin-bottom: 8px;
}
.fi-gorus figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.fi-gorus-foto img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fi-gorus-kisi { display: flex; flex-direction: column; gap: 1px; }
.fi-gorus-kisi strong { font-size: 14.5px; font-weight: 700; color: var(--fi-ink); }
.fi-gorus-kisi span { font-size: 12.5px; font-weight: 600; color: var(--fi-ink-3); }

/* ============================================================= WHATSAPP */

.fi-wa {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 9990;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #25D366; color: #0B2E1A !important;
  font-family: var(--fi-f); font-size: 14.5px; font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 14px 32px -12px rgba(16,24,33,.45);
  min-height: 52px;
  transition: transform var(--fi-gecis), box-shadow var(--fi-gecis);
}
.fi-wa:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(16,24,33,.5); }
.fi-wa svg { flex: 0 0 auto; }

@media (max-width: 640px) {
  .fi-wa { right: 14px; bottom: 14px; padding: 13px; }
  .fi-wa span { display: none; }
}
@media print { .fi-wa { display: none !important; } }

/* ================================================== YAZDIRILABİLİR KATALOG */

.fi-katalog { font-family: var(--fi-f); }

.fi-katalog-arac {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 28px;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
}
.fi-katalog-yazdir { cursor: pointer; border: 0; }
.fi-katalog-ipucu { margin: 0; font-size: 13.5px; color: var(--fi-ink-2); }

.fi-katalog-kunye { display: none; }

.fi-katalog-sinif { margin-bottom: 38px; break-inside: auto; }
.fi-katalog-baslik {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 23px; font-weight: 800; letter-spacing: -.024em;
  color: var(--fi-ink); margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--fi-ink);
  break-after: avoid;
}
.fi-katalog-baslik span {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fi-ana-koyu);
}
.fi-katalog-ders {
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-ink-3);
  margin: 22px 0 8px; break-after: avoid;
}

.fi-katalog-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fi-katalog-tablo th {
  text-align: left; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fi-ink-3);
  padding: 6px 10px 6px 0; border-bottom: 1px solid var(--fi-line);
}
.fi-katalog-tablo td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--fi-line-soft);
  color: var(--fi-ink); vertical-align: top;
}
.fi-katalog-tablo tr { break-inside: avoid; }
.fi-katalog-tablo .fi-sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fi-katalog-tablo .fi-isbn { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fi-ink-2); }

.fi-katalog-alt {
  margin-top: 30px; padding-top: 16px;
  border-top: 1px solid var(--fi-line);
  font-size: 12.5px; color: var(--fi-ink-2);
}

@media print {
  .fi-katalog-arac { display: none !important; }
  .fi-katalog-kunye {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 10px; margin-bottom: 22px;
    border-bottom: 2px solid #000;
  }
  .fi-katalog-ust { font-weight: 800; margin: 0; }
  .fi-katalog-tarih { margin: 0; font-size: 12px; }
  .fi-katalog-sinif { break-before: page; }
  .fi-katalog-sinif:first-of-type { break-before: auto; }
  .fi-katalog-tablo { font-size: 10.5pt; }
  @page { margin: 16mm; }
}

/* ======================================= DOKUNMA HEDEFLERİ (UX 41) ======
   Parmakla kullanılan cihazlarda her tıklanabilir öge en az 44×44 px.
   Fare/kalem kullanılan cihazlarda kompakt hâli korunuyor.
   ======================================================================= */

@media (pointer: coarse) {
  .fi-aktif-cip, .fi-secenek, .fi-paylas-dugme, button.fi-paylas-dugme, .fi-tur-cip, .fi-yazar-cip, .fi-seri-cip, .fi-etiket, .fi-bayi-eylem a, .fi-sekme, .fi-oneri-sinif a {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .fi-aktif-x { font-size: 18px; padding: 0 2px; }

  /* satır içi metin bağlantıları — dokunma alanını genişlet */
  .fi-iz a,
  .fi-eksen,
  .fi-aktif-temizle { padding: 6px 0; display: inline-block; }
}

.fi-kart-etiket { margin: 0 0 6px; font-size: 15px; }
.fi-kart-etiket strong { font-weight: 700; color: var(--fi-ink); }

/* ========================================================= İÇERİĞE ATLA */

.fi-atla {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100000;
  padding: 12px 20px;
  border-radius: 0 0 var(--fi-r-s) var(--fi-r-s);
  background: var(--fi-koyu-yuzey); color: #fff !important;
  font-family: var(--fi-f); font-size: 14.5px; font-weight: 700;
  text-decoration: none !important;
  transition: top 140ms ease;
}
.fi-atla:focus { top: 0; outline: 3px solid var(--fi-ana); outline-offset: 2px; }

/* odaklanılan ana içerik ana hattı göstermesin */
#fi-main:focus { outline: none; }

/* ========================================================== YAZAR KUTUSU */

.fi-yazar-bolum { border-top: 1px solid var(--fi-line); }

.fi-yazar-kartlar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.fi-yazar-kart {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 22px 20px;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
}
.fi-yazar-foto {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 50%; object-fit: cover;
}
.fi-yazar-bas {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fi-ders-renk, var(--fi-ana-koyu)); color: #fff;
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
}
.fi-yazar-govde { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fi-yazar-ad {
  font-family: var(--fi-f) !important;
  font-size: 17px !important; font-weight: 800 !important;
  letter-spacing: -.018em; margin: 0 !important; line-height: 1.25 !important;
}
.fi-yazar-ad a { color: var(--fi-ink) !important; text-decoration: none; }
.fi-yazar-ad a:hover { color: var(--fi-ana-koyu) !important; }
.fi-yazar-brans {
  margin: 0; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--fi-ink-3);
}
.fi-yazar-bio {
  margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fi-ink-2);
}
.fi-yazar-git {
  margin-top: 8px; font-size: 13px; font-weight: 700;
  color: var(--fi-ana-koyu) !important; text-decoration: none !important;
}

/* yazar arşivindeki profil başlığı */
.fi-yazar-profil {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px; margin: 0 0 22px;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  max-width: 74ch;
}
.fi-yazar-profil img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; }

@media (max-width: 520px) {
  .fi-yazar-kart, .fi-yazar-profil { flex-direction: column; }
}

/* ==================================================== SERİ KARŞILAŞTIRMA */

.fi-karsilastirma-bolum { border-top: 1px solid var(--fi-line); }

.fi-karsilastirma {
  width: 100%; border-collapse: collapse; min-width: 700px;
  font-family: var(--fi-f); font-size: 14.5px;
}
.fi-karsilastirma thead th {
  text-align: left; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fi-ink-3);
  padding: 0 14px 10px 0; border-bottom: 1.5px solid var(--fi-ink);
  white-space: nowrap;
}
.fi-karsilastirma td, .fi-karsilastirma tbody th {
  padding: 15px 14px 15px 0;
  border-bottom: 1px solid var(--fi-line-soft);
  vertical-align: top; text-align: left;
}
.fi-karsilastirma tbody tr:last-child td,
.fi-karsilastirma tbody tr:last-child th { border-bottom: 1px solid var(--fi-line); }
.fi-karsilastirma .fi-sayi {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.fi-kars-seri {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; letter-spacing: -.018em; color: var(--fi-ink);
  white-space: nowrap;
}
.fi-kars-seri::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--fi-seri-renk); flex: 0 0 10px;
}
.fi-kars-tur {
  display: block; margin-top: 3px;
  font-size: 12px; font-weight: 600; color: var(--fi-ink-3);
}
.fi-kars-git {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700;
  color: var(--fi-ana-koyu) !important; text-decoration: none !important;
  white-space: nowrap;
}
.fi-kars-git:hover { text-decoration: underline !important; }

/* ============================== MOBİL YAPIŞKAN EYLEM ÇUBUĞU (UX 39) ==== */

.fi-mobil-cubuk { display: none; }

@media (max-width: 780px) {
  .fi-mobil-cubuk {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9985;
    display: flex; gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--fi-paper);
    border-top: 1px solid var(--fi-line);
    box-shadow: 0 -10px 26px -14px rgba(16,24,33,.34);
  }
  .fi-mobil-cubuk .fi-dugme, .fi-mobil-cubuk button.fi-dugme { flex: 1; justify-content: center; min-height: 48px; }
  /* WhatsApp düğmesi çubuğun üstünde kalsın */
  .fi-wa { bottom: 82px; }
  /* sayfa sonunda içerik çubuğun altında kalmasın */
  body.fi-cubuk-var { padding-bottom: 74px; }
}
@media print { .fi-mobil-cubuk { display: none !important; } }

/* ============================================================ BAYİ PANELİ */

.fi-panel-tanitim {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px;
  align-items: start; font-family: var(--fi-f);
}
.fi-ozellik-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.fi-ozellik-liste li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 20px; border-radius: var(--fi-r);
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-left: 4px solid var(--fi-ana);
}
.fi-ozellik-liste strong { font-size: 15.5px; font-weight: 700; color: var(--fi-ink); }
.fi-ozellik-liste span { font-size: 14px; line-height: 1.5; color: var(--fi-ink-2); }
.fi-panel-kampanya-ipucu {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--fi-r-s);
  background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); font-size: 14px; font-weight: 600;
}

.fi-panel-giris {
  padding: 26px 24px; border-radius: var(--fi-r);
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  box-shadow: 0 18px 40px -26px rgba(16,24,33,.34);
}
.fi-panel-giris-baslik { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; }
.fi-panel-giris label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.fi-panel-giris input[type="text"], .fi-panel-giris input[type="password"] {
  width: 100%; margin-top: 5px; padding: 12px 15px; min-height: 46px;
  border: 1.5px solid var(--fi-line); border-radius: var(--fi-r-s);
  font-family: var(--fi-f); font-size: 15px;
}
.fi-panel-giris .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.fi-panel-giris input[type="submit"] {
  width: 100%; padding: 13px; min-height: 48px; border: 0; border-radius: 999px;
  background: var(--fi-koyu-yuzey); color: #fff; cursor: pointer;
  font-family: var(--fi-f); font-size: 15px; font-weight: 700;
}
.fi-panel-giris input[type="submit"]:hover { background: var(--fi-ana-koyu); }
.fi-panel-alt { margin: 12px 0 0; font-size: 13.5px; color: var(--fi-ink-2); }

/* --- pano --- */

.fi-pano { font-family: var(--fi-f); }
.fi-pano-bildirim {
  padding: 14px 18px; margin-bottom: 22px; border-radius: var(--fi-r-s);
  background: var(--fi-ana-soluk); border: 1px solid #F6C9C4; color: var(--fi-ana-koyu);
  font-size: 15px;
}
.fi-pano-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--fi-line);
}
.fi-pano-baslik { font-size: clamp(23px, 3vw, 31px); font-weight: 800; letter-spacing: -.026em; margin: 0; }
.fi-pano-alt { margin: 4px 0 0; font-size: 14px; color: var(--fi-ink-2); }

.fi-pano-sekmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.fi-pano-sekme {
  padding: 10px 18px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--fi-line); background: var(--fi-paper);
  font-size: 14px; font-weight: 700;
  color: var(--fi-ink) !important; text-decoration: none !important;
}
.fi-pano-sekme:hover { border-color: var(--fi-ink); }
.fi-pano-sekme.aktif { background: var(--fi-koyu-yuzey); border-color: var(--fi-koyu-yuzey); color: #fff !important; }

.fi-pano-arac {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.fi-pano-arac p { margin: 0; font-size: 14.5px; color: var(--fi-ink-2); }

.fi-pano-tablo { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.fi-pano-tablo th {
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fi-ink-3);
  padding: 0 12px 10px 0; border-bottom: 1.5px solid var(--fi-ink); white-space: nowrap;
}
.fi-pano-tablo td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--fi-line-soft); vertical-align: middle; }
.fi-pano-tablo .fi-sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fi-pano-tablo .fi-isbn { display: block; font-size: 12px; color: var(--fi-ink-3); font-variant-numeric: tabular-nums; }
.fi-pano-tablo a { color: var(--fi-ink) !important; text-decoration: none; font-weight: 600; }
.fi-pano-tablo a:hover { color: var(--fi-ana-koyu) !important; }
.fi-pano-tablo tfoot td { border-top: 1.5px solid var(--fi-ink); border-bottom: 0; padding-top: 14px; }

.fi-mini-ekle, .fi-sepet-sil {
  cursor: pointer; border: 1px solid var(--fi-line); background: var(--fi-paper);
  border-radius: 999px; padding: 6px 13px; min-height: 36px;
  font-family: var(--fi-f); font-size: 12.5px; font-weight: 700; color: var(--fi-ink);
}
.fi-mini-ekle:hover, .fi-sepet-sil:hover { background: var(--fi-koyu-yuzey); color: #fff; border-color: var(--fi-koyu-yuzey); }
.fi-mini-ekle[disabled] { background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); border-color: var(--fi-ana-soluk); cursor: default; }
.fi-sepet-adet {
  width: 76px; padding: 8px 10px; text-align: right;
  border: 1.5px solid var(--fi-line); border-radius: var(--fi-r-s);
  font-family: var(--fi-f); font-variant-numeric: tabular-nums; min-height: 40px;
}

.fi-teklif-not { margin: 20px 0; max-width: 620px; }
.fi-teklif-not label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.fi-teklif-not textarea {
  width: 100%; padding: 12px 15px; border: 1.5px solid var(--fi-line);
  border-radius: var(--fi-r-s); font-family: var(--fi-f); font-size: 15px;
}
.fi-teklif-uyari { margin-top: 14px; font-size: 13.5px; color: var(--fi-ink-2); }

.fi-durum {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
}
.fi-durum--yeni    { background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); }
.fi-durum--goruldu { background: #FBF1DE; color: #8A5F0F; }
.fi-durum--tamam   { background: var(--fi-mist-2); color: var(--fi-ink-2); }

/* --- kitap sayfasındaki bayi kutuları --- */

.fi-bayi-fiyat {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; margin: 14px 0; border-radius: var(--fi-r-s);
  background: #F2F7FF; border: 1px solid #D6E4FA;
}
.fi-bayi-etiket {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #2A5DA8;
}
.fi-liste-fiyat { font-size: 14px; color: var(--fi-ink-3); text-decoration: line-through; }
.fi-bayi-fiyat strong { font-size: 21px; font-weight: 800; color: #1B4A8C; }

.fi-teklif-ekle {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
}
.fi-teklif-ekle label { font-size: 13.5px; font-weight: 600; color: var(--fi-ink-2); }
.fi-teklif-ekle input {
  width: 86px; padding: 10px 12px; min-height: 44px; text-align: right;
  border: 1.5px solid var(--fi-line); border-radius: var(--fi-r-s);
  font-family: var(--fi-f); font-variant-numeric: tabular-nums;
}
.fi-teklif-durum { font-size: 13.5px; font-weight: 700; color: var(--fi-ana-koyu); }

/* --- kampanyalar --- */

.fi-kampanyalar { display: grid; gap: 16px; }
.fi-kampanya {
  padding: 22px 24px; border-radius: var(--fi-r);
  background: var(--fi-mist); border: 1px solid var(--fi-line);
}
.fi-kampanya-tarih {
  margin: 0 0 5px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-kampanya-baslik { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.fi-kampanya-govde p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--fi-ink-2); }

@media (max-width: 860px) {
  .fi-panel-tanitim { grid-template-columns: 1fr; }
}

/* ============================================================= DÖRT KAPI */

.fi-kapilar-bolum { border-bottom: 1px solid var(--fi-line); }
.fi-kapilar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.fi-kapi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 22px 20px; border-radius: var(--fi-r);
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  text-decoration: none !important;
  transition: transform var(--fi-gecis), box-shadow var(--fi-gecis), border-color var(--fi-gecis);
}
.fi-kapi:hover {
  transform: translateY(-4px); border-color: var(--fi-ana);
  box-shadow: 0 20px 40px -26px rgba(16,24,33,.4);
}
.fi-kapi-kim { font-size: 20px; font-weight: 800; letter-spacing: -.022em; color: var(--fi-ink); }
.fi-kapi-ne  { font-size: 14px; line-height: 1.5; color: var(--fi-ink-2); }
.fi-kapi-git {
  margin-top: auto; padding-top: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--fi-ana-koyu);
}

/* ================================================= GÖRÜNÜM SEÇİCİ / LİSTE */

.fi-arsiv-sag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.fi-gorunum { display: inline-flex; gap: 0; border: 1px solid var(--fi-line); border-radius: 999px; overflow: hidden; }
.fi-gorunum-dugme {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; min-height: 44px;
  font-family: var(--fi-f); font-size: 13.5px; font-weight: 700;
  color: var(--fi-ink) !important; text-decoration: none !important;
  background: var(--fi-paper);
}
.fi-gorunum-dugme + .fi-gorunum-dugme { border-left: 1px solid var(--fi-line); }
.fi-gorunum-dugme.aktif { background: var(--fi-koyu-yuzey); color: #fff !important; }
.fi-gorunum-dugme:not(.aktif):hover { background: var(--fi-mist); }

.fi-kitap-liste { display: flex; flex-direction: column; }
.fi-satir {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 18px; align-items: center;
  padding: 14px 4px; border-bottom: 1px solid var(--fi-line-soft);
  text-decoration: none !important;
  transition: background var(--fi-gecis);
}
.fi-satir:hover { background: var(--fi-mist); }
.fi-satir-gorsel { display: flex; align-items: center; justify-content: center; }
.fi-satir-gorsel img { max-width: 100%; height: auto; border-radius: 3px; }
.fi-satir-gorsel .fi-kapak { width: 100%; box-shadow: none; }
.fi-satir-gorsel .fi-kapak .fi-kapak-ic,
.fi-satir-gorsel .fi-kapak .fi-kapak-sirt { display: none; }
.fi-satir-ad {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 15px; font-weight: 700; color: var(--fi-ink); line-height: 1.35;
}
.fi-satir-meta { font-size: 12.5px; font-weight: 600; color: var(--fi-ink-3); }
.fi-satir-veri {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end;
  font-size: 12.5px; font-weight: 600; color: var(--fi-ink-2);
  font-variant-numeric: tabular-nums; text-align: right;
}
.fi-satir-veri .fi-isbn { color: var(--fi-ink-3); }

/* ---------------------------------------- "kaldığın yer" kısayolu (UX 9) */

.fi-hatirla {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; min-height: 44px;
  background: var(--fi-ana-soluk); border: 1px solid #F6C9C4;
  font-size: 13.5px; font-weight: 700;
  color: var(--fi-ana-koyu) !important; text-decoration: none !important;
}
.fi-hatirla span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: .7;
}
.fi-hatirla:hover { background: var(--fi-ana-yuzey); color: #fff !important; border-color: var(--fi-ana-yuzey); }

/* ------------------------------------------------------------ uyarı kutusu */

.fi-uyari-kutu {
  padding: 16px 18px; margin: 18px 0; border-radius: var(--fi-r-s);
  background: #FBF1DE; border: 1px solid #EEDCB5;
}
.fi-uyari-kutu p { margin: 0; font-size: 14.5px; color: #7A540D; }

@media (max-width: 640px) {
  .fi-satir { grid-template-columns: 44px 1fr; }
  .fi-satir-veri { grid-column: 2; justify-content: flex-start; text-align: left; }
}

/* =============================================================== KAZANIMLAR */

.fi-kazanim-bolum { border-top: 1px solid var(--fi-line); }
.fi-kazanimlar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px;
}
.fi-kazanimlar a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; border-radius: var(--fi-r-s);
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  font-size: 14px; color: var(--fi-ink) !important; text-decoration: none !important;
  min-height: 44px;
}
.fi-kazanimlar a:hover { border-color: var(--fi-ana); background: var(--fi-ana-soluk); }
.fi-kazanimlar code {
  font-family: var(--fm, ui-monospace, monospace);
  font-size: 11.5px; font-weight: 700; color: var(--fi-ana-koyu);
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}

/* ==================================================== MOBİL MENÜ KISAYOLU */

#fi-mobil-kisayol { display: none; }

.fi-mobil-hizli {
  padding: 16px 18px 18px;
  margin-bottom: 12px;
  background: var(--fi-mist);
  border-bottom: 1px solid var(--fi-line);
  font-family: var(--fi-f);
}
.fi-mobil-hizli-etiket {
  display: block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-mobil-siniflar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fi-mobil-siniflar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 12px 4px; min-height: 58px;
  border-radius: var(--fi-r-s);
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  text-decoration: none !important;
}
.fi-mobil-siniflar strong {
  font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--fi-ink);
}
.fi-mobil-siniflar span { font-size: 10.5px; font-weight: 700; color: var(--fi-ink-3); }
.fi-mobil-siniflar a:hover, .fi-mobil-siniflar a:focus-visible {
  background: var(--fi-koyu-yuzey); border-color: var(--fi-koyu-yuzey);
}
.fi-mobil-siniflar a:hover strong, .fi-mobil-siniflar a:hover span,
.fi-mobil-siniflar a:focus-visible strong, .fi-mobil-siniflar a:focus-visible span { color: #fff; }

.fi-mobil-secici {
  display: block; margin-top: 12px; padding: 11px 14px;
  border-radius: var(--fi-r-s); min-height: 44px;
  background: var(--fi-ana-soluk); border: 1px solid #F6C9C4;
  font-size: 13.5px; font-weight: 700;
  color: var(--fi-ana-koyu) !important; text-decoration: none !important;
  text-align: center;
}

/* alt menü açma düğmesi */
.bookory-mobile-nav .menu-item-has-children { position: relative; }
.fi-alt-ac, button.fi-alt-ac {
  position: absolute; right: 0; top: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; font-weight: 600; color: var(--fi-ink-2);
  font-family: var(--fi-f);
}
.fi-alt-ac:hover, button.fi-alt-ac:hover { color: var(--fi-ana-koyu); }

/* =========================================================== SEZON ROZETİ
   Öneri 36. Yalnızca yayınevinin işaretlediği kitaplarda çıkar; 57 kitabın
   hepsi aynı müfredat yılını taşıdığı için taksonomiye bakmak ayırt edici
   olmazdı — rozet ancak bir şey söylüyorsa değerli.
   ========================================================================= */

.fi-sezon-rozet {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--fi-ana-yuzey); color: #fff;
  white-space: nowrap; line-height: 1.2;
}
.fi-sezon-rozet--yeni { background: var(--fi-koyu-yuzey); }

/* kartın kapağı üstünde — kapağın kendisini kapatmasın */
.fi-kitap-gorsel { position: relative; }
.fi-kitap-gorsel .fi-sezon-rozet {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  box-shadow: 0 2px 8px rgba(16, 24, 33, .28);
}

/* WooCommerce döngü kartında akış içinde durur */
.woocommerce ul.products li.product .fi-sezon-rozet { margin: 0 6px 6px 0; }

/* liste satırında adın yanında */
.fi-satir-ad .fi-sezon-rozet { margin-left: 8px; vertical-align: 2px; }

/* kitap sayfasının güncellik bandında diğer rozetlerle aynı hizada */
.fi-guncellik .fi-sezon-rozet { padding: 5px 11px; font-size: 11px; }

/* ========================================================= BASKI NOTU
   Öneri 8. "2026 baskısında ne değişti" — müfredat değiştiğinde öğretmenin
   ve velinin ilk sorusu.
   ========================================================================= */

.fi-baski-notu { border-top: 1px solid var(--fi-line); }

.fi-baski-notu-govde {
  position: relative;
  padding: 20px 22px 20px 26px;
  background: var(--fi-mist);
  border-radius: var(--fi-r);
  border-left: 4px solid var(--fi-ders-renk, var(--fi-ana-koyu));
  max-width: 68ch;
}
.fi-baski-notu-govde p { margin: 0 0 10px; color: var(--fi-ink); font-size: 15.5px; line-height: 1.62; }
.fi-baski-notu-govde p:last-child { margin-bottom: 0; }

/* ============================================================ YILLIK SET
   Öneri 2. Dört ders dört türün tamamını taşıyor; kullanıcı bunu bugün ancak
   dört ayrı arama yaparak görebiliyor.
   ========================================================================= */

.fi-paket-bolum { border-top: 1px solid var(--fi-line); }

.fi-paket-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
  margin: 26px 0;
}

.fi-paket {
  font-family: var(--fi-f);
  background: var(--fi-paper);
  border: 1px solid var(--fi-line);
  border-top: 3px solid var(--fi-paket-renk, var(--fi-ana-koyu));
  border-radius: var(--fi-r);
  padding: 20px 22px 22px;
}

.fi-paket-bas {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--fi-line);
}
.fi-paket-ust {
  margin: 0 0 3px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fi-paket-renk, var(--fi-ink-3));
  color: color-mix(in srgb, var(--fi-paket-renk) 75%, #000);   /* bkz. .fi-seri-adet */
}
.fi-paket-baslik { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.022em; color: var(--fi-ink); }
.fi-paket-doluluk {
  margin: 0; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--fi-ink-3); font-size: 14px;
}
.fi-paket-doluluk strong { font-size: 22px; font-weight: 800; color: var(--fi-ink); }
.fi-paket-doluluk span {
  display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fi-ink-3);
}

/* --- adımlar --- */

.fi-paket-adimlar { list-style: none; margin: 0; padding: 0; }

.fi-paket-adim {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas: "no rol" "no ad";
  column-gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--fi-line-soft);
}
.fi-paket-adim:last-child { border-bottom: 0; padding-bottom: 4px; }

.fi-paket-no {
  grid-area: no; align-self: start;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--fi-mist-2); color: var(--fi-ink-2);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fi-paket-rol {
  grid-area: rol;
  font-size: 10px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fi-paket-renk, var(--fi-ink-3));
  color: color-mix(in srgb, var(--fi-paket-renk) 75%, #000);   /* bkz. .fi-seri-adet */
}
.fi-paket-ad {
  grid-area: ad;
  font-size: 15.5px; font-weight: 700; line-height: 1.36;
  color: var(--fi-ink); text-decoration: none;
}
a.fi-paket-ad:hover, a.fi-paket-ad:focus-visible { text-decoration: underline; }
.fi-paket-tur, .fi-paket-bu, .fi-paket-fazla {
  grid-column: 2; font-size: 12.5px; color: var(--fi-ink-3); display: block; margin-top: 2px;
}
.fi-paket-bu {
  font-weight: 800; color: var(--fi-ana-koyu);
  text-transform: uppercase; letter-spacing: .09em; font-size: 10px;
}
.fi-paket-fazla { color: var(--fi-ink-2); }

/* boş adım — eksiği saklamıyoruz, bilerek soluk */
.fi-paket-adim--bos .fi-paket-no { background: transparent; border: 1px dashed var(--fi-line); color: var(--fi-ink-3); }
.fi-paket-adim--bos .fi-paket-rol { color: var(--fi-ink-3); }
.fi-paket-yok { color: var(--fi-ink-3); font-weight: 600; font-style: italic; }

/* şu an bakılan kitap */
.fi-paket-adim--bu { background: var(--fi-ana-soluk); border-radius: var(--fi-r-s); padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.fi-paket-adim--bu .fi-paket-no { background: var(--fi-ana-yuzey); color: #fff; }

.fi-paket-eylem {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--fi-line);
}

@media (max-width: 480px) {
  .fi-paket { padding: 16px 16px 18px; }
  .fi-paket-baslik { font-size: 18px; }
}

/* ========================================================= GERİ SAYIM
   Öneri 17. Tarih girilmediği sürece hiç render edilmez — uydurma tarihle
   geri sayım göstermek öğrenciyi yanıltır.
   ========================================================================= */

.fi-geri-sayim {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px;
  font-family: var(--fi-f);
  padding: 16px 20px; margin: 20px 0;
  background: var(--fi-koyu-yuzey); color: #fff;
  border-radius: var(--fi-r);
}
.fi-geri-sayim-sol { display: flex; flex-direction: column; }
.fi-geri-sayim-ad {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #B8A5A2;
}
.fi-geri-sayim-tarih { font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.fi-geri-sayim-sayi {
  margin: 0; display: flex; align-items: baseline; gap: 7px;
  font-variant-numeric: tabular-nums;
}
.fi-geri-sayim-sayi strong { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.fi-geri-sayim-sayi span { font-size: 13px; font-weight: 700; color: #DCC9C7; }
.fi-geri-sayim-not {
  margin: 0; flex: 1 1 260px; min-width: 0;
  font-size: 13.5px; line-height: 1.5; color: #DCC9C7;
}
.fi-geri-sayim-not strong { color: #fff; }

.fi-takvim-cizelge { margin: 18px 0 0; }

/* ==================================================== ÇALIŞMA ÇİZELGESİ
   Öneri 16. Duvara asılacak çıktı. Sunucuda üretilir: JavaScript kapalıyken
   de çalışır, adres paylaşılabilir.
   ========================================================================= */

.fi-cizelge { font-family: var(--fi-f); }

.fi-cizelge-form {
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r); padding: 20px 22px 22px; margin-bottom: 30px;
}
.fi-cizelge-form > fieldset, .fi-cizelge-dersler { border: 0; margin: 0; padding: 0; min-width: 0; }
.fi-cizelge-form > fieldset > legend {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-ana-koyu); padding: 0; margin-bottom: 14px;
}
.fi-cizelge-satir {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-bottom: 16px;
}
.fi-cizelge-alan { margin: 0; }
.fi-cizelge-alan label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--fi-ink); margin-bottom: 5px;
}
.fi-cizelge-alan label span { font-weight: 500; color: var(--fi-ink-3); }
.fi-cizelge-alan input, .fi-cizelge-alan select {
  width: 100%; font-family: inherit; font-size: 15px;
  padding: 9px 11px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
}
.fi-cizelge-not { margin: 6px 0 0; font-size: 12.5px; color: var(--fi-ink-3); }

.fi-cizelge-dersler > legend {
  font-size: 13px; font-weight: 700; color: var(--fi-ink); padding: 0; margin-bottom: 8px;
}
.fi-cizelge-kutular { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-cizelge-kutu {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  font-size: 14px; cursor: pointer;
}
.fi-cizelge-kutu:has(input:checked) {
  border-color: var(--fi-ana-koyu); background: var(--fi-ana-soluk); font-weight: 700;
}
.fi-cizelge-kutu input { accent-color: var(--fi-ana-koyu); margin: 0; }

.fi-cizelge-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.fi-cizelge-dugmeler button { cursor: pointer; border: 0; font-family: inherit; }
.fi-cizelge-dugmeler .fi-dugme--cizgi { border: 1px solid currentColor; }

.fi-cizelge-bos { color: var(--fi-ink-2); font-size: 15px; }

/* --- çıktı --- */

.fi-cizelge-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--fi-ink);
}
.fi-cizelge-ust {
  margin: 0 0 4px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fi-ana-koyu);
}
.fi-cizelge-baslik { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.028em; }
.fi-cizelge-alt { margin: 6px 0 0; font-size: 14px; color: var(--fi-ink-2); }
.fi-cizelge-imza { font-size: 13px; color: var(--fi-ink-3); }

.fi-cizelge-kaydir { overflow-x: auto; }

.fi-cizelge-tablo {
  width: 100%; border-collapse: collapse;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.fi-cizelge-tablo th, .fi-cizelge-tablo td {
  border: 1px solid var(--fi-line); padding: 0;
}
.fi-cizelge-tablo thead th {
  background: var(--fi-mist);
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fi-ink-2);
  padding: 9px 8px; text-align: center; vertical-align: bottom;
}
.fi-cizelge-tablo .fi-c-hafta { width: 52px; text-align: center; }
.fi-cizelge-tablo .fi-c-tarih { width: 96px; }
.fi-cizelge-tablo .fi-c-not   { min-width: 130px; }

.fi-cizelge-tablo tbody th.fi-c-hafta {
  font-size: 15px; font-weight: 800; color: var(--fi-ink);
  background: var(--fi-mist); padding: 0 6px; height: 34px;
}
.fi-cizelge-tablo tbody td { height: 34px; }
.fi-cizelge-tablo td.fi-c-tarih {
  padding: 0 9px; font-size: 12.5px; color: var(--fi-ink-3); white-space: nowrap;
}
.fi-cizelge-tablo td.fi-c-kutu { text-align: center; }
.fi-cizelge-tablo td.fi-c-kutu span[aria-hidden] {
  display: inline-block; width: 17px; height: 17px;
  border: 1.5px solid var(--fi-ink-3); border-radius: 4px;
}
/* ay değişimi — dört haftada bir göz dinlensin */
.fi-cizelge-tablo tr.fi-c-ay th, .fi-cizelge-tablo tr.fi-c-ay td { border-top: 2px solid var(--fi-ink-2); }

.fi-cizelge-dip {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--fi-line);
  font-size: 12.5px; color: var(--fi-ink-3);
}

@media print {
  .fi-cizelge-form, .fi-sayfa-bas, .fi-iz, .fi-gb { display: none !important; }
  .fi-cizelge-kaydir { overflow: visible; }
  .fi-cizelge-tablo { font-size: 9.5pt; }
  .fi-cizelge-tablo tbody th.fi-c-hafta,
  .fi-cizelge-tablo tbody td { height: 22px; }
  .fi-cizelge-tablo thead { display: table-header-group; }
  .fi-cizelge-tablo tr { break-inside: avoid; }
  .fi-geri-sayim { background: transparent; color: #000; border: 1px solid #000; }
  .fi-geri-sayim-ad, .fi-geri-sayim-sayi span, .fi-geri-sayim-not { color: #000; }
  @page { margin: 12mm; }
}

/* ==================================================== SAYFA GERİ BİLDİRİMİ
   Öneri 49. Hangi sayfanın işe yaramadığını tahmin etmek yerine ölçmek.
   ========================================================================= */

.fi-gb {
  font-family: var(--fi-f);
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  margin: 44px 0 8px; padding: 18px 22px;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
}
.fi-gb-baslik {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.012em;
  color: var(--fi-ink); flex: 1 1 240px;
}
.fi-gb-dugmeler { display: flex; gap: 8px; }
.fi-gb-dugme, button.fi-gb-dugme {
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 9px 22px; border-radius: 999px; cursor: pointer;
  background: var(--fi-paper); color: var(--fi-ink);
  border: 1px solid var(--fi-line);
  transition: background var(--fi-gecis), border-color var(--fi-gecis);
}
.fi-gb-dugme:hover, button.fi-gb-dugme:hover { border-color: var(--fi-ana-koyu); background: var(--fi-ana-soluk); }

.fi-gb-not { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; flex: 1 1 100%; }
.fi-gb-not label { flex: 1 1 100%; font-size: 13px; font-weight: 700; color: var(--fi-ink); }
.fi-gb-not textarea {
  flex: 1 1 260px; font-family: inherit; font-size: 14.5px;
  padding: 9px 11px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
  resize: vertical;
}
.fi-gb-not button { cursor: pointer; border: 1px solid currentColor; }

.fi-gb-tesekkur { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--fi-ana-koyu); }

/* [hidden] burada da `display:flex` tarafından ezilmemeli */
.fi-gb [hidden] { display: none !important; }

@media print { .fi-gb { display: none !important; } }

/* ============================================== SEÇİM DÜĞMESİ VE ÇUBUĞU
   Öneri 1. Düğme bağlantının dışında duruyor — <button> bir <a> içine
   konamaz. O yüzden kart ve satır birer sarmalayıcı aldı.
   ========================================================================= */

.fi-kitap-sar { position: relative; display: flex; }
.fi-kitap-sar > .fi-kitap { flex: 1; min-width: 0; }

.fi-satir-sar { position: relative; }
.fi-satir-sar > .fi-satir { padding-right: 52px; }

.fi-listem-ekle, button.fi-listem-ekle {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fi-line); border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--fi-ink);
  cursor: pointer;
  transition: background var(--fi-gecis), border-color var(--fi-gecis),
              transform var(--fi-gecis);
}
.fi-satir-sar > .fi-listem-ekle, .fi-satir-sar > button.fi-listem-ekle { top: 50%; right: 4px; transform: translateY(-50%); }

/* artı işareti — ikon yazı tipi yüklemeden */
.fi-listem-ekle-im { position: relative; width: 14px; height: 14px; display: block; }
.fi-listem-ekle-im::before,
.fi-listem-ekle-im::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: 1px;
  transition: transform var(--fi-gecis);
}
.fi-listem-ekle-im::before { width: 14px; height: 2px; }
.fi-listem-ekle-im::after  { width: 2px;  height: 14px; }

.fi-listem-ekle:hover, button.fi-listem-ekle:hover { border-color: var(--fi-ana-koyu); background: #fff; }
.fi-kitap-sar > .fi-listem-ekle:hover, .fi-kitap-sar > button.fi-listem-ekle:hover { transform: scale(1.08); }

.fi-listem-ekle.secili, button.fi-listem-ekle.secili {
  background: var(--fi-ana-yuzey); border-color: var(--fi-ana-yuzey); color: #fff;
}
/* seçiliyken artı → onay işareti */
.fi-listem-ekle.secili .fi-listem-ekle-im::before, button.fi-listem-ekle.secili .fi-listem-ekle-im::before {
  width: 12px; height: 2px; transform: rotate(-45deg) translate(-1px, 3px);
}
.fi-listem-ekle.secili .fi-listem-ekle-im::after, button.fi-listem-ekle.secili .fi-listem-ekle-im::after {
  width: 7px; height: 2px; transform: rotate(45deg) translate(-4px, 2px);
}

/* kitap sayfasındaki geniş hâli */
.fi-listem-ekle--genis {
  position: static; width: auto; height: auto; border-radius: 999px;
  background: transparent;
}
.fi-listem-ekle--genis.secili { background: var(--fi-ana-yuzey); color: #fff; }

.fi-kitap-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }

/* --- yüzen çubuk --- */

.fi-listem-cubuk {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 9990;
  display: flex; align-items: center; gap: 18px;
  max-width: min(560px, calc(100vw - 28px));
  padding: 10px 12px 10px 20px;
  font-family: var(--fi-f);
  background: var(--fi-koyu-yuzey); color: #fff;
  border-radius: 999px;
  box-shadow: 0 14px 34px -12px rgba(16, 24, 33, .55);
}
.fi-listem-cubuk[hidden] { display: none !important; }
.fi-listem-cubuk-sayi { margin: 0; font-size: 14.5px; white-space: nowrap; }
.fi-listem-cubuk-sayi strong { font-size: 19px; font-weight: 800; }
.fi-listem-cubuk-sayi span { color: #DCC9C7; }
.fi-listem-cubuk-eylem { display: flex; align-items: center; gap: 6px; }
.fi-listem-cubuk .fi-dugme, .fi-listem-cubuk button.fi-dugme { padding: 9px 20px; font-size: 14px; }
.fi-listem-cubuk-kapat, button.fi-listem-cubuk-kapat {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; line-height: 1;
}
.fi-listem-cubuk-kapat:hover, button.fi-listem-cubuk-kapat:hover { background: rgba(255, 255, 255, .22); }

/* WhatsApp düğmesi ve mobil çubukla çakışmasın */
body.fi-listem-var .fi-wa { bottom: 92px; }
@media (max-width: 780px) {
  .fi-listem-cubuk { left: 14px; right: 14px; transform: none; max-width: none; bottom: 14px; }
  body.fi-cubuk-var .fi-listem-cubuk { bottom: 84px; }
  body.fi-listem-var.fi-cubuk-var .fi-wa { bottom: 150px; }
}
@media print { .fi-listem-cubuk, .fi-listem-ekle { display: none !important; } }

/* ============================================================ LİSTE SAYFASI
   Öneri 1, 18, 19, 45 — karşılaştırma, zümre listesi, adet, gönderme.
   ========================================================================= */

.fi-listem { font-family: var(--fi-f); }

.fi-listem-bos {
  padding: 34px 28px; text-align: center;
  background: var(--fi-mist); border: 1px solid var(--fi-line); border-radius: var(--fi-r);
}
.fi-listem-bos h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.024em; }
.fi-listem-bos p { margin: 0 auto 16px; max-width: 56ch; color: var(--fi-ink-2); }
.fi-listem-bos p:last-child { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 0; }

.fi-listem-bolum-bas {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fi-ink-3);
  margin: 0 0 6px;
}
.fi-listem-adet-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--fi-ana-yuzey); color: #fff; font-size: 12px; letter-spacing: 0;
}
.fi-listem-ipucu { margin: 0 0 12px; font-size: 13.5px; color: var(--fi-ink-3); max-width: 70ch; }

.fi-listem-kunye, .fi-listem-hesap {
  padding: 20px 22px; margin-bottom: 18px;
  background: var(--fi-mist); border: 1px solid var(--fi-line); border-radius: var(--fi-r);
}

.fi-listem-kunye-alanlar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.fi-listem-kunye-alanlar p { margin: 0; }
.fi-listem-kunye-alanlar label,
.fi-listem-hesap-alanlar label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--fi-ink); margin-bottom: 5px;
}
.fi-listem-kunye-alanlar input,
.fi-listem-hesap-alanlar input {
  width: 100%; font-family: inherit; font-size: 15px;
  padding: 9px 11px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
}

/* --- adet hesabı --- */

.fi-listem-hesap-alanlar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
}
.fi-listem-hesap-alanlar > p { margin: 0; }
.fi-listem-hesap-alanlar input[type="number"] { width: 96px; }
.fi-listem-carpi, .fi-listem-esittir {
  font-size: 19px; font-weight: 700; color: var(--fi-ink-3); padding-bottom: 9px;
}
.fi-listem-sonuc { display: flex; align-items: baseline; gap: 6px; padding-bottom: 4px; }
.fi-listem-sonuc output {
  font-size: 27px; font-weight: 800; letter-spacing: -.028em;
  color: var(--fi-ana-koyu); font-variant-numeric: tabular-nums;
}
.fi-listem-sonuc span { font-size: 13.5px; color: var(--fi-ink-2); }
.fi-listem-uygula { cursor: pointer; border: 0; }

/* --- tablo --- */

.fi-listem-kaydir { overflow-x: auto; }

.fi-listem-tablo {
  width: 100%; border-collapse: collapse; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.fi-listem-tablo thead th {
  text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fi-ink-3);
  padding: 8px 12px 8px 0; border-bottom: 2px solid var(--fi-ink);
}
.fi-listem-tablo td, .fi-listem-tablo tbody th {
  padding: 12px 12px 12px 0; border-bottom: 1px solid var(--fi-line-soft);
  vertical-align: middle; text-align: left; font-weight: 500; color: var(--fi-ink-2);
}
.fi-listem-tablo tbody tr:hover { background: var(--fi-mist); }

.fi-listem-tablo .fi-l-kitap { min-width: 260px; }
.fi-listem-tablo tbody th.fi-l-kitap {
  display: flex; align-items: center; gap: 12px;
  border-left: 3px solid var(--fi-ders-renk, transparent);
  padding-left: 10px;
}
.fi-l-gorsel { flex: 0 0 40px; }
.fi-l-gorsel img { width: 40px; height: auto; border-radius: 3px; display: block; }
.fi-l-ad a { color: var(--fi-ink); font-weight: 700; text-decoration: none; }
.fi-l-ad a:hover { text-decoration: underline; }
.fi-l-isbn { display: block; font-size: 11.5px; color: var(--fi-ink-3); margin-top: 2px; }

.fi-listem-tablo .fi-sayi { text-align: right; white-space: nowrap; padding-right: 18px; }
.fi-listem-tablo th.fi-sayi { text-align: right; padding-right: 18px; }

.fi-listem-adet {
  width: 78px; font-family: inherit; font-size: 15px; text-align: right;
  padding: 7px 9px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
  font-variant-numeric: tabular-nums;
}
.fi-listem-cikar {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fi-line); border-radius: 50%;
  background: var(--fi-paper); color: var(--fi-ink-3); font-size: 17px; line-height: 1;
}
.fi-listem-cikar:hover { border-color: var(--fi-red); color: var(--fi-red); }

.fi-listem-tablo tfoot th {
  text-align: right; padding: 14px 12px 0 0;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-listem-tablo tfoot td { padding-top: 14px; border: 0; }
.fi-listem-tablo tfoot output {
  font-size: 19px; font-weight: 800; color: var(--fi-ink); padding-right: 9px;
  display: inline-block; text-align: right; min-width: 78px;
}

.fi-listem-eylem {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--fi-line);
}
.fi-listem-eylem button { cursor: pointer; }
.fi-listem-eylem .fi-dugme--cizgi { border: 1px solid currentColor; }
.fi-listem-eylem [data-fi-durum] { flex: 1 1 100%; margin: 4px 0 0; color: var(--fi-ana-koyu); font-weight: 600; }

.fi-listem-cikti-bas, .fi-listem-cikti-dip { display: none; }

@media (max-width: 640px) {
  .fi-listem-tablo { font-size: 13px; }
  .fi-listem-tablo .fi-l-kitap { min-width: 210px; }
}

@media print {
  .fi-listem-hesap, .fi-listem-eylem, .fi-l-cikar,
  .fi-listem-ipucu, .fi-sayfa-bas, .fi-iz, .fi-gb { display: none !important; }
  .fi-listem-kaydir { overflow: visible; }
  .fi-listem-tablo { font-size: 9.5pt; }
  .fi-listem-tablo tr { break-inside: avoid; }
  .fi-listem-tablo thead { display: table-header-group; }
  .fi-l-gorsel { display: none; }
  .fi-listem-adet {
    border: 0; background: transparent; width: 46px; padding: 0; font-size: 10pt; font-weight: 700;
  }

  .fi-listem-kunye {
    background: transparent; border: 0; border-bottom: 2px solid #000;
    border-radius: 0; padding: 0 0 10px; margin-bottom: 14px;
  }
  .fi-listem-bolum-bas { display: none; }
  .fi-listem-kunye-alanlar { display: flex; flex-wrap: wrap; gap: 6px 26px; }
  .fi-listem-kunye-alanlar label { font-size: 8.5pt; color: #555; margin: 0; }
  .fi-listem-kunye-alanlar input {
    border: 0; background: transparent; padding: 0; font-size: 11pt; font-weight: 700; width: auto; min-width: 130px;
  }

  .fi-listem-cikti-bas {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 8px; margin-bottom: 12px;
  }
  .fi-listem-cikti-bas p { margin: 0; font-size: 9pt; }
  .fi-listem-cikti-ust { font-weight: 800; }
  .fi-listem-cikti-dip {
    display: block; margin-top: 16px; padding-top: 10px;
    border-top: 1px solid #999; font-size: 8.5pt; color: #444;
  }
  @page { margin: 14mm; }
}

/* ==================================================== HAFTALIK TAKİP
   Öneri 11. Takvim zaten çiziliyordu ama pasifti.
   ========================================================================= */

.fi-takip-durum {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 16px;
}
.fi-takip-sayi { margin: 0; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.fi-takip-sayi strong {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  color: var(--fi-ders-renk, var(--fi-ana-koyu)); font-variant-numeric: tabular-nums;
}
.fi-takip-sayi span { font-size: 14px; color: var(--fi-ink-3); font-weight: 600; }

.fi-takip-cubuk {
  flex: 1 1 200px; height: 8px; min-width: 140px;
  background: var(--fi-mist-2); border-radius: 999px; overflow: hidden;
}
.fi-takip-cubuk span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--fi-ders-renk, var(--fi-ana-koyu));
  transition: width var(--fi-gecis);
}
.fi-takip-sifirla {
  border: 1px solid var(--fi-line); background: var(--fi-paper);
  color: var(--fi-ink-2); font-family: inherit; font-size: 13px;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
}
.fi-takip-sifirla:hover { border-color: var(--fi-ink-3); color: var(--fi-ink); }
.fi-takip-sifirla[hidden] { display: none !important; }

.fi-takvim--takip li { background: none; border: 0; aspect-ratio: auto; }
.fi-takvim-hafta {
  width: 100%; aspect-ratio: 1; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: var(--fi-r-s);
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  font-family: inherit;
  transition: background var(--fi-gecis), border-color var(--fi-gecis), transform var(--fi-gecis);
}
.fi-takvim-hafta:hover { border-color: var(--fi-ders-renk, var(--fi-ana-koyu)); transform: translateY(-2px); }
.fi-takvim-hafta.bitti {
  background: var(--fi-ders-renk, var(--fi-ana-koyu));
  border-color: var(--fi-ders-renk, var(--fi-ana-koyu));
}
.fi-takvim-hafta.bitti .fi-takvim-no,
.fi-takvim-hafta.bitti .fi-takvim-ad { color: #fff; }

@media print {
  .fi-takip-sifirla { display: none !important; }
  .fi-takvim-hafta { border: 1px solid #999; background: transparent; }
}

/* =============================================================== KİTAPLIĞIM
   Öneri 10.
   ========================================================================= */

.fi-kitaplik[hidden] { display: none !important; }
.fi-kitaplik { margin-bottom: 34px; }

.fi-kitaplik-dugme, button.fi-kitaplik-dugme {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  background: var(--fi-paper); color: var(--fi-ink);
  border: 1px solid var(--fi-line);
  transition: background var(--fi-gecis), border-color var(--fi-gecis);
}
.fi-kitaplik-dugme:hover, button.fi-kitaplik-dugme:hover { border-color: var(--fi-ana-koyu); background: var(--fi-ana-soluk); }
.fi-kitaplik-im {
  width: 17px; height: 17px; flex: 0 0 17px; border-radius: 4px;
  border: 2px solid var(--fi-ink-3); position: relative;
  transition: background var(--fi-gecis), border-color var(--fi-gecis);
}
.fi-kitaplik-dugme.secili, button.fi-kitaplik-dugme.secili { border-color: var(--fi-ana-koyu); background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); }
.fi-kitaplik-dugme.secili .fi-kitaplik-im, button.fi-kitaplik-dugme.secili .fi-kitaplik-im { background: var(--fi-ana-koyu); border-color: var(--fi-ana-koyu); }
.fi-kitaplik-dugme.secili .fi-kitaplik-im::after, button.fi-kitaplik-dugme.secili .fi-kitaplik-im::after {
  content: ""; position: absolute; left: 4px; top: 0;
  width: 4px; height: 9px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

@media print { .fi-kitaplik, .fi-kitaplik-dugme, .fi-kitap-eylem { display: none !important; } }

/* ============================================================ TALEP TAKİBİ
   Öneri 23. "Talebim ne durumda?" sorusu telefonla soruluyordu.
   ========================================================================= */

.fi-takip-sorgu { font-family: var(--fi-f); }

.fi-takip-form {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  padding: 20px 22px; margin-bottom: 24px;
  background: var(--fi-mist); border: 1px solid var(--fi-line); border-radius: var(--fi-r);
}
.fi-takip-form p { margin: 0; }
.fi-takip-alan label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--fi-ink); margin-bottom: 5px;
}
.fi-takip-alan input {
  font-family: var(--fi-f); font-size: 19px; font-weight: 700;
  letter-spacing: .06em; width: 190px;
  padding: 9px 13px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
}
.fi-takip-form button { cursor: pointer; border: 0; }

.fi-takip-sonuc {
  padding: 24px 26px;
  border: 1px solid var(--fi-line); border-radius: var(--fi-r);
  background: var(--fi-paper);
}
.fi-takip-sonuc--yok { background: var(--fi-mist); }
.fi-takip-sonuc--yok p { margin: 0 0 8px; color: var(--fi-ink-2); }
.fi-takip-sonuc--yok p:last-child { margin-bottom: 0; }

.fi-takip-bas {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--fi-line);
}
.fi-takip-kod {
  margin: 2px 0 4px; font-size: 26px; font-weight: 800;
  letter-spacing: .02em; color: var(--fi-ink);
}
.fi-takip-tarih { margin: 0; font-size: 13.5px; color: var(--fi-ink-3); }

.fi-takip-rozet {
  margin: 0; padding: 7px 15px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 800;
  background: var(--fi-mist-2); color: var(--fi-ink-2);
}
.fi-takip-rozet--yeni       { background: #FBE9E7; color: #A32B22; }
.fi-takip-rozet--goruldu,
.fi-takip-rozet--gorusuluyor,
.fi-takip-rozet--hazirlaniyor { background: #FBF1DE; color: #855209; }
.fi-takip-rozet--kargolandi,
.fi-takip-rozet--gonderildi  { background: #E4EEF8; color: #17578A; }
.fi-takip-rozet--onaylandi,
.fi-takip-rozet--tamam       { background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); }

/* --- aşama çizgisi --- */

.fi-takip-adimlar {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
}
.fi-takip-adim {
  position: relative; padding-top: 26px; text-align: center;
  font-size: 13px; color: var(--fi-ink-3);
}
/* aşamalar arası çizgi */
.fi-takip-adim::before {
  content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 2px;
  background: var(--fi-line);
}
.fi-takip-adim:first-child::before { display: none; }
.fi-takip-adim--bitti::before,
.fi-takip-adim--simdi::before { background: var(--fi-ana-koyu); }

.fi-takip-nokta {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fi-paper); border: 2px solid var(--fi-line);
}
.fi-takip-adim--bitti .fi-takip-nokta { background: var(--fi-ana-koyu); border-color: var(--fi-ana-koyu); }
.fi-takip-adim--simdi .fi-takip-nokta {
  background: var(--fi-ana-koyu); border-color: var(--fi-ana-koyu);
  box-shadow: 0 0 0 4px var(--fi-ana-soluk);
}
.fi-takip-adim--bitti { color: var(--fi-ink-2); }
.fi-takip-adim--simdi { color: var(--fi-ana-koyu); font-weight: 800; }

.fi-takip-kalemler { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; }
.fi-takip-kalemler th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fi-ink-3);
  padding: 6px 10px 6px 0; border-bottom: 1px solid var(--fi-line);
}
.fi-takip-kalemler td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--fi-line-soft); color: var(--fi-ink); }
.fi-takip-kalemler .fi-sayi { text-align: right; font-variant-numeric: tabular-nums; }

.fi-takip-not { margin: 0; font-size: 13px; color: var(--fi-ink-3); }
.fi-takip-iptal {
  margin: 0 0 18px; padding: 14px 16px; border-radius: var(--fi-r-s);
  background: var(--fi-mist); color: var(--fi-ink-2);
}

@media (max-width: 620px) {
  .fi-takip-adimlar { grid-auto-flow: row; grid-auto-columns: auto; gap: 2px; }
  .fi-takip-adim { padding: 6px 0 6px 26px; text-align: left; }
  .fi-takip-adim::before { top: -2px; bottom: 50%; left: 5px; right: auto; width: 2px; height: auto; }
  .fi-takip-nokta { top: 10px; left: 0; transform: none; }
}

/* ================================================== BAYİ PANELİ EKLERİ
   Öneri 25, 26, 27, 29, 30.
   ========================================================================= */

/* --- temin durumu (29) --- */
.fi-temin {
  display: inline-block; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px;
}
.fi-temin--var  { background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); }
.fi-temin--bekle{ background: #FBF1DE; color: #855209; }
.fi-temin--yok  { background: #FBE9E7; color: #A32B22; }

/* --- bölge koruması (30) --- */
.fi-pano-bolge {
  margin: 8px 0 0; font-size: 13.5px;
  padding: 6px 13px; border-radius: 999px; display: inline-block;
}
.fi-pano-bolge--tek   { background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); }
.fi-pano-bolge--coklu { background: var(--fi-mist-2); color: var(--fi-ink-2); }

/* --- toplu giriş (26) --- */
.fi-toplu {
  margin-bottom: 22px; padding: 0 20px;
  background: var(--fi-mist); border: 1px solid var(--fi-line); border-radius: var(--fi-r);
}
.fi-toplu > summary {
  padding: 15px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px; color: var(--fi-ink);
  display: flex; align-items: center; gap: 9px;
}
.fi-toplu > summary::-webkit-details-marker { display: none; }
.fi-toplu > summary::before {
  content: "+"; font-size: 19px; font-weight: 800; line-height: 1;
  color: var(--fi-ana-koyu); width: 16px; text-align: center;
}
.fi-toplu[open] > summary::before { content: "–"; }
.fi-toplu form { padding-bottom: 18px; }
.fi-toplu label { display: block; font-size: 13px; color: var(--fi-ink-2); margin-bottom: 6px; }
.fi-toplu label code {
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  border-radius: 3px; padding: 1px 5px; font-size: 12.5px;
}
.fi-toplu textarea {
  width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
  resize: vertical;
}
.fi-toplu button { cursor: pointer; border: 0; }

/* --- geçmişteki mini düğmeler (25, 27) --- */
.fi-gecmis-eylem { white-space: nowrap; }
.fi-mini-dugme {
  display: inline-block; margin-right: 5px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--fi-line); color: var(--fi-ink-2); background: var(--fi-paper);
}
.fi-mini-dugme:hover { border-color: var(--fi-ana-koyu); color: var(--fi-ana-koyu); }

/* --- teklif çıktısı (27) --- */
.fi-teklif-cikti { font-family: var(--fi-f); }
.fi-teklif-geri { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.fi-teklif-geri button { cursor: pointer; border: 0; }

.fi-teklif-bas {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 2px solid var(--fi-ink);
}
.fi-teklif-baslik { margin: 2px 0 4px; font-size: 24px; font-weight: 800; letter-spacing: .02em; }
.fi-teklif-tarih { margin: 0; font-size: 13.5px; color: var(--fi-ink-3); }
.fi-teklif-bayi { text-align: right; font-size: 13.5px; color: var(--fi-ink-2); }
.fi-teklif-bayi p { margin: 0 0 2px; }

.fi-teklif-not-cikti {
  margin: 16px 0 0; padding: 13px 16px;
  background: var(--fi-mist); border-radius: var(--fi-r-s); color: var(--fi-ink);
}
.fi-teklif-dip {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--fi-line);
  font-size: 12.5px; color: var(--fi-ink-3);
}

@media print {
  .fi-pano-sekmeler, .fi-pano-bas, .fi-teklif-geri, .fi-pano-bildirim,
  .fi-toplu, .fi-gecmis-eylem { display: none !important; }
  .fi-teklif-cikti { font-size: 10pt; }
  .fi-teklif-tablo tr { break-inside: avoid; }
  @page { margin: 15mm; }
}

/* ================================================= ARAMA ÖNERİSİ EKLERİ
   Öneri 32, 33, 35 — klavye, son aramalar, boş aramadan talep.
   ========================================================================= */

/* ok tuşuyla seçilen öge */
.fi-oneri [role="option"].secili {
  background: var(--fi-ana-soluk);
  outline: 2px solid var(--fi-ana-koyu); outline-offset: -2px;
}

.fi-oneri-temizle {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; margin-top: 2px;
  font-family: inherit; font-size: 12.5px; color: var(--fi-ink-3);
  background: none; border: 0; border-top: 1px solid var(--fi-line-soft); cursor: pointer;
}
.fi-oneri-temizle:hover { color: var(--fi-red); }

.fi-oneri-bildir {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--fi-line-soft);
}
.fi-oneri-bildir p { margin: 0 0 8px; font-size: 13px; color: var(--fi-ink-2); }
.fi-oneri-bildir-dugme, button.fi-oneri-bildir-dugme {
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  background: var(--fi-ana-yuzey); color: #fff; border: 0;
}
.fi-oneri-bildir-dugme:disabled, button.fi-oneri-bildir-dugme:disabled { opacity: .55; cursor: default; }
.fi-oneri-tesekkur { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--fi-ana-koyu); }

/* =============================================== BARKOD OKUTARAK ARAMA
   Öneri 34. Tarayıcı desteklemiyorsa düğme hiç eklenmiyor.
   ========================================================================= */

.fi-barkod-ac, button.fi-barkod-ac {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--fi-ink-3);
}
.fi-barkod-ac:hover, button.fi-barkod-ac:hover { color: var(--fi-ana-koyu); }
/* barkod simgesi — üç dikey çizgi */
.fi-barkod-im {
  width: 15px; height: 15px; position: relative; display: block;
  border-left: 2px solid currentColor; border-right: 2px solid currentColor;
}
.fi-barkod-im::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px; background: currentColor;
}

.fi-barkod-katman {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(10, 16, 12, .82);
}
.fi-barkod-katman[hidden] { display: none !important; }

.fi-barkod-kutu {
  width: min(440px, 100%); font-family: var(--fi-f);
  background: var(--fi-paper); border-radius: var(--fi-r); overflow: hidden;
}
.fi-barkod-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--fi-line);
}
.fi-barkod-bas h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.018em; }
.fi-barkod-kapat, button.fi-barkod-kapat {
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--fi-mist);
  color: var(--fi-ink); font-size: 22px; line-height: 1;
}
.fi-barkod-kapat:hover, button.fi-barkod-kapat:hover { background: var(--fi-mist-2); }

.fi-barkod-sahne { position: relative; background: #0A100C; aspect-ratio: 4 / 3; }
.fi-barkod-sahne video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fi-barkod-cerceve {
  position: absolute; left: 12%; right: 12%; top: 34%; bottom: 34%;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 8px;
  box-shadow: 0 0 0 2000px rgba(10, 16, 12, .35);
}

.fi-barkod-durum {
  margin: 0; padding: 15px 20px; font-size: 14px; color: var(--fi-ink-2);
}
.fi-barkod-durum--hata   { color: var(--fi-red); font-weight: 700; }
.fi-barkod-durum--basari { color: var(--fi-ana-koyu); font-weight: 700; }

/* ==================================================== OKUMA TERCİHLERİ
   Öneri 39, 41, 42. Tercihler <html> üzerine sınıf olarak biniyor ve
   boyamadan önce uygulanıyor — sayfa zıplamıyor.
   ========================================================================= */

/* --fi-alt-cubuk'u JS ölçüyor: temanın mobildeki sabit gezinme çubuğunun
   yüksekliği. Yoksa 0 — masaüstünde düğme olduğu yerde kalıyor. */
.fi-okuma {
  position: fixed; left: 18px; z-index: 9986;
  bottom: calc(18px + var(--fi-alt-cubuk, 0px));
  font-family: var(--fi-f);
}

.fi-okuma-ac, button.fi-okuma-ac {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  background: var(--fi-paper); color: var(--fi-ink);
  border: 1px solid var(--fi-line);
  box-shadow: 0 8px 22px -12px rgba(16, 24, 33, .5);
}
.fi-okuma-ac:hover, button.fi-okuma-ac:hover { border-color: var(--fi-ana-koyu); }
.fi-okuma-ac.etkin, button.fi-okuma-ac.etkin { border-color: var(--fi-ana-koyu); background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); }
.fi-okuma-im { font-weight: 800; font-size: 16px; line-height: 1; }

.fi-okuma-panel {
  position: absolute; left: 0; bottom: calc(100% + 10px);
  width: min(310px, calc(100vw - 36px));
  padding: 18px 20px 16px;
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  box-shadow: 0 18px 42px -16px rgba(16, 24, 33, .48);
}
.fi-okuma-panel[hidden] { display: none !important; }
.fi-okuma-baslik {
  margin: 0 0 14px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-okuma-grup { border: 0; padding: 0; margin: 0 0 14px; }
.fi-okuma-grup legend {
  padding: 0; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--fi-ink);
}
.fi-okuma-boyutlar { display: flex; gap: 7px; }
.fi-okuma-boyut, button.fi-okuma-boyut {
  flex: 1; min-height: 44px; cursor: pointer;
  border: 1px solid var(--fi-line); border-radius: var(--fi-r-s);
  background: var(--fi-paper); color: var(--fi-ink); font-family: inherit; font-weight: 800;
}
.fi-okuma-boyut--1 { font-size: 13px; }
.fi-okuma-boyut--2 { font-size: 17px; }
.fi-okuma-boyut--3 { font-size: 21px; }
.fi-okuma-boyut:hover, button.fi-okuma-boyut:hover { border-color: var(--fi-ana-koyu); }
.fi-okuma-boyut.secili, button.fi-okuma-boyut.secili {
  background: var(--fi-ana-yuzey); border-color: var(--fi-ana-yuzey); color: #fff;
}

.fi-okuma-secim {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--fi-line-soft); cursor: pointer;
}
.fi-okuma-secim input { margin: 3px 0 0; accent-color: var(--fi-ana-koyu); width: 17px; height: 17px; }
.fi-okuma-secim strong { display: block; font-size: 14px; color: var(--fi-ink); }
.fi-okuma-secim em { display: block; font-size: 12.5px; font-style: normal; color: var(--fi-ink-3); margin-top: 2px; }

.fi-okuma-not {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--fi-line-soft);
  font-size: 12px; color: var(--fi-ink-3);
}
.fi-okuma-sifirla, button.fi-okuma-sifirla {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--fi-ana-koyu);
  text-decoration: underline; font-weight: 700;
}

/* WhatsApp ve listem çubuğuyla aynı yükselme kuralları */
body.fi-listem-var .fi-okuma { bottom: calc(92px + var(--fi-alt-cubuk, 0px)); }
@media (max-width: 780px) {
  .fi-okuma { left: 14px; bottom: calc(14px + var(--fi-alt-cubuk, 0px)); }
  .fi-okuma-etiket { display: none; }
  .fi-okuma-ac, button.fi-okuma-ac { width: 46px; height: 46px; padding: 0; justify-content: center; }
  body.fi-listem-var .fi-okuma { bottom: 84px; }
  body.fi-listem-var.fi-cubuk-var .fi-okuma { bottom: 150px; }
  body.fi-cubuk-var .fi-okuma { bottom: 84px; }
}
@media print { .fi-okuma, .fi-barkod-katman, .fi-barkod-ac { display: none !important; } }

/* --- 39) metin boyutu --- */

html.fi-metin-2 { font-size: 112.5%; }
html.fi-metin-3 { font-size: 125%; }
/* Tema pek çok yerde px kullanıyor; gövde metnini ayrıca ölçekliyoruz. */
html.fi-metin-2 body { font-size: 1.06em; }
html.fi-metin-3 body { font-size: 1.13em; }

/* --- 41) disleksi dostu okuma ---
   OpenDyslexic yalnızca okuyucunun cihazında kuruluysa kullanılır; dışarıdan
   yazı tipi indirmiyoruz. Asıl etki zaten aralıklarda: harf, sözcük ve satır
   aralığını açmak, iki yana yaslamayı kaldırmak. */

html.fi-disleksi body,
html.fi-disleksi p,
html.fi-disleksi li,
html.fi-disleksi dd,
html.fi-disleksi dt,
html.fi-disleksi td,
html.fi-disleksi th,
html.fi-disleksi label,
html.fi-disleksi .fi-kitap-ad,
html.fi-disleksi .fi-kitap-aciklama {
  font-family: "OpenDyslexic", "Atkinson Hyperlegible", var(--fi-f);
  letter-spacing: .045em;
  word-spacing: .16em;
  line-height: 1.85;
  text-align: left;
  hyphens: none;
}
html.fi-disleksi p, html.fi-disleksi li { max-width: 62ch; }
html.fi-disleksi h1, html.fi-disleksi h2, html.fi-disleksi h3 { letter-spacing: 0; line-height: 1.35; }
/* italik disleksik okurda okumayı zorlaştırır */
html.fi-disleksi em, html.fi-disleksi i { font-style: normal; font-weight: 700; }

/* --- 42) odak modu --- */

html.fi-odak .fi-hero::before,
html.fi-odak .fi-hero::after,
html.fi-odak #secondary,
html.fi-odak .fi-son-bakilan,
html.fi-odak .fi-kitap-iliskili,
html.fi-odak .fi-paket-bolum,
html.fi-odak .fi-wa,
html.fi-odak .fi-mobil-cubuk,
html.fi-odak .fi-arsiv-duzen,
html.fi-odak .site-footer .elementor-widget-wp-widget-media_image,
html.fi-odak .fi-paylas { display: none !important; }

html.fi-odak .fi-sayfa-icerik,
html.fi-odak .fi-kitap-aciklama,
html.fi-odak .entry-content { max-width: 68ch; }
html.fi-odak p, html.fi-odak li { line-height: 1.8; }
html.fi-odak * { animation: none !important; transition: none !important; }
html.fi-odak .fi-hero { background: var(--fi-ana-koyu); }

/* ========================================================= ARAMA SONUÇLARI
   Ana temanın şablonu İngilizce başlık basıyor ve ürün adlarını h3 yapıyordu.
   ========================================================================= */

.fi-arama-ozet { margin: 0; font-size: 14.5px; color: var(--fi-ink-2); }
.fi-arama-ozet strong { color: var(--fi-ink); }

.fi-arama-liste { list-style: none; margin: 0; padding: 0; }
.fi-arama-oge {
  padding: 20px 0; border-bottom: 1px solid var(--fi-line-soft);
}
.fi-arama-oge:last-child { border-bottom: 0; }
.fi-arama-ad { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.018em; }
.fi-arama-ad a { color: var(--fi-ink); text-decoration: none; }
.fi-arama-ad a:hover { color: var(--fi-ana-koyu); text-decoration: underline; }
.fi-arama-tur {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-arama-alinti { margin: 0; color: var(--fi-ink-2); font-size: 15px; max-width: 70ch; }

.fi-arama-yeniden {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 20px 0 6px;
}
.fi-arama-yeniden input {
  flex: 1 1 260px; max-width: 380px;
  font-family: var(--fi-f); font-size: 15px;
  padding: 11px 14px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
}
.fi-arama-yeniden button { cursor: pointer; border: 0; }
.fi-arama-yol { margin: 18px 0 8px; font-size: 14px; color: var(--fi-ink-2); }
.fi-arama-sonuc .fi-bos .fi-oneri-sinif { justify-content: center; }

/* ========================================================= YANINDA İYİ GİDER
   Öneri 3. Satış verisi yok; eşleşme kataloğun kendi mantığından türüyor.
   ========================================================================= */

.fi-esles {
  margin: 22px 0 6px; padding: 16px 18px;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r);
  border-left: 3px solid var(--fi-ders-renk, var(--fi-ana-koyu));
}
.fi-esles-ust {
  margin: 0 0 5px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fi-ders-renk, var(--fi-ink-3));
  color: color-mix(in srgb, var(--fi-ders-renk) 75%, #000);   /* bkz. .fi-seri-adet */
}
.fi-esles-gerekce { margin: 0 0 12px; font-size: 14px; color: var(--fi-ink-2); max-width: 60ch; }

.fi-esles-kitap {
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; padding: 9px; margin: -9px;
  border-radius: var(--fi-r-s);
}
.fi-esles-kitap:hover { background: var(--fi-paper); }
.fi-esles-gorsel { flex: 0 0 46px; }
.fi-esles-gorsel img { width: 46px; height: auto; border-radius: 3px; display: block; }
.fi-esles-gorsel .fi-kapak { width: 46px; box-shadow: none; }
.fi-esles-ad { display: block; font-size: 15px; font-weight: 700; color: var(--fi-ink); line-height: 1.34; }
.fi-esles-tur { display: block; font-size: 12.5px; color: var(--fi-ink-3); margin-top: 2px; }

/* ================================================ TAHMİNİ ÇALIŞMA SÜRESİ
   Öneri 6. Kitabı bir plana çevirir.
   ========================================================================= */

.fi-sure {
  margin: 20px 0; padding: 15px 18px;
  border: 1px dashed var(--fi-line); border-radius: var(--fi-r);
}
.fi-sure-ust {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-sure-satir { margin: 0 0 8px; font-size: 14.5px; color: var(--fi-ink-2); }
.fi-sure-satir strong { color: var(--fi-ink); }
.fi-sure-satir label { margin-right: 8px; }
.fi-sure-secim {
  font-family: var(--fi-f); font-size: 14px;
  padding: 6px 9px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
}
.fi-sure-sonuc {
  margin: 6px 0 8px; font-size: 16px; color: var(--fi-ink);
  font-variant-numeric: tabular-nums;
}
.fi-sure-sonuc strong { color: var(--fi-ders-renk, var(--fi-ink)); }
.fi-sure-sonuc [data-fi-sure] { font-weight: 800; }
.fi-sure-not { margin: 0; font-size: 12.5px; color: var(--fi-ink-3); }

/* ================================================== LİSTEDE EKSİK PARÇA
   Öneri 4. Satış baskısı değil — yarım kalmış bir ders seçimini fark ettirmek.
   ========================================================================= */

.fi-eksik {
  margin: 24px 0 0; padding: 18px 20px;
  background: var(--fi-veri-s, #FBF1DE); border-radius: var(--fi-r);
  border: 1px solid #EDDCB8;
}
.fi-eksik-liste { list-style: none; margin: 0; padding: 0; }
.fi-eksik-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 9px 0; border-bottom: 1px solid rgba(133, 82, 9, .14);
}
.fi-eksik-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.fi-eksik-ders { font-weight: 800; color: #6B4207; font-size: 14.5px; }
.fi-eksik-var  { font-size: 13px; color: #855209; }
.fi-eksik-yok  { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-eksik-yok a {
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); color: #6B4207;
  border: 1px solid rgba(133, 82, 9, .28);
}
.fi-eksik-yok a:hover { background: #fff; border-color: #855209; }

@media print { .fi-eksik { display: none !important; } }

/* ==================================================== SEZONA GÖRE ŞERİT
   Öneri 47. Aynı ana sayfa yılın her ayında aynı şeyi söylemek zorunda değil.
   ========================================================================= */

.fi-sezon-serit { padding-top: 0; }
.fi-sezon-ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  padding: 26px 30px;
  background: var(--fi-mist);
  border: 1px solid var(--fi-line);
  border-left: 5px solid var(--fi-ana-koyu);
  border-radius: var(--fi-r);
}
.fi-sezon-ust {
  margin: 0 0 5px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fi-ana-koyu);
}
.fi-sezon-baslik {
  margin: 0 0 8px; font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 800; letter-spacing: -.026em; color: var(--fi-ink);
}
.fi-sezon-metin { margin: 0 0 14px; font-size: 15.5px; color: var(--fi-ink-2); max-width: 62ch; }
.fi-sezon-dugme { margin: 0; }
.fi-sezon-sayim { flex: 0 1 340px; min-width: 0; }
.fi-sezon-sayim .fi-geri-sayim { margin: 0; }

/* ============================================ ARŞİVDE YILLIK SET / KAYIT
   Öneri 9, 37.
   ========================================================================= */

.fi-paket-arsiv { padding: 0; margin: 0 0 28px; }
.fi-paket-arsiv .fi-bolum-bas { margin-bottom: 14px; }

.fi-kayit { margin: 0 0 18px; font-family: var(--fi-f); }
.fi-kayit-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fi-kayit-eylem[hidden] { display: none !important; }
.fi-kayit-ekle, .fi-kayit-kopyala, .fi-kayit-vazgec {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  background: var(--fi-paper); color: var(--fi-ink-2);
  border: 1px solid var(--fi-line);
}
.fi-kayit-ekle:hover, .fi-kayit-kopyala:hover, .fi-kayit-vazgec:hover {
  border-color: var(--fi-ana-koyu); color: var(--fi-ana-koyu);
}
.fi-kayit-durum { font-size: 13px; font-weight: 700; color: var(--fi-ana-koyu); }

.fi-kayit-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding: 12px 14px;
  background: var(--fi-mist); border: 1px solid var(--fi-line); border-radius: var(--fi-r-s);
}
.fi-kayit-form[hidden] { display: none !important; }
.fi-kayit-form label { flex: 1 1 100%; font-size: 12.5px; font-weight: 700; color: var(--fi-ink); }
.fi-kayit-form input {
  flex: 1 1 200px; font-family: inherit; font-size: 14.5px;
  padding: 8px 11px; border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s); background: var(--fi-paper); color: var(--fi-ink);
}
.fi-kayit-form button { cursor: pointer; }
.fi-kayit-form .fi-dugme, .fi-kayit-form button.fi-dugme { border: 0; padding: 9px 18px; font-size: 14px; }

.fi-kayit-liste { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fi-kayit-liste[hidden] { display: none !important; }
.fi-kayit-etiket {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-kayit-ogeler { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-kayit-oge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--fi-ana-soluk); border-radius: 999px; padding: 0 4px 0 13px;
}
.fi-kayit-oge a {
  font-size: 13px; font-weight: 700; color: var(--fi-ana-koyu);
  text-decoration: none; padding: 6px 0;
}
.fi-kayit-oge a:hover { text-decoration: underline; }
.fi-kayit-sil {
  width: 24px; height: 24px; padding: 0; cursor: pointer; line-height: 1;
  border: 0; border-radius: 50%; background: none; color: var(--fi-ana-koyu);
  font-size: 16px; opacity: .65;
}
.fi-kayit-sil:hover { opacity: 1; background: rgba(255, 255, 255, .7); }

@media print { .fi-kayit { display: none !important; } }

/* ================================================= ÇİZELGEDE HAFTALIK PLAN
   Öneri 12. Boş kutu yerine "bu hafta bu kitaptan şu kadar".
   ========================================================================= */

.fi-c-kitap {
  display: block; margin-top: 3px; font-size: 9px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--fi-ink-3);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fi-cizelge-tablo td.fi-c-kutu--plan { text-align: center; }
.fi-cizelge-tablo td.fi-c-kutu--plan span[aria-hidden] {
  width: 13px; height: 13px; vertical-align: middle; margin-right: 6px;
}
.fi-c-yuk {
  font-size: 12px; font-weight: 700; color: var(--fi-ink);
  font-variant-numeric: tabular-nums; vertical-align: middle;
}

.fi-kitaplik-eylem { display: flex; flex-wrap: wrap; gap: 8px; }

@media print {
  .fi-c-kitap { font-size: 7pt; }
  .fi-c-yuk { font-size: 8.5pt; }
  .fi-kitaplik-eylem { display: none !important; }
}

/* ================================================= KAREKOD KARŞILAMASI
   Öneri 14. Karekodu okutan kişi kitabı elinde tutuyor; genel tanıtım
   yerine kitabın kaynaklarına iniyor.
   ========================================================================= */

.fi-karsilama {
  font-family: var(--fi-f);
  margin: 0 0 30px; padding: 22px 24px;
  background: var(--fi-koyu-yuzey); color: #fff;
  border-radius: var(--fi-r);
}
.fi-karsilama-ust {
  margin: 0 0 5px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #E9A9A2;
}
.fi-karsilama-baslik {
  margin: 0 0 16px; font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800; letter-spacing: -.024em; color: #fff;
}
.fi-karsilama-baglantilar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
}
.fi-karsilama-kart {
  display: block; padding: 14px 16px; text-decoration: none;
  background: rgba(255, 255, 255, .09); border-radius: var(--fi-r-s);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background var(--fi-gecis), border-color var(--fi-gecis);
}
.fi-karsilama-kart:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255,255,255,.3); }
.fi-karsilama-ad { display: block; font-size: 15.5px; font-weight: 700; color: #fff; }
.fi-karsilama-alt { display: block; font-size: 12.5px; color: #DCC9C7; margin-top: 3px; }

@media print { .fi-karsilama { display: none !important; } }

/* ======================================================= KALDIĞIN YER
   Öneri 15. Yarım kalan işler tek yerde: işaretlenmiş haftalar, seçili
   kitaplar, kayıtlı süzgeçler. Tamamı tarayıcıdan okunuyor.
   ========================================================================= */

.fi-kaldigin[hidden] { display: none !important; }

.fi-kaldigin-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.fi-kaldigin-kart {
  display: block; padding: 16px 18px; text-decoration: none;
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  border-left: 3px solid var(--fi-ana-koyu); border-radius: var(--fi-r);
  transition: border-color var(--fi-gecis), transform var(--fi-gecis);
}
.fi-kaldigin-kart:hover { border-color: var(--fi-ana-koyu); transform: translateY(-2px); }
.fi-kaldigin-ust {
  display: block; font-size: 10px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fi-ana-koyu);
}
.fi-kaldigin-ad {
  display: block; margin-top: 5px; font-size: 15.5px; font-weight: 700;
  color: var(--fi-ink); line-height: 1.34;
}
.fi-kaldigin-alt { display: block; margin-top: 4px; font-size: 12.5px; color: var(--fi-ink-3); }
.fi-kaldigin-cubuk {
  display: block; height: 6px; margin-top: 11px; border-radius: 999px;
  background: var(--fi-mist-2); overflow: hidden;
}
.fi-kaldigin-cubuk span { display: block; height: 100%; background: var(--fi-ana-koyu); border-radius: 999px; }

@media print { .fi-kaldigin { display: none !important; } }

/* ============================================================ SUNUM MODU
   Öneri 22. Akıllı tahtaya yansıtılan hâl: kapak, ad ve üç sayı.
   ========================================================================= */

.fi-sunum {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 64px);
  background: var(--fi-paper); font-family: var(--fi-f);
  overflow: auto;
}
.fi-sunum[hidden] { display: none !important; }

.fi-sunum-kapat, button.fi-sunum-kapat {
  position: absolute; top: 20px; right: 24px;
  width: 52px; height: 52px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fi-line); border-radius: 50%;
  background: var(--fi-paper); color: var(--fi-ink); font-size: 30px; line-height: 1;
}
.fi-sunum-kapat:hover, button.fi-sunum-kapat:hover { border-color: var(--fi-ink); }

.fi-sunum-ic {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
  width: 100%; max-width: 1180px;
}
.fi-sunum-kapak img,
.fi-sunum-kapak .fi-kapak { width: 100%; height: auto; border-radius: 8px; }
.fi-sunum-kapak img { box-shadow: 0 30px 60px -30px rgba(16, 24, 33, .5); }

.fi-sunum-etiketler {
  margin: 0 0 14px; font-size: clamp(14px, 1.5vw, 19px); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fi-ders-renk, var(--fi-ana-koyu));
}
.fi-sunum-ad {
  margin: 0; font-size: clamp(30px, 4.6vw, 62px); font-weight: 800;
  letter-spacing: -.032em; line-height: 1.04; color: var(--fi-ink);
  text-wrap: balance;
}
.fi-sunum-seri {
  margin: 12px 0 0; font-size: clamp(16px, 1.9vw, 24px); color: var(--fi-ink-2);
}

.fi-sunum-sayilar {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 3.5vw, 54px);
  margin: clamp(22px, 3vw, 40px) 0 0;
}
.fi-sunum-sayilar div { min-width: 0; }
.fi-sunum-sayilar dt {
  font-size: clamp(30px, 4vw, 54px); font-weight: 800; letter-spacing: -.03em;
  color: var(--fi-ders-renk, var(--fi-ink)); font-variant-numeric: tabular-nums; line-height: 1;
}
.fi-sunum-sayilar dd {
  margin: 4px 0 0; font-size: clamp(12px, 1.2vw, 16px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fi-ink-3);
}

.fi-sunum-alt {
  display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
  margin-top: clamp(24px, 3.5vw, 46px);
  padding-top: 20px; border-top: 1px solid var(--fi-line);
}
/* Karekod kütüphanesi SVG'ye satır içi `width:100%` yazıyor; satır içi stil
   bizim kuralımızı ezer. Bu yüzden boyutu KAPSAYICIDAN veriyoruz. */
.fi-sunum-karekod { text-align: center; width: clamp(84px, 9vw, 124px); flex: 0 0 auto; }
.fi-sunum-karekod svg { height: auto; display: block; }
.fi-sunum-karekod span {
  display: block; margin-top: 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fi-ink-3);
}
.fi-sunum-kunye { margin: 0; font-size: clamp(13px, 1.3vw, 17px); color: var(--fi-ink-2); }
.fi-sunum-isbn { display: block; font-variant-numeric: tabular-nums; color: var(--fi-ink); font-weight: 700; }

.fi-sunum-ipucu {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 12.5px; color: var(--fi-ink-3);
}
.fi-sunum-ipucu kbd {
  font-family: inherit; font-size: 11.5px; padding: 2px 7px;
  border: 1px solid var(--fi-line); border-radius: 4px; background: var(--fi-mist);
}

@media (max-width: 860px) {
  .fi-sunum-ic { grid-template-columns: 1fr; gap: 26px; }
  .fi-sunum-kapak { max-width: 200px; }
}
@media print { .fi-sunum, .fi-sunum-ac { display: none !important; } }

/* ============================================================ KARANLIK MOD
   Öneri 40. Renkler zaten tek yerde değişken olarak tanımlıydı; koyu palet
   aynı değişkenleri yeniden tanımlıyor. Ana temanın (Bookory + Elementor)
   kendi sabit renkleri ayrıca eziliyor.
   ========================================================================= */

html.fi-koyu {
  --fi-ink:      #EFE9E8;
  --fi-ink-2:    #B5A9A6;
  --fi-ink-3:    #9A8D8A;   /* koyu zeminde AA — ölçüldü */
  --fi-paper:    #161110;
  --fi-mist:     #1F1817;
  --fi-mist-2:   #2A211F;
  --fi-line:     #372B29;
  --fi-line-soft:#2C2321;
  --fi-ana:       #F2685C;
  --fi-ana-koyu:  #F58A80;   /* koyu zeminde okunur ton — 7,65:1 */
  --fi-ana-soluk: #33150F;
  --fi-koyu-yuzey: #2A211F;   /* koyu modda zeminden ayrılacak kadar açık */
  --fi-ana-yuzey:  #B3291F;
  --fi-red:      #FFA79B;
  --fi-veri-s:   #2A2214;

  /* Ölçek koyu modda ters çevrilmiyor, yeniden kuruluyor: koyu zeminde
     "daha koyu = daha çok" okunmaz, yoğunluk arttıkça renk parlıyor. */
  --fi-yog-0: #242B33;
  --fi-yog-1: #2E4C6E;
  --fi-yog-2: #3F74AB;
  --fi-yog-3: #6FA9E2;
  --fi-yog-vurgu:  #8FBEEA;
  --fi-yog-secili: #A9CDF2;
  /* Kapak tablası koyu modda da açık kalıyor: kapaklar beyaz zeminli
     çekilmiş, koyu tablada çarpma karışımı onları yok ederdi. */
  --fi-kapak-zemin: #E6E1DF;

  color-scheme: dark;
}

html.fi-koyu body,
html.fi-koyu .site,
html.fi-koyu .site-content,
html.fi-koyu .col-full { background: var(--fi-paper); color: var(--fi-ink); }

/* --- ana temanın ve Elementor'un sabit renkleri --- */
html.fi-koyu .site-header,
html.fi-koyu .site-footer,
html.fi-koyu .elementor-section,
html.fi-koyu .elementor-widget-wrap,
html.fi-koyu .site-search-popup { background-color: transparent !important; }

html.fi-koyu .site-header,
html.fi-koyu .site-footer { background: var(--fi-mist) !important; }

html.fi-koyu .site-header a,
html.fi-koyu .site-footer a,
html.fi-koyu .site-header .elementor-heading-title,
html.fi-koyu .site-footer .elementor-heading-title,
html.fi-koyu .elementor-widget-text-editor,
html.fi-koyu .elementor-widget-heading .elementor-heading-title { color: var(--fi-ink) !important; }

html.fi-koyu .site-footer p,
html.fi-koyu .site-footer li { color: var(--fi-ink-2) !important; }

/* İÇERİKTEKİ Elementor bileşenleri. Metinleri Elementor kitinden saf siyah
   geliyor; koyu zeminde siyah üstüne siyah kalıyordu (1,12:1). Kural
   yalnızca koyu modda ve yalnızca içerik alanında geçerli. */
html.fi-koyu main .elementor-widget-container,
html.fi-koyu main .elementor-widget-container p,
html.fi-koyu main .elementor-widget-container li,
html.fi-koyu main .elementor-widget-container td,
html.fi-koyu main .elementor-widget-container h1,
html.fi-koyu main .elementor-widget-container h2,
html.fi-koyu main .elementor-widget-container h3,
html.fi-koyu main .elementor-widget-container h4 { color: var(--fi-ink) !important; }

html.fi-koyu main .elementor-widget-container a { color: var(--fi-ana-koyu) !important; }
html.fi-koyu main .elementor-widget-container a:hover { color: var(--fi-ink) !important; }

/* logo ve harita gibi beyaz zeminli görseller koyu ekranda parlamasın */
html.fi-koyu .site-footer img,
html.fi-koyu .site-header img { filter: brightness(.94); }

/* --- kendi bileşenlerimizden zemine sabitlenmiş olanlar --- */
html.fi-koyu .fi-listem-ekle, html.fi-koyu button.fi-listem-ekle { background: rgba(24, 33, 27, .94); }
html.fi-koyu .fi-kapak-sirt { opacity: .5; }
html.fi-koyu .fi-lightbox { background: rgba(0, 0, 0, .9); }

/* Zaten koyu zemine kurulmuş bileşenler koyu modda ters düşmesin:
   çok koyu zemin üstünde biraz açılıyorlar. */
html.fi-koyu .fi-hero {
  background: linear-gradient(118deg, #5C110D 0%, #8F1C16 46%, #A0201A 100%);
}

/* --- yönetim çubuğu ve formlar --- */
html.fi-koyu input, html.fi-koyu textarea, html.fi-koyu select {
  background: var(--fi-mist); color: var(--fi-ink); border-color: var(--fi-line);
}
html.fi-koyu input::placeholder, html.fi-koyu textarea::placeholder { color: var(--fi-ink-3); }

/* --- görünüm seçici --- */
.fi-okuma-temalar { display: flex; gap: 7px; }
.fi-okuma-tema, button.fi-okuma-tema {
  flex: 1; min-height: 40px; padding: 0 6px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--fi-line); border-radius: var(--fi-r-s);
  background: var(--fi-paper); color: var(--fi-ink);
}
.fi-okuma-tema:hover, button.fi-okuma-tema:hover { border-color: var(--fi-ana-koyu); }
.fi-okuma-tema.secili, button.fi-okuma-tema.secili { background: var(--fi-ana-yuzey); border-color: var(--fi-ana-yuzey); color: #fff; }
html.fi-koyu .fi-okuma-tema.secili, html.fi-koyu button.fi-okuma-tema.secili { color: #0B1410; }

/* Yazdırırken her zaman açık zemin — koyu sayfa yazıcıda kâbus olur. */
@media print {
  html.fi-koyu { --fi-paper: #fff; --fi-ink: #000; --fi-ink-2: #333; --fi-ink-3: #555;
                 --fi-mist: #fff; --fi-mist-2: #f4f4f4; --fi-line: #999; --fi-line-soft: #ccc; }
  html.fi-koyu body { background: #fff !important; color: #000 !important; }
}

/* --- koyu modda ders/seri renkleri ---------------------------------------
   Ders ve seri renkleri açık zemin için seçilmişti (WCAG AA, beyaz üzerinde).
   Koyu zeminde aynı tonlar 4,5:1'in altına düşüyor. Metin olarak kullanılan
   her yerde beyaza doğru karıştırıyoruz; rozet gibi ZEMİN olarak kullanılan
   yerlere dokunmuyoruz — oralarda kontrast zaten beyaz yazıdan geliyor. */

html.fi-koyu .fi-ders-adet,
html.fi-koyu .fi-seri-adet,
html.fi-koyu .fi-seri-kart:hover .fi-seri-git,
html.fi-koyu .fi-takvim-no,
html.fi-koyu .fi-takip-sayi strong,
html.fi-koyu .fi-sure-sonuc strong,
html.fi-koyu .fi-esles-ust,
html.fi-koyu .fi-sunum-etiketler,
html.fi-koyu .fi-sunum-sayilar dt {
  color: color-mix(in srgb, var(--fi-ders-renk, var(--fi-seri-renk, var(--fi-ana-koyu))) 62%, #FFFFFF);
}
html.fi-koyu .fi-paket-ust,
html.fi-koyu .fi-paket-rol {
  color: color-mix(in srgb, var(--fi-paket-renk, var(--fi-ana-koyu)) 62%, #FFFFFF);
}
html.fi-koyu .fi-kapak-ders { color: #fff; }

/* Kart bağlantılarının devraldığı siyah metin rengi koyu zeminde
   görünmez olurdu; çocuk ögelerin hepsi kendi rengini veriyor ama
   ileride eklenecek düz metin için güvenceyi şimdi koyuyoruz. */
html.fi-koyu .fi-seri-kart,
html.fi-koyu .fi-kapi,
html.fi-koyu .fi-kitap,
html.fi-koyu .fi-satir,
html.fi-koyu .fi-kaldigin-kart { color: var(--fi-ink); }

/* ===================================================== ÖNE ÇIKAN SERİ
   Bütün seri kartları aynı görünüyordu; en kapsamlı seri öne çıkmıyordu.
   Zemin marka kırmızısı değil koyu mürekkep: serinin kendi rengi vurgu
   olarak kalsın, marka rengiyle yarışmasın.
   ========================================================================= */

.fi-seri-one {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 46px);
  margin-bottom: 20px;
  border-radius: var(--fi-r);
  background:
    radial-gradient(620px 320px at 88% 12%,
      color-mix(in srgb, var(--fi-seri-renk) 42%, transparent) 0%, transparent 62%),
    var(--fi-koyu-yuzey);
  color: #fff;
  text-decoration: none !important;
  overflow: hidden;
  transition: transform var(--fi-gecis);
}
.fi-seri-one:hover { transform: translateY(-3px); }

.fi-seri-one-ust {
  margin: 0 0 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fi-seri-renk) 55%, #fff);
}
.fi-seri-one-ad {
  margin: 0; font-size: clamp(32px, 4.6vw, 56px); font-weight: 800;
  letter-spacing: -.034em; line-height: 1; color: #fff;
}
.fi-seri-one-adet {
  margin: 12px 0 0; font-size: 16px; color: rgba(255, 255, 255, .82);
}
.fi-seri-one-adet strong { font-size: 21px; font-weight: 800; color: #fff; }
.fi-seri-one-alt {
  margin: 14px 0 0; font-size: 16px; line-height: 1.6;
  color: rgba(255, 255, 255, .74); max-width: 46ch;
}

.fi-seri-one-turler { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.fi-seri-one-turler span {
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
}

.fi-seri-one-git {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding-bottom: 3px;
  font-size: 15px; font-weight: 700; color: #fff;
  border-bottom: 2px solid color-mix(in srgb, var(--fi-seri-renk) 60%, #fff);
}
.fi-seri-one:hover .fi-seri-one-git { border-bottom-color: #fff; }

/* --- kapaklar: hafif yelpaze --- */
.fi-seri-one-kapaklar {
  display: flex; justify-content: center; align-items: flex-end;
  min-width: 0;
}
.fi-seri-one-kapaklar span { display: block; flex: 0 0 auto; }
.fi-seri-one-kapaklar span:nth-child(1) { transform: rotate(-7deg) translateX(14%); z-index: 1; }
.fi-seri-one-kapaklar span:nth-child(2) { transform: translateY(-12px); z-index: 3; }
.fi-seri-one-kapaklar span:nth-child(3) { transform: rotate(7deg) translateX(-14%); z-index: 2; }
.fi-seri-one-kapaklar img {
  display: block; width: clamp(96px, 12vw, 156px); height: auto;
  border-radius: 6px;
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .75);
}

@media (max-width: 780px) {
  .fi-seri-one { grid-template-columns: 1fr; }
  .fi-seri-one-kapaklar { order: -1; margin-bottom: 6px; }
  .fi-seri-one-kapaklar img { width: clamp(84px, 26vw, 120px); }
}

/* ============================================================ SAYFALAMA
   Ana temanın sayfalama bağlantıları kendi renklerini taşıyordu: açık modda
   soluk, koyu modda neredeyse görünmez (1,12:1). Kendi belirteçlerimize
   bağlıyoruz ki iki modda da okunur olsun.
   ========================================================================= */

.woocommerce-pagination .page-numbers,
.navigation .page-numbers {
  font-family: var(--fi-f); font-weight: 700; font-size: 14.5px;
  color: var(--fi-ink) !important;
  background: var(--fi-paper);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-r-s);
  min-width: 42px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none !important;
}
.woocommerce-pagination .page-numbers:hover,
.navigation .page-numbers:hover {
  border-color: var(--fi-ana-koyu); color: var(--fi-ana-koyu) !important;
}
/* Ana tema bu ögeye kendi vurgu rengini (açık mercan) beyaz yazıyla
   veriyor — 3,18:1. Kendi belirtecimizi geçirebilmek için !important. */
.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers.current,
.navigation .page-numbers.current {
  background: var(--fi-koyu-yuzey) !important;
  border-color: var(--fi-koyu-yuzey) !important;
  color: #fff !important;
}
.woocommerce-pagination ul.page-numbers,
.navigation .nav-links { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }


/* Eksik parça kutusu sabit kehribar renklerle yazılmıştı; koyu modda zemin
   koyuya döndü ama yazı koyu kahverengi kaldı (1,8:1). */
html.fi-koyu .fi-eksik { background: #2A2214; border-color: #4A3A1C; }
html.fi-koyu .fi-eksik-ders { color: #EBD3A0; }
html.fi-koyu .fi-eksik-var  { color: #D8BE86; }
html.fi-koyu .fi-eksik-liste li { border-bottom-color: rgba(235, 211, 160, .16); }
html.fi-koyu .fi-eksik-yok a {
  background: rgba(0, 0, 0, .25); color: #EBD3A0; border-color: rgba(235, 211, 160, .32);
}
html.fi-koyu .fi-eksik-yok a:hover { background: rgba(0, 0, 0, .4); border-color: #EBD3A0; }

/* ================================================ KAHRAMANDA ÖNE ÇIKAN SERİ
   Başlık artık seriyi söylüyor. Yayınevi sloganı silinmedi — üst satıra,
   tarihin yanına indi; site başlığında da geçtiği için yerinde durmalı.
   ========================================================================= */

.fi-hero-slogan {
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .68);
  letter-spacing: .1em;
}

.fi-hero-baslik--seri { display: flex; flex-direction: column; gap: 6px; }

.fi-hero-seri-ustu {
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.fi-hero-seri-adi {
  display: block;
  font-size: clamp(52px, 8.5vw, 104px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .92;
}

.fi-hero-alt strong { color: #fff; font-weight: 800; }

@media (max-width: 560px) {
  .fi-hero-slogan { display: block; margin: 6px 0 0; padding: 0; border: 0; }
}


/* ===================================================== konu sayfaları ==== */

.fi-konu-sayfa { padding: 40px 0 64px; }
.fi-konu-grup  { margin-top: 40px; }
.fi-konu-bolum { margin-top: 44px; }
.fi-bolum-alt  { color: var(--fi-ink-2); max-width: 62ch; margin: -4px 0 18px; }

.fi-konu-izgara {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.fi-konu-kart {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: var(--fi-r);
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  text-decoration: none; color: var(--fi-ink);
  transition: border-color 140ms ease, transform 140ms ease;
}
.fi-konu-kart:hover { border-color: var(--fi-ana); transform: translateY(-2px); }
.fi-konu-ders { font-weight: 700; font-size: 16px; }
.fi-konu-sayi { font-size: 13px; color: var(--fi-ink-3); font-variant-numeric: tabular-nums; }

.fi-kazanim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fi-kazanim-liste a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--fi-mist); border: 1px solid var(--fi-line-soft);
  text-decoration: none; color: var(--fi-ink);
}
.fi-kazanim-liste a:hover { border-color: var(--fi-ana); }
.fi-kazanim-kod {
  font-size: 12px; font-weight: 700; color: var(--fi-ana-koyu);
  background: var(--fi-ana-soluk); padding: 2px 7px; border-radius: 6px;
  white-space: nowrap;
}

.fi-konu-calis p { max-width: 62ch; color: var(--fi-ink-2); }
.fi-konu-baglar {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  margin: 0 0 10px; font-size: 14px;
}
.fi-konu-baglar > span { color: var(--fi-ink-3); font-weight: 600; }
.fi-konu-baglar a {
  padding: 4px 12px; border-radius: 999px;
  background: var(--fi-mist); border: 1px solid var(--fi-line-soft);
  text-decoration: none; color: var(--fi-ink); font-weight: 600;
}
.fi-konu-baglar a:hover { border-color: var(--fi-ana); color: var(--fi-ana-koyu); }


/* ===================================================== örnek sayfalar ==== */

.fi-ornek { margin: 44px 0; }
.fi-ornek-izgara {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.fi-ornek-ac, button.fi-ornek-ac {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  border-radius: var(--fi-r); overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease;
}
.fi-ornek-ac:hover, button.fi-ornek-ac:hover { border-color: var(--fi-ana); transform: translateY(-2px); }
/* PDF örneği ayrı sekmede açılıyor: büyüteç imleci yanıltıcı olurdu. */
a.fi-ornek-ac--pdf { cursor: pointer; text-decoration: none; color: inherit; }
.fi-ornek-ac img, button.fi-ornek-ac img { display: block; width: 100%; height: auto; }

/* Katman koyu zeminde duruyor; bu yüzden içindeki renkler temayla dönmüyor. */
.fi-ornek-katman {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 48px 16px;
  background: rgba(16, 24, 33, .92);
}
.fi-ornek-katman[hidden] { display: none !important; }
.fi-ornek-buyuk, .fi-ornek-pdf {
  max-width: min(92vw, 900px); max-height: 82vh;
  width: auto; height: auto; border-radius: 8px; background: #fff;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
/* PDF çerçevesinin kendi boyutu yok; görüntüleyiciye yer açıyoruz. */
.fi-ornek-pdf { width: min(92vw, 900px); height: 82vh; border: 0; }
.fi-ornek-buyuk[hidden], .fi-ornek-pdf[hidden], .fi-ornek-indir[hidden] { display: none !important; }

.fi-ornek-indir {
  position: absolute; bottom: 14px; right: 16px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32);
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 700;
}
.fi-ornek-indir:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* PDF kartı: küçük görseli üretilememişse yerine yazı. */
.fi-ornek-ac, button.fi-ornek-ac { position: relative; }
.fi-ornek-yer {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; font-size: 18px; font-weight: 800; letter-spacing: .06em;
  color: var(--fi-ink-3); background: var(--fi-mist-2);
}
.fi-ornek-rozet {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 9px; border-radius: 6px;
  background: var(--fi-koyu-yuzey); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
}
.fi-ornek-kapat, button.fi-ornek-kapat, .fi-ornek-yon, button.fi-ornek-yon {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: 24px; line-height: 1;
}
.fi-ornek-kapat:hover, button.fi-ornek-kapat:hover, .fi-ornek-yon:hover, button.fi-ornek-yon:hover { background: rgba(255, 255, 255, .24); }
.fi-ornek-kapat, button.fi-ornek-kapat { position: absolute; top: 16px; right: 16px; }
.fi-ornek-sayac {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 0;
}
body.fi-ornek-acik { overflow: hidden; }

@media (max-width: 600px) {
  .fi-ornek-katman { padding: 56px 8px; gap: 6px; }
  .fi-ornek-kapat, button.fi-ornek-kapat, .fi-ornek-yon, button.fi-ornek-yon { width: 38px; height: 38px; font-size: 20px; }
}


/* ============================================ kurumsal deneme takvimi ==== */

.fi-kurumsal { margin: 32px 0; }
.fi-takvim-ay { margin-top: 32px; }
.fi-takvim-ay-ad {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fi-ana-koyu); margin: 0 0 12px;
}
.fi-takvim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.fi-oturum {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: 64px 1fr auto;
  padding: 18px 20px; border-radius: var(--fi-r);
  background: var(--fi-paper); border: 1px solid var(--fi-line);
}
.fi-oturum--kapali { opacity: .68; }

.fi-oturum-tarih {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 0; border-radius: 10px;
  background: var(--fi-ana-soluk); color: var(--fi-ana-koyu);
}
.fi-oturum-gun { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fi-oturum-ay  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.fi-oturum-ad   { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.fi-oturum-bilgi{ margin: 0; font-size: 13.5px; color: var(--fi-ink-3); }
.fi-oturum-aciklama { margin-top: 8px; font-size: 14px; color: var(--fi-ink-2); }
.fi-oturum-aciklama p { margin: 0 0 6px; }
.fi-oturum-son  { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--fi-ana-koyu); }

.fi-oturum-rozet {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--fi-mist-2); color: var(--fi-ink-3);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

.fi-kurumsal-form { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--fi-line); }
.fi-form-izgara {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fi-form-izgara p { margin: 0; }
.fi-form-genis { grid-column: 1 / -1; }
.fi-form-izgara label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; }
.fi-form-izgara input, .fi-form-izgara select, .fi-form-izgara textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--fi-line); background: var(--fi-paper); color: var(--fi-ink);
  font-family: inherit; font-size: 15px;
}
.fi-form-izgara input:focus, .fi-form-izgara select:focus, .fi-form-izgara textarea:focus {
  outline: 2px solid var(--fi-ana); outline-offset: 1px; border-color: var(--fi-ana);
}

.fi-kurumsal-onay {
  padding: 18px 22px; border-radius: var(--fi-r); margin-bottom: 28px;
  background: var(--fi-ana-soluk); border: 1px solid var(--fi-ana);
}
.fi-kurumsal-onay-baslik { margin: 0 0 6px; font-weight: 800; color: var(--fi-ana-koyu); }
.fi-kurumsal-onay p { margin: 0; }

@media (max-width: 640px) {
  .fi-oturum { grid-template-columns: 56px 1fr; }
  .fi-oturum-eylem { grid-column: 1 / -1; }
}


/* ===================================================== rıza şeridi ======= */

/* İki şeyin üstünde durmalı: temanın mobil alt çubuğu (--fi-alt-cubuk, ölçümü
   fi-okuma yapıyor) ve ekranın altındaki yüzen düğme sırası (sol "Aa Okuma",
   sağ WhatsApp). Dar ekranda şerit tam genişlik olduğu için o sıranın üstüne
   çıkmazsa düğmeleri kapatıyor. */
.fi-riza {
  position: fixed; z-index: 9994;
  left: 16px; right: 16px;
  bottom: calc(16px + var(--fi-alt-cubuk, 0px) + 58px);
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--fi-r);
  background: var(--fi-koyu-yuzey); color: #fff;
  box-shadow: 0 18px 44px -20px rgba(16, 24, 33, .8);
}
.fi-riza[hidden] { display: none !important; }
.fi-riza-metin { margin: 0; flex: 1 1 300px; font-size: 14px; line-height: 1.5; }
.fi-riza-metin a { color: #fff; text-decoration: underline; }
.fi-riza-dugmeler { display: flex; gap: 10px; flex: none; }
.fi-riza .fi-dugme--cizgi { border-color: rgba(255, 255, 255, .5); color: #fff !important; background: transparent; }
.fi-riza .fi-dugme--cizgi:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

@media (max-width: 560px) {
  .fi-riza { left: 10px; right: 10px; padding: 14px 16px; }
  .fi-riza-dugmeler { width: 100%; }
  .fi-riza-dugmeler .fi-dugme, .fi-riza-dugmeler button.fi-dugme { flex: 1; text-align: center; }
}


/* ===================================================== sınıf bandı ======= */

.fi-sinif-izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 20px;
}

/* Dört ayrı renk uydurmak yerine marka kırmızısı sınıfla birlikte
   koyulaşıyor: sıra duygusu veriyor, palet bozulmuyor. */
.fi-sinif-banner {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: var(--fi-r);
  text-decoration: none; color: #fff;
  background: linear-gradient(120deg, var(--fi-sinif-a) 0%, var(--fi-sinif-b) 100%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.fi-sinif-banner:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(16, 24, 33, .7); }
.fi-sinif-banner:focus-visible { outline: 3px solid var(--fi-ink); outline-offset: 2px; }

/* Sırası gelen sınıf: rafı açık olan banner. Renk tonlarına dokunmadan,
   yalnızca yükseklik ve ince bir çerçeveyle ayrılıyor — dört kırmızının
   arasına beşinci bir renk sokmak bandı dağıtıyordu. */
.fi-sinif-banner--acik {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(16, 24, 33, .7);
}
.fi-sinif-banner--acik::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: inherit; pointer-events: none;
}

/* Sınıfın rafı */
.fi-sinif-raf { margin-top: 26px; }
.fi-sinif-raf[hidden] { display: none !important; }
.fi-sinif-raf-bas {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px 18px; margin-bottom: 14px;
}
.fi-sinif-raf-baslik {
  margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  color: var(--fi-ink);
}
.fi-sinif-raf-tum {
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--fi-ana-koyu);
}
.fi-sinif-raf-tum:hover { text-decoration: underline; }

/* Raf değişimi göze çarpmadan olsun; hareketi azalt diyene hiç olmasın. */
.fi-sinif-raf--acik { animation: fi-raf-gir 260ms ease both; }
@keyframes fi-raf-gir {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fi-sinif-raf--acik { animation: none; }
  .fi-sinif-banner { transition: none; }
}

.fi-sinif-banner--0 { --fi-sinif-a: #E24B3C; --fi-sinif-b: #C0271C; }
.fi-sinif-banner--1 { --fi-sinif-a: #D33A2C; --fi-sinif-b: #A6221A; }
.fi-sinif-banner--2 { --fi-sinif-a: #BC2E23; --fi-sinif-b: #8A1F14; }
.fi-sinif-banner--3 { --fi-sinif-a: #9E2419; --fi-sinif-b: #6E170F; }

.fi-sinif-no {
  font-size: 42px; font-weight: 800; line-height: 1;
  opacity: .32; font-variant-numeric: tabular-nums;
}
.fi-sinif-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fi-sinif-ad    { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.fi-sinif-adet  { font-size: 13px; font-weight: 700; opacity: .85; }
.fi-sinif-dersler {
  font-size: 12px; opacity: .78; line-height: 1.35; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fi-sinif-git { font-size: 20px; opacity: .7; flex: none; }
.fi-sinif-banner:hover .fi-sinif-git { opacity: 1; }

/* Koyu modda zemin zaten koyu; bantlar bir tık açılıyor ki kaybolmasın. */
html.fi-koyu .fi-sinif-banner--0 { --fi-sinif-a: #F2685C; --fi-sinif-b: #C0392C; }
html.fi-koyu .fi-sinif-banner--1 { --fi-sinif-a: #E2564A; --fi-sinif-b: #A62E23; }
html.fi-koyu .fi-sinif-banner--2 { --fi-sinif-a: #CC4539; --fi-sinif-b: #8A241A; }
html.fi-koyu .fi-sinif-banner--3 { --fi-sinif-a: #B03A2E; --fi-sinif-b: #6E1C13; }


/* ===================================================== bize ulaşın ======= */

.fi-ulas-izgara {
  display: grid; gap: 14px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.fi-ulas-kart {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; border-radius: var(--fi-r);
  background: var(--fi-paper); border: 1px solid var(--fi-line);
  text-decoration: none; color: var(--fi-ink);
  transition: border-color 140ms ease, transform 140ms ease;
}
.fi-ulas-kart:hover { border-color: var(--fi-ana); transform: translateY(-2px); }
.fi-ulas-etiket {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fi-ana-koyu);
}
.fi-ulas-deger { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.fi-ulas-not   { font-size: 13px; color: var(--fi-ink-3); }

.fi-sosyal {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 22px;
}
.fi-sosyal-baglanti {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: var(--fi-mist); border: 1px solid var(--fi-line);
  text-decoration: none; color: var(--fi-ink);
  font-size: 14px; font-weight: 700;
  transition: border-color 140ms ease, background 140ms ease;
}
.fi-sosyal-baglanti:hover { border-color: var(--fi-ana); background: var(--fi-ana-soluk); color: var(--fi-ana-koyu); }
.fi-sosyal-baglanti svg { flex: none; }


/* --- ağır PDF paneli: çerçeveye gömmek yerine yeni sekmeye yönlendirme --- */
.fi-ornek-agir {
  max-width: min(92vw, 460px);
  padding: 30px 32px; border-radius: var(--fi-r);
  background: var(--fi-paper); color: var(--fi-ink);
  text-align: center;
}
.fi-ornek-agir[hidden] { display: none !important; }
.fi-ornek-agir-baslik { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.fi-ornek-agir-not    { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--fi-ink-2); }
.fi-ornek-agir-boyut  { font-weight: 700; color: var(--fi-ana-koyu); white-space: nowrap; }

.fi-ornek-agir-yeni {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--fi-ink-3);
  text-decoration: underline;
}
.fi-ornek-agir-yeni:hover { color: var(--fi-ana-koyu); }

/* Kısa kodla gömülen kaynak (dFlip önizlemesi gibi) — bağlantı değil, kutu. */
.fi-kaynak--gomulu { display: block; cursor: default; }
.fi-kaynak--gomulu .fi-kaynak-gomulu-ic { margin-top: 8px; }
.fi-kaynak--gomulu .fi-kaynak-gomulu-ic .df-button,
.fi-kaynak--gomulu .fi-kaynak-gomulu-ic a { max-width: 100%; }