/* ---------- 0. YAZI TIPI ------------------------------------------------
   Inter degisken surumu, Turkce kapsamina indirgenmis ve kendi sunucumuzdan
   servis ediliyor. Google Fonts'a istek gitmez (gizlilik + tek bir baglanti
   daha az). Iki dosya: temel latin ve Turkce harflerin bulundugu latin-ext;
   tarayici unicode-range'e bakarak yalnizca gerekeni indirir.
   Kaynak: Google Fonts, SIL Open Font License 1.1
   -------------------------------------------------------------------- */
@font-face{
  font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+0152-0153,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212;
}
@font-face{
  font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0020,U+0041,U+00A0,U+00C4,U+0100-0130,U+0132-0148,U+014A-0151,U+0154-017F,U+2020,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20BF,U+2113;
}

/* ==========================================================================
   DOĞANIUM — Design System
   1. Tokens        5. Header / Nav
   2. Reset & Base  6. Sections & Components
   3. Layout        7. Footer
   4. Typography    8. Utilities & Motion
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Lacivert skala — logodan türetildi */
  --ink-900:#06182a;
  --ink-800:#0d3049;   /* marka lacivert */
  --ink-700:#164864;
  --ink-600:#2a6183;
  --ink-500:#4a7ea0;

  /* Kırmızı — marka vurgusu */
  --brand:#e2001a;
  --brand-600:#c40017;
  --brand-700:#a20013;
  --brand-tint:#fff0f2;

  /* Nötr */
  --white:#ffffff;
  --paper:#fbfcfe;          /* govde zemini - saf beyaz degil */
  --surface:#f4f8fc;
  --surface-2:#eef2f7;
  --line:#e3e9f1;
  --line-strong:#d2dbe7;
  --text:#0d3049;
  --text-2:#43596e;
  --muted:#6b7f94;
  --muted-2:#93a3b5;

  /* Koyu bölüm yüzeyleri */
  --dark-bg:#123c5c;
  --dark-surface:rgba(255,255,255,.07);
  --dark-line:rgba(255,255,255,.14);
  --dark-text:#eef4f9;
  --dark-muted:#a8c0d3;

  /* Ölçek */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;

  /* Radius */
  --r-sm:10px; --r:14px; --r-md:18px; --r-lg:20px; --r-xl:26px; --r-full:999px;

  /* Gölge — çok hafif */
  --sh-1:0 1px 2px rgba(6,24,42,.05);
  --sh-2:0 1px 2px rgba(6,24,42,.04), 0 6px 16px rgba(6,24,42,.05);
  --sh-3:0 2px 4px rgba(6,24,42,.04), 0 14px 34px rgba(6,24,42,.09);
  --sh-4:0 24px 60px rgba(6,24,42,.16);

  /* Yapı */
  --max:1240px;
  --max-narrow:760px;
  --header-h:104px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET & BASE --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
html{background:var(--paper)}
body{
  margin:0;
  /* Zemin: kontur dokusu + uzerinde iki yumusak isik lekesi.
     Lekeler viewport'a sabit, doku sayfayla birlikte kayar. */
  background:
    radial-gradient(60vw 46vw at 88% 2%,rgba(146,193,231,.26),transparent 62%),
    radial-gradient(52vw 40vw at 2% 46%,rgba(172,209,238,.20),transparent 60%),
    url("/assets/img/doku-dalga.svg") repeat;
  background-attachment:fixed,fixed,scroll;
  background-size:auto,auto,1200px 600px;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Mobil: sabit arka plan katmani iOS Safari'de bozuk olceklenir ve kaydirmayi
   yavaslatir; lekeleri kaldirip yalnizca dokuyu, daha sik desende birakiyoruz. */
@media (max-width:900px),(pointer:coarse){
  body{
    background:url("/assets/img/doku-dalga.svg") repeat;
    background-attachment:scroll;
    background-size:640px 320px;
  }
}

/* ---------- Açılış ekranı ------------------------------------------------
   Doğanium ambleminin kendi formu: kalın bir yay ve yanındaki nokta.
   Yay uçtan uca çizilerek beliriyor, hafifçe dönerek yerine oturuyor;
   ardından nokta ve marka adı geliyor. Katman CSS ile kendi kendine kaybolur,
   JS çalışmasa da içerik açıkta kalır.
   -------------------------------------------------------------------- */
.acilis{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--paper);
  animation:acilisKapan .45s ease 1.45s forwards;
}
.acilis__ic{display:grid;place-items:center;gap:20px}
.acilis__amblem{width:108px;height:108px;overflow:visible}

.acilis__yay{
  fill:none;stroke:var(--brand);stroke-width:20.4;stroke-linecap:butt;
  stroke-dasharray:160;stroke-dashoffset:160;
  transform-origin:60px 60px;
  animation:acilisCiz 1s cubic-bezier(.4,.85,.35,1) both;
}
.acilis__nokta{
  fill:var(--brand);transform-origin:58.7px 60px;
  animation:acilisNokta .45s cubic-bezier(.34,1.5,.5,1) .62s both;
}
.acilis__ad{
  margin:0;font-size:1.08rem;font-weight:800;letter-spacing:-.02em;color:var(--ink-800);
  animation:acilisAd .5s ease .85s both;
}
.acilis.is-bitti{animation:acilisKapan .32s ease forwards}

