/* ============================================================
   Fidanet Solution Oy · index.css
   Pixa şablonu temel alındı, palet ve bileşenler Fidanet icin yazildi.
   Palet "Acik Kup" marka kimliginden gelir. :root acik tema,
   .tw-dark koyu tema.

   KONTRAST NOTU: metin renklerinin hepsi zemine karsi olculdu, en dusuk
   deger 5,1:1. Kucuk punto + soluk renk birlesimi bilerek birakilmadi.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Libre+Franklin:wght@400;500;600;700&family=Martian+Mono:wght@400;500&display=swap');

/* ---------- 1 · Jetonlar ---------- */
/* ACIK KUP kimligi. Palet marka kitindan gelir:
   Navy #0F1B33 · Signal Blue #3056D3 · Sky #5B7CE8 · Paper #F7F8FA
   Grey #5C6470 · koyu yuzey #0A1230. Urun aksanlari: fizzy camgobegi,
   baslic mor. Yandaki oranlar metnin kendi zeminine karsi olculdu;
   en dusuk deger yuzeylerin hepsinde 5,1:1 uzerinde. */
:root{
  /* ACIK TEMA · kagit */
  --fd-bg:#F7F8FA;
  --fd-bg-0:rgba(247,248,250,0);  /* ayni renk, alfa sifir: gradyan sonu */
  --fd-surface:#FFFFFF;
  --fd-surface-2:#EDF0F5;
  --fd-border:#D9DEE8;
  --fd-border-soft:#E7EAF1;
  --fd-text:#0F1B33;          /* 16,1:1 */
  --fd-text-2:#1E2C4A;        /* 13,1:1 */
  --fd-muted:#414D66;         /*  8,0:1 */
  --fd-faint:#5C6470;         /*  5,6:1 */

  --fd-accent:#3056D3;        /*  5,8:1 signal blue */
  --fd-accent-hi:#2544AE;
  --fd-accent-soft:rgba(48,86,211,.10);
  --fd-accent-line:rgba(48,86,211,.30);

  /* Isaret: kupun uc yuzu. Acik temada kitin renkli surumu, koyu
     temada on-dark surumu; yalnizca sol yuz kagida donuyor. */
  --fd-mark-top:#5B7CE8;
  --fd-mark-body:#0F1B33;
  --fd-mark-face:#3056D3;

  /* Urun renkleri Fidanet paletinden gelmez, urunlerin kendi marka
     kitlerinden gelir. baslic: pine, koyu zeminde sprout. fizzy: mavi,
     koyu zeminde acilmis mavi ve nokta rengi ters doner. */
  --fd-pine:#1E8A5A;          /* baslic · pine, isaret dolgusu */
  --fd-pine-text:#146044;     /*  7,1:1 */
  --fd-pine-soft:rgba(30,138,90,.10);

  --fd-fizz:#1B3BFF;          /* fizzy · birincil mavi */
  --fd-fizz-dot:#FFFFFF;      /* isaretin ic noktalari */
  --fd-fizz-text:#1631D6;     /*  8,1:1 */
  --fd-fizz-soft:rgba(27,59,255,.08);

  --fd-glow:radial-gradient(58% 58% at 50% 0%,rgba(48,86,211,.11) 0%,rgba(247,248,250,0) 72%);
  --fd-spot:rgba(48,86,211,.10);
  --fd-shadow:0 1px 2px rgba(15,27,51,.05),0 24px 48px -28px rgba(15,27,51,.28);

  /* sablon degiskenleri */
  --primary-text-color:var(--fd-text);
  --bg-color:var(--fd-bg);
  --btn-color:#FFFFFF;
  --btn-bg:#0F1B33;
  --header-link-hover:var(--fd-text);
  --header-link-hover-bg:rgba(15,27,51,.07);
  --dropdown-bg:#FFFFFF;
  --faq-h-text:var(--fd-text);
  --faq-content-text:var(--fd-muted);
  --hr-color:var(--fd-border);
  --footer-link:var(--fd-muted);
  --footer-link-hover:var(--fd-text);
  --header-bg:rgba(247,248,250,.86);
  --hero-gradient:#F7F8FA;
  --hero-bg-img:url("../assets/images/background/dots-dark.svg");

  --serif:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

.tw-dark{
  /* KOYU TEMA · marka kitindeki koyu yuzey.
     Aksan burada Sky degil onun acilmis hali: #5B7CE8 koyu zeminde
     4,8:1 veriyor ve dosyanin tabanini gecemiyor. */
  --fd-bg:#0A1230;
  --fd-bg-0:rgba(10,18,48,0);
  --fd-surface:#101A3D;
  --fd-surface-2:#16224B;
  --fd-border:#2A3768;
  --fd-border-soft:#1C2951;
  --fd-text:#F7F8FA;          /* 17,3:1 */
  --fd-text-2:#DDE3F0;        /* 14,3:1 */
  --fd-muted:#AEB9D4;         /*  9,4:1 */
  --fd-faint:#8B99BC;         /*  6,5:1 */

  --fd-accent:#8FA3E8;        /*  7,5:1 */
  --fd-accent-hi:#B3C2F5;
  --fd-accent-soft:rgba(91,124,232,.16);
  --fd-accent-line:rgba(91,124,232,.36);

  --fd-mark-top:#5B7CE8;
  --fd-mark-body:#F7F8FA;
  --fd-mark-face:#3056D3;

  --fd-pine:#5FC79A;          /* baslic · sprout, kendi kitinin koyu esi */
  --fd-pine-text:#6FD5A8;     /* 10,3:1 */
  --fd-pine-soft:rgba(95,199,154,.12);

  --fd-fizz:#3D63FF;          /* fizzy · kendi on-dark surumu */
  --fd-fizz-dot:#0B1020;
  --fd-fizz-text:#7C97FF;     /*  6,8:1 */
  --fd-fizz-soft:rgba(61,99,255,.14);

  --fd-glow:radial-gradient(58% 58% at 50% 0%,rgba(91,124,232,.16) 0%,rgba(10,18,48,0) 72%);
  --fd-spot:rgba(91,124,232,.14);
  --fd-shadow:0 1px 2px rgba(0,0,0,.4),0 28px 56px -30px rgba(0,0,0,.85);

  --primary-text-color:var(--fd-text);
  --bg-color:var(--fd-bg);
  --btn-color:#0A1230;
  --btn-bg:#F7F8FA;
  --header-link-hover:var(--fd-text);
  --header-link-hover-bg:rgba(247,248,250,.10);
  --dropdown-bg:#101A3D;
  --faq-h-text:var(--fd-text);
  --faq-content-text:var(--fd-muted);
  --hr-color:var(--fd-border);
  --footer-link:var(--fd-muted);
  --footer-link-hover:var(--fd-text);
  --header-bg:rgba(16,26,61,.84);
  --hero-gradient:#0A1230;
  --hero-bg-img:url("../assets/images/background/dots.svg");
}

/* Sozcuk isareti. Marka kiti bunu kucuk harf Archivo 800 olarak
   tanimlar; govde metninde sirket adi "Fidanet" yazilmaya devam eder,
   kucuk harf logonun kendisine aittir. */
.fd-wordmark{
  font-family:var(--serif);
  font-weight:800;
  font-size:19.5px;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--fd-text);
}
.fd-wordmark-sm{ font-size:18px; }

