/* ============================================================
   BiloCom — Bilal Özkul
   Koyu monokrom · General Sans + Inter · tek sayfa düzeni
   ============================================================ */

:root{
  --siyah:#07080a;
  --zemin:#0a0b0e;
  --kart:#101217;
  --kart-2:#14171d;
  --cizgi:#1e222a;
  --cizgi-2:#2a2f39;
  --metin:#f0f3f7;
  --soluk:#8d97a5;
  --sonuk:#5b6472;
  --gumus:linear-gradient(135deg,#ffffff 0%,#d2d9e1 44%,#8b95a2 100%);
  --en:1180px;
  --kose:9px;              /* orta karar köşe: kare değil, kapsül değil */
  --kose-buyuk:16px;
  --yay:cubic-bezier(.19,.72,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,-apple-system,"Segoe UI",sans-serif;
  background:var(--zemin);color:var(--metin);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3,h4,.disp{
  font-family:"General Sans","Space Grotesk",Inter,sans-serif;
  line-height:1.06;letter-spacing:-.03em;font-weight:600;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#f0f3f7;color:#0a0b0e}
.kap{max-width:var(--en);margin:0 auto;padding:0 28px}
section{padding:130px 0;position:relative;z-index:1}
.dar{max-width:760px}

/* ---------- ZEMİN: ışık sütunları ---------- */
#zemin{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#zemin canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#zemin::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 32%,
             rgba(255,255,255,.24) 50%,rgba(255,255,255,.14) 68%,transparent)}

/* ---------- YÜKLEME EKRANI ---------- */
#yukleme{position:fixed;inset:0;z-index:1000;pointer-events:none}
#yukleme .yarim{position:absolute;left:0;right:0;height:50.2%;background:var(--siyah);
  transition:transform 1s cubic-bezier(.76,0,.24,1)}
#yukleme .ust{top:0}
#yukleme .alt{bottom:0}
#yukleme.acildi .ust{transform:translateY(-100%)}
#yukleme.acildi .alt{transform:translateY(100%)}
#yukleme .orta{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  transition:opacity .45s var(--yay)}
#yukleme.acildi .orta{opacity:0}
#yukleme .logo-kutu{position:relative;width:230px}
#yukleme .logo-kutu img{width:100%;opacity:.14}
#yukleme .logo-kutu .dolu{position:absolute;inset:0;overflow:hidden;width:0}
#yukleme .logo-kutu .dolu img{opacity:1;width:230px;max-width:none}
#yukleme .cizgi{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(50% - 66px);
  width:230px;height:1px;background:rgba(255,255,255,.12)}
#yukleme .cizgi i{display:block;height:100%;width:0;background:var(--metin)}
#yukleme .oran{position:absolute;right:32px;bottom:28px;font:500 13px Inter;
  color:var(--sonuk);letter-spacing:.14em;font-variant-numeric:tabular-nums;
  transition:opacity .45s var(--yay),transform .55s var(--yay)}
#yukleme .soz{position:absolute;left:32px;bottom:28px;font:500 13px Inter;
  color:var(--sonuk);letter-spacing:.1em;
  transition:opacity .45s var(--yay),transform .55s var(--yay)}
#yukleme.acildi .soz{opacity:0;transform:translateY(14px)}
#yukleme.acildi .oran{opacity:0;transform:translateY(14px)}
#yukleme.acildi .cizgi{opacity:0;transition:opacity .4s}

/* ---------- İMLEÇ (dönen çarpı + saran halka) ---------- */
#im-carpi{position:fixed;top:0;left:0;z-index:901;pointer-events:none;width:14px;height:14px;
  margin:-7px 0 0 -7px;opacity:.95}
#im-carpi::before,#im-carpi::after{content:"";position:absolute;left:50%;top:50%;
  background:#fff;border-radius:1px}
#im-carpi::before{width:13px;height:1.4px;margin:-.7px 0 0 -6.5px}
#im-carpi::after{width:1.4px;height:13px;margin:-6.5px 0 0 -.7px}
#im-carpi{animation:carpiDon 6s linear infinite}
@keyframes carpiDon{to{transform:rotate(360deg)}}
#im-halka{position:fixed;top:0;left:0;z-index:900;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  transition:width .32s var(--yay),height .32s var(--yay),margin .32s var(--yay),
             border-radius .32s var(--yay),border-color .3s,background .3s,opacity .3s}
#im-halka.sar{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);
  border-radius:var(--kose)}
body.imlec-var,body.imlec-var *{cursor:none!important}

/* ---------- OKUMA ÇUBUĞU ---------- */
#ilerleme{position:fixed;top:0;left:0;height:2px;width:0;z-index:130;
  background:linear-gradient(90deg,#6f7887,#ffffff);transition:width .1s linear}

/* ---------- HEADER (cam, kaydırınca daralır) ---------- */
header{position:sticky;top:0;z-index:120;padding:0;width:100%;transition:padding .5s var(--yay)}
header .cam{
  width:100%;max-width:100%;margin:0 auto;border-radius:0;
  background:rgba(12,14,18,.55);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid transparent;border-bottom-color:rgba(255,255,255,.07);
  box-shadow:none;
  transition:width .55s var(--yay),max-width .55s var(--yay),margin .55s var(--yay),border-radius .55s var(--yay),
             background .45s,box-shadow .55s var(--yay),border-color .45s;
  position:relative;overflow:hidden;
}
header .cam::before{ /* üst kenar ışığı */
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  opacity:0;transition:opacity .5s}
header.yapisti{padding-top:20px}
header.yapisti .cam{
  width:calc(100% - 40px);max-width:calc(var(--en) + 40px);margin:0 auto;border-radius:14px;
  background:rgba(14,16,21,.62);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
}
header.yapisti .cam::before{opacity:1}
header .ic{display:flex;align-items:center;gap:32px;height:74px;
  max-width:var(--en);margin:0 auto;padding:0 28px;transition:height .5s var(--yay)}
header.yapisti .ic{height:62px;padding:0 22px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:25px;width:auto;transition:transform .5s var(--yay)}
.logo:hover img{transform:translateY(-1px)}
nav{display:flex;gap:2px;margin-left:auto;align-items:center}
nav a{position:relative;font-size:14.4px;font-weight:450;color:var(--soluk);
  padding:9px 14px;transition:color .25s}
nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--metin);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--yay)}
nav a:hover{color:var(--metin)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
nav a.burada{color:var(--metin)}
nav a.burada::after{transform:scaleX(1)}
.hamb{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto}
.hamb span{display:block;width:21px;height:1.5px;background:var(--metin);margin:5px 0;
  transition:.34s var(--yay);border-radius:1px}
.hamb.acik span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamb.acik span:nth-child(2){opacity:0;transform:translateX(8px)}
.hamb.acik span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mmenu{display:none;position:fixed;inset:0;z-index:90;background:rgba(8,9,12,.97);
  backdrop-filter:blur(20px);padding:118px 28px 34px;flex-direction:column;gap:2px;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--yay)}
