/* ==========================================================================
   Kuzey Kıbrıs · Saha Defteri
   Palet: bakır (Kypros = bakır adası) → patina. Gezilen yer oksitlenir.
   Tip:   Fraunces (isimler) · Archivo (anlatı) · JetBrains Mono (ölçülebilir veri)
   ========================================================================== */

/* Koyu tema tasarımın varsayılanı; açık tema aşağıda aynı token setini yeniden tanımlar.
   data-skin = sayfadaki düğmenin seçimi, data-theme = sayfayı gömen ortamın seçimi. */
:root{
  --void:#0A0D0C;
  --stone:#121917;
  --stone-2:#18211F;
  --stone-3:#1F2A27;
  --line:#27332F;
  --line-soft:#1D2724;
  --limestone:#EDE7D9;
  --lichen:#93A099;
  --lichen-dim:#6A776F;

  --copper:#CE7C3D;
  --copper-hi:#F3B173;
  --copper-deep:#7E4A20;
  --copper-wash:rgba(206,124,61,.12);

  --verdigris:#4BBBA0;
  --verdigris-deep:#1B4A41;
  --verdigris-wash:rgba(75,187,160,.13);

  --alert:#E0705F;
  --alert-wash:rgba(224,112,95,.13);

  --shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-lift:0 2px 0 rgba(255,255,255,.04), 0 34px 70px -30px rgba(0,0,0,1);
  --grain-op:.045;

  --ridge-back:#1D2724;
  --on-copper:#120C06;
  --on-verdigris:#0A0D0C;
  --sheen:rgba(255,255,255,.45);
  --moon:block;
  --sun:none;

  --r:4px;
  --gut:20px;
  --ease:cubic-bezier(.22,.68,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Cihaz açık temadaysa ve okuyucu sayfadan koyuyu seçmediyse */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-skin="dark"]){
    --void:#F0ECE1;
    --stone:#FBF8F1;
    --stone-2:#F4F0E5;
    --stone-3:#EAE4D5;
    --line:#DCD4C2;
    --line-soft:#E6E0D1;
    --limestone:#161D1B;
    --lichen:#5C6862;
    --lichen-dim:#7A857E;
    --copper:#A85A20;
    --copper-hi:#C87A34;
    --copper-deep:#7A3F12;
    --copper-wash:rgba(168,90,32,.10);
    --verdigris:#127963;
    --verdigris-deep:#0B4A3C;
    --verdigris-wash:rgba(18,121,99,.11);
    --alert:#B23A28;
    --alert-wash:rgba(178,58,40,.10);
    --shadow:0 1px 0 rgba(255,255,255,.7), 0 14px 34px -22px rgba(60,44,20,.45);
    --shadow-lift:0 1px 0 rgba(255,255,255,.8), 0 30px 60px -28px rgba(60,44,20,.5);
    --grain-op:.028;
    --ridge-back:#EAE4D5;
    --on-copper:#FFF7EE;
    --on-verdigris:#FBF8F1;
    --sheen:rgba(255,255,255,.9);
    --moon:none;
    --sun:block;
  }
}

/* Ortam açık tema damgaladıysa, ya da okuyucu düğmeden açığı seçtiyse */
:root[data-theme="light"]:not([data-skin="dark"]),
:root[data-skin="light"]{
  --void:#F0ECE1;
  --stone:#FBF8F1;
  --stone-2:#F4F0E5;
  --stone-3:#EAE4D5;
  --line:#DCD4C2;
  --line-soft:#E6E0D1;
  --limestone:#161D1B;
  --lichen:#5C6862;
  --lichen-dim:#7A857E;

  --copper:#A85A20;
  --copper-hi:#C87A34;
  --copper-deep:#7A3F12;
  --copper-wash:rgba(168,90,32,.10);

  --verdigris:#127963;
  --verdigris-deep:#0B4A3C;
  --verdigris-wash:rgba(18,121,99,.11);

  --alert:#B23A28;
  --alert-wash:rgba(178,58,40,.10);

  --shadow:0 1px 0 rgba(255,255,255,.7), 0 14px 34px -22px rgba(60,44,20,.45);
  --shadow-lift:0 1px 0 rgba(255,255,255,.8), 0 30px 60px -28px rgba(60,44,20,.5);
  --grain-op:.028;
  --ridge-back:#EAE4D5;
  --on-copper:#FFF7EE;
  --on-verdigris:#FBF8F1;
  --sheen:rgba(255,255,255,.9);
  --moon:none;
  --sun:block;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--limestone);
  font-family:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(86px + env(safe-area-inset-bottom));
  overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
}
h1,h2,h3,h4,p,dl,dd,dt,figure,ul{margin:0}
ul{padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit}
img,svg{display:block; max-width:100%}
input{font:inherit}

