/* ============================================================
   v3 görsel dili — style.css'in üzerine token katmanı

   style.css yapıyı ve yerleşimi kuruyor; burada yalnızca renk, tipografi
   ve kenar/köşe değerleri yeniden tanımlanıyor. Böylece tek dosyayla tüm
   sayfalar (firma, ATC, eş değer, koleksiyon, kurumsal, liste) v3 diline
   geçiyor ve v1 dosyaları olduğu gibi korunuyor: ?v=1 ile hâlâ erişilebilir.

   v3 dili: koyu lacivert + saf mavi vurgu, Space Grotesk başlık, keskin
   köşeler, gölge yerine 1px çizgi, gradient ve dekoratif leke yok.
   ============================================================ */

@import url('style.css');

/* Tailwind preflight kapalı (iki reset çakışmasın diye). Ancak utility
   sınıflarından "border", "border-t" gibi olanlar yalnızca kalınlık veriyor;
   çizgi biçimi preflight'tan geliyordu. O tek kuralı burada karşılıyoruz. */
*,::before,::after{border-style:solid;border-width:0}

:root{
  /* Mavi-beyaz palet */
  --brand:#1d4ed8; --brand-dark:#0a1f3c; --brand-light:#eaf0ff;
  --link:#2563eb; --ink:#0a1f3c; --ink-2:#3f4a5c; --muted:#7b8798;
  --line:#e2e8f0; --bg:#ffffff; --bg-soft:#f7f9fc;
  --alert:#e11d48; --ok:#059669; --warn:#b45309;

  /* v3 keskin köşeler kullanıyor */
  --radius:3px;
  --maxw:1220px;

  /* Başlık ailesi: v1'in serif'i yerine geometrik sans */
  --serif:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ---- TİPOGRAFİ: başlıklar daha sıkı ---- */
h1,h2,h3,article h2,.idcard .brand{letter-spacing:-.025em}
h1{font-weight:700}
article h2{font-weight:700;font-size:23px}
.logo-txt strong{color:var(--ink);letter-spacing:-.03em}
.logo-txt span{color:var(--muted);font-weight:400}

/* ---- ÜST ALAN: gri zemin yerine beyaz + ince çizgi ---- */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.hsearch input{border-color:#cfd8e3;border-radius:var(--radius)}
.hsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.hsearch button{border-radius:2px}
.subnav{background:#fff}
.btn-solid{border-radius:var(--radius);border-color:#cfd8e3}
.btn-solid:hover{border-color:var(--brand);color:var(--brand)}

/* ---- KUTULAR: gölge yok, çizgi var ---- */
.box,.ikart,.rcard,.side .box,.callout,.promo,.newsitem,.stat{
  border-radius:var(--radius);box-shadow:none;
}
/* v1'de .box-head koyu zemin + beyaz metindi; v3'te zemin açık olduğu için
   metin rengi de birlikte değişmeli (aksi hâlde başlık okunmuyor). */
.box-head,.box-head.light{background:var(--bg-soft);color:var(--ink);
  border-bottom:1px solid var(--line)}
.ikart{border:1px solid var(--line);transition:border-color .15s}
.ikart:hover{border-color:var(--brand)}

/* ---- ETİKETLER: yumuşak kapsül yerine düz ---- */
.chip,.pill,.tag,.minitag,.badge-self,.filtre{border-radius:2px}
.pill.ok{background:#ecfdf5;color:var(--ok)}
.eyebrow,.kicker{letter-spacing:.09em;font-weight:600;color:var(--muted)}

/* ---- SAYILAR: tabular, başlık ailesi ---- */
.idprice,.price-now,.eqrow .pr,.facts dd .amt,.stat strong{
  font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

/* ---- ALFABE / SAYFALAMA: kare düğmeler ---- */
.alfabe a,.alfabe span,.pager a,.pager span,.sayfalama a,.sayfalama span{border-radius:2px}
.alfabe a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---- TABLOLAR: zebra yerine ince ayırıcı ---- */
table th{background:var(--bg-soft);border-bottom:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
table td{border-bottom:1px solid #eef1f6}
tbody tr:hover{background:#f8fafd}

/* ---- AÇILIR BÖLÜMLER (detay ve SSS) ---- */
.sec{border-radius:0;border-left:0;border-right:0}
.sec summary{padding:18px 0}

/* ---- ALT ALAN: koyu lacivert ---- */
footer{background:var(--ink);color:#c7d2e0;border-top:0}
footer a{color:#c7d2e0}
footer a:hover{color:#fff;text-decoration:none}
footer .foot-bottom{border-top:1px solid rgba(255,255,255,.12);color:#8fa0b8}
footer h3,footer strong{color:#fff}

/* ---- KİMLİK KARTI (detay v1 düzeni de v3 diline uysun) ---- */
.idcard{border-radius:var(--radius);box-shadow:none;background:#fff;border:1px solid var(--line)}
.idbar{border-radius:var(--radius)}

/* ---- HERO (v1 anasayfa kullanıldığında) ---- */
.hero h1{letter-spacing:-.03em}

/* ---- REÇETE ROZETİ: normal reçete uyarı değil ----
   v1'de ".tag.rx" kırmızı; oysa ilaçların %93'ü normal reçeteli, yani bu
   istisnai bir durum değil. v3'te nötr gösterilir; kırmızı/yeşil/mor reçete
   gibi gerçekten dikkat gerektiren durumlar sayfa içinde kendi rengini korur. */
.tag.rx{background:#eef2f7;color:var(--ink-2);border-color:#dde4ee}
.tag.otc{background:#ecfdf5;color:var(--ok);border-color:#bbf7d0}
.tag.up{background:#fff1f2;color:var(--alert);border-color:#fecdd3}

/* ---- v3 vitrin kartları: fiyat satırı hep altta hizalanır ---- */
.v3-vitrin{display:flex;flex-direction:column;height:100%}
.v3-vitrin .v3-vitrin-alt{margin-top:auto}

/* ---- FİYAT HÜCRELERİ: rakam ile simge bölünmez ----
   para() bölünmez boşluk kullanıyor; tablo hücresi çok daraldığında yine de
   sarmaması için hücreye nowrap veriyoruz (fiyat kolonları sağa hizalı). */
td.num,th.num,.pr,.price-now,.idprice{white-space:nowrap}

/* ---- KUTU BAŞLIKLARI: h2 kutu bandına sığsın ----
   Bölüm başlıkları .box-head içine alındığında sayfa h2 ölçüsüyle basılıyordu. */
.box-head h2,.box-head h3{margin:0;font-family:var(--serif);font-size:14.5px;
  font-weight:700;letter-spacing:-.01em;color:inherit;line-height:1.3}
.box .pad > p:first-child{margin-top:0}
.box .pad > :last-child{margin-bottom:0}

/* ---- UTILITY İLE KURULAN BÖLGELER ----
   Anasayfa ve ilaç detayının künye/fiyat blokları boşluklarını utility
   sınıflarıyla (mt-, py-) veriyor. Tailwind preflight kapalı olduğu için
   p/h/dl öğeleri v1 CSS'inin varsayılan margin'lerini alıyor ve araya
   beklenmeyen boşluk giriyordu. Bu bölgelerde varsayılanları sıfırlıyoruz;
   prospektüs metni (.v3-govde) kendi ölçülerini korur. */
.v3-blok p,.v3-blok h1,.v3-blok h2,.v3-blok h3,
.v3-blok dl,.v3-blok dt,.v3-blok dd,
.v3-blok ul,.v3-blok ol,.v3-blok li,.v3-blok table{margin:0}

/* ---- FİRMA LOGOSU ----
   Logolar kaynaktan kendi dizinimize indirildi (assets/firma). Boyutları ve
   oranları çok değişken olduğu için sabit bir çerçeveye object-fit ile
   yerleştiriliyor; şeffaf PNG'ler için zemin beyaz. */
.firma-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.firma-head-metin{min-width:0;flex:1}
.firma-logo{width:104px;height:104px;object-fit:contain;flex-shrink:0;
  border:1px solid var(--line);background:#fff;padding:9px}
@media (max-width:600px){.firma-logo{width:76px;height:76px;padding:7px}}

/* ---- A-Z BAĞLANTI IZGARASI: iki kolon ----
   210px'lik kolonlarda üç-dört sütun oluşuyor ve uzun ürün adları
   ("%0.9 IZOTONIK Sodyum Klorür içeren irigasyon solüsyonu 1000 ml …")
   iki üç satıra kırılıyordu. Daha geniş kolon = iki sütun ve tek satır. */
.linkgrid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:4px 30px}
.linkgrid a{padding:6px 0;line-height:1.45}

/* ---- FİRMA DİZİNİ: logo + tam unvan listesi ---- */
.firma-liste{list-style:none;margin:16px 0 22px;padding:0;border-top:1px solid var(--line)}
.firma-liste li{border-bottom:1px solid var(--line)}
.firma-liste a{display:flex;align-items:center;gap:16px;padding:12px 4px;color:inherit}
.firma-liste a:hover{background:var(--bg-soft);text-decoration:none}
.firma-liste-logo{display:grid;place-items:center;width:74px;height:44px;flex-shrink:0}
.firma-liste-logo img{max-height:40px;max-width:72px;object-fit:contain}
.firma-liste-bas{display:grid;place-items:center;width:40px;height:40px;
  background:var(--brand-light);color:var(--brand-dark);
  font-family:var(--serif);font-size:17px;font-weight:700}
.firma-liste-metin{min-width:0;flex:1}
.firma-liste-ad{display:block;font-weight:600;color:var(--ink);font-size:14.5px;line-height:1.35}
.firma-liste-alt{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.firma-liste-ok{flex-shrink:0;color:var(--line);font-size:15px}
.firma-liste a:hover .firma-liste-ok{color:var(--brand)}
@media (max-width:560px){
  .firma-liste-logo{width:56px;height:36px}
  .firma-liste-logo img{max-height:34px;max-width:54px}
}

/* ---- CANLI ARAMA ÖNERİLERİ ---- */
.oneri-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  max-height:min(70vh,420px);overflow-y:auto;background:#fff;
  border:1px solid var(--line);box-shadow:0 12px 30px -12px rgba(10,31,60,.22)}
.oneri{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"tur ad fiyat" "tur alt fiyat";
  gap:0 12px;padding:9px 14px;border-bottom:1px solid #eef1f6;color:var(--ink);align-items:center}
.oneri:last-of-type{border-bottom:0}
.oneri:hover,.oneri.on{background:var(--brand-light);text-decoration:none}
.oneri-tur{grid-area:tur;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);
  padding:2px 6px;white-space:nowrap}
.oneri-ad{grid-area:ad;font-size:14px;font-weight:500;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oneri-ad b{color:var(--brand);font-weight:700}
.oneri-alt{grid-area:alt;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oneri-fiyat{grid-area:fiyat;font-size:13px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.oneri-tumu{display:block;padding:10px 14px;font-size:13px;font-weight:600;
  color:var(--brand);background:var(--bg-soft);border-top:1px solid var(--line)}
.oneri-tumu:hover{text-decoration:none;background:var(--brand-light)}
.oneri-bos{margin:0;padding:14px;font-size:13.5px;color:var(--muted)}
/* Hero'daki kutu koyu şerit üzerinde: panel beyaz kalsın, metin koyu */
.v3-blok .oneri-panel{text-align:left}
.v3-blok .oneri-ad,.v3-blok .oneri-fiyat{color:var(--ink)}