/* Tekdokun - herkese acik tanitim sayfasi.

   Kahraman sahne kaydirma ile oynuyor: kart yukaridan telefona iniyor,
   temas aninda ekran yaniyor. Video degil, tamamen kod. Sayfa bu yuzden
   agirlasmiyor ve her telefonda ayni hizda calisiyor.

   Renkler ve yazi, kart sayfasiyla ayni dunyadan geliyor. Ziyaretci
   once burayi sonra kartin kendisini gordugunde tek bir marka goruyor. */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

:root{
  --canvas:#080c18;
  --canvas-2:#0b1120;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.028);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --text:#eaf0fb;
  --muted:rgba(234,240,251,.64);
  --accent:#2f7dff;
  --accent-lit:#5b9bff;
  --on-accent:#06101f;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.34,.8,.32,1);
  --pad:clamp(20px,5vw,56px);
  --gap:clamp(64px,10vw,132px);
  --radius:20px;
}

html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

/* ---- Ortam: sayfa bir yer gibi dursun ---------------------------- */

.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 40% at 50% 4%, rgba(47,125,255,.17) 0%, transparent 70%),
    radial-gradient(48% 34% at 88% 92%, rgba(47,125,255,.10) 0%, transparent 74%);
}

/* ---- Ust cubuk ---------------------------------------------------- */