.mmenu.acik{clip-path:inset(0 0 0 0)}
.mmenu a{font-family:"General Sans",sans-serif;font-size:31px;font-weight:600;letter-spacing:-.03em;
  padding:18px 0;border-bottom:1px solid var(--cizgi);
  opacity:0;transform:translateY(16px);transition:.55s var(--yay)}
.mmenu.acik a{opacity:1;transform:none}
.mmenu.acik a:nth-child(1){transition-delay:.1s}.mmenu.acik a:nth-child(2){transition-delay:.16s}
.mmenu.acik a:nth-child(3){transition-delay:.22s}.mmenu.acik a:nth-child(4){transition-delay:.28s}
.mmenu.acik a:nth-child(5){transition-delay:.34s}.mmenu.acik a:nth-child(6){transition-delay:.4s}

/* ---------- DİL DÜĞMESİ ---------- */
.dil-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid rgba(255,255,255,.13);
  color:var(--soluk);font:600 12.4px Inter;letter-spacing:.06em;padding:7px 12px;border-radius:var(--kose);
  cursor:pointer;transition:.3s var(--yay);position:relative;overflow:hidden}
.dil-btn:hover{color:var(--metin);border-color:rgba(255,255,255,.3)}
.dil-btn b{font-weight:600;color:var(--metin)}
.dil-btn span{opacity:.5}
/* dil değişim perdesi */
#dil-perde{position:fixed;inset:0;z-index:400;pointer-events:none;background:rgba(7,8,10,.92);
  backdrop-filter:blur(6px);opacity:0;transition:opacity .34s var(--yay);display:grid;place-items:center}
#dil-perde.gor{opacity:1}
#dil-perde span{font-family:"General Sans",sans-serif;font-size:30px;letter-spacing:-.03em;font-weight:600;letter-spacing:-.02em;
  color:var(--metin);opacity:0;transform:translateY(10px);transition:.4s .06s var(--yay)}
#dil-perde.gor span{opacity:1;transform:none}
/* dil değişirken içerik yumuşakça süzülür */
main,header .ic,footer{transition:opacity .3s var(--yay),transform .4s var(--yay),filter .35s var(--yay)}
body.dil-degisiyor main,body.dil-degisiyor header .ic,body.dil-degisiyor footer{
  opacity:0;transform:translateY(10px);filter:blur(4px)}

/* ---------- DÜĞMELER (parlama takipli) ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  background:var(--metin);color:#0a0b0e;border:0;cursor:pointer;
  font:600 14.6px Inter;padding:14px 24px;border-radius:var(--kose);
  transition:transform .35s var(--yay),box-shadow .35s var(--yay)}
.btn>*{position:relative;z-index:2}
.btn::after{ /* imleci takip eden parlama */
  content:"";position:absolute;width:150px;height:150px;border-radius:50%;
  left:var(--px,50%);top:var(--py,50%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 62%);
  opacity:0;transition:opacity .35s;z-index:1;pointer-events:none}
.btn:hover::after{opacity:.55}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px -16px rgba(240,243,247,.45)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .4s var(--yay);position:relative;z-index:2}
.btn:hover svg{transform:translateX(3px)}
.btn.bos{background:transparent;color:var(--metin);border:1px solid var(--cizgi-2)}
.btn.bos::after{background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%)}
.btn.bos:hover{border-color:#454d5a;box-shadow:none}
.btn.kucuk{padding:9px 17px;font-size:13.4px;font-weight:600}
/* başlıktaki düğme: ince, cam, kenar ışığı yürüyen */
header .btn.kucuk{background:rgba(255,255,255,.055);color:var(--metin);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);
  padding:8px 16px;overflow:hidden;position:relative}
header .btn.kucuk::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,255,255,.75) 82%,transparent 92%);
  opacity:0;transition:opacity .4s;animation:kenarDon 3.4s linear infinite}
header .btn.kucuk:hover::before{opacity:1}
header .btn.kucuk::after{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%)}
header .btn.kucuk:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);box-shadow:none}
header .btn.kucuk>*{mix-blend-mode:normal}
header .btn.kucuk .kilif{position:absolute;inset:1px;border-radius:inherit;
  background:rgba(16,18,23,.92);z-index:1}
@keyframes kenarDon{to{transform:rotate(360deg)}}
/* menü bağlantıları: üstten inen ikinci kopya */
nav a{overflow:hidden;display:inline-block;height:34px;line-height:34px;padding:0 14px}
nav a .ust,nav a .alt{display:block;transition:transform .42s var(--yay)}
nav a .alt{position:absolute;left:14px;top:0;transform:translateY(100%);color:var(--metin)}
nav a:hover .ust{transform:translateY(-100%)}
nav a:hover .alt{transform:translateY(0)}

/* ---------- SABİT MAİL DÜĞMESİ (sol alt) ---------- */
.mail-fab{position:fixed;left:26px;bottom:26px;z-index:80;display:inline-flex;align-items:center;
  gap:10px;padding:13px 20px;border-radius:var(--kose);
  background:rgba(16,18,23,.72);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.1);color:var(--metin);
  font:600 14px Inter;box-shadow:0 16px 40px -22px rgba(0,0,0,.95);
  transition:transform .4s var(--yay),border-color .35s,background .35s;
  opacity:0;transform:translateY(14px);animation:fabGir .7s .9s var(--yay) forwards}
@keyframes fabGir{to{opacity:1;transform:none}}
.mail-fab:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24);
  background:rgba(22,25,31,.85)}
.mail-fab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.mail-fab i{width:6px;height:6px;border-radius:50%;background:#4ade80;display:block;flex-shrink:0}

/* ---------- BÖLÜM BAŞLIĞI ---------- */
.etiket{display:flex;align-items:center;gap:12px;font:500 12px Inter;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sonuk);margin-bottom:22px}
.etiket::before{content:"";width:22px;height:1px;background:var(--cizgi-2)}
.bas{max-width:680px;margin-bottom:64px}
.bas h2{font-size:clamp(31px,4.3vw,52px);margin-bottom:18px}
.bas p{color:var(--soluk);font-size:17px;max-width:570px}

/* ---------- METİN ANİMASYONLARI ---------- */
/* bulanıktan nete gelen yazı */
.blur-yazi span{display:inline-block;opacity:0;filter:blur(11px);transform:translateY(16px);
  transition:opacity .85s var(--yay),filter .85s var(--yay),transform .85s var(--yay)}
.blur-yazi.gor span{opacity:1;filter:blur(0);transform:none}
/* kaydırınca yukarı süzülen kelimeler */
.suzul span{display:inline-block;opacity:0;transform:translateY(38px) rotate(2deg);
  transition:opacity .8s var(--yay),transform .8s var(--yay)}
.suzul.gor span{opacity:1;transform:none}
.mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mask>span{display:block;transform:translateY(110%);opacity:0;
  animation:maskAc 1.1s var(--yay) forwards}
