/* ============================================================
   ÖMÜR ROTASI — Gece Yolu Tasarım Sistemi
   Palet: Gece #0B1120 · Yüzey #111B30 · Far Işığı #F5C55A
          Şafak #7FD1C0 · Kum #E9EDF5 · Sis #8A94A8 · Kor #E0876B
   Tipografi: Fraunces (display) · Manrope (gövde/veri)
   ============================================================ */

:root{
  --night:#0B1120;
  --surface:#111B30;
  --surface-2:#182642;
  --line:#25355A;
  --amber:#F5C55A;
  --amber-deep:#D9A63C;
  --dawn:#7FD1C0;
  --ember:#E0876B;
  --sand:#E9EDF5;
  --mist:#8A94A8;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 12px 40px rgba(3,7,18,.55);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--night);
  color:var(--sand);
  min-height:100dvh;
  overflow-x:hidden;
  line-height:1.55;
}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Ekran yönetimi ---------- */
.screen{display:none;min-height:100dvh;position:relative}
.screen.active{display:block}

/* ---------- Tipografi ---------- */
.display{
  font-family:var(--font-display);
  font-weight:700;font-size:clamp(2.1rem,6vw,3.4rem);
  line-height:1.08;letter-spacing:-.01em;
}
.display-sm{
  font-family:var(--font-display);
  font-weight:600;font-size:clamp(1.4rem,4vw,2rem);line-height:1.15;
}
.accent{color:var(--amber)}
.eyebrow{
  font-size:.72rem;font-weight:800;letter-spacing:.22em;
  color:var(--amber);text-transform:uppercase;margin-bottom:.6rem;
}
.lede{color:var(--mist);font-size:clamp(1rem,2.5vw,1.15rem);max-width:34ch;margin:1rem auto 2rem}
.hint{color:var(--mist);font-size:.92rem;margin:.4rem 0 1.4rem}
.hint-sm{color:var(--mist);font-size:.8rem;margin:.8rem 0 .4rem}
.fineprint{color:var(--mist);font-size:.72rem;margin-top:2.2rem;max-width:40ch;opacity:.75}
.uncertainty{color:var(--mist);font-size:.75rem;margin-top:.5rem}

/* ---------- Butonlar ---------- */
.btn{
  border:none;border-radius:999px;font-weight:700;font-size:.95rem;
  padding:.8rem 1.6rem;transition:transform .15s ease,box-shadow .15s ease,background .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg,var(--amber),var(--amber-deep));
  color:#231a05;box-shadow:0 6px 24px rgba(245,197,90,.28);
}
.btn-primary:hover{box-shadow:0 8px 30px rgba(245,197,90,.4)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:transparent;color:var(--sand);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-danger{background:transparent;color:var(--ember);border:1px solid var(--ember)}
.btn-lg{padding:1rem 2.2rem;font-size:1.05rem}
.btn-sm{padding:.45rem 1rem;font-size:.82rem}
.btn-block{width:100%}
.btn-icon{
  background:rgba(17,27,48,.85);border:1px solid var(--line);color:var(--sand);
  width:42px;height:42px;border-radius:50%;font-size:1.05rem;
  display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);
}
.btn-icon:hover{border-color:var(--amber)}

/* ---------- Karşılama ---------- */
#screen-landing{display:none;place-items:center;text-align:center;padding:2rem}
#screen-landing.active{display:grid}
.landing-content{position:relative;z-index:2;max-width:560px}
.landing-content .btn{margin:.4rem}
.landing-sky{position:absolute;inset:0;overflow:hidden;z-index:0}
.stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(233,237,245,.9),transparent),
    radial-gradient(1px 1px at 28% 42%,rgba(233,237,245,.7),transparent),
    radial-gradient(1.8px 1.8px at 66% 12%,rgba(245,197,90,.8),transparent),
    radial-gradient(1px 1px at 82% 32%,rgba(233,237,245,.6),transparent),
    radial-gradient(1.3px 1.3px at 48% 22%,rgba(233,237,245,.8),transparent),
    radial-gradient(1px 1px at 92% 55%,rgba(127,209,192,.7),transparent),
    radial-gradient(1.2px 1.2px at 8% 62%,rgba(233,237,245,.55),transparent);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.road-line{
  position:absolute;left:50%;bottom:-6%;width:2px;height:52%;
  background:linear-gradient(to top,var(--amber),transparent);
  transform:translateX(-50%) perspective(300px) rotateX(38deg);
  opacity:.5;
}
.road-line::before,.road-line::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(to top,rgba(245,197,90,.35),transparent);
}
.road-line::before{left:-34px;transform:rotate(4deg)}
.road-line::after{right:-34px;transform:rotate(-4deg)}

