/* =========================================================
   RUTBA — rutba.com.tr
   Palet    : beton karası zemin + zeytin yeşili + altın vurgu
   Tipografi: Fraunces (başlık) / Archivo (metin) / DM Mono (veri)
   Slogan   : Be Green in the Gray World
   ========================================================= */

:root{
  --ink:#14150F;
  --ink-2:#1B1D15;
  --ink-3:#23261C;
  --yesil:#97A070;              /* RAL 6003 açık tonu, koyu zeminde yazı */
  --yesil-hi:#B4BB8F;
  --yesil-koyu:#424632;         /* RAL 6003 Olive Green — markanın yeşili */
  --gold:#D2AE6D;
  --gold-hi:#F0D9A8;
  --gold-koyu:#684C1C;          /* krem zeminde yazı için gold */
  --krem:#F2EFE6;
  --krem-2:#E5E0D2;

  --on-dark:#E8E7DE;
  --on-dark-mute:rgba(232,231,222,.62);
  --on-light:#26281C;
  --on-light-mute:rgba(38,40,28,.70);
  --hair:rgba(210,174,109,.22);
  --hair-y:rgba(151,160,112,.30);

  --f-display:"Fraunces","Iowan Old Style","Georgia",serif;
  --f-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1320px;
  --ray-w:0px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --doku:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font:400 clamp(15px,1.02vw,16.5px)/1.74 var(--f-body);
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:500;font-family:var(--f-display);letter-spacing:-.005em;line-height:1.05}
p{margin:0 0 1.05em}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite symbol,svg use{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:120;background:var(--gold);color:var(--ink);padding:12px 20px}
.skip:focus{inset-inline-start:12px;top:12px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- ortak tipografi ---------- */
.eyebrow{
  font:600 .78rem/1.5 var(--f-body);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.3rem;
}
.eyebrow--alt{color:var(--gold);margin:1.5rem 0 1.4rem}
.no{
  font:500 .72rem/1 var(--f-mono);letter-spacing:.24em;
  color:var(--yesil);margin:0 0 1.1rem;
}
.no::after{content:"";display:inline-block;width:34px;height:1px;background:var(--hair-y);margin-inline-start:14px;vertical-align:middle}
.h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.08}
.h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.h2--vers{text-transform:uppercase;letter-spacing:.01em;line-height:1.2;font-size:clamp(1.9rem,3.9vw,3.1rem)}
.dev{
  font:700 clamp(2.8rem,7.2vw,6rem)/1 var(--f-body);
  text-transform:uppercase;letter-spacing:-.03em;
}
.lead{max-width:54ch;color:var(--on-dark-mute);font-size:1.04rem;margin-top:1.4rem}
h2+p,.h1+p,.dev+p{margin-top:1.5rem}
h2+.eyebrow--alt,.h1+.eyebrow--alt,.dev+.eyebrow--alt{margin-top:1.5rem}
.yesil{color:var(--yesil)}
.gri{color:var(--on-dark-mute)}
.imza{
  font:500 clamp(1.06rem,1.75vw,1.36rem)/1.5 var(--f-display);
  font-style:italic;color:var(--gold);margin:1.6rem 0 0;
}
.imza--ust{margin:.9rem 0 1.6rem}
.bas{max-width:64ch;margin-bottom:clamp(44px,5vw,72px)}
.link{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px}
.link:hover{color:var(--gold-hi);border-bottom-color:currentColor}

/* ---------- düğmeler ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.92em 1.5em;text-decoration:none;white-space:nowrap;
  font:600 .78rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;transition:.3s var(--ease);
}
.btn .ico{width:1.15em;height:1.15em;flex:none}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn--line{border-color:var(--hair);color:var(--gold)}
.btn--line:hover{border-color:var(--gold);background:rgba(210,174,109,.08)}
.ico{width:1.15em;height:1.15em}

/* ---------- video düğmesi ---------- */
.oynat{display:inline-flex;align-items:center;gap:.9em;color:var(--on-dark)}
.oynat__d{
  display:grid;place-items:center;width:3.1em;height:3.1em;flex:none;
  border:1px solid var(--hair);border-radius:50%;transition:.3s var(--ease);
}
.oynat__d svg{width:1.4em;height:1.4em;fill:currentColor;stroke:none;margin-left:.12em}
.oynat__y{
  font:600 .78rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--hair);padding-bottom:.5em;
}
.oynat:hover .oynat__d{border-color:var(--gold);background:rgba(210,174,109,.1)}
.oynat--sat{margin-top:2rem}

/* =========================================================
   ÜST MENÜ
   ========================================================= */