/* ---------- 2 · Temel ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background-color:var(--fd-bg);
  color:var(--fd-text);
  font-size:17.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.modal-open{overflow:hidden}
hr{border-color:var(--hr-color);border-style:solid}
img,svg{max-width:100%}
::selection{background:var(--fd-accent);color:var(--fd-bg)}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--fd-accent);
  outline-offset:3px;
  border-radius:5px;
}

/* ---------- 3 · Tipografi ---------- */
.fd-display{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.02;
  text-wrap:balance;
}
.fd-display-2{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.12;
}
.fd-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
.fd-muted{color:var(--fd-muted)}
.fd-faint{color:var(--fd-faint)}
.fd-lead{font-size:19px;line-height:1.6;color:var(--fd-muted)}

/* Bolum etiketleri. HTML'de zaten buyuk harf yazilir; text-transform
   kullanilmaz cunku Turkcede tarayici i harfini I yapar, I degil. */
.fd-label{
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--fd-accent);
}
.fd-label-q{color:var(--fd-faint)}

@media (min-width:640px){
  .fd-lead{font-size:20.5px}
}

/* ---------- 4 · Kaydirma cizgisi ---------- */
#fd-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--fd-fizz),var(--fd-accent),var(--fd-pine));
  z-index:60;
  transition:width .1s linear;
  pointer-events:none;
}

