/* GüvenGo — onayli mobil tasarimdan (guvengo-site-tasarim/design/*.dc.html) cevrildi.
   Renk/olcu/sure degerleri tasarim dosyalarindaki satir ici stillerden birebir alinmistir. */

/* ---- yazi tipleri (kendi sunucumuzdan; Google'a istek gitmez) ---- */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/unbounded-300-cyrillic-ext.woff2?v=5501f713") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/unbounded-300-cyrillic.woff2?v=c3880f0c") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/unbounded-300-latin-ext.woff2?v=ed84482d") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/unbounded-300-latin.woff2?v=d7f07f8a") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/unbounded-400-cyrillic-ext.woff2?v=5501f713") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/unbounded-400-cyrillic.woff2?v=c3880f0c") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/unbounded-400-latin-ext.woff2?v=ed84482d") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/unbounded-400-latin.woff2?v=d7f07f8a") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geologica";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/geologica-300-cyrillic-ext.woff2?v=2bcd3c98") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Geologica";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/geologica-300-cyrillic.woff2?v=44317364") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Geologica";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/geologica-300-latin-ext.woff2?v=33644ebd") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geologica";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/geologica-300-latin.woff2?v=0df4fc8d") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geologica";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geologica-400-cyrillic-ext.woff2?v=2bcd3c98") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Geologica";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geologica-400-cyrillic.woff2?v=44317364") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Geologica";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geologica-400-latin-ext.woff2?v=33644ebd") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geologica";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geologica-400-latin.woff2?v=0df4fc8d") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geologica";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geologica-500-cyrillic-ext.woff2?v=2bcd3c98") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Geologica";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geologica-500-cyrillic.woff2?v=44317364") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Geologica";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geologica-500-latin-ext.woff2?v=33644ebd") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geologica";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geologica-500-latin.woff2?v=0df4fc8d") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/readex-pro-300-arabic.woff2?v=1a432d26") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/readex-pro-300-latin-ext.woff2?v=fd95c166") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/readex-pro-300-latin.woff2?v=87022255") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/readex-pro-400-arabic.woff2?v=1a432d26") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/readex-pro-400-latin-ext.woff2?v=fd95c166") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/readex-pro-400-latin.woff2?v=87022255") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/readex-pro-500-arabic.woff2?v=1a432d26") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/readex-pro-500-latin-ext.woff2?v=fd95c166") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/readex-pro-500-latin.woff2?v=87022255") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- degiskenler ---- */
:root {
  --bg: #050506;
  --bg-alt: #0B0C0E;
  --ink: #FFFFFF;
  --muted: #9BA1AD;
  --body: #B9BEC8;
  --dim: #7E8490;
  --soft: #C7CBD3;
  --accent: #FF7A1A;
  --green: #30D27C;
  --red: #FF3B30;

  --line-06: rgba(255, 255, 255, 0.06);
  --line-08: rgba(255, 255, 255, 0.08);
  --line-10: rgba(255, 255, 255, 0.10);
  --line-12: rgba(255, 255, 255, 0.12);
  --line-14: rgba(255, 255, 255, 0.14);
  --line-16: rgba(255, 255, 255, 0.16);
  --fill-03: rgba(255, 255, 255, 0.03);
  --fill-04: rgba(255, 255, 255, 0.04);

  --dfont: "Unbounded", "Geologica", system-ui, sans-serif;
  --bfont: "Geologica", system-ui, sans-serif;
  --hls: -0.015em;
  --h1ls: -0.02em;
  --els: 0.24em;

  --col: 480px;
  --hdr-h: 68px;

  /* tasarimdaki sureler */
  --gate-ms: 750ms;
  --content-ms: 550ms;
  --content-delay: 250ms;
  --greet-in-ms: 700ms;
  --greet-out-ms: 450ms;
  --scan-ms: 700ms;
  --logo-in-ms: 500ms;
  --logo-fly-ms: 750ms;
  --line-ms: 450ms;
  --sheet-ms: 320ms;
}

html[dir="rtl"] {
  --dfont: "Readex Pro", system-ui, sans-serif;
  --bfont: "Readex Pro", system-ui, sans-serif;
  --hls: 0;
  --h1ls: 0;
  --els: 0;
}

/* ---- temel ---- */
* { box-sizing: border-box; }

html {
  background: var(--bg);
  /* Yedek: beklenmeyen bir tasma sayfayi yatayda kaydirilabilir yapmasin.
     'clip' kullanilir, 'hidden' DEGIL: hidden kaydirma kabi olusturup sticky basligi bozar. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--bfont);
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

/* Almanca'daki uzun birlesik kelimeler (orn. "Parkraummanagement") kutusuna sigmayip
   tasiyordu; sigmayan kelime artik satir basinda kirilir. Sigan metne dokunmaz. */
h1, h2, h3, p, li, dd, dt, .gate-row-name, .langrow-name, .contact-val, .ftr-legal button, .doc-sub {
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; }

a { color: var(--accent); }
a:hover { color: #FF9A4D; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Gorsel olarak gizle ama ekran okuyucuda kalsin.
   left:-9999px KULLANILMAZ: RTL'de belgeyi 9999px genisletip yatay tasma yaratiyordu. */
.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--accent);
  color: #111111;
  font-size: 14px;
  text-decoration: none;
}
.skip:focus {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  overflow: visible;
  clip-path: none;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobil duzen: 480px'ten genis ekranda ortalanmis sutun (1024px'e kadar).
   1024px ve uzeri masaustu duzeni dosyanin sonundaki @media blogundadir. */
.shell {
  max-width: var(--col);
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

/* ---- baslik / header ---- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hdr-h);
  padding: 0 20px;
  background: rgba(5, 5, 6, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-08);
}

.hdr-logo { position: relative; flex-shrink: 0; width: 50.5px; height: 40px; }
.hdr-logo picture { display: block; }
.hdr-logo img { display: block; width: 50.5px; height: auto; }
.hdr-line { position: absolute; left: 0; top: 0; display: block; overflow: hidden; pointer-events: none; }

.hdr-actions { display: flex; align-items: center; gap: 8px; }

.langbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-14);
  background: transparent;
  color: var(--ink);
  font-family: "Geologica", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.menubtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-14);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menubtn .i-close { display: none; }
.menubtn[aria-expanded="true"] .i-burger { display: none; }
.menubtn[aria-expanded="true"] .i-close { display: block; }

/* bayraklar */
.flag { display: flex; flex-shrink: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.flag svg { display: block; width: 100%; height: 100%; }
.flag-s { width: 21px; height: 14px; border-radius: 2px; }
.flag-m { width: 24px; height: 16px; border-radius: 2px; }
.flag-l { width: 33px; height: 22px; border-radius: 4px; }

/* ---- menu paneli ---- */
.nav {
  position: absolute;
  left: 0;
  top: var(--hdr-h);
  width: 100%;
  height: calc(100dvh - var(--hdr-h));
  padding: 20px 24px 32px;
  background: var(--bg);
  border-top: 1px solid var(--line-06);
  display: flex;
  flex-direction: column;
}
.nav[hidden] { display: none; }

.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--line-08);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--dfont);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: var(--hls);
}
html[dir="rtl"] .nav a svg { transform: scaleX(-1); }

.nav .nav-cta {
  justify-content: center;
  min-height: 52px;
  margin-top: auto;
  border-bottom: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #111111;
  font-family: var(--bfont);
  font-size: 15px;
  font-weight: 500;
}

/* ---- dil menusu (baslik) ---- */
.langmenu {
  position: absolute;
  inset-inline-end: 20px;
  top: 64px;
  width: 224px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(16, 17, 20, 0.97);
  border: 1px solid var(--line-10);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.langmenu[hidden] { display: none; }

.langrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 300;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.langrow.on { background: rgba(255, 122, 26, 0.12); }
.langrow-name { flex-grow: 1; }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; min-height: 640px; padding: 72px 24px 88px; }
.hero-bg { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto; pointer-events: none; }
.hero-in { position: relative; }

