/* ══════════════════════════════════════════════════════════════════════════
   Katalog Flipbook — stiller
   Renkler config.js -> tema'dan CSS değişkeni olarak enjekte edilir.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* NDI paleti — iletişim penceresi .teklif dışında olduğu için kökte durur. */
  --ndi-blue: #77A954;
  --ndi-navy: #08284C;
  --ndi-body: #334155;
  --ndi-muted: #6b747c;
  --ndi-section: #f3f4f5;
  --ndi-card-tint: #eff5f5;
  --ndi-border: #e2e6e0;
  --r-sm: 4px;
  --r-lg: 8px;

  --zemin: #0e1116;
  --zemin-2: #161b22;
  --metin: #e6edf3;
  --metin-solgun: #8b949e;
  --vurgu: #2f81f7;
  --vurgu-metin: #fff;
  --kenar: rgba(255, 255, 255, .10);

  /* Ust bar kaldirildi; katalog tum yuksekligi kullanir. Degisken 0 olarak
     korunuyor cunku dikey hesaplarda hala kullaniliyor. */
  --ustbar-y: 0px;
  /* Alt bar kaldirildi; sayfa gezinmesi sol dikey seride tasindi. */
  --altbar-y: 0px;
  /* Arac cubugu altta yatay durur: solda yalnizca kenar payi kalir,
     dikey alan ise cubugun yuksekligi kadar ayrilir. */
  --arac-alan: 66px;
  --arac-boy: 78px;
  /* Kitabin sagindaki serbest alan: teklif karti burada durur. */
  --sag-alan: 372px;
  --yumusak: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--zemin);
  color: var(--metin);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body::before {
  /* Acik zeminde cok hafif bir derinlik: kitap duz bir yuzeyde durmasin. */
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(32,36,52,.045), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.gizli { display: none !important; }

/* ── Butonlar ────────────────────────────────────────────────────────────── */

.ikon-dugme {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--metin-solgun);
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s;
}
.ikon-dugme:hover:not(:disabled) { background: rgba(32,36,52,.07); color: var(--metin); }
.ikon-dugme:active:not(:disabled) { transform: scale(.93); }
.ikon-dugme:disabled { opacity: .3; cursor: default; }
.ikon-dugme.etkin { background: var(--vurgu); color: var(--vurgu-metin); }
.ikon-dugme.kucuk { width: 30px; height: 30px; }

.ikon-dugme svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dugme {
  display: inline-block;
  padding: 11px 22px;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.dugme-vurgu { background: var(--vurgu); color: var(--vurgu-metin); }

/* ── Araç çubuğu (sol dikey şerit) ───────────────────────────────────────
   Üst bar kaldırıldı: logo + başlık markayı iki kez söylüyordu ve bar
   kataloğun dikey alanından 56 px alıyordu. Araçlar solda, dikeyde ortalanmış
   bir şeritte durur; sağ taraf teklif sütununa ayrılmıştır. */

/* Alt çubuk üç ayrı gruptan oluşur: araçlar, sayaç, teklif çağrısı.
   Hepsi tek bir uzun beyaz kutuda toplandığında karışık duruyordu; ayrı
   kutular her grubun ne işe yaradığını kendiliğinden anlatıyor.
   Çubuğun kendisi görünmez bir taşıyıcıdır. */
.arac-cubugu {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* uc grup tek satirda; sadece telefonda alt alta (asagidaki 820px kurali) */
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: opacity .25s, transform .25s;
  max-width: calc(100vw - 28px);
}

.arac-grup {
  display: flex;
  align-items: center;
  /* Üç grup da aynı yükseklikte olsun; farklı içerikler (38 px ikon, 34 px
     düğme, 28 px sayaç) yoksa kutuları farklı boyda gösteriyordu. */
  min-height: 52px;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--zemin-2);
  border: 1px solid var(--kenar);
  box-shadow: 0 4px 14px rgba(32, 36, 51, .08);
}
.arac-grup-cagri { gap: 8px; padding: 6px 10px 6px 14px; }
.arac-cubugu::-webkit-scrollbar { width: 0; }

/* Alt çubuktaki teklif çağrısı. Sağ sütun kalkınca kart yerine tek satır. */
.arac-etiket {
  padding: 0 8px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--metin);
  white-space: nowrap;
}
.arac-dugme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--kenar);
  border-radius: 8px;
  background: #fff;
  color: var(--ndi-navy);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.arac-dugme { text-decoration: none; }
