/* ==========================================================================
   Desiber Travel — alacakaranlık paleti, editoryal düzen
   ========================================================================== */

:root{
  /* palet */
  --krem:#F5E9D7;
  --beyaz:#FFFFFF;
  --mrk:#0B3B3C;          /* koyu teal — ana metin ve koyu zemin */
  --mrk-koyu:#072A2B;
  --sus:#4A6A6B;          /* susturulmuş metin (kontrast 4.9:1) */
  --sus-acik:#9FBDBC;     /* koyu zeminde susturulmuş */
  --vrg:#FF6B4A;          /* mercan — çizgi, yay, vurgu */
  --vrg-koyu:#A8401F;     /* krem zeminde metin güvenli mercan (5.1:1) */
  --vrg-acik:#FF8A6B;     /* koyu zeminde metin güvenli mercan (5.3:1) */
  --cizgi:#E0D2BC;
  --cizgi-koyu:#1C4E4F;

  /* tipografi */
  --disp:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --govde:clamp(1rem,.95rem + .25vw,1.0625rem);
  --t-kucuk:.875rem;
  --t-minik:.75rem;
  --h1:clamp(2.5rem,6vw,5.5rem);
  --h2:clamp(1.9rem,3.6vw,3.25rem);
  --h3:clamp(1.45rem,2.2vw,2rem);

  /* boşluk ritmi */
  --b1:.25rem; --b2:.5rem; --b3:.75rem; --b4:1rem; --b5:1.5rem;
  --b6:2rem; --b7:3rem; --b8:4rem; --b9:6rem; --b10:8rem;
  --kenar:clamp(1.25rem,5vw,6rem);
  --bolum-pd:clamp(4rem,9vw,8rem);

  --eas:cubic-bezier(.22,1,.36,1);
  --vw:100vw;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--krem);color:var(--mrk);
  font-family:var(--sans);font-size:var(--govde);line-height:1.7;
  font-weight:400;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--vrg-koyu);outline-offset:3px}
.bolum-koyu :focus-visible,.hero :focus-visible,.alt :focus-visible{outline-color:var(--vrg)}

.atla{
  position:fixed;left:var(--b4);top:var(--b4);z-index:200;
  transform:translateY(-160%);background:var(--mrk);color:var(--krem);
  padding:var(--b3) var(--b5);text-decoration:none;font-size:var(--t-kucuk);
  transition:transform .25s var(--eas);
}
.atla:focus{transform:none}

.kap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--kenar)}
.gizli-baslik{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- tipografi bileşenleri ---------- */
.etiket{
  font-size:var(--t-minik);letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;color:var(--sus);font-weight:600;margin-bottom:var(--b4);
}
.etiket-acik{color:var(--sus-acik)}
/* Kahraman etiketi FOTOGRAF uzerinde duruyor; acik zemin icin secilmis --sus
   tonu gokyuzunde okunmuyordu. Kahramanda her zaman acik varyant. */
.hero .etiket{color:rgba(255,255,255,.88);
  text-shadow:0 1px 12px rgba(0,0,0,.45)}
.b2{font-size:var(--h2);line-height:1.08;letter-spacing:-.02em;max-width:20ch}
.b3{font-size:var(--h3);line-height:1.15;letter-spacing:-.015em;max-width:24ch}
.b2-acik,.b3-acik{color:var(--krem)}
.gvd{max-width:62ch;line-height:1.75}
.gvd + .gvd{margin-top:var(--b4)}
.gvd-acik{color:var(--sus-acik)}

.tire-liste li{
  display:grid;grid-template-columns:1.35rem 1fr;
  font-size:var(--t-kucuk);line-height:1.6;padding-block:var(--b3);
  border-bottom:1px solid var(--cizgi);
}
.tire-liste li::before{content:"—";color:var(--vrg-koyu)}
.tire-liste li:first-child{border-top:1px solid var(--cizgi)}

/* etiket–değer satırları */
.vd{margin-top:var(--b5);font-size:var(--t-kucuk)}
.vd > div{
  display:grid;grid-template-columns:minmax(7.5rem,38%) 1fr;gap:var(--b4);
  padding-block:.55rem;border-top:1px solid var(--cizgi);
}
.vd dt{color:var(--sus);letter-spacing:.02em}
.vd dd{margin:0;font-variant-numeric:tabular-nums}
.bolum-koyu .vd > div,.panel .vd > div{border-color:var(--cizgi-koyu)}
.bolum-koyu .vd dt,.panel .vd dt{color:var(--sus-acik)}
.bolum-koyu .vd dd,.panel .vd dd{color:var(--krem)}
.vd-genis > div{grid-template-columns:minmax(9rem,32%) 1fr}

/* ---------- bağlantı ve düğme ---------- */
.dugme{
  display:inline-block;background:var(--mrk);color:var(--krem);
  padding:.95rem 1.6rem;border:1px solid var(--mrk);border-radius:0;
  font-size:var(--t-kucuk);font-weight:600;letter-spacing:.02em;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background .3s var(--eas),color .3s var(--eas),transform .3s var(--eas);
}
.dugme:hover{background:var(--vrg-koyu);border-color:var(--vrg-koyu);transform:translateY(-2px)}
.hero .dugme{background:var(--krem);color:var(--mrk);border-color:var(--krem)}
.hero .dugme:hover{background:var(--vrg);border-color:var(--vrg);color:var(--mrk-koyu)}

.bag{
  display:inline-flex;align-items:center;gap:.5rem;position:relative;
  font-size:var(--t-kucuk);font-weight:600;letter-spacing:.02em;
  text-decoration:none;padding-bottom:.3rem;color:var(--mrk);
}
.bag::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:left;transform:scaleX(1);
  transition:transform .35s var(--eas);
}
.bag:hover::after{transform:scaleX(0);transform-origin:right}
.bag::before{content:"→";font-size:.9em;order:2;transition:transform .35s var(--eas)}
.bag:hover::before{transform:translateX(5px)}
.bag-acik{color:var(--krem)}

