/* ============================================================
   PETRAŞ İNŞAAT — site.css
   Palet: derin lacivert (su/gece) · su mavisi · toprak okrası
   ============================================================ */

:root{
  /* --- LOGO KİMLİĞİ: Petra kumtaşı · espresso · bronz --- */
  --koyu-900:#150C05;
  --koyu-800:#251507;   /* logo zemini */
  --koyu-700:#35210F;
  --koyu-600:#4A2E17;

  --bronz-500:#A9633C;  /* ana vurgu */
  --bronz-400:#C4835A;
  --bronz-300:#DCBC98;  /* logodaki kum tonu */
  --bronz-100:#F0E2CE;

  /* --- SU: işin doğası · ikincil vurgu --- */
  --su-600:#1B6C93;
  --su-500:#2E8BB4;
  --su-400:#57ACD0;
  --su-300:#93CBE3;

  --kum-200:#E8D6BC;

  --kar:#F1F5F7;
  --duman:#DCE6EB;
  --gri-500:#7B8A93;
  --gri-700:#3B4952;

  --metin:#12202A;
  --metin-ters:#F3E8D9;

  --olcu:clamp(1.25rem, 4vw, 4.5rem);
  --kutu:1440px;

  --gecis:.55s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.7; color:var(--metin);
  background:var(--kar);
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{
  font-family:"Archivo","Inter",sans-serif;
  font-weight:800; line-height:1.03; letter-spacing:-.032em;
  margin:0; text-wrap:balance;
}
p{margin:0}
::selection{background:var(--bronz-500);color:#fff}

section[id]{scroll-margin-top:92px}
.kap{width:100%;max-width:var(--kutu);margin-inline:auto;padding-inline:var(--olcu)}
.dar{max-width:920px}

/* --- etiket / mono --- */
.etiket{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronz-500); font-weight:500;
  display:inline-flex; align-items:center; gap:.7em;
}
.etiket::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55;
}
.etiket--ters{color:var(--bronz-300)}

/* ============================ HEADER ============================ */
.ust{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background var(--gecis), backdrop-filter var(--gecis), border-color var(--gecis);
  border-bottom:1px solid transparent;
}
.ust__ic{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  height:84px; transition:height var(--gecis);
}
.ust.kucuk{
  background:rgba(21,12,5,.86);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:rgba(255,255,255,.09);
}
.ust.kucuk .ust__ic{height:66px}

.marka{display:flex;align-items:center;gap:.85rem;color:#fff}
.marka__im{
  width:auto;height:42px;flex:none;
  transition:height var(--gecis);
}
.ust.kucuk .marka__im{height:34px}
.marka__ad{display:flex;flex-direction:column;line-height:1}
.marka__ad b{
  font-family:"Bodoni Moda","Archivo",serif; font-weight:600;
  font-size:1.3rem; letter-spacing:.1em;
}
.marka__ad span{
  font-family:"JetBrains Mono",monospace;
  font-size:.54rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bronz-400); margin-top:.5em;
}

.menu{display:flex;align-items:center;gap:2.1rem}
.menu a{
  color:rgba(255,255,255,.82); font-size:.86rem; font-weight:500;
  letter-spacing:.01em; position:relative; padding-block:.4rem;
  transition:color .25s;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--bronz-400); transition:right .35s cubic-bezier(.22,1,.36,1);
}
.menu a:hover{color:#fff}
.menu a:hover::after{right:0}

.tel-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.72rem 1.35rem; border-radius:999px;
  background:var(--bronz-500); color:#fff; font-weight:600; font-size:.85rem;
  border:1px solid transparent;
  transition:background .25s, transform .25s, box-shadow .25s;
  box-shadow:0 8px 24px -10px rgba(169,99,60,.85);
}
.tel-btn:hover{background:var(--bronz-400); transform:translateY(-1px)}

.menu-ac{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-ac span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.3s}