.arac-dugme:hover { background: var(--ndi-card-tint); border-color: #c4c4c4; }
.arac-dugme-ikon {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
}
.arac-dugme img { display: block; opacity: .85; }
.arac-dugme-birincil {
  background: var(--ndi-navy);
  border-color: var(--ndi-navy);
  color: #fff;
}
.arac-dugme-birincil:hover { background: #2b3043; border-color: #2b3043; box-shadow: 0 6px 16px rgba(32, 36, 52, .22); }
.arac-dugme-birincil img { filter: brightness(0) invert(1); opacity: 1; }

/* ── Sahne + kitap ───────────────────────────────────────────────────────── */

.sahne {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sagda teklif karti ve ileride eklenecek panellere yer birakilir;
     katalog bu yuzden merkezden biraz sola oturur. */
  /* Sol/sag dolgu app.js'teki yerlesimiYayinla() tarafindan guncellenir:
     ic kutu tam kitap genisliginde kalir, boylece kitap sag sutunun yanina
     birebir oturur. Degiskenler yoksa (dar ekran) eski davranis gecerlidir. */
  padding: calc(var(--ustbar-y) + 16px) var(--sag-alan) calc(var(--altbar-y) + var(--arac-boy)) var(--sahne-sol, var(--arac-alan));
}

.kitap-sarmal {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

/* Not: Buraya bir zemin gölgesi (::after) konmuştu, ancak DOM sırasında
   sayfalardan sonra geldiği için sayfanın alt kenarına biniyor ve kağıdı
   bulandırıyordu. Derinliği zaten .sayfa üzerindeki iki katmanlı gölge veriyor. */

.kitap { opacity: 0; transition: opacity .5s var(--yumusak); }
.kitap.hazir { opacity: 1; }

/* StPageFlip'in ürettiği sayfa kabı */
.sayfa {
  background: #fff;
  /* overflow: hidden hem canvas'i hem golge/doku katmanlarini koselere gore
     kirpar, boylece yuvarlatma tum katmanlarda gecerli olur. */
  overflow: hidden;
  border-radius: var(--sayfa-radius, 6px);
  /* Yakın temas gölgesi + geniş yumuşak gölge: sayfa zeminden ayrılmış görünür. */
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 10px 34px rgba(0,0,0,.42);
}
.sayfa canvas,
.sayfa img.sayfa-gorsel { display: block; width: 100%; height: 100%; }
.sayfa img.sayfa-gorsel { object-fit: fill; user-select: none; -webkit-user-drag: none; }

/* Mat kuşe kağıt hissi.
   Ekrandaki sayfa saf beyaz ve pürüzsüz olduğu için parlak, cilalı bir kağıt
   gibi duruyordu. İki müdahale mat kuşeye yaklaştırır:
   • çok ince bir grenlilik (baskı kağıdının dokusu),
   • kırık beyaza çeken hafif sıcak bir ton — mat kağıt ışığı yansıtmaz, soğurur.
   Her ikisi de son derece hafif tutulur; amaç dokuyu fark ettirmek değil,
   parlaklığı kırmaktır. */
.sayfa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* soft-light kullanılır: gren hem açık hem koyu pikseller ürettiği için
     sayfanın genel parlaklığı korunur. multiply dokuyu verir ama kağıdı
     gözle görülür biçimde koyulaştırıyordu. */
  mix-blend-mode: soft-light;
  opacity: calc(var(--kagit-dokusu, 1) * .95);
  /* İki katman: ince tane baskı kağıdının pürüzünü, iri ve yumuşak katman
     kuşenin düzensiz lif dağılımını verir. Tek katman fazla düzenli görünüp
     dijital bir gürültü gibi duruyordu. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.62'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.34'/%3E%3C/svg%3E");
  background-size: 120px 120px, 300px 300px;
}

/* sayfa henüz render edilmediyse iskelet */
.sayfa-iskelet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  color: #9aa2ad;
  font-size: 12px;
  letter-spacing: .04em;
  overflow: hidden;
}
.sayfa-iskelet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.75) 50%, transparent 75%);
  background-size: 220% 100%;
  animation: parilti 1.3s linear infinite;
}
@keyframes parilti { from { background-position: 220% 0; } to { background-position: -120% 0; } }

/* ── Cilt (sırt) gölgesi ─────────────────────────────────────────────────
   Basılı bir katalogda sayfa cilde doğru kıvrıldığı için orası koyulaşır;
   3B hissini asıl veren şey budur.

   İki nokta kağıt hissi için kritik:
   • Gölge dar bir şerit değil, sayfanın TAMAMINA yayılır — ortalarda hâlâ
     çok hafif bir koyuluk kalır. Dar bant bir kuşak gibi görünür, yapay durur.
   • Renk saf siyah değil gridir; siyah kağıdı kirletir.
   Sayfaya beyaz "ışık" katmanı eklenmez — kağıt zaten açıktır, üstüne beyaz
   bindirmek sayfayı soluk ve yapay gösterir. */