/* ---------- 5 · Baslik cubugu ---------- */
header > .collapsible-header{
  display:flex;
  gap:1rem;
  width:100%;
  background-color:inherit;
  place-content:center;
  overflow:hidden;
  transition:width .3s ease,height .3s ease;
}
.animated-collapse{transition:width .3s ease}

/* overflow:hidden mobil cekmecenin yukseklik animasyonu icin var.
   Masaustunde gereksiz ve zararli: dil menusu bu kutunun disina
   tastigi icin kirpilip gorunmez oluyordu. */
@media (min-width:1024px){
  header > .collapsible-header{overflow:visible}
}

/* Acilan mobil menu iki sorun tasiyordu: basligin yari saydam zeminini
   miras aldigi icin arkasi goruluyordu, ve baslik cubugunun esnek
   satirinda logonun yanindaki bosluga sikisiyordu. Mobilde panel
   basligin altina sabitlenip ekrani tam kaplar. */
@media (max-width:1023px){
  header > .collapsible-header{
    position:fixed;
    top:62px;
    left:0;
    right:0;
    width:100%;
    background-color:var(--fd-bg);
    border-top:1px solid var(--fd-border);
    /* satir yerine sutun: baglantilar ustte, Iletisim dugmesi altlarinda.
       Satir kalirsa dugme baglantilarin yanina, panelin dibine dusuyor. */
    flex-direction:column;
    place-content:flex-start;
    align-items:stretch;
    /* Dikey dolgu yok: height:0 iken border-box dolguyu kirpamiyor ve
       kapali cekmece basligin altinda 29 pikselik bir serit birakiyordu.
       Alt bosluk son blogun margin degeriyle veriliyor. */
    padding:0 24px;
  }
  header > .collapsible-header > div:last-child{margin-bottom:28px}
  header > .collapsible-header > nav{margin-inline:0}
}

.fd-header{
  background-color:var(--header-bg);
  border:1px solid var(--fd-border);
  color:var(--fd-text);
}

.header-links{
  position:relative;
  display:flex;
  align-items:center;
  min-width:fit-content;
  min-height:44px;          /* dokunma hedefi; 9px dolgu ile 43 kaliyordu */
  padding:9px 11px;         /* FI ve SV etiketleri uzun, menu 1024 pxe sigmiyordu */
  z-index:2;
  cursor:pointer;
  font-size:15.5px;
  font-weight:500;
  color:var(--fd-muted);
  transition:color .22s var(--ease);
}
.header-links::after{
  content:'';
  position:absolute;
  top:0;left:0;z-index:-1;
  width:100%;height:100%;
  background-color:var(--header-link-hover-bg);
  transform:scale(.4);
  opacity:0;
  border-radius:9px;
  transition:all 250ms var(--ease);
}
.header-links:hover{color:var(--fd-text)}
.header-links:hover::after{transform:scale(1);opacity:1}

/* okunan bolumun menu ogesi isaretlenir */
.header-links.is-active{color:var(--fd-text)}
.header-links.is-active::before{
  content:'';
  position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--fd-accent);
  border-radius:2px;
}

