/* =========================================================
   1. Jetonlar
   ========================================================= */
:root {
  --alaca: #0C2B4D;
  --asfalt: #33434F;
  --beton: #E8ECEC;
  --kopuk: #F8FBFB;
  --tank: #43A01C;
  --fener: #FFAE1F;
  --su: #CFEAEC;
  /* Türevler: açık zeminde metin/buton ve koyu zeminde metin için AA kontrastlı tonlar */
  --tank-koyu: #2F7A12;
  --tank-acik: #5DBB30;
  --su-koyu: #6FB9C4;
  --hata: #A61B1B;
  --cizgi: rgba(12, 43, 77, .16);
  --odak: var(--tank-koyu);
  --baslik: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --govde: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --golge: 0 24px 60px rgba(12, 43, 77, .14);
  --tasma: calc((100vw - min(100vw, var(--max) + 2 * var(--gutter))) / 2 + var(--gutter));
}

/* =========================================================
   2. Temel
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
html.hazir { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kopuk);
  color: var(--alaca);
  font-family: var(--govde);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--baslik); font-weight: 800; line-height: 1; }
p { margin: 0 0 1em; max-width: 70ch; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
img { max-width: 100%; height: auto; }
main { position: relative; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--odak); outline-offset: 3px; }

.koyu { color: var(--kopuk); --odak: var(--tank-acik); }
.grenli { position: relative; isolation: isolate; }
.grenli::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gizli { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.atla { position: absolute; left: 8px; top: -120px; z-index: 100; padding: .8rem 1.2rem; border-radius: 999px; background: var(--kopuk); color: var(--alaca); font-weight: 600; }
.atla:focus { top: 8px; }
.kap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.tel { font-family: var(--baslik); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 1.3em; line-height: 1; white-space: nowrap; }
.ikon { width: 24px; height: 24px; flex: none; }
.ikon--buyuk { width: 44px; height: 44px; }

/* =========================================================
   3. Butonlar
   ========================================================= */
.btn {
  position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15rem .6rem;
  min-height: 52px; padding: .5rem 1.5rem; overflow: hidden;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 600; text-decoration: none; text-align: center;
  transition: transform .2s var(--ease), filter .2s, box-shadow .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--ara { background: var(--fener); color: var(--alaca); }
.btn--kucuk { min-height: 44px; padding: .25rem 1.25rem; }
.btn--buyuk { display: inline-grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: .9rem; row-gap: 0; min-height: 68px; padding: .6rem 1.75rem; text-align: left; }
.btn--buyuk .ikon { grid-row: 1 / span 2; width: 28px; height: 28px; }
.btn--buyuk .btn__etiket { font-size: .95rem; line-height: 1.1; }
.btn--buyuk .tel { font-size: 2rem; }
.btn--hat { border-color: currentColor; background: transparent; }
.btn--wa { background: var(--tank-koyu); color: var(--kopuk); }
.btn[data-miknatis] { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }

/* arama butonunda "telefon çalıyor" nabzı */
.btn--nabiz { overflow: visible; }
.btn--nabiz::before, .btn--nabiz::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--fener); border-radius: inherit; pointer-events: none; animation: nabiz 2.4s ease-out infinite; }
.btn--nabiz::after { animation-delay: 1.2s; }
.btn--nabiz .ikon { animation: titre 2.4s ease-in-out infinite; }

/* WhatsApp butonunda gelip dokunan parmak */
.btn--parmak { overflow: visible; animation: parmak-bas 3.6s ease-in-out 2s infinite; }
.btn--parmak::after { content: ""; position: absolute; left: 62%; top: 55%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--tank); opacity: 0; pointer-events: none; animation: parmak-dalga 3.6s ease-out 2s infinite; }
.parmak { position: absolute; left: 62%; top: 55%; z-index: 1; width: 34px; height: 34px; margin: -3px 0 0 -9px; color: var(--alaca); pointer-events: none; opacity: 0; animation: parmak-gel 3.6s var(--ease) 2s infinite; }
.parmak svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(12, 43, 77, .25)); }
.parmak__dolgu { fill: var(--kopuk); }
@keyframes parmak-gel {
  0% { opacity: 0; transform: translate3d(34px, 30px, 0) rotate(8deg); }
  14% { opacity: 1; }
  34% { transform: translate3d(0, 0, 0) rotate(0); }
  40% { transform: translate3d(0, 0, 0) scale(.86); }
  48% { transform: translate3d(0, 0, 0) scale(1); }
  76% { opacity: 1; transform: translate3d(0, 0, 0); }
  92%, 100% { opacity: 0; transform: translate3d(34px, 30px, 0) rotate(8deg); }
}
@keyframes parmak-bas { 0%, 38%, 50%, 100% { transform: none; } 42% { transform: scale(.96); background: rgba(63, 160, 37, .08); } }
@keyframes parmak-dalga { 0%, 39% { opacity: 0; transform: scale(.2); } 41% { opacity: .35; } 62%, 100% { opacity: 0; transform: scale(1.6); } }

/* gönder butonu dalgası */
.dalga-efekt { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(248, 251, 251, .45); pointer-events: none; animation: dalga-efekt .7s ease-out forwards; }

/* =========================================================
   4. Header, mega menü, çekmece
   ========================================================= */
.ust { position: sticky; top: 0; z-index: 50; background: var(--kopuk); transition: transform .4s var(--ease), box-shadow .3s, background .3s; }
.ust.is-golge { background: rgba(248, 251, 251, .92); box-shadow: 0 8px 30px rgba(12, 43, 77, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ust.is-gizli { transform: translateY(-100%); }
.ust__ic { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.marka { display: inline-flex; align-items: center; min-height: 44px; }
.marka__logo { display: block; width: auto; height: 56px; animation: logo-otur .8s var(--ease) both; }

.ust__menu { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--alaca); }
.ust__menu-cizgi, .ust__menu-cizgi::before, .ust__menu-cizgi::after { display: block; width: 26px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), background .25s; }
.ust__menu-cizgi { position: relative; }
.ust__menu-cizgi::before, .ust__menu-cizgi::after { content: ""; position: absolute; left: 0; }
.ust__menu-cizgi::before { top: -8px; }
.ust__menu-cizgi::after { top: 8px; }
.ust__menu[aria-expanded="true"] .ust__menu-cizgi { background: transparent; }
.ust__menu[aria-expanded="true"] .ust__menu-cizgi::before { transform: translateY(8px) rotate(45deg); }
.ust__menu[aria-expanded="true"] .ust__menu-cizgi::after { transform: translateY(-8px) rotate(-45deg); }

.nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 40;
  padding: 8px var(--gutter) 120px; overflow-y: auto;
  background: var(--kopuk);
  clip-path: circle(0 at calc(100% - 36px) calc(var(--header-h) / -2)); visibility: hidden;
  transition: clip-path .55s var(--ease), visibility 0s .55s;
}
.nav.is-open { clip-path: circle(170% at calc(100% - 36px) calc(var(--header-h) / -2)); visibility: visible; transition-delay: 0s; }
.nav__liste { list-style: none; }
.nav__oge { border-bottom: 1px solid var(--cizgi); }
.nav__dugme, .nav__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px;
  padding: 0; border: 0; background: none; color: var(--alaca);
  font-size: 1.2rem; font-weight: 600; text-decoration: none; text-align: left;
}
.nav__ok { transition: transform .25s var(--ease); }
.nav__dugme[aria-expanded="true"] .nav__ok { transform: rotate(180deg); }
.ust__ara { width: 100%; margin-top: 24px; }