.kagit-golge {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Gölge sayfanın yaklaşık üçte birinde tükenir: cilde yakın yer koyu kalır,
   sayfanın geri kalanı kağıt beyazında durur. Gölgeyi sayfanın tamamına
   yaymak sayfayı topluca koyulaştırıyordu. */

/* Sol sayfa: cilt sağ kenarda */
.kagit-golge.sol {
  background:
    linear-gradient(to left,
      rgba(20, 20, 20, .34) 0%,
      rgba(20, 20, 20, 0) 1.8%),
    linear-gradient(to left,
      rgba(58, 58, 58, .30) 0%,
      rgba(54, 54, 54, .08) 14%,
      rgba(54, 54, 54, .02) 26%,
      rgba(200, 200, 200, 0) 38%);
}

/* Sağ sayfa: cilt sol kenarda */
.kagit-golge.sag {
  background:
    linear-gradient(to right,
      rgba(20, 20, 20, .34) 0%,
      rgba(20, 20, 20, 0) 1.8%),
    linear-gradient(to right,
      rgba(53, 53, 53, .32) 0%,
      rgba(53, 53, 53, .09) 14%,
      rgba(53, 53, 53, .02) 26%,
      rgba(200, 200, 200, 0) 38%);
}

/* ── Tıklanabilir link katmanı ───────────────────────────────────────────── */

.link-katman {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;   /* sadece hotspot'lar tıklanır, sayfa çevirme bozulmaz */
}

.hotspot {
  position: absolute;
  pointer-events: auto;
  display: block;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  transition: background .18s, box-shadow .18s;
}
.hotspot:hover,
.hotspot:focus-visible {
  background: color-mix(in srgb, var(--vurgu) 18%, transparent);
  box-shadow: 0 0 0 2px var(--vurgu);
  outline: none;
}
/* linkleri bir anlığına göster (L tuşu / ilk açılış ipucu) */
.link-katman.goster .hotspot {
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--vurgu) 70%, transparent);
}

/* ── Yan oklar ───────────────────────────────────────────────────────────── */

.ok {
  position: fixed;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  width: 46px;
  height: 82px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--metin);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s, opacity .18s, transform .18s;
}
.ok:disabled { opacity: 0; pointer-events: none; }
/* Yan oklar kaldirildi: gezinme alt bardaki dugmeler, klavye ok tuslari,
   sayfa kenarina tiklama ve mobilde kaydirma ile zaten yapiliyor. */
/* Sayfa gezinmesi kataloğun iki yanındaki oklarla yapılır. Eskiden bunlar
   kapalıydı (display:none) ve ileri/geri sol şeritteydi; şerit kalabalıklaşıyor,
   oklar ise kataloğun tam yanında olduğu için elin gittiği yer orası oluyordu.
   Renkler açık zemine göre: eski rgba(255,255,255,.06) koyu tema kalıntısıydı
   ve #f3f4f5 üzerinde görünmüyordu. */
.ok {
  display: grid;
  background: var(--zemin-2);
  border: 1px solid var(--kenar);
  color: var(--metin-solgun);
  box-shadow: 0 4px 14px rgba(32, 36, 51, .10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 8px;
  width: 40px;
  height: 76px;
}
.ok:hover:not(:disabled) { background: var(--zemin); color: var(--metin); border-color: #c4c4c4; }
.ok:active:not(:disabled) { transform: translateY(-50%) scale(.95); }
/* Oklar ekranın en kenarlarında durur, kataloğun üstünde değil.
   Kenar payları (JS'teki SAHNE_KENAR / SAG_KENAR) oklara yer bırakacak
   şekilde hesaplanır; böylece hiçbir ekran genişliğinde sayfanın üstüne
   binmezler. */
.ok-sol { left: 14px; }
.ok-sag { right: 14px; }
.ok svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Alt bar ─────────────────────────────────────────────────────────────── */

/* Sayfa sayacı: "12 / 64" biçiminde, çubukla aynı hizada. */
.sayac {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--metin-solgun);
}
.sayac-girdi {
  width: 38px;
  padding: 4px 0;
  border: 1px solid var(--kenar);
  border-radius: 4px;
  background: #fff;
  color: var(--metin);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.sayac-girdi:focus { outline: none; border-color: var(--vurgu); background: #fff; }
.sayac .sayac-ayrac { width: 8px; height: 1px; background: var(--kenar); margin: 0; }
.sayac-toplam { color: var(--metin-solgun); font-size: 11.5px; }

/* ── Küçük resim şeridi ──────────────────────────────────────────────────── */

.serit {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 208px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--kenar);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: seritGir .26s var(--yumusak);
}
@keyframes seritGir { from { transform: translateX(-100%); } to { transform: none; } }

.serit-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 9px 11px 15px;
  border-bottom: 1px solid var(--kenar);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--metin-solgun);
}

.serit-liste {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}
.serit-liste::-webkit-scrollbar { width: 8px; }
.serit-liste::-webkit-scrollbar-thumb { background: rgba(32,36,52,.18); border-radius: 4px; }

.kucukresim {
  position: relative;
  padding: 0;
  border: 2px solid var(--kenar);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  transition: border-color .16s, transform .16s;
}
.kucukresim:hover { transform: translateY(-2px); }
.kucukresim.aktif { border-color: var(--vurgu); }
.kucukresim canvas,
.kucukresim img.kucukresim-gorsel { width: 100%; height: 100%; object-fit: cover; display: block; }
.kucukresim span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.72);
  font-size: 10px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Yakınlaştırma ───────────────────────────────────────────────────────── */