@keyframes acilisCiz{
  0%  {stroke-dashoffset:160;transform:rotate(-35deg)}
  100%{stroke-dashoffset:0;transform:rotate(0)}
}
@keyframes acilisNokta{
  0%  {transform:scale(0);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes acilisAd{
  0%  {opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:none}
}
@keyframes acilisKapan{to{opacity:0;visibility:hidden;pointer-events:none}}

@media (prefers-reduced-motion:reduce){
  .acilis{display:none}
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:rgba(226,0,26,.14);color:var(--ink-800)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:var(--max-narrow)}
.section{padding-block:clamp(64px,8vw,112px)}
.section-sm{padding-block:clamp(48px,5vw,72px)}
.section--surface{background:rgba(238,244,251,.72);border-block:1px solid var(--line)}
.section--dark{color:var(--dark-text);
  background:linear-gradient(168deg,#17486d 0%,#123c5c 55%,#0f3350 100%)}
.section--dark .sec-title,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .sec-lead,.section--dark p{color:var(--dark-muted)}

.grid{display:grid;gap:var(--s-5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.split--wide-right{grid-template-columns:.85fr 1.15fr}
.split--top{align-items:start}

/* ---------- 4. TYPOGRAPHY ------------------------------------------------ */
.display{
  font-size:clamp(2.15rem,1.35rem + 3.4vw,3.9rem);
  line-height:1.06;letter-spacing:-.035em;font-weight:700;
}
h1,.h1{font-size:clamp(2rem,1.3rem + 2.9vw,3.3rem);line-height:1.1;letter-spacing:-.032em;font-weight:700}
h2,.h2{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.5rem);line-height:1.16;letter-spacing:-.028em;font-weight:700}
h3,.h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.3;letter-spacing:-.018em;font-weight:650}
h4,.h4{font-size:1rem;line-height:1.4;letter-spacing:-.012em;font-weight:650}

.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin-bottom:var(--s-4);
}
.eyebrow--muted{color:var(--muted)}
.section--dark .eyebrow{color:#ff7a8c}

.sec-head{max-width:820px;margin-bottom:clamp(36px,4vw,60px)}
.sec-head--center{margin-inline:auto;text-align:center;max-width:760px}
.sec-head--center .sec-lead{margin-inline:auto}
.sec-lead{color:var(--muted);margin-top:var(--s-4);font-size:1.03rem;max-width:78ch}
.lead{color:var(--muted);font-size:clamp(1rem,.95rem + .3vw,1.13rem)}
.prose p + p{margin-top:var(--s-4)}
.text-red{color:var(--brand)}
.small{font-size:.86rem}

/* ---------- 5. HEADER / NAV --------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 18px rgba(6,24,42,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:var(--header-h)}

.brand{display:inline-flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.brand__logo{height:72px;width:auto;flex:none}
/* doganium-logo.png dosyasinda ust/alt 26px seffaf bosluk var (150px'in %17'si).
   Slogani logonun gorsel alt kenarina hizalamak icin o payi geri aliyoruz. */
.brand__slogan{font-size:.62rem;font-weight:650;letter-spacing:.01em;color:#4a5c70;
  line-height:1;white-space:nowrap;margin-top:calc(-.17 * 72px)}
.brand__slogan b{color:var(--brand);font-weight:700}
.site-footer .brand{gap:2px}
.site-footer .brand__logo{height:50px}
.site-footer .brand__slogan{font-size:.52rem;color:var(--muted);margin-top:calc(-.17 * 50px)}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links a{
  display:block;padding:8px 10px;border-radius:var(--r-sm);white-space:nowrap;
  font-size:.875rem;font-weight:550;color:var(--text-2);transition:color .2s,background .2s;
}
.nav__links a:hover{color:var(--ink-800);background:var(--surface-2)}
.nav__links a[aria-current="page"]{color:var(--ink-800);font-weight:650}
/* Header sagindaki iletisim butonu: sade, cerceveli, ikonlu.
   Dolgulu kirmizi yerine notr durur; dar ekranda yazi gizlenip ikon kalir. */
.nav__demo{display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:8px 14px;border-radius:10px;
  background:#fff;border:1.5px solid var(--brand);color:var(--brand);
  font-size:.85rem;font-weight:650;letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(226,0,26,.10);
  transition:background .18s,border-color .18s,box-shadow .18s,color .18s}
.nav__demo svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--brand);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav__demo:hover{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 3px 10px rgba(226,0,26,.24)}
.nav__demo:hover svg{stroke:#fff}
.nav__demo:active{box-shadow:none}

/* cok dar ekranda yalnizca ikon */
@media (max-width:400px){
  .nav__demo{padding:10px}          /* dokunma hedefi 34px altina dusmesin */
  .nav__demo span{display:none}
}


.nav__actions{display:flex;align-items:center;gap:var(--s-2);flex:none}
/* menuyu butona yaklastiran bosluk yalnizca menu yatayken gecerli;
   mobilde menu acilir hale geliyor ve bu bosluk header i tasiriyordu */
@media (min-width:1101px){ .nav__actions{margin-left:var(--s-5)} }


.nav__toggle{
  display:none;width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);cursor:pointer;
}
.nav__toggle span{position:relative;display:block;width:17px;height:1.5px;background:var(--ink-800);
  transition:transform .28s var(--ease),background .2s}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
  background:var(--ink-800);transition:transform .28s var(--ease),top .2s}
.nav__toggle span::before{top:-5.5px}
.nav__toggle span::after{top:5.5px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---- Dil seçici ---- */
.lang-switch{position:relative;flex:none}
.lang__btn{display:inline-flex;align-items:center;gap:5px;padding:7px 8px;
  border:0;border-radius:var(--r-sm);background:transparent;
  font:inherit;font-size:.78rem;font-weight:600;color:var(--muted-2);cursor:pointer;
  letter-spacing:.02em;transition:color .2s,background .2s}
.lang__btn:hover{color:var(--ink-800);background:var(--surface-2)}
.lang__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lang__chev{width:10px!important;height:10px!important;opacity:.6;transition:transform .2s}
.lang-switch.is-open .lang__chev{transform:rotate(180deg)}

.lang__menu{position:absolute;top:calc(100% + 8px);right:0;z-index:120;
  min-width:168px;padding:6px;margin:0;list-style:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3)}
.lang__menu li{display:block}
.lang__menu button{display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border:0;border-radius:9px;background:transparent;
  font:inherit;font-size:.88rem;color:var(--text-2);text-align:left;cursor:pointer;
  transition:background .15s,color .15s}
.lang__menu button b{display:inline-block;min-width:24px;font-size:.74rem;font-weight:800;
  color:var(--muted-2);letter-spacing:.04em}
.lang__menu button:hover{background:var(--surface-2);color:var(--ink-800)}
.lang__menu .is-on{color:var(--ink-800);font-weight:650}
.lang__menu .is-on b{color:var(--brand)}

/* Google'ın kendi arayüzü ve üst çubuğu tamamen gizli */
#gt-hidden,.goog-te-banner-frame,.skiptranslate iframe,.goog-te-gadget{display:none!important}
body{top:0!important}
font[style],font{background:none!important;box-shadow:none!important;color:inherit!important;
  border:0!important;text-decoration:inherit!important}
.goog-text-highlight{background:none!important;box-shadow:none!important;border:0!important}
#goog-gt-tt,.goog-te-balloon-frame{display:none!important}

/* ---------- BUTTONS ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  font-size:.925rem;font-weight:600;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease),box-shadow .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:14px 26px;font-size:.98rem;border-radius:var(--r)}
.btn--sm{padding:8px 15px;font-size:.86rem}
.btn--block{width:100%}

.btn--primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(226,0,26,.2)}
.btn--primary:hover{background:var(--brand-600);box-shadow:0 8px 22px rgba(226,0,26,.26)}
.btn--dark{background:var(--ink-800);color:#fff}
.btn--dark:hover{background:var(--ink-700)}
.btn--outline{border-color:var(--line-strong);color:var(--ink-800);background:var(--white)}
.btn--outline:hover{border-color:var(--ink-800);background:var(--white)}
.btn--quiet{color:var(--text-2);background:transparent}
.btn--quiet:hover{background:var(--surface-2);color:var(--ink-800)}
.section--dark .btn--outline,.btn--outline-light{
  background:transparent;border-color:rgba(255,255,255,.24);color:#fff}
.section--dark .btn--outline:hover,.btn--outline-light:hover{
  border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}
.btn__ext{font-size:.9em;opacity:.75}
.lbl-short{display:none}

.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;
  color:var(--brand);transition:gap .2s var(--ease)}
.link-arrow:hover{gap:10px}
.section--dark .link-arrow{color:#ff8496}

/* ---------- 6. COMPONENTS ------------------------------------------------ */
/* Kart */
.card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);padding:clamp(22px,2.4vw,30px);
  transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);
}
.card--hover:hover{border-color:var(--line-strong);box-shadow:var(--sh-3);transform:translateY(-3px)}
.card__index{font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--muted-2);
  font-variant-numeric:tabular-nums}