/* ---------- Anket ---------- */
#screen-survey{max-width:640px;margin:0 auto;padding:1.2rem;display:none;flex-direction:column}
#screen-survey.active{display:flex}
.survey-head{display:flex;align-items:center;gap:.9rem;padding:.6rem 0 1.4rem}
.progress-track{flex:1;height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--dawn));border-radius:99px;transition:width .35s ease}
.progress-label{font-size:.78rem;color:var(--mist);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.survey-body{flex:1;display:flex;flex-direction:column;padding-bottom:2rem}
.q-group-tag{font-size:.7rem;letter-spacing:.2em;color:var(--dawn);font-weight:800;text-transform:uppercase;margin-bottom:.5rem}
.q-title{font-family:var(--font-display);font-size:clamp(1.3rem,4vw,1.7rem);font-weight:600;margin-bottom:.4rem}
.q-help{color:var(--mist);font-size:.88rem;margin-bottom:1.4rem}
.q-options{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.2rem}
.q-opt{
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--sand);padding:.95rem 1.1rem;text-align:left;font-size:.95rem;font-weight:600;
  transition:border-color .15s,background .15s;
}
.q-opt:hover{border-color:var(--amber)}
.q-opt.selected{border-color:var(--amber);background:rgba(245,197,90,.1)}
.q-opt.multi.selected::after{content:" ✓";color:var(--amber)}
.q-input{
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--sand);padding:.95rem 1.1rem;font-size:1.05rem;width:100%;margin-bottom:1.2rem;
}
.q-input:focus{border-color:var(--amber);outline:none}
.q-row{display:flex;gap:.7rem}
.q-row .q-input{flex:1}
.q-footer{margin-top:auto;display:flex;flex-direction:column;gap:.6rem;padding-top:1rem}
.btn-skip{background:none;border:none;color:var(--mist);font-size:.85rem;text-decoration:underline;padding:.5rem}
.btn-skip:hover{color:var(--sand)}
.skip-note{
  background:rgba(127,209,192,.08);border:1px solid rgba(127,209,192,.3);
  border-radius:var(--radius-sm);padding:.7rem .9rem;font-size:.8rem;color:var(--dawn);margin-bottom:1rem;
}

/* ---------- Rota seçimi ---------- */
#screen-route{display:none;place-items:center;padding:1.5rem}
#screen-route.active{display:grid}
.route-select-panel{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow)}
.field{position:relative;margin-bottom:1rem}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--mist);margin-bottom:.4rem;letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;background:var(--night);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--sand);padding:.9rem 1rem;font-size:1rem;
}
.field textarea{resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);outline:none}
.suggest{
  position:absolute;top:100%;left:0;right:0;z-index:30;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:4px;overflow:hidden;display:none;
}
.suggest.open{display:block}
.suggest button{
  display:block;width:100%;text-align:left;background:none;border:none;color:var(--sand);
  padding:.7rem 1rem;font-size:.92rem;
}
.suggest button:hover{background:rgba(245,197,90,.12)}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.chip{
  background:var(--surface-2);border:1px solid var(--line);color:var(--sand);
  border-radius:999px;padding:.45rem .95rem;font-size:.8rem;font-weight:600;
}
.chip:hover{border-color:var(--dawn);color:var(--dawn)}
.loading-note{color:var(--amber);font-size:.85rem;margin-top:.8rem;text-align:center;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- Harita ---------- */
.map-full{position:absolute;inset:0;z-index:1;background:var(--night)}
.leaflet-container{background:var(--night);font-family:var(--font-body)}
.leaflet-control-attribution{background:rgba(11,17,32,.7)!important;color:var(--mist)!important;font-size:.6rem!important}
.leaflet-control-attribution a{color:var(--dawn)!important}

/* Konum imleci */
.me-marker{position:relative;width:22px;height:22px}
.me-marker .core{
  position:absolute;inset:4px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 12px rgba(245,197,90,.9);
}
.me-marker .ring{
  position:absolute;inset:0;border-radius:50%;border:2px solid var(--amber);
  animation:ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:1}80%,100%{transform:scale(2.2);opacity:0}}

