/* sayfa.css — YALNIZ KABUK (üst bar · alt bar) ve KURUMSAL METİN sayfaları
   ────────────────────────────────────────────────────────────────────────────
   🔴 12.09.2026 · BU DOSYA KÜÇÜLTÜLDÜ. Önceki hâlinde ilaç sayfası için KENDİ yazdığım
   bir tasarım vardı (başlık, kart, tablo, tipografi). Kullanıcı iki kez "tasarım kötü /
   komple değişmiş" dedi ve haklıydı: araya benim tasarım kararım giriyordu.
   ⟹ İlaç / etken madde / kategori / A-Z sayfalarının TÜM görünümü artık `spa.css`ten gelir
   (index.html'in <style> bloğunun otomatik kopyası — `build_spa_css.js`). Tasarım kararı
   tek yerde: SPA'nın kendisi.
   Bu dosyada YALNIZ şunlar kalır:
     · statik sayfaya özgü kabuk: üst bar (marka + arama formu + gezinme) ve alt bilgi
     · kurumsal METİN sayfaları (`body.kurumsal`) — SPA'da karşılığı olmayan düz metin düzeni
   ⚠ Buraya ilaç sayfası kuralı YAZILMAZ. Görünüm değişecekse index.html'de değişir. */

/* ── KABUK: üst bar ────────────────────────────────────────────────────────── */
.ust {
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ust .marka {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em; text-decoration: none;
  background: linear-gradient(100deg, var(--accent) 0%, #a86bff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-flex; align-items: center; min-height: 44px;   /* dokunma hedefi 44 px */
}
/* statik sayfada canlı arama yok (katalog 7 MB): form ana sayfaya ?q= ile gider */
.ust .ara { display: flex; gap: 6px; width: 100%; }
/* 🔑 16.09.2026 — CANLI ÖNERİ KUTUSU. `.autocomplete` `position:absolute` (spa.css'ten
   gelir, SPA ile aynı görünüm) → bir `position:relative` kaba ihtiyacı var. Kabuk artık
   formu `.ara-kap` içine sarıyor; flex ölçüleri formdan KABA taşındı ki öneri kutusu
   inputun tam altına ve tam genişliğine otursun. */
.ust .ara-kap { position: relative; flex: 1 1 240px; min-width: 0; order: 3; }
.ust .ara input {
  flex: 1; min-width: 0; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 16px; padding: 0 14px; font-family: inherit;
}
.ust .ara input::placeholder { color: var(--muted); }
.ust .ara input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ust .ara button {
  min-height: 44px; padding: 0 18px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: var(--accent); color: #06111c; border: none; font-weight: 600; font-size: 15px;
}
/* ── 🔴 16.09.2026 — SPA'NIN ÇIPLAK `nav` KURALI STATİK SAYFALARA SIZIYORDU ──────
   `spa.css`te SPA'nın üst çubuğu ELEMENT seçicisiyle yazılmış:
     nav { position: sticky; top: 0; z-index: 100; padding: 18px 40px;
           border-bottom: 1px solid var(--border); background: rgba(10,15,30,0.95);
           backdrop-filter: blur(10px); justify-content: space-between; }
   `spa.css` SPA'nın TAM stili olduğu için (alt küme yazmama kararı, 12.09) bu kural
   statik sayfadaki HER `<nav>`e de vuruyordu:
     · `.ust nav` → gezinme linklerinin altında AÇIKLANAMAYAN İKİNCİ ÇİZGİ + 40px dolgu
       (kullanıcı yakaladı: *"altında da bir çizgi var"*)
     · `nav.ilgili` (etken madde + A-Z sayfaları) → hiç stili yoktu, kuralı TAMAMEN
       devralıyordu: sayfa ortasında yapışkan, koyu zeminli, çerçeveli bir kutu.
   ⟹ SPA'ya DOKUNULMADI (onun navbar'ı bu kurala muhtaç). Statik kabuk kendi
      navlarını nötrler; `.ust nav` zaten daha spesifik, tek eksik SIFIRLAMAYDI. */
.ust nav, main nav, .container nav {
  position: static; z-index: auto; padding: 0; background: none;
  backdrop-filter: none; border-bottom: none; justify-content: flex-start;
}
.ust nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
/* İlgili sayfalar / fihrist navı — SPA'da karşılığı yok, stilini burada alır. */
main nav.ilgili, .container nav.ilgili {
  display: block; margin: 18px 0 4px; font-size: 13px; line-height: 1.9; color: var(--muted);
}
main nav.ilgili b, .container nav.ilgili b { color: var(--text); font-weight: 600; margin-right: 4px; }
/* 🔴 17.09.2026 (⑥) — ÜRÜN SAYFASININ "İlaç dizininde" NAVI GERÇEK FLEX SATIRIDIR.
   Yukarıdaki kural `.ilgili`yi `display:block` + `line-height:1.9`e SABİTLİYOR (SPA'nın
   global `nav` kuralını nötrlemek için, 12.09). O blokta linkler düz metin gibi akar ve
   aralarına `" · "` konur. Ürün sayfasındaki blok ise 1b (`.varyant`) gibi PILL SATIRI:
   390px'te GÖZLE ölçüldü (kural 59) — block kabında etiket ile ilk pill aynı satırda,
   ikinci pill altta kalıyor; metin ayracı kaldırılınca da pill'ler BİRBİRİNE YAPIŞIYOR.
   ⟹ İkinci sınıf yalnız bu bloğu flex yapar; öteki `.ilgili` navları (etken madde ·
     kategori · A-Z fihristi) AYNEN kalır. Seçici özgüllüğü yukarıdakiyle eşit (0,2,1)
     ve SONRA geldiği için kazanır. Yeni tasarım dili İCAT EDİLMEDİ: ölçüler `.varyant`ın. */
main nav.ilgili.dizin-nav, .container nav.ilgili.dizin-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.4;
}
main nav.ilgili.dizin-nav b, .container nav.ilgili.dizin-nav b { margin-right: 0; }
/* 🔴 17.09.2026 — DAR EKRANDA ETİKET KENDİ SATIRINDA (kullanıcı, telefon ekran
   görüntüsüyle): *"alt alta olması daha doğru değil mi, KÜB/KT'de olduğu gibi"*.
   Etiket inline kalınca ilk pill onun yanına, ikincisi alt satıra düşüyor ve blok
   TIRTIKLI görünüyor. `flex-basis: 100%` etiketi tam satır yapar ⟹ pill'ler hep
   soldan hizalı, tıpkı `.kub-links` (Resmî belgeler) kartındaki gibi.
   ⚠ Yalnız ≤699px: masaüstünde iki pill etiketle aynı satıra rahat sığıyor ve
     `.varyant` (1b) ile aynı hizada duruyor. */
@media (max-width: 699px) {
  main nav.ilgili.dizin-nav b, .container nav.ilgili.dizin-nav b {
    flex: 0 0 100%; margin-bottom: 2px;
  }
}
.ust nav a {
  color: var(--muted); text-decoration: none; font-size: 14px;
  padding: 11px 10px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px;
}
.ust nav a:hover, .ust nav a:focus-visible { color: var(--text); background: var(--surface); }

/* ── KART İÇİ GİRİŞ PARAGRAFI ────────────────────────────── */
/* 🔴 16.09.2026 — `spa.css`in ilk kuralı `* { margin: 0 }` olduğu için kart içindeki
   giriş cümlesi listenin ilk satırına YAPIŞIK çiziliyordu (kullanıcı ekran görüntüsüyle
   yakaladı). Boyut/renk `.section-title` ve `.m-firm` jetonlarından türer — yeni bir
   tipografi dili YAZILMADI; yalnız boşluk ve ayraç verilir.
   ⚠ SPA bu paragrafı hiç basmaz (`giris` yalnız statikte dolu) → kural burada durur. */
.section-card .kart-giris {
  margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 13.5px; line-height: 1.65;
}
.section-card .kart-giris strong { color: var(--text); font-weight: 600; }

/* ── KABUK: alt bilgi — 17.10.2026: stil index.html <style>a TAŞINDI (spa.css üzerinden ana sayfa + statik sayfalar AYNI kural; tek kaynak). */

/* ── KURUMSAL METİN SAYFALARI (yalnız body.kurumsal) ───────────────────────── */
/* SPA'da karşılığı yok: düz okuma metni. İlaç sayfalarına SIZMASIN diye gövde sınıfına bağlı. */
body.kurumsal main { line-height: 1.65; }
body.kurumsal h1 {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 27px; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 6px;
}
body.kurumsal .ozet { color: var(--muted); font-size: 15.5px; margin-bottom: 26px; }
body.kurumsal h2 {
  font-size: 19px; letter-spacing: -0.01em; margin: 30px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
body.kurumsal h2:first-of-type { border-top: none; padding-top: 0; }
body.kurumsal h3 { font-size: 16px; margin: 20px 0 6px; }
body.kurumsal p { margin-bottom: 13px; max-width: 68ch; }
body.kurumsal ul, body.kurumsal ol { margin: 0 0 14px 20px; max-width: 68ch; }
body.kurumsal li { margin-bottom: 7px; }
body.kurumsal a { color: var(--accent); }
body.kurumsal strong { color: #fff; font-weight: 600; }
body.kurumsal table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px;
  display: block; overflow-x: auto;
}
body.kurumsal th, body.kurumsal td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top;
}
body.kurumsal th {
  color: var(--muted); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
body.kurumsal .kutu {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 15px 17px; margin: 18px 0;
}
body.kurumsal .kutu.uyari { border-left-color: #ffd740; }
body.kurumsal .kutu p:last-child { margin-bottom: 0; }
body.kurumsal .eposta {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 16px; font-size: 16px; text-decoration: none; margin: 4px 0;
}

/* ── STATİK SAYFAYA ÖZGÜ KÜÇÜK ÖĞELER ──────────────────────────────────────
   Bunların SPA'da karşılığı YOK (SPA'da bu bilgiler ya JS ile açılıyor ya hiç yok):
   varyant/ilgili link satırları · künye satırı · kaynak notu · KÜB alıntı bloğu.
   ⚠ Yeni bir tasarım dili DEĞİL: SPA'nın kendi değişkenleri ve ölçüleriyle yazıldı
   (yüzey/kenarlık/yarıçap), böylece sayfanın geri kalanıyla aynı görünür. */
.varyant, .ilgili {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 18px; font-size: 13px; color: var(--muted);
}
.varyant b, .ilgili b { color: var(--muted); font-weight: 600; margin-right: 2px; }
/* 🔴 17.09.2026 — 1b ARTIK KART İÇİNDE. `.varyant`ın kendi `margin: 14px 0 18px`ı
   kartın dolgusuna EKLENİP üstte/altta çift boşluk yapıyordu. Kart zaten dolgu veriyor.
   (Aynı desen `.section-card > .kub-links { margin-left: 0 }` ile daha önce kurulmuştu.) */
.section-card > .varyant { margin: 0; }
/* Uzun etiketli pill dar ekranı aşmasın (320px'te yatay taşma ölçüldü). */
.varyant a, .ilgili a { max-width: 100%; overflow-wrap: anywhere; }
.varyant a, .ilgili a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px;
  background: rgba(0, 212, 255, 0.07); border: 1px solid rgba(0, 212, 255, 0.28);
  border-radius: 11px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.varyant a:hover, .ilgili a:hover { background: rgba(0, 212, 255, 0.14); }
/* 🔑 17.09.2026 (1b) — KALABALIK AİLELERDE DEVAMI. İlk 12 görünür, gerisi `<details>`
   içinde. NATİF: JS gerektirmez ⟹ JS kapalıyken de açılır (fail-open). İç kaydırma YOK.
   Açılınca da AYNI pill dizilimi sürsün diye kendisi de flex/wrap. */
/* 🔴 17.09.2026 — `display:flex` VERİLMEZ. `<details>`e flex verilince tarayıcının
   NATİF GİZLEMESİ bozuluyor: tüm çocuklar flex öğesi olup kapalıyken de çiziliyordu
   (canlıda ölçüldü: açmadan 20 linkin 20'si görünür). Kapsayıcı blok kalır; açılan
   linkler İÇERİDEKİ `.varyant-ek` ile dizilir. */
/* 🔴 17.09.2026 — `<details>`E `display` VERİLMEZ (üçüncü denemede ölçümle bulundu).
   Chromium'da details'in `display`'ini değiştirmek (flex/inline-block) NATİF AÇILIR
   DAVRANIŞINI DEVRE DIŞI BIRAKIYOR: kapalıyken içerik yine çiziliyor
   (canlıda ölçüldü: open=false iken `.varyant-ek` display:block, yükseklik 320px).
   Varsayılan `display:block` KORUNUR; details, `.varyant` flex kabının öğesi olarak
   zaten satıra girer. Yalnız display DIŞI özellikler verilir. */
/* 🔴 17.09.2026 (DÖRDÜNCÜ TUR) — `display: contents` KABUL EDİLDİ, ÖLÇÜMLE.
   Yukarıdaki iki not `flex` ve `inline-block` içindir ve GEÇERLİDİR; `contents` farklı
   bir şeydir: details'in KUTUSUNU kaldırır, çocukları `.varyant` flex akışına KATAR.
   NEDEN: kullanıcı yakaladı — *"artı sekiz nerede duruyor"*. Ölçüldü (Polifleks, 960px):
   buton KAPALIYKEN satır içinde (sol 546) ama AÇILINCA details 79px→469px şişip alt
   satıra atlıyordu (sol 72) ⟹ TIKLADIĞIN ANDA BUTON YER DEĞİŞTİRİYORDU.
   `contents` ile buton sabit: (547,500) → (547,500).
   🧪 NATİF AÇILMA GERÇEK TIKLAMAYLA SINANDI (JS ile `open=true` DEĞİL — o, kusuru
      gizlerdi): kapalı 0 görünür → tık → 8 görünür → tık → 0 görünür. Kapalıyken
      `.varyant-ek` gizli kalıyor, taşma 0, `summary` 36px (mobilde 40px). */
.varyant-devam { display: contents; }
/* 🔴 GİZLEME UA DAVRANIŞINA BIRAKILMAZ, AÇIKÇA YAZILIR. Ölçüldü: bu ortamdaki Chrome
   (153) kapalı `<details>` içeriğini yine çiziyor — hiçbir site CSS'i olmayan BOŞ
   iframe'de bile (19px). Kural 65 disiplini: davranışını ölçemediğim bir mekanizmaya
   güvenilmez. Bu satır her tarayıcıda deterministik sonuç verir.
   ⚠ `details`in KENDİ `display`'ine dokunulmaz (ona dokunmak natif açılmayı bozuyor). */
.varyant-devam:not([open]) > .varyant-ek { display: none; }
/* 🔴 17.09.2026 — `display` YALNIZ `[open]` İKEN VERİLİR. Koşulsuz `display:flex`
   yazmak, tarayıcının `details:not([open]) > *:not(summary){display:none}` UA kuralını
   EZİYOR (yazar stili UA'yı yener) ⟹ kapalıyken de 20 linkin 20'si çiziliyordu
   (canlıda ölçüldü). Kapalıyken hiçbir display verilmez, natif gizleme çalışır. */
/* 🔑 AÇILAN LİNKLER AYRI BİR KUTU DEĞİL, AYNI AKIŞ. `contents` ile pill'ler doğrudan
   `.varyant`ın öğesi olur ⟹ öteki pill'lerle AYNI sarmaya girer, `gap` boşluğu verir.
   (Ölçüldü: kendi flex kutusu olunca ilk ek pill 552'ye, `contents` ile 544'e —
   yani araya ikinci bir dikey boşluk girmiyor.)
   ⚠ Kapalı hâlin `display: none` kuralı YUKARIDA ve bu kuraldan ÖNCE gelir; `[open]`
     şartı sayesinde ikisi çakışmaz. */
.varyant-devam[open] > .varyant-ek { display: contents; }
.varyant-devam > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 13px; border-radius: 11px; font-size: 13px; font-weight: 600;
  color: var(--muted); border: 1px dashed var(--border); background: var(--bg);
}
.varyant-devam > summary::-webkit-details-marker { display: none; }
.varyant-devam > summary:hover { color: var(--accent); border-color: var(--accent); }
/* Dar ekranda dokunma hedefi (mevcut 36px sınırın altındaydı). */
@media (max-width: 699px) {
  .varyant a, .ilgili a, .varyant-devam > summary { min-height: 40px; }
}

/* künye satırı (etken madde / kategori sayfalarında) */
.kunye { color: var(--muted); font-size: 13.5px; margin: 6px 0 16px; }
.kunye a { color: var(--accent); text-decoration: none; }

/* KÜB alıntısı — SPA'daki .kub-list li ile aynı kutu dili */
.katlanabilir {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 13px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.55;
}
.kaynak-mini { color: var(--muted); font-size: 11px; margin-left: 6px; }
/* 🔑 17.09.2026 — BELGE PILL'LERİNİN ALTINDAKİ AÇIKLAMA (kullanıcı: "üst tarafa çok
   yakın olmuş"). Ölçüldü: link ile not arası 0px, üstelik `.kaynak-mini` satır-içi
   kullanım için 6px sol girinti taşıyor — blok olarak altta dururken hizayı kaydırıyordu.
   Yalnız BU BAĞLAMDA (pill'lerin hemen ardılı) düzeltilir; satır-içi kullanımlar AYNEN kalır. */
.kub-links + .kaynak-mini { display: block; margin: 10px 0 0; }
/* `.kub-links` satır-içi kullanım için 6px sol girinti taşır; kartın doğrudan çocuğu
   olduğunda bu girinti pill'leri açıklama satırından 6px kaydırıyordu (masaüstünde
   ölçüldü: not 230px, link 236px). Yalnız bu bağlamda sıfırlanır. */
.section-card > .kub-links { margin-left: 0; }
.not { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 10px 0 16px; }

/* ── A-Z / kategori fihristi (SPA'da karşılığı yok) ────────────────────────── */
.fihrist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 20px; }
.fihrist a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
}
.fihrist a:hover { border-color: var(--accent); color: var(--accent); }