/* ==========================================================================
   ÜST — sabit başlık
   ========================================================================== */
.ust{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s var(--eas),border-color .4s var(--eas),color .4s var(--eas);
  border-bottom:1px solid transparent;color:var(--krem);
}
.ust.kati{background:var(--krem);color:var(--mrk);border-bottom-color:var(--cizgi)}
.ust-ic{
  max-width:1320px;margin-inline:auto;padding:var(--b4) var(--kenar);
  display:flex;align-items:center;gap:var(--b5);
}
.marka{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.marka-im{width:26px;height:26px;flex:0 0 auto}
.marka-ad{font-family:var(--disp);font-size:1.3rem;letter-spacing:.01em;line-height:1}
.marka-ad em{font-style:italic;opacity:.8}

.gez{display:flex;gap:clamp(1rem,2vw,2rem);margin-left:auto}
.gez a{
  position:relative;font-size:var(--t-kucuk);font-weight:500;text-decoration:none;
  padding-block:.35rem;
}
.gez a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--eas);
}
.gez a:hover::after{transform:scaleX(1);transform-origin:left}

.ust-sag{display:flex;align-items:center;gap:var(--b4);margin-left:var(--b5)}
.dil{display:flex;align-items:center;gap:.55rem}
.dil-d{
  background:none;border:0;padding:.35rem .15rem;cursor:pointer;
  font-size:var(--t-minik);letter-spacing:.12em;font-weight:600;opacity:.55;
  transition:opacity .25s var(--eas);
}
.dil-d[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.dil-d:hover{opacity:1}
.dil-ayrac{width:1px;height:12px;background:currentColor;opacity:.35}

.menu-d{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  padding:0;place-items:center;
}
.menu-d span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s var(--eas),opacity .3s var(--eas)}
.menu-d span + span{margin-top:6px}
.menu-d[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-d[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--kenar) clamp(4rem,9vh,7rem);
  overflow:hidden;color:var(--krem);
}
.hero-kare{position:absolute;inset:0;background:var(--renk,#8c8679);overflow:hidden}
.hero-kare img{
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  transform:scale(1.08);opacity:0;
  transition:transform 1.8s var(--eas),opacity 1.1s ease;
}
.hero.giris .hero-kare img{transform:scale(1);opacity:1}
.hero-kare::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,42,43,.55) 0%,rgba(7,42,43,.12) 34%,rgba(7,42,43,.72) 100%);
}
.hero-yazi{position:relative;max-width:1320px;width:100%;margin-inline:auto}
.hero-baslik{
  font-size:var(--h1);line-height:1.05;letter-spacing:-.03em;max-width:16ch;
  margin-block:var(--b3) var(--b5);
}
.satir{display:block;overflow:hidden}
.satir > span{
  display:block;padding-bottom:.16em;margin-bottom:-.16em;
  transform:translateY(105%);
  transition:transform 1s var(--eas);
}
.hero.giris .satir > span{transform:translateY(0)}
.hero.giris .satir:nth-child(2) > span{transition-delay:.1s}