/* Durak pinleri */
.wp-pin{
  width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  border:2px solid var(--night);display:flex;align-items:center;justify-content:center;
  font-size:.72rem;box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.wp-pin span{transform:rotate(45deg)}
.wp-pin.done{background:var(--amber)}
.wp-pin.near{background:var(--ember);animation:pinPulse 1.6s ease-in-out infinite}
.wp-pin.far{background:#3A4A70}
.wp-pin.past{background:var(--amber)}
.wp-pin.period{background:var(--dawn)}
.wp-pin.future{background:#3A4A70}
.wp-pin.hard{background:var(--ember)}
.wp-pin.neutral{background:#8A94A8}
.wp-pin.small{transform:rotate(-45deg) scale(.86);opacity:.9}
.wp-pin.major{transform:rotate(-45deg) scale(1.18);box-shadow:0 4px 16px rgba(245,197,90,.28),0 3px 10px rgba(0,0,0,.5)}
@keyframes pinPulse{0%,100%{transform:rotate(-45deg) scale(1)}50%{transform:rotate(-45deg) scale(1.15)}}

/* ---------- Reveal ---------- */
#screen-reveal.active{display:block}
.reveal-overlay{
  position:absolute;bottom:0;left:0;right:0;z-index:400;
  padding:1rem;padding-bottom:calc(1rem + var(--safe-b));
  display:flex;justify-content:center;pointer-events:none;
}
.reveal-card{
  pointer-events:auto;width:100%;max-width:480px;
  background:rgba(17,27,48,.92);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);
  animation:rise .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.reveal-stats{display:flex;gap:1rem;margin:1.1rem 0 .2rem}
.stat{flex:1;text-align:center;background:var(--night);border-radius:var(--radius-sm);padding:.8rem .4rem;border:1px solid var(--line)}
.stat-num{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.stat-label{font-size:.68rem;color:var(--mist);letter-spacing:.03em}
.reveal-actions{display:flex;gap:.6rem;margin-top:1.2rem}
.reveal-actions .btn{flex:1}

/* ---------- Ana uygulama ---------- */
#screen-app.active{display:block}
.app-topbar{
  position:absolute;top:0;left:0;right:0;z-index:500;
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1rem;padding-top:max(.9rem,env(safe-area-inset-top));
  background:linear-gradient(to bottom,rgba(11,17,32,.92),transparent);
  pointer-events:none;
}
.app-topbar>*{pointer-events:auto}
.topbar-stat{display:flex;flex-direction:column}
.topbar-pct{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--amber);line-height:1}
.topbar-sub{font-size:.7rem;color:var(--mist);letter-spacing:.05em}
.topbar-right{display:flex;gap:.5rem;align-items:center}
.streak-pill{
  background:rgba(17,27,48,.85);border:1px solid var(--line);border-radius:999px;
  padding:.35rem .8rem;font-size:.85rem;font-weight:700;backdrop-filter:blur(8px);
}

/* Alt panel */
.bottom-sheet{
  position:absolute;bottom:64px;left:0;right:0;z-index:450;
  background:rgba(17,27,48,.96);backdrop-filter:blur(14px);
  border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--line);border-bottom:none;
  max-height:min(62dvh,540px);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.bottom-sheet.collapsed{transform:translateY(calc(100% - 92px))}
.sheet-handle{padding:.7rem;display:flex;justify-content:center;cursor:grab;flex-shrink:0}
.sheet-handle::before{content:"";width:44px;height:5px;border-radius:99px;background:var(--line)}
.sheet-content{overflow-y:auto;padding:0 1.1rem 1.4rem;-webkit-overflow-scrolling:touch}

/* Sekmeler */
.tabbar{
  position:absolute;bottom:0;left:0;right:0;z-index:500;display:flex;
  background:rgba(11,17,32,.97);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);height:calc(64px + var(--safe-b));
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 64px;background:none;border:none;color:var(--mist);font-size:.68rem;font-weight:700;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:0;white-space:nowrap;
}
.tab-ico{font-size:1.15rem}
.tab.active{color:var(--amber)}

/* Sheet içi kartlar */
.card{
  background:var(--night);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1rem 1.1rem;margin-bottom:.8rem;
}
.card-title{font-weight:800;font-size:.95rem;margin-bottom:.3rem}
.card-sub{color:var(--mist);font-size:.82rem}
.card-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.section-title{
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:1rem 0 .7rem;
  display:flex;justify-content:space-between;align-items:center;
}
.empty-state{
  text-align:center;color:var(--mist);padding:1.6rem 1rem;font-size:.9rem;
  border:1.5px dashed var(--line);border-radius:var(--radius-sm);margin-bottom:.8rem;
}

/* Durak listesi */
.wp-item{display:flex;gap:.8rem;align-items:flex-start}
.wp-dot{width:12px;height:12px;border-radius:50%;margin-top:5px;flex-shrink:0}
.wp-dot.done{background:var(--amber)}
.wp-dot.near{background:var(--ember)}
.wp-dot.far{background:#3A4A70}
.wp-dot.past{background:var(--amber)}
.wp-dot.period{background:var(--dawn)}
.wp-dot.future{background:#3A4A70}
.wp-dot.hard{background:var(--ember)}
.wp-dot.neutral{background:#8A94A8}
.wp-dot.small{width:9px;height:9px;margin-top:7px;opacity:.9}
.wp-dot.major{width:16px;height:16px;margin-top:3px;box-shadow:0 0 12px rgba(245,197,90,.35)}
.wp-body{flex:1}
.wp-meta{font-size:.75rem;color:var(--mist);margin-top:2px}
.wp-actions{display:flex;gap:.4rem;margin-top:.5rem;flex-wrap:wrap}
.badge-cat{
  display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  background:var(--surface-2);color:var(--dawn);border-radius:99px;padding:.15rem .55rem;
  text-transform:uppercase;margin-right:.4rem;
}
.timeline-legend{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 .8rem}
.legend-dot{display:inline-flex;align-items:center;gap:.35rem;color:var(--mist);font-size:.7rem;font-weight:800}
.legend-dot i{display:inline-block;width:9px;height:9px;border-radius:50%}
.life-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.life-mini-stat{background:var(--night);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem;text-align:center}
.life-mini-stat b{display:block;color:var(--amber);font-family:var(--font-display);font-size:1.2rem}
.life-mini-stat span{color:var(--mist);font-size:.72rem;font-weight:700}
.chapter-card{border-color:rgba(127,209,192,.28)}
.chapter-list{display:flex;flex-direction:column;gap:.45rem}
.chapter-row{
  display:flex;justify-content:space-between;gap:.7rem;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .75rem;
  background:rgba(11,17,32,.55);
}
.chapter-row.current{border-color:rgba(245,197,90,.55);background:rgba(245,197,90,.08)}
.chapter-name{font-weight:800;font-size:.85rem}
.chapter-age{font-size:.7rem;color:var(--mist)}
.chapter-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
.chapter-tags span{
  color:var(--mist);border:1px solid var(--line);border-radius:99px;
  padding:.12rem .45rem;font-size:.62rem;font-weight:800;text-transform:uppercase;
}
.radar-card{border-color:rgba(224,135,107,.45)}
.focus-card{border-color:rgba(127,209,192,.45)}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.future-letter .card-row{align-items:flex-start}

/* Check-in */
.checkin-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
.ck-btn{
  background:var(--night);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--sand);padding:1rem .6rem;font-size:.85rem;font-weight:700;
  display:flex;flex-direction:column;gap:.3rem;align-items:center;
}
.ck-btn .ico{font-size:1.4rem}
.ck-btn.on{border-color:var(--dawn);background:rgba(127,209,192,.1);color:var(--dawn)}
.daily-km{
  text-align:center;background:linear-gradient(135deg,rgba(245,197,90,.12),rgba(127,209,192,.08));
  border:1px solid rgba(245,197,90,.3);border-radius:var(--radius-sm);padding:1rem;margin-bottom:.8rem;
}
.daily-km strong{font-family:var(--font-display);font-size:1.3rem;color:var(--amber)}

/* Alışkanlıklar */
.habit-item .fx{font-weight:800;font-variant-numeric:tabular-nums}
.fx.plus{color:var(--dawn)}
.fx.minus{color:var(--ember)}
.habit-progress{height:5px;background:var(--surface-2);border-radius:99px;margin-top:.5rem;overflow:hidden}
.habit-progress i{display:block;height:100%;background:var(--dawn);border-radius:99px}
.factor-list{display:flex;flex-direction:column;gap:.55rem}
.factor-row{font-size:.82rem;color:var(--mist);align-items:flex-start}
.factor-row span{max-width:78%}

/* Profil / rozetler */
.rank-banner{
  background:linear-gradient(135deg,rgba(245,197,90,.15),rgba(127,209,192,.08));
  border:1px solid rgba(245,197,90,.35);border-radius:var(--radius-sm);
  padding:1rem 1.1rem;margin-bottom:.8rem;text-align:center;
}
.rank-name{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--amber)}
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.6rem;margin-bottom:.8rem}
.badge-tile{
  background:var(--night);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .3rem;text-align:center;font-size:.62rem;color:var(--mist);
}
.badge-tile.earned{border-color:var(--amber);color:var(--sand)}
.badge-tile .b-ico{font-size:1.4rem;display:block;margin-bottom:.25rem;filter:grayscale(1);opacity:.35}
.badge-tile.earned .b-ico{filter:none;opacity:1}

/* Grafik */
.history-chart{width:100%;height:150px;margin:.5rem 0}
.history-chart polyline{fill:none;stroke:var(--dawn);stroke-width:2.5;stroke-linecap:round}
.history-chart .grid-line{stroke:var(--line);stroke-width:1}
.history-chart text{fill:var(--mist);font-size:9px;font-family:var(--font-body)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:900;background:rgba(3,7,18,.75);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;padding:1rem;
}
.modal{
  width:100%;max-width:480px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;max-height:86dvh;overflow-y:auto;
  animation:rise .35s cubic-bezier(.2,.8,.2,1);
}
.modal h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:.8rem}
.modal .field{margin-bottom:.9rem}
.modal select{
  width:100%;background:var(--night);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--sand);padding:.85rem 1rem;font-size:.95rem;
}
.modal textarea{
  width:100%;background:var(--night);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--sand);padding:.85rem 1rem;font-size:.95rem;resize:vertical;line-height:1.55;
}
.modal textarea:focus{border-color:var(--amber);outline:none}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.modal-actions{display:flex;gap:.6rem;margin-top:1.1rem}
.modal-actions .btn{flex:1}
.setting-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);
}
.setting-row:last-child{border-bottom:none}
.setting-row .s-label{font-weight:600;font-size:.92rem}
.setting-row .s-sub{color:var(--mist);font-size:.75rem}
.toggle{position:relative;width:48px;height:27px;flex-shrink:0}
.toggle input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2}
.toggle i{
  position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;transition:background .2s;
}
.toggle i::after{
  content:"";position:absolute;top:2.5px;left:3px;width:19px;height:19px;border-radius:50%;
  background:var(--mist);transition:transform .2s,background .2s;
}
.toggle input:checked+i{background:rgba(127,209,192,.3);border-color:var(--dawn)}
.toggle input:checked+i::after{transform:translateX(20px);background:var(--dawn)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:1000;
  background:var(--surface-2);border:1px solid var(--amber);border-radius:999px;
  padding:.7rem 1.4rem;font-size:.88rem;font-weight:700;box-shadow:var(--shadow);
  max-width:min(92vw,440px);text-align:center;
  animation:toastIn .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastIn{from{transform:translate(-50%,-16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ============================================================
   RESPONSIVE — masaüstü: harita + yan panel düzeni
   ============================================================ */
@media (min-width:900px){
  .bottom-sheet{
    left:auto;right:1.2rem;bottom:1.2rem;top:5.2rem;width:400px;
    border-radius:var(--radius);border:1px solid var(--line);
    max-height:none;
  }
  .bottom-sheet.collapsed{transform:none}
  .sheet-handle{display:none}
  .tabbar{
    left:50%;right:auto;bottom:1.2rem;transform:translateX(-50%);
    border:1px solid var(--line);border-radius:999px;height:58px;
    padding:0 .5rem;box-shadow:var(--shadow);
  }
  .tab{padding:0 1.3rem;flex-direction:row;gap:.5rem;font-size:.82rem}
  .reveal-overlay{align-items:center;inset:0;padding:2rem}
  .reveal-card{max-width:520px}
  .route-select-panel{padding:2.4rem}
}
@media (max-width:380px){
  .reveal-stats{gap:.5rem}
  .stat-num{font-size:1.2rem}
  .checkin-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .app-topbar{padding:.65rem .75rem;padding-top:max(.65rem,env(safe-area-inset-top))}
  .topbar-pct{font-size:1.25rem}
  .topbar-sub{font-size:.62rem;max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-right{gap:.35rem}
  .btn-icon{width:38px;height:38px}
  .streak-pill{padding:.28rem .58rem;font-size:.76rem}
  .bottom-sheet{bottom:calc(72px + var(--safe-b));max-height:min(68dvh,620px);border-radius:16px 16px 0 0}
  .bottom-sheet.collapsed{transform:translateY(calc(100% - 78px))}
  .sheet-content{padding:0 .85rem 1.1rem}
  .tabbar{height:calc(72px + var(--safe-b));padding:.25rem .35rem var(--safe-b);gap:.15rem}
  .tab{flex:0 0 68px;border-radius:14px;font-size:.62rem}
  .tab-ico{font-size:1.05rem}
  .tab.active{background:rgba(245,197,90,.09)}
  .section-title{align-items:flex-start;gap:.55rem;flex-wrap:wrap;font-size:1.05rem}
  .section-title>span{display:flex;gap:.4rem;overflow-x:auto;max-width:100%;padding-bottom:.1rem}
  .section-title .btn-sm{white-space:nowrap}
  .card{padding:.9rem .95rem;border-radius:12px}
  .card-row{align-items:flex-start}
  .wp-actions .btn-sm{flex:1 1 auto}
  .share-grid{grid-template-columns:repeat(2,1fr)}
  .page-header{padding:.9rem 1rem;gap:.7rem}
  .page-logo{width:145px}
  .page-nav{width:100%;overflow-x:auto;gap:.8rem;padding-bottom:.15rem}
  .page-nav a{white-space:nowrap}
}

/* ============================================================
   PREMIUM LAYER — refined surfaces, chat UI, chart polish
   ============================================================ */

/* Layered card depth: inner highlight + soft ambient shadow */
.card{
  background:linear-gradient(180deg,rgba(24,38,66,.55),rgba(11,17,32,.9));
  box-shadow:inset 0 1px 0 rgba(233,237,245,.05),0 6px 18px rgba(3,7,18,.35);
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:#31456F}
.rank-banner{
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(245,197,90,.2),0 8px 26px rgba(245,197,90,.08);
}
.rank-banner::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(233,237,245,.08),transparent);
  animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{0%,60%{left:-70%}100%{left:130%}}

/* Primary button: subtle shine sweep on hover */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .5s ease;
}
.btn-primary:hover::after{left:130%}

/* Sheet content entrance */
.sheet-content>*{animation:fadeUp .35s cubic-bezier(.2,.8,.2,1) both}
.sheet-content>*:nth-child(2){animation-delay:.04s}
.sheet-content>*:nth-child(3){animation-delay:.08s}
.sheet-content>*:nth-child(4){animation-delay:.12s}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Refined scrollbars */
.sheet-content::-webkit-scrollbar,.chat::-webkit-scrollbar,.modal::-webkit-scrollbar{width:5px}
.sheet-content::-webkit-scrollbar-thumb,.chat::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:99px}

/* Streak pill glow when active */
.streak-pill{box-shadow:0 0 0 0 rgba(245,197,90,0);transition:box-shadow .3s}
.streak-pill.hot{border-color:var(--amber);box-shadow:0 0 14px rgba(245,197,90,.35)}

/* ---------- Chat (Coach tab) ---------- */
.coach-mode{
  font-family:var(--font-body);font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);border:1px solid var(--line);
  border-radius:99px;padding:.2rem .6rem;vertical-align:middle;
}
.coach-mode.live{color:var(--dawn);border-color:rgba(127,209,192,.5)}
.chat{
  display:flex;flex-direction:column;gap:.55rem;max-height:300px;overflow-y:auto;
  padding:.4rem .1rem;margin-bottom:.7rem;scroll-behavior:smooth;
}
.chat-msg{
  max-width:86%;padding:.7rem .95rem;border-radius:16px;font-size:.9rem;line-height:1.5;
  animation:fadeUp .25s ease both;white-space:pre-wrap;word-break:break-word;
}
.chat-msg.coach{
  align-self:flex-start;background:linear-gradient(180deg,rgba(24,38,66,.8),rgba(17,27,48,.9));
  border:1px solid var(--line);border-bottom-left-radius:5px;
  box-shadow:inset 0 1px 0 rgba(233,237,245,.05);
}
.chat-msg.me{
  align-self:flex-end;background:linear-gradient(135deg,rgba(245,197,90,.18),rgba(217,166,60,.12));
  border:1px solid rgba(245,197,90,.35);border-bottom-right-radius:5px;color:var(--sand);
}
.chat-row{display:flex;gap:.5rem}
.chat-input{margin-bottom:0;flex:1}
.chat-msg.typing{display:flex;gap:5px;padding:.85rem 1rem;width:64px}
.chat-msg.typing span{
  width:7px;height:7px;border-radius:50%;background:var(--mist);
  animation:blink 1.2s infinite;
}
.chat-msg.typing span:nth-child(2){animation-delay:.2s}
.chat-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------- Chart polish ---------- */
.history-chart{height:170px}
.history-chart .hc-line{fill:none;stroke:var(--dawn);stroke-width:2.5;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(127,209,192,.45))}
.history-chart .hc-dot{fill:var(--dawn);stroke:var(--night);stroke-width:2}
.history-chart .hc-label{fill:var(--dawn);font-weight:700;font-size:11px}

/* Badge tiles: earned ones glow softly */
.badge-tile{transition:transform .2s,box-shadow .2s}
.badge-tile.earned{box-shadow:0 0 16px rgba(245,197,90,.12),inset 0 1px 0 rgba(245,197,90,.15)}
.badge-tile.earned:hover{transform:translateY(-2px)}

/* Modal: glass finish */
.modal{
  background:linear-gradient(180deg,rgba(24,38,66,.7),rgba(17,27,48,.96));
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(233,237,245,.06),var(--shadow);
}

/* Daily-km hero: soft breathing glow */
.daily-km{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 rgba(245,197,90,0)}50%{box-shadow:0 0 22px rgba(245,197,90,.1)}}
@media (prefers-reduced-motion:reduce){.rank-banner::after,.daily-km{animation:none}}