/* 🔑 17.09.2026 — MOBİL ÜST BLOK (kullanıcı: "tam ortalanmış değil, araları çok açık").
   `.ust nav` masaüstünde `margin-left:auto` ile SAĞA yaslanır; mobilde kendi satırına
   düşünce bu yaslama linkleri ORTALAMIYOR (ölçüldü @390px: solda 53px, sağda 33px).
   ⟹ Dar ekranda nav tam genişlik + ortalı; dikey boşluklar da daraltıldı
   (ölçüldü: ilk kartın üstü 205px → daha yukarı). Dokunma hedefi 44px KORUNUR. */
@media (max-width: 699px) {
  .ust { padding: 10px 14px; gap: 6px; justify-content: center; }
  .ust .marka { min-height: 40px; }
  .ust nav { width: 100%; margin-left: 0; justify-content: center; gap: 2px; }
  .ust nav a { padding: 8px 9px; min-height: 40px; }
}
/* 17.10.2026: kurumsal tablolar mobilde KART — sütunlar kendi kaydırma kutusunda kesik görünüyordu (gizlilik 4 sütun · veri kaynakları 3).
   Hücre sütun adını `data-label`dan alır (build_kurumsal.js `tabloEtiketle`); başlık satırı `tr.bas` gizlenir. Masaüstü değişmez. */