h1 {
  margin: 0;
  font-family: var(--dfont);
  font-size: var(--h1m);   /* dile gore build.js hesaplar (satir ici --h1m) */
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: var(--h1ls);
}
h1 span { display: block; }
h1 .accent { color: var(--accent); }

.lead { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--body); }
.hero .lead { margin-top: 24px; }

.hero-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }

/* ---- acilis sahnesi: otopark girisi videosu (app.js -> sahne) ----
   Mobilde metnin altinda, kenardan kenara; masaustunde metnin yaninda (asagidaki @media).
   Sahne kutusu videonun kendi oraninda; TV ekrani ve kabin yazisi kutuya gore yuzdeyle yerlesir
   (koordinatlar: src/sahne/veri.js, 1916x1080 kaynak piksel). Mobil video kaynaktan kirpilmistir
   (x 800..1916). */
.hero { display: flex; flex-direction: column; }
.sahne {
  position: relative;
  order: 1;
  flex: none;
  margin: 36px -24px 0;
  aspect-ratio: 1116 / 1080;
  overflow: hidden;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%);
}
.sahne-poster, .sahne-poster img, .sahne-v {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sahne-v { opacity: 0; background: transparent; }
.sahne-v.on { opacity: 1; }
.sahne-v.ust { z-index: 1; }
/* TV ekrani (mobil kirpim): x 1292..1656, y 176..362 */
.sahne-tv {
  position: absolute;
  z-index: 2;
  left: 44.086%;
  top: 16.296%;
  width: 32.616%;
  height: 17.222%;
}
/* Bariyer govdesindeki GuvenGo yazisi (dikey) */
.sahne-kabin {
  position: absolute;
  z-index: 2;
  left: 9.297%;
  top: 54.907%;
  width: 3.808%;
  height: 13.889%;
  opacity: 0.86;
}
.sahne-dur {
  position: absolute;
  z-index: 3;
  inset-inline-end: 16px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-14);
  border-radius: 50%;
  background: rgba(5, 5, 6, 0.55);
  color: var(--soft);
  cursor: pointer;
}
.sahne-dur[hidden] { display: none; }
.sahne-dur .i-oynat { display: none; }
.sahne-dur.durdu .i-oynat { display: block; }
.sahne-dur.durdu .i-dur { display: none; }
.sahne-dur:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 14px;
  font-size: 15px;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #111111; font-weight: 500; }
.btn-primary:hover { color: #111111; }
.btn-ghost { border: 1px solid var(--line-16); background: var(--fill-03); color: var(--ink); font-weight: 400; }
.btn-ghost:hover { color: var(--ink); }
.btn-wide { margin-top: 28px; }

/* ---- bolumler ---- */
.sec { padding: 88px 24px; scroll-margin-top: var(--hdr-h); border-top: 1px solid var(--line-06); }
.sec-alt { background: var(--bg-alt); }
.sec-contact { padding-bottom: 96px; }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--els);
  text-transform: uppercase;
  color: var(--accent);
}

h2 {
  margin: 16px 0 0;
  font-family: var(--dfont);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: var(--hls);
}
.h2-sm { font-size: 26px; line-height: 1.25; }

/* ---- ikon seti ----
   Koyu, hafif kabartmali karo; ikon govdesi acik gri, vurgu parcalari turuncu (guvenlikte yesil).
   --p (0..1): kaydirma ilerlemesi, kapsayici satir/kartta app.js -> hareket ayarlar; yoksa 1. */
.ico {
  --vurgu: var(--accent);
  --vurgu-rgb: 255, 122, 26;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(110% 90% at 28% 0%, rgba(var(--vurgu-rgb), 0.18), rgba(var(--vurgu-rgb), 0) 62%),
    linear-gradient(180deg, #18191D 0%, #0D0E11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 26px -16px rgba(var(--vurgu-rgb), calc(0.15 + 0.55 * var(--p, 1)));
  color: #E4E6EB;
}
.ico.green { --vurgu: var(--green); --vurgu-rgb: 48, 210, 124; }
.ico-lg { width: 44px; height: 44px; }
.ico svg { width: 25px; height: 25px; }
.ik { overflow: visible; }
.ik .v { stroke: var(--vurgu); }
/* farlar yanar */
.ik-far { fill: var(--vurgu); fill-opacity: calc(0.12 + 0.88 * var(--p, 1)); stroke-width: 0.8; filter: drop-shadow(0 0 calc(var(--p, 1) * 2.4px) rgba(var(--vurgu-rgb), 0.9)); }
/* cizilerek gelen hatlar (pathLength=1) */
.ik-ciz { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); }
/* panel: cubuklar sirayla yukselir, canli isareti yanar */
.ik-cubuk { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(clamp(0.05, calc(var(--p, 1) * 1.6), 1)); stroke-width: 2.2; }
.ik-c2 { transform: scaleY(clamp(0.05, calc(var(--p, 1) * 1.6 - 0.3), 1)); }
.ik-c3 { transform: scaleY(clamp(0.05, calc(var(--p, 1) * 1.6 - 0.6), 1)); }
.ik-canli { fill: var(--green); stroke: none; opacity: clamp(0, calc((var(--p, 1) - 0.75) * 5), 1); }
/* kilit kancasi kapanir */
.ik-kanca { transform: translateY(calc((1 - var(--p, 1)) * -2.4px)); }
/* plaka okuma: tarama cizgisi asagi iner, sonunda onay */
.ik-tara { transform: translateY(calc(var(--p, 1) * 11px)); opacity: clamp(0, calc((1 - var(--p, 1)) * 4), 1); filter: drop-shadow(0 0 2px rgba(var(--vurgu-rgb), 0.9)); }
.ik-onay { stroke: var(--green); stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p, 1) - 0.72) / 0.28), 1)); }
/* odeme: kart yaklasir, temassiz dalgalar belirir */
.ik-kart { transform: translateX(calc((1 - var(--p, 1)) * -4px)); }
.ik-dalga { opacity: clamp(0, calc((var(--p, 1) - 0.55) * 4), 1); }
.ik-d2 { opacity: clamp(0, calc((var(--p, 1) - 0.78) * 5), 1); }
.ik-uc { fill: var(--vurgu); opacity: clamp(0, calc((var(--p, 1) - 0.85) * 7), 1); }
.ik-rozet { fill: #121316; }
/* rol bazli erisim: yetki seviyeleri sirayla yanar */
.ik-yetki { fill: var(--vurgu); stroke: none; }
.ik-y1 { opacity: clamp(0.15, calc((var(--p, 1) - 0.3) * 5), 1); }
.ik-y2 { opacity: clamp(0.15, calc((var(--p, 1) - 0.55) * 5), 1); }
.ik-y3 { opacity: clamp(0.15, calc((var(--p, 1) - 0.8) * 5), 1); }

/* vale: anahtar ve P birbirine yaklasip baglanir */
.ik-v-anahtar { transform: translate(calc((1 - var(--p, 1)) * -3px), calc((1 - var(--p, 1)) * -1px)) rotate(calc((1 - var(--p, 1)) * -30deg)); transform-box: fill-box; transform-origin: 30% 30%; }
.ik-v-p { transform: translateX(calc((1 - var(--p, 1)) * 3px)); }
.ik-v-bag { stroke-width: 2.2; opacity: clamp(0, calc((var(--p, 1) - 0.75) * 5), 1); }
/* esnek modlar: dugmeler karsit yonlere kayar */
.ik-dugme1, .ik-dugme2 { fill: var(--vurgu); stroke-width: 1; }
.ik-dugme1 { transform: translateX(calc(var(--p, 1) * 12px)); }
.ik-dugme2 { transform: translateX(calc(var(--p, 1) * -12px)); }
/* Control Tower: radar taramasi, cihaz noktalari */
.ik-tarama { transform-box: view-box; transform-origin: 12px 12px; transform: rotate(calc(var(--p, 1) * 300deg)); }
.ik-iz { fill: var(--vurgu); fill-opacity: 0.22; stroke: none; }
.ik-blip { fill: var(--green); stroke: none; opacity: 0.18; }
.ik-b1 { opacity: clamp(0.18, calc((var(--p, 1) - 0.25) * 5), 1); }
.ik-b2 { opacity: clamp(0.18, calc((var(--p, 1) - 0.55) * 5), 1); }
.ik-b3 { opacity: clamp(0.18, calc((var(--p, 1) - 0.8) * 5), 1); }
/* kesintisiz: halka cizilir, ok ucu ve onay en sonda */
.ik-ok { opacity: clamp(0, calc((var(--p, 1) - 0.8) * 5), 1); }
.ik-kesintisiz .ik-onay { stroke: var(--green); }

/* ---- bolum rozeti: her bolum etiketinin basinda, bolumun konusunu anlatan hareketli kucuk cizim ----
   --p (0..1): bolum ekrana gelirken cizilir; --f (derece): sayfa kaydikca ilerler, kaydirma durunca durur.
   Yazilim app.js -> hareket. JS yoksa rozet hic eklenmez. */
.eyebrow { display: flex; align-items: center; gap: 10px; }
.ro { display: block; flex: none; width: 26px; height: 26px; color: var(--accent); }
.ro svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 calc(var(--p, 1) * 4px) rgba(255, 122, 26, 0.55)); }
.ro-ciz { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc(var(--p, 1) * 1.6), 1)); opacity: clamp(0, calc(var(--p, 1) * 12), 1); }
/* GuvenGo Nedir: P tabelasi cizilir, P harfi yanar ve kaydirdikca hafifce titrer (neon) */
.ro-p { stroke-width: 1.9; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p, 1) - 0.45) / 0.45), 1)); opacity: calc(clamp(0, calc((var(--p, 1) - 0.45) * 12), 1) * (0.78 + 0.22 * sin(calc(var(--f, 0) * 3deg)))); }
/* Cozumler: sag parca kayarak yerine oturur, kaydirdikca hafifce oynar */
.ro-parca { transform: translateX(calc((1 - clamp(0, calc((var(--p, 1) - 0.2) / 0.7), 1)) * 6px + sin(calc(var(--f, 0) * 2deg)) * 0.5px)); opacity: clamp(0, calc(var(--p, 1) * 2), 1); }
/* Nasil Calisir: disliler kaydirdikca birbirini dondurur */
.ro-disli { transform-box: fill-box; transform-origin: center; }
.ro-d1 { transform: rotate(calc(var(--f, 0) * 1deg)); }
.ro-d2 { transform: rotate(calc(var(--f, 0) * -1.333deg)); }
/* Guvenlik: kalkan cizilir, onay isareti yesil, tarama cizgisi kaydirdikca kalkanda gidip gelir */
.ro-guvenlik .ro-onay { stroke: var(--green); stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p, 1) - 0.55) / 0.4), 1)); }
.ro-tara { stroke: var(--green); stroke-width: 1.2; opacity: calc(0.6 * clamp(0, calc((var(--p, 1) - 0.3) * 3), 1)); transform: translateY(calc((1 + sin(calc(var(--f, 0) * 2.4deg))) * 6px)); }
/* Iletisim: balon cizilir, uc nokta sirayla yazar gibi zipler */
.ro-nokta { fill: currentColor; stroke: none; }
.ro-n1 { opacity: clamp(0, calc((var(--p, 1) - 0.5) * 5), 1); transform: translateY(calc(sin(calc(var(--f, 0) * 4deg)) * -1.4px)); }
.ro-n2 { opacity: clamp(0, calc((var(--p, 1) - 0.65) * 5), 1); transform: translateY(calc(sin(calc(var(--f, 0) * 4deg - 70deg)) * -1.4px)); }
.ro-n3 { opacity: clamp(0, calc((var(--p, 1) - 0.8) * 5), 1); transform: translateY(calc(sin(calc(var(--f, 0) * 4deg - 140deg)) * -1.4px)); }
html[dir="rtl"] .ro-cozumler svg { transform: scaleX(-1); }