/* ============================ HERO ============================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--koyu-900); overflow:hidden; isolation:isolate;
}
.hero__gorsel{
  position:absolute; inset:0; z-index:-2;
}
.hero__gorsel img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.06); animation:yavasZoom 22s ease-out forwards;
}
@keyframes yavasZoom{to{transform:scale(1)}}
.hero__perde{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(15,10,6,.82) 0%, rgba(15,10,6,.26) 34%, rgba(13,20,26,.58) 72%, rgba(11,17,22,.96) 100%),
    linear-gradient(92deg, rgba(13,12,10,.86) 0%, rgba(13,12,10,.46) 38%, rgba(13,12,10,.06) 66%);
}
.hero__ic{padding-block:min(13vh,7rem) 3rem; color:#fff; width:100%}
.hero h1{
  font-size:clamp(2.6rem, 6.2vw, 5.5rem);
  max-width:16ch; margin-top:1.3rem;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero h1 em{
  font-style:normal; color:var(--bronz-300);
  display:inline-block;
}
.hero__alt{
  margin-top:1.7rem; max-width:56ch;
  font-size:clamp(1rem,1.35vw,1.18rem); color:rgba(243,232,217,.86);
}
.hero__eylem{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.6rem}
.dugme{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.9rem;border-radius:999px;font-weight:600;font-size:.92rem;
  transition:transform .25s, background .25s, border-color .25s, color .25s;
}
.dugme--dolu{background:#fff;color:var(--koyu-900)}
.dugme--dolu:hover{background:var(--bronz-300);transform:translateY(-2px)}
.dugme--cizgi{border:1px solid rgba(255,255,255,.34);color:#fff}
.dugme--cizgi:hover{border-color:#fff;background:rgba(255,255,255,.09);transform:translateY(-2px)}

/* hero alt şerit */
.hero__serit{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:3rem; padding-top:1.7rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.kunye b{
  display:block; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.3rem); letter-spacing:-.03em; color:#fff;
}
.kunye span{
  display:block; margin-top:.35rem;
  font-family:"JetBrains Mono",monospace; font-size:.66rem;
  letter-spacing:.17em; text-transform:uppercase; color:rgba(232,214,188,.66);
}

/* ============================ KAYAN ŞERİT ============================ */
.bant{
  background:linear-gradient(90deg,var(--koyu-800) 0%,#123A4E 50%,var(--koyu-800) 100%); color:rgba(243,232,217,.5);
  padding-block:1.05rem; overflow:hidden; white-space:nowrap;
  border-block:1px solid rgba(255,255,255,.07);
}
.bant__ic{display:inline-flex;gap:3.2rem;animation:kay 42s linear infinite}
.bant span{
  font-family:"JetBrains Mono",monospace; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; display:inline-flex; gap:3.2rem;
}
.bant span::after{content:"◆"; color:var(--bronz-500); opacity:.65}
@keyframes kay{to{transform:translateX(-50%)}}

/* ============================ BÖLÜM ============================ */
.bolum{padding-block:clamp(4.5rem,9vw,8.5rem)}
.bolum--koyu{background:var(--koyu-900);color:var(--metin-ters);position:relative;isolation:isolate}
.bolum--koyu::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(118% 78% at 84% -6%, rgba(46,139,180,.26), transparent 58%),
    radial-gradient(96% 72% at -8% 104%, rgba(27,108,147,.20), transparent 62%);
}
.bolum--kar{background:var(--kar)}
.bolum--buz{background:#E4EFF4}

.bolum__bas{max-width:70ch}
.bolum__bas h2{
  font-size:clamp(2rem,4.3vw,3.6rem); margin-top:1.2rem;
}
.bolum__bas p{
  margin-top:1.4rem; font-size:1.06rem; color:var(--gri-700); max-width:62ch;
}
.bolum--koyu .bolum__bas p{color:rgba(243,232,217,.7)}

/* --- Faaliyet kartları --- */
.alanlar{display:grid;gap:1.25rem;margin-top:3.6rem}
@media(min-width:900px){.alanlar{grid-template-columns:repeat(3,1fr)}}
.alan{
  position:relative; border-radius:20px; overflow:hidden;
  background:var(--koyu-800); min-height:clamp(400px,44vw,520px);
  display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate;
}
.alan img{
  position:absolute; inset:0; z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.alan::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(21,12,5,.18) 0%,rgba(21,12,5,.62) 52%,rgba(21,12,5,.95) 100%);
}
.alan:hover img{transform:scale(1.07)}
.alan__ic{padding:2rem 1.9rem 2rem; color:#fff}
.alan__no{
  font-family:"JetBrains Mono",monospace; font-size:.68rem;
  letter-spacing:.2em; color:var(--bronz-300);
}
.alan h3{font-size:1.62rem;margin-top:.8rem}
.alan ul{
  list-style:none;padding:0;margin:1.25rem 0 0;
  display:flex;flex-direction:column;gap:.5rem;
}
.alan li{
  font-size:.88rem; color:rgba(243,232,217,.78);
  padding-left:1.25rem; position:relative;
}
.alan li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:var(--bronz-400);
}