.mega { display: none; padding-bottom: 16px; }
.nav__oge.is-open > .mega { display: block; }
.mega__ic { display: grid; gap: 24px; padding-inline: 0; }
.mega__baslik { margin: 0 0 .5rem; font-family: var(--baslik); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.mega__liste, .mega__ilceler { list-style: none; }
.mega__liste a, .mega__ilceler a { display: block; padding: .6rem .75rem; border-radius: 16px; text-decoration: none; transition: background .2s; }
.mega__liste a:hover, .mega__ilceler a:hover { background: var(--beton); }
.mega__ad { display: block; font-weight: 600; }
.mega__not { display: block; font-size: .95rem; line-height: 1.4; color: var(--asfalt); }
.mega__ilceler { columns: 2; column-gap: 1rem; }
.mega__tum { display: inline-block; margin-top: .75rem; padding: .6rem 0; font-weight: 600; }
.mega__cagri { padding: 24px; border-radius: 24px; background: var(--alaca); color: var(--kopuk); }
.mega__cagri p { margin-bottom: .8rem; }
.mega__cagri .mega__cagri-baslik { margin-bottom: .4rem; font-family: var(--baslik); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.mega__cagri-link { display: inline-block; margin-bottom: 1rem; padding: .5rem 0; font-weight: 600; }
.mega__cagri .btn { width: 100%; }

/* =========================================================
   5. Bölüm iskeleti, başlıklar, giriş hareketleri
   ========================================================= */
.bolum { padding-block: clamp(64px, 9vw, 120px); background: var(--bg, var(--beton)); }
.bolum--kopuk { --bg: var(--kopuk); }
.bolum--beton { --bg: var(--beton); }
.bolum__baslik { margin-bottom: .5em; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.02; }
.bolum__giris { max-width: 62ch; font-size: 1.125rem; color: var(--asfalt); }
.koyu .bolum__giris { color: rgba(248, 251, 251, .85); }

.satir { display: block; overflow: hidden; padding-block: .06em .1em; margin-block: -.06em -.1em; }
.satir > span { display: block; }
html.js [data-baslik]:not(.gorundu) .satir > span { transform: translateY(110%); }
[data-baslik].gorundu .satir > span { animation: satir-yuk .8s var(--ease) backwards; animation-delay: calc(var(--i) * 90ms); }

html.js [data-gir]:not(.gorundu) { opacity: 0; }
html.js [data-gir="perde"]:not(.gorundu) { opacity: 1; clip-path: inset(100% 0 0 0 round 32px); }
html.js [data-gir="maske"]:not(.gorundu) { opacity: 1; clip-path: inset(100% 0 0 0 round 28px); }
[data-gir].gorundu { animation: gir-yukari .9s var(--ease) backwards; animation-delay: calc(var(--g, 0) * 1ms); }
[data-gir="perde"].gorundu { animation-name: gir-perde; animation-duration: 1s; }
[data-gir="maske"].gorundu { animation-name: gir-maske; animation-duration: .9s; }

/* Ekran dışındaki sürekli animasyonlar durur */
html.js [data-dongu]:not(.gorunur) *,
html.js [data-dongu]:not(.gorunur) *::before,
html.js [data-dongu]:not(.gorunur) *::after { animation-play-state: paused; }

/* =========================================================
   6. Dalga ayırıcılar
   ========================================================= */
.dalga { position: relative; height: clamp(48px, 7vw, 100px); margin-top: -1px; overflow: hidden; background: var(--ust); }
.dalga__katman { position: absolute; left: 0; bottom: -1px; width: 200%; height: 100%; }
.dalga__katman path { fill: var(--alt); }
.dalga__katman--1 { animation: dalga-akis 14s linear infinite; }
.dalga__katman--2 { opacity: .45; animation: dalga-akis 22s linear -8s infinite reverse; }

/* =========================================================
   7. Hero
   ========================================================= */
.hero { position: relative; overflow: clip; background: var(--kopuk); }
.hero::before { content: ""; position: absolute; right: -14%; top: 4%; width: min(62vw, 880px); aspect-ratio: 1; border-radius: 50%; background: var(--su); opacity: .55; transform: translate3d(0, calc(var(--p, 0) * 60px), 0); }
.hero::after { content: ""; position: absolute; right: calc(-14% + min(8vw, 110px)); top: calc(4% + min(8vw, 110px)); width: min(46vw, 660px); aspect-ratio: 1; border: 2px solid rgba(12, 43, 77, .1); border-radius: 50%; }
.hero__ic { position: relative; z-index: 1; display: grid; gap: 32px; padding-block: 28px 48px; }
.hero__metin { transform: translate3d(0, calc(var(--p, 0) * -24px), 0); }
.hero__h1 { margin-bottom: 18px; font-size: 2.4rem; line-height: 1; }
.h1-satir { display: block; }
.kelime { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
.kelime > span { display: inline-block; animation: kelime-yuk .22s ease-out both; animation-delay: calc(.1s + var(--w) * 40ms); }
.hero__alt { max-width: 38rem; font-size: 1.0625rem; color: var(--asfalt); }
.hero__aksiyon { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.hero__bilgiler { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 24px 0 0; padding: 0; list-style: none; font-weight: 600; }
.hero__bilgiler li { display: flex; align-items: center; gap: .5rem; }
.hero__bilgiler li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tank); }

.hero__sahne { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; margin-inline: auto; transform: translate3d(0, calc(var(--p, 0) * 40px), 0); }
.hero__kemer { position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 32px 32px; background: var(--alaca); box-shadow: 0 40px 80px rgba(12, 43, 77, .28); animation: kemer-ac 1.3s var(--ease) .2s both; }
.hero__video-ic { position: absolute; inset: 0; transform: scale(calc(1.15 - var(--p, 0) * .15)); transform-origin: 60% 75%; }
.hero__video-ic video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.hero__video-ic video.aktif { opacity: 1; }
.su-halka { position: absolute; left: 60%; top: 75%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid rgba(248, 251, 251, .85); border-radius: 50%; opacity: 0; animation: su-halka 3.2s ease-out 1.4s infinite; }
.su-halka--2 { animation-delay: 2.47s; }
.su-halka--3 { animation-delay: 3.53s; }
.hero__sahada { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: .6rem; margin: 0; padding: .5rem 1rem; border-radius: 999px; background: rgba(12, 43, 77, .88); color: var(--kopuk); font-size: .95rem; font-weight: 600; animation: belir .4s ease-out 1.3s both; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--tank-acik); animation: yan 1.6s ease-in-out infinite; }
.hero__halka { position: absolute; left: 60%; top: 75%; width: 140px; height: 140px; margin: -70px 0 0 -70px; color: var(--kopuk); pointer-events: none; animation: halka-ac 1.7s var(--ease) both; }
/* slayta bağlı bilgi kartı: kemerin sağından boşluğa taşar */
.hero__kartlar { position: absolute; right: -10px; top: 9%; z-index: 2; display: grid; width: min(62%, 240px); }
/* dar ekranda tek kart: yalnız oynayan videonun kartı görünür */
.hero__kart { grid-area: 1 / 1; display: block; width: 100%; margin: 0; padding: 14px 16px 16px; border: 0; border-radius: 20px; background: rgba(248, 251, 251, .94); box-shadow: 0 24px 50px rgba(12, 43, 77, .22); backdrop-filter: blur(8px); color: var(--alaca); font: inherit; text-align: left; text-decoration: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0); transition: opacity .5s, transform .7s var(--ease), visibility 0s .7s; }
.hero__kart.aktif { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .15s, transform .7s var(--ease) .15s, visibility 0s; }
.hero__kartlar { animation: kart-gir .8s var(--ease) 1.1s both; }
.hero__kart-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: var(--asfalt); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero__kart-no b { color: var(--tank-koyu); font-family: var(--baslik); font-size: 1.5rem; letter-spacing: 0; }
.hero__kart-baslik { display: block; font-family: var(--baslik); font-size: 1.55rem; font-weight: 800; line-height: 1.02; }
.hero__kart-cubuk { display: block; height: 4px; margin-top: 14px; border-radius: 2px; background: var(--cizgi); overflow: hidden; }
.hero__kart-cubuk span { display: block; height: 100%; border-radius: inherit; background: var(--tank); transform: scaleX(var(--ilerleme, 0)); transform-origin: left; transition: transform .26s linear; }
.hero__kart-cubuk span.sifir { transition: none; }
.hero__kart--ara { background: var(--alaca); color: var(--kopuk); }
.hero__kart--ara .hero__kart-ust { color: var(--su); }
.hero__kart-tel { display: flex; align-items: center; gap: .5rem; margin-top: 10px; color: var(--fener); font-family: var(--baslik); font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; }
.hero__kart-tel .ikon { width: 20px; height: 20px; }
.hero__kart:focus-visible { outline: 3px solid var(--odak); outline-offset: 3px; }
@keyframes kart-gir { from { opacity: 0; transform: translate3d(24px, 12px, 0); } }
.rozet { position: absolute; left: -8px; bottom: 44px; display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; background: var(--kopuk); box-shadow: 0 18px 40px rgba(12, 43, 77, .24); }
.rozet__yazi { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(var(--don, 0deg)); }
.rozet__yazi text { fill: var(--alaca); font-family: var(--govde); font-size: 12.5px; font-weight: 600; }
.rozet__ikon { position: relative; width: 44px; height: auto; }

