/* ============================================================
   Kovan tanıtım sitesi — tek stil sayfası.
   24 sayfanın tamamı bunu kullanır; ayrı bir v2 dosyası yoktur.
   Görsel sistem: düz-tepeli altıgen (petek gözü). Marka işareti zaten
   birbirine değen üç petek gözü; onu sayfanın ızgarasına çıkarıyoruz.
   Palet token'ları movibee/docs/design/tokens.json'dan; tek ekleme
   bal (honey) tonudur ve o da token olarak tanımlıdır.

   Bölüm ritmi: arka arkaya iki beyaz bölüm konmaz. Sırayla
   koyu → beyaz → gri → koyu gider; üretici bunu kendisi sıralar.
   ============================================================ */

:root{
  --ink:#0E1726; --bg:#F3F4F6; --surface:#FFFFFF;
  --deep:#0E1726;  /* her iki temada sabit koyu zemin */
  --line:#E2E5EA; --lineStrong:#CBD2DA; --divider:#EEF0F3;
  --textSecondary:#374151; --textMuted:#4B5563;
  --accent:#06B6D4; --onAccent:#0E1726;
  --navy:#1F3A5C; --navyLine:#24405F; --navyDeep:#0A1222;
  --onNavy:#FFFFFF; --onNavyMuted:#B7C4D6; --onNavySecondary:#D5DEE9;
  --okFg:#0B7A57; --okBg:#E3F4EC; --okText:#075E43; --okOnNavy:#8FE3BF;

  /* Bal tonu: petek sisteminin tek yeni rengi. Koyu zeminde --honey,
     açık zeminde metin için --honeyInk kullanılır (beyaz üstünde
     --honey'in kontrastı yetmez, zemin olarak --honeyBg ile çalışır). */
  /* .btn-quiet çerçevesi: tek görünürlük işareti o, WCAG 1.4.11 3:1 ister.
     --lineStrong açık temada 1.39:1 kalıyordu. */
  --quietBorder:#78828F;
  --honey:#F2A93B; --honeyDeep:#C97A12; --honeyBg:#FDF0E4;
  /* Logo turuncusu: --honey bal tonu, arayüz uyarıları için doğru ama lacivert
     başlıkta sönük kalıyordu. Marka işareti kendi doygun turuncusunu kullanır. */
  --brand:#F6871F;
  --warnBg:#FDF0E4; --warnBorder:#F3C9A2; --warnText:#7A3B05;
  --noteBg:#FFF6E5; --noteBorder:#F1D9A8; --noteText:#3D2A00;
  --honeyBorder:#F3C9A2; --honeyInk:#7A3B05;

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --shadow-1:0 1px 2px rgba(14,23,38,.05), 0 6px 18px -8px rgba(14,23,38,.14);
  --shadow-2:0 2px 4px rgba(14,23,38,.06), 0 18px 40px -16px rgba(14,23,38,.26);
  --shadow-lift:0 4px 8px rgba(14,23,38,.07), 0 30px 60px -22px rgba(14,23,38,.34);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.1;letter-spacing:-.5px}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:12px 18px;z-index:50}
.skip:focus{left:8px;top:8px;border-radius:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 16px}}

/* ---------- tipografik ölçek ----------
   Beş kademe: dev başlık / bölüm başlığı / kart başlığı / gövde / etiket. */
.t-eyebrow{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:9px}
.t-h1{font-size:clamp(33px,6.1vw,66px);letter-spacing:-2.2px;line-height:1.03;font-weight:700}
.t-h2{font-size:clamp(27px,3.6vw,43px);letter-spacing:-1.3px;line-height:1.08;font-weight:700}
.t-h3{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.4px;font-weight:700}
.t-lead{font-size:clamp(16.5px,1.55vw,19.5px);line-height:1.6}

/* ---------- petek primitifleri ---------- */
.hexmark{width:26px;height:26px;color:var(--accent);flex:0 0 auto}
.hexmark svg{display:block;width:100%;height:100%}
.hexdot{width:9px;height:10px;flex:0 0 auto}
.hexdot svg{display:block;width:100%;height:100%}

/* Kart ikonu: altıgen çerçeve + içinde kendi glifi. Dördü farklı. */
.hexicon{width:50px;height:46px;display:block;margin-bottom:18px}
.hexicon svg{display:block;width:100%;height:100%}

