/* =========================================================================
   İMO Ankara Şubesi — 2027 Ajanda · Sayfa çevirme görünümü (ajanda.html)
   Ana sayfadan (style.css) bağımsızdır; yalnız tokens.css değişkenlerini kullanır.
   Koyu sahne + açık kitap; sayfa içi ölçüler --pw (sayfa genişliği, px) ile ölçeklenir.
   ========================================================================= */

:root {
  --sahne-zemin: #0B1626;
  --sahne-yuzey: #13223A;
  --sahne-yuzey-2: #1B2D4A;
  --sahne-kenar: rgba(173, 204, 238, 0.16);
  --sahne-metin: #FFFFFF;
  --sahne-metin-2: var(--mavi-200);
  --sahne-metin-3: var(--mavi-300);
  --sahne-vurgu: var(--camgobegi-400);
  --ust-y: 60px;
  --alt-y: 104px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--sahne-zemin); color: var(--sahne-metin);
  font-family: var(--font-govde); font-size: var(--fs-base); line-height: var(--lh-govde);
  overflow: hidden; -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--font-baslik); margin: 0; }
p, ol, ul { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--sahne-vurgu); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.simge-kumesi { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--odak-golge-koyu); border-radius: var(--r-xs); }

.kitap-sayfa { display: grid; grid-template-rows: var(--ust-y) auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100%; height: 100dvh; }
/* Satırlar açıkça atanır: şerit gizlenince (display:none) diğerleri bir üst satıra kaymasın */
.kitap-sayfa > .ust { grid-row: 1; }
.kitap-sayfa > .neden-serit { grid-row: 2; }
.kitap-sayfa > .govde { grid-row: 3; }
.kitap-sayfa > .alt { grid-row: 4; }

/* "Neden bu ajanda" şeridi (K1): üst çubuğun altında tek satır */
.neden-serit {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--b-4); padding: 6px var(--b-4);
  background: linear-gradient(90deg, rgba(0, 77, 157, .35), rgba(46, 196, 208, .18), rgba(0, 77, 157, .35));
  border-bottom: 1px solid var(--sahne-kenar); font-size: var(--fs-xs); font-weight: var(--fw-yari); color: var(--sahne-metin); line-height: 1.4; text-align: center;
}
.neden-serit span + span::before { content: "·"; margin-right: var(--b-4); color: var(--sahne-vurgu); }

