/* ══════════════════════════════════════════════════════════════
   EŞİK · ortak stil katmanı
   4 tema tek token setiyle sürülür. Canlı katman JS'ten gelir.
   ══════════════════════════════════════════════════════════════ */

:root{
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'Space Grotesk',ui-monospace,monospace;
  --w:min(1180px,92vw);
  --ease:cubic-bezier(.22,1,.36,1);
  --ay:.6;
  --derinlik:1;
}

/* ── TEMA 1 · OBSİDYEN & ALTIN TOZU (ateş) ───────────────────── */
[data-theme="obsidyen"]{
  --bg:#07060B; --bg2:#0C0A12; --bg3:#12101A;
  --ink:#EDE7DA; --ink2:#B8AF9C; --dim:#6E6656;
  --vurgu:#C9A227; --vurgu2:#E8A33D; --karsit:#7A5FCF;
  --cizgi:rgba(201,162,39,.16); --cam:rgba(255,255,255,.028);
  --toz:201,162,39; --glow:rgba(201,162,39,.20);
  --font-h:var(--serif); --h-w:300; --h-sp:-.01em; --h-tt:none;
  --kart-r:2px; --grain:.035;
}
/* ── TEMA 2 · SİSLİ CAM & İRİDESAN (su) ──────────────────────── */
[data-theme="sis"]{
  --bg:#EFEBF7; --bg2:#E5DDF2; --bg3:#DAD2EC;
  --ink:#241D33; --ink2:#4A4262; --dim:#8981A0;
  --vurgu:#7B5FA8; --vurgu2:#4FA8A0; --karsit:#D98BA8;
  --cizgi:rgba(60,40,100,.14); --cam:rgba(255,255,255,.5);
  --toz:123,95,168; --glow:rgba(123,95,168,.18);
  --font-h:var(--serif); --h-w:400; --h-sp:0; --h-tt:none;
  --kart-r:22px; --grain:.02;
}
/* ── TEMA 3 · EL YAZMASI & TEZHİP (toprak) ───────────────────── */
[data-theme="yazma"]{
  --bg:#170F0A; --bg2:#1F150D; --bg3:#291C12;
  --ink:#F0E3CC; --ink2:#C4AF8C; --dim:#8A7355;
  --vurgu:#C9A227; --vurgu2:#D9762B; --karsit:#9B2226;
  --cizgi:rgba(201,162,39,.24); --cam:rgba(201,162,39,.035);
  --toz:201,162,39; --glow:rgba(155,34,38,.22);
  --font-h:var(--serif); --h-w:500; --h-sp:.01em; --h-tt:none;
  --kart-r:3px; --grain:.075;
}
/* ── TEMA 4 · BRUTALİST-MİSTİK (hava) ────────────────────────── */
[data-theme="hava"]{
  --bg:#000; --bg2:#070707; --bg3:#0E0E0E;
  --ink:#FFF; --ink2:#B5B5B5; --dim:#6A6A6A;
  --vurgu:#FF3B00; --vurgu2:#FF3B00; --karsit:#FFF;
  --cizgi:rgba(255,255,255,.14); --cam:rgba(255,255,255,.02);
  --toz:255,255,255; --glow:rgba(255,59,0,.22);
  --font-h:var(--mono); --h-w:400; --h-sp:-.03em; --h-tt:uppercase;
  --kart-r:0px; --grain:0;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.75;
  overflow-x:hidden; letter-spacing:.005em;
  transition:background 1.2s var(--ease), color 1.2s var(--ease);
}
body::after{
  content:''; position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}30%{transform:translate(3%,-8%)}50%{transform:translate(-4%,6%)}70%{transform:translate(6%,3%)}90%{transform:translate(-2%,-4%)}}

#toz{position:fixed;inset:0;z-index:0;pointer-events:none}
main{position:relative;z-index:1}

