/* KADRAN tanıtım sitesi. Renkler marka/renkler.json ile birebir. Tek tema: gece kokpiti. */

@font-face { font-family: "Plex"; src: url("fontlar/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fontlar/IBMPlexSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fontlar/IBMPlexSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("fontlar/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url("fontlar/IBMPlexMono-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --gece: #0B1220;
  --kart: #121A2B;
  --kart-yuksek: #18223A;
  --cizgi: #1F2A40;
  --metin: #E8EDF5;
  --ikincil: #8A96AD;
  --amber: #F5B301;
  --iyi: #2FBF71;
  --uyari: #F2994A;
  --kritik: #EB5757;
  --r-kart: 16px;
  --r-dugme: 12px;
  --r-rozet: 6px;
  --yumusak: cubic-bezier(0.32, 0.72, 0, 1);
  --icerik: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--gece); color: var(--metin);
  font-family: "Plex", system-ui, sans-serif; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: italic; color: var(--amber); }
section { position: relative; max-width: var(--icerik); margin: 0 auto; padding: clamp(80px, 10vw, 140px) 24px; }
.bolum-alt { color: var(--ikincil); max-width: 60ch; margin-top: 14px; }
.kasa { font-family: "PlexMono"; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }

/* ---------- arka plan: gece yolu (canvas) + isteğe bağlı video + tane ---------- */
#yol { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.yol-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; pointer-events: none; transition: opacity 1.2s var(--yumusak); }
.yol-video.hazir { opacity: 0.28; }
.tane { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, header, footer { position: relative; z-index: 2; }

/* ---------- gezinme: ayrık cam hap ---------- */
.nav-kabuk { position: sticky; top: 0; z-index: 10; display: flex; justify-content: center; padding: 18px 16px 0; pointer-events: none; }
.nav {
  pointer-events: auto; display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 10px 0 16px;
  background: rgba(18, 26, 43, 0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 60px rgba(3, 7, 18, 0.5);
}
.nav-marka { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.1em; font-size: 0.95rem; }
.nav-baglantilar { display: flex; gap: 22px; font-size: 0.92rem; color: var(--ikincil); }
.nav-baglantilar a { transition: color 0.4s var(--yumusak); }
.nav-baglantilar a:hover { color: var(--metin); }
.hamburger { display: none; }

/* ---------- düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 8px 10px 18px; border-radius: 999px;
  background: var(--amber); color: var(--gece); font-weight: 600; font-size: 0.95rem; line-height: 1;
  transition: transform 0.6s var(--yumusak), box-shadow 0.6s var(--yumusak); will-change: transform;
}
.dugme:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(245, 179, 1, 0.22); }
.dugme:active { transform: scale(0.98); }
.dugme-ikon { width: 30px; height: 30px; border-radius: 50%; background: rgba(11, 18, 32, 0.14); display: grid; place-items: center; font-size: 15px; transition: transform 0.6s var(--yumusak); }
.dugme:hover .dugme-ikon { transform: translate(2px, -2px) scale(1.06); }
.dugme-buyuk { padding: 14px 10px 14px 24px; font-size: 1.05rem; }
.dugme-buyuk .dugme-ikon { width: 36px; height: 36px; }
.dugme-kucuk { padding: 8px 6px 8px 14px; font-size: 0.88rem; }
.dugme-kucuk .dugme-ikon { width: 26px; height: 26px; font-size: 13px; }
.dugme-fiyat { font-family: "PlexMono"; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(11,18,32,0.14); }
.dugme-ikincil { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--metin); font-weight: 500; transition: border-color 0.5s var(--yumusak), background 0.5s var(--yumusak); }
.dugme-ikincil:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04); }

/* ---------- hero ---------- */
.hero { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; padding-top: 40px; }
.hero-metin { max-width: 560px; }
.hero-alt { color: var(--ikincil); font-size: 1.15rem; margin: 22px 0 32px; max-width: 48ch; }
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-ornek { margin-top: 22px; display: grid; gap: 10px; justify-items: start; }
.dugme-ornek { background: var(--kart-yuksek); color: var(--metin); border: 1px solid rgba(245,179,1,0.55); padding: 12px 8px 12px 18px; font-size: 1rem; }
.dugme-ornek > i { font-size: 20px; color: var(--amber); }
.dugme-ornek .dugme-ikon { background: var(--amber); color: var(--gece); width: 32px; height: 32px; }
.dugme-ornek:hover { box-shadow: 0 16px 40px rgba(245, 179, 1, 0.16); border-color: var(--amber); }
.hero-ornek p { color: var(--ikincil); font-size: 0.92rem; max-width: 48ch; margin: 0; }
.hero-gorsel { position: relative; min-height: 640px; }
.kadran-buyuk { position: absolute; left: 30%; top: 0; width: 100%; transform: translateX(-50%); opacity: 0.95; }
.yay-dolu { stroke-dasharray: 503; stroke-dashoffset: 503; }
.ibre { transform-origin: 200px 220px; transform: rotate(-106deg); }
.tikler line { stroke: #8A96AD; stroke-width: 1.5; stroke-linecap: round; }
.kadran-sayi { font-family: "PlexMono"; font-weight: 600; font-size: 58px; fill: var(--metin); }
.kadran-etiket { font-family: "Plex"; font-weight: 500; font-size: 10px; letter-spacing: 0.2em; fill: var(--ikincil); }

/* çift çerçeve telefon */
.telefon-kabuk { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(-3deg); width: 300px; padding: 8px; border-radius: 44px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 100px rgba(3,7,18,0.7); }
.telefon { border-radius: 36px; overflow: hidden; background: var(--gece); box-shadow: inset 0 1px 1px rgba(255,255,255,0.12); aspect-ratio: 540 / 1200; }
.telefon img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero .telefon-kabuk { width: 272px; bottom: -40px; left: 78%; }
.hero .telefon { max-height: 560px; }

/* ---------- 22:00 raporu ---------- */
.rapor-bas { max-width: 640px; }
.rapor-sahne { display: grid; grid-template-columns: 360px 1fr; gap: 56px; margin-top: 56px; align-items: start; }
.rapor-telefon-kabuk { position: sticky; top: 100px; padding: 8px; border-radius: 44px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 100px rgba(3,7,18,0.7); }
.rapor-telefon { border-radius: 36px; overflow: hidden; background: #0E1626; box-shadow: inset 0 1px 1px rgba(255,255,255,0.12); display: flex; flex-direction: column; height: 680px; }
.wa-ust { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--cizgi); background: var(--kart); }
.wa-ust div { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.wa-ust span { font-size: 0.74rem; color: var(--ikincil); }
.wa-ust time { font-family: "PlexMono"; font-size: 0.74rem; color: var(--ikincil); }
.wa-govde { flex: 1; overflow-y: auto; padding: 16px 14px 24px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--cizgi) transparent; background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 18px 18px; }
.wa-balon { background: var(--kart-yuksek); border-radius: 4px 14px 14px 14px; padding: 12px 14px 8px; font-size: 0.84rem; line-height: 1.5; box-shadow: 0 8px 24px rgba(3,7,18,0.4); }
.wa-balon > time { display: block; text-align: right; font-family: "PlexMono"; font-size: 0.68rem; color: var(--ikincil); margin-top: 8px; }
.wa-bolum { padding: 8px 10px; margin: 0 -10px; border-radius: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--yumusak), transform 0.6s var(--yumusak), background 0.5s var(--yumusak); }
.wa-bolum.goster { opacity: 1; transform: none; }
.wa-bolum.vurgu { background: rgba(245,179,1,0.12); box-shadow: inset 0 0 0 1px rgba(245,179,1,0.35); }
.wa-bolum b { color: var(--metin); }
.wa-bolum u { color: var(--amber); text-decoration: none; }
.rapor-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rapor-adimlar li { position: relative; padding: 22px 24px 22px 76px; border-radius: var(--r-kart); border: 1px solid var(--cizgi); background: var(--kart); transition: border-color 0.6s var(--yumusak), transform 0.6s var(--yumusak), background 0.6s var(--yumusak); }
.rapor-adimlar li i { position: absolute; left: 24px; top: 24px; font-size: 28px; color: var(--amber); }
.rapor-adimlar li h3 { font-size: 1.15rem; margin-bottom: 6px; }
.rapor-adimlar li p { color: var(--ikincil); font-size: 0.95rem; max-width: 52ch; }
.rapor-adimlar li.aktif { border-color: rgba(245,179,1,0.5); background: var(--kart-yuksek); transform: translateX(6px); }
.rapor-pdf { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; margin-top: 90px; padding: 14px; border-radius: 32px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.rapor-pdf-gorsel { position: relative; height: 480px; }
.rapor-pdf-gorsel img { position: absolute; left: 0; top: 0; width: 70%; height: 100%; object-fit: cover; object-position: top; border-radius: 16px; border: 1px solid var(--cizgi); box-shadow: 0 30px 80px rgba(3,7,18,0.6); transform-origin: bottom left; transition: transform 900ms cubic-bezier(0.32,0.72,0,1); }
.rapor-pdf-gorsel .pdf-arka { transform: translate(38%, 0) rotate(5deg); opacity: 0.9; }
.rapor-pdf-gorsel .pdf-orta { transform: translate(19%, 0) rotate(2.5deg); opacity: 0.95; }
.rapor-pdf-gorsel .pdf-on { z-index: 1; }
.rapor-pdf:hover .pdf-arka { transform: translate(42%, -2%) rotate(7deg); }
.rapor-pdf:hover .pdf-orta { transform: translate(21%, -1%) rotate(3.5deg); }
.rapor-pdf-metin { padding: 24px 24px 24px 0; }
.rapor-pdf-metin h3 { font-size: 1.6rem; }
.rapor-pdf-metin p { color: var(--ikincil); margin: 14px 0 24px; max-width: 50ch; }
.tikli { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.tikli li { display: flex; align-items: center; gap: 12px; }
.tikli i { color: var(--amber); font-size: 1.1rem; }

/* ---------- kullanıcı deneyimi ---------- */
.deneyim h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; max-width: 24ch; margin-bottom: 44px; }
.deneyim-kabuk { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 20px; align-items: stretch; }
.deneyim-buyuk, .deneyim-kucuk { margin: 0; position: relative; border-radius: 28px; padding: 6px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.deneyim-buyuk > i { position: absolute; top: 30px; right: 34px; font-size: 54px; color: rgba(245,179,1,0.35); }
.deneyim-buyuk blockquote, .deneyim-kucuk blockquote { margin: 0; padding: 36px 36px 20px; border-radius: 22px; background: var(--kart); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08); }
.deneyim-buyuk blockquote p { font-size: 1.08rem; line-height: 1.7; color: var(--metin); margin: 0 0 16px; max-width: 62ch; }
.deneyim-buyuk blockquote p:first-child::first-letter { color: var(--amber); }
.deneyim-kucuk blockquote { padding: 26px 28px 14px; }
.deneyim-kucuk blockquote p { margin: 0; color: var(--metin); line-height: 1.65; font-size: 0.98rem; }
.deneyim figcaption { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 36px 22px; }
.deneyim-kucuk figcaption { padding: 12px 28px 18px; }
.deneyim figcaption b { font-weight: 600; }
.deneyim figcaption span { color: var(--ikincil); font-family: "PlexMono"; font-size: 0.8rem; }
.deneyim-kucukler { display: grid; gap: 20px; }
.deneyim-kucuk { display: flex; flex-direction: column; }
.deneyim-kucuk blockquote { flex: 1; }
.deneyim-buyuk blockquote p:first-child { padding-right: 72px; }

/* ---------- performans ---------- */
.perf { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.perf h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.03em; max-width: 16ch; }
.perf-sayilar { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.perf-sayilar li { padding: 18px 20px; border-radius: 20px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08); }
.perf-sayilar .kasa { margin-bottom: 6px; display: block; }
.perf-sayilar b { display: block; font-family: "PlexMono"; font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1; }
.perf-not { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; color: var(--uyari, #F59E0B); font-size: 0.9rem; max-width: 52ch; }
.perf-not i { font-size: 20px; flex: 0 0 auto; }
.perf-sahne { position: relative; min-height: 640px; }
.perf-sahne .telefon-kabuk { bottom: auto; }
.perf-tel-1 { left: 32%; top: 0; width: 290px; transform: translateX(-50%) rotate(-5deg); z-index: 2; }
.perf-tel-2 { left: 72%; top: 70px; width: 250px; transform: translateX(-50%) rotate(5deg); opacity: 0.95; }
.perf-rozet { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(13,21,38,0.9); border: 1px solid rgba(245,179,1,0.5); box-shadow: 0 20px 50px rgba(3,7,18,0.6); backdrop-filter: blur(6px); z-index: 3; }
.perf-rozet i { font-size: 24px; color: var(--amber); }
.perf-rozet b { display: block; font-weight: 600; }
.perf-rozet span { color: var(--ikincil); font-size: 0.82rem; }
.perf-rozet-1 { right: -6px; bottom: 60px; }
.perf-rozet-2 { left: -6px; bottom: 150px; }

/* ---------- arıza lambası ---------- */
.ariza { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.ariza h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.03em; max-width: 16ch; }
.ariza h2 em { font-style: normal; color: var(--amber); }
.ariza-adimlar { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.ariza-adimlar li { display: flex; gap: 18px; padding: 20px 22px; border-radius: 20px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08); }
.ariza-no { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--gece); font-family: "PlexMono"; font-weight: 600; font-size: 1.05rem; }
.ariza-adimlar h3 { font-size: 1.08rem; margin-bottom: 6px; }
.ariza-adimlar p { color: var(--ikincil); font-size: 0.95rem; line-height: 1.55; }
.ariza-durust { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(245,179,1,0.45); background: rgba(245,179,1,0.06); }
.ariza-durust i { font-size: 26px; color: var(--amber); flex: 0 0 auto; }
.ariza-durust p { color: var(--metin); font-size: 0.94rem; line-height: 1.55; }
.ariza-sahne { position: relative; min-height: 720px; }
.ariza-sahne .telefon-kabuk { bottom: auto; }
.ariza-tel { left: 30%; top: 0; width: 290px; transform: translateX(-50%) rotate(-4deg); z-index: 1; }
.silme-kart { position: absolute; right: 0; top: 70px; width: 300px; padding: 22px 22px 18px; border-radius: 22px; background: rgba(13,21,38,0.94); border: 1px solid rgba(245,179,1,0.5); box-shadow: 0 30px 80px rgba(3,7,18,0.65); backdrop-filter: blur(6px); z-index: 2; }
.silme-kart .kasa { margin-bottom: 12px; }
.silme-adimlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.silme-adimlar li { display: flex; gap: 10px; align-items: center; font-size: 0.92rem; color: var(--metin); opacity: 0; transform: translateX(-8px); transition: opacity 0.6s var(--yumusak), transform 0.6s var(--yumusak); }
.silme-adimlar li i { font-size: 20px; color: var(--iyi, #22C55E); flex: 0 0 auto; }
.silme-adimlar li.sonuc { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--cizgi); font-weight: 600; }
.silme-adimlar li.sonuc i { color: var(--amber); font-size: 24px; }
.silme-kart.goster .silme-adimlar li { opacity: 1; transform: none; }
.silme-kart.goster .silme-adimlar li:nth-child(1) { transition-delay: 0.2s; }
.silme-kart.goster .silme-adimlar li:nth-child(2) { transition-delay: 0.7s; }
.silme-kart.goster .silme-adimlar li:nth-child(3) { transition-delay: 1.2s; }
.silme-kart.goster .silme-adimlar li:nth-child(4) { transition-delay: 1.7s; }
.silme-kart.goster .silme-adimlar li:nth-child(5) { transition-delay: 2.3s; }
.silme-not { margin-top: 14px; color: var(--ikincil); font-size: 0.85rem; }
.silme-not b { color: var(--kritik, #EF4444); }
.ariza-rozet { position: absolute; left: 0; bottom: 30px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(13,21,38,0.92); border: 1px solid rgba(245,179,1,0.5); box-shadow: 0 20px 50px rgba(3,7,18,0.6); z-index: 2; }
.ariza-rozet i { font-size: 24px; color: var(--amber); }
.ariza-rozet b { display: block; font-weight: 600; font-size: 0.95rem; }
.ariza-rozet span { color: var(--ikincil); font-size: 0.82rem; }

/* ---------- nasıl çalışır ---------- */
.adimlar { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.adimlar::before { content: ""; position: absolute; left: 32px; right: 32px; top: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--cizgi) 15%, var(--cizgi) 85%, transparent); }
.adim { padding: 0 32px 0 0; position: relative; }
.adim + .adim { padding-left: 32px; }
.adim-ikon { width: 64px; height: 64px; border-radius: 50%; background: var(--kart); border: 1px solid var(--cizgi); display: grid; place-items: center; font-size: 28px; color: var(--amber); position: relative; z-index: 1; box-shadow: inset 0 1px 1px rgba(255,255,255,0.08); }
.adim h3 { margin: 22px 0 10px; }
.adim p { color: var(--ikincil); font-size: 0.98rem; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 14px; margin-top: 48px; }
.hucre { position: relative; overflow: hidden; border-radius: var(--r-kart); background: var(--kart); border: 1px solid var(--cizgi); padding: 26px; box-shadow: inset 0 1px 1px rgba(255,255,255,0.05); transition: transform 0.7s var(--yumusak), border-color 0.7s var(--yumusak); }
.hucre:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.16); }
.hucre h3 { margin-bottom: 8px; }
.hucre p { color: var(--ikincil); font-size: 0.95rem; max-width: 36ch; }
.hucre-ikon { font-size: 30px; color: var(--amber); margin-bottom: 16px; display: block; }
.hucre-genis { grid-column: span 2; }
.hucre-uzun { grid-row: span 2; }
.hucre-gorsel img { position: absolute; right: -10%; bottom: -55%; width: 58%; border-radius: 22px; box-shadow: 0 20px 60px rgba(3,7,18,0.6); transition: transform 0.9s var(--yumusak); }
.hucre-gorsel:hover img { transform: translateY(-14px); }
.hucre-uzun img { right: 50%; transform: translateX(50%); bottom: -42%; width: 70%; }
.hucre-uzun:hover img { transform: translateX(50%) translateY(-14px); }
.hucre-uzun .hucre-metin { position: relative; z-index: 1; }
.hucre-gorsel .hucre-metin { max-width: 55%; }
.hucre-uzun .hucre-metin { max-width: 100%; }
.hucre-amber { background: linear-gradient(160deg, rgba(245,179,1,0.18), rgba(245,179,1,0.05)); border-color: rgba(245,179,1,0.35); }
.hucre-amber p { color: var(--metin); opacity: 0.85; }

/* ---------- ekspertiz ---------- */
.ekspertiz-kabuk { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: center; padding: 48px; border-radius: 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.ekspertiz-gorsel { border-radius: 24px; overflow: hidden; border: 1px solid var(--cizgi); max-height: 440px; box-shadow: 0 30px 80px rgba(3,7,18,0.6); }
.ekspertiz-gorsel img { object-fit: cover; object-position: top; width: 100%; height: 440px; }
.ekspertiz-metin p { color: var(--ikincil); margin-top: 18px; max-width: 56ch; }
.ekspertiz-metin strong { color: var(--metin); font-weight: 500; }

/* ---------- araçlar ---------- */
.araclar { text-align: center; }
.araclar .bolum-alt { margin-left: auto; margin-right: auto; }
.sayac-satir { display: flex; justify-content: center; gap: clamp(40px, 8vw, 110px); margin-top: 40px; }
.sayac strong { display: block; font-family: "PlexMono"; font-weight: 600; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1; letter-spacing: -0.04em; }
.sayac span { color: var(--ikincil); }
.kaydirak { margin-top: 48px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.kaydirak-ic { display: flex; gap: 14px; width: max-content; animation: kaydir 60s linear infinite; }
.kaydirak span { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--ikincil); white-space: nowrap; font-size: 0.95rem; }
@keyframes kaydir { to { transform: translateX(-50%); } }

/* ---------- fiyat ---------- */
.fiyat-kabuk { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding: 14px; border-radius: 36px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.fiyat-kart { padding: 44px; border-radius: 26px; background: var(--kart); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); }
.fiyat-sayi { display: flex; align-items: baseline; gap: 14px; }
.fiyat-sayi span { font-family: "PlexMono"; font-weight: 600; font-size: clamp(3.4rem, 7vw, 5.4rem); letter-spacing: -0.04em; line-height: 1; }
.fiyat-sayi small { color: var(--ikincil); font-size: 1rem; }
.fiyat-aciklama { color: var(--ikincil); margin-top: 14px; max-width: 44ch; }
.fiyat-kart .tikli { margin-bottom: 30px; }
.satin-dugmeler { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dugme-wa { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; border: 1px solid rgba(245,179,1,0.5); background: var(--kart-yuksek); color: var(--metin); font-weight: 600; transition: border-color 0.5s var(--yumusak), box-shadow 0.6s var(--yumusak), transform 0.6s var(--yumusak); }
.dugme-wa i { font-size: 22px; color: var(--amber); }
.dugme-wa span { font-family: "PlexMono"; font-weight: 500; color: var(--ikincil); font-size: 0.9rem; }
.dugme-wa:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(245, 179, 1, 0.14); }
.dugme-wa:active { transform: scale(0.98); }
.teslimat { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; border-top: 1px solid var(--cizgi); padding-top: 24px; }
.teslimat li { display: flex; gap: 14px; align-items: flex-start; }
.teslimat li i { font-size: 24px; color: var(--amber); flex: 0 0 auto; margin-top: 2px; }
.teslimat li div { display: grid; gap: 3px; }
.teslimat li b { font-weight: 600; }
.teslimat li span { color: var(--ikincil); font-size: 0.92rem; line-height: 1.5; }
.alt-iletisim p a { color: var(--amber); text-decoration: none; font-family: "PlexMono"; }
.fiyat-yan { position: relative; min-height: 460px; }
.telefon-kucuk { width: 240px; bottom: -70px; transform: translateX(-50%) rotate(4deg); }

/* ---------- sss ---------- */
.sss { max-width: 820px; }
.akordeon { margin-top: 36px; display: grid; gap: 10px; }
details { border-radius: var(--r-kart); background: var(--kart); border: 1px solid var(--cizgi); padding: 0 24px; transition: border-color 0.5s var(--yumusak); }
details[open] { border-color: rgba(245,179,1,0.4); }
summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 500; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: "PlexMono"; color: var(--amber); font-size: 1.3rem; transition: transform 0.5s var(--yumusak); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ikincil); padding: 0 0 22px; max-width: 64ch; }

/* ---------- footer ---------- */
.alt { max-width: var(--icerik); margin: 0 auto; padding: 60px 24px 40px; border-top: 1px solid var(--cizgi); }
.alt-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.alt-marka p { color: var(--ikincil); margin-top: 14px; }
.alt-iletisim h3 { font-size: 1.1rem; margin-bottom: 8px; }
.alt-iletisim p { color: var(--ikincil); margin-bottom: 18px; max-width: 42ch; }
.alt-alt { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--cizgi); font-size: 0.82rem; color: var(--ikincil); }
.alt-alt nav { display: flex; gap: 18px; }
.alt-alt nav a:hover { color: var(--metin); }

/* ---------- giriş animasyonları ---------- */
.gir { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 0.9s var(--yumusak), transform 0.9s var(--yumusak), filter 0.9s var(--yumusak); }
.gir.goster { opacity: 1; transform: none; filter: none; }

/* ---------- mobil ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; gap: 10px; min-height: auto; }
  .hero-gorsel { min-height: 560px; margin-top: 10px; }
  .hero .telefon-kabuk { width: 240px; bottom: -20px; left: 50%; }
  .kadran-buyuk { left: 50%; width: 118%; }
  .rapor-sahne, .rapor-pdf, .ekspertiz-kabuk, .fiyat-kabuk, .alt-ust, .deneyim-kabuk, .perf, .ariza { grid-template-columns: 1fr; }
  .ariza-sahne { min-height: 640px; }
  .ariza-tel { left: 32%; width: 230px; }
  .silme-kart { width: 260px; top: 40px; }
  .ariza-rozet { bottom: 0; }
  .perf-sahne { min-height: 560px; }
  .perf-tel-1 { left: 30%; width: 230px; }
  .perf-tel-2 { left: 72%; width: 200px; }
  .perf-rozet-1 { right: 0; bottom: 20px; }
  .perf-rozet-2 { left: 0; bottom: 90px; }
  .rapor-telefon-kabuk { position: relative; top: 0; max-width: 360px; margin: 0 auto; }
  .rapor-telefon { height: 560px; }
  .rapor-pdf-metin { padding: 10px; }
  .adimlar { grid-template-columns: 1fr; gap: 36px; }
  .adimlar::before { display: none; }
  .adim, .adim + .adim { padding: 0; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .hucre-genis, .hucre-uzun { grid-column: auto; grid-row: auto; }
  .hucre-gorsel { min-height: 420px; }
  .hucre-gorsel .hucre-metin { max-width: 100%; }
  .hucre-gorsel img { position: relative; right: auto; bottom: auto; width: 70%; margin: 24px auto 0; transform: none; max-height: 240px; object-fit: cover; object-position: top; }
  .hucre-uzun img { right: auto; transform: none; }
  .hucre-uzun:hover img, .hucre-gorsel:hover img { transform: none; }
  .ekspertiz-kabuk { padding: 24px; }
  .fiyat-yan { min-height: 360px; }
  .nav-baglantilar { display: none; }
  .nav { gap: 14px; }
  .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; }
  .hamburger span { display: block; width: 20px; height: 2px; background: var(--metin); transition: transform 0.5s var(--yumusak); }
  .hamburger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-baglantilar.acik { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 9; justify-content: center; align-items: center; gap: 28px; font-size: 1.6rem; background: rgba(11,18,32,0.92); backdrop-filter: blur(24px); }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  section { padding: 64px 16px; }
  .hero-cta, .satin-dugmeler { flex-direction: column; align-items: stretch; }
  .dugme-wa, .satin-dugmeler .dugme { justify-content: center; }
  .hero-ornek { justify-items: stretch; }
  .dugme-ornek { justify-content: center; }
  .dugme-buyuk { justify-content: space-between; }
  .sayac-satir { flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gir, .wa-bolum { opacity: 1; transform: none; filter: none; transition: none; }
  .kaydirak-ic { animation: none; }
  .yay-dolu { stroke-dashoffset: 0; }
  .ibre { transform: rotate(60deg); }
  .dugme, .hucre, .hucre-gorsel img { transition: none; }
}

/* ---------- yüzen WhatsApp düğmesi ---------- */
.wa-yuzen { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; border-radius: 999px;
  background: var(--amber); color: var(--gece); font-weight: 700; font-size: 1.05rem; line-height: 1; text-decoration: none;
  box-shadow: 0 18px 50px rgba(245,179,1,0.35), 0 4px 14px rgba(3,7,18,0.5); transition: transform 0.6s var(--yumusak), box-shadow 0.6s var(--yumusak);
  animation: waNabiz 2.6s var(--yumusak) infinite; }
.wa-yuzen i { font-size: 34px; }
.wa-yuzen:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 24px 60px rgba(245,179,1,0.45), 0 6px 18px rgba(3,7,18,0.5); animation: none; }
.wa-yuzen:active { transform: scale(0.97); }
@keyframes waNabiz { 0%, 100% { box-shadow: 0 18px 50px rgba(245,179,1,0.35), 0 0 0 0 rgba(245,179,1,0.45); } 60% { box-shadow: 0 18px 50px rgba(245,179,1,0.35), 0 0 0 16px rgba(245,179,1,0); } }
@media (max-width: 520px) { .wa-yuzen { right: 14px; bottom: 14px; padding: 12px 16px 12px 12px; font-size: 0.95rem; } .wa-yuzen i { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .wa-yuzen { animation: none; } }