/* ---------- Üst çubuk ---------- */
.ust {
  display: flex; align-items: center; gap: var(--b-4);
  padding: 0 max(var(--b-4), env(safe-area-inset-right)) 0 max(var(--b-4), env(safe-area-inset-left));
  background: var(--sahne-yuzey); border-bottom: 1px solid var(--sahne-kenar);
}
.ust__marka { display: flex; align-items: center; gap: var(--b-2); min-width: 0; color: var(--sahne-metin); text-decoration: none; }
.ust__marka img { width: 36px; height: 36px; flex-shrink: 0; }
.ust__marka-metin { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ust__marka-metin b { font-family: var(--font-baslik); font-size: var(--fs-sm); white-space: nowrap; }
.ust__marka-metin small { font-size: var(--fs-xs); color: var(--sahne-metin-3); white-space: nowrap; }
.ust__orta { flex: 1; min-width: 0; text-align: center; }
.ust__baslik { font-size: var(--fs-base); font-weight: var(--fw-kalin); line-height: 1.2; }
.ust__alt { font-size: var(--fs-xs); color: var(--sahne-metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust__sag { display: flex; align-items: center; gap: var(--b-2); flex-shrink: 0; }
.mod-rozet { padding: 2px 8px; border-radius: var(--r-tam); border: 1px solid var(--sahne-kenar); color: var(--sahne-metin-2); font-size: var(--fs-xs); font-weight: var(--fw-yari); white-space: nowrap; }
.ust-dugme {
  display: inline-flex; align-items: center; gap: var(--b-2); min-height: 40px; padding: 0 var(--b-3);
  border: 1px solid var(--sahne-kenar); border-radius: var(--r-tam); background: var(--sahne-yuzey-2);
  color: var(--sahne-metin); font-size: var(--fs-sm); font-weight: var(--fw-yari); text-decoration: none; white-space: nowrap;
}
.ust-dugme:hover { border-color: var(--sahne-vurgu); }
.ust-dugme--sepet.dolu { border-color: var(--sahne-vurgu); }
.sepet-sayi { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-tam); background: var(--sahne-vurgu); color: var(--lacivert-900); font-size: var(--fs-xs); font-weight: var(--fw-kalin); font-variant-numeric: tabular-nums; }
.sepet-metin { font-variant-numeric: tabular-nums; }

/* ---------- Gövde: içindekiler + sahne ---------- */
.govde { display: flex; min-height: 0; }
.ust-dugme--ic { display: none; padding: 0 10px; }
.icindekiler {
  flex: 0 0 280px; display: flex; flex-direction: column; min-height: 0;
  background: var(--sahne-yuzey); border-right: 1px solid var(--sahne-kenar);
}
.icindekiler__ust { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 var(--b-5); border-bottom: 1px solid var(--sahne-kenar); }
.icindekiler__ust h2 { font-size: var(--fs-xs); font-weight: var(--fw-kalin); letter-spacing: var(--ls-genis); text-transform: uppercase; color: var(--sahne-metin-3); }
.icindekiler .icindekiler__kapat { display: none; top: 50%; transform: translateY(-50%); color: var(--sahne-metin-2); }
.icindekiler nav { flex: 1; overflow-y: auto; padding: var(--b-2) 0 var(--b-4); }
.ic-liste, .ic-alt { list-style: none; margin: 0; padding: 0; }
.ic-oge {
  position: relative; display: flex; align-items: center; gap: var(--b-2); width: 100%; min-height: 44px;
  padding: var(--b-2) var(--b-4) var(--b-2) var(--b-5); border: 0; background: none; text-align: left;
  color: var(--sahne-metin-2); font-size: var(--fs-sm); line-height: 1.3;
}
.ic-oge:hover { background: var(--sahne-yuzey-2); color: var(--sahne-metin); }
.ic-oge__ad { flex: 1; min-width: 0; }
.ic-oge__alt { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--sahne-metin-3); font-weight: var(--fw-normal); }
.ic-oge__no { flex-shrink: 0; min-width: 28px; font-size: var(--fs-xs); color: var(--sahne-metin-3); font-variant-numeric: tabular-nums; text-align: right; }
.ic-oge__ok { flex-shrink: 0; width: 16px; height: 16px; transition: transform var(--sure-hizli); }
.ic-oge[aria-expanded="true"] .ic-oge__ok { transform: rotate(180deg); }
.ic-nokta { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sahne-kenar); }
.ic-nokta[data-durum="musait"] { background: #2EB872; }
.ic-nokta[data-durum="opsiyonlu"] { background: #E3A21A; }
.ic-nokta[data-durum="satildi"] { background: #E2574C; }
.ic-nokta[data-durum="yakinda"] { background: transparent; border: 1.5px dashed var(--mavi-300); }
.ic-nokta[data-secili="true"] { background: var(--sahne-vurgu); box-shadow: 0 0 0 3px rgba(46, 196, 208, .25); }
/* bulunulan bölüm: kalın ve vurgu renginde, solda çizgi */
.ic-oge[aria-current="true"] { color: var(--sahne-vurgu); font-weight: var(--fw-kalin); background: rgba(46, 196, 208, .08); }
.ic-oge[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sahne-vurgu); }
.ic-alt { padding: 2px 0 var(--b-2); }
.ic-alt .ic-oge { min-height: 36px; padding-left: calc(var(--b-5) + var(--b-5)); font-size: var(--fs-xs); }
.ic-ortu { position: fixed; inset: 0; z-index: 74; background: rgba(5, 10, 20, .55); }

/* ---------- Sahne ---------- */
.sahne {
  flex: 1; min-width: 0;
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #1A2B45 0%, var(--sahne-zemin) 70%);
}
.pencere { position: relative; overflow: visible; }
.pencere.tek { overflow: hidden; border-radius: 4px; }
.kaydirici { position: relative; transition: transform 700ms cubic-bezier(.3, .1, .2, 1); }
.kitap { position: relative; perspective: 2600px; }
.kitap::before { /* kitap altı gölgesi */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); filter: blur(14px); z-index: 0;
}
.yaprak {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.3, .1, .2, 1);
}
.yaprak.cevrildi { transform: rotateY(-180deg); }
.yuz {
  position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #FFFFFF; color: var(--gri-900);
}
.yuz--arka { transform: rotateY(180deg); }
/* cilt tarafı gölgeleri */
.yuz--on::after, .yuz--arka::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; z-index: 6; }
.yuz--on::after { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
.yuz--arka::after { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
.yuz--kapak::after { display: none; }
.kitap.tasiniyor .yaprak { transition: none; }
.kaydirici.anlik { transition: none; }
/* Uzak yapraklar çizilmez (tarayıcının 3B katman yükü azalır; sayfaların boş görünmesini önler) */
.yaprak.uzak { visibility: hidden; }
/* Çevrilen sayfada hareketli ışık-gölge */
.yaprak.donuyor .yuz::before {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 38%, rgba(255, 255, 255, .18) 62%, rgba(0, 0, 0, .12) 100%);
  animation: donusGolge 700ms ease-in-out both;
}
@keyframes donusGolge { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.kitap { -webkit-user-select: none; user-select: none; touch-action: pan-y pinch-zoom; }
.kitap img { -webkit-user-drag: none; }
.kitap .yuz { cursor: grab; }
.sahne.cekiliyor, .sahne.cekiliyor * { cursor: grabbing !important; }

/* Köşeden çevirme (kıvrılan sayfa köşesi) */
.kose { position: absolute; top: 0; left: 0; z-index: 9; width: 88px; height: 88px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.kose:focus-visible { box-shadow: none; }
.kose:focus-visible .kose__kivrim { outline: 2px solid var(--sahne-vurgu); }
/* Kıvrım yalnız transform ile büyür (boyut/filtre animasyonu bazı tarayıcılarda ilk karede yanlış yerde çiziliyordu) */
.kose__kivrim {
  position: absolute; bottom: 0; width: 100px; height: 100px;
  transform: scale(var(--s, .34)); transition: transform 240ms var(--egri-cikis);
}
.kose--sag .kose__kivrim { right: 0; transform-origin: 100% 100%; border-top-left-radius: 6px;
  background: linear-gradient(315deg, transparent 46%, rgba(0, 0, 0, .28) 50%, #DDE3EA 50.5%, #C7CFD9 58%, #F4F6F9 76%, #FFFFFF 100%); }
.kose--sol .kose__kivrim { left: 0; transform-origin: 0 100%; border-top-right-radius: 6px;
  background: linear-gradient(45deg, transparent 46%, rgba(0, 0, 0, .28) 50%, #DDE3EA 50.5%, #C7CFD9 58%, #F4F6F9 76%, #FFFFFF 100%); }
.kose:hover, .kose:focus-visible { --s: .78; }
.kose.suruk { --s: .2; }
/* Not: sınıf adı ".ipucu" (ilk ziyaret penceresi) ile çakışmasın diye ".kose--ipucu" */
.kose--ipucu .kose__kivrim { animation: koseIpucu 1.5s ease-in-out 2; }
@keyframes koseIpucu { 0%, 100% { transform: scale(.34); } 45% { transform: scale(.9); } }
/* Elle sürüklenen yaprakta ışık-gölge çekme miktarıyla artar */
.yaprak.donuyor-el .yuz::before {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, .2) 62%, rgba(0, 0, 0, .14) 100%);
  opacity: calc(var(--p, 0) * 2.2);
}

/* spiral (cilt) */
.spiral { position: absolute; left: 50%; top: 2%; bottom: 2%; width: calc(var(--pw) * .07); transform: translateX(-50%); z-index: 400; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #9AA5B4 0 28%, transparent 30%) center top / 100% calc(var(--pw) * .055) repeat-y; opacity: .9; }
.kitap.kapali .spiral { display: none; }

.ok {
  position: absolute; top: 50%; transform: translate(var(--ok-x, 0px), -50%); z-index: 10;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--camgobegi-200); background: var(--camgobegi-400); color: var(--lacivert-900);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform 700ms cubic-bezier(.3, .1, .2, 1), background-color 150ms, border-color 150ms, opacity 150ms;
}
.ok:hover:not(:disabled) { background: var(--camgobegi-300); border-color: #FFFFFF; }
.ok:focus-visible { box-shadow: 0 0 0 3px var(--sahne-zemin), 0 0 0 5px #FFFFFF; }
.ok:disabled { opacity: .4; box-shadow: none; cursor: default; }
.ok--sol { left: max(var(--b-4), env(safe-area-inset-left)); }
.ok--sag { right: max(var(--b-4), env(safe-area-inset-right)); }
.ok .ikon { width: 22px; height: 22px; stroke-width: 2.4; }
.ok--sag.nabiz { animation: nabiz 1.6s ease-in-out 3; }
@keyframes nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 196, 208, .5); } 50% { box-shadow: 0 0 0 10px rgba(46, 196, 208, 0); } }

.yukleniyor { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--b-3); color: var(--sahne-metin-2); font-size: var(--fs-sm); z-index: 20; background: var(--sahne-zemin); }
.donen { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--sahne-kenar); border-top-color: var(--sahne-vurgu); animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.durum-serit { position: absolute; top: var(--b-3); left: 50%; transform: translateX(-50%); z-index: 12; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: var(--r-md); background: var(--durum-opsiyonlu-zemin); color: var(--metin); font-size: var(--fs-xs); text-align: center; }

/* ---------- Alt çubuk ---------- */
.alt {
  display: grid; gap: var(--b-2); padding: var(--b-2) max(var(--b-4), env(safe-area-inset-right)) calc(var(--b-2) + env(safe-area-inset-bottom)) max(var(--b-4), env(safe-area-inset-left));
  background: var(--sahne-zemin);
}
.alt__ust { display: flex; align-items: center; gap: var(--b-5); max-width: 980px; width: 100%; margin-inline: auto; }
.lejant { display: flex; gap: var(--b-4); list-style: none; padding: 0; font-size: var(--fs-xs); color: var(--sahne-metin-2); flex-shrink: 0; }
.lejant li { display: inline-flex; align-items: center; gap: 6px; }
.lj { width: 14px; height: 14px; border-radius: 3px; border: 2px solid; }
.lj--musait { border-color: #2EB872; background: rgba(46, 184, 114, .25); }
.lj--opsiyonlu { border-color: #E3A21A; border-style: dashed; background: rgba(227, 162, 26, .25); }
.lj--satildi { border-color: #E2574C; background: repeating-linear-gradient(45deg, rgba(226, 87, 76, .55) 0 2px, transparent 2px 4px); }
.lj--secili { border-color: var(--sahne-vurgu); background: var(--mavi-600); }
.lj--yakinda { border-color: var(--mavi-300); border-style: dashed; background: rgba(125, 173, 226, .15); }
.kaydir-cubuk { flex: 1; display: flex; }
#sayfa-kaydir { width: 100%; accent-color: var(--sahne-vurgu); }
.arac {
  display: flex; align-items: center; justify-content: center; gap: var(--b-1); justify-self: center;
  padding: 4px 8px; border-radius: var(--r-lg); background: var(--sahne-yuzey); border: 1px solid var(--sahne-kenar);
}
.arac__d { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-md); background: none; color: var(--sahne-metin-2); }
.arac__d:hover:not(:disabled) { background: var(--sahne-yuzey-2); color: var(--sahne-metin); }
.arac__d:disabled { opacity: .35; cursor: default; }
.arac__sayac { min-width: 92px; padding: 6px 10px; border-radius: var(--r-md); background: var(--sahne-yuzey-2); text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-yari); font-variant-numeric: tabular-nums; }
.arac__ayrac { width: 1px; height: 24px; margin: 0 var(--b-1); background: var(--sahne-kenar); }

/* ---------- Sayfa içerikleri ---------- */
.sy { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: calc(var(--pw) * .036); }
.sy__no { position: absolute; bottom: 2.2%; font-size: .72em; color: var(--gri-500); font-variant-numeric: tabular-nums; z-index: 5; }
/* Köşe kıvrımı (≈ 34 px) sayfa numarasını örtmesin */
.yuz--on .sy__no { right: max(6%, 40px); }
.yuz--arka .sy__no { left: max(6%, 40px); }
.sy__ust-etiket { position: absolute; top: 2.4%; font-size: .7em; letter-spacing: .08em; text-transform: uppercase; color: var(--gri-500); z-index: 5; }
.yuz--on .sy__ust-etiket { right: 6%; }
.yuz--arka .sy__ust-etiket { left: 6%; }
.sy__icerik { position: absolute; inset: 5.5% 7% 5.5% 7%; }
.yuz--on .sy__icerik { left: 9%; }   /* cilt payı */
.yuz--arka .sy__icerik { right: 9%; }

.sy--kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sy--duz { background: #FFFFFF; }
.sy--hamur { background: #FBFBF8; }
.sy--kapak-ic { background: linear-gradient(160deg, #F4F7FB, #E9EEF5); }

/* ajanda sayfası: tarihsiz, kareli (5 mm ≈ sayfa genişliğinin 1/30'u) */
.kareli { position: absolute; inset: 5% 7% calc(var(--serit) + 3%) 7%; display: flex; flex-direction: column; gap: .5em; }
.yuz--on .kareli { left: 9%; }
.yuz--arka .kareli { right: 9%; }
.kareli__bas { display: flex; align-items: flex-end; gap: .5em; padding-bottom: .35em; border-bottom: 1.5px solid var(--mavi-600); font-size: .78em; color: var(--mavi-700); font-weight: var(--fw-yari); }
.kareli__alan { flex: 1 1 18%; border-bottom: 1px dotted var(--gri-400); height: 1em; }
.kareli__alan--genis { flex-basis: 45%; }
.kareli__izgara { flex: 1; border: 1px solid #DCE3EC;
  background-image: linear-gradient(#DCE3EC 1px, transparent 1px), linear-gradient(90deg, #DCE3EC 1px, transparent 1px);
  background-size: calc(var(--pw) / 30) calc(var(--pw) / 30); }

/* oda ve teknik bilgi sayfası (reklam alanı değil) */
.sabit { position: absolute; inset: 8% 9% 8% 11%; display: flex; flex-direction: column; gap: .7em; color: var(--gri-800); }
.yuz--arka .sabit { left: 9%; right: 11%; }
.sabit__ust { font-size: .62em; letter-spacing: .1em; text-transform: uppercase; color: var(--mavi-600); font-weight: var(--fw-kalin); }
.sabit__baslik { font-family: var(--font-baslik); font-size: 1.4em; font-weight: var(--fw-ekstra); color: var(--mavi-800); padding-bottom: .4em; border-bottom: 2px solid var(--mavi-600); }
.sabit__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .55em; font-size: .82em; }
.sabit__liste li { padding-left: 1.1em; position: relative; }
.sabit__liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: .45em; height: .45em; border-radius: 2px; background: var(--mavi-300); }
.sabit__alt { margin-top: auto; display: flex; align-items: center; gap: .8em; font-size: .66em; color: var(--gri-500); }
.sabit__kod { flex-shrink: 0; width: 4.2em; height: 4.2em; border: .25em solid var(--gri-800); border-radius: 3px;
  background: conic-gradient(var(--gri-800) 25%, transparent 0 50%, var(--gri-800) 0 75%, transparent 0) 0 0 / 1.05em 1.05em; }

/* ---------- Örnek reklamlar ---------- */
.ornek-tasarim { --r-metin: #FFFFFF; position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--r-metin); background: var(--r-zemin, var(--mavi-600)); }
.ornek-tasarim__ornek { position: absolute; top: 2.5%; right: 3%; z-index: 4; padding: .2em .6em; border-radius: 999px; background: rgba(255, 255, 255, .88); color: #33475C; font-size: .55em; font-weight: var(--fw-kalin); letter-spacing: .08em; }
.ornek-tasarim__gorsel { position: relative; flex: 1 1 52%; overflow: hidden; }
.ornek-tasarim__metin { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: .35em; padding: 6% 7% 7%; }
.ornek-tasarim__kategori { font-size: .62em; font-weight: var(--fw-kalin); letter-spacing: .14em; text-transform: uppercase; color: var(--r-vurgu); }
.ornek-tasarim__baslik { font-family: var(--font-baslik); font-size: 1.55em; font-weight: var(--fw-ekstra); line-height: 1.08; letter-spacing: -.01em; }
.ornek-tasarim__alt { font-size: .78em; line-height: 1.35; opacity: .85; }
.ornek-tasarim__imza { display: flex; align-items: center; gap: .55em; margin-top: .6em; padding-top: .6em; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 25%, transparent); }
.ornek-tasarim__logo { width: 1.9em; height: 1.9em; flex-shrink: 0; border-radius: 22%; background: var(--r-vurgu); position: relative; }
.ornek-tasarim__logo::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: .18em solid var(--r-zemin); }
.ornek-tasarim__imza b { display: block; font-family: var(--font-baslik); font-size: .8em; letter-spacing: .06em; }
.ornek-tasarim__imza small { display: block; font-size: .6em; opacity: .8; }
/* görsel desenleri */
.desen--yapi { background:
  radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--r-vurgu) 55%, transparent) 0 9%, transparent 9.5%),
  linear-gradient(170deg, var(--r-zemin2) 0%, var(--r-zemin) 100%); }
.desen--yapi::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--r-metin) 28%, transparent) 20% 31%, transparent 31% 39%, color-mix(in srgb, var(--r-metin) 40%, transparent) 39% 55%, transparent 55% 63%, color-mix(in srgb, var(--r-metin) 24%, transparent) 63% 79%, transparent 79%);
  clip-path: polygon(0 100%, 0 70%, 20% 70%, 20% 30%, 31% 30%, 31% 55%, 39% 55%, 39% 0, 55% 0, 55% 45%, 63% 45%, 63% 20%, 79% 20%, 79% 60%, 100% 60%, 100% 100%); }
