/*!
 * Vural Bobinaj Teknik — ana sayfa tasarımı (ana.css)
 * Tema: bakır tel. Sargıdan akıma, akımdan teslimata.
 * Geliştirici: Beysülen Yazılım — https://beysulenyazilim.com
 */

/* Bölüm bağlantıları: bölüm, kaydırınca küçülen üst barın hemen altında başlar */
html:has(body.ana) { scroll-padding-top: calc(var(--duyuru-h, 0px) + 66px); }

/* ================================================================ ÜST BAR */
.ana .ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  color: #fff;
}
/* Arka plan sözde öğede: menü katmanı (position: fixed) başlığın içine hapsolmasın */
.ana .ust::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(8, 20, 40, .84);
  -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px -18px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .45s var(--egri-cik);
}
.ana .ust--dolu::before { opacity: 1; }
.ust__ic { display: flex; align-items: center; gap: 20px; min-height: 84px; transition: min-height .45s var(--egri-cik); }
.ust--dolu .ust__ic { min-height: 66px; }
.ust__logo { position: relative; z-index: 2; display: block; flex: none; }
.ust__logo img { height: 46px; width: auto; transition: height .45s var(--egri-cik); }
.ust--dolu .ust__logo img { height: 40px; }
.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.menu ul a {
  position: relative; display: block; padding: 10px 12px; border-radius: var(--r-kucuk);
  color: #D3DCE7; text-decoration: none; font-weight: 500; font-size: .98rem;
  transition: color .25s;
}
.menu ul a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--bakir-acik), var(--akim));
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--egri-cik);
}
.menu ul a:hover, .menu ul a[aria-current="true"] { color: #fff; }
.menu ul a:hover::after, .menu ul a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.menu__alt { display: none; }
.ust__ara { flex: none; }
.ust__ara .dugme { min-height: 44px; }
.ust__akim { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; overflow: visible; }
/* Ölçek ve kaydırma dönüşümüyle çizilir: kaydırırken sayfa düzeni yeniden hesaplanmaz */
.ust__akim span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--bakir-koyu), var(--bakir-acik) 70%, var(--akim));
  box-shadow: 0 0 12px rgba(255, 178, 122, .65);
  transform-origin: left center; transform: scaleX(var(--ilerleme, 0));
}
.ust__akim i {
  position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 3px var(--akim); opacity: var(--uc, 0);
  transform: translate3d(var(--uc-x, 0px), 0, 0);
}
.menu-dugme {
  display: none; position: relative; z-index: 2; margin-left: auto; width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer;
}
.menu-dugme__cizgi, .menu-dugme__cizgi::before, .menu-dugme__cizgi::after {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin-left: -11px; border-radius: 1px; background: currentColor;
  transition: transform .45s var(--egri-cik), opacity .2s, width .3s;
}
.menu-dugme__cizgi::before, .menu-dugme__cizgi::after { content: ""; left: 0; margin-left: 0; }
.menu-dugme__cizgi::before { transform: translateY(-7px); }
.menu-dugme__cizgi::after { transform: translateY(7px); width: 14px; }
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgi { background: transparent; }
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgi::before { transform: rotate(45deg); }
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgi::after { transform: rotate(-45deg); width: 22px; }

@media (max-width: 1080px) {
  .menu-dugme { display: block; }
  .ust__ara { display: none; }
  .menu {
    position: fixed; inset: 0; z-index: 1; margin: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 110px 28px calc(36px + env(safe-area-inset-bottom));
    background:
      radial-gradient(600px 420px at 85% 15%, rgba(232, 145, 79, .16), transparent 65%),
      var(--gece);
    clip-path: circle(0 at calc(100% - 48px) 42px);
    visibility: hidden;
    transition: clip-path .75s var(--egri-cik), visibility 0s .75s;
  }
  .menu.acik { clip-path: circle(160% at calc(100% - 48px) 42px); visibility: visible; transition: clip-path .75s var(--egri-cik), visibility 0s; }
  .menu ul { flex-direction: column; gap: 2px; }
  .menu ul a {
    font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(2.3rem, 9vw, 3.6rem); line-height: 1.04;
    color: #fff; padding: 6px 0; border-radius: 0;
    opacity: 0; transform: translateY(26px);
    transition: opacity .5s, transform .7s var(--egri-cik), color .25s;
  }
  .menu ul a::after { left: 0; right: auto; width: 56px; bottom: 4px; }
  .menu.acik ul a { opacity: 1; transform: none; }
  .menu.acik li:nth-child(1) a { transition-delay: .12s; }
  .menu.acik li:nth-child(2) a { transition-delay: .17s; }
  .menu.acik li:nth-child(3) a { transition-delay: .22s; }
  .menu.acik li:nth-child(4) a { transition-delay: .27s; }
  .menu.acik li:nth-child(5) a { transition-delay: .32s; }
  .menu.acik li:nth-child(6) a { transition-delay: .37s; }
  .menu__alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 34px; opacity: 0; transition: opacity .5s .4s; }
  .menu.acik .menu__alt { opacity: 1; }
  html.menu-acik { overflow: hidden; }
}
@media (max-width: 420px) { .ust__logo img { height: 40px; } .menu__alt { grid-template-columns: 1fr; } }