/* ── tipografi ───────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--font-h);font-weight:var(--h-w);letter-spacing:var(--h-sp);
  text-transform:var(--h-tt);line-height:1.06}
h1{font-size:clamp(2.9rem,7.5vw,6rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1}
h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25}
em{font-style:italic;color:var(--vurgu2)}
[data-theme="hava"] em{font-style:normal;color:var(--vurgu)}

.etiket{font-family:var(--mono);font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--vurgu);display:inline-flex;align-items:center;gap:.8em}
.etiket::before{content:'';width:26px;height:1px;background:var(--vurgu);opacity:.55}
.alt{color:var(--ink2);font-size:clamp(1rem,1.5vw,1.14rem);max-width:56ch;line-height:1.85}
.kucuk{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sarma{width:var(--w);margin-inline:auto}
section{padding:clamp(6rem,14vh,11rem) 0;position:relative}

/* ── perde ───────────────────────────────────────────────────── */
#perde{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:grid;place-items:center;text-align:center;
  transition:opacity 1.6s var(--ease),visibility 1.6s}
#perde.acik{opacity:0;visibility:hidden}
#perde .ic{display:grid;gap:2.6rem;justify-items:center;padding:2rem}
#perde p{color:var(--dim);font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;
  font-family:var(--mono);max-width:30ch;line-height:2.2}
.gir{background:none;border:1px solid var(--cizgi);color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.36em;text-transform:uppercase;
  padding:1.15rem 3rem;border-radius:var(--kart-r);transition:.5s var(--ease)}
.gir:hover{border-color:var(--vurgu);color:var(--vurgu);letter-spacing:.46em}