/* ---- kaydirdikca beliren satir ve kartlar (yalnizca JS calisinca) ---- */
/* Kutu asagidan yukselir, buyuyerek ve bulaniktan netlesir; icinde once baslik, sonra aciklama
   gelir. --e: 0..1 (bitis noktasi --p 0.7). Tamamen gorununce (.tam) bulaniklik filtresi kalkar,
   yazi keskin kalir. */
html.hareket .row,
html.hareket .card,
html.hareket .contact {
  --e: clamp(0, calc(var(--p, 1) / 0.7), 1);
  opacity: clamp(0, calc(var(--e) * 1.25 - 0.05), 1);
  transform: translateY(calc((1 - var(--e)) * 56px)) scale(calc(0.94 + 0.06 * var(--e)));
  transform-origin: 50% 100%;
}
html.hareket .row:not(.tam),
html.hareket .card:not(.tam),
html.hareket .contact:not(.tam) { filter: blur(calc((1 - var(--e)) * 10px)); }
html.hareket .row h3,
html.hareket .card h3 {
  opacity: clamp(0, calc((var(--e) - 0.15) / 0.45), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--e) - 0.15) / 0.45), 1)) * 14px));
}
html.hareket .row p,
html.hareket .card p {
  opacity: clamp(0, calc((var(--e) - 0.4) / 0.5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--e) - 0.4) / 0.5), 1)) * 18px));
}
html.hareket .row .ico,
html.hareket .card .ico,
html.hareket .contact .ico { transform: scale(calc(0.6 + 0.4 * clamp(0, calc(var(--e) / 0.6), 1))) rotate(calc((1 - clamp(0, calc(var(--e) / 0.6), 1)) * -14deg)); }

.rows { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--line-08); }
.row { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-08); }
.row h3 { margin: 0; font-family: var(--dfont); font-weight: 400; font-size: 16px; line-height: 1.35; }
.row p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }

.panel { margin-top: 32px; border-radius: 18px; background: var(--fill-03); border: 1px solid var(--line-08); overflow: hidden; }
.panel .row-pad { padding: 20px; border-bottom: 0; }
.panel .row-pad + .row-pad { border-top: 1px solid var(--line-08); }