.card h3{margin-top:var(--s-3)}
.card .chip{margin-top:var(--s-4);font-size:.74rem}
.card p{color:var(--muted);margin-top:var(--s-3);font-size:.95rem}
.card--flat{border-radius:var(--r);box-shadow:none}

/* ---- Ürün kartı ----
   Kartlar yalnızca rozet + başlık + metin taşıyordu; hepsi aynı gri
   çerçevede olunca ürün ızgarası değil metin listesi gibi okunuyordu.
   Üstteki marka şeridi ve ürün simgesi kartı bir "ürün" haline getiriyor;
   çerçeve de nötr griden markanın kırmızısına çekildi. */
.card--urun{
  border-color:#f2d3d8;
  padding-top:calc(clamp(22px,2.4vw,30px) + 3px);
  overflow:hidden;
}
.card--urun::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),#ff6377);
}
.card--urun.card--hover:hover{
  border-color:#e8a0ac;
  box-shadow:0 2px 4px rgba(226,0,26,.05), 0 14px 34px rgba(226,0,26,.13);
}
.card--urun h3{margin-top:var(--s-4)}
.card--urun .link-arrow{font-weight:650}

/* Simge ve durum rozeti aynı satırda: göz önce simgeye, sonra başlığa gider */
.card__ust{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.card__ust .chip{margin-top:0}
.card--urun .icon-box{width:42px;height:42px;border-radius:11px}
.card--urun .icon-box svg{width:21px;height:21px}
/* Kartın tamamı hedef alındığında simge de canlansın */
.card--urun.card--hover:hover .icon-box{background:var(--brand);border-color:var(--brand)}
.card--urun.card--hover:hover .icon-box svg{stroke:#fff}
.icon-box,.icon-box svg{transition:background-color .25s,border-color .25s,stroke .25s}
.section--dark .card--urun{border-color:var(--dark-line)}
.section--dark .card{background:var(--dark-surface);border-color:var(--dark-line)}
.section--dark .card p{color:var(--dark-muted)}

/* İkon çerçevesi */
.icon-box{
  width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);
}
.icon-box svg{width:19px;height:19px;fill:none;stroke:var(--ink-700);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.icon-box--brand{background:var(--brand-tint);border-color:#fadadf}
.icon-box--brand svg{stroke:var(--brand)}
.section--dark .icon-box{background:rgba(255,255,255,.06);border-color:var(--dark-line)}
.section--dark .icon-box svg{stroke:#9fc4de}

/* Chip / etiket */
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--white);
  font-size:.78rem;font-weight:600;color:var(--text-2);
}
.chip--status{padding-left:9px}
.chip__dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.chip__dot--live{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.chip__dot--rd{background:var(--brand);box-shadow:0 0 0 3px rgba(226,0,26,.14)}
.section--dark .chip{background:rgba(255,255,255,.06);border-color:var(--dark-line);color:var(--dark-text)}

/* Özellik listesi */
.ticks{display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--text-2)}
.ticks li::before{
  content:"";flex:none;width:17px;height:17px;margin-top:4px;border-radius:5px;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.section--dark .ticks li{color:var(--dark-muted)}

/* Logo şeridi */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:var(--s-6);width:max-content;
  animation:marquee 60s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.logo-item{display:grid;place-items:center;height:52px;padding-inline:var(--s-5);flex:none;
  color:var(--muted-2);font-weight:650;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;
  opacity:.72;transition:opacity .25s}
.logo-item img{max-height:30px;width:auto;object-fit:contain}
.logo-item:hover{opacity:1}
.marquee__track--rev{animation-direction:reverse}

/* JS devreye girince akışı transform yürütür; CSS animasyonu çekilir.
   Kaydırma kabı (overflow-x) kullanmıyoruz — Windows görünür bir kaydırma
   çubuğu çizerdi. */
.marquee.js-cek .marquee__track{animation:none}
.marquee.js-cek{cursor:grab;touch-action:pan-y}
.marquee.js-cek.cekiliyor{cursor:grabbing}
.marquee.js-cek .logo-item img{pointer-events:none;-webkit-user-drag:none;user-select:none}

/* Şeridin iki yanındaki ok düğmeleri: sürüklenebildiğini fare ancak imleçle
   gösteriyordu, dokunmatikte hiç ipucu yoktu. */
.marquee-sar{position:relative}
.marquee-ok{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:var(--white);color:var(--muted);cursor:pointer;
  box-shadow:var(--sh-2);
  opacity:0;transition:opacity .18s ease,color .16s ease,border-color .16s ease;
}
.marquee-ok.sol{left:-6px}
.marquee-ok.sag{right:-6px}
.marquee-ok.sag svg{transform:rotate(180deg)}
.marquee-ok svg{width:17px;height:17px}
.marquee-ok:hover{color:var(--brand);border-color:var(--brand)}
.marquee-ok:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:2px}
.marquee-sar:hover .marquee-ok{opacity:1}
/* Dokunmatikte hover yok: oklar hep görünür, ipucu orada kalsın. */
@media (hover:none){.marquee-ok{opacity:.92}}
/* Hareket kapalıyken şerit kendiliğinden akmadığı için tek gezinme yolu
   bunlar; her zaman görünsünler. */
@media (prefers-reduced-motion:reduce){.marquee-ok{opacity:.92;transition:none}}
/* Dar ekranda oklar tek gezinme yolu; dokunma hedefi 32 px'de kucuk
   kaliyordu. Gorunen daire ayni boyda kalirken hedef alani buyutuldu. */
@media (max-width:620px){
  .marquee-ok{width:36px;height:36px}
  .marquee-ok.sol{left:-6px}
  .marquee-ok.sag{right:-6px}
  .marquee-ok::after{content:"";position:absolute;inset:-5px}
}

/* JS yoksa: hareket kapalıyken animasyon tek kareye sıkışıp şeridi -%50'ye
   zıplatmasın; başladığı yerde dursun. */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;transform:none}
}