@keyframes maskAc{to{transform:translateY(0);opacity:1}}
.g1{animation-delay:.1s}.g2{animation-delay:.22s}.g3{animation-delay:.34s}
.ac{opacity:0;transform:translateY(32px);
  transition:opacity .95s var(--yay),transform .95s var(--yay)}
.ac.gor{opacity:1;transform:none}
.ac-x{opacity:0;transform:translateX(-36px);
  transition:opacity 1s var(--yay),transform 1s var(--yay)}
.ac-x.gor{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ac,.ac-x,.mask>span,.blur-yazi span,.suzul span{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  #yukleme,#im-nokta,#im-halka{display:none!important}
  #im-carpi{animation:none!important}
  #dalga{display:none!important}
}

/* ---------- HERO ---------- */
.hero{padding:96px 0 120px;position:relative}
.hero h1{font-size:clamp(44px,7.6vw,96px);font-weight:600;letter-spacing:-.048em;margin-bottom:34px}
.hero h1 .gri{background:var(--gumus);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.hero .giris{font-size:19px;color:var(--soluk);max-width:590px;margin-bottom:44px;line-height:1.72}
.hero .dugmeler{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:70px}
.hero .durum{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--soluk);margin-bottom:28px}
.hero .durum i{width:7px;height:7px;border-radius:50%;background:#4ade80;display:block;
  box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:nabiz 2.8s infinite}
@keyframes nabiz{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

.sayilar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cizgi);padding-top:36px}
.sayilar div{padding-right:22px}
.sayilar b{display:block;font-family:"General Sans",sans-serif;font-size:38px;font-weight:600;
  letter-spacing:-.04em;margin-bottom:4px}
.sayilar>div>span{font-size:13.4px;color:var(--sonuk)}
.sayilar b span{font:inherit;color:inherit;letter-spacing:inherit}

/* ---------- KAYAN ŞERİT ---------- */
.serit-kap{border-block:1px solid var(--cizgi);padding:28px 0;overflow:hidden;position:relative;z-index:1;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.serit-ic{display:flex;gap:54px;width:max-content;animation:kay 42s linear infinite}
.serit-kap:hover .serit-ic{animation-play-state:paused}
@keyframes kay{to{transform:translateX(-50%)}}
.serit-ic span{font-family:"General Sans",sans-serif;font-size:17px;font-weight:500;
  color:var(--sonuk);white-space:nowrap;display:flex;align-items:center;gap:16px;transition:color .3s}
.serit-ic span:hover{color:var(--metin)}
.serit-ic span::after{content:"";width:4px;height:4px;background:var(--cizgi-2);border-radius:50%}

/* ---------- ÇALIŞMALAR ---------- */
.isler{display:grid;gap:26px}
.is{position:relative;background:rgba(18,21,27,.58);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.09);border-radius:var(--kose-buyuk);
  overflow:hidden;transition:border-color .45s,transform .55s var(--yay),box-shadow .55s var(--yay)}
.is::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.32),rgba(255,255,255,.02) 38%,
             rgba(255,255,255,0) 62%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .6s var(--yay);pointer-events:none;z-index:3}
.is:hover::before{opacity:1}
.is:hover{border-color:rgba(255,255,255,.14);box-shadow:0 34px 80px -48px rgba(0,0,0,.95)}
.is .ic{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch}
.is .metin{padding:46px}
.is .yil{font:500 12px Inter;letter-spacing:.16em;color:var(--sonuk);text-transform:uppercase}
.is h3{font-size:30px;margin:14px 0}
.is p{color:var(--soluk);font-size:15.4px;margin-bottom:22px;max-width:440px}
.is .etiketler{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.is .etiketler span{font-size:12.2px;color:var(--soluk);border:1px solid var(--cizgi);
  padding:5px 11px;border-radius:6px;transition:border-color .3s,color .3s}
.is:hover .etiketler span{border-color:var(--cizgi-2);color:var(--metin)}
.is .git{display:inline-flex;align-items:center;gap:9px;font-size:14.4px;font-weight:500}
.is .git svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  transition:transform .42s var(--yay)}
.is:hover .git svg{transform:translate(4px,-4px)}
.is .gorsel{position:relative;overflow:hidden;background:rgba(14,16,21,.72);
  border-left:1px solid var(--cizgi);min-height:340px;display:grid;place-items:center;padding:22px}
.is .gorsel img{position:relative;width:100%;height:auto;max-height:100%;object-fit:contain;
  border-radius:9px;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
  transition:transform 1.1s var(--yay),filter .7s;filter:grayscale(.32) contrast(1.03)}
.is:hover .gorsel img{transform:translateY(-5px) scale(1.015);filter:grayscale(0) contrast(1.05)}

.is:nth-child(even) .ic{direction:rtl}
.is:nth-child(even) .metin{direction:ltr}
.is:nth-child(even) .gorsel{direction:ltr;border-left:0;border-right:1px solid var(--cizgi)}

/* ---------- HAKKIMDA ---------- */
.hakkinda{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.portre{position:relative;border-radius:var(--kose-buyuk);overflow:hidden;
  border:1px solid rgba(255,255,255,.1)}
.portre img{width:100%;filter:grayscale(.55) contrast(1.06) brightness(.95);
  transition:filter .9s var(--yay),transform 1.3s var(--yay)}
.portre:hover img{filter:grayscale(0) contrast(1.08) brightness(1);transform:scale(1.03)}
.portre::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,11,14,.72),transparent 52%)}
.portre .alt{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.portre .alt b{display:block;font-family:"General Sans",sans-serif;font-size:19px;font-weight:600}
.portre .alt span{font-size:13.4px;color:var(--soluk)}
.slogan{margin:0 0 34px;padding:26px 0 26px 26px;border-left:2px solid var(--cizgi-2);position:relative}
.slogan p{font-family:"General Sans",sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:500;
  letter-spacing:-.028em;line-height:1.25;color:var(--metin);margin:0 0 8px}
.slogan span{font-size:13.6px;color:var(--sonuk);letter-spacing:.05em}
.hakkinda p{color:var(--soluk);font-size:16.4px;margin-bottom:20px}
.hakkinda p strong{color:var(--metin);font-weight:500}
.liste{list-style:none;border-top:1px solid var(--cizgi);margin-top:30px}
.liste li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--cizgi);
  font-size:15.2px;align-items:baseline}
.liste li b{font-family:"General Sans",sans-serif;color:var(--sonuk);font-weight:500;
  min-width:64px;font-size:13.4px;letter-spacing:.05em}
.liste li span{color:var(--soluk)}
.liste li span em{color:var(--metin);font-style:normal}

/* ---------- FİYATLANDIRMA ---------- */
.paketler{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.paket{background:rgba(18,21,27,.58);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.09);border-radius:var(--kose-buyuk);
  padding:34px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .45s,transform .5s var(--yay),box-shadow .5s var(--yay)}