.desen--yapi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background-image: linear-gradient(color-mix(in srgb, var(--r-zemin) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--r-zemin) 70%, transparent) 1px, transparent 1px);
  background-size: 100% 9%, 4% 100%; opacity: .5; }
.desen--daire { background: radial-gradient(circle at 75% 35%, var(--r-vurgu) 0 18%, transparent 18.5%), radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--r-metin) 25%, transparent) 0 26%, transparent 26.5%), radial-gradient(circle at 55% 55%, color-mix(in srgb, var(--r-vurgu) 45%, transparent) 0 34%, transparent 34.5%), linear-gradient(150deg, var(--r-zemin2), var(--r-zemin)); }
.desen--kafes { background:
  repeating-linear-gradient(60deg, transparent 0 18%, color-mix(in srgb, var(--r-metin) 30%, transparent) 18% 19.5%),
  repeating-linear-gradient(-60deg, transparent 0 18%, color-mix(in srgb, var(--r-metin) 30%, transparent) 18% 19.5%),
  linear-gradient(transparent 46%, var(--r-vurgu) 46% 50%, transparent 50% 86%, var(--r-vurgu) 86% 90%, transparent 90%),
  linear-gradient(160deg, var(--r-zemin2), var(--r-zemin)); }
.desen--serit { background: repeating-linear-gradient(135deg, var(--r-zemin) 0 9%, var(--r-zemin2) 9% 18%), var(--r-zemin); }
.desen--serit::after { content: ""; position: absolute; left: 10%; top: 18%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--r-vurgu); box-shadow: 0 0 0 .8em color-mix(in srgb, var(--r-vurgu) 30%, transparent); }
.desen--dalga { background: radial-gradient(120% 60% at 50% 110%, var(--r-vurgu) 0 35%, transparent 35.5%), radial-gradient(120% 60% at 30% 95%, color-mix(in srgb, var(--r-metin) 25%, transparent) 0 45%, transparent 45.5%), linear-gradient(180deg, var(--r-zemin2), var(--r-zemin)); }
.desen--pafta { background-color: var(--r-zemin);
  background-image: linear-gradient(color-mix(in srgb, var(--r-metin) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--r-metin) 14%, transparent) 1px, transparent 1px);
  background-size: 8% 8%; }
