/* Medikal Center: ortak stil. Kurallar ve gerekçeler: DESIGN.md
   Yön: B "Vitrin" (logonun dili) + A "Raf Etiketi"nin etiket düzeni. Tek yazı ailesi: Montserrat. */

/* ── Yazı tipi: Montserrat değişken (400–800), sunucudan; latin + latin-ext = Türkçe ── */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Token'lar ────────────────────────────────────────────────────────────── */
:root{
  /* renk: kontrast oranları DESIGN.md'de */
  --tabela:#0b0f0f;          /* logodaki siyah: üst ve alt bant, düğme */
  --tabela-hover:#1f2b2b;    /* düğme üstüne gelince */
  --neon:#52f3ef;            /* logodaki turkuaz: YALNIZCA --tabela üstünde (14,2:1) */
  --tabela-yazi:#ffffff;
  --tabela-soluk:#9aa6a6;    /* siyah üstünde ikincil yazı (7,7:1) */
  --tabela-cizgi:rgba(255,255,255,.3);
  --zemin:#f4f6f6;           /* gövde */
  --kart:#ffffff;            /* etiket */
  --yazi:#101414;            /* 17,1:1 */
  --soluk:#4a5656;           /* ikincil yazı, 7,0:1 */
  --cizgi:#d3dbdb;           /* etiket satır ayırıcı (süs) */

  /* yazı */
  --font:'Montserrat',system-ui,sans-serif;
  /* ağırlık: 800 başlık/marka/düğme/slogan · 600 küçük büyük harf etiketler · 500 etiket verisi · 400 açıklama */
  --t-baslik:clamp(34px,5.6vw,84px);
  --t-aciklama:clamp(17px,1.35vw,20px);
  --t-veri:14px;
  --t-etiket:12px;

  /* boşluk ve ölçü: 4'ün katları */
  --gutter:clamp(16px,4vw,56px);
  --max:1240px;
  --bant:72px;
  --alt-bant:60px;
  --kenar:1.5px;

  /* hareket */
  --gecis:160ms ease-out;
}

/* ── Temel ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  background:var(--zemin);color:var(--yazi);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--yazi);outline-offset:3px}
.tabela :focus-visible,.alt :focus-visible{outline-color:var(--neon)}
.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:100%;max-width:var(--max);margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}

/* ── Tabela bandı ─────────────────────────────────────────────────────────── */
.tabela{background:var(--tabela);color:var(--tabela-yazi)}
.tabela .ic{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--bant)}
.marka{display:flex;align-items:center;gap:12px;text-decoration:none}
.marka img{width:44px;height:44px;border-radius:50%}
.marka b{display:block;font:800 16px/1.1 var(--font);letter-spacing:.06em}
.marka small{display:block;margin-top:4px;font:600 10.5px/1.2 var(--font);letter-spacing:.24em;color:var(--neon)}
.ig{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--tabela-cizgi);
  font:600 13px/1 var(--font);letter-spacing:.02em;text-decoration:none;transition:border-color var(--gecis),color var(--gecis)}
.ig svg{width:18px;height:18px;flex:none}
.ig:hover{border-color:var(--neon);color:var(--neon)}

/* ── Gövde ────────────────────────────────────────────────────────────────── */
main{display:grid;align-items:center;padding:clamp(24px,6vh,72px) 0}
main .ic{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:clamp(32px,6vw,96px);align-items:center}
.ust{display:flex;align-items:center;gap:10px;font:600 12.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--soluk)}
.ust::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--neon);box-shadow:0 0 0 1.5px var(--yazi)}
h1{margin:20px 0 22px;font:800 var(--t-baslik)/.96 var(--font);letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.aciklama{max-width:34ch;font-size:var(--t-aciklama);line-height:1.45;color:var(--soluk);text-wrap:pretty}

/* ── Etiket ───────────────────────────────────────────────────────────────── */
.etiket{background:var(--kart);border:var(--kenar) solid var(--yazi);padding:18px 22px 22px;font:500 var(--t-veri)/1.55 var(--font)}
.etiket-ust{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:var(--kenar) solid var(--yazi);
  font-size:var(--t-etiket);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.etiket h2{font:inherit;letter-spacing:inherit}
.etiket dl div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--cizgi)}
.etiket dt{padding-top:2px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soluk)}
.etiket dd,.etiket address{margin:0;font-style:normal}