:focus-visible{outline:2px solid var(--copper-hi); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:780px; margin-inline:auto; padding-inline:var(--gut)}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; letter-spacing:.06em}
.eyebrow{text-transform:uppercase; letter-spacing:.22em; color:var(--lichen-dim); font-size:.62rem}
.signature{
  text-transform:uppercase; letter-spacing:.22em; font-size:.62rem;
  color:var(--lichen-dim); white-space:nowrap;
}
.signature b{color:var(--copper); font-weight:700; letter-spacing:.16em}
.ic{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- kâğıt dokusu ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- okuma çizgisi ---------- */
.readbar{position:fixed; inset:0 0 auto; height:2px; z-index:40; background:transparent}
.readbar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--copper-deep),var(--copper),var(--copper-hi));
  transition:width .12s linear;
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead{position:relative; overflow:hidden; overflow:clip; padding-top:calc(18px + env(safe-area-inset-top))}
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.haze{position:absolute; inset:-20% -10% auto; height:150%; pointer-events:none; filter:blur(60px); opacity:.55}
.haze span{position:absolute; border-radius:50%; display:block}
.haze span:nth-child(1){width:52vw; height:52vw; left:-12vw; top:-10vw; background:radial-gradient(circle,var(--copper) 0%,transparent 68%); opacity:.32; animation:drift 34s var(--ease) infinite alternate}
.haze span:nth-child(2){width:46vw; height:46vw; right:-14vw; top:6vw;  background:radial-gradient(circle,var(--verdigris) 0%,transparent 68%); opacity:.24; animation:drift 44s var(--ease) infinite alternate-reverse}
.haze span:nth-child(3){width:60vw; height:38vw; left:22vw; top:26vw;   background:radial-gradient(circle,var(--copper-deep) 0%,transparent 70%); opacity:.3; animation:drift 52s var(--ease) infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vw,-4vw,0) scale(1.14)}
  100%{transform:translate3d(-5vw,5vw,0) scale(.94)}
}

.mh-inner{position:relative; z-index:2; padding-bottom:26px}
.mh-top{display:flex; align-items:center; justify-content:space-between; gap:10px 12px; min-height:44px; flex-wrap:wrap}
.mh-tools{display:flex; gap:8px; flex:0 0 auto; margin-left:auto}
.signature{flex:1 1 auto; min-width:0}
@media (max-width:480px){
  .mh-top{flex-direction:column; align-items:flex-start; gap:10px}
  .mh-tools{margin-left:0; width:100%; justify-content:flex-end}
}

.icon-btn{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:var(--lichen); background:var(--stone);
  transition:color .2s, border-color .2s, transform .2s var(--ease-out), background .2s;
}
.icon-btn:hover{color:var(--copper-hi); border-color:var(--copper-deep)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.danger:hover{color:var(--alert); border-color:var(--alert)}
.ic-loud{display:none}
#soundBtn[aria-pressed="true"] .ic-mute{display:none}
#soundBtn[aria-pressed="true"] .ic-loud{display:block}
#soundBtn[aria-pressed="true"]{color:var(--copper-hi); border-color:var(--copper-deep)}
.ic-moon{display:var(--moon)}
.ic-sun{display:var(--sun)}

.mh-title{
  font-family:"Fraunces",Georgia,serif;
  font-optical-sizing:auto; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-weight:600; line-height:.9; letter-spacing:-.035em;
  font-size:clamp(3rem,17vw,6.4rem);
  margin:22px 0 0; display:flex; flex-direction:column;
}
.mh-title .w{display:block; overflow:hidden; padding-bottom:.04em}
.mh-title .w > span{display:block; transform:translateY(105%)}
.mh-title .w:nth-child(2) > span{color:var(--copper)}
.js .mh-title .w > span{transition:transform 1s var(--ease-out)}
.ready .mh-title .w > span{transform:none}
.ready .mh-title .w:nth-child(2) > span{transition-delay:.1s}

.mh-sub{
  max-width:34ch; margin-top:16px; color:var(--lichen);
  font-size:.95rem; opacity:0; transform:translateY(10px);
}
.js .mh-sub{transition:opacity .8s .35s var(--ease-out), transform .8s .35s var(--ease-out)}
.ready .mh-sub{opacity:1; transform:none}

/* ---------- ilerleme çubuğu ---------- */
.meter-wrap{margin-top:34px; position:relative}
.meter{
  height:8px; border-radius:99px; background:var(--line-soft);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35); overflow:hidden; position:relative;
}
.meter i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--copper-deep),var(--copper) 60%,var(--copper-hi));
  box-shadow:0 0 14px color-mix(in srgb,var(--copper) 55%, transparent);
  transition:width .9s var(--ease-out);
}
.meter i::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18));
}
.meter-legend{
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--lichen-dim); text-transform:uppercase; padding-top:10px;
}
#ridgePct{color:var(--copper); font-weight:700; font-size:.78rem; letter-spacing:0}

