/**
 * Dosya: site.css | Başakşehir Özel Yekta Polikliniği — Tasarım Sistemi
 * Geliştiren: Muhsin İŞSEVER | Zefre.NET AI Internet Technologies | 2026-07-11
 * AXIOM tezi: "Sessiz Hassasiyet" — sıcak fildişi zemin, derin petrol mürekkep,
 * bakır insan sıcaklığı. Tipografi: Fraunces (display) × Outfit (body) × Readex Pro (AR).
 * Tüm yerleşim logical property'lerle — RTL otomatik.
 */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --bone:#F6F3ED; --bone-2:#EFEAE1; --bone-3:#E7E0D4; --paper:#FCFAF6;
  --ink:#132F35; --petrol:#0F3B41; --petrol-deep:#0A282D; --petrol-soft:#175059;
  --copper:#B4632F; --copper-ink:#8F4E20; --copper-soft:#C8814A; --copper-tint:#F3E4D5;
  --mist:#48646B; --hairline:#DCD4C6; --hairline-2:#E9E3D7;
  --ok:#2E6B4F; --warn:#A87A2A; --err:#9C3D2E;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;--s5:3rem;--s6:4.5rem;--s7:6.5rem;
  --radius:20px; --radius-sm:12px;
  --shadow-1:0 10px 30px -14px rgba(10,40,45,.22);
  --shadow-2:0 24px 60px -24px rgba(10,40,45,.30);
  --wrap:1180px;
}
.is-rtl{
  --font-display:'Readex Pro',system-ui,sans-serif;
  --font-body:'Readex Pro',system-ui,sans-serif;
}


@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/fraunces-var.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/outfit-var.woff2) format('woff2')}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:160 700;font-display:swap;
  src:url(/assets/fonts/readexpro-var.woff2) format('woff2')}

/* ─── Reset & base ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--font-body);font-weight:340;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.is-rtl body,body.is-rtl{font-weight:300}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--copper);color:var(--bone)}
.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--petrol);color:var(--bone);
  padding:.6rem 1rem;z-index:99;border-radius:0 0 8px 8px}
.skip:focus{inset-inline-start:0}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}

h1,h2,h3,.display{font-family:var(--font-display);color:var(--petrol);
  letter-spacing:-.015em;text-wrap:balance;line-height:1.12}
.is-rtl h1,.is-rtl h2,.is-rtl h3{letter-spacing:0;line-height:1.35}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:600;font-variation-settings:'opsz' 110}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:580}
h3{font-size:1.16rem;font-weight:540}

.overline{font-size:.78rem;font-weight:520;letter-spacing:.28em;text-transform:uppercase;color:var(--copper-ink)}
.is-rtl .overline{letter-spacing:.08em}
.lead{font-size:1.12rem;color:var(--mist);max-width:38rem}
.section{padding-block:var(--s7)}
.section--tint{background:linear-gradient(180deg,var(--bone) 0%,var(--bone-2) 18%,var(--bone-2) 82%,var(--bone) 100%)}
.section__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s5)}
.section__head .lead{margin-top:.6rem}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.6rem;border-radius:99px;
  font-family:var(--font-body);font-size:.95rem;font-weight:470;letter-spacing:.02em;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,border-color .25s;
  will-change:transform}
.btn--primary{background:var(--petrol);color:var(--bone);box-shadow:var(--shadow-1)}
.btn--primary:hover{background:var(--petrol-deep);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn--copper{background:var(--copper);color:#FFF7EE;box-shadow:0 10px 26px -12px rgba(180,99,47,.5)}
.btn--copper:hover{background:#9E5528;transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--hairline);color:var(--petrol);background:transparent}
.btn--ghost:hover{border-color:var(--petrol);transform:translateY(-2px)}
.btn--sm{padding:.55rem 1.05rem;font-size:.85rem}

/* ─── Header ─────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bone) 82%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s}
.hd.is-stuck{border-bottom-color:var(--hairline-2);
  background:color-mix(in srgb,var(--bone) 94%,transparent)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-block:.9rem}
.mark{display:inline-flex;align-items:baseline;gap:.6rem;text-decoration:none}
.mark__name{font-family:var(--font-display);font-weight:640;font-size:1.6rem;color:var(--petrol)}
.is-rtl .mark__name{font-weight:600}
.mark__name i{font-style:normal;color:var(--copper)}
.mark__tag{font-size:.6rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--mist)}
.is-rtl .mark__tag{letter-spacing:.1em}
.nav ul{display:flex;gap:.25rem;list-style:none}
.nav a{display:block;padding:.55rem .85rem;font-size:.92rem;font-weight:420;text-decoration:none;
  color:var(--ink);border-radius:99px;transition:background .25s,color .25s}
.nav a:hover{background:var(--bone-2)}
.nav a[aria-current]{color:var(--copper);font-weight:500}
.hd__cta{display:flex;align-items:center;gap:.75rem}
.langs{display:flex;gap:.15rem;list-style:none}
.langs a{display:block;padding:.35rem .55rem;font-size:.75rem;font-weight:500;letter-spacing:.1em;
  text-decoration:none;color:var(--mist);border-radius:99px;transition:all .25s}
.langs a:hover{color:var(--petrol);background:var(--bone-2)}
.langs a[aria-current]{color:var(--bone);background:var(--petrol)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.6rem;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--petrol);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:clip;padding-block:var(--s6) var(--s7)}
.hero__grid{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:var(--s5);align-items:center}
.hero h1 em{font-style:normal;color:var(--copper);position:relative;white-space:nowrap}
.hero h1 em::after{content:'';position:absolute;inset-inline:0;bottom:.05em;height:.05em;
  background:currentColor;opacity:.3;border-radius:2px}
.hero .lead{margin-block:var(--s3) var(--s4)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero__meta{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--hairline)}
.hero__meta b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--petrol)}
.hero__meta span{font-size:.82rem;color:var(--mist)}
/* 3D sahne: katmanlı halkalar + yüzen cam kart */
.hero__scene{position:relative;aspect-ratio:1;width:min(100%,520px);justify-self:center;perspective:1000px}
.hero__scene .orb{position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(200,129,74,.20),transparent 58%),
             radial-gradient(circle at 68% 72%,rgba(15,59,65,.16),transparent 60%);
  filter:blur(34px)}