/* ── mühür ───────────────────────────────────────────────────── */
.muhur{width:104px;height:104px;color:var(--vurgu)}
.muhur .d1{animation:don 68s linear infinite;transform-origin:50% 50%}
.muhur .d2{animation:don 44s linear infinite reverse;transform-origin:50% 50%}
.muhur .nb{animation:nefes 6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes don{to{transform:rotate(360deg)}}
@keyframes nefes{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

/* ── üst bar ─────────────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:900;padding:1.1rem 0;
  backdrop-filter:blur(18px);background:color-mix(in srgb,var(--bg) 68%,transparent);
  border-bottom:1px solid transparent;transition:.6s var(--ease)}
header.kaydi{border-bottom-color:var(--cizgi);padding:.7rem 0}
header .sarma{display:flex;align-items:center;justify-content:space-between;gap:1rem}
/* ── marka · TIΞCHO ────────────────────────────────────────────
   Ortadaki Ξ normal bir E değil, ürünün yankı işaretidir.
   Metin değil çizim olarak konuyor: her yazı tipinde aynı görünsün
   ve her dilde aynı kalsın diye.                                 */
.marka{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.marka > svg{width:26px;height:26px;color:var(--vurgu);flex-shrink:0}
.marka .soz{font-family:var(--mono);font-size:.78rem;letter-spacing:.42em;
  text-transform:uppercase;display:inline-flex;align-items:center;font-weight:500}
.marka .xi{width:.62em;height:1em;margin:0 .40em 0 .06em;color:var(--vurgu);
  vertical-align:-.06em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* yankı halkaları — dışa doğru yayılıp sönerler */
.muhur .yh{opacity:0;transform-origin:50% 50%;animation:yanki 4.6s ease-out infinite}
.muhur .y2{animation-delay:1.53s}
.muhur .y3{animation-delay:3.06s}
@keyframes yanki{
  0%{opacity:0;transform:scale(.42)}
  18%{opacity:.55}
  100%{opacity:0;transform:scale(2.35)}
}
.arac{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}
.nav{display:none;gap:1.6rem}
@media(min-width:860px){.nav{display:flex}}
.nav a{color:var(--ink2);text-decoration:none;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;transition:.35s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--vurgu)}

/* üye / misafir görünürlüğü — oturum belli olana kadar üyeye özel
   parçalar gizli durur, böylece misafirde yanıp sönmez */
[data-uye]{display:none}
html.uye-var [data-uye]{display:revert}
html.uye-var [data-misafir]{display:none !important}

/* oturum düğmesi */
.oturum-btn{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  border:1px solid var(--cizgi);border-radius:99px;padding:.5rem .95rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink2);transition:.4s var(--ease);white-space:nowrap}
.oturum-btn:hover{border-color:var(--vurgu);color:var(--vurgu)}
.oturum-btn .ob-hak{display:inline-grid;place-items:center;min-width:18px;height:18px;
  border-radius:99px;background:var(--vurgu);color:var(--bg);font-size:.58rem;
  letter-spacing:0;padding:0 5px}

/* ── mobil menü ────────────────────────────────────────────────
   Düğme Ξ işaretinin kendisi: üç yatay çizgi zaten menü simgesidir.
   Ayrı bir hamburger ikonu koymak markayı ikiye bölerdi.
   Açılınca üç çizgi çarpıya dönüşür.                            */
.menu-btn{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
  background:none;border:1px solid var(--cizgi);border-radius:99px;
  color:var(--vurgu);cursor:pointer;transition:.4s var(--ease)}
.menu-btn svg{width:17px;height:17px;overflow:visible}
.menu-btn:hover{border-color:var(--vurgu)}
.menu-btn .c1,.menu-btn .c2,.menu-btn .c3{transition:.45s var(--ease);transform-origin:center}
.menu-btn[aria-expanded="true"]{border-color:var(--vurgu);
  background:color-mix(in srgb,var(--vurgu) 14%,transparent)}
.menu-btn[aria-expanded="true"] .c1{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .c2{opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded="true"] .c3{transform:translateY(-5px) rotate(-45deg)}
@media(min-width:860px){ .menu-btn{display:none} }

.mobil-menu{position:fixed;left:0;right:0;top:0;z-index:890;
  background:color-mix(in srgb,var(--bg) 97%,transparent);
  backdrop-filter:blur(24px);border-bottom:1px solid var(--cizgi);
  padding:5.4rem 0 2rem;
  transform:translateY(-102%);transition:transform .55s var(--ease);
  max-height:100svh;overflow-y:auto}
.mobil-menu.acik{transform:translateY(0)}
.mobil-menu nav{width:var(--w);margin-inline:auto;display:grid}
.mobil-menu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem .2rem;border-bottom:1px solid var(--cizgi);
  color:var(--ink);text-decoration:none;
  font-family:var(--font-h);font-size:1.5rem;font-weight:var(--h-w);
  transition:.35s var(--ease)}
.mobil-menu a:last-child{border-bottom:none}
.mobil-menu a:hover,.mobil-menu a:active{color:var(--vurgu);padding-left:.9rem}
.mobil-menu a span{font-family:var(--mono);font-size:.55rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim);flex-shrink:0}
.mobil-menu a[aria-current] span{color:var(--vurgu)}
.menu-perde{position:fixed;inset:0;z-index:880;background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:.45s var(--ease)}
.menu-perde.acik{opacity:1;visibility:visible}

/* ── giriş perdesi · marka kilidi ──────────────────────────────
   Yankı halkaları merkezden yayılırken markanın üstünde durması
   için ikisi tek bir dikey yığında; harfler halkalardan sonra,
   yavaşça belirir.                                              */
#perde .kilit-marka{display:grid;justify-items:center;gap:1.9rem}
#perde .soz{font-family:var(--mono);font-size:clamp(.86rem,3.4vw,1.05rem);
  letter-spacing:.62em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;padding-left:.62em;
  opacity:0;animation:markaBelir 2.2s var(--ease) .55s forwards}
#perde .soz .xi{width:.64em;height:1em;margin:0 .46em 0 .1em;color:var(--vurgu)}
#perde .marka-alt{font-family:var(--mono);font-size:.54rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--dim);
  opacity:0;animation:markaBelir 2.2s var(--ease) 1.25s forwards}
@keyframes markaBelir{from{opacity:0;letter-spacing:1.1em;filter:blur(6px)}
                      to{opacity:1;filter:blur(0)}}

.ses-btn{display:flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--cizgi);
  color:var(--ink2);cursor:pointer;padding:.5rem .95rem;border-radius:99px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;transition:.4s var(--ease)}
.ses-btn:hover,.ses-btn.aktif{border-color:var(--vurgu);color:var(--vurgu)}
.dalga{display:flex;align-items:flex-end;gap:1.5px;height:11px}
.dalga i{width:2px;background:currentColor;height:20%;transition:height .1s linear}

/* ── genel bileşenler ────────────────────────────────────────── */
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.8rem}
.dugme{display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 2.1rem;
  border-radius:var(--kart-r);text-decoration:none;cursor:pointer;border:1px solid var(--vurgu);
  background:var(--vurgu);color:var(--bg);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;transition:.45s var(--ease)}