.mh-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:22px; background:var(--line-soft)}
.mh-stats > div{background:var(--void); padding:12px 4px 10px; text-align:center}
.mh-stats dt{color:var(--lichen-dim); text-transform:uppercase; letter-spacing:.14em; font-size:.56rem}
.mh-stats dd{
  font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:1.5rem;
  letter-spacing:-.02em; margin-top:2px; line-height:1.1;
}
.mh-stats #statKm{font-size:1.05rem; white-space:nowrap; padding-top:.28em}

/* ==========================================================================
   GÜN RAYI
   ========================================================================== */
.rail-outer{
  position:sticky; top:0; z-index:30;
  background:rgba(10,13,12,.9);
  background:color-mix(in srgb, var(--void) 84%, transparent);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .3s;
}
.rail-outer.stuck{border-bottom-color:var(--line)}
.rail{
  display:flex; gap:8px; overflow-x:auto; padding:11px 0;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail-chip{
  flex:0 0 auto; scroll-snap-align:start;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto;
  gap:1px 11px; align-items:center;
  padding:9px 16px 10px; min-height:60px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--stone); position:relative; overflow:hidden;
  transition:border-color .25s, background .25s, transform .18s var(--ease-out), color .25s;
  opacity:0; transform:translateY(10px); text-align:left;
}
.js .rail-chip{transition:border-color .25s, background .25s, transform .18s var(--ease-out), color .25s, opacity .5s var(--ease-out)}
.rail.in .rail-chip{opacity:1; transform:none}
.rail-chip:active{transform:scale(.96)}
.rail-chip:hover{border-color:var(--copper-deep)}
.rc-sig{
  grid-row:1/4; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line);
  color:var(--copper); transition:color .25s, border-color .25s, background .25s;
}
.rc-sig svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.rc-name{font-size:.86rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; line-height:1.25}
.rc-date{
  color:var(--lichen-dim); font-size:.56rem; letter-spacing:.11em;
  white-space:nowrap; line-height:1.3;
}
.rc-meter{display:flex; gap:2px; height:3px; align-items:center; margin-top:4px}
.rc-meter i{display:block; width:7px; height:3px; background:var(--line); border-radius:1px; transition:background .3s}
.rc-meter i.on{background:var(--verdigris)}
.rail-chip[aria-selected="true"]{background:var(--stone-3); border-color:var(--copper)}
.rail-chip[aria-selected="true"] .rc-sig{color:var(--copper-hi); border-color:var(--copper-deep); background:var(--copper-wash)}
.rail-chip[aria-selected="true"] .rc-date{color:var(--copper)}
.rail-chip.done .rc-sig{color:var(--verdigris); border-color:var(--verdigris-deep)}
.rail-chip.aux .rc-name{color:var(--lichen)}
.rail-chip[aria-selected="true"].aux .rc-name{color:var(--limestone)}

/* ==========================================================================
   HERO ARKA PLANI — tanıtım filmi ya da fotoğraf akışı
   ========================================================================== */