.scene__ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.scene__ring svg{width:100%;height:100%;animation:spin 160s linear infinite}
.scene__card{position:absolute;inset-inline-start:8%;bottom:12%;width:52%;padding:1.2rem 1.4rem;
  background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--hairline) 70%,transparent);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-2);
  transform:rotate(-2.5deg);will-change:transform}
.scene__card b{font-family:var(--font-display);font-weight:600;color:var(--petrol);font-size:1.05rem}
.scene__card p{font-size:.8rem;color:var(--mist);margin-top:.2rem}
.scene__chip{position:absolute;inset-inline-end:4%;top:16%;padding:.55rem 1rem;border-radius:99px;
  background:var(--petrol);color:var(--bone);font-size:.78rem;font-weight:460;letter-spacing:.04em;
  box-shadow:var(--shadow-1);transform:rotate(2deg);will-change:transform}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Hero canlı katman: WebGL + slide ───────────────────────────────── */
.hero--live{isolation:isolate}
.hero__gl{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  opacity:0;transition:opacity 1.6s ease}
.hero__gl.is-live{opacity:1}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to right,var(--bone) 0%,
    color-mix(in srgb,var(--bone) 88%,transparent) 42%,transparent 78%)}
[dir=rtl] .hero__veil{transform:scaleX(-1)}
.hero__stage [data-f]{will-change:transform,opacity}
/* CLS koruması: slide metinleri değişince yerleşim kaymasın diye yükseklik rezervi */
.hero__stage h1[data-f]{min-height:2.4em}
.hero__stage .lead[data-f]{min-height:3.4em}
.hero__stage .overline[data-f]{min-height:1.3em}
@media (max-width:760px){
  .hero__stage h1[data-f]{min-height:4.9em}
  .hero__stage .lead[data-f]{min-height:6.7em}
}
.hero__progress{display:flex;gap:1.6rem;margin-top:var(--s4)}
.hero__progress button{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start;
  justify-content:center;min-width:44px;min-height:44px;
  background:none;border:0;padding:.2rem 0;cursor:pointer;
  font-family:var(--font-body);font-size:.72rem;font-weight:520;letter-spacing:.14em;
  color:var(--mist);transition:color .3s}
.hero__progress button i{display:block;width:3.2rem;height:2px;border-radius:2px;
  background:var(--hairline);position:relative;overflow:hidden}