.hero-etiket-sar{overflow:hidden}
.hero .etiket,.hero-alt,.hero-eylem{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--eas),transform .8s var(--eas);
}
.hero.giris .etiket{opacity:1;transform:none;transition-delay:.05s}
.hero.giris .hero-alt{opacity:1;transform:none;transition-delay:.42s}
.hero.giris .hero-eylem{opacity:1;transform:none;transition-delay:.54s}
.hero .etiket{color:#E8DCC8}
.hero-alt{max-width:46ch;font-size:1.0625rem;line-height:1.7;color:#EADFCC}
.hero-eylem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b5);margin-top:var(--b6)}

.hero-kaydir{
  position:absolute;right:var(--kenar);bottom:clamp(4rem,9vh,7rem);
  font-size:var(--t-minik);letter-spacing:.18em;text-transform:uppercase;
  writing-mode:vertical-rl;color:#EADFCC;opacity:0;transition:opacity .8s ease .9s;
}
.hero.giris .hero-kaydir{opacity:.85}
.hero-kaydir span{display:block;animation:kay 2.4s var(--eas) infinite}
@keyframes kay{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* ==========================================================================
   BÖLÜM ZEMİNLERİ
   ========================================================================== */
.bolum{padding-block:var(--bolum-pd)}
.bolum-krem{background:var(--krem)}
.bolum-beyaz{background:var(--beyaz);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.bolum-koyu{background:var(--mrk);color:var(--krem)}
.bolum-pad{padding-block:var(--bolum-pd)}
.bolum-bas{margin-bottom:clamp(2.5rem,5vw,4rem)}
.bolum-bas .gvd{margin-top:var(--b5)}
.ince{border:0;border-top:1px solid var(--cizgi);margin-block:clamp(2.5rem,5vw,4rem)}

/* ---------- giriş ---------- */
.giris-izgara{display:grid;grid-template-columns:3fr 5fr 4fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.giris-sag{align-self:start}

.sayilar{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--cizgi);
}
.sayi{padding:var(--b5) var(--b4) 0 0;border-left:1px solid var(--cizgi);padding-left:var(--b4)}
.sayi:first-child{border-left:0;padding-left:0}
.sayi dt{font-size:var(--t-minik);letter-spacing:.14em;text-transform:uppercase;color:var(--sus);order:2}
.sayi dd{display:flex;align-items:baseline;gap:.2rem;margin-bottom:var(--b2)}
.sy{
  font-family:var(--disp);font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.sy-ek{font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.6rem);color:var(--vrg-koyu)}

/* ==========================================================================
   YOLCULUK — pinlenmiş yatay şerit
   ========================================================================== */
.yolculuk{padding-block:var(--bolum-pd) 0;overflow-x:clip}
.yolculuk-ust{margin-bottom:clamp(2rem,4vw,3.5rem)}
.yol-sar{height:calc(5 * 100svh)}
.yol-yapis{position:sticky;top:0;height:100svh;overflow:hidden}
.yol-ray{display:flex;height:100%;will-change:transform}
.panel{
  flex:0 0 var(--vw);width:var(--vw);height:100%;
  display:grid;grid-template-columns:53% 1fr;align-items:center;
  gap:clamp(1.5rem,3.5vw,3.5rem);
  padding:clamp(1.5rem,4vh,3rem) var(--kenar) clamp(3rem,7vh,4.5rem);
}
.panel-kare{
  position:relative;height:min(72svh,37rem);background:var(--renk,#0B3B3C);
  overflow:hidden;
}
.panel-ic{position:absolute;inset:0 -7%;display:block;will-change:transform}
.panel-kare img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--eas)}
.panel-yazi{max-width:38ch}
.panel-no{
  display:flex;align-items:baseline;gap:var(--b4);
  font-size:var(--t-minik);letter-spacing:.16em;text-transform:uppercase;color:var(--sus-acik);
}
.sayilik{
  font-family:var(--disp);font-size:1.5rem;letter-spacing:0;color:var(--vrg-acik);
  font-variant-numeric:tabular-nums;text-transform:none;
}
.panel-yazi .b3{margin-top:var(--b3)}
.panel-ust{font-family:var(--disp);font-size:1.25rem;color:var(--vrg-acik);margin-top:var(--b1)}
.panel-p{margin-top:var(--b4);color:var(--sus-acik);font-size:var(--t-kucuk);line-height:1.75}
.panel .bag{margin-top:var(--b5)}

.yol-ilerleme{
  display:flex;align-items:center;gap:var(--b5);
  padding-block:var(--b5) var(--bolum-pd);
}
.yol-sayac{font-size:var(--t-minik);letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--sus-acik)}
.yol-bolu{opacity:.5;margin-inline:.15rem}
.yol-cubuk{flex:1;height:1px;background:var(--cizgi-koyu);position:relative;overflow:hidden}
.yol-cubuk span{
  position:absolute;inset:0;background:var(--vrg);
  transform:scaleX(.2);transform-origin:left;transition:transform .2s linear;
}