.hero-video{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.4s var(--ease-out)}
.hero-video.on{opacity:1}
.hero-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0;
  pointer-events:none; z-index:1; opacity:0; transition:opacity 1.2s var(--ease-out);
}
.hero-video iframe.ready{opacity:1}
.hero-video video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover;
  z-index:1; opacity:0; transition:opacity 1.2s var(--ease-out);
}
.hero-video video.ready{opacity:1}
.hero-video::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(10,13,12,.34) 0%, rgba(10,13,12,.42) 55%, rgba(10,13,12,.9) 88%, #0A0D0C 100%);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--void) 34%, transparent) 0%,
                            color-mix(in srgb,var(--void) 42%, transparent) 55%,
                            color-mix(in srgb,var(--void) 90%, transparent) 88%,
                            var(--void) 100%),
    radial-gradient(120% 90% at 14% 22%, color-mix(in srgb,var(--void) 40%, transparent) 0%,
                                          transparent 60%);
}
/* arka plan açıkken metin ayrıca gölgelensin */
.masthead.video-on .mh-title,
.masthead.video-on .mh-sub,
.masthead.video-on .signature,
.masthead.video-on .ridge-legend,
.masthead.video-on .mh-stats{text-shadow:0 1px 18px var(--void), 0 2px 6px var(--void), 0 0 2px var(--void)}
.masthead.video-on .mh-stats > div{background:rgba(10,13,12,.78); background:color-mix(in srgb,var(--void) 78%, transparent)}
.masthead.video-on .haze{opacity:.18}
.masthead.video-on .mh-inner{padding-bottom:38px}
.hero-credit{
  position:absolute; right:var(--gut); bottom:10px; z-index:3; margin:0;
  color:color-mix(in srgb, var(--lichen-dim) 85%, transparent);
  font-size:.52rem; letter-spacing:.08em; text-transform:uppercase;
  pointer-events:none; white-space:nowrap; text-align:right;
}
.hero-credit[hidden]{display:none}
#videoBtn[aria-pressed="true"]{color:var(--copper-hi); border-color:var(--copper-deep)}

/* ==========================================================================
   SEFER PANELİ — konaklama + rehberler, her görünümde üstte
   ========================================================================== */
.deck{display:grid; gap:10px; margin-top:18px; margin-bottom:6px; grid-template-columns:1fr}
.deck-base{
  border:1px solid var(--copper-deep); border-radius:var(--r); padding:16px 18px;
  background:linear-gradient(150deg,var(--stone-2),var(--stone));
}
.deck-label{color:var(--lichen-dim); text-transform:uppercase; letter-spacing:.18em}
.deck-name{
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.28rem;
  letter-spacing:-.02em; margin-top:3px; line-height:1.2;
}
.deck-acts{display:flex; gap:8px; margin-top:14px}
.deck-links{display:grid; gap:8px}
.deck-link{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  border:1px solid var(--line); border-radius:var(--r); padding:13px 14px;
  background:var(--stone); transition:border-color .22s, background .22s, transform .18s var(--ease-out);
}
.deck-link:hover{border-color:var(--copper-deep); background:var(--stone-2)}
.deck-link:active{transform:scale(.985)}
.dl-sig{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--copper);
}
.dl-sig svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.dl-body{flex:1; min-width:0}
.dl-body b{display:block; font-size:.92rem; font-weight:600; letter-spacing:-.01em}
.dl-body span{
  display:block; color:var(--lichen-dim); font-family:"JetBrains Mono",monospace;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; margin-top:3px;
}
.dl-go{flex:0 0 auto; color:var(--lichen-dim); width:16px; height:16px}
.deck-link:hover .dl-go{color:var(--copper)}

@media (min-width:720px){
  .deck{grid-template-columns:1.15fr 1fr; gap:12px; align-items:stretch}
  .deck-links{gap:12px}
}

/* ==========================================================================
   GÜN BAŞLIĞI
   ========================================================================== */
main{padding-top:34px; min-height:60vh}
.day-head{position:relative; padding-bottom:30px; margin-bottom:34px; border-bottom:1px solid var(--line)}
.dh-num{
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-size:clamp(5rem,26vw,10rem); line-height:.78; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px var(--line);
  position:absolute; right:-.06em; top:-.14em; z-index:0; pointer-events:none;
  user-select:none;
}
.dh-num-word{
  font-size:clamp(2.6rem,12vw,5rem); letter-spacing:-.04em; top:-.06em; right:0;
}
.dh-body{position:relative; z-index:1}
.kicker{color:var(--copper); text-transform:uppercase; letter-spacing:.18em; font-weight:700}
.kicker em{font-style:normal; color:var(--lichen-dim)}
.day-head h2{
  font-family:"Fraunces",Georgia,serif; font-weight:600;
  font-size:clamp(1.9rem,7.4vw,3rem); line-height:1.02; letter-spacing:-.03em;
  margin-top:10px; max-width:15ch;
}
.lede{color:var(--lichen); margin-top:14px; max-width:56ch; font-size:.9rem}
.dh-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.tag{
  border:1px solid var(--line); border-radius:2px; padding:5px 9px;
  color:var(--lichen); text-transform:uppercase; letter-spacing:.1em; font-size:.6rem;
  font-family:"JetBrains Mono",monospace; white-space:nowrap;
}
.tag.hot{border-color:var(--copper-deep); color:var(--copper-hi)}
.tag.warn{border-color:var(--alert); color:var(--alert); background:var(--alert-wash)}