.nav{position:fixed;inset:0 0 auto;z-index:80;transition:.35s var(--ease)}
.nav::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease);
  background:rgba(20,21,15,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
}
.nav.is-stuck::before{opacity:1}
.nav__in{
  position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(16px,2.2vw,26px) var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.brand{display:grid;justify-items:start;text-decoration:none;margin-inline-end:auto}
.brand__logo{
  display:block;width:auto;height:clamp(56px,5.6vw,80px);
  transition:height .35s var(--ease);
}
.nav.is-stuck .brand__logo{height:clamp(42px,3.6vw,52px)}
.nav__links{display:flex;gap:clamp(14px,2vw,30px)}
.nav__links a{
  text-decoration:none;padding:.5em 0;position:relative;
  font:400 .84rem/1 var(--f-body);letter-spacing:.02em;color:var(--on-dark);
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;width:100%;height:1px;
  background:var(--yesil);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover,.nav__links a.is-on{color:var(--yesil)}
.nav__links a.is-on::after{transform:scaleX(1)}
.nav__end{display:flex;align-items:center;gap:14px}
.burger{display:none;width:34px;height:24px;position:relative}
.burger span{
  position:absolute;left:0;height:1.5px;background:var(--gold);
  transition:.3s var(--ease);
}
.burger span:nth-child(1){top:3px;width:100%}
.burger span:nth-child(2){top:11px;width:100%}
.burger span:nth-child(3){top:19px;width:64%}
.nav.is-open .burger span:nth-child(1){top:11px;transform:rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){top:11px;width:100%;transform:rotate(-45deg)}

/* =========================================================
   SAĞ BÖLÜM GÖSTERGESİ
   ========================================================= */
.ray{
  --d:34px; --h:52px;
  position:fixed;inset-inline-end:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);
  z-index:70;
}
.ray ol{list-style:none;margin:0;padding:0}
.ray li{position:relative;height:var(--h);display:grid;place-items:center}
.ray li+li::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:calc((var(--d) - var(--h))/2);height:calc(var(--h) - var(--d));
  width:1px;background:var(--hair);
}
.ray a{
  position:relative;display:grid;place-items:center;
  width:var(--d);height:var(--d);text-decoration:none;
}
.ray a::before{
  content:"";position:absolute;inset:0;border:1px solid var(--hair);
  background:rgba(20,21,15,.42);backdrop-filter:blur(3px);
  transform:rotate(45deg);transition:.35s var(--ease);
}
.ray a i{
  position:relative;font:500 .66rem/1 var(--f-mono);font-style:normal;
  color:var(--on-dark-mute);transition:color .3s var(--ease);
}
.ray a b{
  position:absolute;inset-inline-end:calc(100% + 16px);white-space:nowrap;
  font:600 .7rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:.3s var(--ease);
}
.ray a:hover::before{border-color:var(--gold)}
.ray a:hover i{color:var(--gold)}
.ray a:hover b,.ray a:focus-visible b{opacity:1;transform:none}
.ray a.is-on::before{background:var(--yesil);border-color:var(--yesil)}
.ray a.is-on i{color:var(--ink);font-weight:500}
/* açık zeminli bölümdeyken */
.ray.is-light a::before{border-color:rgba(38,40,28,.34);background:rgba(242,239,230,.55)}
.ray.is-light li+li::before{background:rgba(38,40,28,.24)}
.ray.is-light a i{color:rgba(38,40,28,.88)}
.ray.is-light a b{color:var(--yesil-koyu)}
.ray.is-light a.is-on::before{background:var(--yesil-koyu);border-color:var(--yesil-koyu)}
.ray.is-light a.is-on i{color:var(--krem)}

/* =========================================================
   ALT BAR — dil + WhatsApp
   ========================================================= */
.altbar{
  position:fixed;inset:auto 0 0;z-index:75;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px var(--pad);pointer-events:none;
}
.altbar::before{
  content:"";position:absolute;inset:-52px 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,21,15,0),rgba(20,21,15,.72) 55%,rgba(20,21,15,.9));
}
.altbar.is-light::before{
  background:linear-gradient(180deg,rgba(232,221,206,0),rgba(232,221,206,.62) 55%,rgba(232,221,206,.86));
}
.altbar>*{pointer-events:auto}
.dil{
  display:flex;align-items:center;gap:.7em;
  font:600 .74rem/1 var(--f-body);letter-spacing:.1em;
}
.dil a{text-decoration:none;color:var(--on-dark-mute);transition:color .25s var(--ease)}
.dil a:hover{color:var(--gold)}
.dil__on{color:var(--gold);border-bottom:1px solid currentColor;padding-bottom:.35em}
.dil i{color:var(--on-dark-mute);opacity:.5;font-style:normal}
.wa{
  display:inline-flex;align-items:center;gap:.75em;text-decoration:none;
  font:600 .74rem/1 var(--f-body);letter-spacing:.08em;color:var(--on-dark);
}
.wa__ikon{position:relative;flex:none;display:block}
.wa svg{
  display:block;width:44px;height:44px;padding:11px;
  border:1px solid var(--hair-y);border-radius:50%;color:var(--yesil);
  background:rgba(20,21,15,.5);backdrop-filter:blur(8px);
  transition:.3s var(--ease);
}
.wa:hover svg,.wa[aria-expanded="true"] svg{background:var(--yesil);color:var(--ink);border-color:var(--yesil)}
/* çevrim içi noktası — düğmede ve panel avatarında */
.wa__nokta,.wa-panel__avatar i{
  position:absolute;right:1px;top:1px;width:10px;height:10px;border-radius:50%;
  background:var(--yesil-hi);box-shadow:0 0 0 2px var(--ink);
}
.wa__nokta::after,.wa-panel__avatar i::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:wa-nabiz 2.4s var(--ease) infinite;
}
@keyframes wa-nabiz{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}