.hero__progress button i::after{content:'';position:absolute;inset:0;border-radius:2px;
  background:var(--copper);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease)}
[dir=rtl] .hero__progress button i::after{transform-origin:100% 50%}
.hero__progress button[aria-current]{color:var(--copper-ink)}
.hero__progress button[aria-current] i::after{transform:none}
@media (prefers-reduced-motion:no-preference){
  .hero__progress button[aria-current] i::after{
    animation:herobar 8s linear forwards}
  @keyframes herobar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .hero__stage.is-swapping [data-f]{
    opacity:0;transform:translateY(-12px);
    transition:opacity .3s ease,transform .3s ease}
  .hero__stage.is-entering [data-f]{
    animation:heroin .68s var(--ease) both}
  .hero__stage.is-entering [data-f="title"]{animation-delay:.05s}
  .hero__stage.is-entering [data-f="subtitle"]{animation-delay:.12s}
  .hero__stage.is-entering [data-f="cta"]{animation-delay:.18s}
  @keyframes heroin{
    from{opacity:0;transform:translateY(16px);clip-path:inset(0 0 62% 0)}
    to{opacity:1;transform:none;clip-path:inset(0 0 -8% 0)}}
}
/* vurgu temaları — slide accent'ı metin vurgusuna da yansır */
.hero--live[data-accent="teal"] h1 em{color:#2E7D74}
.hero--live[data-accent="amber"] h1 em{color:#B08427}

/* ─── İmza görsel dili: şifa kemeri + bakır duotone ──────────────────── */
.scene__portal{position:absolute;inset-inline-start:14%;top:6%;width:64%;aspect-ratio:4/4.8;
  border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;
  box-shadow:var(--shadow-2);border:1px solid color-mix(in srgb,var(--paper) 65%,transparent);
  will-change:transform}
.scene__portal img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.24) saturate(.78) contrast(1.02);
  transition:opacity .45s ease,filter .8s var(--ease),transform .8s var(--ease)}
.hero__scene:hover .scene__portal img{filter:none;transform:scale(1.03)}
.scene__portal img.is-fading{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .scene__portal{animation:float 9s .6s ease-in-out infinite}
}
/* duotone imzası tüm içerik görsellerinde */
.card__img,.doc__photo{filter:sepia(.18) saturate(.82)}
.card:hover .card__img,.doc:hover .doc__photo{filter:none}
.doc__photo{width:100%;height:100%;object-fit:cover;
  transition:filter .7s var(--ease),transform .7s var(--ease)}
.doc:hover .doc__photo{transform:scale(1.04)}
.card__img{transition:transform .6s var(--ease),filter .7s var(--ease)}
.doc__portrait{border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;
  border:1px solid var(--hairline-2);box-shadow:var(--shadow-1)}
.doc__portrait img{width:100%;aspect-ratio:4/4.6;object-fit:cover;
  filter:sepia(.18) saturate(.85);transition:filter .8s var(--ease)}
.doc__portrait:hover img{filter:none}

/* ─── Bento / kart ızgaraları ────────────────────────────────────────── */
.bento{display:grid;gap:var(--s2);grid-template-columns:repeat(6,1fr)}
.bento .card:nth-child(1){grid-column:span 3}
.bento .card:nth-child(2){grid-column:span 3}
.bento .card:nth-child(3){grid-column:span 2}
.bento .card:nth-child(4){grid-column:span 2}
.bento .card:nth-child(5){grid-column:span 2}
.card{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.7rem;
  background:var(--paper);border:1px solid var(--hairline-2);border-radius:var(--radius);
  text-decoration:none;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--hairline)}
.card__num{font-size:.7rem;font-weight:520;letter-spacing:.12em;color:var(--copper-ink)}
.card__img{width:calc(100% + 3.4rem);margin:-1.7rem -1.7rem .6rem;max-width:none;
  aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;
  transition:transform .6s var(--ease)}
.card:hover .card__img{transform:scale(1.04)}
.hero-img{width:100%;aspect-ratio:21/10;object-fit:cover;border-radius:var(--radius);
  margin-bottom:var(--s4);box-shadow:var(--shadow-1)}