/* ── Düğme ────────────────────────────────────────────────────────────────── */
.btn{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:17px 18px;
  background:var(--tabela);color:var(--tabela-yazi);text-decoration:none;
  font:800 14px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;transition:background-color var(--gecis)}
.btn .ok{color:var(--neon);font-size:18px;transition:transform var(--gecis)}
.btn:hover{background:var(--tabela-hover)}
.btn:hover .ok{transform:translateX(4px)}
.btn:active{background:#000}

/* ── Alt bant ─────────────────────────────────────────────────────────────── */
.alt{background:var(--tabela);color:var(--tabela-yazi)}
.alt .ic{display:flex;align-items:center;gap:20px;height:var(--alt-bant)}
.alt p{font:800 14px/1 var(--font);letter-spacing:.02em;white-space:nowrap}
.alt svg{flex:1 1 0;width:0;min-width:0;height:30px}
.alt path{fill:none;stroke:var(--neon);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.alt small{font:500 12px/1 var(--font);color:var(--tabela-soluk);white-space:nowrap}

/* ── 404: tek sütun ───────────────────────────────────────────────────────── */
.tek .ic{grid-template-columns:minmax(0,1fr)}
.tek .btn{display:inline-flex;min-width:min(100%,300px);margin-top:28px}

/* ── Kırılımlar (her biri sayfa-olc ile ölçüldü; liste DESIGN.md'de) ──────── */
@media (max-width:860px){
  :root{--bant:60px;--alt-bant:48px}
  main .ic{grid-template-columns:minmax(0,1fr);gap:24px}
  .marka img{width:36px;height:36px}
  .marka b{font-size:14px}
  .marka small{font-size:10px}
  h1{font-size:clamp(30px,8.4vw,56px);margin:14px 0}
  .aciklama{font-size:16px}
  .etiket{padding:14px 16px 16px;font-size:13px}
  .etiket dl div{grid-template-columns:84px 1fr;padding:10px 0}
  .btn{margin-top:14px;padding:15px 16px}
  .alt .ic{gap:14px}
  .alt p{font-size:12.5px}
}
@media (max-width:480px){
  .etiket dl div{grid-template-columns:78px 1fr;gap:10px}
  .ig span{display:none}
  .ig{padding:9px}
  .alt small{display:none}
}
/* orta boy telefon (iPhone Safari 390x664, SE vb.): dikey boşluk daralır, açıklama gizlenir
   (mesafe satırı görünür kalsın diye; metin HTML'de durur) */
@media (max-width:860px) and (max-height:760px){
  main{padding:18px 0}
  h1{margin-bottom:0}
  .aciklama{display:none}
}
/* kısa telefon: açıklama gizlenir (ürün grupları etikette kalır), boşluklar daralır */
@media (max-width:860px) and (max-height:620px){
  :root{--bant:52px;--alt-bant:40px}
  .marka img{width:32px;height:32px}
  main{padding:14px 0}
  main .ic{gap:16px}
  h1{font-size:clamp(26px,7.6vw,34px);margin:10px 0 0}
  .aciklama{display:none}
  .etiket{padding:10px 14px 14px}
  .etiket-ust{display:none}
  .etiket dl div{padding:8px 0}
  .etiket dl div:first-child{padding-top:0}
  .btn{margin-top:12px;padding:13px 16px}
}
/* yatay telefon: iki sütun, etiket başlığı gizli */
@media (max-height:500px) and (min-width:600px){
  :root{--bant:44px;--alt-bant:34px}
  .marka img{width:28px;height:28px}
  main{padding:10px 0}
  main .ic{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px}
  h1{font-size:clamp(24px,4.4vw,40px);margin:10px 0 0}
  .aciklama{display:none}
  .etiket{padding:10px 14px 12px;font-size:12px}
  .etiket-ust,.etiket .mesafe{display:none}
  .etiket dl div{padding:6px 0;grid-template-columns:78px 1fr}
  .etiket dl div:first-child{padding-top:0}
  .btn{margin-top:10px;padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}