.dugme:hover{transform:translateY(-2px);box-shadow:0 14px 40px var(--glow)}
.dugme.bos{background:none;color:var(--ink);border-color:var(--cizgi)}
.dugme.bos:hover{border-color:var(--vurgu);color:var(--vurgu);box-shadow:none}
.dugme:disabled{opacity:.45;cursor:wait}

.kart{background:var(--cam);border:1px solid var(--cizgi);border-radius:var(--kart-r);
  padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden;
  backdrop-filter:blur(10px);transition:.55s var(--ease)}
.kart:hover{border-color:color-mix(in srgb,var(--vurgu) 55%,transparent)}
.kart::before{content:'';position:absolute;inset:0;opacity:0;transition:.6s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 62%)}
.kart:hover::before{opacity:1}

.gel{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.gel.geldi{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .gel{opacity:1;transform:none}
}

.uyari{margin-top:1.6rem;padding:1rem 1.2rem;border-left:2px solid var(--vurgu2);
  background:var(--cam);font-size:.8rem;color:var(--ink2);line-height:1.7}
.ayrac{display:flex;align-items:center;gap:1.4rem;margin:2.6rem 0}
.ayrac::before,.ayrac::after{content:'';flex:1;height:1px;background:var(--cizgi)}
.ayrac span{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}

/* ── formlar ─────────────────────────────────────────────────── */
.alan{display:grid;gap:.45rem}
.alan label{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}
.alan input,.alan select{background:var(--cam);border:1px solid var(--cizgi);border-radius:var(--kart-r);
  padding:.9rem 1.1rem;color:var(--ink);font-family:var(--sans);font-size:.95rem;
  transition:.4s var(--ease);width:100%}
.alan input::placeholder{color:var(--dim)}
.alan input:focus,.alan select:focus{outline:none;border-color:var(--vurgu);background:var(--bg2)}
.form{display:grid;gap:.6rem}
@media(min-width:620px){.form.yatay{grid-template-columns:1fr auto}}
.form input{background:var(--cam);border:1px solid var(--cizgi);border-radius:var(--kart-r);
  padding:1.1rem 1.3rem;color:var(--ink);font-family:var(--sans);font-size:.95rem;
  transition:.4s var(--ease);width:100%}
.form input::placeholder{color:var(--dim)}
.form input:focus{outline:none;border-color:var(--vurgu);background:var(--bg2)}
.sira{margin-top:1.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--vurgu);
  text-transform:uppercase;min-height:1.4em}

/* ═════════════════════════════════════════════════════════════
   ALT SES BARI
   ═════════════════════════════════════════════════════════════ */
body{padding-bottom:74px}

.ses-bar{position:fixed;left:0;right:0;bottom:0;z-index:950;
  font-family:var(--mono);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(22px) saturate(1.2);
  border-top:1px solid var(--cizgi);
  transition:.7s var(--ease)}
.ses-bar.calisiyor{border-top-color:color-mix(in srgb,var(--vurgu) 55%,transparent);
  box-shadow:0 -22px 60px -30px var(--glow)}

/* ── şerit ── */
.sb-serit{width:var(--w);margin-inline:auto;display:flex;align-items:center;gap:1rem;
  height:60px;padding:0}
.sb-guc{width:30px;height:30px;flex-shrink:0;border:none;background:none;cursor:pointer;
  position:relative;display:grid;place-items:center;color:var(--vurgu)}
.sb-halka{position:absolute;inset:0;border:1px solid var(--cizgi);border-radius:50%;
  transition:.6s var(--ease)}
.sb-nokta{width:7px;height:7px;border-radius:50%;background:var(--dim);
  transition:.6s var(--ease)}
.sb-guc:hover .sb-halka{border-color:var(--vurgu)}
.ses-bar.calisiyor .sb-halka{border-color:var(--vurgu);animation:sbnab 4.2s ease-in-out infinite}
.ses-bar.calisiyor .sb-nokta{background:var(--vurgu);box-shadow:0 0 12px var(--vurgu)}
@keyframes sbnab{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.22);opacity:1}}

.sb-dalga{flex:1;min-width:60px;height:34px;display:block}