.ust{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  padding-top:calc(14px + env(safe-area-inset-top));
  background:rgba(8,12,24,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.ust.is-kaydi{border-bottom-color:var(--line-soft);background:rgba(8,12,24,.9)}
.ust-marka{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.ust-kilit{display:block;height:24px;line-height:0}
.ust-kilit svg{height:100%;width:auto;display:block}
@media (min-width:600px){.ust-kilit{height:27px}}
.ust-cta{
  display:inline-flex;align-items:center;min-height:38px;padding:0 16px;
  border-radius:11px;background:var(--accent);color:#fff;
  font-size:14.5px;font-weight:600;text-decoration:none;
  transition:filter .22s var(--ease),transform .18s var(--ease);
}
.ust-cta:hover{filter:brightness(1.1)}
.ust-cta:active{transform:scale(.98)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:6px}

/* ---- Kahraman sahne ------------------------------------------------ */

.kahraman{position:relative;z-index:1;height:320vh}
.sahne{
  position:sticky;top:0;height:100svh;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  align-items:center;justify-items:center;
  overflow:hidden;
}

.sahne-ic{
  position:relative;
  width:min(420px,86vw);
  height:min(520px,56svh);
  max-height:100%;
  align-self:center;
  --kw:min(152px,38vw,16.5svh);
  --tw:min(232px,54vw,24svh);
  display:grid;place-items:center;
}

/* Temas isigi: kart telefona degdiginde acilir */
.temas{
  position:absolute;left:50%;top:44%;
  width:min(460px,90vw);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(calc(.5 + var(--tp,0) * .75));
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,125,255,.55) 0%, rgba(47,125,255,.16) 38%, transparent 68%);
  opacity:calc(var(--tp,0) * .85);
  pointer-events:none;
  filter:blur(2px);
}

/* Telefon. Ekranin ici de telefon genisligine bagli olcekleniyor:
   sabit piksel kullanildiginda alcak pencerelerde satirlar ekrandan
   tasiyordu. --tf = telefon genisliginin yuzde biri. */
.tel{
  position:absolute;left:50%;top:44%;
  transform:translate(-50%,-50%);
  width:var(--tw);
  --tf:calc(var(--tw) / 100);
  padding:calc(var(--tf) * 4.1);
  border-radius:calc(var(--tf) * 16.4);
  background:linear-gradient(160deg,#1a2338,#05070e 62%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.6);
}
.tel-ekran{
  position:relative;aspect-ratio:9/18.6;overflow:hidden;
  border-radius:calc(var(--tf) * 12.8);
  background:#05080f;
  display:flex;flex-direction:column;
  padding:calc(var(--tf) * 8.2) calc(var(--tf) * 5.6);
}
/* Ekran yanmadan once sonuk, temas edince canlaniyor */
.tel-ic{
  display:flex;flex-direction:column;gap:calc(var(--tf) * 4.1);height:100%;
  opacity:calc(.08 + var(--tp,0) * .92);
  transform:translateY(calc((1 - var(--tp,0)) * 6px));
}
.tel-kicker{
  height:calc(var(--tf) * 3.4);display:flex;justify-content:center;flex:none;
}
.tel-kicker svg{height:100%;width:auto;display:block}
.tel-im{
  width:calc(var(--tf) * 21.5);height:calc(var(--tf) * 21.5);
  margin:0 auto calc(var(--tf) * 2);border-radius:50%;flex:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  display:grid;place-items:center;color:var(--accent-lit);
}
.tel-im svg{width:calc(var(--tf) * 9.7);height:calc(var(--tf) * 9.7)}
.tel-satir{
  display:flex;align-items:center;gap:calc(var(--tf) * 3.1);flex:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
  border-radius:calc(var(--tf) * 5.6);
  padding:calc(var(--tf) * 3.6) calc(var(--tf) * 3.6) calc(var(--tf) * 3.6) calc(var(--tf) * 5.1);
}
.tel-govde{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.tel-et{font-size:calc(var(--tf) * 3.3);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,240,251,.6)}
.tel-dg{font-size:calc(var(--tf) * 5.4);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tel-dg.mono{font-family:var(--mono);font-size:calc(var(--tf) * 2.97);letter-spacing:-.02em;text-overflow:clip}
.tel-kop{
  width:calc(var(--tf) * 10.8);height:calc(var(--tf) * 10.8);flex:none;
  border-radius:calc(var(--tf) * 3.6);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;color:rgba(234,240,251,.5);
}
.tel-kop svg{width:calc(var(--tf) * 5.1);height:calc(var(--tf) * 5.1)}
.tel-dugmeler{margin-top:calc(var(--tf) * 2.6);display:flex;gap:calc(var(--tf) * 2.6);flex:none}
.tel-btn{
  flex:1;border-radius:calc(var(--tf) * 5.1);text-align:center;
  padding:calc(var(--tf) * 4.1) calc(var(--tf) * 3.1);
  background:var(--accent);color:#fff;
  font-size:calc(var(--tf) * 5.1);font-weight:600;white-space:nowrap;
}
.tel-btn.ikincil{
  flex:none;padding-inline:calc(var(--tf) * 4.6);
  background:transparent;color:rgba(234,240,251,.72);
  border:1px solid rgba(255,255,255,.12);
}
.tel-dip{
  margin-top:calc(var(--tf) * 3.6);height:calc(var(--tf) * 2.7);flex:none;
  display:flex;justify-content:center;color:rgba(234,240,251,.34);
}
.tel-dip svg{height:100%;width:auto;display:block}

/* Kart destesi: ucu birden yukaridan iniyor, asagida yelpaze gibi
   aciliyor. IBAN karti en onde telefona yasliyor. Her kartin baslangic
   ve bitis degerleri kendi degiskenlerinde; ayar tek satirdan yapiliyor. */
.kart-3d{
  position:absolute;left:50%;top:44%;
  width:var(--kw);
  aspect-ratio:1.586;
  --kf:calc(var(--kw) / 100);   /* kart genisliginin yuzde biri */
  transform:
    translate(-50%,-50%)
    translateX(calc(var(--kp,0) * var(--dx)))
    translateY(calc(var(--y0) + var(--kp,0) * var(--dy)))
    rotate(calc(var(--r0) + var(--kp,0) * var(--dr)))
    scale(calc(var(--sc0) + var(--kp,0) * var(--dsc)));
  border-radius:calc(var(--kf) * 7);
  padding:calc(var(--kf) * 7.5);
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(152deg,#1d2b4c 0%,#06090f 76%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 40px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.kart-3d::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.13) 47%,transparent 62%);
  opacity:calc(.35 + var(--kp,0) * .65);
}
.kart-ig{--y0:calc(var(--kw) * -5.2);--dy:calc(var(--kw) * 6.72);--dx:-72%;--r0:-16deg;--dr: 4deg;--sc0:.86;--dsc:.10;z-index:3}
.kart-gg{--y0:calc(var(--kw) * -5.0);--dy:calc(var(--kw) * 6.34);--dx:  0%;--r0:-10deg;--dr: 7deg;--sc0:.88;--dsc:.10;z-index:4}
.kart-ib{--y0:calc(var(--kw) * -4.8);--dy:calc(var(--kw) * 6.32);--dx: 72%;--r0: -4deg;--dr:11deg;--sc0:.90;--dsc:.10;z-index:5}

.k-ust{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--kf) * 4)}
.k-marka{height:calc(var(--kf) * 4.4);line-height:0;opacity:.94}
.k-marka svg{height:100%;width:auto;display:block}
.k-nfc{width:calc(var(--kf) * 8.5);height:calc(var(--kf) * 8.5);opacity:.6}
.k-ad{font-family:var(--display);font-weight:800;font-size:calc(var(--kf) * 13);letter-spacing:-.035em;line-height:1}
.k-alt{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--kf) * 4)}
.k-not{font-family:var(--mono);font-size:calc(var(--kf) * 3.9);letter-spacing:.14em;text-transform:uppercase;opacity:.5;white-space:nowrap}
.k-cip{width:calc(var(--kf) * 11.5);height:calc(var(--kf) * 9);border-radius:calc(var(--kf) * 2);flex:none;background:linear-gradient(140deg,#c9d4e8,#7c8ca8 55%,#afbdd4);opacity:.78}

/* Kahraman yazilari */
.bantlar{
  position:relative;z-index:6;width:100%;
  display:grid;place-items:center;pointer-events:none;
  padding:clamp(64px,10svh,120px) var(--pad) clamp(14px,2.6svh,28px);
}
.bant{
  grid-area:1/1;text-align:center;max-width:34ch;
  opacity:var(--o,0);
  transform:translateY(calc((1 - var(--o,0)) * 10px));
}
.bant h1,.bant p.b-baslik{
  font-family:var(--display);font-weight:800;
  font-size:min(clamp(38px,9.4vw,76px), 8.5svh);letter-spacing:-.038em;line-height:1;
  margin:0 auto 12px;max-width:13ch;text-wrap:balance;
}
.bant h1 span,.bant p.b-baslik span{color:var(--accent-lit)}
.bant p.b-alt{margin:0 auto;max-width:36ch;color:var(--muted);font-size:min(clamp(15px,1.6vw,18px), 4.2svh);line-height:1.5}

.kaydir{
  position:absolute;left:50%;bottom:clamp(10px,2svh,20px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,240,251,.42);
  opacity:var(--kaydir-o,1);transition:opacity .4s var(--ease);
}
.kaydir svg{width:15px;height:15px;animation:inceIn 2.4s var(--ease-soft) infinite}
@keyframes inceIn{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:1}}

/* ---- Bolumler ------------------------------------------------------- */

.bolum{position:relative;z-index:1;padding-block:var(--gap);border-top:1px solid var(--line-soft);scroll-margin-top:72px}
.bolum-bas{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,5vw,54px)}