@media (max-width: 699px) {
  body.kurumsal table, body.kurumsal tbody, body.kurumsal tr, body.kurumsal td { display: block; }
  body.kurumsal table { overflow: visible; }
  body.kurumsal tr.bas { display: none; }
  body.kurumsal tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  body.kurumsal td { border-bottom: none; padding: 3px 0; }
  body.kurumsal td[data-label]::before {
    content: attr(data-label); display: block; color: var(--muted); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px;
  }
}
@media (min-width: 700px) {
  .ust { padding: 16px 32px; }
  body.kurumsal h1 { font-size: 33px; }
}

/* ── ⑦ DİZİN SAYFALARI: FİLTRE + HİZALI LİSTE (17.09.2026) ──────────────────
   NEDEN: kullanıcı *"bu tür sayfaların düzeni de çok bozuk"*. Ölçüldü —
   `/ilaclar/a/` 931 ilaç / **26.074 px**, tek bir sarma `ul.fihrist` içinde
   TIRTIKLI pill'ler (bir satırda 1, ötekinde 2); `/kategori/alerji-ilaclari/`
   135 ilaç / 11.892 px, 24 etken madde grubu TEK dev kartta, atlama yolu yok.
   ⚠ YENİ TASARIM DİLİ İCAT EDİLMEDİ: renk/kenarlık/yarıçap/dolgu değerleri
     `.section-card` · `.varyant a` · `.ust input` gibi MEVCUT ögelerden alındı. */