/* ==========================================================================
   HARİTA — imza gösterim
   ========================================================================== */
.harita-izgara{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.kure-sar{position:sticky;top:6rem}
.kure{width:100%;max-width:540px;height:auto;margin-inline:auto;display:block}
.kure-not{
  margin-top:var(--b4);text-align:center;font-size:var(--t-minik);
  letter-spacing:.12em;text-transform:uppercase;color:var(--sus);
}
.kn-halka{fill:none;stroke:#F5E9D7;stroke-width:1.4;opacity:.9}
.kn-dolgu{fill:#F5E9D7}
.kn-secili .kn-dolgu{fill:var(--vrg)}
.kn-secili .kn-halka{stroke:var(--vrg)}
.kn-yazi{
  font-family:var(--sans);font-size:12px;font-weight:600;fill:#F5E9D7;
  letter-spacing:.04em;paint-order:stroke;stroke:#072425;stroke-width:3px;
}
.kn-sol .kn-yazi{text-anchor:end}
.kure path{transition:opacity .4s var(--eas)}

.rota-sec{display:flex;flex-wrap:wrap;gap:var(--b2) var(--b5);border-bottom:1px solid var(--cizgi);padding-bottom:var(--b4)}
.rs-d{
  background:none;border:0;padding:.4rem 0;cursor:pointer;position:relative;
  font-size:var(--t-kucuk);font-weight:600;color:var(--sus);
  transition:color .25s var(--eas);
}
.rs-d::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vrg);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--eas);
}
.rs-d:hover{color:var(--mrk)}
.rs-d[aria-selected="true"]{color:var(--mrk)}
.rs-d[aria-selected="true"]::after{transform:scaleX(1)}

.rota-detay{padding-top:var(--b6)}
.rota-detay:focus-visible{outline-offset:8px}
.rota-ust{font-family:var(--disp);font-size:1.3rem;color:var(--vrg-koyu);margin-top:var(--b1)}
.gunler{margin-top:var(--b6);border-top:1px solid var(--cizgi)}
.gunler li{
  display:grid;grid-template-columns:4.5rem 1fr;gap:var(--b4);
  padding-block:var(--b3);border-bottom:1px solid var(--cizgi);
  font-size:var(--t-kucuk);line-height:1.65;
  animation:gunAc .55s var(--eas) backwards;
}
.gunler li .gn{
  font-size:var(--t-minik);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sus);font-weight:600;padding-top:.15rem;
}
@keyframes gunAc{from{opacity:0;transform:translateY(10px)}}
#rotaSor{margin-top:var(--b6)}

/* ==========================================================================
   YÖNTEM — editoryal sekans
   ========================================================================== */