/* Masaüstü + mobil ekran kompozisyonu — yan yana, üst üste binmez */
.screen-stack{display:flex;align-items:flex-end;gap:0}
.screen-stack .screen{flex:1 1 auto;min-width:0}

/* ---- Telefon çerçevesi ---- */
.phone{
  position:relative;flex:0 0 clamp(112px,11.5vw,158px);width:clamp(112px,11.5vw,158px);
  margin-left:clamp(-34px,-2.4vw,-18px);margin-bottom:clamp(-16px,-1.4vw,-8px);z-index:2;
  aspect-ratio:164/336;border-radius:clamp(22px,2.5vw,32px);padding:clamp(4px,.45vw,6px);
  background:linear-gradient(150deg,#547d99,#1b4560 42%,#0b2b42);
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 1px 2px rgba(255,255,255,.22) inset,
             0 20px 44px rgba(6,24,42,.32);
}
.phone__island{position:absolute;top:3.4%;left:50%;transform:translateX(-50%);
  width:23%;height:2.9%;border-radius:99px;background:#12354e;z-index:2}
.phone__home{position:absolute;bottom:2.2%;left:50%;transform:translateX(-50%);
  width:26%;height:2.5px;border-radius:2px;background:rgba(13,48,73,.22);z-index:2}
.phone__screen{height:100%;border-radius:calc(clamp(22px,2.5vw,32px) - 5px);background:#f6f9fc;
  overflow:hidden;display:flex;flex-direction:column}

.phone__top{padding:12% 7% 4.5%;background:#fff;border-bottom:1px solid #e8edf4}
.phone__brand{display:block;font-size:clamp(.56rem,.85vw,.82rem);font-weight:800;
  letter-spacing:-.025em;color:var(--ink-800);line-height:1.2;white-space:nowrap}
.phone__brand b{color:var(--brand);font-weight:800}
.phone__sub{display:block;margin-top:2px;font-size:clamp(.38rem,.56vw,.54rem);
  color:var(--muted-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.phone__status{display:flex;align-items:center;gap:4px;margin:4.5% 6.5% 0;padding:3.6% 5%;
  border-radius:7px;background:#edfaf1;font-size:clamp(.34rem,.5vw,.5rem);
  font-weight:650;color:#15803d;white-space:nowrap;overflow:hidden}
.phone__status i{width:5px;height:5px;border-radius:50%;background:#16a34a;flex:none;
  animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 5px rgba(22,163,74,0)}}

/* ---- Teklif satırları ---- */
.quotes{flex:1;margin:4% 6.5% 0;display:flex;flex-direction:column;gap:3.4%;overflow:hidden}
.quote{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5.5% 6%;border-radius:9px;background:#fff;border:1px solid #eaeff5;position:relative;
  animation:quoteIn .45s var(--ease) both}
@keyframes quoteIn{from{opacity:0;transform:translateY(-9px) scale(.98)}to{opacity:1;transform:none}}
.quote--best{border-color:#c6e7d3;box-shadow:0 2px 10px rgba(22,163,74,.1)}
.quote--best::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;
  border-radius:8px 0 0 8px;background:#16a34a}
.quote__logo{flex:1;min-width:0;max-width:46%;height:clamp(11px,1.35vw,17px);
  object-fit:contain;object-position:left center}
.quote__price{flex:none;font-size:clamp(.46rem,.66vw,.66rem);font-weight:800;color:var(--ink-800);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.quote--best .quote__price{color:#15803d}

.phone__nav{display:flex;justify-content:space-around;padding:3.4% 1% 6%;background:#fff;
  border-top:1px solid #e8edf4}
.phone__nav span{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0;
  font-size:clamp(.3rem,.44vw,.44rem);font-weight:600;color:#a3b2c2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.phone__nav svg{width:clamp(9px,1.1vw,13px);height:clamp(9px,1.1vw,13px);fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.phone__nav .is-on{color:var(--brand)}

@media (prefers-reduced-motion:reduce){.quote,.phone__status i{animation:none!important}}

/* Ürün ekranı çerçevesi */
.screen{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  box-shadow:var(--sh-4);overflow:hidden;
}
.screen__bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.screen__bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:block}
.screen__title{margin-left:8px;font-size:.74rem;color:var(--muted-2);font-weight:600}
.screen__body{display:block;width:100%}

/* Uygulama mağazası butonları */
.stores{display:flex;gap:var(--s-3);flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:11px;padding:10px 18px 10px 15px;
  border-radius:var(--r);border:1px solid var(--line-strong);background:var(--white);
  color:var(--ink-800);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.store:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--ink-800)}
.store__ico{width:22px;height:22px;flex:none}
.store__k{display:block;font-size:.68rem;font-weight:600;color:var(--muted);line-height:1.2}
.store__v{display:block;font-size:.93rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.section--dark .store{background:rgba(255,255,255,.07);border-color:var(--dark-line);color:#fff}
.section--dark .store:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.section--dark .store__k{color:var(--dark-muted)}

/* Mobil ekran görseli */
.mobile-shot{width:100%;height:auto;border-radius:var(--r-lg)}

/* Form */
.form{display:grid;gap:var(--s-4)}
.field label{display:block;font-size:.83rem;font-weight:600;color:var(--text-2);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--white);font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(226,0,26,.11)}
.field textarea{min-height:130px;resize:vertical}
/* Hatali alan: cerceve ve etiket kirmiziya doner, zemin hafif kirmizilanir,
   altinda kendi mesaji cikar. Mesaj role="alert" tasir (ekran okuyucu duyar). */
.field--error input,.field--error textarea,.field--error select{
  border-color:var(--brand);background:#fffafa}
.field--error > label{color:var(--brand-600)}
.field__err{display:none;align-items:flex-start;gap:6px;margin-top:6px;
  font-size:.8rem;line-height:1.35;color:var(--brand-600);font-weight:600}
.field__err svg{width:14px;height:14px;flex:none;margin-top:1px;
  fill:none;stroke:var(--brand-600);stroke-width:1.7;stroke-linecap:round}
.field--error .field__err{display:flex}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--muted)}
.consent a{text-decoration:underline;text-underline-offset:2px;color:var(--text-2)}
.consent a:hover{color:var(--brand)}
.consent input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--brand)}
.form__status{display:none;padding:12px 15px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600}
.form__status.is-ok{display:block;background:#eefaf1;color:#15803d;border:1px solid #c9ecd5}
.form__status.is-err{display:block;background:var(--brand-tint);color:var(--brand-700);border:1px solid #fadadf}

/* Haber kartı */
.news{display:flex;flex-direction:column;gap:var(--s-3);height:100%}
.news__meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted-2);font-weight:600}
.news__cat{color:var(--brand)}
.news h3{transition:color .2s}
.card--hover:hover .news h3{color:var(--brand)}

/* Bilgi satırı */
.info-row{display:flex;align-items:center;gap:var(--s-4);padding:15px 18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  transition:border-color .2s,transform .2s var(--ease)}
a.info-row:hover{border-color:var(--ink-800);transform:translateX(3px)}
.info-row__k{display:block;font-size:.76rem;color:var(--muted);line-height:1.4}
.info-row__v{display:block;font-weight:650;font-size:.97rem;color:var(--ink-800)}

/* İletişim satırı: hem arama hem WhatsApp */
.crow{display:flex;align-items:center;gap:6px;padding:6px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  transition:border-color .2s,box-shadow .2s}
.crow:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.crow__main{display:flex;align-items:center;gap:13px;flex:1;min-width:0;
  padding:9px 11px;border-radius:10px;transition:background .2s}
.crow__main:hover{background:#fff}
.crow__k{display:block;font-size:.76rem;color:var(--muted);line-height:1.4}
.info-row__v + .info-row__k{margin-top:3px;font-weight:500}
.crow__v{display:block;font-weight:700;font-size:.97rem;color:var(--ink-800);letter-spacing:-.01em}
.crow__wa{display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:10px 12px;border-radius:10px;background:#e9f9ef;color:#1a9b4c;
  font-size:.78rem;font-weight:700;transition:background .2s,transform .2s var(--ease)}
.crow__wa svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.crow__wa:hover{background:#d5f2e0;transform:translateY(-1px)}
.section--dark .crow{background:rgba(255,255,255,.06);border-color:var(--dark-line)}
.section--dark .crow__main:hover{background:rgba(255,255,255,.08)}
.section--dark .crow__v{color:#fff}
.section--dark .crow__k{color:var(--dark-muted)}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);
  padding-block:var(--s-5)}
.crumbs a:hover{color:var(--brand)}
.crumbs span[aria-hidden]{color:var(--muted-2)}

/* Sayfa başlığı bandı */
.page-head{background:var(--surface);border-bottom:1px solid var(--line);
  padding-block:clamp(28px,4vw,52px) clamp(44px,5vw,72px)}
.page-head .lead{margin-top:var(--s-4);max-width:860px}

/* İstatistik (yalnız doğrulanmış veri) */
.stat__value{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:700;letter-spacing:-.03em;
  color:var(--ink-800);font-variant-numeric:tabular-nums;line-height:1.1}
.stat__label{color:var(--muted);font-size:.87rem;margin-top:4px}
.section--dark .stat__value{color:#fff}


/* ---- Footer adres bloğu ---- */
.footer__addr{margin-top:var(--s-5);font-style:normal;display:grid;gap:var(--s-3);
  justify-items:start;max-width:300px}
.footer__map{display:grid;gap:2px;color:inherit;transition:color .2s}
.footer__addr-main{font-weight:700;font-size:.88rem;line-height:1.4;color:var(--ink-800);
  transition:color .2s}
.footer__map:hover .footer__addr-main{color:var(--brand)}
.footer__addr-sub{font-size:.85rem;line-height:1.55;color:var(--muted)}
.footer__map-cta{margin-top:2px;font-size:.78rem;font-weight:700;color:var(--brand)}
.footer__tel{display:inline-flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:700;color:var(--ink-800);letter-spacing:-.01em;transition:color .2s}
.footer__tel svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.footer__tel:hover{color:var(--brand)}

/* ---- Sosyal medya ikonları ---- */
.social{display:flex;gap:8px;margin-top:var(--s-5);flex-wrap:wrap;padding:0;list-style:none}
.social li{display:block}
.social a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);background:var(--white);color:var(--muted);
  transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease)}
.social svg{width:17px;height:17px;fill:currentColor;display:block}
.social a:hover{color:#fff;background:var(--ink-800);border-color:var(--ink-800);transform:translateY(-2px)}

/* ---- Harita bağlantıları ---- */
.valley__link{display:block;position:relative;color:inherit}
.valley__cta{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-full);background:rgba(255,255,255,.94);
  border:1px solid var(--line);box-shadow:var(--sh-2);
  font-size:.78rem;font-weight:700;color:var(--ink-800);
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease)}
.valley:hover .valley__cta,.valley__link:focus-visible .valley__cta{opacity:1;transform:none}
@media (hover:none){.valley__cta{opacity:1;transform:none}}

.info-row__map{display:block;margin-top:3px;font-size:.76rem;font-weight:700;color:var(--brand)}

/* ---------- 7. FOOTER ---------------------------------------------------- */
.site-footer{background:var(--surface);color:var(--text);border-top:1px solid var(--line);
  padding-block:var(--s-9) var(--s-6)}
.footer__grid{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:var(--s-7) var(--s-6)}

.footer__brand p{color:var(--muted);font-size:.9rem;margin-top:var(--s-4);max-width:320px}
.footer__col h4,
.footer__col ul{display:grid;gap:10px}
.footer__col a{color:var(--muted);font-size:.9rem;transition:color .2s}
.footer__col a:hover{color:var(--brand)}
.footer__addr{color:var(--muted);font-size:.88rem;font-style:normal;margin-top:var(--s-5);line-height:1.7}
.footer__bar{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  color:var(--muted);font-size:.83rem}

/* ---- Yasal metin sayfaları ---- */
.prose-legal h2{font-size:1.12rem;letter-spacing:-.02em;color:var(--ink-800)}
.prose-legal p{color:var(--text-2);line-height:1.75}
.prose-legal .ticks li{align-items:flex-start}
.prose-legal .ticks{gap:9px}
.prose-legal strong{color:var(--ink-800)}
.prose-legal a{color:var(--brand);font-weight:600}

/* ---------- 8. UTILITIES & MOTION --------------------------------------- */
.u-center{text-align:center}
.u-mt-2{margin-top:var(--s-2)}.u-mt-3{margin-top:var(--s-3)}.u-mt-4{margin-top:var(--s-4)}
.u-mt-5{margin-top:var(--s-5)}.u-mt-6{margin-top:var(--s-6)}.u-mt-7{margin-top:var(--s-7)}
.u-flex{display:flex;gap:var(--s-3);flex-wrap:wrap}
.u-flex-center{justify-content:center}
.u-hide{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1.4fr repeat(3,1fr)}
  .footer__legal{grid-column:2/-1}
}
/* Hero telefonu yalnızca geniş ekranda: dar ekranlarda 104 px'e düşüp okunmaz oluyor.
   Mobil ürün zaten kendi bölümünde üç ekranla tanıtılıyor. */
@media (max-width:1024px){
  .phone{display:none}
  .screen-stack{gap:0}
}

@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--wide-left,.split--wide-right{grid-template-columns:1fr;gap:var(--s-7)}
  .nav__links{
    position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    padding:14px 24px 22px;background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:var(--sh-3);transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s,transform .22s var(--ease);max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
  }
  .nav__links.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{padding:13px 12px;font-size:1rem;border-radius:var(--r-sm)}
  .nav__toggle{display:flex}
  /* Dil secici mobilde de erisilebilir kalsin; yalnizca daraltiyoruz. */
  .lang-switch{display:block}
  .lang__btn{padding:8px 7px;gap:4px;min-height:38px}
  .lang__chev{display:none}
  .lang__menu{top:calc(100% + 6px)}
}
@media (max-width:640px){
  .wrap{padding-inline:20px}
  /* Hero'da telefon 104px'e düşüyor ve okunmaz oluyor; mobilde masaüstü
     ekranı tam genişlik alsın. Mobil ürün zaten kendi bölümünde tanıtılıyor. */

  .hide-sm{display:none}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .nav{gap:var(--s-3)}
  .brand__logo{height:40px}
  .brand__slogan{font-size:.46rem;margin-top:calc(-.17 * 40px)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}
  .footer__brand{grid-column:1/-1}
  .footer__legal{grid-column:auto}
  .footer__bar{flex-direction:column;gap:var(--s-2)}
  .btn--lg{width:100%}
  .marquee__track{gap:var(--s-6)}
}

/* Tıklama hedefleri: dokunmatik cihazlarda ve dar ekranlarda en az 34px */
@media (pointer:coarse),(max-width:1024px){
  .footer__col a,.crumbs a,.link-arrow,.footer__addr a[href^="tel:"],.consent a,
  .fgrid a,.social a{display:inline-flex;align-items:center;min-height:34px}
  .footer__col ul{gap:3px}
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.site-footer,.nav__toggle{display:none}
  body{color:#000}
}

/* ==========================================================================
   9. SAYFA BÖLÜMLERİ
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,88px) clamp(56px,7vw,104px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 18% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 18% 0%,#000 10%,transparent 72%);
}
/* Bilisim Vadisi tabelasi - hero sag ust kose.
   Gorsel seffaf zeminli, marka renginde bir cizim (14 KB). Bilerek
   background-image kullaniliyor: CSS mask bazi durumlarda (ornegin sayfa
   zoom'u) uygulanmayip geriye dolu bir dikdortgen birakabiliyordu. Boyle
   bir aksilikte bu yontemde yalnizca gorsel gorunmez, leke olusmaz. */
.hero::after{
  content:"";position:absolute;top:0;right:0;z-index:0;pointer-events:none;
  width:min(56%,900px);aspect-ratio:1120/262;
  background:url("/assets/img/hero-bg.webp?v=4") no-repeat right top;
  background-size:cover;
  opacity:.62;
}
@media (max-width:900px){
  /* Dar ekranda tabela ust basligin uzerine geliyor; geri cekiyoruz. */
  .hero::after{width:74%;opacity:.26}
}

.hero__inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(40px,5vw,72px);align-items:center}
.hero__copy .lead{max-width:60ch}
.hero__visual{position:relative}
.hero__visual::after{
  content:"";position:absolute;inset:auto -6% -8% -6%;height:60%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(13,48,73,.11),transparent);filter:blur(6px);
}

/* Kartin tumu tiklanabilir: baslikta duran link, kartI kaplayan gorunmez
   bir katmanla genisletilir. Kart icindeki diger baglantilar ustte kalir. */
.card--link{position:relative}
.card--link h3 a{color:inherit}
.card--link h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.card--link a:not(h3 a){position:relative;z-index:2}
.card--link:hover h3 a{color:var(--brand)}

/* Akis seridi - sirali adimlari yan yana gosterir (kapanis bolumlerinde). */
.flow{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)}
.flow__item{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line)}
.flow__no{width:21px;height:21px;border-radius:50%;background:var(--brand);color:#fff;
  font:800 .68rem/1 Inter,system-ui,sans-serif;display:grid;place-items:center;flex:none}