.zoom {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 10, 13, .96);
  display: flex;
  flex-direction: column;
}
.zoom-arac {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border-bottom: 1px solid var(--kenar);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--metin-solgun);
}
.zoom-tuval {
  flex: 1;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 18px;
}
.zoom-tuval canvas,
.zoom-tuval img {
  display: block;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Yükleniyor ──────────────────────────────────────────────────────────── */

.yukleme {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--zemin);
  transition: opacity .45s var(--yumusak);
}
.yukleme.bitti { opacity: 0; pointer-events: none; }
.yukleme-kutu { text-align: center; width: 230px; }

/* NDI marka halkasi: yay gercek yukleme yuzdesi kadar dolar, %100'de ortadaki
   cubuk lacivere donup yumusak bir snap yapar. Ayni cizim sekme faviconunda da
   doner (vendor/ndi-favicon-anim.js). */
.yukleme-halka {
  display: block;
  width: 116px;
  height: 116px;
  margin: 0 auto 24px;
}

.yukleme-baslik { margin: 0 0 14px; font-size: 13.5px; color: var(--metin-solgun); }
.yukleme-cubuk { height: 3px; border-radius: 2px; background: rgba(32,36,52,.10); overflow: hidden; }
.yukleme-cubuk i { display: block; height: 100%; width: 0; background: var(--vurgu); transition: width .25s; }
.yukleme-yuzde { margin: 9px 0 0; font-size: 11.5px; color: var(--metin-solgun); font-variant-numeric: tabular-nums; }

/* ── Hata ────────────────────────────────────────────────────────────────── */

.hata {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--zemin);
  padding: 24px;
}
.hata-kutu { max-width: 420px; text-align: center; }
.hata-kutu h2 { margin: 0 0 10px; font-size: 19px; }
.hata-kutu p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--metin-solgun); }

/* ── Teklif paneli ───────────────────────────────────────────────────────
   Katalogdan ayri bir katman: sayfalarin uzerine binmez, sagdan acilir ve
   kullanici bulundugu sayfayi kaybetmez. */

/* Kapali hal: kitabin sagindaki bos alanda duran kucuk kart.
   Yan okla cakismamasi icin sagdan bosluk birakilir. */
/* ── NDI marka katmani ───────────────────────────────────────────────────
   Panel, NDI Website ile ayni tasarim sistemini kullanir: tek palet, tek tip
   olcegi (Roboto), yarical yalnizca 4 (kucuk) ve 8 (buyuk). Katalog arayuzu
   koyu kalir; bu panel siteyle tutarli olsun diye acik temadir. */
.teklif {
  --ndi-blue: #77A954;
  --ndi-navy: #08284C;
  --ndi-body: #334155;
  --ndi-muted: #6b747c;
  --ndi-section: #f3f4f5;
  --ndi-card-tint: #eff5f5;
  --ndi-border: #e2e6e0;
  --r-sm: 4px;
  --r-lg: 8px;

  position: fixed;
  /* Konum ve boy app.js'ten gelir; kitabin sag kenarina yaslanir ve onunla
     ayni yuksekligi kaplar. Degiskenler yoksa eski (dar ekran) yerlesimi. */
  right: var(--panel-sag, 68px);
  top: var(--panel-ust, 50%);
  transform: var(--panel-cevir, translateY(-50%));
  z-index: 50;
  width: 296px;
  color: var(--ndi-body);
  font-family: 'Roboto', system-ui, Arial, sans-serif;
  height: var(--katalog-boy, auto);
  /* Geniş yerleşimde sınırı kitap belirler (kitap zaten ekrana sığacak şekilde
     hesaplanır); değişken yoksa eski viewport sınırı geçerli kalır. */
  max-height: var(--katalog-boy, calc(100vh - var(--ustbar-y) - var(--altbar-y) - 36px));
  overflow-y: auto;
  scrollbar-width: thin;
}
.teklif::-webkit-scrollbar { width: 6px; }
.teklif::-webkit-scrollbar-thumb { background: rgba(32,36,52,.18); border-radius: 3px; }

/* ── Sag sutun kartlari (NDI-catalog / right col) ─────────────────────── */

/* Sutun katalogun boyunu tam doldurur. Fark fotograf alanlarindan alinir:
   metin bloklari dogal boyunda kalir, gorseller object-fit: cover oldugu icin
   uzayip kisalirken bozulmaz. */