/* Weekly letter */
.letter-card{
  border-color:rgba(245,197,90,.3);
  background:linear-gradient(180deg,rgba(245,197,90,.07),rgba(11,17,32,.9));
  font-family:var(--font-display);
}

/* Route mode chips */
.mode-chip.selected{border-color:var(--amber);color:var(--amber);background:rgba(245,197,90,.1)}
#screen-begin{display:none;place-items:center;text-align:center;padding:2rem}
#screen-begin.active{display:grid}
.begin-soft-toggle{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:min(100%,420px);margin:-.6rem auto 1.1rem;
  color:var(--mist);font-size:.86rem;font-weight:700;
}
.begin-soft-toggle input{accent-color:var(--amber);width:18px;height:18px}

/* Brand assets */
.brand-logo{width:min(320px,72vw);height:auto;margin:0 auto 1.2rem;display:block;
  filter:drop-shadow(0 6px 24px rgba(245,197,90,.15))}
.brand-mark{width:52px;height:52px;border-radius:14px;margin-bottom:.7rem;
  box-shadow:0 6px 18px rgba(3,7,18,.5)}
/* Survey road-trip progress */
.progress-track{position:relative;overflow:visible}
.progress-car{position:absolute;top:50%;left:0;transform:translate(-30%,-62%);
  font-size:1.05rem;transition:left .4s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
/* Rank progress */
.rank-progress{height:6px;background:rgba(11,17,32,.7);border-radius:99px;margin-top:.7rem;overflow:hidden}
.rank-progress i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--amber),var(--dawn));transition:width .5s}