/* =========================================================
   8. Akan şerit
   ========================================================= */
.sirit-kap { overflow: hidden; padding-block: clamp(36px, 6vw, 72px); background: var(--kopuk); }
.sirit { width: 108vw; margin-inline: -4vw; padding-block: clamp(14px, 2.2vw, 26px); overflow: hidden; background: var(--alaca); color: var(--kopuk); transform: rotate(-1.5deg); }
.sirit__iz { display: flex; width: max-content; will-change: transform; }
.sirit__grup { display: flex; flex: none; align-items: center; }
.sirit__oge { padding-inline: .3em; font-family: var(--baslik); font-weight: 800; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1.1; white-space: nowrap; }
.sirit__oge--kontur { color: transparent; -webkit-text-stroke: 2px var(--kopuk); }
.sirit__ayrac { width: clamp(28px, 3.4vw, 48px); height: clamp(28px, 3.4vw, 48px); color: var(--tank-acik); }

/* =========================================================
   9. Sorununuz hangisi
   ========================================================= */
.sorun { margin-top: 40px; }
.sorun__sekmeler { display: none; }
.sorun__panel { margin-bottom: 12px; padding: 0 1.25rem; border-radius: 24px; background: var(--beton); }
.sorun__panel-baslik { font-size: 1.5rem; }
.sorun__ac { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 0; border: 0; background: none; font-family: var(--baslik); font-weight: 800; font-size: 1.5rem; line-height: 1; text-align: left; }
.sorun__ac::after { content: ""; width: 12px; height: 12px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); }
.sorun__ac[aria-expanded="true"]::after { transform: rotate(-135deg); }
.sorun__ac:disabled { color: inherit; cursor: default; }
.sorun__ac:disabled::after { display: none; }
.sorun__icerik { display: grid; gap: 16px; padding-bottom: 24px; animation: belir .4s ease-out; }
.sorun__sahne { width: min(200px, 60%); aspect-ratio: 1; padding: 10px; border-radius: 28px; background: var(--kopuk); }
.sorun__sahne svg { width: 100%; height: 100%; }
.sorun__alt { margin: 1.1rem 0 .2rem; font-family: var(--govde); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--tank-koyu); }
.sorun__linkler { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1rem 0 1.25rem; }
.sorun__linkler a { padding: .6rem 0; font-weight: 600; }
html:not(.js) .sorun { display: block; }
html:not(.js) .sorun__sekmeler { display: none; }
html:not(.js) .sorun__ac { pointer-events: none; }
html:not(.js) .sorun__ac::after { display: none; }
html.js .sorun__panel[data-acik="0"] .sorun__icerik { display: none; }