/* --- Süreç --- */
.surec{margin-top:4rem;border-top:1px solid rgba(255,255,255,.13)}
.adim{
  display:grid; gap:.6rem 2.5rem; padding-block:2rem;
  border-bottom:1px solid rgba(255,255,255,.13);
  transition:background .35s, padding-inline .35s;
}
@media(min-width:820px){
  .adim{grid-template-columns:88px 1.05fr 1.3fr; align-items:baseline}
}
.adim:hover{background:rgba(255,255,255,.035)}
.adim__no{
  font-family:"JetBrains Mono",monospace; font-size:.78rem;
  letter-spacing:.16em; color:var(--bronz-400);
}
.adim h3{font-size:clamp(1.28rem,2.1vw,1.72rem);color:#fff}
.adim p{color:rgba(243,232,217,.68);font-size:.95rem}

/* --- Şerit görsel (tam genişlik) --- */
.genis{position:relative;overflow:hidden}
.genis img{width:100%;height:clamp(320px,52vw,620px);object-fit:cover}
.genis__yazi{
  position:absolute; inset:auto 0 0 0; padding:var(--olcu);
  background:linear-gradient(180deg,transparent,rgba(21,12,5,.9));
  color:#fff;
}
.genis__yazi p{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.03em;line-height:1.1;
  max-width:22ch;
}

/* --- Projeler --- */
.projeler{display:grid;gap:1.6rem;margin-top:3.6rem}
@media(min-width:760px){.projeler{grid-template-columns:repeat(2,1fr)}}
.proje{
  background:#fff; border:1px solid var(--duman); border-radius:18px;
  padding:2.1rem 1.9rem; display:flex; flex-direction:column; gap:.85rem;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
}
.proje:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px -30px rgba(21,12,5,.5);
  border-color:var(--bronz-300);
}
.proje__ust{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.rozet{
  font-family:"JetBrains Mono",monospace; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.4rem .75rem; border-radius:999px; white-space:nowrap;
}
.rozet--aktif{background:#DDEEF6;color:#1B6C93}
.rozet--aktif::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--su-500);margin-right:.5em;vertical-align:middle;
  animation:nabiz 2s ease-in-out infinite;
}
@keyframes nabiz{50%{opacity:.25}}
.rozet--bitti{background:var(--duman);color:var(--gri-500)}
.harita-panel .rozet--bitti{background:rgba(255,255,255,.09);color:rgba(243,232,217,.66)}
.harita-panel .rozet--aktif{background:rgba(46,139,180,.2);color:var(--su-300)}
.proje__il{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bronz-500);
}
.proje h3{font-size:1.42rem}
.proje p{color:var(--gri-700);font-size:.94rem}
.proje dl{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;
  margin:.6rem 0 0;padding-top:1rem;border-top:1px solid var(--duman);
  font-size:.82rem;
}
.proje dt{color:var(--gri-500);font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;align-self:center}
.proje dd{margin:0;font-weight:600}

/* --- Kapsam listesi --- */
.ikili{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media(min-width:940px){.ikili{grid-template-columns:1fr 1fr}}
.ikili__gorsel{border-radius:20px;overflow:hidden}
.ikili__gorsel img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover}

.kapsam{list-style:none;padding:0;margin:2.4rem 0 0;border-top:1px solid var(--duman)}
.kapsam li{
  display:flex;gap:1.2rem;align-items:baseline;
  padding-block:1.05rem;border-bottom:1px solid var(--duman);
}
.kapsam i{
  font-family:"JetBrains Mono",monospace;font-style:normal;
  font-size:.68rem;color:var(--bronz-500);letter-spacing:.1em;flex:none;
}
.kapsam b{font-weight:600;display:block}
.kapsam span{display:block;color:var(--gri-500);font-size:.88rem;margin-top:.15rem}