/* Brand marks everywhere */
.brand-mark-xs{width:30px;height:30px;border-radius:9px;flex-shrink:0}
.reveal-brand{position:absolute;top:1rem;right:1rem;opacity:.9}
.reveal-card{position:relative}

/* Explainer overlay */
.explainer{position:fixed;inset:0;z-index:950;background:rgba(3,7,18,.88);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:1rem}
.explainer-box{position:relative;width:100%;max-width:460px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;text-align:center;
  box-shadow:var(--shadow);animation:rise .4s cubic-bezier(.2,.8,.2,1)}
.explainer-close{position:absolute;top:.8rem;right:.8rem}
.explainer-svg{width:100%;height:auto;margin:.4rem 0}
.explainer-captions{position:relative;height:3.2em;margin-bottom:1rem}
.xc{position:absolute;inset:0;opacity:0;color:var(--sand);font-size:.92rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;padding:0 .5rem}
.xc1{animation:xcap 16s linear infinite}
.xc2{animation:xcap 16s linear infinite 4s}
.xc3{animation:xcap 16s linear infinite 8s}
.xc4{animation:xcap 16s linear infinite 12s}
@keyframes xcap{0%{opacity:0}2%{opacity:1}23%{opacity:1}27%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .xc{position:static;opacity:1;font-size:.8rem;height:auto}
  .explainer-captions{height:auto}
}
/* Suggestion cards */
.sugg-card{border-left:3px solid var(--line)}
.sugg-card:hover{border-left-color:var(--amber)}
.sugg-courage{border-left-color:var(--ember)}