/* ---------- 6 · Zemin ---------- */
.hero-section{
  background-image:var(--hero-bg-img);
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
}
.hero-bg-gradient{
  background:linear-gradient(180deg,var(--hero-gradient) 18%,rgba(0,0,0,0) 58%,var(--hero-gradient) 98%);
}
.fd-glow{background:var(--fd-glow)}

/* Hero kunye satiri (2 PRODUCTS · FI · EE · DK · ...) nokta dokusunun tam
   ustune denk geliyordu; mono harflerin ince govdesi noktalarin arasinda
   kayboluyordu, en cok da acik temada. Satiri asagi almak ayni tarlanin
   baska bir yerine tasirdi, o yuzden satir kendi temiz alanini tasiyor.
   ::before cocuklardan once boyanir, cocuklar konumlandirildigi icin
   ustte kalir; z-index gerekmiyor. */
.fd-hero-meta{position:relative}
.fd-hero-meta::before{
  content:'';
  position:absolute;
  inset:-18px -34px;
  border-radius:999px;
  /* 56/48 ile satirin uclari acikta kaliyordu: eliptik yaricap satirin
     yarim genisligini gecmeli, yoksa "2 PRODUCTS" ve "FOUNDED 2025"
     kenarlarinda nokta kaliyor. */
  background:radial-gradient(74% 150% at 50% 50%,
    var(--fd-bg) 0%,var(--fd-bg) 68%,var(--fd-bg-0) 100%);
}
.fd-hero-meta > *{position:relative}

/* iki urunun rengini tasiyan yumusak halka */
.fd-aurora{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(38% 44% at 16% 8%,var(--fd-fizz-soft) 0%,transparent 70%),
    radial-gradient(38% 44% at 84% 12%,var(--fd-pine-soft) 0%,transparent 70%);
}

/* ---------- 7 · Dugmeler ---------- */
.btn{
  position:relative;
  padding:13px 22px;
  min-height:52px;
  width:max-content;
  border-radius:11px;
  color:var(--btn-color);
  background-color:var(--btn-bg);
  justify-content:center;
  align-items:center;
  display:flex;
  gap:10px;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  border:1px solid transparent;
  overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--fd-accent-line)}
.btn:active{transform:translateY(0)}
.btn:disabled{cursor:default;opacity:.5;transform:none}

/* uzerine gelince gecen isik */
.btn::after{
  content:'';
  position:absolute;top:0;left:-60%;
  width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
  transition:left .55s var(--ease);
}
.btn:hover::after{left:120%}

.btn-ghost{
  background-color:transparent;
  color:var(--fd-text);
  border:1px solid var(--fd-border);
}
.btn-ghost:hover{
  background-color:var(--fd-surface-2);
  border-color:var(--fd-accent);
}
.btn-ghost::after{display:none}
.btn i{transition:transform .22s var(--ease)}
.btn:hover i.bi-arrow-right{transform:translateX(4px)}

/* ---------- 8 · Yuzeyler ---------- */
.fd-card{
  position:relative;
  background-color:var(--fd-surface);
  border:1px solid var(--fd-border);
  border-radius:18px;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fd-card:hover{
  border-color:var(--fd-accent-line);
  transform:translateY(-4px);
  box-shadow:var(--fd-shadow);
}

/* imleci izleyen isik. JS --mx / --my yazar, yoksa hicbir sey olmaz. */
.fd-spotlight{position:relative;overflow:hidden}
.fd-spotlight::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),var(--spot,var(--fd-spot)),transparent 62%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.fd-spotlight:hover::before{opacity:1}

.fd-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 15px;
  border-radius:999px;
  border:1px solid var(--fd-border);
  background-color:var(--fd-surface);
  font-size:14.5px;
  font-weight:500;
  color:var(--fd-text-2);
  white-space:nowrap;
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.fd-chip i{color:var(--fd-accent);font-size:16px}
.fd-chip:hover{border-color:var(--fd-accent);transform:translateY(-2px)}