.sag-sutun {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.ndi-kart {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(32, 36, 51, .08);
  overflow: hidden;
}

/* Fotografli kartlar esnek: artan ya da eksilen boyu bunlar paylasir. */
.sag-sutun .ndi-kart:has(.ndi-kart-foto) { flex: 1 1 auto; }
.ndi-kart-govde { flex: 0 0 auto; }

.ndi-kart-quote { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ndi-kart-yazi { display: flex; flex-direction: column; gap: 4px; }
.ndi-kart-yazi strong { font-size: 16px; font-weight: 500; color: var(--ndi-navy); }
.ndi-kart-yazi span { font-size: 14px; color: var(--ndi-muted); }

.quote-dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  padding: 6px 18px 6px 12px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--ndi-navy);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.quote-dugme:hover { box-shadow: 0 8px 20px rgba(107, 117, 130, .28); transform: translateY(-1px); }
.quote-dugme img { display: block; filter: brightness(0) invert(1); }

/* İkincil eylem — Quote ile aynı ölçüde, ama sistemin outline biçiminde:
   iki koyu buton yan yana hangisinin asıl çağrı olduğunu belirsizleştiriyordu. */
.quote-dugme-ikincil {
  background: #fff;
  color: var(--ndi-navy);
  border: 1px solid var(--ndi-border);
}
.quote-dugme-ikincil:hover { background: var(--ndi-card-tint); box-shadow: 0 6px 16px rgba(107, 117, 130, .16); }
.quote-dugme-ikincil img { filter: none; opacity: .8; }

/* ── İletişim penceresi ──────────────────────────────────────────────────
   Uzman ve adres kartları buraya taşındı; sağ sütun tek karta indi. */

.iletisim-ortu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(32, 36, 52, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.iletisim-pencere {
  position: fixed;
  z-index: 71;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ndi-section);
  box-shadow: 0 24px 60px rgba(32, 36, 52, .34);
  font-family: 'Roboto', system-ui, Arial, sans-serif;
  color: var(--ndi-body);
}
.iletisim-baslik {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 14px 18px;
  background: #fff;
  border-bottom: 1px solid var(--ndi-border);
}
.iletisim-baslik strong { font-size: 16px; font-weight: 500; color: var(--ndi-navy); }
.iletisim-govde {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  scrollbar-width: thin;
}
/* Kartlar pencerede doğal boyunda durur; sağ sütundaki esneme kuralları
   burada geçerli değil. */
.iletisim-govde .ndi-kart { flex: 0 0 auto; }
.iletisim-govde .ndi-kart-foto { flex: 0 0 auto; }
.iletisim-govde .ndi-kart-foto-uzman { height: 170px; }
.iletisim-govde .ndi-kart-foto-ofis { height: 160px; }

.ndi-kart-foto { width: 100%; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.ndi-kart-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sabit yukseklikler artik yalnizca baslangic/dar ekran degeri: flex-basis. */
.ndi-kart-foto-uzman { flex-basis: 170px; min-height: 96px; }
.ndi-kart-foto-uzman img { object-position: center 22%; }
.ndi-kart-foto-ofis { flex-basis: 200px; min-height: 110px; }

.ndi-kart-govde { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.ndi-kart-govde-adres { gap: 12px; padding: 18px; }

.ndi-ustyazi {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .66px;
  color: var(--ndi-muted);
}
.ndi-ad { font-size: 16px; font-weight: 500; color: var(--ndi-navy); }
.ndi-unvan { font-size: 14px; color: var(--ndi-muted); }

.ndi-iletisim {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ndi-navy);
  text-decoration: none;
}
.ndi-iletisim img { display: block; flex: 0 0 auto; }
.ndi-iletisim:hover span { color: var(--ndi-blue); }

.ndi-adres { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ndi-navy); }
.ndi-adres img { display: block; flex: 0 0 auto; }
.ndi-yon-etiket { font-size: 12px; color: var(--ndi-muted); }

.ndi-yon { display: flex; gap: 8px; }
.ndi-yon-dugme {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--ndi-border);
  border-radius: var(--r-lg);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--ndi-navy);
  text-decoration: none;
  transition: background .15s;
}
.ndi-yon-dugme:hover { background: var(--ndi-card-tint); }
.ndi-yon-dugme img { display: block; flex: 0 0 auto; }

/* Form paneli acilinca sag sutun gizlenir */
.teklif.acik .sag-sutun { display: none; }

.teklif-govde { display: none; }

/* Acik hal: sag kenara yapisir, tam yukseklik panel olur */
/* ── Teklif formu ────────────────────────────────────────────────────────
   Bu blok bir düzenleme sırasında yanlışlıkla silinmişti; form biçimsiz
   kalıyor, girdiler 21 px'e iniyordu. Sürüm geçmişinden geri alındı. */
.teklif-baslik {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 14px 20px;
  border-bottom: 1px solid var(--ndi-border);
}
.teklif-baslik strong { display: block; font-size: 16px; color: var(--ndi-navy); }
.teklif-baslik span { display: block; margin-top: 3px; font-size: 12px; color: #6b7280; }
.teklif-baslik .ikon-dugme { color: #6b7280; }
.teklif-baslik .ikon-dugme:hover { background: var(--ndi-card-tint); color: var(--ndi-navy); }

.teklif-form { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 13px; }

.teklif-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: #6b7280;
}
.teklif-form label span { color: var(--ndi-blue); }

.teklif-form input,
.teklif-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--ndi-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ndi-body);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.teklif-form input:focus,
.teklif-form textarea:focus {
  outline: none;
  border-color: var(--ndi-blue);
  box-shadow: 0 0 0 3px rgba(0, 142, 214, .14);
}