/* Static pages */
.page-body{display:block;min-height:100dvh}
.page-header{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  max-width:760px;margin:0 auto;padding:1.2rem}
.page-logo{width:170px;height:auto}
.page-nav{display:flex;gap:1rem}
.page-nav a{color:var(--mist);text-decoration:none;font-weight:700;font-size:.85rem}
.page-nav a.active,.page-nav a:hover{color:var(--amber)}
.page{max-width:680px;margin:0 auto;padding:1rem 1.2rem 4rem}
.page h1{margin-bottom:.6rem}
.page h2{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin:1.8rem 0 .5rem;color:var(--amber)}
.page p{color:var(--sand);opacity:.92;margin-bottom:.9rem;line-height:1.7;font-size:.95rem}
.page b{color:var(--sand)}
.landing-links{display:flex;gap:1.2rem;justify-content:center;margin-top:1rem}
.landing-links a{color:var(--mist);font-size:.75rem;font-weight:700;text-decoration:none}
.landing-links a:hover{color:var(--amber)}
.landing-lang{
  position:absolute;top:1rem;right:1rem;z-index:3;background:rgba(11,17,32,.82);
  color:var(--sand);border:1.5px solid var(--line);border-radius:999px;
  padding:.45rem .75rem;font-weight:800;font-size:.78rem;max-width:min(46vw,180px);
}