.fd-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 17px 9px 13px;
  border-radius:999px;
  border:1px solid var(--fd-border);
  background-color:var(--fd-surface);
  font-size:14px;
  color:var(--fd-text-2);
}
.fd-badge .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--fd-accent);
  box-shadow:0 0 0 4px var(--fd-accent-soft);
  animation:fdPulse 2.4s ease-in-out infinite;
}
@keyframes fdPulse{
  0%,100%{box-shadow:0 0 0 3px var(--fd-accent-soft)}
  50%{box-shadow:0 0 0 8px transparent}
}

/* ---------- 9 · Urun panelleri ---------- */
.fd-p-baslic{
  --p:var(--fd-pine);
  --p-text:var(--fd-pine-text);
  --p-soft:var(--fd-pine-soft);
  --spot:var(--fd-pine-soft);
}
.fd-p-fizzy{
  --p:var(--fd-fizz);
  --p-text:var(--fd-fizz-text);
  --p-soft:var(--fd-fizz-soft);
  --spot:var(--fd-fizz-soft);
}
/* Rol kartlari urun degildir. Ilan kartlari once baslic'in yesilini
   tasiyordu; artik markanin kendi aksanini tasiyorlar, urun renkleri
   urunlerde kaliyor. */
.fd-p-brand{
  --p:var(--fd-accent);
  --p-text:var(--fd-accent);
  --p-soft:var(--fd-accent-soft);
  --spot:var(--fd-accent-soft);
}
.fd-product{
  position:relative;
  overflow:hidden;
  background-color:var(--fd-surface);
  border:1px solid var(--fd-border);
  border-radius:22px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.fd-product::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--p),transparent 72%);
}
.fd-product::after{
  content:"";
  position:absolute;top:-140px;left:-90px;
  width:380px;height:380px;
  background:radial-gradient(circle,var(--p-soft) 0%,transparent 68%);
  pointer-events:none;
}
.fd-product:hover{
  border-color:color-mix(in srgb,var(--p) 52%,var(--fd-border));
  box-shadow:var(--fd-shadow);
}
/* Ilan icindeki "ne yapacaksin" bloklari. Numarayi ve ustteki ince
   cizgiyi tasirlar: gunluk is, gereklilik listesinden gorsel olarak
   ayrilsin diye. */
.fd-task{
  border-top:2px solid var(--fd-accent-line);
  padding-top:14px;
}
.fd-task-n{
  display:block;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--fd-accent);
}
.fd-task p{
  margin-top:9px;
  font-size:16.5px;
  line-height:1.65;
  color:var(--fd-muted);
}

/* Sirketin verdigi taraf: kartin icinde kendi yuzeyinde durur. */
.fd-offer{
  border:1px solid var(--fd-border);
  border-radius:16px;
  background-color:var(--fd-surface-2);
  padding:22px 24px 26px;
}
/* Yalnizca izgaradaki maddeler. ".fd-offer p" yazinca ustteki
   fd-label basligi da yakalaniyor ve digerlerinden buyuk cikiyordu. */
.fd-offer div p{
  font-size:16.5px;
  line-height:1.65;
  color:var(--fd-text-2);
}

.fd-p-name{font-weight:700;letter-spacing:-.035em;font-size:30px;line-height:1}
.fd-p-link{
  color:var(--p-text);
  font-weight:600;
  font-size:16.5px;
  transition:gap .2s var(--ease);
}
.fd-p-link:hover{gap:12px}

.fd-feat{
  display:flex;
  gap:13px;
  font-size:16.5px;
  color:var(--fd-text-2);
  padding:4px 0;
}
.fd-feat i{color:var(--p,var(--fd-accent));font-size:18px;margin-top:2px;flex:none}

/* ---------- 10 · Konsol taklitleri ---------- */
/* Ekran goruntusu yok. Yuzeyler HTML ile ciziliyor: iki temada da dogru
   gorunuyor ve urun arayuzu degistiginde bayatlamiyor. */