/* --- Alıntı / vurgu --- */
.vurgu{
  background:var(--koyu-900); color:#fff; border-radius:24px;
  padding:clamp(2.5rem,5vw,4.5rem); position:relative; overflow:hidden;
}
.vurgu::before{
  content:""; position:absolute; right:-12%; top:-40%;
  width:56%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(169,99,60,.5),transparent 66%);
}
.vurgu p{
  position:relative; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3.3vw,2.7rem); letter-spacing:-.03em; line-height:1.16;
  max-width:24ch;
}
.vurgu small{
  position:relative;display:block;margin-top:1.6rem;
  font-family:"JetBrains Mono",monospace;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bronz-300);
}

/* ============================ İLETİŞİM ============================ */
.iletisim{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:940px){.iletisim{grid-template-columns:1fr 1fr}}
.bilgi{list-style:none;padding:0;margin:2.6rem 0 0}
.bilgi li{padding-block:1.35rem;border-top:1px solid rgba(255,255,255,.13)}
.bilgi li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.bilgi dt{
  font-family:"JetBrains Mono",monospace;font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronz-300);margin-bottom:.55rem;
}
.bilgi dd{margin:0;font-size:1.02rem;color:#fff;line-height:1.55}
.bilgi a:hover{color:var(--bronz-300)}

.form{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.11);
  border-radius:20px; padding:clamp(1.8rem,3vw,2.6rem);
}
.form h3{font-size:1.5rem;color:#fff}
.form p{margin-top:.7rem;color:rgba(243,232,217,.62);font-size:.92rem}
.alan-grup{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.9rem}
.girdi{display:flex;flex-direction:column;gap:.5rem}
.girdi label{
  font-family:"JetBrains Mono",monospace;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(232,214,188,.6);
}
.girdi input,.girdi textarea{
  font:inherit;font-size:.95rem;color:#fff;
  background:rgba(21,12,5,.55); border:1px solid rgba(255,255,255,.15);
  border-radius:11px; padding:.85rem 1rem; transition:border-color .25s, background .25s;
}
.girdi textarea{resize:vertical;min-height:110px}
.girdi input:focus,.girdi textarea:focus{
  outline:none;border-color:var(--bronz-400);background:rgba(21,12,5,.8);
}
.form button{
  margin-top:1.6rem;width:100%;justify-content:center;cursor:pointer;border:0;font:inherit;
}

/* ============================ FOOTER ============================ */
.alt{background:#0E0703;color:rgba(243,232,217,.55);padding-block:3.4rem 2.2rem}
.alt__ust{
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start;
  padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.09);
}
.alt__menu{display:flex;flex-wrap:wrap;gap:1.6rem;font-size:.85rem}
.alt__menu a:hover{color:#fff}
.alt__son{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:2rem;font-size:.75rem;
  font-family:"JetBrains Mono",monospace;letter-spacing:.1em;
}

/* ============================ HAREKET ============================ */
.gel{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.gel.acik{opacity:1;transform:none}
.gel[data-gec="1"]{transition-delay:.09s}
.gel[data-gec="2"]{transition-delay:.18s}
.gel[data-gec="3"]{transition-delay:.27s}
.gel[data-gec="4"]{transition-delay:.36s}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .gel{opacity:1;transform:none}
}

/* ============================ MOBİL ============================ */
@media(max-width:900px){
  .menu-ac{display:block;z-index:110}
  .menu{
    position:fixed;inset:0;background:rgba(21,12,5,.98);
    backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:2rem;
    transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1);
    z-index:105;
  }
  .menu.acik{transform:none}
  .menu a{font-size:1.5rem;font-family:"Archivo",sans-serif;font-weight:700}
  .ust.menu-acik .menu-ac span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .ust.menu-acik .menu-ac span:nth-child(2){opacity:0}
  .ust.menu-acik .menu-ac span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .tel-btn{display:none}
  .menu .tel-btn{display:inline-flex;font-size:1rem}
  .hero__serit{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}
}

/* ============================================================
   SAHA HARİTASI
   ============================================================ */
.harita-kap{
  margin-top:3.4rem;
  display:grid; gap:0;
  border:1px solid rgba(255,255,255,.13); border-radius:22px; overflow:hidden;
  background:var(--koyu-800);
}
@media(min-width:1000px){.harita-kap{grid-template-columns:1.55fr 1fr}}

#harita-tuval{
  height:clamp(380px,58vh,620px); width:100%;
  background:#150C05; z-index:1;
}
.leaflet-container{font-family:inherit;background:#150C05}
.leaflet-tile-pane{filter:saturate(.82) brightness(.66) contrast(1.06)}
.leaflet-overlay-pane .leaflet-tile-container{filter:brightness(1.35) contrast(1.1)}
.leaflet-control-attribution{
  background:rgba(21,12,5,.75) !important; color:rgba(243,232,217,.45) !important;
  font-size:9px !important; backdrop-filter:blur(4px);
}
.leaflet-control-attribution a{color:var(--bronz-300) !important}
.leaflet-bar a{
  background:rgba(21,12,5,.9) !important; color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
}
.leaflet-bar a:hover{background:var(--bronz-500) !important}

/* güzergâh çizgisi */
.hat-yol{
  stroke:var(--su-400); stroke-width:3.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(87,172,208,.9));
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:hatCiz 2.1s cubic-bezier(.4,0,.2,1) forwards;
}
.hat-golge{stroke:rgba(21,12,5,.75);stroke-width:8;fill:none;stroke-linecap:round}
@keyframes hatCiz{to{stroke-dashoffset:0}}