.sekans{
  max-width:1320px;margin-inline:auto;padding-inline:var(--kenar);
  display:grid;gap:clamp(1.5rem,3vw,3.5rem);align-items:end;
  margin-block:clamp(3.5rem,7vw,6rem);
}
.sekans:last-child{margin-bottom:0}
.sekans-genis{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.sekans-dar{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.sekans-ters .sk-kare{order:2}
.sekans-tam{max-width:none;padding-inline:0;grid-template-columns:1fr;align-items:start}
.sekans-tam .sk-yazi{max-width:1320px;margin-inline:auto;padding-inline:var(--kenar);width:100%}
.sk-yazi-tam{display:grid;grid-template-columns:1fr;max-width:70ch}

.sk-kare{margin:0;position:relative}
.sk-sar{display:block;overflow:hidden;background:var(--renk,#8c8679)}
.sk-kare img{width:100%;height:auto;transform:scale(1.06);transition:transform 1.4s var(--eas)}
.sk-kare figcaption{
  margin-top:var(--b3);font-size:var(--t-minik);color:var(--sus);
  letter-spacing:.02em;line-height:1.5;
}
.sk-no{
  font-family:var(--disp);font-size:1.6rem;color:var(--vrg-koyu);
  font-variant-numeric:tabular-nums;line-height:1;margin-bottom:var(--b3);
}
.sk-yazi .b3{margin-bottom:var(--b4)}
.sk-yazi .vd{margin-top:var(--b6)}
.sekans-tam .sk-kare figcaption{max-width:1320px;margin-inline:auto;padding-inline:var(--kenar)}

/* ==========================================================================
   EKİP
   ========================================================================== */
.ekip-izgara{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,4vw,5rem);align-items:start}
.ekip-liste li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--b4);
  padding-block:var(--b4);border-top:1px solid var(--cizgi-koyu);
  transition:padding-left .35s var(--eas);
}
.ekip-liste li:last-child{border-bottom:1px solid var(--cizgi-koyu)}
.ekip-liste li:hover{padding-left:var(--b3)}
.ek-ad{font-family:var(--disp);font-size:1.3rem;line-height:1.2}
.ek-un{font-size:var(--t-kucuk);color:var(--sus-acik);align-self:center}

/* ==========================================================================
   SÖZLER
   ========================================================================== */
.soz{margin:0}
.soz blockquote{margin:0}
.soz blockquote p{
  font-family:var(--disp);font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.28;
  letter-spacing:-.015em;max-width:26ch;
}
.soz blockquote p::before{content:"“"}
.soz blockquote p::after{content:"”"}
.soz figcaption{margin-top:var(--b5);display:flex;flex-wrap:wrap;gap:.15rem var(--b4);align-items:baseline}
.soz-ad{font-weight:600;font-size:var(--t-kucuk)}
.soz-not{font-size:var(--t-minik);letter-spacing:.1em;text-transform:uppercase;color:var(--sus)}
#sozler .soz:nth-of-type(2){margin-left:auto;text-align:right}
#sozler .soz:nth-of-type(2) blockquote p{margin-left:auto}
#sozler .soz:nth-of-type(2) figcaption{justify-content:flex-end}

/* ==========================================================================
   İLETİŞİM
   ========================================================================== */
.iletisim-izgara{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.ilt-sol .gvd{margin-top:var(--b5)}
.ilt-bilgi{margin-top:clamp(2rem,4vw,3rem)}
.ilt-bilgi a{text-decoration:none;border-bottom:1px solid var(--cizgi);transition:border-color .3s var(--eas)}
.ilt-bilgi a:hover{border-color:var(--vrg-koyu)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--b5) var(--b5)}
.alan{display:flex;flex-direction:column;gap:var(--b2)}
.alan-tam{grid-column:1/-1}
.form label{font-size:var(--t-minik);letter-spacing:.12em;text-transform:uppercase;color:var(--sus);font-weight:600}
.form input,.form select,.form textarea{
  background:transparent;border:0;border-bottom:1px solid var(--cizgi);
  padding:.7rem 0;border-radius:0;font-size:var(--govde);
  transition:border-color .3s var(--eas);
}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sus) 50%),linear-gradient(135deg,var(--sus) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
.form textarea{resize:vertical;line-height:1.6}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--sus)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--vrg-koyu);outline:none}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--vrg-koyu);outline-offset:4px}
.form .dugme{grid-column:1/-1;justify-self:start}
.alan.hatali input,.alan.hatali textarea{border-color:var(--vrg-koyu)}
.form-durum{grid-column:1/-1;font-size:var(--t-kucuk);min-height:1.4em;color:var(--vrg-koyu)}
.form-durum.iyi{color:var(--mrk)}
.form-kvkk{grid-column:1/-1;font-size:var(--t-minik);color:var(--sus);line-height:1.55;max-width:48ch}

/* ==========================================================================
   ALT
   ========================================================================== */
.alt{background:var(--mrk-koyu);color:var(--krem);padding-block:clamp(3rem,6vw,5rem)}
.alt-ic{display:grid;grid-template-columns:4fr 4fr 4fr;gap:var(--b6);align-items:start}
.marka-ad-alt{font-size:1.6rem;display:block}
.alt-slogan{margin-top:var(--b3);font-size:var(--t-kucuk);color:var(--sus-acik);max-width:30ch}
.alt-gez{display:flex;flex-direction:column;gap:var(--b3)}
.alt-gez a{font-size:var(--t-kucuk);text-decoration:none;color:var(--sus-acik);width:fit-content;transition:color .25s var(--eas)}
.alt-gez a:hover{color:var(--krem)}
.alt-hak{font-size:var(--t-minik);color:var(--sus-acik);line-height:1.7}
.alt-demo{opacity:.7}