.fd-screen{
  background-color:var(--fd-bg);
  border:1px solid var(--fd-border);
  border-radius:16px;
  overflow:hidden;
  font-family:var(--mono);
  font-size:13.5px;
  box-shadow:var(--fd-shadow);
}
.fd-screen-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background-color:var(--fd-surface-2);
  border-bottom:1px solid var(--fd-border);
  font-size:13px;
  font-weight:500;
  letter-spacing:.09em;
  color:var(--fd-faint);
}
.fd-screen-dots{display:flex;gap:6px}
.fd-screen-dots i{width:9px;height:9px;border-radius:50%;background:var(--fd-border);display:block}

.fd-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 16px;
  border-bottom:1px solid var(--fd-border-soft);
  transition:background-color .3s var(--ease);
}
.fd-row:last-child{border-bottom:0}
.fd-row .k{color:var(--fd-muted)}
.fd-row .v{color:var(--fd-text);font-weight:600;font-variant-numeric:tabular-nums}
.fd-row .ok{color:var(--fd-pine-text)}

/* kayit zinciri canlandirmasi: satirlar sirayla yanar */
.fd-row[data-step]{opacity:.42;transition:opacity .4s var(--ease),background-color .4s var(--ease)}
.fd-row[data-step].is-on{opacity:1}
.fd-row[data-step].is-live{background-color:var(--fd-accent-soft)}
.fd-row[data-step].is-live::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--fd-accent);
}
/* JS yoksa hepsi acik kalir */
.no-anim .fd-row[data-step]{opacity:1}

/* Dar ekranda satirin dolgusu kisalir ve deger asla bolunmez:
   etiket iki satira dusebilir, sayi dusemez. */
@media (max-width:479px){
  .fd-row{padding-inline:12px;gap:10px}
  .fd-row .v{white-space:nowrap}
  .fd-screen-bar,.fd-screen-foot{padding-inline:12px}
}

.fd-sep{border-top:1px dashed var(--fd-border);margin:0}
.fd-screen-foot{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;
  border-top:1px solid var(--fd-border);
  background-color:var(--fd-surface);
  font-size:13px;font-weight:500;letter-spacing:.07em;
  color:var(--fd-faint);
}
.fd-screen-foot i{font-size:15px}

#dashboard{
  transform:perspective(1400px) translateY(14px) scale(.86) rotateX(64deg);
  transform-origin:center top;
}
/* Perspektif kutuyu genisletiyor: 375 pikselde konsol ekranin 48 piksel
   disina tasip kirpiliyordu. Kucuk ekranda yatiklik yok. */
@media (max-width:639px){
  #dashboard{transform:none}
}

/* ---------- 11 · Sayilar ---------- */
.fd-stat{text-align:center}
.fd-stat .n{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(44px,7vw,72px);
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,var(--fd-text) 25%,var(--fd-accent));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.fd-stat .t{
  margin-top:10px;
  font-size:15.5px;
  color:var(--fd-muted);
}