/* ---------- WhatsApp soru paneli ---------- */
.wa-kutu{position:relative}
.wa-panel{
  position:absolute;inset-inline-end:0;bottom:calc(100% + 14px);
  width:min(372px,calc(100vw - 2*var(--pad)));
  max-height:calc(100svh - 150px);overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(160deg,rgba(35,38,28,.97),rgba(20,21,15,.98));
  backdrop-filter:blur(16px);
  border:1px solid rgba(210,174,109,.42);border-radius:22px 22px 6px 22px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75),inset 0 1px 0 rgba(240,217,168,.08);
  color:var(--on-dark);
  transform-origin:100% 100%;
  animation:wa-gir .32s var(--ease);
}
.wa-panel[hidden]{display:none}
@keyframes wa-gir{from{opacity:0;transform:translateY(10px) scale(.97)}}
.wa-panel__bas{
  display:flex;align-items:center;gap:13px;
  padding:18px 18px 16px 20px;border-bottom:1px solid var(--hair);
}
.wa-panel__avatar{
  position:relative;flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--yesil-koyu);border:1px solid rgba(210,174,109,.5);
}
.wa-panel__avatar img{width:auto;height:28px}
.wa-panel__avatar i{right:0;top:auto;bottom:1px;box-shadow:0 0 0 2px var(--ink-2)}
.wa-panel__kim{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.wa-panel__kim b{font:500 1.28rem/1.1 var(--f-display);color:var(--krem)}
.wa-panel__durum{font:500 .8rem/1.3 var(--f-body);letter-spacing:.01em;color:var(--yesil-hi)}
.wa-panel__x{
  flex:none;align-self:flex-start;width:36px;height:36px;border-radius:50%;
  font-size:1.5rem;line-height:1;color:var(--gold);border:1px solid var(--hair);
  transition:.25s var(--ease);
}
.wa-panel__x:hover{border-color:var(--gold);background:rgba(210,174,109,.1)}
.wa-panel__govde{padding:18px 18px 16px}
.wa-panel__balon{
  position:relative;margin:0 0 16px;padding:13px 16px 14px;
  background:rgba(232,231,222,.07);border:1px solid rgba(232,231,222,.08);
  border-radius:4px 16px 16px 16px;
  font:400 .9rem/1.5 var(--f-body);color:var(--on-dark-mute);
}
.wa-panel__balon strong{display:block;margin-bottom:3px;font-weight:600;color:var(--on-dark)}
.wa-panel__sorular{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wa-panel__sorular a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-radius:14px;text-decoration:none;
  font:600 .9rem/1.35 var(--f-body);color:var(--on-dark);
  background:rgba(232,231,222,.035);border:1px solid var(--hair);
  transition:.25s var(--ease);
}
.wa-panel__sorular a::after{
  content:"\2192";flex:none;color:var(--gold);font-weight:400;transition:transform .25s var(--ease);
}
.wa-panel__sorular a:hover,.wa-panel__sorular a:focus-visible{
  background:rgba(151,160,112,.16);border-color:var(--hair-y);
}
.wa-panel__sorular a:hover::after{transform:translateX(3px)}
.wa-panel__serbest{
  display:inline-block;margin:14px 4px 2px;padding-bottom:4px;
  font:600 .8rem/1 var(--f-body);letter-spacing:.04em;color:var(--gold);
  text-decoration:none;border-bottom:1px solid var(--hair);
}
.wa-panel__serbest:hover{border-color:var(--gold)}
/* açık zeminli bölümdeyken */
.altbar.is-light .dil a{color:var(--on-light-mute)}
.altbar.is-light .dil__on{color:var(--yesil-koyu)}
.altbar.is-light .dil i{color:var(--on-light-mute)}
.altbar.is-light .wa{color:var(--on-light)}
.altbar.is-light .wa svg{background:rgba(242,239,230,.6);border-color:rgba(66,70,50,.3);color:var(--yesil-koyu)}
.altbar.is-light .wa__nokta{box-shadow:0 0 0 2px var(--krem)}

/* =========================================================
   BÖLÜM ZEMİNİ
   ========================================================= */
.sec{
  position:relative;isolation:isolate;
  padding-block:clamp(84px,10vw,150px);
}
.sec::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--doku);background-size:180px 180px;
  opacity:.045;mix-blend-mode:overlay;
}
.sec--ozet{background:var(--ink-2)}
.sec--nargile{background:var(--ink-2)}
.veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(20,21,15,.92) 0%,rgba(20,21,15,.62) 46%,rgba(20,21,15,.28) 78%,rgba(20,21,15,.4) 100%),
  linear-gradient(180deg,rgba(20,21,15,.8) 0%,rgba(20,21,15,.3) 30%,rgba(20,21,15,.6) 74%,rgba(20,21,15,.95) 100%)}
.veil--sol{background:
  linear-gradient(90deg,rgba(20,21,15,.97) 0%,rgba(20,21,15,.9) 42%,rgba(20,21,15,.5) 74%,rgba(20,21,15,.35) 100%),
  linear-gradient(180deg,rgba(20,21,15,.8) 0%,rgba(20,21,15,0) 30%,rgba(20,21,15,.85) 100%)}

/* =========================================================
   01 · ANASAYFA
   ========================================================= */
