/* sefacotur.com — Sürüş Modu (3D dünya) HUD & overlay katmanı.
   3D sahne canvas'ta; buradaki her şey onun üstündeki 2B arayüz.
   Tipografi ve renk paleti klasik siteyle aynı ailede tutuldu. */

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('/assets/fonts/fraunces-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/hanken-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/hanken-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;
}

:root{
  --paper:#F4F0E8;
  --ink:#1A1712;
  --ink-soft:#6B6355;
  --accent:#C6472B;
  --accent-soft:#E08A5E;
  --glass:rgba(20,17,13,0.62);
  --glass-line:rgba(255,255,255,0.14);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Hanken Grotesk', ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;background:#0c0b0a;}
body{font-family:var(--font-body);color:#fff;-webkit-font-smoothing:antialiased;overscroll-behavior:none;}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;}

.hidden{display:none !important;}

/* ---------- overlay (loader / intro) ---------- */
.overlay{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 50% 40%, #241f18 0%, #100e0b 70%);
}

.loader-inner{text-align:center;max-width:340px;width:100%;}
.loader-mark{font-family:var(--font-body);font-weight:600;letter-spacing:.32em;font-size:.8rem;color:#cfc6b6;margin-bottom:22px;}
.loader-bar{height:2px;background:rgba(255,255,255,0.12);border-radius:2px;overflow:hidden;}
.loader-bar span{display:block;height:100%;width:0%;background:var(--accent);transition:width .3s ease;}
.loader-hint{margin-top:16px;font-size:.82rem;color:#8c8375;letter-spacing:.02em;}
.loader-hint a{color:var(--accent-soft);}

/* Kurtarma ekranı: WebGL yok / bağlam kaybı / kurulum hatası (main.js üretir).
   Her şeyin üstünde durmalı — arkasındaki dünya zaten çalışmıyor. */
.world-fallback{z-index:60;}

/* Odak halkası: modal odak yönetimi eklendi, klavye kullanıcısı nerede
   olduğunu GÖREBİLMELİ. Fare kullanıcısını rahatsız etmesin diye focus-visible. */
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:4px;}

/* ---------- intro kart ---------- */
.intro-card{
  max-width:440px;width:100%;text-align:left;
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:18px;
  padding:38px 36px 32px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.intro-eyebrow{font-weight:600;letter-spacing:.28em;font-size:.7rem;color:var(--accent-soft);margin-bottom:16px;}
.intro-title{font-family:var(--font-display);font-weight:300;font-size:clamp(2.1rem,5vw,3rem);line-height:1.02;letter-spacing:-0.015em;margin-bottom:18px;}
.intro-lede{font-size:1.02rem;line-height:1.55;color:#d9d2c5;margin-bottom:26px;}
.intro-lede b{color:#fff;font-weight:600;}
.intro-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.intro-note{margin-top:20px;font-size:.82rem;color:#8c8375;}

.btn-primary{
  font-family:var(--font-body);font-weight:600;font-size:.98rem;
  background:var(--accent);color:#fff;border:none;
  padding:13px 26px;border-radius:100px;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 24px rgba(198,71,43,0.35);
}
.btn-primary:hover{transform:translateY(-2px);background:#d4502f;box-shadow:0 12px 30px rgba(198,71,43,0.45);}
.btn-ghost{
  font-family:var(--font-body);font-weight:500;font-size:.98rem;
  background:transparent;color:#e7e0d3;border:1px solid rgba(255,255,255,0.22);
  padding:13px 24px;border-radius:100px;cursor:pointer;text-decoration:none;display:inline-block;
  transition:border-color .15s ease,color .15s ease;
}
.btn-ghost:hover{border-color:#fff;color:#fff;}

/* ---------- üst HUD ---------- */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;gap:12px;
  pointer-events:none;
}
.hud > *{pointer-events:auto;}
.hud-mark{
  font-family:var(--font-body);font-weight:600;letter-spacing:.22em;font-size:.82rem;
  color:#fff;text-decoration:none;text-shadow:0 2px 12px rgba(0,0,0,0.6);
  padding:8px 4px;
}
.hud-right{display:flex;gap:8px;align-items:center;}
.hud-btn{
  font-family:var(--font-body);font-weight:500;font-size:.8rem;
  background:var(--glass);color:#e7e0d3;border:1px solid var(--glass-line);
  padding:8px 14px;border-radius:100px;cursor:pointer;text-decoration:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.hud-btn:hover{color:#fff;border-color:rgba(255,255,255,0.4);}
.hud-btn--accent{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
.hud-btn--accent:hover{background:#d4502f;color:#fff;}

/* ---------- alt kontrol ipucu ---------- */
.controls-hint{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:8px;
  background:var(--glass);border:1px solid var(--glass-line);
  padding:10px 18px;border-radius:100px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fadeUp .6s ease .4s both;
}
.key{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 6px;
  font-family:var(--font-body);font-weight:600;font-size:.75rem;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);
  border-radius:6px;color:#fff;
}
.hint-text{font-size:.82rem;color:#cfc6b6;margin-left:6px;}

/* ---------- ilk kullanım rehberi ---------- */
.guide-card{
  position:fixed;top:86px;left:22px;z-index:21;
  width:min(340px, calc(100vw - 44px));
  background:linear-gradient(155deg, rgba(22,18,14,.78), rgba(12,11,18,.68));
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:guideIn .45s ease both;
}
.guide-close{
  position:absolute;right:10px;top:10px;
  width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#efe8da;cursor:pointer;
  font-size:1rem;line-height:1;
}
.guide-close:hover{background:rgba(255,255,255,.18);color:#fff;}
.guide-eyebrow{
  color:var(--accent-soft);font-weight:800;letter-spacing:.22em;
  font-size:.66rem;margin-bottom:10px;
}
.guide-card ol{list-style:none;display:grid;gap:9px;counter-reset:route;}
.guide-card li{
  counter-increment:route;position:relative;padding-left:32px;
  color:#ddd5c8;font-size:.86rem;line-height:1.38;
}
.guide-card li::before{
  content:counter(route);
  position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;background:rgba(198,71,43,.88);font-weight:800;font-size:.72rem;
}
.guide-card b{color:#fff;font-weight:800;}
.guide-card span{
  display:inline-grid;place-items:center;min-width:20px;height:20px;
  border-radius:6px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:.72rem;
}

/* ---------- tur ilerleme göstergesi ---------- */
.route-dock{
  position:fixed;right:22px;bottom:86px;z-index:21;
  width:178px;padding:11px;
  background:rgba(16,12,20,.62);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  box-shadow:0 20px 54px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.route-dock p{
  color:#d7cfc2;font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:7px;
}
.route-step{
  display:flex;align-items:center;gap:8px;
  color:#bdb4a7;font-size:.78rem;font-weight:700;
  padding:7px 8px;border-radius:10px;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.route-step span{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:.7rem;
}
.route-step.active{
  color:#fff;background:rgba(198,71,43,.22);border-color:rgba(255,180,94,.35);
}
.route-step.active span{background:var(--accent);}
.route-step.done span{
  background:#3f7d6a;
  box-shadow:0 0 16px rgba(94,234,212,.35);
}
.route-step.done span::after{content:"✓";font-size:.72rem;}
.route-step.done span{font-size:0;}
.route-tip{
  margin-top:8px;padding:8px 9px;border-radius:10px;
  color:#fff4e2;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:.72rem;line-height:1.25;font-weight:700;
}

/* ---------- sürüş hedef göstergesi ---------- */
.drive-assist{
  position:fixed;top:76px;right:22px;z-index:21;
  min-width:0;width:min(278px, calc(100vw - 44px));
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:9px 14px;
  background:linear-gradient(155deg, rgba(16,12,20,.72), rgba(20,16,12,.62));
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  box-shadow:0 18px 46px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  pointer-events:none;
}
.drive-arrow{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  color:#fff;background:var(--accent);
  box-shadow:0 0 20px rgba(198,71,43,.55);
  font-size:.78rem;font-weight:900;
  transform:rotate(var(--turn, 0deg));
  transition:transform .16s ease;
}
.drive-assist[data-target="cv"] .drive-arrow{background:#277eb4;box-shadow:0 0 20px rgba(124,198,255,.55);}
.drive-assist[data-target="social"] .drive-arrow{background:#259c8b;box-shadow:0 0 20px rgba(94,234,212,.5);}
.drive-assist[data-target="bridge"] .drive-arrow{background:#7b61b8;box-shadow:0 0 20px rgba(201,184,255,.48);}
.drive-assist span:last-child{display:grid;gap:2px;min-width:0;}
.drive-assist b{
  color:#fff;font-size:.8rem;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.drive-assist small{color:#cfc6b6;font-size:.68rem;line-height:1;}

/* ---------- yakınlık göstergesi ---------- */
.prompt{
  position:fixed;bottom:94px;left:50%;transform:translateX(-50%) scale(.9);z-index:22;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg, #c6472b, #e08a5e);color:#fff;
  padding:12px 22px;border-radius:100px;
  box-shadow:0 14px 36px rgba(198,71,43,0.42), 0 0 0 1px rgba(255,255,255,.16) inset;
  opacity:0;transition:opacity .2s ease, transform .2s ease;
}
.prompt.show{opacity:1;transform:translateX(-50%) scale(1);}
.prompt-key{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;font-weight:700;font-size:.8rem;
  background:rgba(255,255,255,0.25);border-radius:6px;
}
.prompt-text{font-weight:800;font-size:.92rem;letter-spacing:.01em;}

/* ---------- harita ---------- */
.map-overlay{
  position:fixed;inset:0;z-index:28;display:grid;place-items:center;
  background:rgba(10,8,16,0.34);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:1;transition:opacity .18s ease;
}
.map-overlay.hidden{opacity:0;pointer-events:none;}
.map-card{
  /* Sahne KARE olmalı: SVG dünya koordinatlarını 1:1 kullanıyor, kart oranı
     bozulursa ada elips, yollar yamuk çiziliyor. stageH = cardH-94, stageW =
     cardW-36 → kare için cardH = cardW+58 (oran 0.921). */
  width:min(660px, calc(100vw - 32px), calc(100vh - 120px));aspect-ratio:.921;
  background:linear-gradient(155deg, rgba(18,14,27,0.9), rgba(22,18,14,0.84));
  border:1px solid rgba(255,255,255,0.18);
  border-radius:18px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,0.55);
}
.map-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#f6eedf;font-weight:800;letter-spacing:.22em;font-size:.76rem;}
.map-key{letter-spacing:0;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);border-radius:7px;padding:4px 8px;}
.map-stage{
  /* Zemin artık CSS gradyanı değil: ada, kumsal, orman, göl ve yollar
     map.js'te SVG olarak dünya verisinden çiziliyor. */
  position:relative;width:100%;height:calc(100% - 58px);border-radius:14px;overflow:hidden;
  background:#122839;
}

.map-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.map-label{
  position:absolute;z-index:2;color:#f5ead9;background:rgba(18,14,27,.48);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:4px 8px;font-size:.62rem;font-weight:800;letter-spacing:.08em;
}
.map-pin{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  pointer-events:none;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:.68rem;font-weight:800;color:#fff;background:rgba(18,14,27,.76);
  border:1px solid currentColor;border-radius:999px;padding:5px 8px;text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.map-pin::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;}
.map-pin{z-index:2;}
.map-car{
  position:absolute;z-index:4;left:var(--x);top:var(--y);width:14px;height:18px;transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  border-radius:5px 5px 3px 3px;background:#f04e38;border:2px solid #fff;box-shadow:0 0 16px rgba(255,255,255,.8);
}
.map-legend{
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:30px;padding-top:10px;color:#d8d0c4;font-size:.72rem;font-weight:700;
}
.map-legend span{display:inline-flex;align-items:center;gap:6px;}
.lg{display:inline-block;width:18px;height:4px;border-radius:999px;box-shadow:0 0 10px currentColor;}
.lg-road{color:#ffd7a3;background:#ffd7a3;}
.lg-branch{color:#ffb45e;background:#ffb45e;}
.lg-link{color:#a79c8b;background:#a79c8b;}

/* ---------- proje paneli ---------- */
.project-panel{
  position:fixed;top:50%;right:32px;transform:translateY(-50%) translateX(20px);z-index:30;
  width:min(400px, calc(100vw - 40px));
  background:var(--glass);border:1px solid var(--glass-line);
  border-radius:18px;padding:34px 32px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.project-panel.show{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto;}
.pp-close{
  position:absolute;top:16px;right:18px;
  background:none;border:none;color:#b8b0a2;font-size:1.1rem;cursor:pointer;
  width:30px;height:30px;border-radius:50%;transition:background .15s ease,color .15s ease;
}
.pp-close:hover{background:rgba(255,255,255,0.1);color:#fff;}
.pp-eyebrow{font-weight:600;letter-spacing:.24em;font-size:.68rem;color:var(--accent-soft);margin-bottom:12px;}
.pp-title{font-family:var(--font-display);font-weight:300;font-size:2rem;line-height:1.05;letter-spacing:-0.01em;margin-bottom:14px;}
.pp-tagline{font-size:.98rem;line-height:1.55;color:#d9d2c5;margin-bottom:20px;}
.pp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.pp-tags span{
  font-size:.72rem;color:#cfc6b6;border:1px solid rgba(255,255,255,0.18);
  padding:4px 10px;border-radius:100px;
}
.pp-link{
  display:inline-block;font-weight:600;font-size:.95rem;color:#fff;
  background:var(--accent);padding:11px 22px;border-radius:100px;text-decoration:none;
  transition:transform .15s ease,background .15s ease;
}
.pp-link:hover{transform:translateY(-2px);background:#d4502f;}

/* ---------- sayfa modali (oyundan çıkmadan durak sayfası) ---------- */
.page-modal{
  position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  background:rgba(12,9,20,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.page-modal.show{opacity:1;pointer-events:auto;}
.pm-bar{
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  background:var(--glass);border-bottom:1px solid var(--glass-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.pm-back{
  font-family:inherit;font-weight:700;font-size:.9rem;color:#fff;
  background:var(--accent);border:none;border-radius:100px;
  padding:10px 18px;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,background .15s ease;
}
.pm-back:hover{transform:translateY(-1px);background:#d4502f;}
.pm-title{
  flex:1;text-align:center;color:#efe8da;font-weight:600;font-size:.95rem;
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pm-newtab{
  font-size:.8rem;color:#cfc6b6;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,0.18);border-radius:100px;padding:8px 14px;
  transition:color .15s ease,border-color .15s ease;
}
.pm-newtab:hover{color:#fff;border-color:rgba(255,255,255,0.4);}
.pm-frame{
  flex:1;width:min(1080px,calc(100vw - 32px));margin:14px auto 16px;
  border:1px solid var(--glass-line);border-radius:16px;
  background:#f4f0e8;box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform:translateY(14px);transition:transform .3s ease;
}
.page-modal.show .pm-frame{transform:translateY(0);}
@media (max-width:640px){
  .pm-frame{width:calc(100vw - 16px);margin:8px auto 10px;border-radius:12px;}
  .pm-title{display:none;}
}

/* ---------- mobil dokunmatik ---------- */
.touch{position:fixed;inset:auto 0 0 0;z-index:24;display:flex;align-items:flex-end;justify-content:space-between;padding:0 20px 26px;pointer-events:none;}
.touch-pad{display:flex;gap:14px;pointer-events:auto;}
.touch-right{flex-direction:column-reverse;}
/* Eylem tuşları (KOŞ · ZIPLA · E) yön pedlerinin arasında, başparmak menzilinde.
   İki sıra: pill'ler üstte yan yana, E altta — dikey dizince dock çok yükseliyor
   ve hedef göstergesinin üstüne biniyordu. */
.touch-actions{flex-direction:column;align-items:center;gap:10px;}
.touch-row{display:flex;gap:10px;}
.touch-btn{
  width:62px;height:62px;border-radius:50%;
  background:var(--glass);border:1px solid var(--glass-line);
  color:#fff;font-size:1.3rem;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
.touch-btn:active{background:var(--accent);}
.touch-btn--sm{
  width:auto;height:38px;padding:0 14px;border-radius:100px;
  font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.1em;
}
.touch-btn--action{
  background:rgba(198,71,43,.85);border-color:rgba(255,180,94,.5);
  font-weight:800;font-size:1.15rem;letter-spacing:.04em;
}

@keyframes fadeUp{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}
@keyframes guideIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:640px){
  .project-panel{right:50%;top:auto;bottom:20px;transform:translateX(50%) translateY(20px);width:calc(100vw - 32px);}
  .project-panel.show{transform:translateX(50%) translateY(0);}
  /* İpucu mobilde TAMAMEN gizleniyordu: telefonla gelen ziyaretçi E'nin ne işe
     yaradığını hiç öğrenemiyordu. Artık kısaltılıp HUD'ın altına alınıyor
     (WASD rozetleri mobilde anlamsız, onlar gizli). */
  .controls-hint{
    left:12px;right:12px;top:98px;bottom:auto;
    /* fadeUp animasyonu `both` dolgusuyla translateX(-50%) bırakıyor:
       animasyonu kapatmadan konum düzeltilemiyor (kutu ekranın dışına kayıyordu). */
    transform:none;animation:none;
    justify-content:center;text-align:center;padding:7px 12px;
  }
  .controls-hint .key{display:none;}
  .hint-text{font-size:.7rem;margin-left:0;line-height:1.3;}
  .guide-card{top:78px;left:14px;width:calc(100vw - 28px);font-size:.9rem;}
  /* Dokunmatik dock ~136px yer kaplıyor; hedef göstergesi onun üstünde kalsın. */
  .drive-assist{top:auto;bottom:150px;min-width:0;width:calc(100vw - 32px);}
  /* Tur göstergesi de gizleniyordu; yerine numara rozetlerinden oluşan ince bir
     şerit: ilerleme görünür kalır, ekranı yemez. */
  .route-dock{
    right:12px;top:56px;bottom:auto;width:auto;padding:6px 8px;
    display:flex;align-items:center;gap:6px;
  }
  .route-dock p, .route-tip{display:none;}
  .route-step{padding:0;font-size:0;border:0;background:none;}
  .route-step span{width:24px;height:24px;font-size:.7rem;}
  .map-card{padding:12px;}
  .map-stage{height:calc(100% - 70px);}
  .intro-card{padding:30px 24px 26px;}
  .hud{padding:14px 16px;}
  .hud-btn{font-size:.74rem;padding:7px 11px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .btn-primary:hover,.pp-link:hover,.btn-ghost:hover{transform:none;}
}

/* ---------- tam ekran proje destesi ----------
   Projeler portföyün asıl içeriği: dünyadaki vitrin ekranı yerine EKRANA TAM
   YAPIŞAN bir deste. Sürüş modundan çıkmaz, ESC ile oyuna döner. */
.deck{
  position:fixed;inset:0;z-index:34;
  display:flex;flex-direction:column;
  opacity:0;transition:opacity .26s ease;
  --accent-project:var(--accent-soft);
}
.deck.show{opacity:1;}
/* Deste açıkken sürüş HUD'ı tamamen çekilir: projeler ekranı paylaşmaz. */
body.deck-open .hud,
body.deck-open .route-dock,
body.deck-open .controls-hint,
body.deck-open .drive-assist,
body.deck-open .prompt,
body.deck-open .guide-card,
body.deck-open .touch{display:none !important;}
.deck-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 82% 12%, color-mix(in srgb, var(--accent-project) 26%, transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(198,71,43,0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,8,12,0.96) 0%, rgba(12,10,16,0.985) 100%);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}

.deck-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(20px,4vw,54px) 6px;
}
.deck-eyebrow{
  font-weight:600;letter-spacing:.26em;font-size:.72rem;
  color:var(--accent-project);text-transform:uppercase;
}
.deck-close{
  font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.06em;
  background:rgba(255,255,255,0.06);color:#efe7d9;cursor:pointer;
  border:1px solid rgba(255,255,255,0.18);border-radius:100px;padding:9px 18px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.deck-close:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,0.12);}

.deck-stage{
  flex:1;min-height:0;
  display:flex;align-items:center;gap:clamp(8px,2vw,26px);
  padding:0 clamp(10px,2.4vw,34px);
}
.deck-nav{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.16);
  color:#efe7d9;font-size:1.9rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.deck-nav:hover{transform:scale(1.06);border-color:var(--accent-project);background:rgba(255,255,255,0.1);}

.deck-card{
  flex:1;min-width:0;height:100%;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;
  padding:clamp(14px,3vh,34px) clamp(14px,3vw,40px);
}
.deck-card.slide-r{animation:deckInR .34s cubic-bezier(.2,.7,.3,1);}
.deck-card.slide-l{animation:deckInL .34s cubic-bezier(.2,.7,.3,1);}
@keyframes deckInR{from{opacity:0;transform:translateX(46px);}to{opacity:1;transform:none;}}
@keyframes deckInL{from{opacity:0;transform:translateX(-46px);}to{opacity:1;transform:none;}}

.deck-main{min-width:0;max-width:56ch;}
.deck-kind{
  font-weight:600;letter-spacing:.2em;font-size:.72rem;text-transform:uppercase;
  color:#a79c8b;margin-bottom:14px;
}
.deck-title{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:.98;letter-spacing:-0.02em;
  color:#fff;margin-bottom:14px;
}
.deck-sub{
  font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.45;color:#ded6c8;
  margin-bottom:clamp(14px,2.4vh,26px);max-width:44ch;
}
.deck-points{list-style:none;display:grid;gap:10px;margin-bottom:clamp(14px,2.4vh,26px);}
.deck-points li{
  position:relative;padding-left:22px;font-size:.98rem;line-height:1.5;color:#c3bbad;
}
.deck-points li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:2px;background:var(--accent-project);
  box-shadow:0 0 14px var(--accent-project);
}
.deck-stack{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(16px,2.6vh,28px);}
.deck-stack span{
  font-size:.76rem;font-weight:600;letter-spacing:.06em;color:#e7dfd1;
  border:1px solid rgba(255,255,255,0.16);border-radius:100px;padding:6px 13px;
  background:rgba(255,255,255,0.04);
}
.deck-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.deck-cta{
  font-family:var(--font-body);font-weight:600;font-size:1rem;cursor:pointer;
  background:var(--accent-project);color:#171208;border:none;
  padding:14px 28px;border-radius:100px;
  box-shadow:0 10px 30px color-mix(in srgb, var(--accent-project) 40%, transparent);
  transition:transform .15s ease,box-shadow .15s ease;
}
.deck-cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px color-mix(in srgb, var(--accent-project) 52%, transparent);}
.deck-hint{font-size:.82rem;color:#8c8375;}
.deck-hint b{
  color:#efe7d9;font-weight:600;
  border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:2px 7px;margin:0 1px;
}

.deck-side{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  font-family:var(--font-display);line-height:.9;
}
.deck-index{
  font-size:clamp(4rem,13vw,11rem);font-weight:300;
  color:var(--accent-project);opacity:.28;
}
.deck-total{font-size:clamp(1rem,2vw,1.6rem);color:#6b6355;}

.deck-rail{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:12px clamp(20px,4vw,54px) 22px;
}
.deck-rail::-webkit-scrollbar{display:none;}
.deck-chip{
  display:flex;align-items:center;gap:9px;white-space:nowrap;cursor:pointer;
  font-family:var(--font-body);font-size:.82rem;font-weight:500;color:#9d9486;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;padding:9px 16px;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.deck-chip i{width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.55;}
.deck-chip:hover{color:#efe7d9;border-color:rgba(255,255,255,0.26);}
.deck-chip.active{
  color:#fff;background:rgba(255,255,255,0.09);
  border-color:color-mix(in srgb, var(--c) 65%, transparent);
}
.deck-chip.active i{opacity:1;box-shadow:0 0 12px var(--c);}

@media (max-width:900px){
  .deck-card{grid-template-columns:minmax(0,1fr);gap:12px;align-content:center;}
  .deck-side{flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start;}
  .deck-index{font-size:3.2rem;}
  .deck-nav{width:44px;height:44px;font-size:1.5rem;}
  .deck-points li:nth-child(n+3){display:none;}
}
@media (max-width:640px){
  .deck-nav{display:none;}
  .deck-hint{display:none;}
  .deck-stage{padding:0 8px;}
}
@media (prefers-reduced-motion:reduce){
  .deck-card.slide-r,.deck-card.slide-l{animation:none;}
}

/* Deste sağ sütunu: numara + tür + teknoloji şeridi.
   Sadece dev bir rakam bırakınca kompozisyon sağa doğru boşalıyordu. */
.deck-side{
  position:relative;padding:clamp(16px,3vh,30px) clamp(18px,2.4vw,34px);
  border:1px solid rgba(255,255,255,0.1);border-radius:22px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent-project) 12%, transparent), rgba(255,255,255,0.02));
  gap:2px;
}
.deck-side-kind{
  font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-project);margin-bottom:6px;
}
.deck-side-tags{
  font-family:var(--font-body);font-size:.76rem;font-weight:500;color:#9d9486;
  margin-top:12px;max-width:20ch;text-align:right;line-height:1.5;
}
@media (max-width:900px){
  .deck-side{border:none;background:none;padding:0;}
  .deck-side-kind,.deck-side-tags{display:none;}
}

/* Deck: canlı (flagship) proje türü vurgusu */
.deck-kind-live{color:#39d98a;font-weight:700;}

/* ---- HUD dar ekranda taşmasın ----
   6 düğme 375px'e tek satırda sığmıyordu; "Sıfırla" ve "Klasik Görünüm"
   ekranın dışında kalıyor, yani mobil kullanıcının çıkış yolu erişilemiyordu.
   Sarma + küçültme ile hepsi görünür kalıyor. */
@media (max-width:760px){
  .hud{align-items:flex-start;gap:8px;}
  .hud-right{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:72vw;}
  .hud-btn{font-size:.72rem;padding:6px 10px;}
}
@media (max-width:420px){
  .hud-mark{font-size:.82rem;}
  .hud-right{max-width:76vw;gap:5px;}
  .hud-btn{font-size:.68rem;padding:5px 9px;}
}

/* ---- Mobil üst katman sırası ----
   HUD iki satıra sardıktan sonra alt kenarı ~87px'e iniyor; rota şeridi 56px'te
   duruyordu ve düğmelerin üstüne biniyordu. Üst üste binmesin diye üç katman
   sabit sırayla diziliyor: HUD → rota şeridi → tuş ipucu. */
@media (max-width:760px){
  .route-dock{top:96px !important;bottom:auto !important;}
  .controls-hint{top:144px !important;bottom:auto !important;}
}

/* Klasik siteyle aynı marka kilidi: damga rozeti + isim. */
.hud-mark{display:inline-flex;align-items:center;gap:9px;}
.hud-badge{
  width:26px;height:26px;border-radius:5px;flex:0 0 auto;
  border:1.5px solid var(--accent);color:var(--accent);
  background:rgba(198,71,43,.12);
  font-family:var(--font-body);font-weight:800;font-size:.7rem;letter-spacing:-0.02em;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
@media (max-width:420px){ .hud-badge{width:23px;height:23px;font-size:.66rem;} }