/* Filtre kutusu — JS yoksa üretici `hidden` basar, hiç görünmez (ölü kutu olmaz). */
.dizin-filtre { margin: 14px 0 18px; }
.dizin-filtre[hidden] { display: none; }
.dizin-filtre-girdi {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-size: 15px; font-family: inherit;
}
.dizin-filtre-girdi::placeholder { color: var(--muted); }
.dizin-filtre-girdi:focus { outline: none; border-color: var(--accent); }
.dizin-filtre-bos { margin: 10px 2px 0; color: var(--muted); font-size: 13.5px; }

/* Hizalı liste — pill çorbasının yerine. Sütun sayısı genişlikle artar; her satır
   AYNI yükseklikte başlar ⟹ tırtıklı görünüm biter. */
.dizin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dizin-liste > li { margin: 0; min-width: 0; }
.dizin-liste > li > a {
  display: block; padding: 10px 12px; min-height: 44px; box-sizing: border-box;
  border-radius: 10px; color: var(--accent); text-decoration: none;
  font-size: 14px; line-height: 1.6; overflow-wrap: anywhere;
  border: 1px solid transparent;
}
.dizin-liste > li > a:hover { background: rgba(0, 212, 255, 0.08); border-color: var(--border); }

/* Grup başlığı (A-Z sayfasında ikinci harf) — `.section-title` jetonundan türetildi
   ama daha küçük; yeni renk/ölçü icat edilmedi. */
.dizin-grup { margin: 0 0 6px; }
.dizin-grup + .dizin-grup { margin-top: 18px; }
.dizin-grup-bas {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}

@media (min-width: 700px) {
  .dizin-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; }
}
/* 🔴 17.09.2026 — DAR EKRANDA DA İKİ SÜTUN + SIK SATIR. İlk sürüm tek sütun/44px idi
   ve sayfayı UZATIYORDU: ölçüldü @390px **26.074 px → 45.338 px** (%74 gerileme!).
   Pill çorbası kompakttı çünkü satır içi sarıyordu; hizalı liste okunaklı ama uzun.
   Ölçülen seçenekler (390px): 1 sütun/44px 45.338 · 2 sütun/44px 28.408 ·
   1 sütun/40px 41.242 · **2 sütun/40px 23.051** ⟹ sonuncusu ORİJİNALDEN de kısa.
   Doğrulandı 320/360/390: taşma 0 · aşan öge 0 · dokunma hedefi <40px olan 0 · kırpma 0
   (320px'te bile 25.449 px). 40px, kural 59'un mobil dokunma hedefi tabanıdır. */