/* ================================================================ HERO */
.kahraman {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: min(100svh, 1020px);
  padding-top: calc(var(--ust-h, 84px) + clamp(24px, 5vh, 64px));
  color: #fff; background: var(--gece);
}
.kahraman__zemin {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 640px at 76% 46%, rgba(46, 81, 133, .58), transparent 62%),
    radial-gradient(520px 380px at 78% 52%, rgba(232, 145, 79, .13), transparent 70%),
    linear-gradient(180deg, #081426 0%, #0B1B34 58%, #0E2140 100%);
}
.kahraman__zemin::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask: radial-gradient(ellipse 62% 70% at 72% 46%, #000 25%, transparent 78%);
  mask: radial-gradient(ellipse 62% 70% at 72% 46%, #000 25%, transparent 78%);
  transform: translateY(calc(var(--kaydir, 0) * .15px));
}
.kahraman__izgara {
  position: relative; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 72px); align-items: center;
}
.kahraman__baslik {
  font-family: var(--yazi-baslik); font-weight: 800;
  font-size: clamp(3rem, 6.2vw, 5.9rem); line-height: .9; letter-spacing: -.004em;
  margin: 0 0 .34em;
}
.kahraman__baslik .satir { display: block; overflow: hidden; padding: .08em .04em .14em 0; margin: -.08em 0 -.14em; }
.kahraman__baslik .satir > span { display: inline-block; }
.kahraman__giris { font-size: clamp(1.08rem, 1.45vw, 1.24rem); color: #C3CEDB; max-width: 34em; margin-bottom: 1.8em; }
.kahraman__eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.kahraman__bag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  color: #DCE3EB; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(232, 145, 79, .55);
  text-underline-offset: 5px; transition: color .25s;
}
.kahraman__bag svg { width: 18px; height: 18px; color: var(--bakir-acik); transition: transform .4s var(--egri-cik); }
.kahraman__bag:hover { color: #fff; }
.kahraman__bag:hover svg { transform: translateX(4px); }
.hizli-takip {
  max-width: 540px; padding: 16px 16px 16px 18px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hizli-takip label { display: block; font-weight: 600; margin-bottom: 9px; color: #fff; }
.hizli-takip__satir { display: flex; gap: 8px; }
.hizli-takip input {
  flex: 1; min-width: 0; min-height: 50px; padding: 10px 14px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(6, 16, 32, .55); color: #fff; transition: border-color .2s, box-shadow .2s;
}
.hizli-takip input:focus { outline: none; border-color: var(--bakir-acik); box-shadow: 0 0 0 4px rgba(232, 145, 79, .2); }
.hizli-takip input::placeholder { color: #8FA0B5; }

/* Stator */
.kahraman__gorsel { position: relative; display: grid; place-items: center; }
.stator-kap { position: relative; width: min(100%, 600px); aspect-ratio: 1; perspective: 1100px; }
/* Üç katman: gövde (durağan), rotor (yalnız bu katman döner; GPU ile, yeniden boyama olmadan), parlama + etiketler */
.stator {
  position: relative; width: 100%; aspect-ratio: 1;
  transform: rotateX(var(--egX, 0deg)) rotateY(var(--egY, 0deg));
}
.stator__katman { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stator__govde { filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .5)); }
.stator__rotor { transform-origin: 50% 50%; will-change: transform; }
.stator__ust { pointer-events: none; }
.stator__cagri path { fill: none; stroke: var(--bakir-acik); stroke-width: 1.4; }
.stator__cagri circle { fill: var(--akim); stroke: #0C1D36; stroke-width: 2; }
.stator__cagri text { fill: #E6ECF3; font: 600 16px var(--yazi-govde); }
.stator__cagri .stator__alt { fill: #8FA0B5; font-size: 12.5px; font-weight: 500; }
.stator-kap__alan {
  position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(232, 145, 79, .3);
  animation: don 70s linear infinite;
}
.stator-kap__alan--2 { inset: -13%; border: 1px dotted rgba(167, 178, 191, .2); animation-duration: 110s; animation-direction: reverse; }
.stator-kap__isik {
  position: absolute; inset: 10%; border-radius: 50%; pointer-events: none; will-change: opacity;
  background: radial-gradient(circle, rgba(232, 145, 79, .45), transparent 66%);
  filter: blur(34px); opacity: var(--isik, .35); transition: opacity .6s;
}
@keyframes don { to { transform: rotate(360deg); } }

/* Güven şeridi */
.kahraman__serit {
  position: relative; margin-top: clamp(28px, 5vh, 56px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(6, 16, 32, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kahraman__serit ul { list-style: none; margin: 0 auto; padding-block: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kahraman__serit li { display: flex; align-items: center; gap: 14px; color: #B9C6D5; font-size: .98rem; line-height: 1.4; }
.kahraman__serit li + li { border-left: 1px solid rgba(255, 255, 255, .08); padding-left: 24px; }
.kahraman__serit svg { width: 28px; height: 28px; flex: none; color: var(--bakir-acik); }
.kahraman__serit li:first-child svg { color: #F2B544; }
.kahraman__serit strong { color: #fff; font-weight: 600; }
.kahraman__serit a { color: var(--akim); text-decoration: underline; text-decoration-color: rgba(255, 178, 122, .4); }
.kahraman__serit a:hover { color: #fff; }

/* Açılış sahnesi (yalnız hareket açıkken) */
.hareket .kahraman__baslik .satir > span { transform: translate3d(0, 108%, 0); animation: satir-yuksel 1.15s var(--egri-cik) .15s forwards; }
.hareket .kahraman__baslik .satir:nth-child(2) > span { animation-delay: .27s; }
.hareket .kahraman__baslik .satir:nth-child(3) > span { animation-delay: .39s; }
.hareket .kahraman__baslik .satir:nth-child(4) > span { animation-delay: .51s; }
@keyframes satir-yuksel { to { transform: none; } }
.hareket .kahraman__giris { animation: yazi-yuksel 1s .55s var(--egri-cik) both; }
.hareket .kahraman__eylemler { animation: yazi-yuksel 1s .68s var(--egri-cik) both; }
.hareket .kahraman__bag { animation: yazi-yuksel 1s .76s var(--egri-cik) both; }
.hareket .hizli-takip { animation: yazi-yuksel 1s .86s var(--egri-cik) both; }
.hareket .kahraman__serit li { animation: yazi-yuksel .9s var(--egri-cik) both; }
.hareket .kahraman__serit li:nth-child(1) { animation-delay: 1s; }
.hareket .kahraman__serit li:nth-child(2) { animation-delay: 1.1s; }
.hareket .kahraman__serit li:nth-child(3) { animation-delay: 1.2s; }
.hareket .stator-kap { animation: stator-gir 1.6s var(--egri-cik) .1s both; }
@keyframes stator-gir { from { opacity: 0; transform: scale(.82) rotate(-12deg); } to { opacity: 1; transform: none; } }
.hareket .stator__sargi {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: sargi-sar .6s var(--egri-cik) both, sargi-isil 1.2s ease-out both;
  animation-delay: calc(var(--i) * 42ms + .55s), calc(var(--i) * 42ms + .55s);
}
@keyframes sargi-sar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sargi-isil { 0% { filter: brightness(2.2) saturate(1.4); } 100% { filter: none; } }
.hareket .stator__cagri path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cagri-ciz 1s var(--egri-cik) forwards; animation-delay: calc(1.9s + var(--c) * .22s); }
.hareket .stator__cagri circle { transform-box: fill-box; transform-origin: center; animation: cagri-nokta .6s var(--egri-yay) both; animation-delay: calc(1.8s + var(--c) * .22s); }
.hareket .stator__cagri text { animation: belir .7s ease-out both; animation-delay: calc(2.3s + var(--c) * .22s); }
@keyframes cagri-ciz { to { stroke-dashoffset: 0; } }
@keyframes cagri-nokta { from { transform: scale(0); } to { transform: scale(1); } }

@media (max-width: 960px) {
  .kahraman { min-height: 0; padding-top: calc(var(--ust-h, 70px) + 12px); }
  .kahraman__izgara { grid-template-columns: 1fr; gap: 18px; }
  .kahraman__gorsel { order: -1; }
  .stator-kap { width: min(70vw, 330px); }
  .stator__cagrilar { display: none; }
  .kahraman__serit ul { grid-template-columns: 1fr; gap: 12px; }
  .kahraman__serit li + li { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .kahraman__baslik { font-size: clamp(2.55rem, 12.4vw, 3.5rem); }
  .kahraman__eylemler .dugme { flex: 1 1 100%; }
  .hizli-takip__satir { flex-direction: column; }
  .stator-kap { width: min(64vw, 270px); }
}

/* ================================================================ KAYAN ŞERİT */
.serit { position: relative; overflow: hidden; background: var(--bakir); color: var(--gece); }
.serit::before, .serit::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.serit::before { left: 0; background: linear-gradient(90deg, var(--bakir), rgba(194, 101, 42, 0)); }
.serit::after { right: 0; background: linear-gradient(-90deg, var(--bakir), rgba(194, 101, 42, 0)); }
.serit__ic { display: flex; width: max-content; animation: serit-kay 42s linear infinite; will-change: transform; }
.serit--js .serit__ic { animation: none; }
.serit__grup { display: flex; align-items: center; gap: 30px; padding: 20px 15px; flex: none; }
.serit span { font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; white-space: nowrap; }
.serit svg { width: 26px; height: 26px; flex: none; color: var(--gece); opacity: .85; animation: don 7s linear infinite; }
@keyframes serit-kay { to { transform: translateX(-50%); } }

/* ================================================================ BÖLÜMLER */
.bolum { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.bolum--acik { background: var(--beyaz); }
.bolum--celik { background: var(--celik-zemin); }
.bolum--gece { background: var(--gece); color: #fff; overflow: hidden; isolation: isolate; }
.bolum--gece::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(820px 520px at 12% 18%, rgba(46, 81, 133, .38), transparent 62%),
    radial-gradient(640px 420px at 88% 86%, rgba(232, 145, 79, .1), transparent 70%);
}
.bolum__bas { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.bolum__bas h2, .baslik-2 {
  font-family: var(--yazi-baslik); font-weight: 800;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: .94; letter-spacing: -.002em;
  text-wrap: balance; color: var(--lacivert); margin-bottom: .36em;
}
.bolum--gece .bolum__bas h2 { color: #fff; }
.bolum__bas p { font-size: 1.14rem; color: var(--murekkep-2); max-width: 40em; margin: 0; }
.bolum--gece .bolum__bas p { color: #B9C6D5; }
.bolum__bas--yan { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 64px; align-items: end; }
.bolum__bas--yan h2 { margin-bottom: 0; }
@media (max-width: 900px) { .bolum__bas--yan { grid-template-columns: 1fr; } .bolum__bas--yan h2 { margin-bottom: .1em; } }

/* ================================================================ HİZMETLER */
.hizmetler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.hizmet {
  position: relative; background: #fff; border-radius: 22px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid #DCE2E9;
  box-shadow: 0 1px 2px rgba(12, 29, 54, .04), 0 18px 40px -30px rgba(12, 29, 54, .35);
  transition: transform .6s var(--egri-cik), box-shadow .6s var(--egri-cik), border-color .3s;
}
.hizmet:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 2px 4px rgba(12, 29, 54, .05), 0 34px 64px -34px rgba(12, 29, 54, .5); }
.hizmet__tel { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.hizmet__tel rect {
  width: calc(100% - 2px); height: calc(100% - 2px);
  fill: none; stroke: var(--bakir); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--egri-cik);
}
.hizmet:hover .hizmet__tel rect, .hizmet:focus-within .hizmet__tel rect { stroke-dashoffset: 0; }
.hizmet__bas { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.hizmet__ikon {
  flex: none; width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--lacivert-acik), var(--gece)); color: var(--bakir-acik);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 22px -12px rgba(12, 29, 54, .7);
  transition: transform .6s var(--egri-yay), color .3s;
}
.hizmet__ikon svg { width: 44px; height: 44px; overflow: visible; }
.hizmet:hover .hizmet__ikon { transform: rotate(-6deg) scale(1.07); color: var(--akim); }
.ikon-don { transform-box: view-box; transform-origin: 24px 24px; }
.ikon-don--hizli { transform-origin: 24px 28.5px; }
.hizmet:hover .ikon-don { animation: don 1s linear infinite; }
.hizmet:hover .ikon-don--hizli { animation-duration: .45s; }
.hizmet:hover .ikon-damla { animation: damla 1.1s ease-in infinite; }
@keyframes damla { 0% { opacity: 0; transform: translateY(-4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
.hizmet:hover .ikon-titre { animation: titre .12s linear infinite; }
.hizmet:hover .ikon-hiz { opacity: 1; transition: opacity .2s; }
@keyframes titre { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.6px, -.4px); } 50% { transform: translate(-.5px, .5px); } 75% { transform: translate(.4px, .3px); } }
.hizmet h3 { font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1; color: var(--lacivert); }
.hizmet__aciklama { color: var(--murekkep-2); margin-bottom: 18px; }
.hizmet ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.hizmet li a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 2px; border-bottom: 1px dashed var(--cizgi);
  color: var(--murekkep); text-decoration: none; font-weight: 600;
  transition: color .2s, padding .4s var(--egri-cik);
}
.hizmet li:last-child a { border-bottom: 0; }
.hizmet li a svg { width: 18px; height: 18px; flex: none; color: var(--bakir); transition: transform .4s var(--egri-cik); }
.hizmet li a:hover { color: var(--bakir-koyu); padding-left: 8px; }
.hizmet li a:hover svg { transform: translateX(4px); }
@media (max-width: 860px) { .hizmetler { grid-template-columns: 1fr; } }
/* Hizmet sayfalarına bağlantılar */
.hizmet-sayfalari { margin-top: clamp(26px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hizmet-sayfalari p { margin: 0; color: var(--murekkep-2); font-weight: 500; }
.hizmet-sayfalari ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hizmet-sayfalari a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--cizgi); color: var(--lacivert); font-weight: 600; font-size: .96rem; text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--egri-yay);
}
.hizmet-sayfalari a:hover { background: var(--lacivert); border-color: var(--lacivert); color: #fff; transform: translateY(-2px); }
@media (max-width: 420px) { .hizmet__bas { flex-direction: column; align-items: flex-start; gap: 12px; } .hizmet__ikon { width: 60px; height: 60px; } }

/* ================================================================ ÖNCESİ / SONRASI */
.vitrin { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.karsilastir {
  --konum: 50%;
  position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: #081426; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08);
}
.karsilastir__katman { position: absolute; inset: 0; transition: opacity .3s; }
.karsilastir__katman > img, .karsilastir__katman > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.karsilastir__katman--once { clip-path: inset(0 calc(100% - var(--konum)) 0 0); }
.karsilastir__cizgi {
  position: absolute; top: 0; bottom: 0; left: var(--konum); width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 14%, #fff 86%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 14px rgba(255, 178, 122, .9);
}
.karsilastir__tutamac {
  position: absolute; top: 50%; left: var(--konum); width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; background: var(--bakir); color: #fff; display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 12px 28px rgba(0, 0, 0, .45);
  transition: transform .45s var(--egri-yay);
}
.karsilastir__tutamac svg { width: 26px; height: 26px; }
.karsilastir:hover .karsilastir__tutamac, .karsilastir--suruk .karsilastir__tutamac { transform: scale(1.1); }
.karsilastir:has(.karsilastir__surgu:focus-visible) .karsilastir__tutamac { outline: 3px solid var(--akim); outline-offset: 4px; }
.karsilastir__ipucu {
  position: absolute; left: var(--konum); top: calc(50% + 48px); transform: translateX(-50%);
  padding: 6px 13px; border-radius: 999px; pointer-events: none;
  background: rgba(8, 20, 38, .8); color: #fff; font-weight: 600; font-size: .85rem; white-space: nowrap;
  transition: opacity .4s;
}
.karsilastir--dokunuldu .karsilastir__ipucu { opacity: 0; }
.karsilastir__etiket {
  position: absolute; top: 16px; padding: 6px 13px; border-radius: 999px; pointer-events: none;
  font-weight: 700; font-size: .86rem; color: #fff; transition: opacity .3s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.karsilastir__etiket--once { left: 16px; background: rgba(8, 20, 38, .74); }
.karsilastir__etiket--sonra { right: 16px; background: rgba(194, 101, 42, .92); }
.karsilastir__surgu { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.karsilastir--gecis .karsilastir__katman { opacity: 0; }

.vitrin__yan { display: grid; gap: 18px; min-width: 0; }
.vitrin__bilgi {
  padding: clamp(22px, 2.4vw, 32px); border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .1);
}
.vitrin__rozet { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: rgba(232, 145, 79, .16); color: var(--akim); font-weight: 600; font-size: .86rem; margin-bottom: 14px; }
.vitrin__bilgi h3 { font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1; margin-bottom: 12px; color: #fff; }
.vitrin__bilgi p { color: #B9C6D5; }
.vitrin__bilgi.degisti h3, .vitrin__bilgi.degisti p, .vitrin__bilgi.degisti .vitrin__rozet { animation: yazi-yuksel .6s var(--egri-cik) both; }
.vitrin__bilgi.degisti p { animation-delay: .06s; }
.vitrin__gezin { display: flex; align-items: center; gap: 14px; margin: 4px 0 20px; }
.vitrin__ok {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .4s var(--egri-yay);
}
.vitrin__ok svg { width: 20px; height: 20px; }
.vitrin__ok:hover { background: var(--bakir); border-color: var(--bakir); transform: scale(1.06); }
.vitrin__sayi { font-family: var(--yazi-baslik); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; color: #DCE3EB; min-width: 4.5ch; text-align: center; }
.vitrin__liste {
  position: relative; list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-height: 340px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.vitrin__liste button {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 12px;
  overflow: hidden; background: #0E2140; cursor: pointer;
}
.vitrin__liste img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.8); transition: transform .6s var(--egri-cik), filter .3s; }
.vitrin__liste button:hover img { transform: scale(1.07); filter: none; }
.vitrin__liste button[aria-current="true"] { box-shadow: 0 0 0 2px var(--bakir-acik); }
.vitrin__liste button[aria-current="true"] img { filter: none; }
@media (max-width: 960px) {
  .vitrin { grid-template-columns: 1fr; }
  .vitrin__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(120px, 30%); overflow-x: auto; max-height: none; scroll-snap-type: x mandatory; }
  .vitrin__liste li { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .karsilastir { border-radius: 16px; }
  .karsilastir__tutamac { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
}

/* ================================================================ SÜREÇ (akım hattı) */
.surec { position: relative; --ilerleme: 0; }
.surec__adimlar { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.surec__tel {
  position: absolute; left: 33px; right: calc(20% - 33px); top: 31px; height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #C3CCD7 0 10px, transparent 10px 16px);
}
.surec__akim {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--bakir-koyu), var(--bakir-acik));
  box-shadow: 0 0 14px rgba(232, 145, 79, .6);
  transform-origin: left center; transform: scaleX(var(--ilerleme));
}
.surec__uc {
  position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--akim) 45%, rgba(255, 178, 122, 0) 72%);
  opacity: var(--uc-op, 0); transform: translate3d(var(--uc-x, 0px), 0, 0);
}
.surec__adim { position: relative; }
.surec__dugum {
  position: relative; z-index: 1; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid #C3CCD7; color: var(--celik-koyu); margin-bottom: 22px;
  transition: background-color .6s, border-color .6s, color .6s, box-shadow .7s, transform .7s var(--egri-yay);
}
.surec__dugum svg { width: 30px; height: 30px; }
.surec__adim.enerjili .surec__dugum {
  background: var(--renk); border-color: var(--renk); color: #fff; transform: scale(1.06);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--renk) 18%, transparent), 0 14px 26px -12px var(--renk);
}
.surec__adim h3 { font-family: var(--yazi-baslik); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--lacivert); margin-bottom: 8px; }
.surec__adim p { color: var(--murekkep-2); font-size: .98rem; margin: 0; }
.surec__adim h3, .surec__adim p { transition: opacity .6s, transform .7s var(--egri-cik); }
.hareket .surec__adim:not(.enerjili) h3, .hareket .surec__adim:not(.enerjili) p { opacity: .45; transform: translateY(8px); }
.surec-not { margin: clamp(36px, 5vw, 56px) 0 0; color: var(--murekkep-2); max-width: 48em; padding: 18px 22px; border-left: 3px solid var(--bakir); background: #fff; border-radius: 0 14px 14px 0; }
.surec-not a { color: var(--bakir-koyu); font-weight: 600; }
@media (max-width: 960px) {
  .surec__adimlar { grid-template-columns: 1fr; gap: 0; }
  .surec__tel { left: 31px; right: auto; top: 33px; bottom: 60px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, #C3CCD7 0 10px, transparent 10px 16px); }
  .surec__akim { transform-origin: center top; transform: scaleY(var(--ilerleme)); background: linear-gradient(180deg, var(--bakir-koyu), var(--bakir-acik)); }
  .surec__uc { left: 50%; top: 0; transform: translate3d(0, var(--uc-y, 0px), 0); }
  .surec__adim { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 2px 20px; padding-bottom: 30px; }
  .surec__dugum { grid-row: span 2; margin: 0; }
  .surec__adim h3 { align-self: end; margin-top: 6px; }
}

/* ================================================================ ARIZA FİŞİ */
.form-izgara { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.form-yan { position: sticky; top: 110px; }
.form-yan p { color: var(--murekkep-2); }
.form-yan__iletisim { display: grid; gap: 10px; margin-top: 24px; max-width: 360px; }
.acil { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--hata-zemin); color: #8A1C12; font-weight: 600; }
.acil__nabiz { flex: none; position: relative; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--hata); animation: nabiz 1.8s ease-out infinite; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .5); } 70% { box-shadow: 0 0 0 12px rgba(180, 35, 24, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0); } }
@media (max-width: 960px) { .form-izgara { grid-template-columns: 1fr; } .form-yan { position: static; } }

.ana .fis { border-radius: 24px; border-color: #DCE2E9; box-shadow: 0 2px 4px rgba(12, 29, 54, .04), 0 44px 90px -44px rgba(12, 29, 54, .5); overflow: visible; }
.ana .fis__ust { position: relative; padding: 20px 28px 22px; border-radius: 24px 24px 0 0; background: linear-gradient(135deg, var(--lacivert), var(--gece)); }
.ana .fis__ust::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -7px; height: 14px;
  background: radial-gradient(circle at 7px 7px, #fff 5.5px, transparent 6px) 0 0 / 20px 14px repeat-x;
}
.ana .fis__baslik { font-size: 1.8rem; }
.ana .fis__adimlar { gap: 10px; }
.ana .fis__adimlar li {
  width: auto; height: auto; background: none; border-radius: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .5); transition: color .4s;
}
.ana .fis__adimlar li::before { content: ""; display: block; width: 60px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); transition: background .5s, box-shadow .5s; }
.ana .fis__adimlar li.aktif, .ana .fis__adimlar li.tamam { color: #fff; }
.ana .fis__adimlar li.aktif::before { background: linear-gradient(90deg, var(--bakir-acik), var(--akim)); box-shadow: 0 0 12px rgba(255, 178, 122, .7); }
.ana .fis__adimlar li.tamam::before { background: var(--bakir); }
.ana .fis__govde { padding: 30px 28px 26px; }
.hareket .fis fieldset:not([hidden]) { animation: adim-gir .55s var(--egri-cik); }
@keyframes adim-gir { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .ana .fis__ust { flex-direction: column; align-items: flex-start; padding: 18px 18px 20px; }
  .ana .fis__adimlar li::before { width: 48px; }
  .ana .fis__govde { padding: 24px 16px 20px; }
}

/* ================================================================ TAKİP */
.bolum--takip .takip-izgara { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px 64px; align-items: end; }
.bolum--takip .bolum__bas { margin-bottom: 0; }
.bolum--takip .takip-kutu { max-width: none; }
.bolum--takip .takip-form .girdi {
  min-height: 60px; font-size: 1.1rem; color: #fff;
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2);
}
.bolum--takip .takip-form .girdi::placeholder { color: #8FA0B5; }
.bolum--takip .takip-form .girdi:focus { background: rgba(255, 255, 255, .09); border-color: var(--bakir-acik); box-shadow: 0 0 0 4px rgba(232, 145, 79, .22); }
.bolum--takip .takip-form .dugme { min-height: 60px; padding-inline: 1.6em; }
.takip-durumlar { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #A9B8CA; font-size: .92rem; }
.takip-durumlar li { display: inline-flex; align-items: center; gap: 8px; }
.takip-durumlar li::before { content: ""; width: 18px; height: 6px; border-radius: 3px; background: var(--renk); }
.bolum--takip .takip-sonuc { grid-column: 1 / -1; margin-top: 8px; }
.bolum--takip .takip-sonuc:empty { display: none; }
.bolum--takip .takip-bos { color: #B9C6D5; }
@media (max-width: 900px) { .bolum--takip .takip-izgara { grid-template-columns: 1fr; } }

/* ================================================================ İLETİŞİM */
.iletisim { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.iletisim__liste { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 18px; }
.iletisim__liste li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; align-items: center; }
.iletisim__ikon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--lacivert); color: var(--bakir-acik); transition: transform .5s var(--egri-yay), background-color .3s; }
.iletisim__ikon svg { width: 23px; height: 23px; }
.iletisim__liste li:hover .iletisim__ikon { transform: rotate(-8deg) scale(1.08); background: var(--bakir); color: #fff; }
.iletisim__liste strong { display: block; font-size: .9rem; color: var(--celik-koyu); font-weight: 600; }
.iletisim__deger { font-weight: 600; font-size: 1.1rem; color: var(--murekkep); text-decoration: none; }
a.iletisim__deger:hover { color: var(--bakir-koyu); text-decoration: underline; }
.harita { position: relative; aspect-ratio: 4 / 3.3; }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 24px; background: var(--aluminyum); box-shadow: 0 34px 70px -34px rgba(12, 29, 54, .5); }
.harita__kose { position: absolute; z-index: 1; width: 64px; height: 64px; border: 3px solid var(--bakir); pointer-events: none; }
.harita__kose--1 { left: -14px; top: -14px; border-right: 0; border-bottom: 0; border-top-left-radius: 32px; }
.harita__kose--2 { right: -14px; bottom: -14px; border-left: 0; border-top: 0; border-bottom-right-radius: 32px; }
.hareket .harita__kose { transition: transform 1.2s var(--egri-cik) .3s, opacity 1s .3s; opacity: 0; }
.hareket .harita__kose--1 { transform: translate(18px, 18px); }
.hareket .harita__kose--2 { transform: translate(-18px, -18px); }
.hareket .harita.gorundu .harita__kose { transform: none; opacity: 1; }
.mahalleler { margin-top: clamp(44px, 6vw, 80px); padding-top: 30px; border-top: 1px solid var(--cizgi); }
.mahalleler h3 { font-family: var(--yazi-baslik); font-weight: 800; font-size: 1.9rem; color: var(--lacivert); margin-bottom: 16px; }
.mahalleler__liste { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mahalleler__liste li {
  padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi);
  font-weight: 500; font-size: .95rem; color: var(--murekkep);
  transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--egri-yay);
}
.mahalleler__liste li:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); transform: translateY(-2px); }
.mahalleler p { color: var(--murekkep-2); margin: 0; }
@media (max-width: 900px) { .iletisim { grid-template-columns: 1fr; } .harita { margin: 8px 14px 0; } }

/* ================================================================ SSS */
.sss-izgara { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 80px; align-items: start; }
.sss-izgara .bolum__bas { position: sticky; top: 110px; }
.sss-izgara .bolum__bas .dugme { margin-top: 26px; }
.sss { border-top: 1px solid var(--cizgi); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 24px 64px 24px 0; font-weight: 700; font-size: 1.16rem; line-height: 1.35; transition: color .25s;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::before, .sss summary::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 2.5px; margin-top: -1.25px; border-radius: 2px;
  background: var(--bakir); transition: transform .45s var(--egri-cik);
}
.sss summary::after { transform: rotate(90deg); }
.sss details[open] summary::after { transform: rotate(0deg); }
.sss summary:hover { color: var(--bakir-koyu); }
.sss__cevap { overflow: hidden; }
.sss__cevap p { margin: 0 0 24px; color: var(--murekkep-2); max-width: 62ch; }
@media (max-width: 900px) { .sss-izgara { grid-template-columns: 1fr; } .sss-izgara .bolum__bas { position: static; } }

/* ================================================================ ALT BİLGİ */
.alt--ana { position: relative; overflow: hidden; padding-top: clamp(70px, 9vw, 130px); background: var(--gece); }
.alt--ana::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bakir) 20%, var(--akim) 50%, var(--bakir) 80%, transparent);
  opacity: .8;
}
.alt__slogan {
  font-family: var(--yazi-baslik); font-weight: 900;
  font-size: clamp(3rem, 9.6vw, 8.6rem); line-height: .9; letter-spacing: -.012em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(232, 145, 79, .6);
  margin: 0 0 clamp(44px, 6vw, 80px);
  transition: color .8s var(--egri-cik), -webkit-text-stroke-color .8s;
}
.alt__slogan:hover { color: var(--bakir); -webkit-text-stroke-color: var(--bakir); }
.alt__izgara { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 36px; padding-bottom: 46px; }
.alt__logo img { height: 52px; width: auto; margin-bottom: 16px; }
.alt h2 { font-family: var(--yazi-baslik); font-weight: 800; font-size: 1.45rem; color: #fff; margin-bottom: 12px; letter-spacing: .01em; }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.basa-don { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.basa-don svg { width: 18px; height: 18px; transition: transform .4s var(--egri-yay); }
.basa-don:hover svg { transform: translateY(-3px); }
@media (max-width: 820px) { .alt__izgara { grid-template-columns: 1fr; gap: 28px; } }

/* ================================================================ MOBİL EYLEM ÇUBUĞU */
.mobil-eylem { display: none; }
@media (max-width: 720px) {
  /* Çubuğun altında kalan pay alt bilginin kendisinde: sayfanın dibinde açık renkli şerit görünmez */
  body.mobil-cubuklu .alt { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .mobil-eylem {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(8, 20, 40, .94); border-top: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform .5s var(--egri-cik);
  }
  .mobil-eylem--gizli { transform: translateY(110%); }
  .mobil-eylem a { min-height: 50px; font-size: .95rem; padding: .5em .4em; }
}

/* ================================================================ AÇILIŞ: DÜKKÂN KEPENGİ */
/* Oturumdaki ilk ziyarette görünür: basla.js <html>'e "acilista" sınıfını ekler, hareket.js yönetir.
   (Sınıf adı bilerek farklı: <html> üzerindeki durum sınıfı .acilis kuralına takılmamalı.)
   Lacivert boyalı çelik kepenk; logo ve telefon üzerine boyanmış. Lamba titreyerek yanar, kepenk motoru
   döner, bakır tel dolar; sayfa hazır olunca asma kilit açılır ve kepenk kalkar. */
/* Genişlik 100vw: kepenk kalkarken kaydırma çubuğu belirdiğinde kepenk ve üzerindeki yazılar yana kaymaz */
.acilis {
  display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100%; z-index: 1000; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
html.acilista { overflow: hidden; }
html.acilista .acilis, .acilis.acilis--acik { display: block; }
.acilis--acik { pointer-events: none; }
/* Kepenk kalkana kadar ana sahnenin giriş animasyonları bekler */
html.acilista .kahraman, html.acilista .kahraman * { animation-play-state: paused !important; }

.acilis__kepenk {
  --lata: 46px;
  --profil: clamp(66px, 10vh, 92px);
  position: absolute; left: 0; right: 0; top: -72px; bottom: 0; /* üstteki pay: kalkmadan önceki küçük çöküşte boşluk görünmez */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 4vh, 40px);
  padding: 72px 20px calc(var(--profil) + env(safe-area-inset-bottom, 0px) + 28px);
  color: #fff; text-align: center;
  background:
    linear-gradient(90deg, rgba(2, 7, 15, .62), rgba(2, 7, 15, 0) 18%, rgba(2, 7, 15, 0) 82%, rgba(2, 7, 15, .62)),
    linear-gradient(180deg, rgba(2, 7, 15, 0) 55%, rgba(2, 7, 15, .5)),
    linear-gradient(180deg, #132B4F, #0C1D38);
  box-shadow: 0 34px 60px rgba(2, 7, 15, .55);
  will-change: transform;
}
/* Dükkânın lambası */
.acilis__kepenk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80%; pointer-events: none;
  background: radial-gradient(58% 72% at 50% 0%, rgba(255, 206, 156, .24), rgba(255, 190, 130, .08) 52%, rgba(255, 190, 130, 0) 80%);
  animation: lamba-yan 1.05s .1s both;
}
/* Lata kıvrımları ve fırçalanmış çelik: üzerine boyanan logo da kıvrımlara uyar */
.acilis__kepenk::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .05) 2px, rgba(255, 255, 255, .03) 9px,
      rgba(255, 255, 255, 0) 17px, rgba(0, 0, 0, .1) 29px, rgba(0, 0, 0, .3) 40px,
      rgba(0, 0, 0, .62) 44px, rgba(0, 0, 0, .78) var(--lata)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, rgba(255, 255, 255, 0) 1px 4px);
}

/* Kepenge boyanmış tabela */
.acilis__levha { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; animation: levha-yan 1.05s .1s both; }
.acilis__logo { width: auto; height: min(32vh, 300px); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.acilis__numara {
  margin: clamp(6px, 1.4vh, 14px) 0 0;
  font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(1.9rem, 4.8vh, 3.1rem); line-height: 1; letter-spacing: .03em;
  color: var(--bakir-acik); font-variant-numeric: tabular-nums;
}

/* Kepenk motorunun gösterge kutusu */
.acilis__durum {
  position: relative; z-index: 2; width: min(400px, 100%);
  padding: 13px 16px 15px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 14, 28, .92), rgba(4, 10, 21, .95));
  border: 1px solid rgba(232, 145, 79, .3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: durum-gir .7s .45s var(--egri-cik) both;
}
.acilis__satir { display: flex; align-items: center; gap: 10px; }
.acilis__motor { width: 22px; height: 22px; flex: none; color: var(--bakir-acik); transition: color .3s; }
.acilis__yazi {
  flex: 1; min-width: 0; text-align: left; font-weight: 500; font-size: .98rem; line-height: 1.3; color: #DCE3EB;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acilis__yuzde {
  flex: none; min-width: 4.4ch; text-align: right;
  font-family: var(--yazi-baslik); font-weight: 700; font-size: 1.25rem; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.acilis__cubuk { position: relative; height: 4px; margin-top: 12px; border-radius: 2px; background: rgba(255, 255, 255, .09); }
.acilis__cubuk span {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--bakir-koyu), var(--bakir-acik) 70%, var(--akim));
  box-shadow: 0 0 12px rgba(255, 178, 122, .5);
  transform-origin: left center; transform: scaleX(var(--p, 0));
  transition: box-shadow .3s;
}
/* Telin ucundaki kıvılcım: yalnız dönüşümle ilerler */
.acilis__cubuk::after {
  content: ""; position: absolute; left: -9px; top: -7px; width: 100%; height: 18px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 2px, rgba(255, 178, 122, .95) 3px, rgba(255, 178, 122, 0) 9px) 0 50% / 18px 18px no-repeat;
  transform: translate3d(calc(var(--p, 0) * 100%), 0, 0); opacity: var(--uc, 0); transition: opacity .2s;
}
.acilis--hazir .acilis__cubuk span { box-shadow: 0 0 18px 2px rgba(255, 178, 122, .85); }
.acilis--hazir .acilis__motor, .acilis--hazir .acilis__yuzde { color: var(--akim); }

/* Beysülen Yazılım etiketi: kepenge yapıştırılmış */
.acilis__imza {
  position: absolute; z-index: 2;
  right: clamp(16px, 3.4vw, 44px); bottom: calc(var(--profil) + env(safe-area-inset-bottom, 0px) + clamp(16px, 3vh, 30px));
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 7px;
  background: linear-gradient(160deg, #F7F9FB, #E3E8EE); color: var(--lacivert);
  font-weight: 600; font-size: .84rem; line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4), inset 0 -1px 0 rgba(0, 0, 0, .08);
  transform: rotate(-3deg);
  animation: imza-yapis .6s .8s var(--egri-yay) both;
}
.acilis__imza img { width: 32px; height: auto; }

/* Alt profil: kulplar ve asma kilit */
.acilis__profil {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  height: calc(var(--profil) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; justify-content: space-evenly;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 5px),
    linear-gradient(180deg, #2A323D 0, #C6CED8 3px, #9AA6B4 14%, #75828F 46%, #586370 78%, #3A424D 100%);
  box-shadow: 0 -12px 24px rgba(2, 7, 15, .4);
}
.acilis__profil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: #0B0F15; }
.acilis__kulp {
  width: clamp(60px, 9vw, 120px); height: 20px; margin-top: 4px;
  border: 5px solid #DCE2E9; border-bottom: 0; border-radius: 10px 10px 0 0;
  border-top-color: #EEF2F6; border-left-color: #B8C2CD; border-right-color: #8D99A6;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
}
.acilis__kilit { position: relative; width: 40px; height: 54px; flex: none; margin-top: 2px; transform-origin: 50% 6px; }
.acilis__kanca {
  position: absolute; left: 8px; top: 0; width: 24px; height: 30px;
  border: 5px solid #CBD3DC; border-bottom: 0; border-radius: 12px 12px 0 0;
  border-left-color: #E3E8EE; border-right-color: #9AA5B2;
}
.acilis__govde {
  position: absolute; left: 0; bottom: 0; width: 40px; height: 32px; border-radius: 7px;
  background: linear-gradient(155deg, #F2A86E 0%, #D9793A 32%, #B4581F 64%, #8F4317 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 6px 12px rgba(0, 0, 0, .45);
}
.acilis__govde::before {
  content: ""; position: absolute; left: 50%; top: 9px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #3A1906; box-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.acilis__govde::after {
  content: ""; position: absolute; left: 50%; top: 15px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 0 0 2px 2px;
  background: #3A1906;
}

/* İlk saniye: lamba titreyerek yanar, gösterge ve etiket yerine oturur */
@keyframes lamba-yan {
  0% { opacity: 0; } 9% { opacity: .85; } 13% { opacity: .12; } 21% { opacity: .95; } 26% { opacity: .4; } 42%, 100% { opacity: 1; }
}
@keyframes levha-yan {
  0% { opacity: .16; } 9% { opacity: .85; } 13% { opacity: .3; } 21% { opacity: .95; } 26% { opacity: .55; } 42%, 100% { opacity: 1; }
}
@keyframes durum-gir { from { opacity: 0; transform: translateY(16px); } }
@keyframes imza-yapis { from { opacity: 0; transform: rotate(-12deg) scale(1.3); } }

/* Açılış: kanca çıkar, kilit sallanır, kepenk önce hafifçe çöker sonra yukarı sarılır */
.acilis--acik .acilis__kanca { animation: kanca-ac .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.acilis--acik .acilis__kilit { animation: kilit-sallan .7s .08s cubic-bezier(.3, 1.4, .5, 1) both; }
.acilis--acik .acilis__govde { animation: govde-isil .6s ease-out both; }
.acilis--acik .acilis__kepenk { animation: kepenk-kalk 1.05s .26s both; }
@keyframes kanca-ac { to { transform: translateY(-10px); } }
@keyframes kilit-sallan { 0% { transform: none; } 45% { transform: rotate(-10deg); } 100% { transform: rotate(-5deg); } }
@keyframes govde-isil { 35% { filter: brightness(1.5) saturate(1.15); } 100% { filter: none; } }
@keyframes kepenk-kalk {
  0% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.3, 0, .55, 1); }
  14% { transform: translate3d(0, 10px, 0); animation-timing-function: cubic-bezier(.62, 0, .18, 1); }
  100% { transform: translate3d(0, -104%, 0); }
}

@media (max-width: 560px) {
  .acilis__kepenk { gap: 24px; }
  .acilis__logo { height: min(30vh, 250px); }
  .acilis__kulp { width: 54px; }
}
@media (max-height: 520px) {
  .acilis__kepenk { gap: 14px; padding-bottom: calc(var(--profil) + env(safe-area-inset-bottom, 0px) + 16px); }
  .acilis__logo { height: 29vh; }
  .acilis__imza { display: none; }
}

/* İmleç kepengin üzerinde: "Hemen aç" */
.imlec--ac .imlec__halka { width: 108px; height: 42px; margin: -21px 0 0 -54px; border-radius: 21px; background: var(--bakir); border-color: var(--bakir); }
.imlec--ac .imlec__halka::before { opacity: 0; }
.imlec--ac .imlec__yazi { opacity: 1; transform: none; }
.imlec--ac .imlec__nokta { opacity: 0; }

@media print {
  .acilis { display: none !important; }
  html.acilista { overflow: visible; }
}

/* ================================================================ HAREKET AZALTMA (ana sayfa) */
@media (prefers-reduced-motion: reduce) {
  .stator-kap__alan, .serit__ic, .serit svg { animation: none !important; }
  .hizmet:hover, .hizmet:hover .hizmet__ikon { transform: none; }
  .acilis { display: none !important; }
  html.acilista { overflow: visible; }
}