.cards { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.card { padding: 22px; border-radius: 18px; background: var(--fill-03); border: 1px solid var(--line-08); }
.card h3 { margin: 18px 0 0; font-family: var(--dfont); font-weight: 400; font-size: 17px; line-height: 1.35; }
.card p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* ---- adimlar ---- */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; }
.steps li { display: flex; gap: 18px; }
.step-rail { display: flex; flex-direction: column; align-items: center; }
.step-no {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 122, 26, 0.55);
  color: var(--accent);
  font-family: "Unbounded", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 300;
}
.step-no.green { border-color: rgba(48, 210, 124, 0.6); color: var(--green); }
.step-line { flex-grow: 1; width: 1px; min-height: 36px; background: rgba(255, 122, 26, 0.28); }
.step-body { padding: 8px 0 36px; }
.step-body.last { padding: 8px 0 0; }
.step-body h3 { margin: 0; font-family: var(--dfont); font-weight: 400; font-size: 18px; }
.step-body p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* ---- kaydirma yolu: basligin alt kenarinda ince ilerleme yolu + ucunda kucuk arac (app.js -> yol) ---- */
.yol {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
}
.yol-kalan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 10px, transparent 10px 18px);
}
.yol-dolu {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 122, 26, 0.15), var(--accent));
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.6);
  transform: scaleX(var(--yol, 0));
  transform-origin: 0 50%;
}
html[dir="rtl"] .yol-dolu { transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(255, 122, 26, 0.15), var(--accent)); }
.yol-isaret {
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  margin-inline-start: -2.5px;
  border-radius: 50%;
  background: #3A3D44;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.yol-isaret.gecti { background: var(--accent); box-shadow: 0 0 6px rgba(255, 122, 26, 0.8); }
/* arac: tiklanabilir kutu (gizli surpriz: selektor), icinde gorsel */
.yol-arac {
  position: absolute;
  top: -16px;
  left: 0;
  padding: 10px 6px;
  margin-left: -36px;
  transform: translateX(var(--yol-x, 0px));
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 320ms ease;
}
.yol-arac img {
  display: block;
  width: 26px;
  height: auto;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9));
  transition: filter 200ms ease, transform 320ms ease;
}
.yol-arac.fren img { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(-3px 0 4px rgba(255, 59, 48, 0.9)); }
.yol-arac.selektor img { animation: selektor 700ms ease; }
@keyframes selektor {
  0%, 30%, 60%, 100% { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)); }
  15%, 45% { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(6px 0 3px #FFFFFF) drop-shadow(12px 0 8px rgba(255, 255, 255, 0.8)); }
}
html[dir="rtl"] .yol-arac { left: auto; right: 0; margin-left: 0; margin-right: -36px; transform: translateX(calc(-1 * var(--yol-x, 0px))); }
html[dir="rtl"] .yol-arac img { transform: scaleX(-1); }
/* Nasil Calisir sahnesindeyken arac "otoparka girer": basliktaki arac kaybolur, yerinde P yanar */
.yol-arac.icerde { opacity: 0; }
.yol-pin, .yol-son {
  position: absolute;
  top: -7px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-inline-start: -7.5px;
  border-radius: 4px;
  font: 600 9px/1 "Geologica", system-ui, sans-serif;
  color: #FFFFFF;
  pointer-events: none;
}
.yol-pin {
  inset-inline-start: 0;
  background: #1C7A4A;
  box-shadow: 0 0 10px rgba(48, 210, 124, 0.8);
  opacity: 0;
  transform: translateX(var(--yol-x, 0px)) scale(0.6);
  transition: opacity 320ms ease, transform 320ms ease;
}
html[dir="rtl"] .yol-pin { transform: translateX(calc(-1 * var(--yol-x, 0px))) scale(0.6); }
.yol.icerde .yol-pin { opacity: 1; transform: translateX(var(--yol-x, 0px)) scale(1); }
html[dir="rtl"] .yol.icerde .yol-pin { transform: translateX(calc(-1 * var(--yol-x, 0px))) scale(1); }
/* yolun sonu: park yeri. Sayfanin sonuna gelinince arac park eder, P yesile doner */
.yol-son { inset-inline-end: 4px; margin: 0; pointer-events: auto; cursor: pointer; background: #24262B; color: #9BA1AD; border: 1px solid rgba(255, 255, 255, 0.14); transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.yol.parkta .yol-son { background: #1C7A4A; color: #FFFFFF; border-color: transparent; box-shadow: 0 0 12px rgba(48, 210, 124, 0.85); }
/* gizli surpriz: klavyeden "park" yazilinca sahnedeki bariyerler bir anlik acilir, yol yesile doner */
html.park-modu #ak-kol1, html.park-modu #ak-kol2 { transform-box: view-box; transform-origin: 0 412px; transform: scaleY(0.12); transition: transform 420ms cubic-bezier(.3, .7, .2, 1); }
html.park-modu #ak-led1, html.park-modu #ak-led2 { fill: var(--green); }
html.park-modu #ak-isik1, html.park-modu #ak-isik2 { fill: url(#ak-yesil); }
html.park-modu .yol-dolu { background: linear-gradient(90deg, rgba(48, 210, 124, 0.15), var(--green)); box-shadow: 0 0 10px rgba(48, 210, 124, 0.8); transform: scaleX(1); transition: transform 600ms ease; }
.yol-son::before { content: ""; position: absolute; inset: -12px; }
/* gizli surpriz: cok hizli kaydirinca aracin onunde "20" tabelasi cikar, arac fren yapar */
.yol-hiz {
  position: absolute;
  top: -12px;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-inline-start: 6px;
  border: 3px solid #E5332A;
  border-radius: 50%;
  background: #FFFFFF;
  color: #111111;
  font: 700 10px/1 "Geologica", system-ui, sans-serif;
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.7);
  opacity: 0;
  transform: translateX(var(--yol-x, 0px)) scale(0.3);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
html[dir="rtl"] .yol-hiz { transform: translateX(calc(-1 * var(--yol-x, 0px))) scale(0.3); }
.yol.hizli .yol-hiz { opacity: 1; transform: translateX(var(--yol-x, 0px)) scale(1); }
html[dir="rtl"] .yol.hizli .yol-hiz { transform: translateX(calc(-1 * var(--yol-x, 0px))) scale(1); }
.yol.hizli .yol-arac img { animation: ani-fren 420ms ease; }
@keyframes ani-fren { 0%, 100% { translate: 0 0; } 25% { translate: -2px 0; } 55% { translate: 1px 0; } }
/* gizli surpriz: gece (22:00 - 06:00) basliktaki aracin farlari yanar */
html.gece .yol-arac img { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(9px 0 5px rgba(255, 248, 220, 0.85)); }
html.gece .yol-arac.fren img { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(9px 0 5px rgba(255, 248, 220, 0.85)) drop-shadow(-3px 0 4px rgba(255, 59, 48, 0.9)); }
/* gece: plaka kamerasinin kizilotesi halkasi hafifce parlar (acilis sahnesi) */
.sahne-ir {
  position: absolute;
  z-index: 2;
  left: 16.017%;
  top: 37.847%;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 70, 90, 0.75) 0%, rgba(200, 30, 90, 0.35) 38%, rgba(160, 20, 80, 0) 70%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
html.gece .sahne-ir { opacity: 0.85; animation: ani-ir 3.2s ease-in-out infinite; }
@keyframes ani-ir { 50% { opacity: 0.5; } }
/* gizli surpriz: "vale" yazinca ucan anahtar */
.vale-anahtar { position: fixed; z-index: 61; left: 0; top: 0; width: 34px; height: 34px; color: var(--accent); pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.8)); }
/* gizli surpriz: Nasil Calisir sahnesinde odeme noktasina tiklayinca temassiz odeme */
#ak-kiosk { cursor: pointer; }
.ak-dalga { opacity: 0; transform-box: fill-box; transform-origin: center; }
.akis-svg.odeme-tik .ak-dalga { animation: ani-dalga 1.1s ease-out 2; }
.akis-svg.odeme-tik .ak-dalga2 { animation-delay: 0.35s; }
@keyframes ani-dalga { 0% { opacity: 0.95; transform: scale(0.7); } 100% { opacity: 0; transform: scale(2.1); } }
.akis-svg.odeme-tik #ak-kiosk-ekran { fill: #30D27C; }
.akis-svg.odeme-tik #ak-kiosk-onay { opacity: 1; }
.tost {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 1px solid rgba(255, 122, 26, 0.35);
  border-radius: 14px;
  background: rgba(12, 13, 16, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 24px -6px rgba(255, 122, 26, 0.5);
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  transform: translate(-50%, 24px);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}
.tost.on { opacity: 1; transform: translate(-50%, 0); }
.tost svg { flex: none; color: var(--accent); }

/* ---- Nasil calisir: kaydirmayla oynayan otopark sahnesi (app.js -> akis) ----
   JS calisinca bolum uzar (.akis-aktif) ve icerik ekrana yapisir; kaydirma sahneyi ilerletir.
   JS yoksa / hareket azaltma aciksa sahne sabit, adimlar normal liste. */
.akis-sahne { margin: 32px -24px 0; overflow: hidden; }
.akis-svg { display: block; width: 100%; height: auto; }
/* Arapca: adimlar sagdan sola okunur, sahne de aynalanir (arac sagdan girer); P isareti duz kalir */
html[dir="rtl"] .akis-svg { transform: scaleX(-1); }
html[dir="rtl"] .akis-svg .ak-duz { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.akis.akis-aktif { height: 340vh; height: 340dvh; padding-top: 0; padding-bottom: 0; }
.akis-aktif .akis-yapis {
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--hdr-h));
  height: calc(100dvh - var(--hdr-h));
  padding: 24px 0;
  overflow: hidden;
}
/* sahne kalan yuksekligi doldurur; SVG orani koruyarak hem genislige hem yukseklige sigar */
.akis-aktif .akis-sahne { flex: 1 1 0; min-height: 120px; max-height: 520px; margin-top: 20px; display: flex; }
.akis-aktif .akis-svg { height: 100%; }
.akis-aktif .steps { margin-top: 24px; }
.akis-aktif .steps li { opacity: 0.38; transition: opacity 300ms ease; }
.akis-aktif .steps li.aktif { opacity: 1; }
.akis-aktif .steps li.aktif .step-no { background: rgba(255, 122, 26, 0.14); }
.akis-aktif .steps li.aktif .step-no.green { background: rgba(48, 210, 124, 0.14); }
/* mobilde ekrana sigsin: yalnizca etkin adimin aciklamasi gorunur */
.akis-aktif .steps li .step-body { padding-bottom: 14px; }
.akis-aktif .steps li:not(.aktif) .step-body p { display: none; }
.akis-aktif .steps .step-line { min-height: 14px; }