.sb-bilgi{display:none;flex-direction:column;gap:.15rem;min-width:0;flex-shrink:0;
  max-width:38ch;text-align:right}
@media(min-width:720px){.sb-bilgi{display:flex}}
.sb-bilgi b{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--vurgu);font-weight:400}
.sb-bilgi small{font-size:.58rem;letter-spacing:.1em;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sb-hacim{display:none;flex-shrink:0}
@media(min-width:520px){.sb-hacim{display:block}}

.sb-ac{width:30px;height:30px;flex-shrink:0;border:1px solid var(--cizgi);background:none;
  color:var(--ink2);cursor:pointer;border-radius:50%;display:grid;place-items:center;
  transition:.5s var(--ease)}
.sb-ac svg{width:15px;height:15px;transition:.5s var(--ease)}
.sb-ac:hover{border-color:var(--vurgu);color:var(--vurgu)}
.ses-bar.acik .sb-ac svg{transform:rotate(180deg)}

/* ── panel ── */
.sb-panel{width:var(--w);margin-inline:auto;overflow:hidden;
  max-height:0;opacity:0;transition:max-height .7s var(--ease),opacity .5s var(--ease),padding .7s var(--ease)}
.ses-bar.acik .sb-panel{max-height:min(62vh,560px);opacity:1;padding:1.6rem 0 .4rem;overflow-y:auto}
.sb-grid{display:grid;gap:1.8rem;grid-template-columns:1fr}
@media(min-width:780px){.sb-grid{grid-template-columns:repeat(3,1fr);gap:2.4rem}}
.sb-blok{display:grid;align-content:start;gap:.7rem}
.sb-baslik{font-size:.55rem;letter-spacing:.36em;text-transform:uppercase;color:var(--vurgu);
  display:flex;align-items:center;gap:.7em}
.sb-baslik::after{content:'';flex:1;height:1px;background:var(--cizgi)}

.sb-katmanlar,.sb-cipler{display:flex;flex-wrap:wrap;gap:.35rem}
.sb-kat,.sb-cip{background:none;border:1px solid var(--cizgi);color:var(--dim);cursor:pointer;
  padding:.42rem .7rem;border-radius:99px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;transition:.35s var(--ease)}
.sb-kat i,.sb-cip i{font-style:normal;font-size:.48rem;opacity:.55;margin-left:.25em}
.sb-kat:hover,.sb-cip:hover{border-color:var(--vurgu);color:var(--ink)}
.sb-kat.acik,.sb-cip.acik{border-color:var(--vurgu);color:var(--vurgu);
  background:color-mix(in srgb,var(--vurgu) 12%,transparent)}

.sb-kaydiraclar{display:grid;gap:.55rem}
.sb-kay{display:grid;gap:.2rem;cursor:pointer}
.sb-kay-ad{display:flex;justify-content:space-between;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink2)}
.sb-kay-ad em{font-style:normal;color:var(--vurgu);font-size:.56rem}

.sb-not{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--cizgi);
  font-family:var(--sans);font-size:.72rem;line-height:1.75;color:var(--dim);letter-spacing:0}
.sb-not b{color:var(--ink2);font-weight:400}
.sb-durum{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;color:var(--vurgu);opacity:.75}

/* kaydıraç görünümü */
.ses-bar input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;
  background:none;cursor:pointer}
.sb-hacim input[type=range]{width:82px}
.ses-bar input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--cizgi)}
.ses-bar input[type=range]::-moz-range-track{height:1px;background:var(--cizgi)}
.ses-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;
  border-radius:50%;background:var(--vurgu);margin-top:-4px;transition:.3s var(--ease)}
.ses-bar input[type=range]::-moz-range-thumb{width:9px;height:9px;border:none;
  border-radius:50%;background:var(--vurgu)}
.ses-bar input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.5);
  box-shadow:0 0 10px var(--vurgu)}

footer{border-top:1px solid var(--cizgi);padding:4rem 0 3rem;margin-top:4rem}
footer .sarma{display:grid;gap:2.5rem}
.uyari-yasal{font-size:.76rem;color:var(--dim);line-height:1.9;max-width:76ch}
.footer-alt{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-top:2rem;border-top:1px solid var(--cizgi)}