/* ==========================================================================
   Asma iskele menü
   Dikmeler (standart), üst korkuluk borusu, çapraz bağlantılar, iskele tahtası,
   ikaz bandı ve vinç kancaları. Sayfa başında yerinde durur; aşağıda gizlenir,
   üst kenara gelince halatlarla sarkıtılmış gibi iner.
   ========================================================================== */

.iskele {
  --boru: linear-gradient(180deg, #e3e8eb 0%, #b5bec4 30%, #858f96 68%, #5d666d 100%);
  --dikme: linear-gradient(90deg, #5d666d 0%, #b9c1c6 38%, #e6eaed 52%, #8a949a 78%, #59626a 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-left: max(clamp(10px, 2.4vw, 34px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(10px, 2.4vw, 34px), env(safe-area-inset-right, 0px));
  pointer-events: none;
  color: var(--kirec);
}
.iskele-govde, .iskele-tutamak { pointer-events: auto; }

.iskele-govde {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  transform-origin: 50% -40px;
}

/* --- Halatlar (yalnızca askıdayken görünür) ---------------------------- */
.iskele-halatlar span {
  position: absolute;
  bottom: calc(100% - 30px);
  width: 3px;
  height: 0;
  background: repeating-linear-gradient(180deg, #c6cdd2 0 3px, #7f888f 3px 6px);
  opacity: 0;
  transition: opacity .3s;
}
.iskele-halatlar span:first-child { left: 18%; }
.iskele-halatlar span:last-child { right: 18%; }
.iskele-halatlar { position: absolute; inset: 0; pointer-events: none; }

/* --- Üst korkuluk borusu ----------------------------------------------- */
.iskele-boru--ust {
  position: relative;
  z-index: 3;
  height: 9px;
  margin: 0 -12px;
  border-radius: 5px;
  background: var(--boru);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

/* --- Bölmeler sırası (file + çapraz) ---------------------------------- */
.iskele-sira {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 78px;
  background-color: rgba(22, 27, 32, .66);
  background-image:
    repeating-linear-gradient(45deg, rgba(241, 236, 226, .045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(241, 236, 226, .045) 0 1px, transparent 1px 7px);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
/* uç dikmeler */
.iskele-sira::before, .iskele-sira::after {
  content: "";
  position: absolute;
  top: -22px;
  bottom: -30px;
  z-index: 2;
  width: 7px;
  border-radius: 2px;
  background: var(--dikme);
}
.iskele-sira::before { left: -4px; }
.iskele-sira::after { right: -4px; }

/* --- Tabela (logo plakası) -------------------------------------------- */
.iskele-tabela {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 8px 14px 8px 12px;
  padding: 8px 18px 8px 12px;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #efe9dc, #ddd3c0);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 14px rgba(0, 0, 0, .35);
}
.iskele-logo { height: 46px; width: auto; }
.civata {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3f5f6, #79838a 60%, #4a5258);
}
.civata:nth-of-type(1) { top: 5px; left: 5px; }
.civata:nth-of-type(2) { top: 5px; right: 5px; }
.civata:nth-of-type(3) { bottom: 5px; left: 5px; }
.civata:nth-of-type(4) { bottom: 5px; right: 5px; }

/* --- Menü bölmeleri ---------------------------------------------------- */
.iskele-nav { flex: 1 1 auto; display: flex; min-width: 0; }
.iskele-liste { display: flex; flex: 1 1 auto; }

.bolme {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding: 0 clamp(12px, 1.4vw, 26px);
  /* bölme çaprazı */
  background-image: linear-gradient(to top right, transparent calc(50% - 1.4px), rgba(168, 177, 183, .26) calc(50% - 1.4px), rgba(168, 177, 183, .26) calc(50% + 1.4px), transparent calc(50% + 1.4px));
  transition: box-shadow .3s var(--yavas), background-color .3s;
}
.bolme:nth-child(even) {
  background-image: linear-gradient(to top left, transparent calc(50% - 1.4px), rgba(168, 177, 183, .26) calc(50% - 1.4px), rgba(168, 177, 183, .26) calc(50% + 1.4px), transparent calc(50% + 1.4px));
}
/* dikme */
.bolme::before {
  content: "";
  position: absolute;
  left: -3.5px;
  top: -22px;
  bottom: -30px;
  z-index: 2;
  width: 7px;
  border-radius: 2px;
  background: var(--dikme);
  transform-origin: 50% 100%;
}
/* kelepçe (dikme ile üst borunun birleşimi) */
.bolme::after {
  content: "";
  position: absolute;
  left: -7px;
  top: -13px;
  z-index: 4;
  width: 14px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4b5359, #2b3136);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .5);
}

.bolme-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 2px;
  border: 0;
  background: none;
  color: var(--kirec);
  font-family: var(--f-stencil);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  transition: color .25s, translate .45s var(--yay);
}
.bolme-ok { width: 10px; height: 6px; transition: rotate .3s; }
.bolme-ok path { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* vinç kancası: üzerine gelince borunun arkasından iner */
.bolme-kanca {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: 16px;
  height: 46px;
  overflow: hidden;
  translate: -50% 0;
  pointer-events: none;
}
.bolme-kanca svg { translate: 0 -105%; transition: translate .55s var(--yay); }
.bolme-kanca svg, .iskele-tutamak svg { width: 100%; height: auto; overflow: visible; }
.kanca-halat { stroke: #c4cbd0; stroke-width: 1.4; fill: none; }
.kanca-blok { fill: var(--ikaz); }
.kanca-ucu { fill: none; stroke: #d5dbdf; stroke-width: 2.2; stroke-linecap: round; }

.bolme:hover, .bolme:focus-within, .bolme.acik {
  box-shadow: inset 0 -4px 0 var(--ikaz);
  background-color: rgba(232, 163, 23, .08);
}
.bolme:hover .bolme-kanca svg, .bolme:focus-within .bolme-kanca svg, .bolme.acik .bolme-kanca svg { translate: 0 -16%; }
.bolme:hover .bolme-link, .bolme:focus-within .bolme-link, .bolme.acik .bolme-link { color: var(--ikaz); translate: 0 -3px; }
.bolme.acik .bolme-ok { rotate: 180deg; }

/* --- Askılı pano (alt menü) ------------------------------------------- */
.askili-pano {
  position: absolute;
  top: calc(100% + 34px);
  left: 50%;
  z-index: 5;
  width: 310px;
  translate: -50% 0;
  transform-origin: 50% -34px;
  background: var(--kirec);
  color: var(--murekkep);
  border-top: 6px solid var(--ikaz);
  border-radius: 2px;
  box-shadow: 0 22px 40px rgba(0, 0, 0, .38);
  visibility: hidden;
  opacity: 0;
  transform: perspective(700px) rotateX(-75deg);
  transition: transform .5s var(--yavas), opacity .3s, visibility 0s .5s;
}
/* zincirler */
.askili-pano::before, .askili-pano::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  width: 3px;
  height: 34px;
  background: repeating-linear-gradient(180deg, #c6cdd2 0 4px, transparent 4px 6px);
}
.askili-pano::before { left: 26px; }
.askili-pano::after { right: 26px; }
.bolme.acik .askili-pano,
.bolme--alt:focus-within .askili-pano {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform .5s var(--yavas), opacity .2s, visibility 0s;
  animation: pano-sallan 1.4s var(--yavas) both;
}
@keyframes pano-sallan {
  0% { rotate: -5deg; }
  30% { rotate: 3deg; }
  55% { rotate: -1.5deg; }
  78% { rotate: .6deg; }
  100% { rotate: 0deg; }
}
.askili-pano ul { padding: 8px 0; }
/* panoya inerken fare boşlukta kalmasın */
.pano-kopru { position: absolute; left: 0; right: 0; bottom: 100%; height: 42px; }
.askili-pano a {
  display: grid;
  gap: 2px;
  padding: 12px 20px 12px 22px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.askili-pano a:hover, .askili-pano a:focus-visible { background: var(--beton-100); border-left-color: var(--ikaz); }
.askili-pano strong { font-weight: 650; font-size: 1rem; }
.askili-pano span { font-size: .86rem; color: var(--murekkep-2); }

/* --- İkaz levhası (Teklif iste) -------------------------------------- */
.iskele-ikaz {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 8px 12px 8px 16px;
  padding: 0 30px;
  background: var(--ikaz);
  color: var(--murekkep);
  font-family: var(--f-stencil);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.iskele-ikaz::before, .iskele-ikaz::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background: repeating-linear-gradient(-45deg, var(--murekkep) 0 6px, var(--ikaz) 6px 12px);
  background-size: 100% 16.97px;
}
.iskele-ikaz::before { left: 0; }
.iskele-ikaz::after { right: 0; }
.iskele-ikaz span { position: relative; transition: letter-spacing .3s var(--yavas); }
.iskele-ikaz:hover span { letter-spacing: .1em; }
.iskele-ikaz:hover::before, .iskele-ikaz:hover::after { animation: ikaz-kay .6s linear infinite; }
@keyframes ikaz-kay { to { background-position: 0 16.97px; } }

/* --- İskele tahtası ve ikaz bandı ------------------------------------- */
.iskele-tahta {
  position: relative;
  z-index: 3;
  height: 13px;
  margin: 0 -12px;
  border-radius: 2px;
  background-color: var(--tahta);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 40%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg, transparent 0 196px, rgba(0, 0, 0, .55) 196px 198px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 23px, rgba(255, 255, 255, .05) 23px 25px, transparent 25px 41px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, .35);
}
.iskele-bant {
  position: relative;
  z-index: 1;
  height: 8px;
  margin: 3px 4% 0;
  background: repeating-linear-gradient(-45deg, var(--ikaz) 0 12px, var(--murekkep) 12px 24px);
  clip-path: polygon(0 0, 100% 0, 99.6% 100%, .4% 100%);
  opacity: .95;
}

/* --- Mobil düğme ------------------------------------------------------- */
.iskele-dugme {
  display: none;
  position: relative;
  z-index: 2;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0 18px;
  border: 0;
  background: none;
  font-family: var(--f-stencil);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dugme-cizgi, .dugme-cizgi::before, .dugme-cizgi::after {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--ikaz);
  transition: transform .3s var(--yavas), opacity .2s;
}
.dugme-cizgi { position: relative; }
.dugme-cizgi::before, .dugme-cizgi::after { content: ""; position: absolute; left: 0; }
.dugme-cizgi::before { top: -7px; }
.dugme-cizgi::after { top: 7px; }
.mobil-acik .dugme-cizgi { background: transparent; }
.mobil-acik .dugme-cizgi::before { transform: translateY(7px) rotate(45deg); }
.mobil-acik .dugme-cizgi::after { transform: translateY(-7px) rotate(-45deg); }

/* --- Tutamak: gizliyken üst kenarda asılı duran küçük levha ---------- */
.iskele-tutamak {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 59;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 7px 10px;
  border: 0;
  border-radius: 0 0 4px 4px;
  background: var(--kursun-900);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3), inset 0 -3px 0 var(--ikaz);
  font-family: var(--f-stencil);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  translate: -50% -110%;
  transition: translate .45s var(--yavas);
}
.iskele-tutamak svg { width: 12px; }
.iskele[data-durum="gizli"] .iskele-tutamak { translate: -50% 0; transition-delay: .25s; }

/* --- Durumlar ---------------------------------------------------------- */
.iskele[data-durum="gizli"], .iskele[data-durum="askida"] { position: fixed; }
.iskele[data-durum="gizli"] .iskele-govde {
  transform: translateY(calc(-100% - 90px));
  transition: transform .5s var(--yavas);
}
.iskele[data-durum="askida"] .iskele-sira,
.iskele[data-durum="gizli"] .iskele-sira { background-color: rgba(22, 27, 32, .92); }
.iskele[data-durum="askida"] .iskele-govde {
  transform: translateY(12px);
  transition: transform .6s var(--yavas);
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .35));
}
.iskele[data-durum="askida"] .iskele-halatlar span { height: 200px; opacity: 1; }
.iskele[data-durum="askida"] .bolme::before,
.iskele[data-durum="askida"] .iskele-sira::before,
.iskele[data-durum="askida"] .iskele-sira::after { bottom: -6px; }
.iskele-govde.sallan { animation: iskele-sallan 1.8s var(--yavas); }
@keyframes iskele-sallan {
  0% { rotate: -1.4deg; }
  28% { rotate: .9deg; }
  52% { rotate: -.5deg; }
  76% { rotate: .22deg; }
  100% { rotate: 0deg; }
}

/* --- Kurulum animasyonu (sayfa açılışı) ------------------------------- */
.js .iskele.kuruluyor .iskele-boru--ust { animation: kur-yatay .7s var(--yavas) .1s both; transform-origin: 0 50%; }
.js .iskele.kuruluyor .iskele-tahta { animation: kur-yatay .7s var(--yavas) .35s both; transform-origin: 100% 50%; }
.js .iskele.kuruluyor .iskele-bant { animation: kur-yatay .6s var(--yavas) .7s both; transform-origin: 0 50%; }
.js .iskele.kuruluyor .bolme::before,
.js .iskele.kuruluyor .iskele-sira::before,
.js .iskele.kuruluyor .iskele-sira::after { animation: kur-dikey .6s var(--yavas) both; animation-delay: calc(var(--i, 0) * 70ms); }
.js .iskele.kuruluyor .bolme::after { animation: kur-kelepce .4s var(--yay) both; animation-delay: calc(.55s + var(--i, 0) * 70ms); }
.js .iskele.kuruluyor .iskele-sira { animation: kur-file .6s ease .45s both; }
.js .iskele.kuruluyor .bolme-link { animation: kur-yazi .7s var(--yay) both; animation-delay: calc(.75s + var(--i, 0) * 60ms); }
.js .iskele.kuruluyor .iskele-tabela { animation: kur-tabela .9s var(--yay) .55s both; }
.js .iskele.kuruluyor .iskele-ikaz { animation: kur-tabela .9s var(--yay) 1.05s both; }
@keyframes kur-yatay { from { transform: scaleX(0); } }
@keyframes kur-dikey { from { transform: scaleY(0); } }
@keyframes kur-kelepce { from { transform: scale(0); } }
@keyframes kur-file { from { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@keyframes kur-yazi { from { opacity: 0; transform: translateY(-22px); } }
@keyframes kur-tabela { from { opacity: 0; transform: translateY(-60px) rotate(-4deg); } }

/* --- Dar ekran -------------------------------------------------------- */
@media (max-width: 1180px) {
  .bolme-link { font-size: 1.08rem; letter-spacing: .05em; }
  .iskele-logo { height: 42px; }
  .iskele-ikaz { padding: 0 22px; font-size: 1.1rem; }
}

@media (max-width: 1040px) {
  .iskele-sira { min-height: 66px; }
  .iskele-dugme { display: inline-flex; }
  .iskele-ikaz { margin-left: 0; }
  .iskele-nav {
    position: absolute;
    top: calc(100% + 24px);
    left: 0;
    right: 0;
    z-index: 6;
    display: block;
    max-height: calc(100svh - 140px);
    overflow-y: auto;
    background: var(--kursun-900);
    border-top: 6px solid var(--ikaz);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .3s, transform .4s var(--yavas), visibility 0s .4s;
  }
  .mobil-acik .iskele-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .3s, transform .4s var(--yavas), visibility 0s;
  }
  .iskele-liste { display: block; padding: 6px 0 10px; }
  .bolme {
    display: block;
    padding: 0;
    background-image: none !important;
    border-bottom: 9px solid transparent;
    border-image: linear-gradient(180deg, transparent 0 3px, var(--tahta) 3px 9px) 9;
  }
  .bolme::before, .bolme::after, .bolme-kanca { display: none; }
  .bolme-link {
    width: 100%;
    justify-content: space-between;
    padding: 16px var(--kenar-sag) 16px var(--kenar-sol);
    font-size: 1.35rem;
  }
  .bolme:hover .bolme-link, .bolme:focus-within .bolme-link { translate: none; }
  .askili-pano {
    position: static;
    width: auto;
    translate: none;
    transform: none;
    display: none;
    margin: 0 var(--kenar-sag) 14px var(--kenar-sol);
    animation: none !important;
    visibility: visible;
    opacity: 1;
  }
  .askili-pano::before, .askili-pano::after { display: none; }
  .bolme.acik .askili-pano { display: block; }
  .bolme--alt:focus-within:not(.acik) .askili-pano { display: none; }
}

@media (max-width: 600px) {
  .iskele { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .iskele-tabela { margin: 7px 8px 7px 10px; padding: 6px 12px 6px 8px; }
  .iskele-logo { height: 34px; }
  .iskele-ikaz { display: none; }
  .iskele-dugme { padding: 0 14px; }
}

/* Akıştan sabit konuma geçiş anında animasyon olmasın */
.iskele.aninda .iskele-govde,
.iskele.aninda .iskele-tutamak { transition: none !important; }