.card h3{transition:color .25s}
.card:hover h3{color:var(--copper)}
.card p{font-size:.92rem;color:var(--mist)}
.card__go{margin-top:auto;font-size:.82rem;font-weight:500;color:var(--petrol);
  display:inline-flex;align-items:center;gap:.4rem}
.card__go::after{content:'→';transition:transform .3s var(--ease)}
.is-rtl .card__go::after{content:'←'}
.card:hover .card__go::after{transform:translateX(4px)}
.is-rtl .card:hover .card__go::after{transform:translateX(-4px)}
.grid-3{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid-4{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* ─── Doktor kartları ────────────────────────────────────────────────── */
.doc{position:relative;background:var(--paper);border:1px solid var(--hairline-2);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.doc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.doc__media{aspect-ratio:4/3.4;background:
  radial-gradient(circle at 30% 20%,var(--copper-tint),transparent 55%),
  linear-gradient(160deg,var(--bone-2),var(--bone-3));
  display:grid;place-items:center}
.doc__initials{font-family:var(--font-display);font-size:3rem;font-weight:600;color:var(--petrol);
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);box-shadow:var(--shadow-1)}
.doc__body{padding:1.3rem 1.5rem 1.5rem}
.doc__body h3{margin-bottom:.2rem}
.doc__body p{font-size:.85rem;color:var(--copper-ink);font-weight:460}
.doc__langs{margin-top:.5rem;font-size:.78rem;color:var(--mist)}

/* ─── Testimonial / quote ────────────────────────────────────────────── */
.quotes{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.quote{padding:1.8rem;background:var(--petrol);color:var(--bone);border-radius:var(--radius);
  position:relative;display:flex;flex-direction:column;gap:1rem}
.quote::before{content:'“';font-family:var(--font-display);font-size:3.4rem;line-height:.6;
  color:var(--copper-soft);display:block}
.is-rtl .quote::before{content:'”'}
.quote p{font-size:.97rem;line-height:1.7;color:color-mix(in srgb,var(--bone) 92%,transparent)}
.quote--tint{background:var(--paper);color:var(--ink);border:1px solid var(--hairline-2)}
.quote--tint p{color:var(--mist)}

/* ─── Accordion (SSS) ────────────────────────────────────────────────── */
.acc{border:1px solid var(--hairline-2);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.acc details{border-bottom:1px solid var(--hairline-2)}
.acc details:last-child{border-bottom:0}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.5rem;cursor:pointer;list-style:none;font-weight:480;font-size:1.02rem;
  font-family:var(--font-display);color:var(--petrol);transition:background .25s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--bone-2)}
.acc summary::after{content:'+';font-size:1.4rem;color:var(--copper);flex:none;
  transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .acc__body{padding:0 1.5rem 1.4rem;color:var(--mist);font-size:.95rem}

/* ─── İçerik gövdesi (rich text) ─────────────────────────────────────── */
.prose{max-width:46rem}
.prose h2{margin:var(--s4) 0 var(--s2);font-size:1.5rem}
.prose h3{margin:var(--s3) 0 var(--s1)}
.prose p{margin-bottom:var(--s2);color:#2A464D}
.prose ul,.prose ol{margin:0 0 var(--s2);padding-inline-start:1.4rem;color:#2A464D}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--copper)}
.prose strong{color:var(--petrol);font-weight:560}

/* ─── Sayfa başlığı bandı ────────────────────────────────────────────── */
.pagehead{padding-block:var(--s6) var(--s5);background:
  radial-gradient(60% 120% at 85% -20%,var(--copper-tint) 0%,transparent 60%),
  linear-gradient(180deg,var(--bone-2),var(--bone))}
.pagehead .overline{margin-bottom:var(--s2)}
.pagehead .lead{margin-top:var(--s2)}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8rem;color:var(--mist);
  margin-bottom:var(--s3);list-style:none}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--copper)}
.crumbs li+li::before{content:'/';margin-inline-end:.4rem;opacity:.5}

/* ─── Detay yerleşimi: sticky yan sütun ──────────────────────────────── */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s5);align-items:start}
.detail__aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--s2)}
.aside-card{padding:1.5rem;background:var(--paper);border:1px solid var(--hairline-2);
  border-radius:var(--radius)}