/* ---- iletisim ---- */
.contacts { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.contact {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--fill-03);
  border: 1px solid var(--line-08);
  color: var(--ink);
  text-decoration: none;
}
.contact:hover { color: var(--ink); }
.contact .ico { width: 38px; height: 38px; border-radius: 11px; }
.contact-txt { display: flex; flex-direction: column; }
.contact-lbl { font-size: 12px; color: var(--muted); }
.contact-val { margin-top: 2px; font-family: "Geologica", system-ui, sans-serif; font-size: 16px; font-weight: 400; text-align: start; }

/* ---- form ---- */
.form-title { margin: 52px 0 0; font-family: var(--dfont); font-weight: 300; font-size: 22px; letter-spacing: var(--hls); }
.form-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }

.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.field { display: block; margin-top: 16px; }
.field:first-of-type { margin-top: 22px; }
.field-lbl { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line-12);
  background: var(--fill-03);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
}
.field textarea { min-height: 140px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: rgba(255, 122, 26, 0.55); }

.field-err { display: none; margin-top: 8px; font-size: 13px; line-height: 1.45; color: #FF8A80; }
.field.invalid .field-err { display: block; }
.field.invalid input, .field.invalid textarea { border-color: rgba(255, 59, 48, 0.65); }

.consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; }
.consent input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.consent-txt { font-size: 13px; line-height: 1.55; color: var(--body); }
.consent-txt label { cursor: pointer; }
.consent-txt button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.send {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 24px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #111111;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.send:disabled { background: var(--line-08); color: var(--dim); cursor: not-allowed; }
/* bariyer LED'i: KVKK onaylanmadan kirmizi, gonderilebilir olunca yesil */
.send { position: relative; overflow: hidden; }
.send::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 10px 1px rgba(48, 210, 124, 0.9);
  transition: background-color 220ms ease, box-shadow 220ms ease;
}
.send:disabled::after { background: var(--red); box-shadow: 0 0 10px 1px rgba(255, 59, 48, 0.75); }

.hint { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); text-align: center; }
.hint[hidden] { display: none; }

.formstatus { margin: 14px 0 0; font-size: 14px; line-height: 1.6; text-align: center; }
.formstatus:empty { margin: 0; }
.formstatus.ok { color: var(--green); }
.formstatus.err { color: #FF8A80; }

/* ---- hukuki metinler (govde icinde, acilir panel) ---- */
.doc { border-radius: 16px; background: var(--fill-04); border: 1px solid var(--line-10); padding: 20px; }
.doc-inline { margin-top: 14px; }
.doc-inline[hidden] { display: none; }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.doc-sub { margin-top: 8px; font-family: var(--dfont); font-weight: 300; font-size: 17px; line-height: 1.35; }
.doc p { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--body); }
.doc-x {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-top: -10px;
  margin-inline-end: -10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
}

/* ---- alt bilgi ---- */
.ftr { padding: 48px 24px 40px; border-top: 1px solid var(--line-08); }
.ftr-logo { display: block; height: 46px; width: auto; }
.ftr-txt { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.ftr-legal { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 20px; }
.ftr-legal button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
}
.ftr-legal button[aria-expanded="true"] { color: var(--accent); }

.ftr-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-06);
}
.copy { font-family: "Geologica", system-ui, sans-serif; font-size: 12px; color: var(--dim); }
.langbtn-f { padding: 0 14px; font-family: var(--bfont); font-weight: 400; }

.footlang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.footlang[hidden] { display: none; }
.flangrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line-10);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 300;
  text-align: start;
  text-decoration: none;
}
.flangrow.on { background: rgba(255, 122, 26, 0.12); border-color: rgba(255, 122, 26, 0.5); }

/* ---- alttan acilan hukuki panel ---- */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--sheet-ms) ease;
}
.sheet-scrim[hidden] { display: none; }
.sheet-scrim.in { opacity: 1; }

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 41;
  max-width: var(--col);
  margin: 0 auto;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  padding: 10px 20px 24px;
  border-radius: 20px 20px 0 0;
  background: #101114;
  border-top: 1px solid var(--line-10);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform var(--sheet-ms) cubic-bezier(.2, .7, .2, 1);
}
.sheet[hidden] { display: none; }
.sheet.in { transform: translateY(0); }

.sheet-grip { width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.doc-full[hidden] { display: none; }
.doc-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sheet-body p { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--body); }

/* JS yoksa butun hukuki metinler duz blok olarak okunabilsin */
html:not(.js) .sheet { position: static; max-width: none; max-height: none; transform: none; border-radius: 0; box-shadow: none; }
html:not(.js) .sheet[hidden] { display: block; }
html:not(.js) .doc-full[hidden] { display: block; }
html:not(.js) .sheet-head,
html:not(.js) .sheet-grip,
html:not(.js) .ftr-legal { display: none; }
html:not(.js) .doc-h { position: static; width: auto; height: auto; margin: 28px 0 0; overflow: visible; clip-path: none; white-space: normal; font-family: var(--dfont); font-weight: 300; font-size: 17px; }

/* ---- dil ekrani ---- */
/* Zemin TUM pencereyi kaplar; icerik ortadaki sutunda kalir (.gate-in). */
.gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 100vh;          /* yedek */
  height: 100dvh;         /* adres cubugu acilip kapaninca altta bosluk kalmasin */
  display: none;
  flex-direction: column;
  background: var(--bg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition: transform var(--gate-ms) cubic-bezier(.7, 0, .25, 1);
  overflow: hidden;
  /* touch-action:none KULLANILMAZ: parmakla yakinlastirmayi da engellerdi.
     Kaydirma kilidi zaten body'nin position:fixed olmasiyla saglaniyor. */
  overscroll-behavior: contain;
}
html.gate-on .gate { display: flex; }
/* Dil ekraninin kodu sayfanin sonunda. Yavas baglantida tarayici sayfayi parca parca
   boyarsa, dil ekrani gelmeden acilis sahnesi bir an gorunmesin: o ana kadar sayfa gizli. */