/* katman ölçer — her segment bir durak */
.strata{display:flex; gap:3px; margin-top:22px; height:6px}
.strata i{
  flex:1; background:var(--line); border-radius:1px; position:relative; overflow:hidden;
  transition:background .45s var(--ease);
}
.strata i.on{background:var(--verdigris)}
.strata.full i{background:var(--verdigris)}
.strata.full::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sheen),transparent);
  animation:sheen 1.4s var(--ease) 1;
}
.strata{position:relative}
@keyframes sheen{from{transform:translateX(-100%)} to{transform:translateX(100%)}}
.strata-label{display:flex; justify-content:space-between; margin-top:8px; color:var(--lichen-dim); text-transform:uppercase}

/* ==========================================================================
   ROTA — omurga + duraklar
   ========================================================================== */
.sec-title{
  display:flex; align-items:center; gap:12px; margin:0 0 22px;
  color:var(--lichen-dim); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem;
  font-family:"JetBrains Mono",monospace;
}
.sec-title::after{content:""; flex:1; height:1px; background:var(--line)}

.route{position:relative; padding-left:46px}
.route::before{
  content:""; position:absolute; left:17px; top:6px; bottom:26px; width:1px; background:var(--line);
}
.route::after{
  content:""; position:absolute; left:17px; top:6px; width:1px;
  height:var(--draw,0%); max-height:calc(100% - 32px);
  background:linear-gradient(var(--copper-hi),var(--copper));
  transition:height .25s linear;
}
.route.alt::after{background:linear-gradient(var(--verdigris),var(--verdigris-deep))}

.stop{position:relative; margin-bottom:16px}
.node{
  position:absolute; left:-46px; top:16px; width:35px; height:35px; border-radius:50%;
  display:grid; place-items:center; z-index:2;
  background:var(--void); border:1px solid var(--line); color:var(--copper);
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.node svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.stop.done .node{color:var(--verdigris); border-color:var(--verdigris-deep); background:var(--verdigris-wash)}
.node .bloom{
  position:absolute; inset:-2px; border-radius:50%; border:1px solid var(--verdigris);
  opacity:0; pointer-events:none;
}
.node .bloom.go{animation:bloom .9s var(--ease-out) 1}
@keyframes bloom{
  from{opacity:.9; transform:scale(.7)}
  to{opacity:0; transform:scale(2.5)}
}

.card{
  background:var(--stone); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:18px 18px 16px; box-shadow:var(--shadow);
  transition:border-color .3s, box-shadow .3s, transform .3s var(--ease-out), opacity .35s;
}
.card:hover{border-color:var(--line); box-shadow:var(--shadow-lift)}
.stop.done .card{opacity:.62}
.stop.done .card:hover{opacity:.9}
.stop.flash .card{border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-wash)}

.card-head{display:flex; gap:14px; align-items:flex-start}
.card-head > div{flex:1; min-width:0}
.slot{color:var(--copper); text-transform:uppercase; letter-spacing:.12em; font-weight:700}
.stop.done .slot{color:var(--verdigris)}
.name{
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.22rem;
  letter-spacing:-.02em; line-height:1.2; margin-top:5px; position:relative; display:inline-block;
}
.name::after{
  content:""; position:absolute; left:0; right:0; top:56%; height:1px;
  background:var(--verdigris); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.stop.done .name::after{transform:scaleX(1)}
.stars{color:var(--lichen-dim); margin-top:6px; display:flex; align-items:center; gap:6px}
.stars b{color:var(--copper-hi); font-weight:700}

.tick{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; position:relative;
  border:1px solid var(--line); color:transparent; display:grid; place-items:center;
  transition:border-color .3s, background .3s, color .3s, transform .18s var(--ease-out);
}
.tick:hover{border-color:var(--verdigris)}
.tick:active{transform:scale(.86)}
.tick svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.tick .path{stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .4s .06s var(--ease-out)}
.stop.done .tick{background:var(--verdigris); border-color:var(--verdigris); color:var(--on-verdigris)}
.stop.done .tick .path{stroke-dashoffset:0}
.tick .ripple{
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--verdigris);
  opacity:0; pointer-events:none;
}
.tick .ripple.go{animation:bloom .7s var(--ease-out) 1}