.aside-card h3{margin-bottom:.8rem;font-size:1rem}
.aside-card ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.aside-card li a{font-size:.9rem;color:var(--mist);text-decoration:none;transition:color .2s}
.aside-card li a:hover{color:var(--copper)}
.aside-card--cta{background:var(--petrol);color:var(--bone);border:0}
.aside-card--cta h3{color:var(--bone)}
.aside-card--cta p{font-size:.85rem;opacity:.85;margin-bottom:1rem}

/* ─── Form ───────────────────────────────────────────────────────────── */
.form{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:.8rem;font-weight:480;letter-spacing:.04em;
  color:var(--petrol);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1.05rem;
  border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--paper);
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--copper);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 18%,transparent)}
.field textarea{min-height:150px;resize:vertical}
.notice{padding:1rem 1.3rem;border-radius:var(--radius-sm);font-size:.92rem;margin-bottom:var(--s3)}
.notice--ok{background:#E7F0EA;color:var(--ok);border:1px solid #C6DCCE}
.notice--err{background:#F6E7E3;color:var(--err);border:1px solid #E6C9C1}
.notice--info{background:var(--copper-tint);color:#7A4A22;border:1px solid #E4CDB4}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.ft{background:var(--petrol-deep);color:color-mix(in srgb,var(--bone) 86%,transparent);
  margin-top:var(--s7)}
.ft .mark__name{color:var(--bone)}
.ft__grid{display:grid;gap:var(--s4);grid-template-columns:1.4fr 1fr 1fr;padding-block:var(--s6) var(--s4)}
.ft__brand p{margin-top:1rem;font-size:.92rem;opacity:.75;max-width:26rem}
.ft h3{color:var(--bone);font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:520;margin-bottom:1rem}
.is-rtl .ft h3{letter-spacing:.06em}
.ft__list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.ft__list a{font-size:.92rem;text-decoration:none;opacity:.8;transition:opacity .2s,color .2s}
.ft__list a:hover{opacity:1;color:var(--copper-soft)}
.ft__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:var(--s3);border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent);
  font-size:.8rem;opacity:.7}
.ft__zefre{text-decoration:none;transition:color .2s}
.ft__zefre:hover{color:var(--copper-soft)}

/* ─── Reveal koreografisi ────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* JS yoksa içerik daima görünür (progressive enhancement).
     Emniyet ağı: IO hiç tetiklenmezse 2.2s sonra keyframe koşulsuz gösterir. */
  html.js .rv{opacity:0;transform:translateY(18px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
    animation:rv-safety .8s var(--ease) 2.2s forwards}
  html.js .rv.is-in{opacity:1;transform:none;animation:none}
  @keyframes rv-safety{to{opacity:1;transform:none}}
  html.js .rv-d1{transition-delay:.06s}html.js .rv-d2{transition-delay:.12s}
  html.js .rv-d3{transition-delay:.18s}html.js .rv-d4{transition-delay:.24s}
  /* LCP koruması: hero/pagehead başlık ve lead animasyonsuz render edilir
     (opacity:0 başlangıç LCP ölçümünü geçersiz kılar) */
  html.js .hero h1.rv,html.js .pagehead h1.rv,html.js .hero .lead.rv,
  html.js .pagehead .lead.rv{opacity:1;transform:none;transition:none;animation:none}
  .scene__card{animation:float 7s ease-in-out infinite}
  .scene__chip{animation:float 9s 1.2s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-10px) rotate(-1.4deg)}}
}
@media (prefers-reduced-motion:reduce){
  .scene__ring svg{animation:none}
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hero__scene{width:min(100%,400px);margin-top:var(--s4)}
  .detail{grid-template-columns:1fr}
  .detail__aside{position:static}
  .ft__grid{grid-template-columns:1fr 1fr}
  .bento .card{grid-column:span 3 !important}
}
@media (max-width:760px){
  .nav{position:fixed;inset-inline:0;top:64px;background:var(--paper);
    border-bottom:1px solid var(--hairline);box-shadow:var(--shadow-2);
    transform:translateY(-130%);transition:transform .4s var(--ease);z-index:40}
  .nav.is-open{transform:none}
  .nav ul{flex-direction:column;padding:1rem}
  .nav a{padding:.9rem 1.2rem;font-size:1.05rem}
  .burger{display:flex}
  .hd__phone{display:none}
  .hd__cta .btn--primary{padding:.55rem .7rem}
  .bento .card{grid-column:1/-1 !important}
  .form{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
  .section{padding-block:var(--s6)}
}