.paket:hover{transform:translateY(-6px);border-color:var(--cizgi-2);
  box-shadow:0 30px 66px -44px rgba(0,0,0,.95)}
.paket.one{border-color:rgba(255,255,255,.24);background:linear-gradient(180deg,rgba(30,34,42,.72),rgba(16,19,24,.62))}
.paket.one::before{content:"";position:absolute;top:0;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
.paket .rozet{position:absolute;top:18px;right:18px;font:600 11px Inter;letter-spacing:.12em;
  text-transform:uppercase;color:#0a0b0e;background:var(--metin);padding:5px 10px;border-radius:5px}
.paket h3{font-size:21px;margin-bottom:8px}
.paket .not{font-size:14px;color:var(--soluk);margin-bottom:24px;min-height:42px}
.paket .fiyat{font-family:"General Sans",sans-serif;font-size:38px;font-weight:600;
  letter-spacing:-.04em;margin-bottom:4px;display:flex;align-items:baseline;gap:7px}
.paket .fiyat small{font-size:15px;font-weight:500;color:var(--sonuk);letter-spacing:0}
.paket .sure{font-size:13.4px;color:var(--sonuk);margin-bottom:26px;
  padding-bottom:24px;border-bottom:1px solid var(--cizgi)}
.paket ul{list-style:none;margin-bottom:30px;flex:1}
.paket li{display:flex;gap:11px;font-size:14.6px;color:var(--soluk);padding:7px 0;align-items:flex-start}
.paket li svg{width:15px;height:15px;stroke:var(--metin);fill:none;stroke-width:2.2;
  flex-shrink:0;margin-top:5px}
.paket .btn{width:100%;justify-content:center}
.ek-bilgi{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ek-bilgi div{border:1px solid rgba(255,255,255,.08);border-radius:var(--kose);padding:20px;
  background:rgba(18,21,27,.55);backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%)}
.ek-bilgi b{display:block;font-size:14.6px;margin-bottom:5px}
.ek-bilgi span{font-size:13.6px;color:var(--soluk)}

/* ---------- BLOG SATIRI ---------- */
.yazilar{display:grid;border-top:1px solid var(--cizgi)}
.yazi-satir{display:grid;grid-template-columns:120px 1fr 130px;gap:26px;align-items:center;
  padding:30px 6px;border-bottom:1px solid var(--cizgi);position:relative;
  transition:padding-left .45s var(--yay)}
.yazi-satir::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--metin);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--yay)}
.yazi-satir:hover{padding-left:20px}
.yazi-satir:hover::before{transform:scaleY(1);transform-origin:top}
.yazi-satir .tarih{font-size:13px;color:var(--sonuk);font-variant-numeric:tabular-nums}
.yazi-satir h3{font-size:21px;font-weight:500;margin-bottom:6px}
.yazi-satir p{font-size:14.4px;color:var(--soluk);max-width:560px}
.yazi-satir .sure{font-size:13px;color:var(--sonuk);text-align:right;transition:opacity .3s}
.yazi-satir .ok{position:absolute;right:6px;opacity:0;transform:translateX(-8px);transition:.4s var(--yay)}
.yazi-satir:hover .ok{opacity:1;transform:none}
.yazi-satir:hover .sure{opacity:0}
.yazi-satir .ok svg{width:17px;height:17px;stroke:var(--metin);fill:none;stroke-width:1.8}

/* ---------- YAZI SAYFASI ---------- */
.makale{max-width:720px;margin:0 auto}
.makale .ustbilgi{padding:74px 0 44px;border-bottom:1px solid var(--cizgi);margin-bottom:44px}
.makale h1{font-size:clamp(32px,4.6vw,52px);margin:18px 0 20px;letter-spacing:-.04em}
.makale .kunye{display:flex;gap:16px;font-size:13.6px;color:var(--sonuk);flex-wrap:wrap}
.makale .govde{font-size:17.2px;line-height:1.84;color:#c5cdd8}
.makale .govde p{margin-bottom:24px}
.makale .govde h2{font-size:27px;margin:48px 0 16px;color:var(--metin)}
.makale .govde h3{font-size:20px;margin:34px 0 12px;color:var(--metin)}
.makale .govde ul,.makale .govde ol{margin:0 0 24px 20px}
.makale .govde li{margin-bottom:9px}
.makale .govde strong{color:var(--metin);font-weight:600}
.makale .govde blockquote{border-left:2px solid var(--cizgi-2);padding-left:24px;margin:32px 0;
  color:var(--metin);font-size:19px;line-height:1.6;font-family:"General Sans",sans-serif}
.makale .govde code{background:var(--kart);border:1px solid var(--cizgi);border-radius:5px;
  padding:2px 7px;font-size:14.6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.makale .govde .kutu{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--kose);
  padding:24px 26px;margin:32px 0;font-size:15.6px}
.makale .govde .kutu b{color:var(--metin)}

/* ---------- İLETİŞİM ---------- */
.iletisim{text-align:center;padding:140px 0}
.iletisim h2{font-size:clamp(34px,6.2vw,76px);margin-bottom:24px;letter-spacing:-.05em}
.iletisim p{color:var(--soluk);font-size:17.5px;max-width:540px;margin:0 auto 42px}
.posta{display:inline-flex;align-items:center;gap:12px;font-family:"General Sans",sans-serif;
  font-size:clamp(19px,3vw,31px);font-weight:500;letter-spacing:-.02em;padding-bottom:8px;position:relative}
.posta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cizgi-2);
  transform-origin:right;transition:transform .55s var(--yay)}
.posta:hover::after{transform:scaleX(0)}
.posta svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  transition:transform .45s var(--yay)}
.posta:hover svg{transform:translate(4px,-4px)}

/* ---------- FOOTER ---------- */
footer{position:relative;z-index:1;border-top:1px solid var(--cizgi);
  background:linear-gradient(180deg,rgba(16,18,23,.35),rgba(7,8,10,.72));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
footer::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:900px;height:500px;
  background:radial-gradient(closest-side,rgba(255,255,255,.045),transparent 72%);pointer-events:none}
.f-dev{position:relative;z-index:2;padding:78px 0 0;text-align:center}
.f-dev .buyuk{font-family:"General Sans",sans-serif;font-weight:600;letter-spacing:-.05em;
  font-size:clamp(46px,12vw,150px);line-height:.94;
  background:linear-gradient(180deg,rgba(240,243,247,.92),rgba(240,243,247,.09));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:8px;user-select:none}
.f-dev .altyazi{color:var(--sonuk);font-size:14.4px;margin-bottom:56px}
.f-ust{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;
  padding-bottom:46px;border-top:1px solid var(--cizgi);padding-top:46px}
footer img.f-logo{height:23px;margin-bottom:15px;opacity:.9}
footer h4{color:var(--metin);font:500 12.6px Inter;letter-spacing:.13em;margin-bottom:16px;
  text-transform:uppercase}