/* Hero'nun petek dokusu. Metnin arkasında kalır, kontrastı bozmaz. */
.hc-tex{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- başlık ---------- */
.head{position:sticky;top:0;z-index:40;background:rgba(14,23,38,.86);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--navyLine);color:var(--onNavy)}
.head .wrap{display:flex;align-items:center;gap:26px;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:19.5px;letter-spacing:-.6px;color:var(--onNavy)}
.brand .hexmark{color:var(--brand);width:34px;height:34px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--onNavySecondary);
  padding:9px 12px;border-radius:9px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav .lang{display:flex;align-items:center;gap:6px;margin:0 6px 0 10px;padding-left:16px;
  border-left:1px solid var(--navyLine);font-size:13px;letter-spacing:.04em}
.nav .lang a{padding:6px 7px;color:var(--onNavyMuted)}
.nav .lang .on{color:var(--honey);font-weight:700}
.nav .cta{background:var(--accent);color:var(--onAccent);font-weight:700;padding:10px 17px;
  border-radius:999px;white-space:nowrap}
.nav .cta:hover{background:#22CCE8;color:var(--onAccent)}
.nav .only-mobile{display:none}  /* Hakkında/İletişim masaüstünde altbilgide durur */
.menu-btn{display:none;margin-left:auto;background:transparent;border:1px solid var(--navyLine);
  color:var(--onNavy);border-radius:10px;padding:10px 14px;font:inherit;font-size:14.5px;cursor:pointer}
@media(max-width:940px){
  .head .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px}
  .menu-btn{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin:10px 0 2px}
  .nav.open{display:flex}
  .nav .only-mobile{display:block}
  .nav a{padding:13px 4px;border-bottom:1px solid var(--navyLine);border-radius:0;font-size:16px}
  .nav .cta{order:-1;text-align:center;border-bottom:0;margin-bottom:8px;padding:14px}
  .nav .lang{border-left:0;padding-left:0;margin:12px 0 0}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--onNavy);background-color:var(--deep);
  background-image:radial-gradient(1200px 620px at 78% -8%, #1B3454 0%, rgba(27,52,84,0) 62%),
             linear-gradient(176deg, #101C2F 0%, var(--ink) 46%, var(--navyDeep) 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:56px;align-items:center;padding-top:76px;padding-bottom:84px}
.hero .t-eyebrow{color:var(--honey)}
.hero h1{margin:22px 0 0;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .dek{margin:22px 0 0;max-width:52ch;color:var(--onNavySecondary)}
.hero .dek strong{color:#fff;font-weight:700}
.ask{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--navyLine)}
.ask .q{font-family:var(--display);font-weight:700;font-size:clamp(16px,1.5vw,18.5px);color:#fff;margin:0 0 15px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;
  font-size:15.5px;padding:14px 22px;border-radius:999px;min-height:48px;border:1px solid transparent;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:var(--onAccent);box-shadow:0 10px 26px -12px rgba(6,182,212,.9)}
.btn-accent:hover{background:#22CCE8}
.btn-outline{background:transparent;color:#fff;border-color:#3C587C}
.btn-outline:hover{background:rgba(255,255,255,.07);border-color:#587699}
.btn-honey{background:var(--honey);color:#3D2A00;box-shadow:0 10px 26px -12px rgba(242,169,59,.85)}
.btn-honey:hover{background:#FFBB54}
.supply{margin-top:26px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;
  font-size:14.5px;color:var(--onNavyMuted)}
.supply a{color:#fff;text-decoration:none;font-weight:600;border-bottom:2px solid var(--honey);
  display:inline-block;padding:4px 0 3px}  /* dokunma hedefi 24px'in altına düşmesin */
.supply a:hover{border-bottom-color:#fff}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;padding-top:52px;padding-bottom:58px}
  .hero h1{max-width:none}
  .hero .shot{justify-self:center}
}
@media(max-width:560px){.hero .wrap{padding-top:38px;padding-bottom:44px}.supply{display:block;line-height:2.1}
  /* flex kalkınca etiket ile ilk bağlantı yapışıyordu: etiket kendi satırına. */
  .supply>span{display:block}
  .supply a{margin-right:18px}}

/* ---------- telefon ---------- */
.shot{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.phone{position:relative;width:min(292px,78vw);aspect-ratio:292/610;background:#05080E;
  border-radius:46px;padding:11px;box-shadow:0 2px 0 rgba(255,255,255,.1) inset,
  0 0 0 1px #2B3952, 0 44px 80px -30px rgba(0,0,0,.85), 0 16px 30px -18px rgba(0,0,0,.7)}
.phone::after{content:"";position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:96px;height:23px;background:#05080E;border-radius:0 0 14px 14px;z-index:3}
.screen{position:relative;height:100%;background:#fff;border-radius:36px;overflow:hidden;
  display:flex;flex-direction:column;color:var(--ink);font-size:11.5px;line-height:1.45}
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:9px 20px 3px;
  font-size:10.5px;font-weight:700;letter-spacing:.2px}
.statusbar .bars{display:flex;align-items:flex-end;gap:2px;height:9px}
.statusbar .bars i{display:block;width:2.5px;background:var(--ink);border-radius:1px}
.statusbar .bars i:nth-child(1){height:3px}.statusbar .bars i:nth-child(2){height:5px}
.statusbar .bars i:nth-child(3){height:7px}.statusbar .bars i:nth-child(4){height:9px;opacity:.3}
.statusbar .batt{width:19px;height:9.5px;border:1px solid var(--ink);border-radius:2.5px;position:relative}
.statusbar .batt::before{content:"";position:absolute;inset:1.5px;right:6px;background:var(--ink);border-radius:1px}
.statusbar .batt::after{content:"";position:absolute;right:-3px;top:3px;width:1.5px;height:3.5px;
  background:var(--ink);border-radius:0 1px 1px 0}
.apphead{display:flex;align-items:center;gap:8px;padding:10px 18px 12px;border-bottom:1px solid var(--divider)}
.apphead .hexmark{width:21px;height:21px;color:var(--brand)}
.apphead b{font-family:var(--display);font-size:14.5px;letter-spacing:-.3px}
.apphead .tab{margin-left:auto;background:var(--ink);color:#fff;border-radius:999px;
  padding:3px 10px;font-size:9.5px;font-weight:700;letter-spacing:.11em}
.appbody{padding:14px 16px 0;flex:1;overflow:hidden}
.jobcard{border:1px solid var(--line);border-left:3px solid var(--honey);border-radius:13px;
  padding:13px 14px;box-shadow:var(--shadow-1)}
.jobcard .k{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--textMuted)}
.jobcard .v{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.5px;margin-top:4px}
.jobcard .m{color:var(--textMuted);margin-top:5px;font-size:11px}
.jobcard .pill{display:inline-block;margin-top:9px;background:var(--okBg);color:var(--okText);
  border-radius:999px;padding:3px 9px;font-size:9.5px;font-weight:700}
.checks{list-style:none;margin:15px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.checks li{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:var(--textSecondary)}
.checks .tick{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--okBg);
  display:flex;align-items:center;justify-content:center}
.checks .tick svg{width:8px;height:8px;color:var(--okFg)}
.appfoot{padding:12px 16px 16px;border-top:1px solid var(--divider);background:var(--bg)}
.appbtn{background:var(--accent);color:var(--onAccent);border-radius:11px;text-align:center;
  padding:11px;font-weight:700;font-size:12px}
.appbtn .sub{display:block;font-weight:500;font-size:9.5px;color:#13404B;margin-top:2px}
.sample{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);
  border:1px solid var(--navyLine);color:var(--onNavySecondary);border-radius:999px;
  padding:7px 15px;font-size:12.5px;font-weight:600}
.sample .hexdot{color:var(--honey)}

/* ---------- bölüm ritmi: beyaz → koyu → gri → bal ---------- */
.sec{padding:84px 0}
.sec-white{background:var(--surface)}
.sec-grey{background:var(--bg)}
.sec-dark{position:relative;overflow:hidden;color:var(--onNavy);background-color:var(--deep);
  background-image:linear-gradient(172deg,var(--deep) 0%,#0C1728 55%,var(--navyDeep) 100%)}
.sec-dark .sec-head p{color:var(--onNavySecondary)}
.sec-dark .t-eyebrow{color:var(--honey)}
@media(max-width:700px){.sec{padding:56px 0}}
.sec-head{max-width:70ch;margin-bottom:46px}
.sec-head h2{margin:16px 0 0}
.sec-head p{margin:18px 0 0;color:var(--textSecondary);max-width:62ch}
.sec-white .t-eyebrow,.sec-grey .t-eyebrow{color:var(--honeyInk)}
.sec-white .t-eyebrow .hexdot,.sec-grey .t-eyebrow .hexdot{color:var(--honeyDeep)}
.sec-dark .t-eyebrow .hexdot{color:var(--honey)}

/* ---------- dört kapı ---------- */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media(max-width:1040px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.doors{grid-template-columns:1fr}}
.door{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 22px;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-1);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.door::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:18px 18px 0 0;
  background:var(--honey);opacity:0;transition:opacity .16s ease}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--lineStrong)}
.door:hover::before{opacity:1}
.door h3{margin:0 0 9px}
.door .p{color:var(--textSecondary);font-size:15px}
.door ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.door li{display:flex;gap:9px;font-size:14px;color:var(--textMuted);line-height:1.5}
.door li .hexdot{margin-top:6px;color:var(--honeyDeep)}
.door .go{margin-top:auto;padding-top:20px;font-weight:700;font-size:14.5px;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px}
.door .go svg{width:15px;height:15px;transition:transform .16s ease}
.door:hover .go svg{transform:translateX(4px)}

/* ---------- torbanın günü (koyu, iki sütun) ---------- */
.chain{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.step{display:grid;grid-template-columns:62px minmax(0,1.15fr) minmax(0,.85fr);gap:28px;
  padding:30px 0;border-top:1px solid var(--navyLine)}
.step:last-child{border-bottom:1px solid var(--navyLine)}
.step .num{position:relative;width:52px;height:48px}
.step .num svg{position:absolute;inset:0;width:100%;height:100%;color:#1A2E4A}
.step .num span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--honey)}
.step .who{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--onNavyMuted);margin-bottom:8px}
.step h3{margin:0 0 10px;color:#fff}
.step .p{color:var(--onNavySecondary);font-size:15.5px}
.step .ev{background:rgba(242,169,59,.07);border:1px solid rgba(242,169,59,.26);border-radius:14px;
  padding:16px 17px;align-self:start}
.step .ev .k{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--honey);margin-bottom:8px}
.step .ev .k .hexdot{color:var(--honey)}
.step .ev p{font-size:14px;color:var(--onNavySecondary);line-height:1.6}
@media(max-width:900px){
  .step{grid-template-columns:44px minmax(0,1fr);gap:18px;padding:26px 0}
  .step .num{width:40px;height:37px}
  .step .num span{font-size:13.5px}
  .step .ev{grid-column:2}
}


/* Zincir açık zeminde de kullanılır (koyu bölüm üst üste gelmesin diye).
   Varsayılan açık zemin; koyu sürüm .sec-dark altında tanımlı. */
.sec-white .step,.sec-grey .step{border-top-color:var(--line)}
.sec-white .step:last-child,.sec-grey .step:last-child{border-bottom-color:var(--line)}
.sec-white .step .num svg,.sec-grey .step .num svg{color:var(--honeyBg)}
.sec-white .step .num span,.sec-grey .step .num span{color:var(--honeyInk)}
.sec-white .step .who,.sec-grey .step .who{color:var(--textMuted)}
.sec-white .step h3,.sec-grey .step h3{color:var(--ink)}
.sec-white .step .p,.sec-grey .step .p{color:var(--textSecondary)}
.sec-white .step .ev,.sec-grey .step .ev{background:var(--honeyBg);border-color:var(--honeyBorder)}
.sec-white .step .ev .k,.sec-grey .step .ev .k{color:var(--honeyInk)}
.sec-white .step .ev .k .hexdot,.sec-grey .step .ev .k .hexdot{color:var(--honeyDeep)}
/* Sabit kahverengi yazmak karanlık modda koyu üstüne koyu bırakıyordu;
   --honeyInk iki temada da zeminine göre dönüyor. */
.sec-white .step .ev p,.sec-grey .step .ev p{color:var(--honeyInk)}

/* ---------- yapar / yapmaz ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 28px;
  box-shadow:var(--shadow-1)}
.panel h3{margin:0 0 6px;display:flex;align-items:center;gap:11px}
.panel .tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:4px 11px}
.panel.does .tag{background:var(--okBg);color:var(--okText)}
.panel.doesnt .tag{background:var(--honeyBg);color:var(--honeyInk)}
.panel ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:13px}
.panel li{display:flex;gap:11px;color:var(--textSecondary);font-size:15.5px;line-height:1.55}
.panel li .hexdot{margin-top:7px}
.panel.does li .hexdot{color:var(--okFg)}
.panel.doesnt li .hexdot{color:var(--honeyDeep)}
.panel strong{color:var(--ink)}

/* ---------- bugün nerede duruyoruz (tek dürüstlük bölümü) ---------- */
.stand{background:var(--honeyBg);border:1px solid var(--honeyBorder);border-radius:22px;
  padding:clamp(26px,3.4vw,42px);position:relative;overflow:hidden}
.stand .t-eyebrow{color:var(--honeyInk)}
.stand .t-eyebrow .hexdot{color:var(--honeyDeep)}
.stand h2{margin:15px 0 0;color:#2E1A00}
.stand .lead{margin:16px 0 0;color:#5A3310;max-width:62ch}
.stand .rows{margin:28px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.stand .r{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:22px;
  padding:17px 0;border-top:1px solid var(--honeyBorder)}
.stand .r .k{font-family:var(--display);font-weight:700;font-size:16px;color:#2E1A00;
  display:flex;align-items:center;gap:10px}
.stand .r .k .hexdot{color:var(--honeyDeep)}
.stand .r .v{color:#5A3310;font-size:15.5px}
.stand .r .v strong{color:#2E1A00}
@media(max-width:720px){.stand .r{grid-template-columns:1fr;gap:6px;padding:15px 0}}

/* ---------- kapanış bandı ---------- */
.band{position:relative;overflow:hidden;color:var(--onNavy);background-color:var(--deep);
  background-image:linear-gradient(130deg,#12243C 0%,var(--deep) 58%,#0A1626 100%)}
.band .wrap{position:relative;z-index:2;padding:72px 24px;text-align:center}
.band h2{margin:16px auto 0;max-width:20ch}
.band p{margin:18px auto 0;max-width:58ch;color:var(--onNavySecondary)}
.band .btnrow{justify-content:center;margin-top:30px}
@media(max-width:560px){.band .wrap{padding:54px 16px}}

/* ---------- altbilgi ---------- */
.foot{background:var(--navyDeep);color:var(--onNavyMuted);padding:54px 0 30px;border-top:1px solid #16243A}
.foot a{color:var(--onNavySecondary);text-decoration:none}
.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot .brand{color:#fff;margin-bottom:14px}
.foot .blurb{font-size:14.5px;max-width:38ch;line-height:1.6}
.foot h4{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:#fff;
  font-family:var(--body);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;font-size:14.5px}
.foot ul a{display:inline-block;padding:4px 0}  /* dokunma hedefi */
.foot .rule{margin-top:40px;padding-top:22px;border-top:1px solid #16243A;display:flex;
  gap:12px 26px;flex-wrap:wrap;font-size:13px}

/* ---------- karanlık mod: koyu bölümler zaten koyu, açık olanlar çevrilir ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1320; --surface:#111C2E; --ink:#F3F4F6;
    --line:#24405F; --lineStrong:#2F4E72; --divider:#1C3049;
    --textSecondary:#D5DEE9; --textMuted:#B7C4D6;
    --okBg:rgba(143,227,191,.14); --okText:#8FE3BF; --okFg:#8FE3BF;
    --honeyBg:#241A0F; --honeyBorder:#5A3F22; --honeyInk:#F6D3AE; --honeyDeep:#F2A93B;
    --quietBorder:#6B7C94;
  }
  :root:not([data-theme="light"]) body{background:#0B1320}
  :root:not([data-theme="light"]) .sec-white{background:#101A2A}
  :root:not([data-theme="light"]) .door{background:#131F33}
  :root:not([data-theme="light"]) .panel{background:#131F33}
  :root:not([data-theme="light"]) .stand h2{color:#FFE9C9}
  :root:not([data-theme="light"]) .stand .lead,
  :root:not([data-theme="light"]) .stand .r .v{color:#EBD6BC}
  :root:not([data-theme="light"]) .stand .r .k,
  :root:not([data-theme="light"]) .stand .r .v strong{color:#FFE9C9}
  /* Telefon ekranı gerçek bir cihaz gibi açık kalır. Token'ları ekranın
     içinde yeniden tanımlamak, her alt kuralı tek tek çevirmekten güvenli:
     ekranın tamamı açık tema değerleriyle çizilir. */
  :root:not([data-theme="light"]) .screen{
    --ink:#0E1726; --bg:#F3F4F6; --surface:#FFFFFF;
    --line:#E2E5EA; --divider:#EEF0F3;
    --textSecondary:#374151; --textMuted:#4B5563;
    --okBg:#E3F4EC; --okText:#075E43; --okFg:#0B7A57;
    background:#fff; color:#0E1726;
  }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   FOTOĞRAFLI BÖLÜMLER
   Üç gerçek fotoğraf: e-ticaret satıcısı, kargo şubesi, ağdaki sürücü.
   Fotoğraflar src/assets/img/ içinde; ChatGPT ile Kovan üniformalı
   sürümleri üretilince aynı adlarla değiştirilir, bu CSS değişmez.
   ============================================================ */

.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.feat.rev .feat-media{order:2}
.feat-media{position:relative;border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-lift);background:var(--navyDeep)}
.feat-media img{display:block;width:100%;height:clamp(300px,37vw,450px);
  object-fit:cover;object-position:center}
.feat-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,18,34,.55),transparent 42%)}
.feat-tag{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;
  align-items:center;gap:9px;background:rgba(10,18,34,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;
  padding:9px 16px 9px 12px;font-family:var(--display);font-weight:600;
  font-size:.78rem;letter-spacing:.06em}
.feat-tag .hexdot{display:inline-flex;color:var(--honey)}
.feat-body .t-eyebrow{margin-bottom:14px}
.feat-body .t-h2{margin-bottom:16px}
.feat-body .btnrow{margin-top:28px}
.feat-note{margin-top:22px;padding:14px 18px;border-radius:12px;
  background:var(--honeyBg);border:1px solid var(--honeyBorder);
  color:var(--honeyInk);font-size:.92rem;line-height:1.5}

/* tam genişlik fotoğraf bandı — sürücü çağrısı */
.photoband{position:relative;overflow:hidden;background:var(--navyDeep);color:#fff;
  min-height:clamp(400px,48vw,540px);display:flex;align-items:center}
.photoband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* 1024x1536 dikey kare, bant yüksekliğinin ~%27'sini gösteriyor; yüz
     görselin %15–34 bandında. %15 onu hem 1440'ta hem 360'ta kadrajda tutar. */
  object-position:50% 15%}
.photoband::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,18,34,.95) 0%,rgba(10,18,34,.86) 34%,
    rgba(10,18,34,.42) 62%,rgba(10,18,34,.18) 100%)}
.photoband .wrap{position:relative;z-index:2;width:100%}
.photoband-box{max-width:33rem;padding:clamp(48px,7vw,80px) 0}
.photoband-box .t-h2{color:#fff;margin:14px 0 16px}
.photoband-box .t-lead{color:var(--onNavySecondary)}
.photoband-box .t-eyebrow{color:var(--honey)}
.photoband-cap{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);
  color:var(--onNavyMuted);font-size:.93rem;line-height:1.55;max-width:46ch}
.photoband-cap b{color:#fff;font-weight:700}

/* 861–1020px: kutu sabit 33rem olduğu için metnin sağ ucu degradenin açık
   bölgesine, fotoğrafın en parlak yeri olan beyaz kaskın üstüne düşüyordu
   (900px'te ölçülen 2.4:1). Bu aralıkta örtüyü koyulaştırıyoruz. */
@media(min-width:861px) and (max-width:1020px){
  .photoband::after{background:linear-gradient(100deg,rgba(10,18,34,.97) 0%,
    rgba(10,18,34,.94) 48%,rgba(10,18,34,.80) 74%,rgba(10,18,34,.42) 100%)}
}

@media(max-width:860px){
  .feat{grid-template-columns:1fr}
  .feat.rev .feat-media{order:0}
  .feat-media img{height:clamp(240px,58vw,340px)}
  /* flex kalırsa fotoğraf ile metin yan yana düşer; mobilde alt alta. */
  .photoband{display:block;min-height:0}
  .photoband>img{position:relative;width:100%;height:clamp(230px,56vw,320px)}
  .photoband::after{background:linear-gradient(to bottom,rgba(10,18,34,.35) 0%,
    rgba(10,18,34,.72) 46%,var(--navyDeep) 78%)}
  .photoband .wrap{margin-top:-14px}
  .photoband-box{padding:0 0 clamp(40px,9vw,64px)}
}

/* .btn-outline beyaz yazılıdır, yalnızca koyu zeminde okunur.
   Açık zeminli bölümlerdeki ikincil buton bunu kullanır. */
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--quietBorder)}
.btn-quiet:hover{background:#fff;border-color:var(--textMuted)}

/* Dikey çekilmiş kare: kutu alçaldığında yüz kadraj dışında kalıyordu. */
.feat-media.focus-face img{object-position:center 20%}

/* ============================================================
   BLOK STİLLERİ — üreticinin ürettiği blok tipleri.
   İsimler build.mjs içindeki B.<tip> fonksiyonlarıyla birebir eşleşir.
   ============================================================ */

/* ---------- iç sayfa başlığı (koyu, petekli) ----------
   Anasayfanın hero'su gibi koyu açılır: her sayfa aynı ritimle başlar. */
.page-head{position:relative;overflow:hidden;color:var(--onNavy);background-color:var(--deep);
  background-image:radial-gradient(900px 480px at 82% -20%, #1B3454 0%, rgba(27,52,84,0) 64%),
    linear-gradient(170deg,#101C2F 0%,var(--deep) 62%,var(--navyDeep) 100%)}
.page-head .wrap{position:relative;z-index:2;padding:clamp(48px,6vw,86px) 24px clamp(44px,5.4vw,76px)}
.page-head .t-eyebrow{color:var(--honey)}
.page-head h1{margin:20px 0 0;max-width:17ch}
.page-head .dek{margin:20px 0 0;max-width:56ch;color:var(--onNavySecondary)}
.page-head .dek strong{color:#fff;font-weight:700}
.page-head .btnrow{margin-top:30px}
@media(max-width:560px){.page-head .wrap{padding-left:16px;padding-right:16px}}

/* ---------- facts: iki sütunlu anahtar/değer ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:6px}
@media(max-width:760px){.facts{grid-template-columns:1fr;gap:0}}
.facts .r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;
  padding:15px 0;border-top:1px solid var(--line);align-items:baseline}
.facts dt{margin:0;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);
  display:flex;gap:10px;align-items:baseline}
.facts dt .hexdot{flex:0 0 auto;color:var(--honeyDeep);transform:translateY(1px)}
.facts dd{margin:0;font-size:15px;color:var(--textSecondary)}
.sec-dark .facts .r{border-top-color:var(--navyLine)}
.sec-dark .facts dt{color:#fff}
.sec-dark .facts dt .hexdot{color:var(--honey)}
.sec-dark .facts dd{color:var(--onNavySecondary)}

/* ---------- prose: uzun metin ---------- */
.prose{max-width:68ch;font-size:16.5px;color:var(--textSecondary)}
.prose > * + *{margin-top:18px}
.prose h3{font-family:var(--display);font-size:clamp(19px,1.8vw,23px);color:var(--ink);
  margin-top:36px;letter-spacing:-.5px}
.prose strong{color:var(--ink);font-weight:700}
.prose ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* Madde işareti mutlak konumlu: flex kullanılırsa satır içindeki <strong>
   ayrı bir flex öğesi olur, satır sarılmaz ve dar ekranda metin taşar. */
.prose li{position:relative;padding-left:21px;line-height:1.55}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:10px;
  background:var(--honeyDeep);
  clip-path:polygon(5.5% 50%, 28% 6.7%, 72% 6.7%, 94.5% 50%, 72% 93.3%, 28% 93.3%)}
.sec-dark .prose{color:var(--onNavySecondary)}
.sec-dark .prose h3,.sec-dark .prose strong{color:#fff}
.sec-dark .prose li::before{background:var(--honey)}

/* ---------- SSS ---------- */
.faq{max-width:74ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 48px 20px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(16.5px,1.5vw,18.5px);letter-spacing:-.3px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:14px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--honeyDeep);border-bottom:2px solid var(--honeyDeep);
  transform:rotate(45deg);transition:transform .16s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .a{padding:0 0 22px;color:var(--textSecondary);max-width:64ch}
.faq .a > * + *{margin-top:14px}

/* ---------- operasyon paneli (koyu bölüm içindeki temsilî ekran) ----------
   .panel adı yapar/yapmaz kutularında kullanılıyor; bu ayrı bir şey. */
.opgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:880px){.opgrid{grid-template-columns:1fr;gap:30px}}
.oplist{list-style:none;margin:0;padding:0}
.oplist li{display:flex;gap:12px;align-items:flex-start;padding:15px 0;
  border-bottom:1px solid var(--navyLine);color:var(--onNavySecondary);font-size:15.5px;line-height:1.55}
.oplist li b{color:#fff;font-weight:700}
.oplist .hexdot{flex:0 0 auto;margin-top:7px;color:var(--honey)}
.oppanel{background:#0B1320;border:1px solid var(--navyLine);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-2)}
.oppanel .top{display:flex;align-items:center;gap:10px;padding:13px 17px;
  border-bottom:1px solid var(--navyLine);font-size:12.5px;font-weight:700;color:var(--onNavySecondary)}
.oppanel .dot{width:8px;height:8px;border-radius:999px;background:var(--okOnNavy);flex:0 0 auto}
.oppanel .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:13px 17px;
  border-bottom:1px solid var(--navyLine);align-items:center}
.oppanel .row:last-of-type{border-bottom:0}
.oppanel .row b{font-weight:500;color:var(--onNavySecondary);font-size:13.5px;min-width:0}
.oppanel .row .sub{display:block;color:var(--onNavyMuted);font-size:12px;font-weight:400;margin-top:2px}
.oppanel .tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.oppanel .tag.ok{background:rgba(143,227,191,.16);color:var(--okOnNavy)}
.oppanel .tag.wait{background:rgba(242,169,59,.16);color:var(--honey)}
.oppanel .tag.go{background:rgba(6,182,212,.18);color:#7FE3F2}
.oppanel .foot{padding:12px 17px;border-top:1px solid var(--navyLine);
  color:var(--onNavyMuted);font-size:12px;line-height:1.5}

/* ---------- formlar ---------- */
.formwrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;align-items:start}
@media(max-width:940px){.formwrap{grid-template-columns:1fr;gap:30px}}
.kovan-form{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-1)}
.kovan-form fieldset{border:0;margin:0 0 26px;padding:0}
.kovan-form fieldset:last-of-type{margin-bottom:22px}
.kovan-form legend{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.2px;
  padding:0 0 14px;color:var(--ink)}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.field .hint{font-size:13px;color:var(--textMuted);margin:-2px 0 7px;line-height:1.45}
/* Alan çerçevesi kontrolün tek görünürlük işareti; WCAG 1.4.11 3:1 ister.
   --lineStrong karanlık modda 1.93:1 kalıyordu, --quietBorder iki temada da geçer. */
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15.5px;
  padding:12px 13px;min-height:48px;border:1px solid var(--quietBorder);border-radius:11px;
  background:var(--surface);color:var(--ink)}
.field textarea{min-height:124px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--textMuted)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.req{color:var(--honeyInk);font-weight:700}
.check{display:flex;gap:11px;align-items:flex-start;margin:4px 0 20px;font-size:14.5px;
  color:var(--textSecondary);line-height:1.5}
.check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.aside{background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,2.6vw,30px)}
.aside h3{font-family:var(--display);font-size:17px;margin-bottom:16px;letter-spacing:-.3px}
.aside ol{margin:0;padding-left:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;font-size:14.5px;color:var(--textSecondary)}
.aside li{padding-left:4px;line-height:1.5}
.formclosed{background:var(--warnBg);border:1px solid var(--warnBorder);color:var(--warnText);
  border-radius:14px;padding:15px 17px;font-size:14.5px;line-height:1.55;margin:0 0 26px}
/* Yalnız baştaki başlık ayrı satır olur; metnin içindeki <b> satır içi kalır. */
.formclosed b{font-weight:700}
.formclosed > b:first-child{display:block}
.formstatus{margin-top:14px;background:var(--warnBg);border:1px solid var(--warnBorder);
  color:var(--warnText);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.55;outline:none}
.formstatus b{font-weight:700}
.formstatus[hidden]{display:none}
.formstatus:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.devnote{margin-top:30px;background:var(--noteBg);border:1px solid var(--noteBorder);
  color:var(--noteText);border-radius:16px;padding:18px 20px;font-size:14.5px;line-height:1.55}
.devnote b{font-weight:700}

/* ---------- bölüm altı notu ---------- */
.secnote{margin-top:30px;display:flex;gap:14px;align-items:flex-start;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;font-size:15px;color:var(--textSecondary);line-height:1.55}
.secnote b{color:var(--ink);font-weight:700}
.secnote .hexmark{width:22px;height:22px;color:var(--honeyDeep);margin-top:2px;flex:0 0 auto}
.sec-dark .secnote{background:rgba(255,255,255,.05);border-color:var(--navyLine);color:var(--onNavySecondary)}
.sec-dark .secnote b{color:#fff}
.sec-dark .secnote .hexmark{color:var(--accent)}

/* ---------- karanlık mod: blok ekleri ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --warnBg:#2A1D12; --warnBorder:#5A3F22; --warnText:#F6D3AE;
    --noteBg:#1B2434; --noteBorder:#3A4152; --noteText:#F1D9A8;
  }
  :root:not([data-theme="light"]) .kovan-form,
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) .field textarea{background:#131F33}
  :root:not([data-theme="light"]) .aside{background:#0F1A2B;border-color:var(--line)}
  :root:not([data-theme="light"]) .secnote{background:#131F33}
}