/* ==========================================================================
   HAREKET — kaydırma açılımı
   ========================================================================== */
.ac{opacity:0;transform:translateY(30px);transition:opacity .85s var(--eas),transform .85s var(--eas)}
.ac.gor{opacity:1;transform:none}
.ac[data-g="1"]{transition-delay:.08s}
.ac[data-g="2"]{transition-delay:.16s}
.ac[data-g="3"]{transition-delay:.24s}
.ac[data-g="4"]{transition-delay:.32s}
.sk-kare.gor img{transform:scale(1)}
.sk-kare:hover img{transform:scale(1.04);transition-duration:.6s}
.panel-kare.gor img{transform:scale(1)}

/* ==========================================================================
   DUYARLILIK
   ========================================================================== */
@media (max-width:1100px){
  .giris-izgara{grid-template-columns:1fr 1fr;gap:var(--b6)}
  .giris-sol{grid-column:1/-1}
  .harita-izgara{grid-template-columns:1fr;gap:var(--b7)}
  .kure-sar{position:static}
  .ekip-izgara{grid-template-columns:1fr;gap:var(--b6)}
  .iletisim-izgara{grid-template-columns:1fr}
}

@media (max-width:1000px){
  .menu-d{display:grid}
  /* dokunma hedefleri en az 44x44 */
  .marka{min-height:44px}
  .dil-d{min-width:44px;min-height:44px}
  .rs-d{min-height:44px}
  .bag{min-height:44px;align-items:center}
  .alt-gez a{min-height:44px;display:inline-flex;align-items:center}
  .ilt-bilgi a{display:inline-block;padding-block:.65rem}
  .form input,.form select,.form textarea{padding-block:.85rem}
  .gez{
    position:fixed;inset:0;background:var(--mrk);color:var(--krem);
    flex-direction:column;justify-content:center;gap:var(--b5);
    padding:var(--kenar);margin:0;
    transform:translateY(-100%);transition:transform .5s var(--eas);
    visibility:hidden;
  }
  .gez.acik{transform:none;visibility:visible}
  .gez a{font-family:var(--disp);font-size:clamp(1.75rem,7vw,2.5rem);padding-block:.2rem}
  .ust-sag{margin-left:auto}

  /* pinleme kapanır — dikey editoryal sıraya döner */
  .yol-sar{height:auto}
  .yol-yapis{position:static;height:auto;overflow:visible}
  .yol-ray{flex-direction:column;transform:none !important;height:auto}
  .panel{
    flex:0 0 auto;width:100%;height:auto;grid-template-columns:1fr;
    padding:0 var(--kenar) clamp(3rem,8vw,4.5rem);
  }
  .panel-kare{height:auto;aspect-ratio:3/2}
  .panel-yazi{max-width:52ch}
  .yol-ilerleme{display:none}
  .yolculuk{padding-bottom:var(--bolum-pd)}
}

@media (max-width:820px){
  .sekans-genis,.sekans-dar{grid-template-columns:1fr}
  .sekans-ters .sk-kare{order:0}
  .sayilar{grid-template-columns:1fr 1fr}
  .sayi{padding-top:var(--b5);border-top:1px solid var(--cizgi)}
  .sayi:nth-child(odd){border-left:0;padding-left:0}
  .sayilar{border-top:0}
  .alt-ic{grid-template-columns:1fr;gap:var(--b6)}
  #sozler .soz:nth-of-type(2){text-align:left;margin-left:0}
  #sozler .soz:nth-of-type(2) figcaption{justify-content:flex-start}
  #sozler .soz:nth-of-type(2) blockquote p{margin-left:0}
}

@media (max-width:620px){
  .giris-izgara{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .ekip-liste li{grid-template-columns:1fr;gap:var(--b1)}
  .vd > div{grid-template-columns:1fr;gap:.1rem}
  .vd dt{font-size:var(--t-minik);letter-spacing:.12em;text-transform:uppercase}
  .hero-kaydir{display:none}
  .gunler li{grid-template-columns:1fr;gap:.1rem}
}

/* ==========================================================================
   HAREKET AZALTMA
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
  }
  .ac{opacity:1;transform:none}
  .satir > span{transform:none}
  .hero-kare img{opacity:1;transform:none}
  .sk-kare img,.panel-kare img{transform:none}
  .hero .etiket,.hero-alt,.hero-eylem,.hero-kaydir{opacity:1;transform:none}
  .gunler li{animation:none}
  .hero-kaydir span{animation:none}
}