footer a{display:block;padding:6px 0;color:var(--soluk);font-size:14px;
  transition:color .28s,transform .28s var(--yay)}
footer a:hover{color:var(--metin);transform:translateX(3px)}
footer .aciklama{color:var(--soluk);font-size:14px;max-width:290px}
.f-durum{display:flex;align-items:center;gap:9px;font-size:13.4px;color:var(--soluk);margin-top:14px}
.f-durum i{width:6px;height:6px;border-radius:50%;background:#4ade80;display:block}
.f-alt{position:relative;z-index:2;border-top:1px solid var(--cizgi);padding:24px 0 34px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--sonuk)}
.f-alt a{display:inline;padding:0}

/* ---------- DUYARLI ---------- */
@media(max-width:1000px){
  .is .ic{grid-template-columns:1fr}
  .is:nth-child(even) .ic{direction:ltr}
  .is .gorsel{min-height:250px;border-left:0;border-top:1px solid var(--cizgi)}
  .is:nth-child(even) .gorsel{border-right:0;border-top:1px solid var(--cizgi)}
  .hakkinda{grid-template-columns:1fr;gap:44px}
  .portre{max-width:380px}
  .paketler{grid-template-columns:1fr}
  .ek-bilgi{grid-template-columns:1fr}
  .f-ust{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  nav{display:none}.hamb{display:block}.mmenu{display:flex}.ust-btn{display:none}
  header.yapisti .cam{width:calc(100% - 20px);margin:14px auto}
  section{padding:86px 0}
  .hero{padding:64px 0 78px}
  .sayilar{grid-template-columns:1fr 1fr;gap:26px 0}
  .yazi-satir{grid-template-columns:1fr;gap:8px;padding:24px 6px}
  .yazi-satir .sure,.yazi-satir .ok{display:none}
  .is .metin{padding:30px 24px}
  .f-ust{grid-template-columns:1fr;gap:30px}
  .kap{padding:0 20px}
  .iletisim{padding:90px 0}
  .mail-fab{left:16px;bottom:16px;padding:11px 16px;font-size:13.2px}
  .mail-fab .yazi{display:none}
  #im-nokta,#im-halka{display:none}
}

/* ============================================================
   FİYAT SAYFASI EKLERİ · BAŞVURU · DİL
   ============================================================ */

/* örnek çalışma bağlantısı (paket kartı içinde) */
.paket .ornek{border-top:1px solid var(--cizgi);padding-top:16px;margin-bottom:22px}
.paket .ornek b{display:block;font:500 11.6px Inter;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sonuk);margin-bottom:8px}
.paket .ornek a{display:inline-flex;align-items:center;gap:7px;font-size:14.6px;font-weight:500;
  color:var(--metin);transition:gap .35s var(--yay)}
.paket .ornek a:hover{gap:11px}
.paket .ornek a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.paket .ornek a.pasif{color:var(--sonuk);pointer-events:none}

/* seçim rehberi */
.rehber{border-top:1px solid var(--cizgi)}
.reh-satir{display:grid;grid-template-columns:1fr .55fr 1.25fr;gap:26px;align-items:center;
  padding:26px 6px;border-bottom:1px solid var(--cizgi);transition:padding-left .45s var(--yay)}
.reh-satir:hover{padding-left:16px}
.reh-tip b{display:block;font-family:"General Sans",sans-serif;font-size:16.6px;font-weight:600;
  margin-bottom:4px}
.reh-tip span{font-size:13.6px;color:var(--sonuk)}
.etiketli{display:inline-block;font-size:13px;font-weight:600;padding:7px 13px;border-radius:var(--kose);
  border:1px solid var(--cizgi-2);color:var(--soluk);white-space:nowrap}
.etiketli.one{background:var(--metin);color:#0a0b0e;border-color:var(--metin)}
.reh-neden{font-size:14.6px;color:var(--soluk)}

/* başvuru düzeni */
.basvuru{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start}
.basvuru form{background:rgba(18,21,27,.58);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--kose-buyuk);padding:34px}
.adimlar{display:flex;gap:0;margin-bottom:28px}
.adimlar div{flex:1;text-align:center;font:600 12.4px Inter;color:var(--sonuk);
  position:relative;padding-top:20px}
.adimlar div::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--cizgi);transition:background .5s var(--yay)}
.adimlar div.tamam::before,.adimlar div.simdi::before{background:var(--metin)}
.adimlar div.simdi{color:var(--metin)}
.sayfa-form{display:none}
.sayfa-form.aktif{display:block;animation:formGir .5s var(--yay)}
@keyframes formGir{from{opacity:0;transform:translateY(14px)}}
label{display:block;font-size:13px;font-weight:600;margin:0 0 8px}
label small{color:var(--sonuk);font-weight:400}
input,select,textarea{width:100%;padding:13px 15px;border:1px solid var(--cizgi);
  border-radius:var(--kose);background:rgba(10,11,14,.6);color:var(--metin);
  font:400 15px Inter;margin-bottom:17px;transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.06)}
textarea{resize:vertical;min-height:112px}
.satir2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.onay{display:flex;gap:11px;font-size:13px;color:var(--soluk);margin-bottom:22px;
  line-height:1.55;font-weight:400}
.onay input{width:17px;height:17px;margin:2px 0 0;flex-shrink:0}
/* paket seçim kutuları */
.paket-sec{display:grid;gap:11px;margin-bottom:24px}
.secim{margin:0;cursor:pointer}
.secim input{position:absolute;opacity:0;width:0;height:0;margin:0}
.secim .kutu{display:block;border:1px solid var(--cizgi);border-radius:var(--kose);
  padding:16px 18px;transition:.3s var(--yay);background:rgba(10,11,14,.45)}
.secim .kutu b{display:block;font-family:"General Sans",sans-serif;font-size:16px;font-weight:600;
  margin-bottom:3px}
.secim .kutu i{font-style:normal;font-size:13.4px;color:var(--sonuk)}
.secim:hover .kutu{border-color:var(--cizgi-2)}
.secim input:checked + .kutu{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.basarili{display:none;text-align:center;padding:40px 20px}
.basarili svg{width:56px;height:56px;stroke:var(--metin);fill:none;stroke-width:1.7;margin:0 auto 20px}
.basarili h3{font-size:24px;margin-bottom:10px}
.basarili p{color:var(--soluk);font-size:15.4px;max-width:420px;margin:0 auto}
/* yan sütun */
.basvuru-yan{display:grid;gap:16px;position:sticky;top:110px}
.yan-kart{background:rgba(18,21,27,.5);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--kose-buyuk);padding:26px}
.yan-kart h3{font-size:17.5px;margin-bottom:16px}
.adim-liste{list-style:none;counter-reset:a}
.adim-liste li{position:relative;padding:0 0 18px 0;border-left:1px solid var(--cizgi);
  padding-left:20px;margin-left:5px}