.flow__txt{font-size:.9rem;font-weight:650;color:var(--ink-800);white-space:nowrap}
.section--dark .flow__item{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.section--dark .flow__txt{color:#fff}
@media (max-width:560px){
  .flow{flex-direction:column;align-items:stretch}
  .flow__txt{white-space:normal}
}

/* --- Güven bandı --------------------------------------------------------- */
.trustbar__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5) var(--s-6);flex-wrap:wrap}
.trustbar__lead{font-weight:600;color:var(--ink-800);font-size:1.02rem;letter-spacing:-.015em}
.trustbar__tags{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* --- Bilişim Vadisi görseli ---------------------------------------------- */
.valley{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--sh-2)}
.valley svg,.valley img{width:100%;height:auto;display:block}
.valley figcaption{padding:12px 18px;border-top:1px solid var(--line);
  background:var(--white);color:var(--muted);font-size:.82rem}

/* --- Final CTA ----------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 320px at 50% -10%,rgba(226,0,26,.07),transparent 70%),
    radial-gradient(720px 360px at 50% 110%,rgba(13,48,73,.06),transparent 70%);
}
.cta > *{position:relative;z-index:1}

@media (max-width:1100px){
  .hero__inner{grid-template-columns:1fr}
  .hero__copy .lead{max-width:none}
  .trustbar__inner{flex-direction:column;align-items:flex-start}
}

/* ---------- Çok dar ekran (<=340px) ------------------------------------
   Header ögeleri son birkaç pikselde sıkışıyordu. Bu blok dosya sonunda
   duruyor ki daha sonra gelen mobil kuralları tarafından ezilmesin. ---- */