/* durak fotografi */
.shot{position:relative; margin:-18px -18px 16px; overflow:hidden; background:var(--stone-2);
  border-radius:var(--r) var(--r) 0 0; aspect-ratio:16/9}
.shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transform:scale(1.04); transition:opacity .8s var(--ease-out), transform 1.2s var(--ease-out);
}
.shot img.loaded{opacity:1; transform:none}
.stop.done .shot img{filter:saturate(.55)}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 7px;
  font-family:"JetBrains Mono",monospace; font-size:.54rem; letter-spacing:.05em;
  color:rgba(255,255,255,.62); text-align:right; pointer-events:none;
  background:linear-gradient(transparent, rgba(0,0,0,.55));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* tarihce */
.lore{
  margin-top:14px; padding:13px 15px; border-radius:var(--r);
  background:var(--stone-2); border:1px solid var(--line-soft);
}
.lore-label{
  display:flex; align-items:center; gap:8px; color:var(--copper);
  font-family:"JetBrains Mono",monospace; font-size:.58rem;
  text-transform:uppercase; letter-spacing:.2em; margin-bottom:7px;
}
.lore-label::after{content:""; flex:1; height:1px; background:var(--line)}
.lore p{color:var(--lichen); font-size:.83rem; line-height:1.68}

.desc{color:var(--lichen); font-size:.875rem; margin-top:12px}
.why{
  margin-top:12px; padding-left:12px; border-left:2px solid var(--copper-deep);
  color:var(--limestone); font-size:.85rem;
}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}

/* açılır bilgi */
.facts{margin-top:14px; border-top:1px solid var(--line-soft); padding-top:12px}
.facts-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  color:var(--copper); font-family:"JetBrains Mono",monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.14em; padding:2px 0; min-height:44px;
}
.facts-btn .chev{transition:transform .35s var(--ease-out)}
.facts[open-state="1"] .facts-btn .chev{transform:rotate(180deg)}
.facts-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease-out), opacity .3s}
.facts-panel > div{overflow:hidden; min-height:0}
.facts[open-state="1"] .facts-panel{grid-template-rows:1fr}
.fact-list{padding-top:12px; display:grid; gap:10px}
.fact{display:grid; grid-template-columns:76px 1fr; gap:12px; align-items:baseline; font-size:.82rem}
.fact dt{
  font-family:"JetBrains Mono",monospace; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--lichen-dim); padding-top:2px;
}
.fact dd{color:var(--lichen)}
.fact.baby dd{color:var(--verdigris)}
.fact.warn dd{color:var(--alert)}

.acts{display:flex; gap:8px; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:var(--r); border:1px solid var(--line);
  font-size:.78rem; font-weight:600; letter-spacing:.01em; text-decoration:none;
  position:relative; overflow:hidden; flex:1;
  transition:border-color .25s, color .25s, background .25s, transform .18s var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn .ic{width:16px; height:16px}
.btn-nav{background:var(--copper); border-color:var(--copper); color:var(--on-copper); font-weight:700}
.btn-nav:hover{background:var(--copper-hi); border-color:var(--copper-hi)}
.btn-nav::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-140%);
}
.btn-nav:hover::after{animation:sheen 1s var(--ease) 1}
.btn-ghost{color:var(--lichen); flex:0 0 auto; width:46px; padding:0}
.btn-ghost:hover{color:var(--copper-hi); border-color:var(--copper-deep)}

/* ---------- alternatifler ---------- */
.alt-block{margin-top:44px}
.alt-block .sec-title{color:var(--verdigris)}
.alt-block .node{color:var(--verdigris); border-style:dashed}
.alt-block .slot{color:var(--verdigris)}

/* ---------- liste bölümleri (yemek / notlar) ---------- */
.list-block{margin-bottom:40px}
.row{
  display:flex; gap:14px; align-items:flex-start; padding:15px 0;
  border-top:1px solid var(--line-soft);
}
.row:first-of-type{border-top:0}
.row-sig{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--copper);
}
.row-sig svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.row-body{flex:1; min-width:0}
.row-body h4{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1rem; letter-spacing:-.015em}
.row-body p{color:var(--lichen); font-size:.83rem; margin-top:4px}
.row-nav{
  flex:0 0 auto; width:44px; height:44px; border-radius:var(--r); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--copper); transition:border-color .25s, color .25s, transform .18s;
}
.row-nav:hover{border-color:var(--copper); color:var(--copper-hi)}
.row-nav:active{transform:scale(.9)}