@media (max-width: 699px) {
  .dizin-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .dizin-liste > li > a {
    min-height: 40px; padding: 7px 8px; line-height: 1.3; font-size: 13px;
  }
}

/* ── DOKUNMA HEDEFİ: MUADİL/LİSTE TABLOSU (17.09.2026) ──────────────────────
   Ölçüldü @390px: kategori sayfasında **152 bağ 40 px'in altında** (`a.m-name` 18 px,
   grup başlığı bağı 14 px). Bu kusur BENİM değişikliğimden ÖNCE de vardı — tablo
   `spa.css`ten gelen ortak bileşen — ama kural 59'un 40 px tabanı bu sayfalar için de
   geçerli ve kullanıcı tam bu sayfaların düzeni için "çok bozuk" dedi.
   🔑 YÜKSEKLİK BÜYÜTÜLMEDİ: satır zaten 70 px. Bağı `min-height` ile şişirmek sayfayı
      12.797 → 16.171 px yapıyordu (%26 uzama, antibiyotiklerde ~97.000 px).
      Yerine ÖRTÜ: bağ kendi hücresini kaplar, kutu ölçüsü değişmez.
   🧪 Doğrulandı (isabet sınaması): satırın ÜSTÜ · ORTASI · ALTI — üçünde de
      `elementFromPoint` → `a.m-name`. Gerçek dokunma alanı 70 px, sayfa +409 px.
   ⚠ Örtü YALNIZ ad hücresini kaplar; fiyat ve SGK hücreleri kendi hücrelerinde kalır. */