/* işaretçi */
.im{
  display:grid;place-items:center; width:34px;height:34px;
  border-radius:50%; background:var(--koyu-900);
  border:1.5px solid var(--bronz-400); color:#fff;
  font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:500;
  box-shadow:0 4px 14px rgba(0,0,0,.5); cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.im:hover{transform:scale(1.14)}
.im--secili{background:var(--bronz-500);border-color:#fff;transform:scale(1.14)}
.im--aktif::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px solid var(--su-400); animation:halka 2.4s ease-out infinite;
}
@keyframes halka{
  0%{transform:scale(.7);opacity:.9}
  100%{transform:scale(1.5);opacity:0}
}
.leaflet-marker-icon{background:none;border:0}

/* nokta (hidrant) */
.nokta{
  fill:var(--su-300); stroke:var(--koyu-900); stroke-width:1.5;
  opacity:0; animation:noktaGel .5s ease forwards;
}
@keyframes noktaGel{to{opacity:1}}

/* panel */
.harita-panel{
  padding:clamp(1.7rem,2.6vw,2.4rem);
  display:flex; flex-direction:column; gap:1.4rem;
  border-top:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 60%);
}
@media(min-width:1000px){
  .harita-panel{border-top:0;border-left:1px solid rgba(255,255,255,.13)}
}
.panel__ust{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.panel__il{
  font-family:"JetBrains Mono",monospace;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronz-300);
}
.harita-panel h3{font-size:clamp(1.4rem,2.4vw,1.9rem);color:#fff}
.panel__ozet{font-size:.93rem;color:rgba(243,232,217,.68);line-height:1.65}

.kunye-liste{
  list-style:none;padding:0;margin:0;
  border-top:1px solid rgba(255,255,255,.12);
}
.kunye-liste li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.72rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.kunye-liste dt{
  font-family:"JetBrains Mono",monospace;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(232,214,188,.5);
}
.kunye-liste dd{margin:0;font-size:.92rem;font-weight:600;color:#fff;text-align:right}

/* canlı şantiye kutusu */
.canli{
  border:1px solid rgba(87,172,208,.36); border-radius:15px;
  background:linear-gradient(140deg,rgba(46,139,180,.16),rgba(21,12,5,.25));
  padding:1.25rem 1.35rem;
}
.canli__bas{
  display:flex;align-items:center;gap:.6rem;
  font-family:"JetBrains Mono",monospace;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--su-300);
}
.canli__bas i{
  width:7px;height:7px;border-radius:50%;background:var(--su-400);flex:none;
  box-shadow:0 0 0 0 rgba(87,172,208,.75); animation:atim 2s infinite;
}
@keyframes atim{
  70%{box-shadow:0 0 0 9px rgba(87,172,208,0)}
  100%{box-shadow:0 0 0 0 rgba(87,172,208,0)}
}
.canli__sayi{
  display:flex;align-items:baseline;gap:.55rem;margin-top:.75rem;
}
.canli__sayi b{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:2.5rem;
  letter-spacing:-.04em;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;
}
.canli__sayi span{font-size:.86rem;color:rgba(243,232,217,.62)}
.canli p{margin-top:.6rem;font-size:.85rem;color:rgba(243,232,217,.6)}

/* alt seçim düğmeleri */
.harita-secim{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.4rem;
}
.secim-btn{
  font:inherit;font-size:.82rem;font-weight:500;cursor:pointer;
  padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.055); color:rgba(243,232,217,.78);
  border:1px solid rgba(255,255,255,.14);
  transition:background .25s,color .25s,border-color .25s,transform .25s;
  display:inline-flex;align-items:center;gap:.5rem;
}
.secim-btn:hover{background:rgba(255,255,255,.11);color:#fff;transform:translateY(-1px)}
.secim-btn[aria-pressed="true"]{
  background:var(--bronz-500);border-color:var(--bronz-500);color:#fff;
}
.secim-btn em{
  font-style:normal;width:6px;height:6px;border-radius:50%;
  background:var(--su-400);flex:none;
}
.harita-not{
  margin-top:1.1rem;font-size:.76rem;color:rgba(243,232,217,.42);
  font-family:"JetBrains Mono",monospace;letter-spacing:.06em;
}

/* --- logo yerlesimleri --- */
.alt__logo{width:auto;height:132px;margin-bottom:1.3rem}
@media(max-width:640px){.alt__logo{height:104px}}

/* --- logonun serifi: alinti panelinde --- */
.vurgu p{
  font-family:"Bodoni Moda","Archivo",serif; font-weight:600;
  letter-spacing:-.012em;
}

/* ============================================================
   SUYUN YOLU — imza sahne
   ============================================================ */
#suyunyolu{
  position:relative;
  background:var(--koyu-900);
  overflow:hidden;
}
/* kumtaşı tabakası dokusu — bölümün üstünde ince bant */
#suyunyolu::before{
  content:""; position:absolute; inset:0 0 auto 0; height:180px;
  background:
    repeating-linear-gradient(178deg,
      rgba(220,188,152,.05) 0px, rgba(220,188,152,.05) 1px,
      transparent 1px, transparent 13px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
  mask-image:linear-gradient(180deg,#000,transparent);
  pointer-events:none;
}






@media(min-width:960px){}













/* --- ince kumtaşı dokusu: koyu bölümlerin üstüne --- */
.bolum--koyu{position:relative}
.bolum--koyu > .kap{position:relative;z-index:1}


/* ============================================================
   SU YÜZEYİ — fotoğraf üstü dalga ışığı
   ============================================================ */
.su-katman{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
  mix-blend-mode:screen; opacity:.5;
  filter:blur(.7px) saturate(115%);
}
/* metnin durduğu sol yarıda su ışığı sönümlenir — okunurluk önce gelir */
.hero .su-katman{
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 52%, #000 74%);
  mask-image:linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 52%, #000 74%);
}
.genis .su-katman{opacity:.42}
.hero .su-katman{z-index:0}
.hero, .genis{cursor:crosshair}

/* su vurgusu: baglanti ve etkin durumlar */
a:not(.dugme):not(.tel-btn):not(.marka):hover{color:var(--su-500)}
.bolum--koyu a:not(.dugme):not(.tel-btn):not(.marka):hover{color:var(--su-300)}

/* ikincil buton su mavisi */
.dugme--cizgi{border-color:rgba(87,172,208,.5)}
.dugme--cizgi:hover{border-color:var(--su-400);background:rgba(46,139,180,.16)}

/* kunye rakamlari suyla vurgulanir */
.kunye b{color:#fff}
.kunye b::after{
  content:""; display:block; width:26px; height:2px; margin-top:.5rem;
  background:linear-gradient(90deg,var(--su-400),transparent);
}

/* --- suyun yolu: malzeme künyesi --- */







/* malzeme kesiti */



/* ============================================================
   SUYUN YOLU — tek parça alet
   ============================================================ */
.yol-alet{
  margin-top:3rem;
  border:1px solid rgba(220,188,152,.18);
  border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,var(--koyu-900),rgba(21,12,5,.6));
  box-shadow:0 40px 90px -60px rgba(0,0,0,.9);
}

/* --- sahne --- */
.yol-sahne{position:relative}
#yolTuval{
  display:block; width:100%;
  height:clamp(320px,42vw,500px);
  touch-action:pan-y;
}
.yol-ipucu{
  position:absolute; right:1.1rem; bottom:.85rem;
  font-family:"JetBrains Mono",monospace; font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(243,232,217,.35); pointer-events:none;
}