.hero{
  min-height:100svh;display:grid;align-items:center;
  padding-block:clamp(120px,16vh,180px) clamp(110px,14vh,160px);
}
.hero__bg{position:absolute;inset:0;z-index:-2;margin:0}
.hero__bg img,.hero__video{display:block;width:100%;height:100%;object-fit:cover}
.hero__in{max-width:min(100%,var(--maxw))}
.hero__t{font-size:clamp(2.9rem,7.4vw,6.4rem);line-height:1.06;max-width:16ch}
.hero__alt{
  font:400 clamp(1.05rem,2vw,1.5rem)/1.45 var(--f-display);font-style:italic;
  color:var(--gold);margin:1.4rem 0 0;
}
.hero__m{max-width:46ch;color:var(--on-dark-mute);margin-top:1.5rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,40px);margin-top:2.4rem}
.kaydir{
  position:absolute;left:50%;bottom:clamp(56px,8vh,84px);transform:translateX(-50%);
  display:grid;justify-items:center;gap:.8em;margin:0;
  font:600 .66rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-mute);
}
.kaydir span{width:1px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);animation:iner 2.4s var(--ease) infinite}
@keyframes iner{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   02 · RUTBA HAKKINDA
   ========================================================= */
.split{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
.split__t p{color:var(--on-dark-mute);max-width:52ch}
.split__g{margin:0;position:relative}
.split__g img{width:100%;object-fit:cover;aspect-ratio:4/5}
.split__g::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--hair);transform:translate(16px,16px);
}
.veri{display:grid;gap:1.4rem;margin:2.2rem 0 0;padding-top:1.8rem;border-top:1px solid var(--hair)}
.veri dt{font:400 clamp(1.5rem,2.6vw,2.1rem)/1 var(--f-display);color:var(--gold)}
.veri dd{
  margin:.5em 0 0;font:600 .76rem/1.5 var(--f-body);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-mute);
}

/* =========================================================
   03 · BE GREEN IN THE GRAY WORLD
   ========================================================= */
.sec--slogan{min-height:100svh;display:grid;align-items:center;overflow:hidden;background:var(--ink)}
.slogan__t{max-width:56ch}

/* gri → yeşil kareler: yalnızca opacity geçişi (ucuz), gri kopya CSS filtresiyle */
.yesillen{position:relative;aspect-ratio:4/5;margin:calc(-1 * clamp(84px,10vw,150px)) 0 clamp(40px,6vw,64px)}
.yesillen__k{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s var(--ease)}
.yesillen__k.is-on{opacity:1}
.yesillen__k img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yesillen__gri{filter:grayscale(1);transition:opacity 2.6s ease-in-out}
.yesillen__k.is-yesil .yesillen__gri{opacity:0}
/* kenar, üstüne karartma katmanı koymak yerine maskeyle eriyor — kesirli genişlikte çizgi bırakmaz */
.yesillen{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
@media (min-width:1000px){
  .yesillen{position:absolute;inset:0 0 0 auto;width:46%;aspect-ratio:auto;margin:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
  .slogan__t{max-width:min(56ch,44vw)}
}
.slogan__t p{color:var(--on-dark-mute)}
.slogan__t .h1{margin-bottom:.1em}

/* =========================================================
   04 · SOFRA  ·  05 · BARDAK  (ortak düzen)
   ========================================================= */
.ozet{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
.sec--ters .ozet__g{order:-1}
.ozet__g{margin:0;position:relative}
.ozet__g img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cerceve::before,.cerceve::after{
  content:"";position:absolute;width:22px;height:22px;background:var(--yesil);z-index:1;
}
.cerceve::before{top:-9px;left:-9px}
.cerceve::after{bottom:-9px;right:-9px}
.cerceve{outline:1px solid var(--hair);outline-offset:10px}

.madde{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:2rem}
.madde li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.3rem;align-items:start}
.madde__i{grid-column:1;grid-row:1/span 2}
.madde h3{grid-column:2;grid-row:1}
.madde p{grid-column:2;grid-row:2}
.madde__i{
  width:52px;height:52px;padding:13px;flex:none;color:var(--yesil);
  border:1px solid var(--hair-y);border-radius:50%;
}
.madde h3{
  font:600 .86rem/1.5 var(--f-body);letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7em;
}
.madde p{margin:0;color:var(--on-dark-mute);font-size:.96rem;max-width:48ch}
.madde--iki{grid-template-columns:1fr;gap:2.4rem}

/* =========================================================
   06 · NARGİLE
   ========================================================= */
.nargile__ust{display:grid;gap:clamp(32px,4vw,56px);align-items:center;margin-bottom:clamp(56px,6vw,88px)}
.nargile__giris{max-width:var(--maxw)}
.nargile__g{margin:0;position:relative;overflow:hidden}
.nargile__g img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bant{
  margin:clamp(48px,6vw,80px) 0 0;padding:clamp(28px,3.6vw,44px) clamp(24px,4vw,56px);
  border:1px solid var(--hair-y);border-radius:4px;text-align:center;
  background:linear-gradient(180deg,rgba(151,160,112,.07),rgba(151,160,112,.02));
  font:400 clamp(1.1rem,2.3vw,1.7rem)/1.4 var(--f-display);color:var(--gold-hi);
}
.bant__i{display:block;width:30px;height:30px;margin:0 auto 1rem;color:var(--yesil)}
.bant--iki p{margin:0}
.bant--iki p:first-child{
  font:400 clamp(.96rem,1.5vw,1.1rem)/1.6 var(--f-body);color:var(--on-dark-mute);
}
.bant--iki .imza{margin-top:.6rem;color:var(--yesil-hi)}

/* =========================================================
   07 · GAME & MATCH
   ========================================================= */
.oyun__ust{display:grid;gap:clamp(36px,4.4vw,64px);align-items:end;margin-bottom:clamp(28px,3.4vw,44px)}
.oyun__b p{color:var(--on-dark-mute);max-width:44ch}
.oyun__b .imza{color:var(--gold)}
.oyun__ekran{margin:0;position:relative;border:1px solid var(--hair)}
.oyun__ekran img{width:100%;aspect-ratio:16/10;object-fit:cover}
.oyun__ekran figcaption{padding:clamp(22px,2.6vw,32px);background:var(--ink-3)}
.oyun__ekran figcaption p:last-child{
  margin:0;color:var(--on-dark-mute);font-size:.94rem;max-width:56ch;
}
.oyun__sayi{
  display:flex;align-items:center;gap:.6em;margin:0 0 .9rem;
}
.oyun__sayi b{
  font:700 clamp(2.2rem,4.4vw,3.4rem)/.9 var(--f-body);color:var(--yesil);
  letter-spacing:-.03em;
}
.oyun__sayi span{
  font:600 .84rem/1.35 var(--f-body);letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-dark);max-width:14ch;
}
.oyun__i{width:30px;height:30px;color:var(--gold);margin-inline-start:auto;flex:none}
/* "m²" büyük harfe çevrilmesin (M² olur) */
.oyun__sayi .birim{font-style:normal;text-transform:none;letter-spacing:.02em}
.oyun__kart{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,24px)}
.oyun__kart li{
  border:1px solid var(--hair);background:var(--ink-3);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
}
.oyun__kart .oyun__sayi{padding:clamp(20px,2.4vw,28px);margin:0}
.oyun__kart .oyun__i{margin:0;margin-inline-end:.4em;order:-1}
.oyun__kart img{width:100%;aspect-ratio:16/13;object-fit:cover}