.desen--pafta::after { content: ""; position: absolute; inset: 18% 22%; border: .22em solid var(--r-vurgu); border-radius: 4px; box-shadow: inset 0 0 0 .5em color-mix(in srgb, var(--r-vurgu) 15%, transparent); }
/* yerleşim çeşitleri */
.ornek-tasarim--tam .ornek-tasarim__gorsel { position: absolute; inset: 0; }
.ornek-tasarim--tam .ornek-tasarim__metin { margin-top: auto; background: linear-gradient(transparent, color-mix(in srgb, var(--r-zemin) 92%, transparent) 30%); padding-top: 22%; }
.ornek-tasarim--ust .ornek-tasarim__gorsel { order: -1; }
.ornek-tasarim--alt .ornek-tasarim__gorsel { order: 2; }
.ornek-tasarim--alt .ornek-tasarim__metin { padding-bottom: 4%; }
/* çift sayfa reklamı (ön kapak içi + yan) */
.ornek-tasarim--cift-sol .ornek-tasarim__metin { margin-top: auto; }
.ornek-tasarim--cift-sag .ornek-tasarim__metin { margin-top: auto; text-align: right; align-items: flex-end; }
/* arka kapak */
.ornek-tasarim--arka .ornek-tasarim__baslik { font-size: 2em; }
/* sayfa altı şeridi */
.serit-ornek-tasarim { position: absolute; left: 0; right: 0; bottom: 0; height: var(--serit); display: flex; align-items: center; justify-content: center; gap: .6em; padding: 0 9% 0 9%;
  background: linear-gradient(90deg, var(--mavi-700), var(--mavi-600)); color: #fff; font-size: .74em; white-space: nowrap; overflow: hidden; }
.yuz--on .serit-ornek-tasarim { padding-left: 11%; }
.yuz--arka .serit-ornek-tasarim { padding-right: 11%; }
.serit-ornek-tasarim .ornek-tasarim__logo { --r-vurgu: var(--camgobegi-400); --r-zemin: var(--mavi-600); width: 1.5em; height: 1.5em; }
.serit-ornek-tasarim b { font-family: var(--font-baslik); letter-spacing: .06em; }
.serit-ornek-tasarim span { opacity: .85; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Reklam alanı (seçilebilir) ---------- */
.alan {
  position: absolute; z-index: 7; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: left;
  border-radius: 2px; -webkit-tap-highlight-color: transparent;
}
.alan::before { content: ""; position: absolute; inset: 0; border: 3px solid #2EB872; border-radius: inherit; pointer-events: none; z-index: 3; transition: border-color 150ms, box-shadow 150ms; }
.alan:hover::before { box-shadow: inset 0 0 0 9999px rgba(46, 184, 114, .08); }
.alan[data-durum="opsiyonlu"]::before { border: 3px dashed #E3A21A; }
.alan[data-durum="satildi"] { cursor: default; }
.alan[data-durum="satildi"]::before { border-color: rgba(226, 87, 76, .9); box-shadow: inset 0 0 0 9999px rgba(15, 25, 40, .55); }
/* Henüz satışa açılmamış (tabloda yok) arka iç sayfalar: önizleme */
.alan[data-durum="yakinda"] { cursor: help; }
.alan[data-durum="yakinda"]::before { border: 3px dashed var(--mavi-300); box-shadow: inset 0 0 0 9999px rgba(15, 25, 40, .18); }
.alan[data-durum="yakinda"] .alan__rozet { background: var(--mavi-50); color: var(--mavi-700); }
.alan[aria-pressed="true"]::before { border: 4px solid var(--camgobegi-400); box-shadow: inset 0 0 0 9999px rgba(0, 77, 157, .18); }
.alan:focus-visible { box-shadow: 0 0 0 3px var(--sahne-zemin), 0 0 0 6px var(--camgobegi-400); }
.alan__rozet {
  position: absolute; z-index: 5; top: 3%; left: 4%; display: inline-flex; align-items: center; gap: .35em; max-width: 92%;
  padding: .3em .7em .3em .5em; border-radius: 999px; background: #FFFFFF; color: #16703F;
  /* Kitap küçüldükçe rozet de küçülür; üstü çizili fiyat okunsun diye alt sınır 10,5 px */
  font-size: max(10.5px, calc(var(--pw) * .032)); font-weight: var(--fw-kalin); line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.alan__rozet .ikon { width: 1.1em; height: 1.1em; }
.alan[data-durum="opsiyonlu"] .alan__rozet { background: var(--durum-opsiyonlu-zemin); color: var(--durum-opsiyonlu-metin); }
.alan[data-durum="satildi"] .alan__rozet { background: var(--durum-satildi-zemin); color: var(--durum-satildi-metin); }
.alan[aria-pressed="true"] .alan__rozet { background: var(--mavi-600); color: #fff; }
.alan__damga {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: .15em .6em; border: .14em solid #fff; border-radius: .2em; color: #fff;
  font-family: var(--font-baslik); font-weight: var(--fw-ekstra); font-size: calc(var(--pw) * .12); letter-spacing: .08em;
  background: rgba(168, 50, 45, .88); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none;
}
.alan__ipucu {
  position: absolute; z-index: 5; bottom: 3%; left: 50%; transform: translateX(-50%);
  padding: .35em .9em; border-radius: 999px; background: rgba(11, 22, 38, .82); color: #fff;
  font-size: calc(var(--pw) * .03); font-weight: var(--fw-yari); white-space: nowrap; opacity: 0; transition: opacity 150ms;
}
.alan:hover .alan__ipucu, .alan:focus-visible .alan__ipucu { opacity: 1; }
@media (hover: none) { .alan__ipucu { opacity: 1; } .alan[data-durum="satildi"] .alan__ipucu { display: none; } }
.alan[data-durum="satildi"] .alan__ipucu { display: none; }
.alan--serit .alan__rozet { top: auto; bottom: calc(100% + .3em); left: 50%; transform: translateX(-50%); }
.alan--serit .alan__damga { font-size: calc(var(--pw) * .045); transform: translate(-50%, -50%) rotate(0); }
.alan--serit .alan__ipucu { display: none; }
.alan--cift-sol::before { border-right-width: 0 !important; border-radius: 2px 0 0 2px; }
.alan--cift-sag::before { border-left-width: 0 !important; border-radius: 0 2px 2px 0; }
.kapali-alan { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(241, 243, 245, .92); color: var(--durum-kapali-metin); font-size: .8em; font-weight: var(--fw-yari); z-index: 7; }

/* ---------- Alan kartı ---------- */
.kart {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--alt-y) + var(--b-3)); transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - var(--ust-y) - var(--alt-y) - 24px); overflow-y: auto;
  padding: var(--b-5); border-radius: var(--r-lg); background: var(--yuzey); color: var(--metin);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); animation: kartAc 180ms var(--egri-cikis);
}
@keyframes kartAc { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.kart__kapat { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--metin-ikincil); }
.kart__kapat:hover { background: var(--gri-100); }
.kart__baslik { padding-right: 40px; font-size: var(--fs-lg); font-weight: var(--fw-kalin); color: var(--metin-baslik); }
.kart__konum { margin-top: var(--b-1); font-size: var(--fs-sm); color: var(--metin-ikincil); }
.kart .rozet { margin-top: var(--b-3); }
.kart__ozellik { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--b-3); margin: var(--b-3) 0 0; font-size: var(--fs-sm); }
.kart__ozellik dt { color: var(--metin-soluk); }
.kart__ozellik dd { margin: 0; }
.kart__fiyat { display: flex; align-items: baseline; gap: var(--b-2); margin-top: var(--b-3); }
.kart__fiyat strong { font-family: var(--font-baslik); font-size: var(--fs-2xl); color: var(--metin-baslik); font-variant-numeric: tabular-nums; }
.kart__fiyat span { font-size: var(--fs-xs); color: var(--metin-soluk); }
/* Açılım çifti seçiliyken: üstü çizili liste fiyatı + indirimli fiyat (rozet ve kartta) */
.kart__fiyat strong .fiyat-indirimli { font-size: inherit; color: inherit; }
.fiyat-indirimli s { font-weight: 400; opacity: .7; font-size: .8em; }
.fiyat-indirimli b { font-weight: inherit; }
.kart__not { display: flex; gap: var(--b-2); align-items: flex-start; margin-top: var(--b-3); padding: var(--b-2) var(--b-3); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: var(--lh-orta); }
.kart__not .ikon { margin-top: 2px; }
.kart__not--uyari { background: var(--durum-opsiyonlu-zemin); border: 1px solid var(--durum-opsiyonlu-kenarlik); }
.kart__not--indirim { background: var(--durum-musait-zemin); border: 1px solid var(--durum-musait-kenarlik); }
.kart__not--indirim .ikon { color: var(--basari); }
.kart__not--yakinda { background: var(--mavi-50); border: 1px solid var(--mavi-200); color: var(--metin); }
.kart__not--yakinda .ikon { color: var(--mavi-600); }
.kart__not--satildi { background: var(--durum-satildi-zemin); border: 1px solid var(--durum-satildi-kenarlik); color: var(--durum-satildi-metin); font-weight: var(--fw-yari); }
.kart__eylem { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-4); }
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--r-tam); border: 1px solid; font-size: var(--fs-xs); font-weight: var(--fw-yari); }
.rozet .ikon { width: 14px; height: 14px; }
.rozet[data-durum="musait"] { background: var(--durum-musait-zemin); color: var(--durum-musait-metin); border-color: var(--durum-musait-kenarlik); }
.rozet[data-durum="opsiyonlu"] { background: var(--durum-opsiyonlu-zemin); color: var(--durum-opsiyonlu-metin); border-color: var(--durum-opsiyonlu-kenarlik); border-style: dashed; }
.rozet[data-durum="satildi"] { background: var(--durum-satildi-zemin); color: var(--durum-satildi-metin); border-color: var(--durum-satildi-kenarlik); }
.rozet[data-durum="secili"] { background: var(--mavi-600); color: #fff; border-color: var(--mavi-800); }

.dugme { display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2); min-height: 44px; padding: var(--b-2) var(--b-4); border-radius: var(--r-md); border: 1.5px solid transparent; font-weight: var(--fw-yari); font-size: var(--fs-sm); text-decoration: none; }
.dugme--birincil { background: var(--renk-ana); color: #fff; }
.dugme--birincil:hover { background: var(--renk-ana-hover); }
.dugme--ikincil { background: var(--yuzey); color: var(--renk-ana); border-color: var(--renk-ana); }
.dugme--ikincil:hover { background: var(--renk-ana-acik); }
.buyuk-dugme {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--b-5); border: 0; border-radius: var(--r-md);
  background: var(--camgobegi-400); color: var(--lacivert-900); font-weight: var(--fw-kalin); font-size: var(--fs-base); text-decoration: none;
}
.buyuk-dugme:hover { background: var(--camgobegi-300); }
.buyuk-dugme[aria-disabled="true"] { background: var(--sahne-yuzey-2); color: var(--sahne-metin-3); cursor: not-allowed; pointer-events: none; }