/* ---------- 12 · Zincir ---------- */
.fd-step{
  position:relative;
  padding:30px 18px 22px;
  border-radius:14px;
  cursor:default;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.fd-step::before{
  content:"";
  position:absolute;top:-5px;left:18px;
  width:10px;height:10px;border-radius:50%;
  background:var(--fd-accent);
  box-shadow:0 0 0 4px var(--fd-accent-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fd-step:hover{background-color:var(--fd-surface-2);transform:translateY(-3px)}
.fd-step:hover::before{transform:scale(1.35);box-shadow:0 0 0 8px var(--fd-accent-soft)}

/* ---------- 13 · SSS ---------- */
.faq-accordion{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  text-align:left;
  padding:22px 20px;
  cursor:pointer;
  background:transparent;
  border:0;
  color:var(--faq-h-text);
  font-family:var(--sans);
  font-size:17.5px;
  font-weight:600;
  min-height:60px;
  transition:color .2s var(--ease);
}
.faq-accordion:hover{color:var(--fd-accent)}
.faq-accordion .bi-plus{
  transition:transform .3s var(--ease);
  color:var(--fd-accent);
  font-size:26px;
  flex:none;
}
.faq-content{
  max-height:0;
  overflow:hidden;
  padding:0 20px;
  font-size:16.5px;
  color:var(--faq-content-text);
  transition:max-height .35s var(--ease),padding .35s var(--ease);
}

/* ---------- 14 · Alt bilgi ---------- */
.footer-link{
  color:var(--footer-link);
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:16px;
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.footer-link:hover{color:var(--fd-accent);transform:translateX(3px)}

/* ---------- 15 · Kaydirma cubugu ---------- */
.scrollbar::-webkit-scrollbar{width:6px;height:20px}
.scrollbar::-webkit-scrollbar-thumb{background:var(--fd-border);border-radius:25px}

/* ---------- 16 · Acilma animasyonu ---------- */
.js-anim .reveal-up{opacity:0;transform:translateY(52px)}

/* Ekranin ust kismi JS'i beklemez: kahraman icerigi ilk boyamada
   CSS ile yerine oturur, GSAP gec gelse bile bos alan gorunmez. */
@keyframes fdRise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
.fd-enter{
  animation:fdRise .75s var(--ease) both;
  animation-delay:calc(var(--d,0) * 90ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim .reveal-up{opacity:1 !important;transform:none !important}
  .fd-enter{animation:none}
  .fd-row[data-step]{opacity:1 !important}
  .fd-badge .dot{animation:none}
  .btn:hover,.fd-card:hover,.fd-step:hover{transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  #dashboard{transform:none}
}

/* ---------- 17 · Dil secici ---------- */
/* Basliktaki acilir menu. Bes dili yan yana yazmak menuyu tasiriyordu;
   buton yalnizca gecerli dilin kodunu gosterir. */
.lang-switch{position:relative;flex:none}

.lang-btn{
  display:flex;align-items:center;gap:7px;
  height:44px;padding:0 11px;
  border-radius:10px;
  border:1px solid var(--fd-border);
  background:transparent;
  color:var(--fd-text);
  cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.lang-btn:hover{background-color:var(--fd-surface-2);border-color:var(--fd-faint)}
.lang-btn .bi{transition:transform .22s var(--ease);color:var(--fd-muted)}
.lang-btn[aria-expanded="true"] .bi{transform:rotate(180deg)}
.lang-code{font-size:13px;font-weight:500;letter-spacing:.08em}

.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:190px;
  padding:6px;
  border-radius:14px;
  border:1px solid var(--fd-border);
  background:var(--dropdown-bg);
  box-shadow:var(--fd-shadow);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lang-menu[hidden]{display:none}

.lang-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:0 12px;
  border-radius:9px;
  font-size:16px;
  color:var(--fd-muted);
  text-decoration:none;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.lang-item:hover{background-color:var(--fd-surface-2);color:var(--fd-text)}
.lang-item .lang-code{color:var(--fd-faint)}
.lang-item.is-current{color:var(--fd-text);font-weight:600}
.lang-item.is-current .lang-code{color:var(--fd-accent)}

/* Mobilde acilir menu yok. Cekmece overflow:hidden ile kirpildigi icin
   icinde acilan panel gorunmuyordu; bes dil zaten tek satira sigiyor. */
@media (max-width:1023px){
  .lang-switch{width:100%}
  .lang-btn{display:none}
  .lang-menu,.lang-menu[hidden]{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    position:static;
    width:100%;
    min-width:0;
    padding:0;
    gap:8px;
    border:0;
    background:none;
    box-shadow:none;
  }
  .lang-item{
    /* Bes kod satiri esit paylasir: sabit genislikte besincisi alt
       satira dusuyor ve kirpilan cekmecenin disinda kaliyordu. */
    flex:1 1 0;
    min-width:0;
    padding:0 6px;
    justify-content:center;
    border:1px solid var(--fd-border);
    border-radius:10px;
  }
  .lang-item.is-current{border-color:var(--fd-accent)}
  .lang-item > span:first-child{display:none}
}

/* Kunyedeki e-posta baglantisi satir ici oldugu icin 21 px kaliyordu. */
.fd-card dd a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}