.muadil-table td { position: relative; }
.muadil-table a.m-name::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 699px) {
  .grup-th a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ── KATEGORİ: KATLANIR "ETKEN MADDEYE GÖRE ATLA" ŞERİDİ (17.09.2026) ───────
   🔴 BENİM ÜRETTİĞİM GERİLEMENİN DÜZELTMESİ. Şerit açık başlayınca ölçüldü @390px:
      alerji 844 px / 17 satır · antibiyotikler 2.093 px / 42 satır ·
      **serum 4.190 px / 57 satır** ⟹ liste y=4587'de başlıyordu (beş ekran pill).
      Etken madde adları uzun olduğu için pill'ler tırtıklı sarıyordu — A-Z'den
      temizlediğim "pill çorbası"nın aynısı.
   ⟹ Şerit KATLANIR; kapalıyken tek satır. Ölçüler `.varyant-devam > summary`den
     alındı (yeni tasarım dili icat edilmedi).
   ⚠ GİZLEME AÇIKÇA YAZILIR: bu ortamdaki Chrome kapalı `<details>` içeriğini yine
     çiziyor (1b turunda boş iframe'de bile ölçüldü) — UA davranışına güvenilmez. */
.atlama { margin: 0 0 18px; }
.atlama:not([open]) > .fihrist { display: none; }
.atlama > .fihrist { margin-top: 10px; }
.atlama > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 14px; border-radius: 11px; font-size: 13px; font-weight: 600;
  color: var(--muted); border: 1px dashed var(--border); background: var(--bg);
}
.atlama > summary::-webkit-details-marker { display: none; }
.atlama > summary:hover { color: var(--accent); border-color: var(--accent); }

/* ── DİZİN TABLOSU: DAR EKRANDA SÜTUN GENİŞLİĞİ SABİT (17.09.2026) ──────────
   🔴 KULLANICI YAKALADI ("kategori sayfaları düzensiz"). Ölçüldü, serum kategorisi
      @390px: tablo **664 px** istiyor, kart 345 px ⟹ **323 px yatay taşma**; fiyat ve
      SGK sütunları ekranın dışında ve kaydırma kabı YOK ⟹ BİLGİ ULAŞILAMAZ.
      Sebep `table-layout: auto`: ad sütununun min-content genişliği kabı aşıyor.
   ⚠ Taramam bunu KAÇIRDI: alerji ve antibiyotik sayfalarını taradım, serumu taramadım.
      En kötü vaka EN ÇOK ÜRÜNLÜ sayfa değil, EN UZUN ADLI sayfaymış.
   🔒 `overflow-x: auto` ile kaydırma kabı DA yapılmadı: kullanıcı şartı "semptomu
      gizleme, genişlik hesabını düzelt" — sütunlar gerçekten sığdırılıyor.
   ⚠ `<colgroup>` OLMADAN çalışmaz: `fixed` genişliği İLK SATIRDAN okur, o da
     `colspan=3` grup başlığıdır ⟹ sütunlar 102/102/102'ye bölünüyordu (ölçüldü).
   ⚠ Kural YALNIZ `.dizin-tablo`ya: ürün sayfasındaki muadil tablosu dokunulmadan kalır. */
@media (max-width: 699px) {
  .dizin-tablo { table-layout: fixed; }
  .dizin-tablo col.c-ad { width: 58%; }
  .dizin-tablo col.c-fiyat { width: 27%; }
  .dizin-tablo col.c-sgk { width: 15%; }
  .dizin-tablo td, .dizin-tablo th { overflow-wrap: anywhere; }
}
/* `.fihrist` bir flex kabı; `<li>` öğesinin varsayılan `min-width:auto`u uzun içerikte
   kabı aşmasına yol açar (`.grid-2 > *` ile aynı sınıf kusur). */
.fihrist > li { min-width: 0; }

/* ── ⑦ DİZİN SAYFASI BAŞLIK BLOĞU (17.09.2026) ──────────────────────────────
   🔴 KULLANICI: *"düzgün premium bir tasarım lazım tüm bu sayfalar için"*.
   Eski hâlde üç dizin sayfasının da başı dağınıktı: nerede olduğunu söyleyen kırıntı
   yoktu, sayılar tek satıra sıkışmıştı ve kart başlığı H1'i tekrar ediyordu.
   🔒 Yeni tasarım dili İCAT EDİLMEDİ: rozet ölçüleri `.varyant a`dan (yarıçap 11,
   13px punto, ince kenarlık), renkler mevcut değişkenlerden. */

/* Kırıntı — nerede olduğunu söyler, tıklanır. */
.kirinti {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0 0 10px; font-size: 12.5px; color: var(--muted);
}
/* Kırıntı bağı dokunma hedefi: metin 16px'ti (ölçüldü, mobilde tek kalan <40px bağ).
   Yükseklik SATIR YÜKSEKLİĞİYLE değil, dikey dolguyla verilir ki kırıntı şeridi
   büyümesin; negatif marj hizayı korur. */
.kirinti a {
  color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 40px;
  margin: -12px 0; padding: 0 2px;
}
.kirinti a:hover { color: var(--accent); }
.kirinti i { font-style: normal; opacity: 0.5; padding: 0 2px; }
.kirinti span[aria-current] { color: var(--text); }

/* Sayaç rozetleri — "318 ilaç · 60 etken madde · ATC B05" */
.sayac-serit { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.sayac {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 11px; font-size: 12.5px; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--border);
}
.sayac b { color: var(--text); font-weight: 700; font-size: 13px; }

/* Kaynak satırı — resmî sınıf adı; kendi cümlemiz DEĞİL. */
main > p.kunye { margin: 0 0 16px; line-height: 1.55; }

/* Grup başlığı: uzun etken madde adı 2 satıra kırpılır, SAYI kırpmanın dışında.
   🔴 Ölçüldü (serum kategorisi @390px): 60 grubun 39'u 60px'i aşıyor, en yükseği
      **208 px**; başlıklar tek başına ~4.700 px yiyordu.
   ⚠ Bu bir VERİ kırpması değil GÖRÜNÜM kırpmasıdır: tam ad DOM'da ve `title`da durur,
     bağ hedefi değişmez, altındaki ürün listesi zaten adı taşır. */
.grup-ad {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; vertical-align: bottom;
}
.grup-sayi { font-weight: 400; opacity: 0.75; }

/* Atlama şeridi çipleri — uzun etken madde adları tek satıra sığar (tam ad `title`da).
   🔴 Ölçüldü (serum kategorisi): çip etiketleri 150 karakteri buluyordu
      ("kalsiyum klorür dihidrat, magnezyum klorür hekzahidrat, sodyum klorür, …")
      ve şerit büyüklüğe göre sıralıydı (41-39-26-14-…). Şerit bir DİZİNDİR:
      sıralama alfabetik oldu (üreticide), etiket burada tek satıra indirildi.
   ⚠ Tablo sıralaması DEĞİŞMEDİ — orada "en çok ürünlü grup üstte" doğru davranış. */
.atla-serit a { max-width: 100%; }
.atla-serit .atla-ad {
  display: inline-block; max-width: 210px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.atla-serit .grup-sayi { margin-left: 5px; flex: none; }
/* `.dizin-grup-bas` içindeki ad da 2 satıra sığar; `h3` blok akışında kalır. */
.dizin-grup-bas .grup-ad { max-width: 100%; }
.dizin-grup-bas a { color: var(--accent); text-decoration: none; }

/* ── ⑦ PREMIUM GEÇİŞİ (17.09.2026 · kullanıcı: "mantıklı şık premium görünen bir
   tasarım yapmalısın, yaratıcı ol") ─────────────────────────────────────────
   🔒 YENİ TASARIM DİLİ İCAT EDİLMEDİ. Panel ölçüleri ÜRÜN SAYFASININ KÜNYESİNDEN
      (`.drug-header`, spa.css) birebir alındı: aynı gradyan, aynı kenarlık, 16px
      yarıçap, aynı gölge. Dizin sayfalarının başı düz sayfa zemininde "havada"
      duruyordu; artık sitenin geri kalanıyla aynı malzemeden. */
.dizin-hero {
  background: linear-gradient(135deg, var(--surface) 0%, #0d1424 100%);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 22px 18px; margin: 0 0 16px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
}
.dizin-hero h1 { margin: 0; }
.dizin-hero > p.kunye { margin: 10px 0 0; }
.dizin-hero .kirinti { margin-bottom: 12px; }
/* İlk çip (adet) VURGULU — hiyerarşi: önce kaç ürün, sonra ayrıntı.
   Renkler `.dh-atc` jetonundan (ürün sayfasının ATC rozeti). */
.sayac:first-child {
  background: rgba(0, 212, 255, 0.08); border-color: rgba(0, 212, 255, 0.2); color: var(--accent);
}
.sayac:first-child b { color: var(--accent); }

/* Yapışkan filtre — 36.000 px'lik bir listede gerçek kazanç: aşağı indikçe kutu
   kaybolmaz. Statik sayfada üst bar `position: static` (sayfa.css), o yüzden
   `top: 0` çakışmaz. Arka plan opak ki altındaki satırlar içinden geçmesin. */
.dizin-filtre {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); padding: 10px 0; margin: 0 0 12px;
}
@supports (backdrop-filter: blur(8px)) {
  .dizin-filtre { background: rgba(10, 15, 30, 0.88); backdrop-filter: blur(8px); }
}

/* Fiyat sütunu: tablo rakamları (aynı genişlik) + sağa hizalı ⟹ sayılar alt alta
   okunabilir. Bugün sola yaslıydı ve basamaklar kayıyordu. */
.dizin-tablo td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.dizin-tablo td:nth-child(3) { text-align: right; }

/* ── ③ 1b FORMA GÖRE GRUPLAMA (17.09.2026) ──────────────────────────────────
   Kullanıcı: *"tablet damla şurup gibi kategorilere ayıralım ki ne oldukları belli
   olsun"* → *"tüm ilaç formları olarak ayrılmalı"*.
   📏 Ölçüldü: 2.440 kardeşli grubun 2.034'ü (%83,4) TEK FORMLU ⟹ başlık YALNIZ çok
      formlu 406 grupta çıkar; tek formlu sayfalarda görünüm AYNEN korunur.
   🔒 Etiket satırı `.varyant b` jetonundan türer — yeni tipografi yazılmadı. */
.varyant-grup { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.varyant-grup + .varyant-grup { margin-top: 4px; }
.varyant-form {
  flex: 0 0 100%; color: var(--muted); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 2px 0 0;
}
/* Pill'ler etiketin ALTINDA, soldan hizalı (KÜB/KT kartındaki desen). */
.varyant-form-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 0 100%; }

/* ── GENİŞLİK DİSİPLİNİ: "o kadar uzun olmasına gerek yok" (18.09.2026) ─────
   🔴 KULLANICI: *"fiyatlar çok sağa gitti sanki"* · *"açılan arama bölümünün o kadar
      uzun olmasına gerek yok, en uzun ilaç adına göre hizalasak"* · *"arama kutusunun
      da o kadar uzun olmasına gerek yok, ilaç sayfalarındaki"*.
   📏 ÖLÇÜLDÜ @1280px — ikisinde de aynı kusur: kap, içeriğinden ÇOK daha geniş.
      · üst arama kutusu 709 px, en uzun öneri metni 309 px ⟹ **400 px ölü alan**;
        öneri satırında ad ile fiyat arası **340 px**.
      · dizin tablosu 802 px, en uzun ilaç adı 279 px (kolonu şişiren şey en uzun
        FİRMA adı: 534 px) ⟹ ad metni ile fiyat arası **537–562 px**, yani fiyat
        adından yarım ekran uzakta.
   ⚠ MOBİLDE SORUN YOK (390 px: kutu 347, içerik 268) — kurallar yalnız ≥700 px'te. */
@media (min-width: 700px) {
  /* Öneri kutusu içeriğine göre: 460 px'te ad↔fiyat arası 340 → 91 px.
     420 denendi (51 px) ama 309 px'lik alt satır sarıyordu; 520 fazla gevşek. */
  .ust .ara-kap { max-width: 460px; }
  /* 🔴 BOŞLUK NEREYE GİDECEK — iki turda düzeldi.
     ① Kutuyu 709 → 460 px'e indirince 250 px boşluk doğdu ve `.ust nav`ın
        `margin-left: auto`u onu LOGO İLE NAV ARASINA koydu ⟹ gezinme linkleri
        sayfanın ortasına savruldu (kullanıcı: *"üst taraf sağa kaydı"*;
        ölçüldü: nav 457–759'a kaydı, önce 208–510'daydı).
     ② Sonra kutuya `margin-left: auto` verdim, bu kez KUTU sağ kenara yapıştı —
        kullanıcı: *"arama kutusu da sağda kalmasın, yine sola hizalı olsun eski
        şekilde, sadece kısalmış hâliyle"*. ⟹ HİÇBİR ögede `auto` marj YOK:
        marka · nav · kutu · kategori bağı soldan sırayla dizilir, artan boşluk
        SAĞDA kalır. Kutu eski yerinde başlar, yalnız 460 px'te biter. */
  .ust nav { margin-left: 0; }
  /* 🔴 460 px'te PLACEHOLDER KESİLİYORDU (kullanıcı: *"içindeki yazı kayboldu"*).
     ÖLÇÜLDÜ (canvas ile, tahmin değil): placeholder metni **378 px**, inputun iç
     alanı 365 px ⟹ 13 px eksik. Gereken kap = 378 + dolgu 28 + buton 61 + gap 6
     + pay 4 = **477 px**. 500 px verildi (küçük nefes payı). */
  .ust .ara-kap { margin-left: 0; flex: 0 1 500px; max-width: 500px; }

  /* Tablo: sütunlar %100'e TAMAMLANIR (yoksa artan pay sütunlara dağılıp boşluğu
     geri açıyor — ölçüldü: 34/18/10 verince boşluk 537'den yalnız 337'ye indi). */
  .dizin-tablo { table-layout: fixed; max-width: 620px; }
  .dizin-tablo col.c-ad { width: 50%; }
  .dizin-tablo col.c-fiyat { width: 32%; }
  .dizin-tablo col.c-sgk { width: 18%; }
}

/* "İlaç Kategorileri" bağı — arama kutusunun sağında (kullanıcı, 18.09.2026).
   🔒 Ölçüler `.ust nav a`dan (aynı punto, aynı yarıçap, 44 px dokunma hedefi);
      yalnız vurgu için ince bir çerçeve eklenir. Yeni tasarım dili YAZILMADI. */
.ust .kat-bag {
  order: 4; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 10px;
  color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600;
  background: rgba(0, 212, 255, 0.07); border: 1px solid rgba(0, 212, 255, 0.28);
  white-space: nowrap;
}
.ust .kat-bag:hover { background: rgba(0, 212, 255, 0.14); }
@media (max-width: 699px) {
  /* 🔴 KULLANICI ŞARTI: *"bunları sadece masaüstü için uygula"*. Dar ekranda üst bar
     zaten marka + sarmalayan nav + arama kutusuyla dolu; dördüncü bir öge satırı
     daha da uzatırdı. Kategorilere mobil yol KAPANMIYOR: ürün sayfasındaki
     "İlaç dizininde" navı kategoriye bağ veriyor, `/kategori/` de erişilebilir. */
  .ust .kat-bag { display: none; }
}

/* ── 🔴 ARAMA KUTUSU SAYFAYA ORTALANIR (18.09.2026, kullanıcı) ───────────────
   İSTEK: *"ilaç sayfasındaki arama kutusu sayfaya ortalansın"* — arama yapılınca
   açılan öneri listesi ana sayfadaki gibi sayfa merkezinde dursun. Liste
   (`.autocomplete`) kutunun içinde `position:absolute` ⟹ kutu ortalanınca liste
   de onunla gelir; liste ayrıca kaydırılmaz (kutudan kopmasın).
   📐 ANA SAYFANIN REÇETESİ ÖLÇÜLDÜ, yeni tasarım dili yazılmadı: `.search-wrapper`
      `max-width:560px; margin:0 auto` ⟹ liste merkezi 953 = sayfa merkezi (sapma 0).

   🔑 NEDEN `margin:0 auto` DEĞİL: `.ara-kap` bir flex ögesi; `auto` marj onu ARTAN
      BOŞLUĞUN ortasına koyar, SAYFANIN ortasına değil (sol grup 478 px, sağdaki
      kategori bağı 156 px ⟹ ölçüldü: merkez 1113, sayfa merkezi 953, 160 px sapma).
      Sayfa merkezi ancak kutu akıştan çıkarılıp `left:50%` ile konulursa tutar.

   📏 EŞİK ÖLÇÜYLE BULUNDU (tahmin değil) @ilaç sayfası:
        marka 32–194 · nav 208–510 · kutu 500 px · `.ust` gap 14
        ortalanmış kutunun sol kenarı = vw/2 − 250
        nava binmemesi için: vw/2 − 250 ≥ 510 + 14  ⟹  **vw ≥ 1548**
      1548'de vw/2 − 250 = 524 = kutunun BUGÜNKÜ sol kenarı ⟹ eşikte SIÇRAMA YOK,
      geçiş sürekli. 1548 px altında hiçbir kural uygulanmaz ⟹ dar masaüstü ve
      mobil bugünkü davranışta, yapısal olarak gerileme imkânsız.

   ⚠ `auto` MARJ YASAĞINA BİLİNÇLİ İSTİSNA (DEVİR §3.4'te "hiçbir ögede auto marj
     yok" kilitliydi — gerekçesi kutunun sağa yapışmasıydı). Kutu akıştan çıkınca
     kategori bağı navın hemen sağına kayıp kutunun ALTINA girer; `margin-left:auto`
     onu sağ kenara iter. Kutu zaten akışta değil, o yüzden eski gerekçe düşer.
     Ölçü @1905: kutu 702–1202 (merkez 953 = sayfa merkezi) · kategori bağı 1717–1873. */
@media (min-width: 1548px) {
  .ust { position: relative; }
  .ust .ara-kap {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 500px;            /* akıştan çıkınca `flex-basis` düşer, genişlik açık verilir */
  }
  .ust .kat-bag { margin-left: auto; }
}

/* ── PAKET SEÇİMİ (21.09.2026 · kural 84 ⑦⑧) ────────────────────────────────
   Aramada "ALLERSET 10 MG FILM TABLET, 20 Adet"e tıklayan kişi
   `/ilac/<slug>/#paket-b<barkod>` ile gelir; künye o pakete uyar ve satır vurgulanır.
   🔴 SAYFA BAŞINDAN AÇILIR, PAKETE ZIPLAMAZ (kullanıcı kararı): çapa `id` DEĞİL
      `data-paket-id` olarak basılır ⟹ tarayıcının kaydıracağı hedef yoktur. Bu yüzden
      vurgu `:target` DEĞİL, `paket_secim.js`in verdiği `.paket-secili` sınıfıdır
      (`:target` için `id` gerekirdi, `id` ise zıplamayı geri getirirdi).
   🔴 YALNIZ STATİK SAYFADA: SPA bu çapaları hiç üretmez ⟹ kural `spa.css`e değil buraya.
   ⚠ JS gelmezse: zıplama da vurgu da olmaz, sayfa doğru genel kimliğini gösterir. */
.paket-tablo tr.paket-secili {
  background: rgba(0,212,255,0.09);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* tek paketli sayfada hedef künyedir — kart zaten çerçeveli, yalnız kenarlık vurgulanır */
.drug-header.paket-secili { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,212,255,0.12); }

/* 🔴 21.09.2026 — VURGU METNİ KAPATIYORDU (kullanıcı ekran görüntüsüyle yakaladı:
   *"vurgu yaparken mobilde bilgileri kapatmış"* → "189,28" yerine "89,28" görünüyordu).
   ÖLÇÜM: 390 px'te seçili satırın kutusu 33–342, `paket`/`fiyat` hücreleri de 33'te
   başlıyor; mobilde `td` dolgusu 0'a indiği için 3 px'lik `inset` çubuk metnin ilk
   pikselleriyle ÇAKIŞIYORDU (masaüstünde `td` 6 px dolgulu olduğu için sorun yoktu).
   ÇÖZÜM: çubuğa yer açılır ve metin KAYMAZ — dolgu kadar negatif marj verilir, böylece
   seçili satırın metni seçili olmayanlarla AYNI hizada kalır. Çubuk kartın iç boşluğuna
   (14 px) taşar, sağ kenar değişmez ⟹ yatay taşma doğmaz. */
@media (max-width: 640px) {
  .paket-tablo tr.paket-secili {
    padding-left: 10px;
    margin-left: -10px;
    border-radius: 0 4px 4px 0;
  }
}

/* seçili paketin varyant çipi — tablo satırıyla AYNI vurgu dili, ikinci bir renk yok */
.varyant a.paket-secili {
  border-color: var(--accent);
  background: rgba(0,212,255,0.12);
  font-weight: 700;
}