/* ---------- Seçim paneli ---------- */
.ortu { position: fixed; inset: 0; z-index: 70; background: rgba(5, 10, 20, .55); }
.panel {
  position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  display: flex; flex-direction: column; background: var(--sahne-yuzey); border-left: 1px solid var(--sahne-kenar);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .45); animation: panelAc 220ms var(--egri-cikis);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes panelAc { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel__ust { position: relative; display: flex; align-items: center; min-height: var(--ust-y); padding: 0 var(--b-5); border-bottom: 1px solid var(--sahne-kenar); }
.panel__ust h2 { font-size: var(--fs-lg); }
.panel__ust .kart__kapat { top: 50%; transform: translateY(-50%); color: var(--sahne-metin-2); }
.panel__ust .kart__kapat:hover { background: var(--sahne-yuzey-2); }
.panel__govde { flex: 1; overflow-y: auto; padding: var(--b-3) var(--b-5); }
.panel__bos { padding: var(--b-6) 0; color: var(--sahne-metin-2); font-size: var(--fs-sm); text-align: center; }
.panel__liste { list-style: none; padding: 0; display: grid; }
.panel__liste li { display: flex; align-items: center; gap: var(--b-3); padding: var(--b-3) 0; border-bottom: 1px solid var(--sahne-kenar); }
.panel__liste .kalem-isim { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel__liste .kalem-isim button { padding: 0; border: 0; background: none; text-align: left; font-weight: var(--fw-yari); color: var(--sahne-metin); min-height: 32px; }
.panel__liste .kalem-isim button:hover { color: var(--sahne-vurgu); }
.panel__liste .kalem-isim small { font-size: var(--fs-xs); color: var(--sahne-metin-3); }
.panel__liste .fiyat { font-weight: var(--fw-yari); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel__liste .kaldir { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-md); background: none; color: var(--sahne-metin-3); }
.panel__liste .kaldir:hover { background: var(--sahne-yuzey-2); color: var(--sahne-metin); }
.panel__liste .indirim-satir { color: #6FD39B; font-size: var(--fs-sm); }
.panel__alt { display: grid; gap: var(--b-3); padding: var(--b-4) var(--b-5) var(--b-5); border-top: 1px solid var(--sahne-kenar); }
.panel__satir { display: flex; justify-content: space-between; align-items: baseline; gap: var(--b-3); }
.panel__satir--indirim { color: #6FD39B; font-size: var(--fs-sm); font-weight: var(--fw-yari); }
.panel__satir--toplam span { color: var(--sahne-metin-2); font-size: var(--fs-sm); font-weight: var(--fw-yari); }
.panel__satir--toplam strong { font-family: var(--font-baslik); font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; }
.panel__not { display: flex; gap: var(--b-2); align-items: flex-start; padding: var(--b-2) var(--b-3); border-radius: var(--r-md); border: 1px solid var(--sahne-kenar); border-left: 3px solid var(--sahne-vurgu); background: var(--sahne-yuzey-2); font-size: var(--fs-sm); line-height: var(--lh-orta); color: var(--sahne-metin-2); }
.panel__not .ikon { color: var(--sahne-vurgu); margin-top: 2px; }
.panel__not b { color: var(--sahne-metin); }
.panel__kapali { font-size: var(--fs-sm); color: var(--durum-opsiyonlu-zemin); }

/* ---------- Tüm sayfalar ---------- */
.izgara { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--b-4); background: rgba(5, 10, 20, .7); }
.izgara__kap { width: min(980px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--sahne-yuzey); border: 1px solid var(--sahne-kenar); overflow: hidden; }
.izgara__ust { position: relative; display: flex; align-items: center; min-height: 56px; padding: 0 var(--b-5); border-bottom: 1px solid var(--sahne-kenar); }
.izgara__ust h2 { font-size: var(--fs-lg); }
.izgara__ust .kart__kapat { top: 50%; transform: translateY(-50%); color: var(--sahne-metin-2); }
.izgara__liste { list-style: none; margin: 0; padding: var(--b-4); overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--b-2); }
.izgara__liste button {
  width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--b-2) var(--b-3);
  border: 1px solid var(--sahne-kenar); border-left: 4px solid var(--sahne-kenar); border-radius: var(--r-md); background: var(--sahne-yuzey-2); color: var(--sahne-metin); text-align: left; font-size: var(--fs-sm);
}
.izgara__liste button:hover { border-color: var(--sahne-vurgu); }
.izgara__liste button[aria-current="true"] { outline: 2px solid var(--sahne-vurgu); }
.izgara__liste small { color: var(--sahne-metin-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.izgara__liste [data-durum="musait"] { border-left-color: #2EB872; }
.izgara__liste [data-durum="opsiyonlu"] { border-left-color: #E3A21A; }
.izgara__liste [data-durum="satildi"] { border-left-color: #E2574C; }
.izgara__liste [data-durum="yakinda"] { border-left-style: dashed; border-left-color: var(--mavi-300); }
.izgara__liste [data-secili="true"] { border-left-color: var(--sahne-vurgu); background: var(--mavi-800); }

/* ---------- İpucu ---------- */
.ipucu { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--b-4); background: rgba(5, 10, 20, .72); }
.ipucu__kap { width: min(460px, 100%); display: grid; gap: var(--b-3); padding: var(--b-6); border-radius: var(--r-xl); background: var(--yuzey); color: var(--metin); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.ipucu__ikon { width: 40px; height: 40px; color: var(--renk-ana); }
.ipucu__kap h2 { font-size: var(--fs-xl); color: var(--metin-baslik); }
.ipucu__kap ol { padding-left: 1.2em; display: grid; gap: var(--b-2); font-size: var(--fs-sm); color: var(--metin-ikincil); }
.ipucu__not { font-size: var(--fs-sm); color: var(--metin-ikincil); padding: var(--b-2) var(--b-3); border-radius: var(--r-md); background: var(--mavi-50); }
.ipucu .buyuk-dugme { background: var(--renk-ana); color: #fff; }
.ipucu .buyuk-dugme:hover { background: var(--renk-ana-hover); }
.ipucu__kvkk { font-size: var(--fs-xs); color: var(--metin-ikincil); text-align: center; }
.ipucu__kvkk a { color: var(--renk-ana); font-weight: var(--fw-yari); }

/* ---------- Pazarlama raporu eklemeleri (K1–K11) ---------- */
/* Kapalı kitabın yanında tanıtım kartı (konum JS ile) */
.tanitim {
  position: absolute; z-index: 8; width: 260px; display: grid; gap: var(--b-3); padding: var(--b-4);
  border-radius: var(--r-lg); background: rgba(19, 34, 58, .92); border: 1px solid var(--sahne-kenar); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.tanitim h2 { font-size: var(--fs-lg); }
.tanitim ul { list-style: none; padding: 0; display: grid; gap: var(--b-2); font-size: var(--fs-sm); color: var(--sahne-metin-2); }
.tanitim li { padding-left: 18px; position: relative; }
.tanitim li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--sahne-vurgu); }
.tanitim b { color: var(--sahne-metin); }
.tanitim__fiyat { font-size: var(--fs-sm); font-weight: var(--fw-yari); color: var(--sahne-metin); }
/* Açılım rozeti (sırtta) */
.acilim-rozet {
  position: absolute; z-index: 11; top: 0; left: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border-radius: var(--r-tam);
  border: 1px solid #2EB872; background: #0F3B2A; color: #DFF7EA; font-size: var(--fs-xs); font-weight: var(--fw-yari); white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.acilim-rozet:hover { background: #145238; }
.acilim-rozet .ikon { width: 16px; height: 16px; color: #6FD39B; }
/* Yükleniyor: kapak yer tutucusu */
.yukleniyor__kapak { width: 120px; height: auto; border-radius: 3px 8px 8px 3px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); opacity: .9; }
/* Kartta ek satırlar */
.kart__deger { margin-top: var(--b-2); font-size: var(--fs-sm); font-weight: var(--fw-yari); color: var(--metin-baslik); }
.kart__alt-bag { display: flex; flex-wrap: wrap; gap: var(--b-1) var(--b-4); margin-top: var(--b-3); font-size: var(--fs-sm); }
.kart__alt-bag a, .kart__alt-bag button { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--renk-ana); font-weight: var(--fw-yari); text-decoration: underline; text-underline-offset: 3px; }
.kart__logo { display: grid; gap: var(--b-2); margin-top: var(--b-3); padding: var(--b-3); border-radius: var(--r-md); border: 1px dashed var(--mavi-300); background: var(--mavi-50); font-size: var(--fs-sm); }
.kart__logo label { font-weight: var(--fw-yari); color: var(--metin-baslik); }
.kart__logo input[type="text"] { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--kenarlik-guclu); border-radius: var(--r-sm); background: #fff; color: var(--metin); font: inherit; }
.kart__logo small { color: var(--metin-ikincil); font-size: var(--fs-xs); }
.kart__logo-eylem { display: flex; flex-wrap: wrap; gap: var(--b-2); }
/* Örnek reklamda kullanıcının logosu */
img.ornek-tasarim__logo--kullanici { width: 3.4em; height: 1.9em; object-fit: contain; padding: .12em; background: #fff; border-radius: 4px; }
.serit-ornek-tasarim img.ornek-tasarim__logo--kullanici { width: 2.8em; height: 1.5em; }
/* Panel: sonraki adım ve iletişim */
.panel__sonraki { font-size: var(--fs-xs); color: var(--sahne-metin-2); line-height: var(--lh-orta); }
.panel__iletisim { font-size: var(--fs-xs); color: var(--sahne-metin-2); line-height: var(--lh-orta); }
.panel__iletisim a { color: var(--sahne-vurgu); font-weight: var(--fw-yari); }
/* İpucu ek satırları */
.ipucu__neden { font-size: var(--fs-sm); color: var(--metin); line-height: var(--lh-orta); }
.ipucu__satir-ikon { width: 16px; height: 16px; vertical-align: -3px; color: var(--renk-ana); }
/* Mobil seçim çubuğu */
.mobil-secim { display: none; }
.durum-serit { cursor: pointer; }
.serit-dugme { margin-left: 6px; padding: 2px 10px; border: 0; border-radius: var(--r-tam); background: var(--mavi-600); color: #fff; font-size: inherit; font-weight: var(--fw-kalin); cursor: pointer; }
/* "Önizle" sonrası alanı kısa süre vurgular */
.alan--vurgu { animation: alanVurgu 1s ease-in-out 2; }
@keyframes alanVurgu { 0%, 100% { box-shadow: inset 0 0 0 3px rgba(242, 165, 65, 0); } 50% { box-shadow: inset 0 0 0 4px #F2A541, 0 0 0 6px rgba(242, 165, 65, .35); } }

/* "Bana soru sor" düğmesi (eski "Alternatifler" yerinde) */
.ust-dugme--soru { border-color: rgba(46, 196, 208, .55); color: var(--camgobegi-300); }
.ust-dugme--soru:hover { border-color: var(--camgobegi-400); color: var(--camgobegi-200); }
/* Dar ekranda fazladan düğme sığsın: kurum adı kısaltılır */
@media (max-width: 600px) {
  .ust__marka { flex: 1 1 auto; overflow: hidden; }
  .ust__marka-metin { overflow: hidden; }
  .ust__marka-metin b { overflow: hidden; text-overflow: ellipsis; }
}

/* Kitap ilk boyutlarında: kapak ve sayfalar aynı genişlikte. Cetvelin durduğu sayfa yüzü kırpılmaz (logolu uç dışarı taşar);
   telefonda (tek sayfa) cetvel sayfası görünürken pencere sağa uç kadar genişletilir (JS: .uc-goster) */
.yuz--karton { background: #0B2547; }
.yuz--tasan { overflow: visible; }
.pencere.tek.uc-goster { overflow: visible; clip-path: inset(0 calc(var(--uc, 0px) * -1) 0 0); }

/* Renkli İMO sayfası (reklamsız; içerik Oda'dan gelecek) */
.sy--imo { background: linear-gradient(160deg, #004D9D 0%, #003268 55%, #071A33 100%); }
.imo-sayfa { position: absolute; inset: 10% 10% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; text-align: center; color: #fff; }
.imo-sayfa__logo { width: 34%; height: auto; }
.imo-sayfa__ust { font-size: .62em; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.imo-sayfa__baslik { font-family: var(--font-baslik); font-size: 1.3em; font-weight: var(--fw-ekstra); }
.imo-sayfa__alt { font-size: .7em; color: var(--camgobegi-200); }
.imo-sayfa__not { margin-top: auto; font-size: .7em; opacity: .9; }

/* Teknik bilgiler + künye (yeni düzen: üstte yatay kutu, ortada künye, altta sponsor) */
.tk { position: absolute; inset: 5% 6% 27% 6%; display: flex; flex-direction: column; gap: .7em; color: var(--gri-800); } /* alt %20 reklam alanına ayrılır */
.yuz--on .tk { left: 9%; } .yuz--arka .tk { right: 9%; }
.tk__ust { display: flex; align-items: center; gap: .7em; padding: .7em; border: 1.5px solid var(--mavi-600); border-radius: .4em; background: var(--mavi-50); }
.tk__logo { width: 2.6em; height: 2.6em; flex-shrink: 0; }
.tk__ust-metin { flex: 1; min-width: 0; }
.tk__baslik { font-family: var(--font-baslik); font-size: 1.15em; font-weight: var(--fw-ekstra); color: var(--mavi-800); }
.tk__alt { font-size: .62em; color: var(--gri-600); line-height: 1.3; }
.tk__kod { flex-shrink: 0; width: 3.4em; height: 3.4em; border: .22em solid var(--gri-800); border-radius: 3px; background: conic-gradient(var(--gri-800) 25%, transparent 0 50%, var(--gri-800) 0 75%, transparent 0) 0 0 / .85em .85em; }
.tk__kunye { display: flex; flex-direction: column; gap: .55em; }
.tk__kunye-baslik { font-family: var(--font-baslik); font-weight: var(--fw-ekstra); color: var(--mavi-800); font-size: .9em; letter-spacing: .06em; text-transform: uppercase; }
.tk__satir { display: flex; align-items: flex-end; gap: .5em; font-size: .64em; color: var(--gri-500); }
.tk__satir span:first-child { flex: 0 0 38%; }
.tk__cizgi { flex: 1; border-bottom: 1px solid var(--gri-300); height: 1em; }
.tk__not { font-size: .52em; color: var(--gri-400); }
/* Alt reklam alanı: konum JS'te (seçim çerçevesiyle aynı); görünüm diğer sayfalardaki örnek reklam imzası gibi */
.tk__ornek-tasarim { --r-vurgu: var(--camgobegi-400); --r-zemin: var(--mavi-600); position: absolute; z-index: 2; display: flex; align-items: center; gap: .7em; padding: 0 1em; border-radius: 2px; background: linear-gradient(90deg, var(--mavi-700), var(--mavi-600)); color: #fff; }
.tk__ornek-tasarim b { display: block; font-family: var(--font-baslik); font-size: .8em; letter-spacing: .06em; }
.tk__ornek-tasarim small { display: block; font-size: .6em; opacity: .8; }

/* Yıllık plan */
.yp { --r-vurgu: var(--camgobegi-400); --r-zemin: var(--mavi-600); position: absolute; inset: 5% 6% 5% 6%; display: flex; flex-direction: column; gap: .5em; color: var(--gri-800); }
.yuz--on .yp { left: 9%; } .yuz--arka .yp { right: 9%; }
.yp__bas { padding-right: 48%; min-height: 2.6em; }
.yp__baslik { font-family: var(--font-baslik); font-size: 1.05em; font-weight: var(--fw-ekstra); color: var(--mavi-800); text-transform: uppercase; letter-spacing: .04em; }
.yp__aylar { font-size: .6em; color: var(--gri-500); }
.yp__rozet { --r-vurgu: var(--camgobegi-400); --r-zemin: var(--mavi-600); position: absolute; z-index: 2; display: flex; align-items: center; gap: .45em; padding: 0 .5em; border: 1px solid var(--mavi-300); border-radius: .3em; background: var(--mavi-50); color: var(--mavi-800); }
.yp__rozet b { display: block; font-size: .6em; letter-spacing: .04em; }
.yp__rozet small { display: block; font-size: .5em; color: var(--gri-500); }
.yp__rozet .ornek-tasarim__logo { width: 1.5em; height: 1.5em; }
.yp__ay { flex: 1; display: grid; grid-template-columns: 1fr 34%; grid-template-rows: auto 1fr; gap: .2em .5em; }
.yp__ay-ad { grid-column: 1 / -1; font-size: .66em; font-weight: var(--fw-kalin); color: var(--mavi-700); text-transform: uppercase; letter-spacing: .06em; }
.yp__satirlar { background: repeating-linear-gradient(transparent 0 calc(1.1em - 1px), #DDE3EA calc(1.1em - 1px) 1.1em); }
.yp__not { border: 1px solid #DDE3EA; background: #F7F9FC; font-size: .5em; color: var(--gri-400); padding: .3em; }

/* Yıllık takvim (tek sayfa, 12 ay) */
.yt { position: absolute; inset: 5% 6% 5% 6%; display: flex; flex-direction: column; gap: .4em; color: var(--gri-800); }
.yuz--on .yt { left: 9%; } .yuz--arka .yt { right: 9%; }
.yt .yp__bas { min-height: 4.4em; } /* takvim, sağ üstteki reklam kutusunun ve fiyat rozetinin altından başlar */
.yt__izgara { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: .45em .6em; }
.yt__ay { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.yt__ay-ad { font-size: .5em; font-weight: var(--fw-kalin); color: var(--mavi-700); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--mavi-200); padding-bottom: .1em; }
.yt__gunler { display: grid; grid-template-columns: repeat(7, 1fr); gap: .05em 0; font-size: .36em; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; color: var(--gri-700); }
.yt__gb { font-weight: var(--fw-kalin); color: var(--gri-500); }
.yt__hs { color: #C0392B; }

/* Yarım sayfa */
.ornek-tasarim--yarim { inset: auto 0; flex-direction: row; }
.ornek-tasarim--yarim .ornek-tasarim__gorsel { flex: 0 0 40%; }
.ornek-tasarim--yarim .ornek-tasarim__metin { flex: 1; justify-content: center; padding: 4% 5%; }
.ornek-tasarim--yarim .ornek-tasarim__baslik { font-size: 1.15em; }
.ornek-tasarim--yarim .ornek-tasarim__imza { margin-top: .3em; padding-top: .3em; }
.alan--yarim .alan__rozet { font-size: calc(var(--pw) * .028); }
.alan--yarim .alan__damga { font-size: calc(var(--pw) * .08); }

/* Küçük alanlar (rozet, cetvel, sponsor bandı): rozet alanın üstüne taşınır */
.alan--kucuk .alan__rozet { top: auto; bottom: calc(100% + .3em); left: 50%; transform: translateX(-50%); font-size: calc(var(--pw) * .026); }
.alan--kucuk .alan__ipucu { display: none; }
.alan--kucuk .alan__damga { font-size: calc(var(--pw) * .05); transform: translate(-50%, -50%); }
.alan--kucuk-alt .alan__rozet { bottom: auto; top: calc(100% + .3em); }

/* Cetvel ayraç: sayfa altı şeridinin üstünde (%66–75); logolu ucu sayfanın dış kenarından --uc kadar taşar */
.cetvel { --r-vurgu: #FFFFFF; --r-zemin: var(--mavi-600); position: absolute; z-index: 6; left: 3%; right: calc(var(--uc, 0px) * -1); top: 66%; height: 9%; display: flex; align-items: stretch; border: 1px solid #8A94A3; border-right: 0; border-radius: .5em 0 0 .5em; background: rgba(247, 249, 252, .9); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.cetvel__klips { flex: 0 0 9%; border-right: 1px solid #C3C9D1; background: radial-gradient(circle at 50% 50%, transparent 0 28%, #004D9D 30% 38%, transparent 40%); }
.cetvel__olcek { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 0 .4em; font-size: .5em; color: #16202E;
  background: repeating-linear-gradient(90deg, #16202E 0 1px, transparent 1px 4%) top / 100% 22% no-repeat, repeating-linear-gradient(90deg, #16202E 0 1px, transparent 1px 4%) bottom / 100% 22% no-repeat; }
.cetvel__olcek b { padding-top: 1.6em; } .cetvel__olcek b + b { padding: 0 0 1.6em; }
.cetvel__uc { flex: 0 0 var(--uc, 16%); display: grid; place-items: center; background: #004D9D; border-radius: 0 .5em .5em 0; }
.cetvel__uc .ornek-tasarim__logo { width: 1.6em; height: 1.6em; }


/* ---------- Duyarlı ---------- */
/* 1100 px altında içindekiler soldan açılan çekmece olur */
@media (max-width: 1099.98px) {
  .ust-dugme--ic { display: inline-flex; }
  .icindekiler { position: fixed; z-index: 76; top: 0; bottom: 0; left: 0; width: min(320px, 88vw); box-shadow: 20px 0 60px rgba(0, 0, 0, .45); transform: translateX(-105%); transition: transform 220ms var(--egri-cikis); visibility: hidden; }
  .icindekiler.acik { transform: none; visibility: visible; }
  .icindekiler__ust { min-height: var(--ust-y); }
  .icindekiler .icindekiler__kapat { display: grid; }
}
/* 901–1150 px: üst çubukta düğmeler büyüyünce başlığın alt satırı kesiliyordu */
@media (min-width: 900.02px) and (max-width: 1150px) {
  .ust__alt { display: none; }
}
@media (max-width: 900px) {
  .ust__orta { display: none; }
  .ust__sag { margin-left: auto; }
  /* K9: lejant gizlenmez; tek satır, gerekirse yatay kaydırılır */
  .alt__ust { flex-direction: column; align-items: stretch; gap: var(--b-1); }
  .lejant { gap: var(--b-3); overflow-x: auto; white-space: nowrap; scrollbar-width: none; justify-content: center; }
  .lejant::-webkit-scrollbar { display: none; }
  .mobil-secim:not([hidden]) { display: flex; align-items: center; gap: var(--b-2); max-width: 560px; width: 100%; margin-inline: auto; }
  .mobil-secim__bilgi { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--b-3); border: 1px solid var(--sahne-kenar); border-radius: var(--r-md); background: var(--sahne-yuzey-2); color: var(--sahne-metin); font-size: var(--fs-sm); font-weight: var(--fw-yari); text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobil-secim__git { min-height: 44px; flex-shrink: 0; font-size: var(--fs-sm); }
}
@media (max-width: 600px) {
  .neden-serit { display: none; } /* bilgi ipucu penceresinde verilir */
}
@media (max-width: 600px) {
  :root { --ust-y: 56px; --alt-y: 96px; }
  .ust { gap: var(--b-2); }
  .ust__marka-metin small { display: none; }
  .ust-dugme span:not(.sepet-sayi) { display: none; }
  .ust-dugme { padding: 0 10px; }
  .mod-rozet { display: none; }
  .ok { width: 40px; height: 40px; }
  .ok--sol { left: 6px; } .ok--sag { right: 6px; }
  .arac { gap: 0; padding: 2px 4px; }
  .arac__d { width: 40px; }
  .arac__sayac { min-width: 72px; padding: 6px; font-size: var(--fs-xs); white-space: nowrap; }
  .kart { bottom: calc(var(--alt-y) + 8px); }
  .panel { top: auto; width: 100vw; max-height: 88dvh; border-left: 0; border-top: 1px solid var(--sahne-kenar); border-radius: 16px 16px 0 0; animation-name: panelAcAlt; }
  @keyframes panelAcAlt { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}
/* Çok dar ekran (≤ 359 px): alt araç çubuğu sığsın diye ilk/son sayfa düğmeleri kalkar (kaydırma çubuğu ve Home/End aynı işi görür) */
@media (max-width: 359.98px) {
  .ust__marka-metin { display: none; } /* yalnız logo; düğmeler sığsın */
  .ust__marka img { flex-shrink: 0; }
  #a-ilk, #a-son, .arac__ayrac { display: none; }
  .arac__d { width: 38px; }
  .arac__sayac { min-width: 64px; }
}
@media (max-height: 520px) {
  :root { --alt-y: 60px; }
  .alt__ust { display: none; }
  .neden-serit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yaprak, .kaydirici { transition-duration: 1ms !important; }
  .kart, .panel, .ok--sag.nabiz { animation: none !important; }
}