/* =========================================================
   AÇIK (KREM) ZEMİNLİ BÖLÜMLER — 02–08 (14 Eki 2026: yalnız 01 ve 09 koyu)
   02–07 krem duvarlı (.sec--duvar), 08 düz krem.
   ========================================================= */
.sec--acik{background:var(--krem);color:var(--on-light)}
.sec--acik::before{opacity:.05;mix-blend-mode:multiply}
.sec--acik .no{color:var(--yesil-koyu)}
.sec--acik .no::after{background:rgba(66,70,50,.3)}
.sec--acik .yesil{color:var(--yesil-koyu)}
.sec--acik p{color:var(--on-light-mute)}
.sec--acik .imza{color:var(--yesil-koyu)}
.sec--acik .eyebrow--alt,.sec--acik .veri dt,.sec--acik .madde h3{color:var(--gold-koyu)}
.sec--acik .veri{border-top-color:rgba(104,76,28,.28)}
.sec--acik .veri dd{color:var(--on-light-mute)}
.sec--acik .split__g::after,.sec--acik .cerceve{border-color:rgba(104,76,28,.4);outline-color:rgba(104,76,28,.4)}
.sec--acik .cerceve::before,.sec--acik .cerceve::after{background:var(--yesil-koyu)}
.sec--acik .madde__i{color:var(--yesil-koyu);border-color:rgba(66,70,50,.32)}
/* 03 — "Gri dünyada" açık zeminde de gri kalsın */
.sec--acik .gri{color:rgba(38,40,28,.5)}
/* 06 — bant */
.sec--acik .bant{
  color:var(--on-light);border-color:rgba(66,70,50,.3);
  background:linear-gradient(180deg,rgba(242,239,230,.72),rgba(242,239,230,.5));
}
.sec--acik .bant__i{color:var(--yesil-koyu)}
.sec--acik .bant--iki p:first-child{color:var(--on-light-mute)}
.sec--acik .bant--iki .imza{color:var(--yesil-koyu)}
/* 07 — ekran ve oyun kartları */
.sec--acik .oyun__ekran,.sec--acik .oyun__kart li{border-color:rgba(104,76,28,.3)}
.sec--acik .oyun__ekran figcaption,.sec--acik .oyun__kart li{background:var(--krem)}
.sec--acik .oyun__ekran figcaption p:last-child{color:var(--on-light-mute)}
.sec--acik .oyun__sayi b{color:var(--yesil-koyu)}
.sec--acik .oyun__sayi span{color:var(--on-light)}
.sec--acik .oyun__i{color:var(--gold-koyu)}