/* --- malzeme künyesi: sahnenin altına yapışık --- */
.yol-detay{
  display:grid; gap:0;
  border-top:1px solid rgba(220,188,152,.18);
}
@media(min-width:860px){.yol-detay{grid-template-columns:minmax(240px,.8fr) 1.4fr}}

.yol-gorsel{
  margin:0; position:relative;
  padding:1.4rem 1.4rem 2.1rem;
  background:
    radial-gradient(90% 80% at 30% 20%, rgba(46,139,180,.13), transparent 70%),
    rgba(255,255,255,.028);
  border-bottom:1px solid rgba(220,188,152,.14);
}
@media(min-width:860px){
  .yol-gorsel{border-bottom:0;border-right:1px solid rgba(220,188,152,.14)}
}
#yolKesit{
  display:block; width:100%; height:clamp(170px,17vw,215px);
  object-fit:cover; border-radius:11px;
  transition:opacity .3s ease;
  background:#141414;
}
.yol-gorsel figcaption{
  position:absolute; left:1.4rem; bottom:.95rem;
  font-family:"JetBrains Mono",monospace; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(232,214,188,.45);
}

.yol-metin{padding:clamp(1.5rem,2.6vw,2.2rem)}
.yol-metin .cag{
  font-family:"JetBrains Mono",monospace; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--su-300);
}
.yol-metin h3{
  font-family:"Bodoni Moda","Archivo",serif; font-weight:600;
  font-size:clamp(1.45rem,2.5vw,2rem); color:#fff;
  margin-top:.55rem; letter-spacing:-.01em;
}
.yol-metin p{
  margin-top:.85rem; font-size:.97rem; line-height:1.72;
  color:rgba(243,232,217,.72); max-width:52ch;
}
.yol-kunye{
  list-style:none; padding:0; margin:1.4rem 0 0;
  display:grid; gap:0; border-top:1px solid rgba(220,188,152,.14);
}
@media(min-width:560px){.yol-kunye{grid-template-columns:repeat(3,1fr);gap:0 1.4rem}}
.yol-kunye li{padding-block:.85rem;border-bottom:1px solid rgba(220,188,152,.14)}
.yol-kunye dt{
  font-family:"JetBrains Mono",monospace; font-size:.57rem;
  letter-spacing:.17em; text-transform:uppercase; color:rgba(232,214,188,.45);
}
.yol-kunye dd{margin:.35rem 0 0;font-size:.9rem;font-weight:600;color:#fff}

/* --- çağ şeridi: tam genişlik, boşluk bırakmayan segment --- */
.yol-serit{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid rgba(220,188,152,.18);
}
.yol-btn{
  font:inherit; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem .9rem; min-height:74px;
  background:transparent; color:rgba(243,232,217,.72);
  border:0; border-right:1px solid rgba(220,188,152,.14);
  transition:background .25s,color .25s;
}
.yol-btn:last-child{border-right:0}
.yol-btn i{
  font-style:normal; font-family:"JetBrains Mono",monospace;
  font-size:.56rem; letter-spacing:.14em; color:var(--bronz-400);
}
.yol-btn b{font-weight:600;font-size:.86rem;line-height:1.3}
.yol-btn:hover{background:rgba(255,255,255,.05);color:#fff}
.yol-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(169,99,60,.9),rgba(140,79,46,.9));
  color:#fff;
}
.yol-btn[aria-pressed="true"] i{color:rgba(255,255,255,.72)}
@media(max-width:760px){
  .yol-serit{grid-template-columns:repeat(3,1fr)}
  .yol-btn{border-bottom:1px solid rgba(220,188,152,.14);min-height:66px}
}
@media(max-width:420px){.yol-serit{grid-template-columns:repeat(2,1fr)}}