.etiket{
  margin:0;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lit);
}
h2{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,5.2vw,60px);letter-spacing:-.032em;line-height:1.06;
  text-wrap:balance;
}
h2 span{color:var(--accent-lit)}
h3{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2.1vw,25px);letter-spacing:-.022em;line-height:1.2;
  text-wrap:balance;
}
p{margin:0}
.lede{color:var(--muted);font-size:clamp(17px,1.55vw,21px);line-height:1.55;max-width:56ch}

/* Urun kartlari */
.urunler{display:grid;gap:14px}
@media (min-width:880px){.urunler{grid-template-columns:repeat(3,1fr)}}
.urun{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:13px;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
  opacity:0;transform:translateY(14px);
}
.urun.gorundu{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .3s var(--ease)}
.urun:hover{border-color:rgba(47,125,255,.42)}
.urun-tepe{display:flex;align-items:center;gap:11px}
.urun-im{
  width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:rgba(47,125,255,.15);color:var(--accent-lit);
}
.urun-im svg{width:20px;height:20px}
.urun-vaat{font-size:15.5px;line-height:1.5}
.urun ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:4px}
.urun li{display:flex;gap:9px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.urun li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;background:var(--accent-lit)}

.urun.sorun{background:var(--surface-2)}
.urun.sorun p{color:var(--muted);font-size:15.5px;line-height:1.5}