/* Iki eylem yan yana: gonder birincil, PDF ikincil */
.teklif-eylem { display: flex; gap: 8px; margin-top: 4px; }
.teklif-eylem .dugme { flex: 1; padding: 11px 12px; font-size: 13px; }

.teklif-form .dugme-vurgu { background: var(--ndi-blue); color: #fff; }
.dugme-ikincil {
  background: #fff;
  color: var(--ndi-navy);
  border: 1px solid var(--ndi-border);
}
.dugme-ikincil:hover { background: var(--ndi-card-tint); }

/* ── Urun secici ─────────────────────────────────────────────────────────
   Part numarasi ya da urun adiyla aranir, secilenler etiket olarak listelenir.
   Urun listesi panel ilk acildiginda yuklenir; katalog acilisini yavaslatmaz. */

.urun-sec { display: flex; flex-direction: column; gap: 6px; }
.urun-sec > label { font-size: 12.5px; color: #6b7280; }

.urun-arama-sarmal { position: relative; }

.urun-arama-sarmal input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ndi-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ndi-body);
  font: inherit;
  font-size: 14px;
}
.urun-arama-sarmal input:focus {
  outline: none;
  border-color: var(--ndi-blue);
  box-shadow: 0 0 0 3px rgba(0, 142, 214, .14);
}

.urun-oneri {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 232px;
  overflow-y: auto;
  border: 1px solid var(--ndi-border);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .18);
}