/* --- 02 · 04: yaprak gölgeli krem duvar; yapraklar ve gölge rüzgârda hafifçe oynar --- */
.sec--duvar{background:#E4D4C2;--on-light-mute:rgba(38,40,28,.80)}
.sec--duvar::before{display:none}
.duvar{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.duvar img{position:absolute;max-width:none}
.duvar__zemin,.duvar__golge{inset:0;width:100%;height:100%;object-fit:cover;object-position:20% 50%}
.duvar__golge{inset:-3%;width:106%;height:106%;transform-origin:0 0;opacity:.9}
.duvar__y{height:auto}
.duvar__y--su{top:0;left:0;width:clamp(190px,30vw,640px);transform-origin:0 0}
.duvar__y--sa{bottom:0;left:0;width:clamp(120px,17vw,380px);transform-origin:0 100%}
.duvar__y--sg{bottom:0;right:0;width:clamp(140px,20vw,440px);transform-origin:100% 100%}
.duvar--ters{transform:scaleX(-1)}
@media (prefers-reduced-motion:no-preference){
  .duvar__golge{animation:golge-ruzgar 11s ease-in-out infinite}
  .duvar__y--su{animation:yaprak-ruzgar 7.5s ease-in-out infinite}
  .duvar__y--sa{animation:yaprak-alt 6.8s ease-in-out -2.4s infinite}
  .duvar__y--sg{animation:yaprak-alt 7.6s ease-in-out -5.1s infinite reverse}
  /* kısaltma play-state'i sıfırladığı için duraklatma animasyonlardan SONRA */
  .duvar__golge,.duvar__y{will-change:transform;animation-play-state:paused}
  .duvar.is-oynar .duvar__golge,.duvar.is-oynar .duvar__y{animation-play-state:running}
}
@keyframes yaprak-ruzgar{
  0%,100%{transform:rotate(0)}
  22%{transform:rotate(1.3deg)}
  38%{transform:rotate(.4deg)}
  55%{transform:rotate(1.7deg)}
  78%{transform:rotate(-.5deg)}
}
/* alttaki yapraklar köşeden sabitli, dal gibi sallanır (14 Eki 2026: "hafif bir hareket verebilir miyiz") */
@keyframes yaprak-alt{
  0%,100%{transform:rotate(0) skewX(0)}
  20%{transform:rotate(3.2deg) skewX(-1.2deg)}
  36%{transform:rotate(1.4deg) skewX(-.4deg)}
  58%{transform:rotate(4deg) skewX(-1.6deg)}
  80%{transform:rotate(-1.2deg) skewX(.6deg)}
}
@keyframes golge-ruzgar{
  0%,100%{transform:translate(0,0) skewX(0)}
  30%{transform:translate(7px,3px) skewX(-.8deg)}
  52%{transform:translate(3px,1px) skewX(-.3deg)}
  74%{transform:translate(9px,4px) skewX(-1.1deg)}
}
.acik__ust{display:grid;gap:clamp(36px,4.4vw,64px);align-items:center;margin-bottom:clamp(44px,5vw,72px)}
.acik__t p{max-width:50ch}
.acik__g{margin:0}
.acik__g img{width:100%;aspect-ratio:16/10;object-fit:cover}

.rozet{
  list-style:none;margin:0 0 clamp(44px,5vw,72px);padding:clamp(24px,3vw,36px);
  display:grid;gap:clamp(22px,3vw,36px);
  background:var(--yesil-koyu);color:var(--krem);border-radius:4px;
}
.rozet li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:start;align-content:start}
.rozet__i{grid-column:1;grid-row:1/span 2}
.rozet h3{grid-column:2;grid-row:1}
.sec--acik .rozet p{grid-column:2;grid-row:2}
.rozet__i{width:34px;height:34px;color:var(--gold);flex:none}
.rozet h3{
  font:600 .82rem/1.4 var(--f-body);letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.55em;
}
.sec--acik .rozet p{margin:0;color:rgba(242,239,230,.82);font-size:.9rem}

.acik__kart{list-style:none;margin:0;padding:0;display:grid;gap:clamp(24px,3vw,36px)}
.acik__kart img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:1.2rem}
.acik__kart h3{
  display:flex;align-items:center;gap:.55em;margin-bottom:.6rem;
  font:600 .88rem/1.4 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-light);
}
.acik__i{width:20px;height:20px;color:var(--yesil-koyu);flex:none}
.sec--acik .acik__kart p{margin:0;font-size:.94rem}

.cta{
  margin-top:clamp(44px,5vw,72px);padding:clamp(26px,3.2vw,40px) clamp(24px,4vw,52px);
  background:var(--yesil-koyu);border-radius:4px;
  display:grid;gap:22px;align-items:center;
}
.cta p{
  margin:0;display:flex;align-items:center;gap:.7em;
  font:400 clamp(1.1rem,2.2vw,1.55rem)/1.35 var(--f-display);
}
.sec--acik .cta p{color:var(--krem)}
.cta__i{width:28px;height:28px;color:var(--gold);flex:none}
.cta .btn--gold{justify-self:start}

/* =========================================================
   09 · İLETİŞİM
   ========================================================= */