/* Adimlar */
.adimlar{display:grid;gap:0}
.adim{display:flex;gap:18px;padding-block:22px;border-bottom:1px solid var(--line-soft)}
.adim:last-child{border-bottom:0}
.adim-no{
  font-family:var(--mono);font-size:12px;color:var(--accent-lit);
  flex:none;width:26px;padding-top:4px;font-variant-numeric:tabular-nums;
}
.adim-ic{display:flex;flex-direction:column;gap:5px}
.adim p{color:var(--muted);font-size:15px;max-width:48ch}

/* Guven satirlari */
.guven{display:grid;gap:0}
.g-satir{display:grid;gap:6px 26px;padding-block:clamp(18px,2.4vw,24px);border-bottom:1px solid var(--line-soft)}
@media (min-width:760px){.g-satir{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:baseline}}
.g-satir:last-child{border-bottom:0}
.g-satir p{color:var(--muted);font-size:15.5px}

/* Fiyat */
.fiyatlar{display:grid;gap:14px}
@media (min-width:760px){.fiyatlar{grid-template-columns:1fr 1fr}}
.paket{
  border-radius:var(--radius);padding:clamp(22px,3vw,32px);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px;
}
.paket.one-cikan{border-color:rgba(47,125,255,.5);background:rgba(47,125,255,.07)}
.p-rozet{
  align-self:flex-start;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--accent);color:#fff;
  padding:4px 10px;border-radius:999px;margin-bottom:5px;
}
.p-ad{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.p-fiyat{font-family:var(--display);font-weight:800;font-size:clamp(38px,6vw,58px);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.p-alt{color:var(--muted);font-size:14.5px;margin-top:3px}

.ekler{display:grid;gap:0;margin-top:20px}
.ek{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-block:15px;border-bottom:1px solid var(--line-soft)}
.ek:last-child{border-bottom:0}
.ek-ad{flex:1;min-width:0;font-weight:600;font-size:15.5px}
.ek-not{color:var(--muted);font-size:13.5px;display:block;margin-top:2px;max-width:48ch}
.ek-fy{font-family:var(--mono);font-size:15px;color:var(--accent-lit);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Kapanis */
.kapanis{
  border-radius:26px;padding:clamp(30px,5vw,60px);
  background:linear-gradient(155deg,rgba(47,125,255,.14),rgba(255,255,255,.03));
  border:1px solid var(--line);
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;
}
.iletisim{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:4px}
.iletisim a{font-family:var(--mono);font-size:15px;color:var(--accent-lit);text-decoration:none}
.iletisim a:hover{text-decoration:underline}

.dip{
  position:relative;z-index:1;
  border-top:1px solid var(--line-soft);
  padding-block:28px calc(46px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:13px;color:var(--muted);
}
.dip a{color:var(--muted);text-decoration:none}
.dip a:hover{color:var(--accent-lit)}
.dip-linkler{display:flex;flex-wrap:wrap;gap:8px 18px}

/* ---- Hareket azaltma ------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}

  /* Kaydirma sahnesi yerine hikayenin bittigi tek kare: yazi ustte,
     kart inmis, ekran yanmis. Sayfa normal akista, sabitlenmiyor. */
  .kahraman{height:auto}
  .sahne{position:relative;height:auto;--tp:1;
         padding-block:clamp(84px,10vw,120px) clamp(40px,8vw,80px)}
  .sahne-ic{height:min(520px,66svh);max-height:none}
  .kart-3d{
    transform:translate(-50%,-50%) translateX(-16%) translateY(95%) rotate(-4deg);
  }
  .bantlar{padding-top:0;margin-bottom:30px}
  .bant{opacity:1 !important;transform:none !important}
  .bant:not(:first-child){display:none}
  .kaydir{display:none}
  .urun{opacity:1;transform:none}
}


/* Sekme arka plandayken hicbir sey oynamasin */
body.durdu *,body.durdu *::before,body.durdu *::after{animation-play-state:paused !important}