.adim-liste li:last-child{border-left-color:transparent;padding-bottom:0}
.adim-liste li::before{content:"";position:absolute;left:-4.5px;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--zemin);border:1.5px solid var(--soluk)}
.adim-liste li b{display:block;font-size:13px;color:var(--metin);margin-bottom:3px}
.adim-liste li span{font-size:14px;color:var(--soluk)}
.yan-liste{list-style:none}
.yan-liste li{font-size:14.2px;color:var(--soluk);padding:8px 0 8px 18px;position:relative}
.yan-liste li::before{content:"";position:absolute;left:0;top:16px;width:5px;height:5px;
  border-radius:50%;background:var(--sonuk)}
.yan-iletisim p{font-size:14.2px;color:var(--soluk);margin-bottom:16px}

@media(max-width:1000px){
  .basvuru{grid-template-columns:1fr}
  .basvuru-yan{position:static}
  .reh-satir{grid-template-columns:1fr;gap:12px;padding:22px 6px}
  .reh-satir:hover{padding-left:6px}
}

/* üç tasarım bölümü */
.uc-tasarim{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ut{background:rgba(18,21,27,.55);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--kose-buyuk);padding:30px;
  transition:transform .5s var(--yay),border-color .4s}
.ut:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.16)}
.ut-no{display:block;font-family:"General Sans",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;color:var(--sonuk);margin-bottom:16px}
.ut h3{font-size:19.5px;margin-bottom:10px}
.ut p{font-size:14.8px;color:var(--soluk)}
.uc-serit{display:flex;gap:34px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--kose-buyuk);padding:34px 36px;
  background:rgba(18,21,27,.5);backdrop-filter:blur(14px)}
.uc-serit h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:10px;max-width:640px}
.uc-serit p{font-size:15.2px;color:var(--soluk);max-width:640px}
@media(max-width:1000px){.uc-tasarim{grid-template-columns:1fr}}

/* ============================================================
   TELEFON İNCE AYARLARI (parmakla kullanım)
   ============================================================ */
@media(max-width:760px){
  /* başlık: dil düğmesi küçülür, menü sağ üstte kalır */
  header .ic{gap:12px;padding:0 16px}
  .dil-btn{padding:6px 9px;font-size:11.6px;letter-spacing:.04em}
  .logo img{height:22px}
  header.yapisti .cam{width:calc(100% - 20px);margin:12px auto}
  header.yapisti .ic{height:58px;padding:0 14px}

  /* hero: satırlar daha dengeli */
  .hero h1{font-size:clamp(35px,10.2vw,52px);letter-spacing:-.04em;margin-bottom:26px}
  .hero .giris{font-size:16.4px;margin-bottom:30px}
  .hero .dugmeler{gap:10px;margin-bottom:46px}
  .hero .dugmeler .btn{flex:1;justify-content:center;min-height:50px}

  /* dokunma hedefleri en az 48 piksel */
  .btn{min-height:48px;padding:14px 20px}
  .btn.kucuk{min-height:40px}
  .mail-fab{min-height:46px;padding:0 16px;align-items:center}
  .secim .kutu{padding:18px}
  input,select,textarea{font-size:16px;padding:14px 15px}  /* iOS yakınlaştırmasın */
  .yazi-satir{padding:22px 4px}
  .mmenu a{padding:20px 0;font-size:27px}

  /* mobilde ağır efektleri kapat */
  .is,.paket,.ut{transform:none!important}
  .is:hover,.paket:hover,.ut:hover{transform:none!important}
  .paket{padding:28px 24px}
  .is .metin{padding:26px 22px}
  .is .gorsel{min-height:auto;padding:16px}
  .basvuru form{padding:24px 20px}
  .yan-kart{padding:22px}
  .uc-serit{padding:26px 22px;gap:22px}
  .f-dev .buyuk{font-size:clamp(42px,15vw,74px)}
  .f-dev{padding-top:56px}
  .f-dev .altyazi{margin-bottom:40px}

  /* seçim rehberi telefonda kart gibi */
  .reh-satir{border:1px solid var(--cizgi);border-radius:var(--kose);padding:20px;
    margin-bottom:12px;background:rgba(18,21,27,.5)}
  .rehber{border-top:0}
  .reh-satir:last-child{border-bottom:1px solid var(--cizgi)}

  /* portre telefonda tam otursun */
  .portre{max-width:100%}
  .slogan{padding:20px 0 20px 20px}
}
/* dokunmatik cihazda üzerine gelme efektleri devre dışı */
@media(hover:none){
  .is::before,.paket .rozet{transition:none}
  .btn::after{display:none}
  .yazi-satir:hover{padding-left:6px}
  .reh-satir:hover{padding-left:20px}
  nav a .alt{display:none}
}

.yazi-dil-not{display:none;align-items:center;gap:12px;font-size:13.4px;color:var(--soluk);
  margin-bottom:30px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);
  border-radius:var(--kose);background:rgba(18,21,27,.6);backdrop-filter:blur(10px)}
.yazi-dil-not b{font:600 11px Inter;letter-spacing:.1em;color:#0a0b0e;background:var(--metin);
  padding:4px 8px;border-radius:4px;flex-shrink:0}
html[lang="en"] .yazi-dil-not{display:flex}


/* ---------- PAKET ÖNERİ SİHİRBAZI ---------- */
.sihirbaz{display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:start}
.sihir-sorular{display:grid;gap:14px}
.soru{background:rgba(18,21,27,.55);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--kose-buyuk);padding:26px 28px}
.soru-no{display:block;font-family:"General Sans",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--sonuk);margin-bottom:10px}
.soru h3{font-size:19px;margin-bottom:18px}
.soru h3 small{font-weight:400;font-size:13.4px;color:var(--sonuk);letter-spacing:0}
.secenekler{display:flex;flex-wrap:wrap;gap:9px}
.secenekler button{background:rgba(10,11,14,.5);border:1px solid var(--cizgi);color:var(--soluk);
  font:500 14px Inter;padding:11px 16px;border-radius:var(--kose);cursor:pointer;
  transition:.28s var(--yay);text-align:left}
.secenekler button:hover{border-color:var(--cizgi-2);color:var(--metin)}
.secenekler button.secili{background:var(--metin);border-color:var(--metin);color:#0a0b0e;font-weight:600}
.sihir-sonuc{background:rgba(20,23,30,.7);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--kose-buyuk);padding:30px;
  position:sticky;top:110px;min-height:300px}
.son-bos{display:grid;place-items:center;text-align:center;min-height:240px;gap:14px}
.son-bos svg{width:34px;height:34px;stroke:var(--sonuk);fill:none;stroke-width:1.5}
.son-bos p{font-size:14.4px;color:var(--sonuk);max-width:220px}
.son-dolu{display:none;animation:formGir .55s var(--yay)}
.sihir-sonuc.hazir .son-bos{display:none}
.sihir-sonuc.hazir .son-dolu{display:block}
.son-etiket{display:block;font:500 11.6px Inter;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sonuk);margin-bottom:10px}
.son-dolu h3{font-size:25px;margin-bottom:12px}
.son-fiyat{display:flex;align-items:baseline;gap:10px;padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--cizgi)}
.son-fiyat b{font-family:"General Sans",sans-serif;font-size:27px;font-weight:600;letter-spacing:-.03em}
.son-fiyat span{font-size:13.2px;color:var(--sonuk)}
.son-neden{font-size:14.6px;color:var(--soluk);margin-bottom:16px}
.son-madde{list-style:none;margin-bottom:22px}
.son-madde li{font-size:13.8px;color:var(--soluk);padding:6px 0 6px 18px;position:relative}
.son-madde li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;
  border-radius:50%;background:var(--metin)}