.iletisim{display:grid;gap:clamp(40px,5vw,80px)}
.bignum{
  display:inline-block;margin:1.6rem 0;text-decoration:none;
  font:400 clamp(1.9rem,4.2vw,3.1rem)/1 var(--f-display);color:var(--gold);
  transition:color .25s var(--ease);
}
.bignum:hover{color:var(--gold-hi)}
.iletisim__d{display:flex;flex-wrap:wrap;gap:14px}
.iletisim__i{display:grid;gap:clamp(24px,3vw,36px);align-content:start}
.bilgi{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.bilgi__i{width:26px;height:26px;color:var(--yesil);flex:none;margin-top:.2rem}
.bilgi h3{
  font:600 .82rem/1.4 var(--f-body);letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7em;
}
.bilgi p{margin:0;color:var(--on-dark-mute);font-size:.95rem}
.saat{border-collapse:collapse;width:100%;max-width:24rem;font-size:.92rem}
.saat th{text-align:start;font-weight:400;color:var(--on-dark-mute);padding:.32em 0}
.saat td{text-align:end;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  color:var(--on-dark);padding:.32em 0}
.sosyal{display:flex;flex-wrap:wrap;gap:1.1rem}
.sosyal a{display:inline-flex;align-items:center;gap:.5em;font-size:.92rem;border-bottom:0}
.sosyal svg{width:17px;height:17px}
.konum{margin-top:clamp(44px,5vw,72px);border:1px solid var(--hair);line-height:0}
.konum__h{width:100%;height:clamp(280px,42vw,430px);border:0;filter:grayscale(1) contrast(.9) brightness(.82)}

/* =========================================================
   ALT ALAN
   ========================================================= */
.foot{
  border-top:1px solid var(--hair);padding:clamp(48px,6vw,76px) 0 clamp(84px,9vw,110px);
  background:var(--ink);
}
.foot__in{display:grid;gap:clamp(30px,4vw,52px)}
.brand--foot .brand__logo{height:clamp(84px,9vw,104px)}
.foot__slogan{
  margin:1rem 0 0;font:400 1.02rem/1.4 var(--f-display);font-style:italic;color:var(--yesil);
}
.foot__nav{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-content:start}
.foot__nav a{text-decoration:none;font-size:.92rem;color:var(--on-dark-mute);transition:color .25s var(--ease)}
.foot__nav a:hover{color:var(--gold)}
.foot__meta p{margin:0 0 .5em;font-size:.92rem;color:var(--on-dark-mute)}
.foot__cr{margin-top:1.2rem !important;font-size:.82rem !important;opacity:.7}

/* =========================================================
   GİRİŞ HAREKETİ
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* =========================================================
   GENİŞ EKRANLAR
   ========================================================= */
@media (min-width:720px){
  .split,.ozet,.iletisim,.acik__ust,.nargile__ust{grid-template-columns:1fr 1fr}
  .veri{grid-template-columns:1fr 1fr;gap:2rem}
  .madde--iki{grid-template-columns:1fr 1fr;gap:2.6rem 3rem}
  .oyun__kart,.acik__kart{grid-template-columns:repeat(2,1fr)}
  .rozet{grid-template-columns:repeat(3,1fr)}
  .cta{grid-template-columns:1fr auto}
  .cta .btn--gold{justify-self:end}
  .foot__in{grid-template-columns:1.2fr 1fr 1fr}
}
@media (min-width:1000px){
  :root{--ray-w:88px}
  .wrap{padding-inline-end:calc(var(--pad) + var(--ray-w));max-width:calc(var(--maxw) + var(--ray-w))}
  .oyun__ust{grid-template-columns:.85fr 1.15fr}
  .oyun__kart{grid-template-columns:repeat(3,1fr)}
  .acik__kart{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1.05fr .95fr}
  .nargile__ust{grid-template-columns:1fr 1.15fr}
  .altbar{padding-inline:calc(var(--pad)) calc(var(--pad) + var(--ray-w))}
}

/* =========================================================
   DAR EKRANLAR
   ========================================================= */
@media (max-width:999px){
  .ray{display:none}
}
@media (max-width:860px){
  .nav__links{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;justify-content:center;align-items:center;gap:2rem;
    background:rgba(20,21,15,.97);backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transition:.35s var(--ease);
  }
  .nav.is-open .nav__links{opacity:1;visibility:visible}
  .nav__links a{font-size:1.5rem;font-family:var(--f-display)}
  .burger{display:block}
  .nav__rez{display:none}
  .hero__cta{gap:20px}
  .kaydir{display:none}
  .wa span{display:none}
  .altbar{padding-block:12px}
  .split__g::after{display:none}
}
@media (max-width:520px){
  .madde li{grid-template-columns:1fr;gap:.9rem}
  .madde__i{width:44px;height:44px;padding:11px}
  .oyun__sayi{flex-wrap:wrap}
  .oyun__i{margin-inline-start:0}
  .cerceve{outline-offset:6px}
  .cerceve::before,.cerceve::after{width:16px;height:16px}
}

/* =========================================================
   HAREKET AZALTMA
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
}

/* =========================================================
   ŞU AN AÇIK / KAPALI ROZETİ
   ========================================================= */
.durum{
  display:inline-flex;align-items:center;gap:.5em;margin-inline-start:.9em;
  font:600 .74rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-dark-mute);vertical-align:middle;
}
.durum i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.durum em{font-style:normal}
.durum.is-acik{color:var(--yesil-hi)}

/* =========================================================
   VİDEO KATMANI
   ========================================================= */