@media (max-width:340px){
  .wrap{padding-inline:14px}
  .nav__actions{gap:3px}
  .nav__toggle{width:36px;height:36px}   /* dokunma hedefi 34px üstünde kalır */
}


/* ==========================================================================
   Eğitim videosu kartı
   YouTube kapak görseli üstte, metin altta. .card'ın iç boşluğunu sıfırlayıp
   görselin kart kenarına dayanmasını sağlar; metin kendi dolgusunu taşır.
   ========================================================================== */
.video-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.video-card__thumb{
  position:relative;display:block;aspect-ratio:16/9;
  background:var(--surface-2);overflow:hidden;
}
.video-card__thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s var(--ease);
}
.video-card:hover .video-card__thumb img{transform:scale(1.04)}
.video-card__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(6,24,42,.25);transition:background .25s;
}
.video-card:hover .video-card__play{background:rgba(6,24,42,.12)}
.video-card__play svg{
  width:56px;height:56px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.video-card__body{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:clamp(18px,2vw,24px);
}
.video-card__body h3{margin:0}
.video-card__body p{margin:0}


/* Bulunulan sayfanin footer baglantisi: menudekiyle ayni mantik */
.site-footer a[aria-current="page"]{color:var(--ink-800);font-weight:650}


/* Ceviri uygulanana kadar icerigi gizle: once Turkce gorunup sonra degismesin.
   visibility kullaniliyor -> yerlesim hesaplanir, acilinca ziplama olmaz. */
html.ceviri-bekliyor body{visibility:hidden}




/* ==========================================================================
   Dil secici - sunucu tarafi
   <details> ile calisir; acilir menu icin JavaScript gerekmez.
   Yayinda olmayan diller listede gorunur ama tiklanamaz.
   ========================================================================== */
.lang-switch > summary{list-style:none;cursor:pointer}
.lang-switch > summary::-webkit-details-marker{display:none}
.lang-switch[open] .lang__chev{transform:rotate(180deg)}

.lang__menu a,
.lang__menu span{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 12px;font-size:.82rem;text-align:left;
  color:var(--muted);transition:background .15s,color .15s;
}
.lang__menu a b,
.lang__menu span b{
  display:inline-block;min-width:24px;
  font-size:.74rem;font-weight:800;color:var(--muted-2);
}
.lang__menu a:hover{background:var(--surface-2);color:var(--ink-800)}
.lang__menu a.is-on{color:var(--ink-800);font-weight:650}
.lang__menu a.is-on b{color:var(--brand)}

/* Henuz yayina alinmamis dil */
.lang__menu span[aria-disabled]{cursor:not-allowed;opacity:.5}
.lang__menu span[aria-disabled]:hover{background:transparent}
.lang__yakinda{
  margin-left:auto;font-size:.66rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted-2);
}