.son-dolu .btn{width:100%;justify-content:center}
.son-not{font-size:12.6px;color:var(--sonuk);margin-top:12px;text-align:center}
@media(max-width:1000px){
  .sihirbaz{grid-template-columns:1fr}
  .sihir-sonuc{position:static}
  .soru{padding:22px 20px}
  .secenekler button{flex:1 1 100%;min-height:46px}
}

/* ============================================================
   ÖRNEK SİTELER · VİTRİN
   Kalın kart yok: ince satırlar + imleci gecikmeli takip eden
   önizleme. Efektler: sıra vurgusu (kardeşler soluklaşır),
   imleç takipli görsel, ok uzaması, satır çizgisinin açılması.
   ============================================================ */
.vitrin{border-top:1px solid var(--cizgi);margin-top:8px}
.vs{position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr) minmax(0,1fr) 46px;
  align-items:center;gap:22px;padding:26px 4px;
  border-bottom:1px solid var(--cizgi);
  transition:opacity .45s var(--yay),transform .55s var(--yay),padding-left .55s var(--yay)}
.vs::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--metin);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--yay)}
.vitrin:hover .vs{opacity:.34}
.vitrin:hover .vs:hover{opacity:1;padding-left:16px}
.vs:hover::before{transform:scaleX(1)}
.vs-ad{font-family:"General Sans",sans-serif;font-weight:600;letter-spacing:-.03em;
  font-size:clamp(21px,2.4vw,30px)}
.vs-tur{font-size:14.4px;color:var(--soluk)}
.vs-is{font-size:12.8px;color:var(--sonuk);letter-spacing:.01em}
.vs-ok{justify-self:end;width:34px;height:34px;border-radius:var(--kose);
  border:1px solid var(--cizgi-2);display:grid;place-items:center;
  transition:background .4s var(--yay),border-color .4s var(--yay)}
.vs-ok svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  transition:transform .5s var(--yay)}
.vs:hover .vs-ok{background:var(--metin);border-color:var(--metin);color:#0a0b0e}
.vs:hover .vs-ok svg{transform:translateX(3px)}
.vs-mini{display:none}

/* imleci gecikmeli takip eden önizleme */
.vitrin-onizleme{position:fixed;left:0;top:0;z-index:60;width:min(30vw,392px);
  aspect-ratio:16/10;border-radius:var(--kose-buyuk);overflow:hidden;
  pointer-events:none;opacity:0;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  border:1px solid var(--cizgi-2);
  transition:opacity .4s var(--yay)}
.vitrin-onizleme.acik{opacity:1}
.vitrin-onizleme img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transform:scale(1.04);transition:opacity .35s linear}

@media(hover:none),(max-width:860px){
  .vitrin-onizleme{display:none}
  .vs{grid-template-columns:1fr 40px;gap:6px 16px;padding:22px 0}
  .vs-ad{grid-column:1;grid-row:1}
  .vs-ok{grid-column:2;grid-row:1;align-self:start}
  .vs-tur{grid-column:1/-1;grid-row:2}
  .vs-is{grid-column:1/-1;grid-row:3;margin-bottom:14px}
  .vs-mini{display:block;grid-column:1/-1;grid-row:4;width:100%;
    border-radius:var(--kose);border:1px solid var(--cizgi)}
  .vitrin:hover .vs{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .vitrin-onizleme{display:none}
  .vitrin:hover .vs{opacity:1}
}

/* ============================================================
   PARA BİRİMİ ANAHTARI + BASAMAK MAKARASI
   Rakamlar tek tek şeritte kayarak değişir (odometre).
   ============================================================ */
.para-sar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.para-anahtar{position:relative;display:inline-flex;padding:4px;border-radius:var(--kose);
  border:1px solid var(--cizgi);background:rgba(255,255,255,.02)}
.para-anahtar .kaydirak{position:absolute;top:4px;bottom:4px;left:4px;width:0;
  border-radius:calc(var(--kose) - 3px);background:var(--metin);
  transition:transform .55s var(--yay),width .55s var(--yay)}
.para-anahtar button{position:relative;z-index:2;border:0;background:none;cursor:pointer;
  font:500 13.2px Inter;color:var(--soluk);padding:9px 17px;letter-spacing:.01em;
  transition:color .35s var(--yay)}
.para-anahtar button:hover{color:var(--metin)}
.para-anahtar button.secili{color:#0a0b0e}
.para-kur{font:400 12.6px Inter;color:var(--sonuk);letter-spacing:.01em;
  opacity:0;transform:translateY(4px);transition:opacity .5s var(--yay),transform .5s var(--yay)}
.para-kur.gor{opacity:1;transform:none}

/* rakam makarası */
.fiyat .rakam{display:inline-flex;align-items:flex-start;line-height:1}
.hane{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:top}
.hane i{display:block;font-style:normal;line-height:1;
  transition:transform .72s var(--yay)}
.hane.sabit{width:auto}
.fiyat .birim{transition:opacity .3s var(--yay)}
.fiyat.degisiyor .birim{opacity:.25}
.hane i b{display:block;height:1em;font-weight:inherit}
.fiyat .rakam,.son-fiyat b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.hane i b{text-align:center}

/* ============================================================
   SİTE KONTROL ARACI
   Gerçek ölçüm: adres yazılır, sayfa sunucuda açılıp incelenir.
   Puan halkası dolarken sayı sayıyor, maddeler sırayla düşüyor.
   ============================================================ */
.kontrol{border:1px solid var(--cizgi);border-radius:var(--kose-buyuk);background:var(--kart);
  padding:clamp(24px,3.4vw,46px)}

/* --- yazı kutusu: içerik gerçekten ortada, düğme altında --- */
.kk{max-width:560px;margin:0 auto;text-align:center}
.kk-kutu{position:relative;display:block;background:#090a0d;
  border:1px solid var(--cizgi-2);border-radius:12px;overflow:hidden;
  transition:border-color .45s var(--yay),box-shadow .45s var(--yay)}
.kk-kutu:focus-within{border-color:#5b6472;box-shadow:0 0 0 4px rgba(240,243,247,.05)}
/* iç grup: https:// ile yazı birlikte ortalanır */
.kk-ic{display:flex;align-items:baseline;justify-content:center;gap:2px;
  padding:19px 18px;cursor:text}
.kk-on{font:400 15.4px Inter;color:#454d5c;white-space:nowrap;user-select:none;
  transition:color .4s var(--yay)}
.kk-kutu:focus-within .kk-on{color:var(--soluk)}
.kk input{background:none;border:0;outline:0;color:var(--metin);
  font:450 17.4px Inter;letter-spacing:-.01em;text-align:left;
  width:15ch;min-width:15ch;max-width:100%;padding:0 2px;
  transition:width .4s var(--yay)}
.kk input:focus,.kk input:not(:placeholder-shown){width:19ch}
.kk input::placeholder{color:#454d5c}

/* düğme kutunun altında, ortalı */
.kk-git{margin-top:16px;display:inline-flex;align-items:center;gap:10px;
  height:48px;padding:0 26px;border:0;border-radius:9px;cursor:pointer;
  background:var(--metin);color:#0a0b0e;font:500 14.6px Inter;
  transition:padding .45s var(--yay),background .35s var(--yay),
    transform .45s var(--yay),box-shadow .45s var(--yay)}
.kk-git:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(240,243,247,.5)}
.kk-git svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--yay)}
.kk-git:hover svg{transform:translateX(3px)}
.kk-yazi{white-space:nowrap;overflow:hidden;max-width:130px;
  transition:max-width .45s var(--yay),opacity .3s var(--yay)}
.kontrol.calisiyor .kk-yazi{max-width:0;opacity:0}
.kontrol.calisiyor .kk-git{padding:0 16px;background:#2a2f39;color:var(--soluk);
  transform:none;box-shadow:none}
.kontrol.calisiyor .kk-git svg{animation:kkDon 1.1s linear infinite;transform-origin:50% 50%}
@keyframes kkDon{to{transform:rotate(360deg)}}

/* tarayıcı ışığı: kontrol sırasında kutunun içinde soldan sağa süpürür */
.kk-tarayici{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0%,rgba(240,243,247,.10) 42%,
    rgba(240,243,247,.26) 50%,rgba(240,243,247,.10) 58%,transparent 100%);
  transform:translateX(-100%);transition:opacity .3s}