/* ===== Personal road stats (Profile) ===== */
.heatmap{display:grid;grid-template-columns:repeat(21,1fr);gap:3px;margin-top:.5rem}
.heatmap i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(138,148,168,.14)}
.heatmap i.hm1{background:rgba(245,197,90,.28)}
.heatmap i.hm2{background:rgba(245,197,90,.6)}
.heatmap i.hm3{background:var(--amber)}

/* ===== Community stats (Travelers) ===== */
.community-card{border-color:rgba(245,197,90,.35)}
.stat-list{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem}
.stat-bar-row{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr auto;gap:.6rem;align-items:center}
.stat-bar-name{font-size:.8rem;color:var(--sand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-bar{height:8px;border-radius:5px;background:rgba(138,148,168,.14);overflow:hidden}
.stat-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--amber),var(--dawn))}
.stat-bar-n{font-size:.75rem;font-weight:800;color:var(--mist);min-width:2.2rem;text-align:right}

/* ===== Landing social proof ===== */
.landing-social{font-size:.85rem;color:var(--mist);margin:.4rem 0 .2rem}
.landing-social b{color:var(--amber)}

/* ===== Leg progress bar (outbound / return visibility) ===== */
.leg-card{border-color:rgba(127,209,192,.3)}
.leg-bar{display:flex;align-items:center;gap:.45rem;margin-top:.7rem}
.leg-seg{position:relative;flex:1;height:10px;border-radius:6px;background:rgba(245,197,90,.18);overflow:visible}
.leg-seg i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#7FD1C0,#9adfd0);max-width:100%}
.leg-seg.current{box-shadow:0 0 0 1.5px rgba(127,209,192,.5)}
.leg-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--amber);
  border:2.5px solid var(--night);transform:translate(-50%,-50%);box-shadow:0 0 10px var(--amber);z-index:2}
.leg-mid{font-size:.8rem;line-height:1;opacity:.8}
.leg-labels{display:flex;justify-content:space-between;margin-top:.35rem;font-size:.68rem;color:var(--mist);font-weight:700}
.leg-now{color:var(--dawn)}
.leg-legend{float:inline-end;font-size:.68rem;color:var(--mist)}
.leg-legend i{display:inline-block;width:14px;height:5px;border-radius:3px;margin:0 .25rem 0 .6rem;vertical-align:middle}
.leg-legend .lg-travelled{background:#7FD1C0}
.leg-legend .lg-ahead{background:rgba(245,197,90,.45)}
[dir="rtl"] .leg-legend{float:inline-start}

/* ===== Share sheet (platform buttons) ===== */
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.share-btn{display:block;text-align:center;padding:.65rem .4rem;border-radius:10px;border:1.5px solid var(--line);
  background:var(--night);color:var(--sand);font-weight:700;font-size:.8rem;text-decoration:none;cursor:pointer}
.share-btn:hover{border-color:var(--amber);color:var(--amber)}