.urun-oneri li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.35;
}
.urun-oneri li:hover,
.urun-oneri li[aria-selected="true"] { background: rgba(0, 142, 214, .10); }
.urun-oneri li strong { display: block; color: var(--ndi-navy); font-weight: 600; }
.urun-oneri li span { color: #6b7280; font-size: 11.5px; }
.urun-oneri li mark { background: transparent; color: var(--ndi-blue); font-weight: 600; }
.urun-oneri .urun-bos { color: #6b7280; cursor: default; }
.urun-oneri .urun-bos:hover { background: transparent; }

/* Secilen urunler: pill yerine satir listesi. Her satirda adet girilebildigi
   icin pill'e sigmiyordu; ayrica uzun part numaralari tek satirda daha okunur. */
.urun-secilen { display: flex; flex-direction: column; gap: 6px; }
.urun-secilen:empty { display: none; }

.urun-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  border: 1px solid var(--ndi-border);
  border-radius: var(--r-sm);
  background: var(--ndi-card-tint);
}
.urun-satir-kod {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ndi-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.urun-adet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 11px;
  color: #6b7280;
}
.urun-adet input {
  width: 54px;
  padding: 5px 6px;
  border: 1px solid var(--ndi-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ndi-navy);
  font: inherit;
  font-size: 12.5px;
  text-align: center;
}
.urun-adet input:focus {
  outline: none;
  border-color: var(--ndi-blue);
  box-shadow: 0 0 0 3px rgba(0, 142, 214, .14);
}
.urun-sil {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: #6b7280;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.urun-sil:hover { background: rgba(0, 142, 214, .14); color: var(--ndi-navy); }

/* Opsiyonel alan etiketi. */
.alan-not {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--ndi-muted);
}

/* Ek dosya seçici. Tarayıcının kendi "Dosya seç" düğmesi form biçimine
   uymuyordu; asıl input gizlenip etiket düğme gibi kullanılıyor. */
.ek-alan { display: flex; flex-direction: column; gap: 6px; }
.ek-alan > label:first-child { font-size: 12.5px; color: #6b7280; }
.ek-alan input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.ek-sec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 9px 14px;
  border: 1px dashed var(--ndi-border);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--ndi-navy);
  font-size: 13px;
  cursor: pointer;
}
.ek-sec:hover { background: var(--ndi-card-tint); border-color: var(--ndi-blue); }
.ek-alan input[type="file"]:focus-visible + .ek-sec {
  border-color: var(--ndi-blue);
  box-shadow: 0 0 0 3px rgba(0, 142, 214, .14);
}
.ek-sec svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}
.ek-ad { font-size: 12px; color: var(--ndi-body); word-break: break-all; }
.ek-ad.hata { color: #c0392b; }

.teklif-form button[type="submit"] { margin-top: 4px; width: 100%; }
.teklif-form button[disabled] { opacity: .55; cursor: default; }

.teklif-not { margin: 0; font-size: 11.5px; line-height: 1.6; color: #6b7280; }

.teklif-tesekkur { padding: 36px 24px 24px; text-align: center; }
.teklif-tesekkur strong { display: block; font-size: 17px; margin-bottom: 8px; color: var(--ndi-navy); }
.teklif-tesekkur p { margin: 0 0 20px; font-size: 13.5px; color: #6b7280; }
.teklif-tesekkur .dugme { width: 100%; margin-bottom: 8px; }
.teklif-tesekkur .dugme-vurgu { background: var(--ndi-blue); color: #fff; }

/* ── Ask the NDI Expert ──────────────────────────────────────────────────
   NDI Website tasarimindaki bilesenin birebir karsiligi: acik kart zemini,
   4 px kose, 32 px avatar, telefon ve alti cizili e-posta. */

/* Teklif penceresi — iletişim penceresiyle aynı biçim: ekranın ortasında,
   koyu örtünün üstünde. Eskiden sağdan açılan bir çekmeceydi; katalog artık
   ortalandığı için sağ kenardan gelen panel dengesiz duruyordu. */
.teklif.acik {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  height: auto;
  /* Iki sutunlu form icin genisletildi: kisa alanlar (e-posta/telefon,
     PO/ek) tek satirda yan yana durunca form belirgin sekilde kisaliyor. */
  width: 580px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(32, 36, 52, .34);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  animation: teklifGir .22s var(--yumusak);
  z-index: 71;
}

/* Cekmece ic duzeni: baslik ustte sabit, alanlar ortada kayar, eylemler altta
   sabit. Panelin tamamini kaydirmak, kisa formda altta genis bos bir beyazlik
   birakiyor ve "Send request" ekranin ortasinda asili kaliyordu. */
.teklif.acik .teklif-govde {
  /* Icerik kadar buyur, gerekirse kucul — ama once kendiliginden
     kucultup formu bosuna kaydirma. */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.teklif.acik .teklif-baslik { flex: 0 0 auto; }
.teklif.acik .teklif-form {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;

  /* Iki sutun: kisa alanlar esler, uzun alanlar satiri kaplar. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 16px;
  align-content: start;
}
/* Satiri kaplayanlar: urun secici, notlar, ek dosya ve alt bar. */
.teklif.acik .teklif-form > .urun-sec,
.teklif.acik .teklif-form > .ek-alan,
.teklif.acik .teklif-form > .teklif-alt,
.teklif.acik .teklif-form > label:has(textarea),
/* PO tek basina kalinca sagi bos bir hucre oluyor ve satir tirtikli
   gorunuyordu; satiri kaplamasi daha duzgun duruyor. */
.teklif.acik .teklif-form > label:has([name="poNo"]) { grid-column: 1 / -1; }

/* Ayni satirdaki alanlarin GIRDILERI hizali dursun. Etiket metinleri farkli
   uzunlukta ("PO number optional" gibi) oldugu icin ustten hizalamak yeterli
   degildi; hucreler dibe hizalanarak girdiler ayni cizgiye oturur. */
.teklif.acik .teklif-form > label { justify-content: flex-end; }

/* Dar ekranda iki sutun sikisir; tek sutuna doner. */
@media (max-width: 620px) {
  .teklif.acik { width: 420px; }
  .teklif.acik .teklif-form { grid-template-columns: 1fr; }
}
/* Alt bar. Çekmece döneminden kalan negatif kenar boşlukları ve sticky
   konumlandırma pencerede işe yaramıyordu: bar 450 px'e çıkıp 420 px'lik
   kutunun dışına taşıyor, altından da sarkıyordu. Pencere içeriğe göre
   boyutlandığı için bara akışta normal bir blok yeter. */
.teklif.acik .teklif-alt {
  margin: 0;
  padding: 14px 0 0;
  position: static;
  border-top: 1px solid var(--ndi-border);
}
.teklif.acik .teklif-alt .teklif-not { margin-bottom: 0; }
.teklif.acik .teklif-tetik { display: none; }
.teklif.acik .teklif-tesekkur { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Yalnızca opaklık animasyonlanır. transform'a dokunulursa, geçiş
   ilerlemediği durumlarda pencere ara konumda kalıp merkezden kayıyordu. */
@keyframes teklifGir {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sağ sütun kaldırıldı: .teklif artık yalnızca açılan teklif çekmecesidir.
   Kapalıyken hiç yer kaplamaz, katalog sayfanın ortasına oturur. */
.teklif:not(.acik) { display: none; }

/* ── Ürün kartı önizlemesi ───────────────────────────────────────────────
   Kartın üzerinde yarım saniye beklenince sayfanın kendi 2600 px'lik
   görselinden o kart kırpılıp büyütülür; ayrı görsel indirilmez.

   Çerçeve iki katmandır: dış kutu dolgu/gölge/köşe taşır, iç katman yalnızca
   görüntüyü. Tek katmanken kırpma kutunun kenarına dayanıyor ve ekran
   görüntüsü parçası gibi duruyordu. Sağ ok 14 px'te olduğu için 68'den başlar. */

.kart-onizleme {
  position: fixed;
  right: 68px;
  z-index: 60;
  padding: 9px;
  border-radius: 14px;
  background: var(--zemin-2);
  border: 1px solid var(--kenar);
  box-shadow:
    0 1px 2px rgba(32, 36, 52, .10),
    0 24px 56px rgba(32, 36, 52, .22);
  pointer-events: none;
  animation: onizlemeGir .16s ease-out;
}
.kart-onizleme.gizli { display: none !important; }

/* Karta bakan küçük uç: önizlemenin nereden geldiğini belli eder. */
.kart-onizleme::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 2px 0 0 0;
  background: var(--zemin-2);
  border-left: 1px solid var(--kenar);
  border-top: 1px solid var(--kenar);
  transform: translateY(-50%) rotate(-45deg);
}

.kart-onizleme-ic {
  display: block;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-color: #fff;
  /* Kirpilan alanin kenarini belirginlestirir; kart zemini beyaz oldugu icin
     cerceve olmadan nerede bittigi anlasilmiyordu. */
  box-shadow: inset 0 0 0 1px rgba(32, 36, 52, .10);
}

/* Yalnizca opaklik: konum animasyonlari bu projede birkac kez ara degerde
   donup ogeyi yanlis yerde biraktigi icin transform kullanilmiyor. */
@keyframes onizlemeGir { from { opacity: 0; } to { opacity: 1; } }

/* Dar ekranda yer yok; dokunmatikte zaten hover kavramı da yok. */
@media (max-width: 1180px) {
  .kart-onizleme { display: none !important; }
}

/* ── Bildirim ────────────────────────────────────────────────────────────── */

.bildirim {
  position: fixed;
  left: 50%;
  bottom: calc(var(--altbar-y) + 22px);
  z-index: 70;
  transform: translate(-50%, 12px);
  padding: 9px 17px;
  border-radius: 8px;
  background: var(--metin);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.bildirim.gorunur { opacity: 1; transform: translate(-50%, 0); }


/* Tek satir sigmazsa once etiket, sonra dugme yazilari kalkar; telefonda gruplar alt alta. */
@media (max-width: 1100px) { .arac-etiket { display: none; } }
@media (max-width: 960px) { .arac-dugme span { display: none; } }
@media (max-width: 820px) { .arac-cubugu { flex-wrap: wrap; } }

/* Arayüzü gizle modu */
body.arayuz-gizli .arac-cubugu { opacity: 0; pointer-events: none; transform: translate(-12px, -50%); }
@media (max-width: 820px) {
  body.arayuz-gizli .arac-cubugu { transform: translateY(12px); }
}


/* MOBIL-YAMA */
/* ── Telefon + tablet ─────────────────────────────────────────────────────
   Eski sag sutun icin ayrilan 372 px'lik pay kaldirildi: 1180 px altinda
   yalnizca oklar icin iki yanda 66 px kalir. Telefonda (<=820) oklar gizlenir
   (sayfa kaydirarak cevrilir), kenarlar 8 px'e iner ve arac cubugu tek satirlik
   bir alt bara donusur. */
@media (max-width: 1180px) { :root { --sag-alan: 66px; } }

#btnLinkler { position: relative; }
.link-rozet {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--vurgu); color: #fff; font-size: 10px; font-weight: 600;
  line-height: 17px; text-align: center; pointer-events: none;
}
@media (hover: hover) and (min-width: 1181px) { #btnLinkler { display: none; } }

.link-panel {
  position: fixed; z-index: 95; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(560px, 100vw); max-height: 78vh; display: flex; flex-direction: column;
  background: var(--zemin-2); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform .28s var(--yumusak), opacity .2s;
}
.link-panel.gizli { transform: translate(-50%, 104%); opacity: 0; pointer-events: none; }
#linkPanelOrtu { z-index: 94; }
.lp-ust { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 18px; }
.lp-ust strong { font-size: 16px; font-weight: 600; color: var(--metin); }
.lp-liste { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px 18px; }
.lp-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.lp-kart { display: block; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--kenar); }
.lp-kart:active { transform: scale(.98); }
.lp-gorsel { display: block; width: 100%; background-repeat: no-repeat; }
.lp-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 14px; margin-bottom: 8px; border-radius: 12px;
  background: #fff; border: 1px solid var(--kenar); color: var(--metin);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.lp-satir svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--vurgu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-ara { margin: 6px 2px 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-solgun); }
.lp-bos { color: var(--metin-solgun); font-size: 14px; padding: 8px 4px 20px; }

@media (max-width: 820px) {
  :root { --arac-alan: 8px; --sag-alan: 8px; --arac-boy: 76px; }
  .ok { display: none; }
  .arac-cubugu {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    flex-wrap: nowrap; gap: 4px; max-width: calc(100vw - 12px);
  }
  .arac-grup, .arac-grup-cagri { min-height: 48px; padding: 3px; gap: 1px; }
  #btnYazdir, #btnTamEkran, #btnBasaDon, #btnSite { display: none; }
  .arac-cubugu .ikon-dugme { width: 40px; height: 40px; }
  .arac-dugme { padding: 0 10px; height: 40px; }
  .sayac-girdi { width: 38px; }
}