html.gate-on:not(:has(#gate)) .shell { visibility: hidden; }
.gate.leaving { transform: translateY(-100%); }

/* Kisa ekranlarda JS bu degiskenleri kucultur (bkz. app.js -> fit()).
   700px ve uzeri gorunur yukseklikte tasarim degerleri aynen gecerlidir. */
.gate {
  --g-pad-y: 28px;
  --g-logo-gap: 10px;
  --g-greet-h: 40px;
  --g-greet-mb: 6px;
  --g-prompt-h: 42px;
  --g-prompt-mb: 22px;
  --g-mid-pb: 48px;
  --g-row-h: 56px;
  --g-row-gap: 8px;
}

/* iOS kaydirma kilidi: yalnizca overflow:hidden iOS Safari/Chrome'da yetmiyor,
   arkadaki sayfa parmakla kayiyor ve iki parmakla kucultulebiliyordu.
   body'yi position:fixed yapmak belge yuksekligini gorunur alana indirir. */
html.gate-on,
html.gate-on body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html.gate-on body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Sahne tum pencereyi kaplar. xMaxYMax slice: oran korunur, isik izleri ve
   parilti her zaman alta ve saga yasli kalir, kenarda bosluk olusmaz. */
.gate-scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--content-ms) ease var(--content-delay);
}
.gate.lit .gate-scene,
.gate.lit .gate-barrier,
.gate.lit .gate-mid { opacity: 1; }