/* belirti sahneleri */
.s-k { fill: none; stroke: var(--alaca); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-su { fill: var(--su-koyu); }
.s-dx { animation: s-dx 2.4s linear infinite; }
.s-dx--ters { animation-direction: reverse; animation-duration: 3.4s; }
.s-yuk--1 { animation: s-yuk-1 4.5s ease-in-out infinite alternate; }
.s-yuk--2 { animation: s-yuk-2 7s ease-in-out infinite alternate; }
.s-yuk--6 { animation: s-yuk-6 6s ease-in-out infinite; }
.s-kab { fill: var(--kopuk); stroke: var(--alaca); stroke-width: 1.5; animation: s-kab 2.6s ease-in infinite; }
.s-kab--2 { animation-delay: .8s; }
.s-kab--3 { animation-delay: 1.5s; }
.s-kutu { fill: var(--kopuk); stroke: var(--alaca); stroke-width: 3; animation: s-bob 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.s-koku { animation: s-koku 3s ease-in-out infinite; }
.s-koku--2 { animation-delay: 1s; }
.s-koku--3 { animation-delay: 2s; }
.s-kapak { animation: s-kapak 2.4s ease-in-out infinite; }
.s-damla { animation: s-damla-1 2.4s ease-out infinite; opacity: 0; }
.s-damla--2 { animation-name: s-damla-2; animation-delay: .8s; }
.s-damla--3 { animation-name: s-damla-3; animation-delay: 1.6s; }
.s-akis { animation: s-bob 2.4s ease-in-out infinite; }
.s-damla--4 { animation: s-damla-4 3.6s ease-in infinite; }
.s-halka { fill: none; stroke: var(--alaca); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: s-halka 3.6s ease-out infinite; opacity: 0; }
.s-girdap { transform-box: fill-box; transform-origin: center; animation: s-don 6s linear infinite; }
.s-ibre { transform-box: view-box; transform-origin: 110px 62px; animation: s-ibre 6s ease-in-out infinite; }

/* =========================================================
   10. Hizmetler
   ========================================================= */
.hizmet-liste { margin-top: 40px; list-style: none; }
.hizmet { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; margin-bottom: 14px; padding: 1.5rem 1.25rem 1.5rem 1.5rem; border-radius: 28px; background: var(--kopuk); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.hizmet::before { content: ""; position: absolute; left: 9px; top: 24px; bottom: 24px; width: 4px; border-radius: 2px; background: var(--tank); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.hizmet:hover, .hizmet:focus-within { box-shadow: var(--golge); transform: translateY(-2px); }
.hizmet:hover::before, .hizmet:focus-within::before { transform: scaleY(1); }
.hizmet__ikon { padding-top: .2rem; color: var(--tank-koyu); }
.hizmet:hover .hizmet__ikon .ikon *, .hizmet:focus-within .hizmet__ikon .ikon * { animation: ciz .9s var(--ease) both; }
.hizmet__ad { margin-bottom: .35em; font-size: 1.7rem; }
.hizmet__ad a { display: inline-block; text-decoration: none; transition: transform .35s var(--ease); }
.hizmet:hover .hizmet__ad a, .hizmet:focus-within .hizmet__ad a { transform: translateX(6px); }
.hizmet__ad a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hizmet__ad a:focus-visible { outline: none; }
.hizmet__ad a:focus-visible::after { outline: 2px solid var(--odak); outline-offset: -2px; }
.hizmet__govde p { margin: 0; color: var(--asfalt); }
.hizmet__gorsel { grid-column: 1 / -1; grid-row: 1; width: min(100%, 260px); height: 110px; margin-bottom: 16px; overflow: hidden; border-radius: 999px; pointer-events: none; }
.hizmet__gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hizmet__ikon, .hizmet__govde { grid-row: 2; }
.hizmet__sag { grid-column: 2; display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.hizmet__ara { position: relative; z-index: 1; min-width: 92px; }
.hizmet__incele { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.hizmet--ana { padding-block: 1.75rem; }
.hizmet--ana .hizmet__ad { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.hizmet--ana .hizmet__govde p { max-width: 56ch; }
.hizmet-destek__baslik { margin: 64px 0 0; font-size: 2rem; }
.hizmet-liste--sik { display: grid; gap: 12px; margin-top: 16px; }
.hizmet-liste--sik .hizmet { margin: 0; padding-block: 1.1rem; border-radius: 22px; }
.hizmet-liste--sik .hizmet__ad { margin-bottom: .2em; font-size: 1.5rem; }
.hizmet-liste--sik .hizmet__govde p { font-size: 1rem; }
.hizmet-liste--sik .hizmet__ikon, .hizmet-liste--sik .hizmet__govde { grid-row: 1; }
.hizmet-liste--sik .hizmet__sag { margin-top: .5rem; }

/* =========================================================
   11. Apartman sahnesi
   ========================================================= */
.apartman { position: relative; padding-block: clamp(64px, 9vw, 112px); background: var(--alaca); }
.apartman__ic { display: grid; gap: 40px; }
.apartman__metin p { color: rgba(248, 251, 251, .9); }
.apartman__liste { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.apartman__liste li { padding: .5rem 0 .5rem 1.25rem; position: relative; font-weight: 600; transition: opacity .35s; }
.apartman__liste li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 8px; height: 8px; border-radius: 50%; background: var(--tank-acik); }
html.js .apartman__liste li { opacity: .45; }
html.js .apartman__liste li.aktif { opacity: 1; }
.apartman__sema { margin: 0; }
.ap { width: 100%; max-width: 560px; height: auto; margin-inline: auto; font-family: var(--govde); }
.ap-cizgi { stroke: rgba(248, 251, 251, .5); stroke-width: 2; fill: none; }
.ap-arac * { fill: rgba(248, 251, 251, .1); stroke: rgba(248, 251, 251, .75); stroke-width: 2; }
.ap-boru path { stroke: #5C5148; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ap-leke ellipse { fill: #2B211B; opacity: calc(1 - clamp(0, (var(--p, 1) - var(--b)) / .06, 1)); }
.ap-temiz path { stroke: var(--tank-acik); stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, (var(--p, 1) - var(--b)) / var(--w), 1)); }
.ap-su path { fill: none; stroke: var(--kopuk); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 14; animation: ap-akis .9s linear infinite; opacity: clamp(0, (var(--p, 1) - var(--b)) / .04, 1); }
.ap-hortum { fill: none; stroke: var(--su); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, var(--p, 1) / var(--w), 1)); }
.ap-yazi { fill: var(--kopuk); font-size: 17px; font-weight: 600; }
.ap-etiket { opacity: clamp(0, (var(--p, 1) - .86) / .08, 1); transform: translateY(calc((1 - clamp(0, (var(--p, 1) - .86) / .08, 1)) * 10px)); }
.ap-etiket rect { fill: var(--tank-acik); }
.ap-etiket path { fill: none; stroke: var(--alaca); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ap-etiket text { fill: var(--alaca); font-size: 20px; font-weight: 600; }

/* =========================================================
   12. Nasıl çalışıyoruz
   ========================================================= */
.surec__alan { position: relative; margin-top: 40px; }
/* Sabitlenmeyen (dikey) akışta kartlar içerik sütununda kalır */
html:not(.sabit) .surec__alan { width: calc(100% - 2 * var(--gutter)); max-width: var(--max); margin-inline: auto; }
.surec__ray { display: grid; gap: 16px; padding: 0 0 0 56px; list-style: none; }
.surec__kart { position: relative; padding: 1.5rem; border-radius: 28px; background: var(--beton); }
.surec__nokta { position: absolute; left: -52px; top: 1.9rem; width: 28px; height: 28px; border: 3px solid var(--tank); border-radius: 50%; background: var(--kopuk); transition: background .3s; }
.surec__kart.gecildi .surec__nokta { background: var(--tank); }
.surec__no { margin: 0 0 .25rem; font-family: var(--baslik); font-weight: 800; font-size: 4.5rem; line-height: .9; color: transparent; -webkit-text-stroke: 2px var(--alaca); }
.surec__ikon { width: 40px; height: 40px; margin-bottom: .75rem; color: var(--tank-koyu); }
.surec__ad { margin-bottom: .4em; font-size: 1.7rem; }
.surec__kart p:last-child { margin: 0; color: var(--asfalt); }
.surec__boru { position: absolute; left: 14px; top: 0; bottom: 0; width: 9px; border-radius: 5px; background: rgba(12, 43, 77, .14); }
.surec__dolu { width: 100%; height: 100%; border-radius: 5px; background: var(--tank); clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0 round 5px); }
.surec__akan { width: 100%; height: 100%; }
.surec__akan line { stroke: var(--kopuk); stroke-width: 3; stroke-dasharray: 8 16; stroke-linecap: round; animation: boru-akis .8s linear infinite; }
.surec__akan .h { display: none; }

/* =========================================================
   13. Bölgeler
   ========================================================= */
.seritler { margin-bottom: 40px; overflow: hidden; }
.seritler__sira span { display: inline-block; white-space: pre; font-family: var(--baslik); font-weight: 800; font-size: clamp(3.4rem, 10vw, 8rem); line-height: 1.05; color: transparent; -webkit-text-stroke: 2px rgba(12, 43, 77, .35); }
.seritler__sira--1 span { transform: translate3d(calc(var(--p, .5) * -14%), 0, 0); }
.seritler__sira--2 span { transform: translate3d(calc(-14% + var(--p, .5) * 14%), 0, 0); }
.ara-kutu { max-width: 340px; margin-top: 32px; transition: max-width .45s var(--ease); }
.ara-kutu:focus-within { max-width: 720px; }
.ara-kutu label { display: block; margin-bottom: .35rem; font-weight: 600; }
.ara-kutu input { display: block; width: 100%; min-height: 56px; padding: .6rem 1.5rem; border: 2px solid rgba(12, 43, 77, .3); border-radius: 999px; background: var(--kopuk); }
.bolge-bos { margin-top: 16px; padding: 1rem 1.5rem; border-radius: 24px; background: var(--kopuk); font-weight: 600; }
.bolge-izgara { margin-top: 36px; column-width: 15rem; column-gap: 40px; }
.ilce { break-inside: avoid; margin-bottom: 32px; transition: opacity .22s, transform .22s; }
.ilce__ad { font-size: 1.7rem; }
.ilce__ad a { display: inline-block; padding: .35rem 0; text-decoration: none; }
.ilce__ad a:hover { text-decoration: underline; }
.ilce__semtler { list-style: none; }
.ilce__semtler li { transition: opacity .22s, transform .22s; }
.ilce__semtler a { display: block; padding: .5rem 0; font-size: .98rem; color: var(--asfalt); text-decoration: none; }
.ilce__semtler a:hover { color: var(--alaca); text-decoration: underline; }
.sonuyor { opacity: 0; transform: scale(.92); }

/* =========================================================
   14. SSS
   ========================================================= */
.sss__liste { max-width: 56rem; margin-top: 32px; }
.sss__oge { margin-bottom: 12px; padding: 0 1.5rem; border-radius: 24px; background: var(--beton); }
.sss__oge summary { position: relative; display: flex; align-items: center; min-height: 68px; padding: .75rem 2.5rem .75rem 0; font-size: 1.15rem; font-weight: 600; line-height: 1.35; list-style: none; cursor: pointer; }
.sss__oge summary::-webkit-details-marker { display: none; }
.sss__oge summary::before, .sss__oge summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 18px; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.sss__oge summary::after { transform: rotate(90deg); }
.sss__oge[open] summary::before { transform: rotate(180deg); }
.sss__oge[open] summary::after { transform: rotate(180deg); }
.sss__cevap { overflow: hidden; }
.sss__cevap p { margin: 0; padding-bottom: 1.25rem; color: var(--asfalt); }
.sss__ara { margin-top: 28px; }

/* =========================================================
   15. Form
   ========================================================= */
.iletisim { display: grid; gap: 40px; }
.form { max-width: 40rem; margin-top: 28px; }
.alan-kap { margin-bottom: 14px; }
.alan { position: relative; overflow: hidden; border: 2px solid rgba(12, 43, 77, .22); border-radius: 20px; background: var(--kopuk); }
.alan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tank-koyu); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.alan:focus-within::after { transform: scaleX(1); }
.alan input, .alan select, .alan textarea { display: block; width: 100%; min-height: 60px; padding: 1.55rem 1rem .45rem; border: 0; border-radius: 0; background: transparent; appearance: none; -webkit-appearance: none; outline: none; }
.alan textarea { min-height: 112px; resize: vertical; }
.alan label { position: absolute; left: 1rem; top: 1.05rem; color: var(--asfalt); font-size: 1rem; line-height: 1.2; pointer-events: none; transform-origin: left top; transition: transform .25s var(--ease); }
.alan input:focus + label, .alan input:not(:placeholder-shown) + label,
.alan textarea:focus + label, .alan textarea:not(:placeholder-shown) + label,
.alan select:focus + label, .alan select:valid + label { transform: translateY(-.75rem) scale(.78); }
.alan:focus-within { outline: 2px solid var(--odak); outline-offset: 2px; }
.alan.gecersiz { border-color: var(--hata); }
.alan__hata { margin: .35rem 0 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--hata); }
.onaylar { margin: 24px 0; }
.onay { display: flex; align-items: flex-start; gap: .8rem; min-height: 44px; padding: .5rem 0; font-size: 1rem; cursor: pointer; }
.onay__kutu { position: relative; flex: none; width: 28px; height: 28px; }
.onay__kutu input { appearance: none; -webkit-appearance: none; display: block; width: 28px; height: 28px; margin: 0; border: 2px solid var(--alaca); border-radius: 9px; background: var(--kopuk); cursor: pointer; transition: background .25s, border-color .25s; }
.onay__kutu input:checked { border-color: var(--tank-koyu); background: var(--tank-koyu); }
.onay__kutu input[aria-invalid="true"] { border-color: var(--hata); }
.onay__kutu svg { position: absolute; inset: 3px; width: 22px; height: 22px; fill: none; stroke: var(--kopuk); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--ease) .05s; }
.onay__kutu input:checked + svg { stroke-dashoffset: 0; }
.onay-satir .alan__hata { margin: 0 0 .5rem 2.4rem; }
.onaylar__not { margin: .5rem 0 0; font-size: 1rem; }
.form__gonder { width: 100%; min-height: 58px; font-size: 1.1rem; }
.form__genel { margin-top: 12px; }
.iletisim__yan { align-self: start; padding: 32px; border-radius: 32px; background: var(--alaca); color: var(--kopuk); --odak: var(--tank-acik); box-shadow: var(--golge); }
.iletisim__ya { margin: 0 0 1rem; font-family: var(--baslik); font-weight: 800; font-size: 2rem; line-height: 1; }
.iletisim__bilgi { margin: 28px 0 0; }
.iletisim__bilgi dt { margin-top: .9rem; font-weight: 600; color: rgba(248, 251, 251, .8); }
.iletisim__bilgi dd { margin: 0; }

/* =========================================================
   16. Footer ve kapanış
   ========================================================= */
.alt { background: var(--alaca); padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.finale { padding-block: clamp(48px, 8vw, 96px) clamp(24px, 4vw, 48px); }
.finale__satir { margin: 0; font-family: var(--baslik); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.dev-tel { position: relative; display: block; width: fit-content; margin-top: 8px; font-family: var(--baslik); font-weight: 800; font-size: clamp(3rem, 15vw, 13.5rem); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }
.dev-tel__kontur { color: transparent; -webkit-text-stroke: 2px rgba(255, 174, 31, .55); }
.dev-tel__su {
  position: absolute; left: 0; top: 0; color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' preserveAspectRatio='none'%3E%3Cpath fill='%23FFAE1F' d='M0 300C100 270 200 270 300 300S500 330 600 300V600H0Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 1em 2em;
  background-position-x: 0; background-position-y: calc(.15em - var(--p, 1) * 1.15em);
  -webkit-background-clip: text; background-clip: text;
  animation: dev-dalga 4s linear infinite;
}
.alt__izgara { display: grid; gap: 40px; padding-top: 24px; }
.alt__logo { display: inline-block; padding: 12px 20px; border-radius: 24px; background: var(--kopuk); }
.alt__logo img { display: block; width: auto; height: 52px; }
.alt__marka p { color: rgba(248, 251, 251, .85); }
.alt__marka > p:first-of-type { margin-top: 1rem; }
.alt__wa { display: inline-block; padding: .5rem 0; font-weight: 600; }
.alt__adres { margin-top: 1rem; font-style: normal; line-height: 1.7; }
.alt__baslik { margin: 0 0 .5rem; font-family: var(--baslik); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.alt__kolon ul { list-style: none; }
.alt__liste-iki { columns: 2; column-gap: 1rem; }
.alt__kolon a { display: block; padding: .5rem 0; text-decoration: none; }
.alt__kolon a:hover { text-decoration: underline; }
.alt__telif { max-width: none; margin: 48px 0 0; padding-top: 20px; border-top: 1px solid rgba(248, 251, 251, .2); font-size: 1rem; }
.alt__imza { max-width: none; margin: 8px 0 0; color: rgba(248, 251, 251, .75); font-size: .9rem; }
.alt__imza a { color: var(--kopuk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.alt__imza a:hover { color: var(--fener); }
.tel--buyuk { font-size: 2.4rem; text-decoration: none; }
.tel--fener { color: var(--fener); }

/* =========================================================
   17. Yüzen öğeler: mobil çubuk, ilerleme, boru hattı, imleç
   ========================================================= */
.cubuk { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 999px; background: var(--alaca); box-shadow: 0 14px 40px rgba(12, 43, 77, .3); }
.cubuk a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 60px; font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.cubuk__ara { background: var(--fener); color: var(--alaca); }
.cubuk__wa { background: var(--tank-koyu); color: var(--kopuk); }
.ilerleme { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 3px; background: var(--tank); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.boru-hatti { display: none; position: absolute; left: 0; top: 0; z-index: 5; width: 80px; pointer-events: none; }
.boru-hatti__taban { fill: none; stroke: rgba(120, 150, 170, .4); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.boru-hatti__dolu { fill: none; stroke: var(--tank); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; }
.boru-hatti__vana { fill: var(--kopuk); stroke: var(--tank); stroke-width: 3; transition: fill .3s; }
.boru-hatti__vana.dolu { fill: var(--tank); }
.boru-hatti__damla { fill: var(--tank-acik); filter: drop-shadow(0 0 6px rgba(93, 187, 48, .9)); }
.imlec { position: fixed; left: 0; top: 0; z-index: 200; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.imlec.gorunur { opacity: 1; }
.imlec__ic { display: block; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--tank); border-radius: 50%; transition: transform .25s var(--ease); }
.imlec.buyuk .imlec__ic { transform: scale(4); }
html.menu-acik { overflow: hidden; }

/* =========================================================
   18. Animasyon tanımları
   ========================================================= */
@keyframes kelime-yuk { from { transform: translateY(105%); } to { transform: none; } }
@keyframes satir-yuk { from { transform: translateY(110%); } to { transform: none; } }
@keyframes kemer-ac { from { clip-path: circle(56px at 60% 75%); } to { clip-path: circle(150% at 60% 75%); } }
@keyframes halka-ac {
  0% { opacity: 0; transform: rotate(0) scale(.85); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: rotate(100deg) scale(2.4); }
}
@keyframes su-halka { 0% { opacity: .85; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes logo-otur { from { opacity: 0; transform: translateY(-8px) rotate(-3deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes yan { 50% { opacity: .3; } }
@keyframes nabiz { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes titre { 0%, 55%, 100% { transform: rotate(0); } 60%, 70%, 80% { transform: rotate(-12deg); } 65%, 75%, 85% { transform: rotate(12deg); } }
@keyframes dalga-efekt { to { opacity: 0; transform: scale(18); } }
@keyframes gir-yukari { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gir-perde { from { clip-path: inset(100% 0 0 0 round 32px); } to { clip-path: inset(0 round 32px); } }
@keyframes gir-maske { from { clip-path: inset(100% 0 0 0 round 28px); transform: translateY(28px); } to { clip-path: inset(0 round 28px); transform: none; } }
@keyframes dalga-akis { to { transform: translateX(-50%); } }
@keyframes ciz { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes ap-akis { to { stroke-dashoffset: -20; } }
@keyframes boru-akis { to { stroke-dashoffset: -24; } }
@keyframes dev-dalga { to { background-position-x: 1em; } }
@keyframes s-dx { to { transform: translateX(-70px); } }
@keyframes s-yuk-1 { from { transform: translateY(80px); } to { transform: translateY(0); } }
@keyframes s-yuk-2 { from { transform: translateY(70px); } to { transform: translateY(0); } }
@keyframes s-yuk-6 { 0% { transform: translateY(84px); } 85%, 100% { transform: translateY(0); } }
@keyframes s-kab { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
@keyframes s-bob { 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes s-koku { 0% { opacity: 0; transform: translateY(14px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes s-kapak { 50% { transform: translateY(-7px); } }
@keyframes s-damla-1 { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 55% { transform: translate(-38px, -34px); } 100% { opacity: 0; transform: translate(-64px, 26px); } }
@keyframes s-damla-2 { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 55% { transform: translate(8px, -50px); } 100% { opacity: 0; transform: translate(14px, 30px); } }
@keyframes s-damla-3 { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 55% { transform: translate(40px, -36px); } 100% { opacity: 0; transform: translate(66px, 24px); } }
@keyframes s-damla-4 { 0% { transform: translateY(0) scale(.7); } 70% { transform: translateY(0) scale(1); } 100% { transform: translateY(66px) scale(1, 1.25); } }
@keyframes s-halka { 0%, 70% { opacity: 0; transform: scale(.5); } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(9, 4); } }
@keyframes s-don { to { transform: rotate(360deg); } }
@keyframes s-ibre { 0% { transform: rotate(-62deg); } 85%, 100% { transform: rotate(58deg); } }

/* =========================================================
   19. Geniş ekranlar
   ========================================================= */
@media (min-width: 640px) {
  .onay-satir .alan__hata { margin-left: 2.4rem; }
  .form__gonder { width: auto; min-width: 20rem; }
}

@media (min-width: 960px) {
  :root { --header-h: 88px; }
  body { font-size: 1.125rem; }
  .alt { padding-bottom: 32px; }
  .cubuk { display: none; }

  .marka__logo { height: 78px; }
  .ust__menu { display: none; }
  .nav { position: static; display: flex; flex: 1; align-items: center; padding: 0; overflow: visible; background: none; clip-path: none; visibility: visible; transition: none; }
  .nav__liste { display: flex; margin-inline: auto; }
  .nav__oge { border: 0; }
  .nav__dugme, .nav__link { gap: .35rem; width: auto; height: var(--header-h); padding: 0 1rem; font-size: 1rem; }
  .nav__dugme[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--tank); }
  .ust__ara { width: auto; margin: 0; }

  .mega {
    position: absolute; left: 0; right: 0; top: 100%; display: block; padding: 0;
    border-radius: 0 0 32px 32px; background: var(--kopuk); box-shadow: 0 30px 60px rgba(12, 43, 77, .18);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s .2s;
  }
  .nav__oge.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  html:not(.js) .nav__oge:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
  .nav__oge.is-open .mega li { animation: gir-yukari .35s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 20ms + 60ms); }
  .mega__ic { padding: 32px var(--gutter) 40px; gap: 40px; }
  .mega__ic--hizmet { grid-template-columns: 1fr 1.7fr 17rem; }
  .mega__ic--bolge { grid-template-columns: 1.4fr 1fr; }
  .mega__liste--sik { columns: 2; column-gap: 1rem; }
  .mega__liste--sik li { break-inside: avoid; }
  .mega__ilceler { columns: 3; }
  .mega__ilceler a { padding-block: .45rem; }

  .hero__ic { grid-template-columns: 6fr 5fr; align-items: center; column-gap: clamp(24px, 3vw, 56px); min-height: calc(min(100svh, 900px) - var(--header-h)); padding-block: 24px; }
  .hero__h1 { font-size: clamp(2.6rem, 4.4vw, 4.25rem); }
  .hero__alt { font-size: 1.15rem; }
  .hero__sahne { justify-self: end; width: auto; max-width: none; height: min(calc(100svh - var(--header-h) - 72px), 700px); margin: 0; }
  .rozet { left: -48px; bottom: 56px; width: 140px; height: 140px; }
  /* geniş ekranda sağdaki boşluğa ortalanır, dar masaüstünde kemerin üzerine biner */
  .hero__kartlar { --kw: clamp(210px, calc(var(--tasma) + 40px), 270px); right: auto; top: 26%; width: var(--kw); left: min(calc(100% + (var(--tasma) - var(--kw)) / 2), calc(100% + var(--tasma) - 40px - var(--kw))); }
  .hero__kart { padding: 18px 20px 20px; }
  .hero__kart-baslik { font-size: 1.75rem; }
  .rozet__ikon { width: 50px; }

  .sorun { display: grid; grid-template-columns: 4fr 8fr; column-gap: 56px; align-items: start; }
  .sorun__sekmeler { position: relative; display: flex; flex-direction: column; gap: 8px; }
  .sorun__sekme { position: relative; min-height: 60px; padding: .9rem 1.5rem; border: 0; border-radius: 999px; background: transparent; font-size: 1.1rem; font-weight: 600; text-align: left; transition: background .2s; }
  .sorun__sekme::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--tank); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
  .sorun__sekme:hover { background: var(--beton); }
  .sorun__sekme[aria-selected="true"] { background: var(--beton); }
  .sorun__sekme[aria-selected="true"]::before { transform: scaleY(1); }
  .sorun__panel { margin: 0; padding: 2rem 2.25rem; border-radius: 32px; }
  .sorun__panel-baslik { margin-bottom: 8px; font-size: 2.4rem; }
  .sorun__ac { min-height: 0; font-size: 2.4rem; pointer-events: none; }
  .sorun__icerik { grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
  .sorun__sahne { grid-column: 2; grid-row: 1; width: 100%; }
  .sorun__metin { grid-column: 1; grid-row: 1; }
  html.js .sorun__panel[data-acik="0"] { display: none; }
  html.js .sorun__panel[data-acik="0"] .sorun__icerik { display: grid; }

  .hizmet { padding: 1.5rem 1.75rem 1.5rem 2rem; }
  .hizmet--ana { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 2rem; align-items: start; padding-block: 2.25rem; }
  .hizmet--ana .hizmet__ikon .ikon { width: 56px; height: 56px; }
  .hizmet--ana .hizmet__gorsel { position: static; grid-column: 1 / -1; }
  .hizmet--ana .hizmet__sag { grid-column: 3; grid-row: 2; align-self: center; margin-top: 0; }
  .hizmet-liste--sik { grid-template-columns: 1fr 1fr; }

  .apartman__ic { grid-template-columns: 6fr 6fr; align-items: center; gap: 56px; }
  .surec__ray { gap: 20px; }
  .iletisim { grid-template-columns: 7fr 5fr; column-gap: 64px; }
  .alt__izgara { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
}

@media (min-width: 1100px) {
  .boru-hatti { display: block; }
}

/* çok geniş ekran: sağdaki boşlukta 3 kart, aynı hizada alt alta, kemere değmeden */
@media (min-width: 1800px) {
  .hero__kartlar { --kw: clamp(210px, calc(var(--tasma) - 56px), 300px); top: 50%; left: calc(100% + max(18px, (var(--tasma) - var(--kw)) / 2 - 10px)); display: flex; flex-direction: column; gap: 14px; translate: 0 -50%; }
  .hero__kart, .hero__kart.aktif { width: 100%; padding: 16px 18px 18px; opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .5s var(--ease), box-shadow .3s; }
  .hero__kart:not(.aktif):not(.hero__kart--ara) { opacity: .7; box-shadow: 0 12px 30px rgba(12, 43, 77, .12); }
  .hero__kart:not(.aktif):not(.hero__kart--ara) .hero__kart-cubuk { visibility: hidden; }
  .hero__kart:hover, .hero__kart:focus-visible { opacity: 1; transform: translate3d(4px, 0, 0); }
  .hero__kart-baslik { font-size: 1.45rem; }
  .hero__kart-tel { font-size: 1.45rem; }
}

/* imleç yardımcıları ve fare ile gelen görsel açılışı */
@media (hover: hover) and (min-width: 1200px) {
  .hizmet--ana .hizmet__gorsel {
    position: absolute; right: 230px; top: 50%; z-index: 0; grid-column: auto; grid-row: auto;
    width: 250px; height: 170px; margin: -85px 0 0; border-radius: 999px;
    clip-path: inset(50% round 999px); transition: clip-path .6s var(--ease), transform .3s ease-out;
    transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  }
  .hizmet--ana:hover .hizmet__gorsel, .hizmet--ana:focus-within .hizmet__gorsel { clip-path: inset(0 round 999px); }
  .hizmet--ana .hizmet__ikon, .hizmet--ana .hizmet__govde { grid-row: 1; }
  .hizmet--ana .hizmet__sag { grid-row: 1; }
  .hizmet--ana .hizmet__govde, .hizmet--ana .hizmet__sag { position: relative; z-index: 1; }
}

/* sabitlenen sahneler: yalnız geniş ekran + ince imleç + hareket serbest + yeterli yükseklik */
@media (min-height: 760px) {
  html.sabit .apartman { height: 260vh; padding: 0; }
  html.sabit .apartman__sabit { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-top: var(--header-h); }
  html.sabit .apartman__ic { width: 100%; }
  html.sabit .apartman__metin p { margin-bottom: .7em; font-size: 1rem; }
  html.sabit .apartman__liste li { padding-block: .3rem; }
  html.sabit .apartman__liste li::before { top: .75rem; }
  html.sabit .apartman .bolum__baslik { margin-bottom: .35em; }
  html.sabit .apartman .hero__aksiyon { margin-top: 18px; }
}
html.sabit .surec { height: 340vh; padding: 0; }
html.sabit .surec__sabit { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding-top: var(--header-h); overflow: hidden; }
html.sabit .surec__alan { margin-top: 32px; }
html.sabit .surec__pencere { overflow: hidden; padding-block: 8px 24px; }
html.sabit .surec__ray { display: flex; gap: 28px; width: max-content; padding: 0 0 0 var(--tasma); transform: translate3d(calc(var(--p, 0) * var(--kayma, 0) * -1px), 0, 0); }
html.sabit .surec__kart { flex: none; width: 380px; padding: 2rem; opacity: .5; transition: opacity .35s; }
html.sabit .surec__kart.gecildi { opacity: 1; }
html.sabit .surec__nokta { display: none; }
html.sabit .surec__boru { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 10px; margin: 8px var(--tasma) 0; }
html.sabit .surec__dolu { clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0 round 5px); }
html.sabit .surec__akan .v { display: none; }
html.sabit .surec__akan .h { display: inline; }

/* =========================================================
   20. Hareketi azalt
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html.hazir { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-gir]:not(.gorundu) { opacity: 1; }
  html.js [data-gir="perde"]:not(.gorundu), html.js [data-gir="maske"]:not(.gorundu) { clip-path: none; }
  html.js [data-baslik]:not(.gorundu) .satir > span { transform: none; }
  .hero__halka, .su-halka, .rozet__yazi, .imlec, .hero__kart-cubuk, .parmak, .btn--parmak::after { display: none; }
  .hero__video-ic, .hero__sahne, .hero__metin, .hero::before { transform: none; }
  .hero__video-ic { transform: none; }
  html.js .apartman__liste li { opacity: 1; }
  .sirit__iz { transform: none; }
  .surec__kart { opacity: 1 !important; }
}