.note-card{
  border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:12px;
  background:var(--stone);
}
.note-card h4{
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.05rem;
  letter-spacing:-.02em; display:flex; align-items:center; gap:10px;
}
.note-card h4 svg{width:19px; height:19px; flex:0 0 auto; fill:none; stroke:var(--copper); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.note-card ul{margin-top:12px; display:grid; gap:9px}
.note-card li{
  color:var(--lichen); font-size:.85rem; padding-left:18px; position:relative;
}
.note-card li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--copper);
}
.note-card li b{color:var(--limestone); font-weight:600}

/* ---------- ev / üs kartı ---------- */
.base-card{
  margin-top:38px; border:1px solid var(--copper-deep); border-radius:var(--r);
  padding:20px; background:linear-gradient(150deg,var(--stone-2),var(--stone));
  position:relative; overflow:hidden;
}
.base-card h4{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.1rem; letter-spacing:-.02em}
.base-card p{color:var(--lichen); font-size:.84rem; margin-top:6px}
.base-card .acts{margin-top:16px}

/* ==========================================================================
   DOCK
   ========================================================================== */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  background:rgba(10,13,12,.92);
  background:color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-top:1px solid var(--line);
  padding:9px 0 calc(9px + env(safe-area-inset-bottom));
  transform:translateY(0); transition:transform .45s var(--ease-out);
}
.js .dock{transform:translateY(120%)}
.ready .dock{transform:translateY(0)}
.dock-inner{display:flex; align-items:center; gap:12px}
.dock-meter{
  width:64px; height:6px; flex:0 0 auto; border-radius:99px; background:var(--line);
  overflow:hidden;
}
.dock-meter i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--copper),var(--copper-hi));
  transition:width .9s var(--ease-out);
}
.dock-txt{flex:1; min-width:0}
.dock-txt b{display:block; font-size:.88rem; letter-spacing:-.01em; font-weight:600}
.dock-txt span{display:block; color:var(--lichen-dim); text-transform:uppercase; letter-spacing:.1em; font-size:.58rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ==========================================================================
   ARAMA
   ========================================================================== */
.sheet{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start; justify-content:center}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s}
.sheet.on .sheet-scrim{opacity:1}
.sheet-panel{
  position:relative; width:min(680px,calc(100% - 24px)); margin-top:min(12vh,90px);
  background:var(--stone); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lift); overflow:hidden;
  opacity:0; transform:translateY(-14px) scale(.98); transition:opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