.gate-in {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding: var(--g-pad-y) 24px;
  /* Yedek: sikistirmaya ragmen sigmazsa dil ekraninin ICI kendi icinde kayar.
     Arka sayfa kilitli kalir; overscroll-behavior zincirlemeyi keser. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gate-top { display: flex; align-items: center; justify-content: space-between; }

.gate-logo {
  position: relative;
  width: 58px;
  height: 47px;
  transform-origin: 0 0;
  opacity: 0;
  transition: transform var(--logo-in-ms) cubic-bezier(.2, .7, .2, 1), opacity 450ms ease;
}
.gate-logo img { display: block; width: 58px; height: auto; }
.gate-logo svg { position: absolute; left: 0; top: 0; display: block; overflow: hidden; pointer-events: none; }
.gate.lit .gate-logo { transition-duration: var(--logo-fly-ms), 450ms; transition-timing-function: cubic-bezier(.7, 0, .2, 1), ease; }

.gate-logo-line {
  transform-box: view-box;
  transform-origin: 28.5px 44.5px;
  transform: scaleX(0);
  transition: transform var(--line-ms) cubic-bezier(.2, .7, .2, 1);
}
.gate-logo-line.open { transform: scaleX(1); }

.gate-barrier {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  margin-top: var(--g-logo-gap);
  overflow: visible;
  color: var(--red);
  opacity: 0;
  transition: opacity var(--content-ms) ease var(--content-delay), color 200ms ease;
}
.gate.open .gate-barrier { color: var(--green); }

.arm-seg { display: none; }
.gate.armed .arm-solid { display: none; }
.gate.armed .arm-seg { display: block; }

.gate.cramped .gate-mid { justify-content: flex-start; }

.gate-mid {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--g-mid-pb);
  opacity: 0;
  transition: opacity var(--content-ms) ease var(--content-delay);
}

.gate-greet {
  height: var(--g-greet-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--g-greet-mb);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--accent);
  white-space: nowrap;
  transform: translateY(0);
  transition: opacity var(--greet-in-ms) ease, transform var(--greet-in-ms) cubic-bezier(.2, .4, .55, 1);
}
.gate-prompt {
  margin: 0 0 var(--g-prompt-mb);
  flex-shrink: 0;
  max-width: 280px;
  min-height: var(--g-prompt-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-align: center;
  transform: translateY(0);
  transition: opacity var(--greet-in-ms) ease, transform var(--greet-in-ms) cubic-bezier(.2, .4, .55, 1);
}
.gate-greet.out, .gate-prompt.out { opacity: 0; transform: translateY(6px); transition-duration: var(--greet-out-ms); }
.gate.picked .gate-prompt { opacity: 0; transition-duration: 300ms; }

.gate-list { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--g-row-gap); }

.gate-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: var(--g-row-h);
  flex-shrink: 0;
  padding: 0 18px;
  border: 1px solid var(--line-10);
  border-radius: 14px;
  background: rgba(12, 13, 16, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  cursor: pointer;
  color: var(--ink);
  text-align: start;
  transition: opacity 300ms ease, border-color 250ms ease, background-color 250ms ease;
}
.gate.busy .gate-row { opacity: 0.3; pointer-events: none; }
.gate.busy .gate-row.picked { opacity: 1; border-color: var(--accent); background: rgba(255, 122, 26, 0.10); }
.gate.open .gate-row.picked { border-color: var(--green); background: rgba(48, 210, 124, 0.12); }

.gate-row-name { flex-grow: 1; font-size: var(--gfs); font-weight: 300; letter-spacing: 0; }
.gate-row-ok { display: none; flex-shrink: 0; }
.gate.open .gate-row.picked .gate-row-ok { display: block; }

.gate-row-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px 3px rgba(255, 122, 26, 0.5);
  inset-inline-start: 0;
  opacity: 0;
  transition: inset-inline-start var(--scan-ms) linear, opacity 150ms ease;
}
.gate-row.scanning .gate-row-beam { inset-inline-start: calc(100% - 2px); opacity: 1; }

.scene-calm, .scene-go { transition: opacity 450ms ease; }
.scene-go { opacity: 0; }
.gate.open .scene-calm { opacity: 0; }
.gate.open .scene-go { opacity: 1; }

.gate-skip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; }
.gate.lit .gate-skip { display: none; }

/* ==================================================================
   MASAUSTU — gorunur genislik 1024px ve uzeri
   Kaynak: guvengo-masaustu-tasarim/design/masaustu-anasayfa.dc.html ve
   masaustu-dil-ekrani.dc.html (1440 genislik referans; degerler birebir).
   Karar fare/dokunmaya degil GENISLIGE gore verilir: yatay iPad de bu duzeni alir.
   1024px altinda yukaridaki mobil duzen (480px ortalanmis sutun dahil) AYNEN gecerlidir.
   ================================================================== */

/* Yalnizca masaustunde gorunen ogeler: mobilde yer kaplamaz, ekran okuyucuya da gitmez. */
.dnav, .hdr-cta, .hero-shade { display: none; }
.gate-scene.gate-scene-d, .gate-barrier.gate-barrier-d { display: none; }

@media (min-width: 1024px) {
  :root {
    --hdr-h: 84px;
    /* kenar boslugu: 1440'ta 64px (tasarim), 1024'e dogru 32px'e iner */
    --pad: clamp(32px, calc(32px + (100vw - 1024px) / 4), 64px);
    /* icerik en fazla 1312px (1440'ta 64px bosluk); daha genis ekranda ortalanir.
       100% kullanildigi ogenin genisligine gore cozulur. */
    --gutter: max(var(--pad), calc((100% - 1312px) / 2));
    /* baslik 1440'ta tasarim degerlerinde; 1024'e dogru sikisir ki 6 baglanti +
       dil secici + CTA her dilde tek satira sigsin */
    --nav-gap: clamp(14px, calc(14px + (100vw - 1024px) * 0.0481), 34px);
    --nav-fs: clamp(13px, calc(13px + (100vw - 1024px) * 0.0048), 15px);
    --cta-px: clamp(14px, calc(14px + (100vw - 1024px) * 0.0192), 22px);
    --cta-fs: clamp(13px, calc(13px + (100vw - 1024px) * 0.0024), 14px);
    --card-pad: clamp(24px, calc(24px + (100vw - 1024px) * 0.0192), 32px);
    --h1ls-d: -0.025em;
    --h2ls: -0.02em;
    --t1ls: -0.01em;
  }
  html[dir="rtl"] { --h1ls-d: 0; --h2ls: 0; --t1ls: 0; }

  /* Modal acikken arka plan kaymasin; kaydirma cubugu kaybolunca sayfa yana kaymasin. */
  html:has(body.is-locked) { overflow: hidden; scrollbar-gutter: stable; }

  .shell { max-width: none; }

  /* ---- ust bar: logo | bolum baglantilari (ortada) | dil secici + CTA ---- */
  .hdr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 12px;
    padding: 0 var(--gutter);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .hdr-logo { width: auto; height: 50px; }
  .hdr-logo img { width: auto; height: 50px; }
  .hdr-line { display: none; }   /* masaustunde cizgi sabit: logonun kendisinde */

  .dnav {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: var(--nav-gap);
    font-size: var(--nav-fs);
    font-weight: 400;
    white-space: nowrap;
  }
  .dnav a { color: var(--soft); text-decoration: none; transition: color 150ms ease; }
  .dnav a:hover, .dnav a[aria-current="true"] { color: var(--ink); }

  .hdr-actions { display: contents; }   /* dil dugmesi ve CTA izgaranin kendi hucrelerinde */
  .menubtn { display: none; }            /* masaustunde menu dugmesi yok */
  .nav, .nav[hidden] { display: none; }

  .hdr-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--cta-px);
    border-radius: 12px;
    background: var(--accent);
    color: #111111;
    font-size: var(--cta-fs);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .hdr-cta:hover { color: #111111; }

  /* Mobildeki ayni dil listesi; dil dugmesinin altinda, bitis kenarina hizali.
     Kapsayici blok: .hdr izgarasinin 3. sutunu (dil dugmesinin hucresi). */
  .langmenu { grid-column: 3 / 4; grid-row: 1 / 2; top: 72px; inset-inline-end: 0; }

  /* ---- acilis ---- */
  .hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 760px;
    padding: 0 var(--gutter);
    background: var(--bg);
  }
  .hero-bg { display: none; }   /* bu bolumde isik izi yok */

  /* Acilis sahnesi metnin yaninda. Genislik 1024'te 1224px, 1424px ve uzerinde 1483px.
     TV'nin sag kenari (kaynakta %86.85) icerik sutununun sag kenarina (gutter) yaslanir; boylece
     bariyer govdesi metnin hemen sagina duser. Yukseklik bolumden fazlaysa ust/alt kirpilir. */
  .sahne {
    --sw: clamp(1224px, calc(1224px + (100vw - 1024px) * 0.6475), 1483px);
    position: absolute;
    order: 0;
    top: 50%;
    inset-inline-end: calc(var(--gutter) - 16px - 0.1315 * var(--sw));
    width: var(--sw);
    margin: 0;
    aspect-ratio: 1916 / 1080;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  }
  /* sahnenin sol kismi (karanlik duvar) zemine karisir; metin bu bolgenin ustunde */
  .sahne::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(90deg, #050506 0%, #050506 31%, rgba(5, 5, 6, 0.86) 37%, rgba(5, 5, 6, 0.42) 42%, rgba(5, 5, 6, 0) 46.5%),
      linear-gradient(270deg, #050506 0%, rgba(5, 5, 6, 0) 6%);   /* genis ekranda sag kenar */
  }
  .sahne-tv { left: 67.432%; width: 18.998%; }
  .sahne-kabin { left: 47.169%; width: 2.218%; }
  .sahne-ir { left: 51.083%; width: 3.4%; }
  /* Arapca: sahne aynalanir (karanlik taraf saga, metnin altina gelir); yazi geri cevrilir */
  html[dir="rtl"] .sahne { transform: translateY(-50%) scaleX(-1); }
  html[dir="rtl"] .sahne-kabin { transform: scaleX(-1); }
  .sahne-dur { inset-inline-end: var(--gutter); bottom: 40px; }
  /* Ust ve alt kenarda zemine kararma (sahnenin ustunde, metnin altinda). */
  .hero-shade {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hero-shade::before,
  .hero-shade::after { content: ""; position: absolute; left: 0; right: 0; }
  .hero-shade::before { top: 0; height: 110px; background: linear-gradient(180deg, rgba(5, 5, 6, 0.85) 0%, rgba(5, 5, 6, 0) 100%); }
  .hero-shade::after { bottom: 0; height: 170px; background: linear-gradient(180deg, rgba(5, 5, 6, 0) 0%, #050506 100%); }

  /* metin 12 sutunun 6'si; h1 bu sutuna gore olceklenir (cqi) */
  .hero-in { width: calc(50% - 16px); container-type: inline-size; }
  h1 {
    /* tasarim 64px; en uzun satir sutuna sigmazsa kuculur (--h1em: build.js, olculmus) */
    font-size: min(64px, calc(100cqi / var(--h1em, 11)));
    line-height: 1.1;
    letter-spacing: var(--h1ls-d);
  }
  .hero .lead { max-width: 540px; margin-top: 32px; font-size: 18px; line-height: 1.7; }
  .hero-cta { flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
  .hero-cta .btn { display: inline-flex; min-height: 56px; padding: 0 28px; }

  /* ---- bolumler ---- */
  .sec { padding: 120px var(--gutter); container-type: inline-size; }
  .sec-contact { padding-bottom: 128px; }
  /* h2: tasarim 40px (iletisim 36px). Bolunemez en uzun parca (--h2w, build.js, olculmus)
     sutuna sigmazsa kuculur; ornek: Almanca "Parkraummanagement" 5 sutunda.
     100cqi = bolumun icerik genisligi; 5 sutun = (100cqi - 11 aralik) * 5/12 + 4 aralik. */
  h2 { margin-top: 18px; font-size: min(40px, calc(100cqi / var(--h2w, 1))); line-height: 1.18; letter-spacing: var(--h2ls); }
  #cozumler > h2 { font-size: min(40px, calc(min(760px, 100cqi) / var(--h2w, 1))); }
  #guvengo-nedir > h2,
  #guvenlik > h2 { font-size: min(40px, calc(((100cqi - 352px) * 5 / 12 + 128px) / var(--h2w, 1))); }
  .h2-sm { font-size: min(36px, calc(((100cqi - 352px) * 5 / 12 + 128px) / var(--h2w, 1))); line-height: 1.22; }
  .lead { margin-top: 24px; font-size: 17px; line-height: 1.7; }

  /* iki sutunlu bolumler: solda 5 sutun metin, sagda 7. sutundan itibaren 6 sutun.
     Son satir 1fr: sag sutun uzun olsa da soldaki ogeler arasina bosluk girmez. */
  #guvengo-nedir, #guvenlik, #iletisim {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    column-gap: 32px;
    align-items: start;
  }
  #iletisim { grid-template-rows: auto auto auto auto 1fr; }
  #guvengo-nedir > *, #guvenlik > *, #iletisim > * { grid-column: 1 / span 5; }
  #guvengo-nedir > .rows,
  #guvenlik > .panel,
  #iletisim > .form-card { grid-column: 7 / span 6; grid-row: 1 / -1; }

  .rows, .panel { margin-top: 0; }
  .row { gap: 20px; padding: 28px 0; }
  .row .ico { width: 48px; height: 48px; border-radius: 14px; }
  .row .ico svg { width: 28px; height: 28px; }
  .row h3 { font-size: 18px; line-height: normal; }
  .row p { margin-top: 10px; font-size: 16px; line-height: 1.65; }
  .panel { border-radius: 20px; }
  .panel .row-pad { padding: 28px; }

  /* cozumler: baslik blogu en fazla 760px, 3'lu kartlar */
  #cozumler > .eyebrow, #cozumler > h2, #cozumler > .lead { max-width: 760px; }
  .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; margin-top: 56px; }
  .card { padding: var(--card-pad); border-radius: 20px; }
  .card .ico-lg { width: 52px; height: 52px; border-radius: 14px; }
  .card .ico-lg svg { width: 30px; height: 30px; }
  .card h3 { margin-top: 26px; font-size: 20px; line-height: 1.3; }
  .card p { margin-top: 12px; font-size: 16px; line-height: 1.65; }
  .btn-wide { display: inline-flex; min-height: 56px; margin-top: 40px; padding: 0 28px; }

  /* nasil calisir: yatay adimlar */
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
  .akis-sahne { margin: 48px 0 0; border-radius: 24px; }
  .akis-aktif .akis-yapis { padding: 36px 0 32px; }
  .akis-aktif .akis-sahne { margin-top: 28px; border-radius: 0; }
  .akis-aktif .steps { margin-top: 28px; }
  .akis-aktif .steps li:not(.aktif) .step-body p { display: block; }
  .akis-aktif .steps li .step-body { padding-bottom: 0; }
  .akis-aktif .steps .step-line { min-height: 0; }
  .yol-arac img { width: 30px; }
  .steps li { display: block; }
  .step-rail { flex-direction: row; gap: 16px; }
  .step-no { width: 48px; height: 48px; font-size: 17px; }
  .step-line { width: auto; min-height: 0; height: 1px; }
  .step-body, .step-body.last { padding: 0; }
  .step-body h3 { margin-top: 28px; font-size: 22px; line-height: normal; }
  .step-body p { max-width: 360px; margin-top: 12px; font-size: 16px; line-height: 1.65; }

  /* iletisim: solda bilgiler, sagda form karti (iki sutunlu form) */
  .contacts { gap: 12px; margin-top: 36px; }
  .contact { gap: 16px; min-height: 72px; padding: 0 22px; }
  .contact .ico { width: 42px; height: 42px; border-radius: 12px; }
  .contact .ico svg { width: 24px; height: 24px; }
  .contact-val { margin-top: 3px; font-size: 17px; }

  .form-card { padding: 40px; border-radius: 24px; background: var(--fill-03); border: 1px solid var(--line-08); }
  .form-title { margin: 0; font-size: 26px; letter-spacing: var(--t1ls); }
  .form-sub { margin-top: 10px; font-size: 15px; line-height: 1.6; }
  .form { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 16px; }
  .field { flex: 1 1 100%; margin-top: 16px; }
  .field:nth-of-type(1), .field:nth-of-type(2) { flex-basis: calc(50% - 8px); margin-top: 28px; }
  .field textarea { min-height: 150px; }
  .consent, .doc-inline, .formstatus { flex: 1 1 100%; }
  .send { flex: 0 0 auto; width: auto; min-width: 200px; margin-top: 26px; padding: 0 28px; }
  .hint { flex: 1 1 0; align-self: center; margin: 26px 0 0; margin-inline-start: 18px; text-align: start; }
  .formstatus { text-align: start; }

  /* ---- alt bilgi: izgara ---- */
  .ftr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
    column-gap: 32px;
    align-items: start;
    padding: 64px var(--gutter) 40px;
  }
  .ftr-logo { grid-column: 1 / span 5; grid-row: 1; height: 52px; }
  .ftr-txt { grid-column: 1 / span 5; grid-row: 2; margin-top: 18px; font-size: 15px; line-height: normal; }
  .ftr-legal { grid-column: 7 / span 4; grid-row: 1 / span 3; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; margin-top: 0; }
  .ftr-legal button { min-height: 36px; font-size: 14px; transition: color 150ms ease; }
  .ftr-legal button:hover { color: var(--ink); }
  .ftr-legal button[aria-expanded="true"] { color: var(--accent); }
  .ftr-bot { display: contents; }
  .langbtn-f { grid-column: 11 / span 2; grid-row: 1; justify-self: end; }
  .copy { grid-column: 1 / -1; grid-row: 4; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-06); }
  html[dir="rtl"] .copy { text-align: right; }   /* dir="ltr" metin, aynalanmis duzende sagda */
  /* alt bilgideki dil listesi: dugmenin altinda acilan kutu */
  .footlang {
    position: absolute;
    z-index: 6;
    grid-column: 11 / 13;
    grid-row: 1 / 2;
    top: 52px;
    inset-inline-end: 0;
    width: 320px;
    margin: 0;
    padding: 6px;
    border-radius: 16px;
    background: rgba(16, 17, 20, 0.97);
    border: 1px solid var(--line-10);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  }

  /* ---- hukuki metinler: ortalanmis modal (en fazla 720px) ---- */
  .sheet {
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(720px, calc(100vw - 64px));
    max-width: none;
    max-height: min(86vh, 880px);
    margin: 0;
    padding: 28px 32px 32px;
    border: 1px solid var(--line-10);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translate(-50%, calc(-50% + 16px));
    transition: opacity var(--sheet-ms) ease, transform var(--sheet-ms) cubic-bezier(.2, .7, .2, 1);
  }
  .sheet.in { opacity: 1; transform: translate(-50%, -50%); }
  .sheet-grip { display: none; }
  .sheet .doc-sub { font-size: 20px; }
  .sheet-body { padding-bottom: 0; }
  .sheet-body p { font-size: 15px; line-height: 1.7; }
  html:not(.js) .sheet { width: auto; opacity: 1; }

  /* ---- dil ekrani ---- */
  .gate-scene.gate-scene-m { display: none; }   /* mobil sahne buyutulmez */
  .gate-scene.gate-scene-d { display: block; }

  /* Dikey yerlesim: 1440x900'de bariyer ustten 150px, altta 258px kalir (tasarim).
     Bos alan bu oranla paylasilir; ust bosluk en az 115px: kol kalkinca dis parca
     ekranin ust kenarinin en az 20px altinda kalir. */
  .gate-in { max-width: none; padding: 0; align-items: center; }
  .gate-in::before { content: ""; flex: 150 1 0px; min-height: 115px; }
  .gate-in::after { content: ""; flex: 258 1 0px; min-height: 24px; }

  .gate-top { position: absolute; top: 44px; inset-inline-start: max(64px, calc((100% - 1312px) / 2)); }
  .gate-logo, .gate-logo img, .gate-logo svg { width: 74px; }   /* 60px yukseklik */
  .gate-logo, .gate-logo svg { height: 60px; }

  .gate-barrier.gate-barrier-m { display: none; }
  .gate-barrier.gate-barrier-d { display: block; width: min(1020px, calc(100% - 84px)); margin-top: 0; }

  .gate-mid { flex: none; width: min(1020px, calc(100% - 84px)); padding-bottom: 0; }
  /* 768px'ten kisa pencerede bosluklar orantili daralir (en az 32 / 28px) */
  .gate-greet {
    height: auto;
    margin: clamp(32px, calc(56px + (100dvh - 768px) * 0.143), 56px) 0 0;
    font-size: 60px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .gate-greet[dir="rtl"] { letter-spacing: 0; }
  .gate-prompt { max-width: none; min-height: 0; margin: 18px 0 0; font-size: 18px; line-height: 1.6; letter-spacing: 0; }

  /* alti dil tek sirada dik kutular */
  .gate-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: clamp(28px, calc(48px + (100dvh - 768px) * 0.119), 48px);
  }
  .gate-row {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-height: 128px;
    padding: 22px 12px;
    border-radius: 18px;
    text-align: center;
  }
  .gate-row .flag-l { width: 48px; height: 32px; border-radius: 5px; }
  .gate-row-name { flex-grow: 0; font-size: var(--gfs-d); }
  .gate-row-ok { position: absolute; top: 12px; inset-inline-end: 12px; }
}

@media (min-width: 1024px) and (hover: hover) {
  .gate:not(.busy) .gate-row:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(18, 19, 23, 0.8); }
}

/* ---- hareket azaltma: splash ve uzun animasyonlar atlanir, kisa gecisler kalir ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gate-ms: 160ms;
    --content-ms: 160ms;
    --content-delay: 0ms;
    --greet-in-ms: 160ms;
    --greet-out-ms: 160ms;
    --scan-ms: 160ms;
    --logo-in-ms: 0ms;
    --logo-fly-ms: 0ms;
    --line-ms: 0ms;
    --sheet-ms: 160ms;
  }
  .gate-greet, .gate-prompt { transform: none !important; }
  .yol-arac img, .tost { transition: none; }
  .yol.hizli .yol-arac img, html.gece .sahne-ir, .akis-svg.odeme-tik .ak-dalga { animation: none; }
}