.vid{
  position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  padding:clamp(20px,5vw,64px);background:rgba(20,21,15,.94);backdrop-filter:blur(10px);
}
.vid__c{width:100%;max-width:1100px;aspect-ratio:16/9;background:#000}
.vid__c iframe{width:100%;height:100%;border:0}
.vid__x{
  position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  width:46px;height:46px;font-size:1.9rem;line-height:1;color:var(--gold);
  border:1px solid var(--hair);border-radius:50%;
}
.vid__x:hover{border-color:var(--gold);background:rgba(210,174,109,.1)}

/* =========================================================
   SAĞDAN SOLA (ARAPÇA · /ar/)
   Yerleşim mantıksal özelliklerle kendiliğinden aynalanıyor; burada yalnızca
   yöne bağlı süsler ve Arapça yazının kuralları var.
   ========================================================= */
:root[lang="ar"]{
  --f-display:"Noto Naskh Arabic","Fraunces","Iowan Old Style","Georgia",serif;
  --f-body:"IBM Plex Sans Arabic","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* Arapça harfler birbirine bağlanır: harf aralığı bitişik yazıyı koparır, büyük harf ve italik yok */
[lang="ar"] body *{letter-spacing:0 !important;text-transform:none !important}
[lang="ar"] .hero__alt,[lang="ar"] .imza,[lang="ar"] .foot__slogan{font-style:normal}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .hero__t{line-height:1.35}
[lang="ar"] body{line-height:1.9}
[lang="ar"] [lang="tr"],[lang="ar"] [lang="en"]{font-family:"Archivo",sans-serif}

[dir="rtl"] .nav__links a::after{transform-origin:right}
[dir="rtl"] .ray a b{transform:translateX(-8px)}
[dir="rtl"] .ray a:hover b,[dir="rtl"] .ray a:focus-visible b{transform:none}
[dir="rtl"] .wa-panel{border-radius:22px 22px 22px 6px;transform-origin:0 100%}
[dir="rtl"] .wa-panel__sorular a::after{content:"\2190"}
[dir="rtl"] .wa-panel__sorular a:hover::after{transform:translateX(-3px)}
[dir="rtl"] .split__g::after{transform:translate(-16px,16px)}
[dir="rtl"] .veil{background:
  linear-gradient(270deg,rgba(20,21,15,.92) 0%,rgba(20,21,15,.62) 46%,rgba(20,21,15,.28) 78%,rgba(20,21,15,.4) 100%),
  linear-gradient(180deg,rgba(20,21,15,.8) 0%,rgba(20,21,15,.3) 30%,rgba(20,21,15,.6) 74%,rgba(20,21,15,.95) 100%)}
[dir="rtl"] .duvar{transform:scaleX(-1)}
[dir="rtl"] .duvar--ters{transform:none}
@media (min-width:1000px){
  [dir="rtl"] .yesillen{inset:0 auto 0 0;
    -webkit-mask-image:linear-gradient(270deg,transparent,#000 22%);mask-image:linear-gradient(270deg,transparent,#000 22%)}
}
[dir="rtl"] .ico--yon{transform:scaleX(-1)}
/* telefon numarası sağdan sola akışta grupları ters dizmesin */
[dir="rtl"] a[href^="tel:"].bignum,[dir="rtl"] .foot a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
/* Latin büyük harfli etiketler için seçilen küçük puntolar Arapçada okunmuyor */
[lang="ar"] .eyebrow,[lang="ar"] .veri dd,[lang="ar"] .madde h3,[lang="ar"] .rozet h3,
[lang="ar"] .acik__kart h3,[lang="ar"] .bilgi h3,[lang="ar"] .oyun__sayi span,[lang="ar"] .durum,
[lang="ar"] .btn,[lang="ar"] .dil,[lang="ar"] .wa,[lang="ar"] .kaydir,[lang="ar"] .ray a b{font-size:.95rem}
[lang="ar"] .nav__links a{font-size:.98rem}

/* =========================================================
   SÜZÜLEN YAPRAKLAR — 01, 02, 04, 05, 06, 07, 08 (03'te bilerek yok)
   Ağaçtan düşen yaprak gibi (14 Eki 2026, müşteri: "balık gibi yüzmesin"):
   üç katman — .suzul__y bölümün tepesinden dibine sabit hızla iner,
   .suzul__s sarkaç gibi sağa sola salınır (ortada hızlı, uçlarda yavaşlayıp
   hafifçe yükselir, salınım yönüne eğilir), img kendi ekseninde hafifçe döner.
   Yükseklik (--h) ve süreler js/main.js'te bölüm boyuna göre hesaplanır.
   Yazının ARKASINDAN geçer (z-index:-1).
   ========================================================= */
.suzul{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.suzul__y{position:absolute;top:0;left:var(--x);width:var(--g);opacity:var(--o,.92)}
.suzul__s{display:block}
.suzul__y img{display:block;width:100%;height:auto}
.sec--acik .suzul__y img{filter:drop-shadow(12px 16px 5px rgba(84,62,32,.2))}
.suzul__y--yakin img,.sec--acik .suzul__y--yakin img{filter:blur(2.5px)}
@media (prefers-reduced-motion:no-preference){
  .suzul__y{animation:suzul-dus var(--sure) linear var(--gec) infinite}
  .suzul__s{animation:suzul-salin var(--sal) var(--gec2) infinite alternate}
  .suzul__y img{animation:suzul-cevir var(--cev) ease-in-out var(--gec2) infinite alternate}
  /* kısaltma play-state'i sıfırladığı için duraklatma animasyonlardan SONRA */
  .suzul__y,.suzul__s,.suzul__y img{will-change:transform;animation-play-state:paused}
  .suzul.is-oynar .suzul__y,.suzul.is-oynar .suzul__s,.suzul.is-oynar .suzul__y img{animation-play-state:running}
}
@media (prefers-reduced-motion:reduce){.suzul{display:none}}
/* düşüş: tepenin üstünden dibin altına; --kay rüzgârın hafif yan kaydırması */
@keyframes suzul-dus{
  0%{transform:translate3d(0,-140px,0)}
  100%{transform:translate3d(var(--kay),calc(var(--h) + 40px),0)}
}
/* sarkaç: uca doğru yavaşla (ease-out), merkeze doğru hızlan (ease-in);
   alternate yönü çevirince zamanlama da kendiliğinden ters döner */
@keyframes suzul-salin{
  0%{transform:translate(calc(var(--s) * -1),0) rotate(var(--a));animation-timing-function:cubic-bezier(.45,0,.75,.55)}
  50%{transform:translate(0,var(--dip)) rotate(0deg);animation-timing-function:cubic-bezier(.25,.45,.55,1)}
  100%{transform:translate(var(--s),0) rotate(calc(var(--a) * -1))}
}
@keyframes suzul-cevir{
  0%{transform:rotate(var(--r0)) rotateX(8deg)}
  100%{transform:rotate(var(--r1)) rotateX(52deg)}
}

/* =========================================================
   RUSÇA (/ru/) — Kiril harfler için yedek aileler; Latin harf ve rakamlar mevcut fontta kalır
   ========================================================= */
:root[lang="ru"]{
  --f-display:"Fraunces","Literata","Iowan Old Style","Georgia",serif;
  --f-body:"Archivo","Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}