.sheet.on .sheet-panel{opacity:1; transform:none}
.sheet-head{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--line-soft); color:var(--lichen-dim)}
.sheet-head input{
  flex:1; min-width:0; background:none; border:0; outline:none; color:var(--limestone);
  font-size:1rem; padding:8px 0;
}
.sheet-head input::placeholder{color:var(--lichen-dim)}
.sheet-body{max-height:min(60vh,460px); overflow-y:auto; padding:6px}
.res{
  display:flex; gap:12px; align-items:center; width:100%; text-align:left;
  padding:11px 12px; border-radius:var(--r); transition:background .18s;
}
.res:hover,.res:focus-visible{background:var(--stone-3)}
.res-sig{width:32px; height:32px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--copper)}
.res-sig svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.res-body{flex:1; min-width:0}
.res-body b{display:block; font-weight:600; font-size:.9rem; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res-body span{display:block; color:var(--lichen-dim); font-family:"JetBrains Mono",monospace; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; margin-top:2px}
.res.done .res-sig{color:var(--verdigris); border-color:var(--verdigris-deep)}
.empty{padding:30px 16px; text-align:center; color:var(--lichen-dim); font-size:.85rem}

/* ==========================================================================
   DİYALOG
   ========================================================================== */
.sheet-panel.dlg-panel{
  width:min(430px,calc(100% - 32px)); margin-top:min(24vh,150px); padding:24px;
}
.dlg-title{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.25rem; letter-spacing:-.02em}
.dlg-body{color:var(--lichen); font-size:.86rem; margin-top:8px}
.dlg-body[hidden]{display:none}
.dlg-input{
  width:100%; margin-top:18px; padding:13px 14px; font-size:.95rem;
  background:var(--stone-2); border:1px solid var(--line); border-radius:var(--r);
  color:var(--limestone); outline:none;
}
.dlg-input:focus{border-color:var(--copper)}
.dlg-input[hidden]{display:none}
.dlg-acts{display:flex; gap:8px; margin-top:20px}
.dlg-acts .btn{flex:1}
.btn.btn-danger{background:var(--alert); border-color:var(--alert); color:var(--on-copper)}
.btn.btn-danger::after{content:none}

/* ==========================================================================
   TANITIM TURU — sadece ilk açılışta
   ========================================================================== */
.tour{position:fixed; inset:0; z-index:80}
.tour[hidden]{display:none}
.tour-veil{
  position:absolute; inset:0; background:rgba(0,0,0,.78); cursor:pointer;
  transition:clip-path .45s var(--ease-out);
}
.tour-hole{
  position:absolute; border-radius:8px; pointer-events:none;
  border:1.5px solid var(--copper); background:transparent;
  transition:top .45s var(--ease-out), left .45s var(--ease-out),
             width .45s var(--ease-out), height .45s var(--ease-out), opacity .3s;
}
.tour-hole::after{
  content:""; position:absolute; inset:-5px; border-radius:12px;
  border:1px solid rgba(206,124,61,.45);
}
.tour-pop{
  position:absolute; width:min(310px, calc(100vw - 32px));
  background:var(--stone); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lift); padding:16px 17px 14px;
  transition:top .45s var(--ease-out), left .45s var(--ease-out), opacity .3s;
}
.tour-step{color:var(--copper); letter-spacing:.18em; text-transform:uppercase; font-size:.56rem}
.tour-title{
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.06rem;
  letter-spacing:-.02em; margin-top:5px;
}
.tour-text{color:var(--lichen); font-size:.84rem; line-height:1.6; margin-top:6px}
.tour-acts{display:flex; align-items:center; gap:10px; margin-top:15px}
.tour-skip{
  color:var(--lichen-dim); font-size:.75rem; font-weight:600; min-height:44px;
  padding:0 4px; transition:color .2s;
}
.tour-skip:hover{color:var(--limestone)}
.tour-dots{flex:1; display:flex; gap:5px; justify-content:center}
.tour-dots i{width:5px; height:5px; border-radius:50%; background:var(--line); transition:background .3s, transform .3s}
.tour-dots i.on{background:var(--copper); transform:scale(1.35)}
.tour-next{flex:0 0 auto; min-width:104px; padding:0 18px}
.tour-replay{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:6px;
  color:var(--copper); font-family:"JetBrains Mono",monospace; font-size:.64rem;
  text-transform:uppercase; letter-spacing:.14em; border-bottom:1px solid var(--line);
}
.tour-replay:hover{color:var(--copper-hi); border-bottom-color:var(--copper)}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:70;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--stone-3); border:1px solid var(--line); color:var(--limestone);
  padding:11px 16px; border-radius:var(--r); font-size:.82rem; max-width:calc(100% - 40px);
  box-shadow:var(--shadow-lift); transition:opacity .3s, transform .35s var(--ease-out);
}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast b{color:var(--verdigris)}

/* ==========================================================================
   COLOPHON
   ========================================================================== */
.colophon{
  padding:40px 20px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft); margin-top:26px;
  display:flex; justify-content:center;
}

/* ==========================================================================
   GİRİŞ ANİMASYONLARI
   ========================================================================== */
.js .reveal{opacity:0; transform:translateY(24px)}
.js .reveal{transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1; transform:none}

.swap-out{animation:swapOut .22s var(--ease) forwards}
@keyframes swapOut{to{opacity:0; transform:translateY(-10px)}}

/* ==========================================================================
   GENİŞ EKRAN
   ========================================================================== */
@media (min-width:720px){
  :root{--gut:32px}
  body{font-size:16px}
  .route{padding-left:64px}
  .route::before,.route::after{left:23px}
  .node{left:-64px; width:47px; height:47px; top:14px}
  .node svg{width:24px; height:24px}
  .card{padding:24px}
  .shot{margin:-24px -24px 20px}
  .fact{grid-template-columns:96px 1fr}
  .mh-stats{gap:1px}
  .dock-meter{width:90px}
}

@media (min-width:1040px){
  .masthead .mh-inner{padding-bottom:38px}
}

/* ==========================================================================
   HAREKET AZALTMA
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .js .reveal{opacity:1; transform:none}
  .js .mh-title .w > span{transform:none}
  .js .mh-sub{opacity:1; transform:none}
  .js .dock{transform:none}
  .haze{display:none}
}