.kontrol.calisiyor .kk-tarayici{opacity:1;animation:kkSupur 1.5s cubic-bezier(.5,0,.4,1) infinite}
@keyframes kkSupur{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* alt çizgi: yazarken ortadan iki yana açılır */
.kk-cizgi{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--metin),transparent);
  transform:scaleX(0);transform-origin:50% 50%;opacity:.7;
  transition:transform .6s var(--yay)}
.kk-kutu:focus-within .kk-cizgi{transform:scaleX(1)}
.kontrol.calisiyor .kk-cizgi{transform:scaleX(1)}

/* adım yazıları: kontrol sırasında sırayla yanar */
.kk-adimlar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;
  margin-top:16px;height:0;overflow:hidden;opacity:0;
  transition:height .5s var(--yay),opacity .4s var(--yay)}
.kontrol.calisiyor .kk-adimlar{height:20px;opacity:1}
.kk-adimlar span{font:400 12.2px Inter;color:#3f4756;position:relative;padding-left:14px;
  transition:color .5s var(--yay)}
.kk-adimlar span::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;
  border-radius:50%;background:#2a2f39;transition:background .5s var(--yay),box-shadow .5s var(--yay)}
.kk-adimlar span.acik{color:var(--metin)}
.kk-adimlar span.acik::before{background:var(--metin);box-shadow:0 0 0 4px rgba(240,243,247,.08)}
.kk-adimlar span.bitti{color:var(--soluk)}
.kk-adimlar span.bitti::before{background:var(--soluk)}

.kontrol-not{margin-top:14px;text-align:center;font:400 13px Inter;color:var(--sonuk);
  transition:color .35s}
.kontrol-not.hata{color:#ff8b7a}

/* sonuç */
.kontrol-sonuc{margin-top:26px;padding-top:26px;border-top:1px solid var(--cizgi);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--yay),transform .7s var(--yay)}
.kontrol-sonuc.gor{opacity:1;transform:none}
.ks-ust{display:flex;gap:clamp(20px,3vw,40px);align-items:center;flex-wrap:wrap}
.halka-sar{position:relative;width:132px;height:132px;flex:none}
.halka{width:132px;height:132px;transform:rotate(-90deg)}
.halka circle{fill:none;stroke-width:7;stroke-linecap:round}
.halka .iz{stroke:#1e222a}
.halka .dolgu{stroke:var(--metin);stroke-dasharray:327;stroke-dashoffset:327;
  transition:stroke-dashoffset 1.5s var(--yay),stroke .6s linear}
.kontrol-sonuc.orta .halka .dolgu{stroke:#ffc46b}
.kontrol-sonuc.kotu .halka .dolgu{stroke:#ff8b7a}
.halka-ic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px}
.halka-ic b{font-family:"General Sans",sans-serif;font-size:35px;font-weight:600;letter-spacing:-.03em}
.halka-ic span{font:400 11.6px Inter;color:var(--sonuk)}
.ks-yazi{flex:1;min-width:250px}
.ks-alan{display:block;font-size:12px;letter-spacing:.1em;color:var(--sonuk);margin-bottom:8px}
.ks-yazi h3{font-size:clamp(21px,2.5vw,29px);margin-bottom:9px}
.ks-yazi p{color:var(--soluk);font-size:15px;margin-bottom:17px;max-width:52ch}

.ks-liste{list-style:none;margin-top:26px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;
  background:var(--cizgi);border:1px solid var(--cizgi);border-radius:var(--kose);overflow:hidden}
.ks-liste li{background:var(--kart-2);padding:16px 18px;display:flex;gap:13px;align-items:flex-start;
  opacity:0;transform:translateY(10px)}
.ks-liste li.gor{opacity:1;transform:none;
  transition:opacity .5s var(--yay),transform .6s var(--yay)}
.ks-im{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:2px}
.ks-im svg{width:11px;height:11px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
li.iyi .ks-im{background:rgba(120,220,160,.13)}
li.iyi .ks-im svg{stroke:#78dca0}
li.kotu .ks-im{background:rgba(255,139,122,.14)}
li.kotu .ks-im svg{stroke:#ff8b7a}
.ks-liste b{display:block;font:500 14.6px Inter;margin-bottom:4px}
.ks-liste span{display:block;font:400 13.4px/1.65 Inter;color:var(--soluk)}
li.kotu b{color:var(--metin)}

@media(max-width:640px){
  .kk-ic{padding:16px 12px}
  .kk input{font-size:16px;width:13ch;min-width:13ch}
  .kk input:focus,.kk input:not(:placeholder-shown){width:16ch}
  .kk-git{width:100%;justify-content:center}
  .kontrol.calisiyor .kk-yazi{max-width:130px;opacity:1}
  .ks-ust{gap:18px}
}
.ks-kapsam{margin-top:16px;font:400 12.8px/1.75 Inter;color:var(--sonuk);max-width:76ch}