/* Vitrin şablonu. Renkler veri.js'ten :root'a, tema <html data-tema>'ya yazılır; yapı sabittir. */
:root {
  --zemin: #FFFFFF;
  --yumusak: #F4F5F7;
  --metin: #14161A;
  --ikincil: #5B6069;
  --cizgi: #E4E6EA;
  --vurgu: #0B1F3A;
  --vurgu-metin: #FFFFFF;
  --koyu: #0F1216;
  --koyu-metin: #FFFFFF;
  --koyu-ikincil: rgba(255, 255, 255, .72);
  --koyu-cizgi: rgba(255, 255, 255, .14);
  --vurgu-acik: color-mix(in srgb, var(--vurgu) 45%, #fff); /* koyu zeminde vurgu */
  --wa: #25D366;
  --wa-metin: #06240F;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 20px;
  --r-kucuk: 12px;
  --nav: 64px;
  --yumusama: cubic-bezier(.2, .7, .2, 1);
}
[data-tema="kurumsal"] { --r: 14px; --r-kucuk: 8px; }
[data-tema="sicak"] { --r: 28px; --r-kucuk: 16px; --koyu: color-mix(in srgb, var(--vurgu) 28%, #15100E); }
[data-tema="canli"] { --r: 22px; --koyu: color-mix(in srgb, var(--vurgu) 72%, #000); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 32px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--metin); background: var(--zemin); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .koyu :focus-visible, .kapanis-kutu :focus-visible, .kart:focus-visible { outline-color: #fff; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--vurgu); color: var(--vurgu-metin); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.atla:focus { top: 12px; }
.kap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .kap { padding: 0 40px; } }

h1, h2, h3 { line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; }
.ust-etiket { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu); margin-bottom: 16px; }
.ust-etiket::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.koyu .ust-etiket { color: var(--vurgu-acik); }
section { padding: 72px 0; }
@media (min-width: 768px) { section { padding: 112px 0; } }
.yumusak { background: var(--yumusak); }
.koyu { background: var(--koyu); color: var(--koyu-metin); }
.bolum-bas { display: grid; gap: 16px; margin-bottom: 36px; }
.bolum-bas p { color: var(--ikincil); font-size: 1.0625rem; max-width: 30rem; }
@media (min-width: 900px) { .bolum-bas { grid-template-columns: 1fr minmax(0, 26rem); align-items: end; gap: 48px; margin-bottom: 56px; } }

/* Butonlar */
.buton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 700; white-space: nowrap; transition: transform .25s var(--yumusama), background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.buton svg { width: 20px; height: 20px; flex: none; }
.buton:hover { transform: translateY(-2px); }
.buton:active { transform: scale(.98); }
.buton-wa { background: var(--wa); color: var(--wa-metin); box-shadow: 0 12px 32px -12px rgba(37, 211, 102, .7); }
.buton-cam { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.buton-cam:hover { background: rgba(255, 255, 255, .16); }
.buton-beyaz { background: #fff; color: var(--metin); }
.buton-cizgi { color: var(--vurgu-metin); border: 1px solid color-mix(in srgb, var(--vurgu-metin) 40%, transparent); }
.buton-cizgi:hover { background: color-mix(in srgb, var(--vurgu-metin) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .buton:hover, .buton:active { transform: none; } }

/* Üst çubuk: hero'nun üstünde yüzen hap */
.ust { position: fixed; top: 10px; left: 0; right: 0; z-index: 50; pointer-events: none; }
@media (min-width: 768px) { .ust { top: 16px; } }
.ust .kap { padding: 0 10px; }
@media (min-width: 768px) { .ust .kap { padding: 0 24px; } }
.ust-ic { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--nav); padding: 0 8px 0 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; box-shadow: 0 10px 30px -14px rgba(15, 18, 22, .35); transition: background-color .3s ease, box-shadow .3s ease; }
.ust.kaydi .ust-ic { background: rgba(255, 255, 255, .95); box-shadow: 0 14px 40px -16px rgba(15, 18, 22, .45); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.logo img { height: 36px; width: auto; }
.menu { display: none; gap: 2px; align-items: center; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: .9375rem; color: var(--ikincil); transition: color .2s ease, background-color .2s ease; }
.menu a:hover { color: var(--metin); background: var(--yumusak); }
.ust .ara { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--vurgu); color: var(--vurgu-metin); font-weight: 700; font-size: .9375rem; }
.ust .ara svg { width: 18px; height: 18px; }
.ust .ara span { display: none; }
@media (min-width: 480px) { .ust .ara span { display: inline; } }
@media (min-width: 900px) { .menu { display: flex; } }

/* Hero: koyu zemin, fotoğraf mobilde üstte, masaüstünde sağ kenara taşar */
.hero { position: relative; padding: 0; background: var(--koyu); color: var(--koyu-metin); overflow: hidden; }
.hero-foto { position: relative; width: 100%; aspect-ratio: 5 / 4; max-height: 62svh; overflow: hidden; border-radius: 0 0 var(--r) var(--r); background: rgba(255, 255, 255, .06); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .28), transparent 40%); }
.hero-ic { padding-top: 32px; padding-bottom: 56px; }
.durum { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--koyu-cizgi); font-weight: 600; font-size: .875rem; color: var(--koyu-metin); }
.durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; }
.durum.acik::before { background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .22); }
.durum.kapali::before { background: #EF4444; }
.hero .durum { margin-bottom: 24px; }
.h1-ad { display: block; margin-bottom: 14px; font-size: .875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vurgu-acik); }
.hero h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); max-width: 14ch; }
.giris { margin-top: 22px; color: var(--koyu-ikincil); font-size: 1.125rem; max-width: 34rem; }
.hero-butonlar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-bilgi { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--koyu-cizgi); color: var(--koyu-ikincil); font-size: .9375rem; }
.hero-bilgi li { display: flex; align-items: flex-start; gap: 10px; }
.hero-bilgi svg { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--vurgu-acik); }
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; min-height: min(100svh, 880px); }
  .hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 44vw; max-height: none; aspect-ratio: auto; border-radius: 0 0 0 calc(var(--r) * 2.5); }
  .hero-foto::after { display: none; }
  .hero-ic { padding-top: calc(var(--nav) + 96px); padding-bottom: 88px; }
  .hero-metin { max-width: 54%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-metin > * { animation: yuksel .8s var(--yumusama) both; }
  .hero-metin > :nth-child(2) { animation-delay: .06s; }
  .hero-metin > :nth-child(3) { animation-delay: .12s; }
  .hero-metin > :nth-child(4) { animation-delay: .18s; }
  .hero-metin > :nth-child(5) { animation-delay: .24s; }
  .durum.acik::before { animation: nabiz 2.4s ease-out infinite; }
}
@keyframes yuksel { from { opacity: 0; transform: translateY(18px); } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }

/* Güven şeridi */
.rakamlar { padding: 48px 0; border-bottom: 1px solid var(--cizgi); }
.rakamlar ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 28px 20px; }
.rakamlar b { display: block; font-size: clamp(1.875rem, 5vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--vurgu); font-variant-numeric: tabular-nums; }
.rakamlar span { display: block; margin-top: 10px; color: var(--ikincil); font-size: .9375rem; line-height: 1.4; }
@media (min-width: 768px) { .rakamlar li + li { border-left: 1px solid var(--cizgi); padding-left: 32px; } }

/* Markalar: yavaş kayan şerit; hareket azaltılmışsa sabit satırlar */
.markalar { padding: 32px 0; border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.markalar .ust-etiket { color: var(--ikincil); margin-bottom: 18px; }
.serit-kap { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.serit { display: flex; width: max-content; animation: kay 70s linear infinite; }
.serit ul { display: flex; gap: 56px; padding-right: 56px; }
.serit li { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: color-mix(in srgb, var(--metin) 42%, transparent); }
.markalar:hover .serit { animation-play-state: paused; }
@keyframes kay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .serit-kap { -webkit-mask-image: none; mask-image: none; }
  .serit { animation: none; width: auto; }
  .serit ul { flex-wrap: wrap; gap: 8px 28px; padding: 0 20px; }
  .serit ul[aria-hidden] { display: none; }
}

/* Hizmetler: fotoğraflıysa kartlar (ilk kart büyük), değilse fiyat listesi */
.kartlar { display: grid; gap: 12px; }
.kartlar > li { display: flex; }
.kartlar > li > .kart { flex: 1; }
@media (min-width: 640px) { .kartlar { grid-template-columns: repeat(2, 1fr); } .kartlar > li:first-child { grid-column: span 2; } }
@media (min-width: 960px) { .kartlar { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; gap: 16px; } .kartlar > li:first-child { grid-row: span 2; } }
.kart { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; padding: 24px; border-radius: var(--r); overflow: hidden; color: #fff; background: var(--koyu); }
@media (min-width: 960px) { .kart { min-height: 0; padding: 28px; } }
.kart img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--yumusama); }
.kart::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 10, 14, .92) 0%, rgba(8, 10, 14, .62) 48%, rgba(8, 10, 14, 0) 80%); }
.kart .no { position: absolute; top: 18px; left: 18px; padding: 5px 12px; border-radius: 999px; background: rgba(8, 10, 14, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.kart h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.kartlar > li:first-child h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.kart p { margin-top: 6px; max-width: 34ch; color: rgba(255, 255, 255, .8); font-size: .9375rem; }
.kart .sor { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: .9375rem; }
.kart .sor svg { width: 18px; height: 18px; transition: transform .3s var(--yumusama); }
.kart:hover img { transform: scale(1.06); }
.kart:hover .sor svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .kart:hover img, .kart:hover .sor svg { transform: none; } }
.fiyatlar { display: grid; gap: 0 56px; border-top: 1px solid var(--cizgi); }
@media (min-width: 900px) { .fiyatlar { grid-template-columns: 1fr 1fr; } }
.fiyat { display: flex; align-items: baseline; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--cizgi); }
.fiyat div { flex: 1; }
.fiyat b { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; }
.fiyat small { display: block; margin-top: 2px; color: var(--ikincil); font-size: .9375rem; }
.fiyat .f { font-size: 1.1875rem; font-weight: 800; white-space: nowrap; color: var(--vurgu); font-variant-numeric: tabular-nums; }

/* Galeri: ilk kare büyük */
.galeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.galeri a { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-kucuk); background: var(--cizgi); }
.galeri a:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--yumusama); }
.galeri a:hover img { transform: scale(1.05); }
@media (min-width: 768px) { .galeri { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 14px; } .galeri a, .galeri a:first-child { aspect-ratio: auto; } .galeri a:first-child { grid-row: span 2; } }
@media (prefers-reduced-motion: reduce) { .galeri a:hover img { transform: none; } }

/* Yorumlar */
.yorumlar { display: grid; gap: 16px; }
@media (min-width: 768px) { .yorumlar { grid-template-columns: repeat(3, 1fr); } }
.yorum { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r); background: var(--zemin); box-shadow: 0 0 0 1px var(--cizgi), 0 24px 48px -32px rgba(15, 18, 22, .35); }
.yorum .yildiz { color: #F59E0B; letter-spacing: 3px; }
.yorum p { flex: 1; margin-top: 14px; font-size: 1.125rem; line-height: 1.5; letter-spacing: -.01em; font-weight: 500; }
.yorum b { margin-top: 20px; font-size: .9375rem; font-weight: 600; color: var(--ikincil); }
.yorum-cta { margin-top: 28px; }
.yorum-cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--vurgu); border-bottom: 2px solid currentColor; }

/* Kapanış bandı */
.kapanis { padding: 56px 0; }
@media (min-width: 768px) { .kapanis { padding: 88px 0; } }
section:not(.yumusak):not(.koyu):not(.hero) + .kapanis { padding-top: 0; } /* aynı beyaz zeminde çift boşluk olmasın */
.kapanis-kutu { position: relative; overflow: hidden; display: grid; gap: 28px; padding: 40px 28px; border-radius: calc(var(--r) * 1.5); background: var(--vurgu); color: var(--vurgu-metin); }
@media (min-width: 900px) { .kapanis-kutu { grid-template-columns: 1fr auto; align-items: center; gap: 48px; padding: 64px; } }
.kapanis-kutu::after { content: ""; position: absolute; right: -140px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 70%); pointer-events: none; }
.kapanis-kutu h2 { font-size: clamp(1.875rem, 4.5vw, 3rem); max-width: 18ch; }
.kapanis-kutu p { margin-top: 14px; font-size: 1.0625rem; opacity: .85; }
.kapanis-butonlar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }

/* İletişim */
.iletisim-ic { display: grid; gap: 48px; }
@media (min-width: 900px) { .iletisim-ic { grid-template-columns: 1fr 1.15fr; gap: 72px; } }
.iletisim-liste { display: grid; margin-top: 32px; border-top: 1px solid var(--koyu-cizgi); }
.iletisim-liste a { display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 16px 0; border-bottom: 1px solid var(--koyu-cizgi); font-size: 1.0625rem; font-weight: 600; transition: color .2s ease; }
.iletisim-liste a:hover { color: var(--vurgu-acik); }
.iletisim-liste svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--vurgu-acik); }
.saatler-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; margin-bottom: 12px; }
.saatler-bas h3 { font-size: 1.125rem; }
.saatler { display: grid; gap: 2px; }
.saatler li { display: flex; justify-content: space-between; padding: 9px 14px; border-radius: var(--r-kucuk); color: var(--koyu-ikincil); font-variant-numeric: tabular-nums; }
.saatler li.bugun { background: rgba(255, 255, 255, .09); color: var(--koyu-metin); font-weight: 700; }
.saatler .kapali { opacity: .7; }
.harita-kol { display: flex; flex-direction: column; gap: 16px; }
.harita { flex: 1; min-height: 320px; overflow: hidden; border-radius: var(--r); background: rgba(255, 255, 255, .06); }
@media (min-width: 900px) { .harita { min-height: 520px; } }
.harita iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.harita-kol .buton { align-self: flex-start; }

/* Alt bilgi */
.alt { background: var(--koyu); color: var(--koyu-ikincil); font-size: .875rem; }
.alt-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 112px; border-top: 1px solid var(--koyu-cizgi); } /* mobilde sabit WhatsApp butonuna yer */
@media (min-width: 900px) { .alt-ic { padding-bottom: 32px; } }
/* Yedigen imzası: tek satır, küçük simge; üzerine gelince ok kayar */
.imza { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .8125rem; color: var(--koyu-ikincil); transition: color .2s ease; }
.imza:hover { color: var(--koyu-metin); }
.imza-simge { width: 16px; height: 16px; flex: none; }
.imza span { display: inline; }
.imza small { font-size: inherit; }
.imza b { font-weight: 700; color: var(--koyu-metin); }
.imza > svg:last-child { width: 12px; height: 12px; color: #FF6B2C; transform: rotate(-45deg); transition: transform .3s var(--yumusama); }
.imza:hover > svg:last-child { transform: rotate(-45deg) translateX(2px); }
@media (prefers-reduced-motion: reduce) { .imza:hover > svg:last-child { transform: rotate(-45deg); } }

/* Sabit WhatsApp (mobil) */
.wa-sabit { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px; background: var(--wa); color: var(--wa-metin); border-radius: 999px; font-weight: 700; box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .35); }
.wa-sabit svg { width: 26px; height: 26px; }
.wa-sabit { transition: opacity .3s ease, transform .3s var(--yumusama); }
.wa-sabit.gizle { opacity: 0; transform: translateY(16px); pointer-events: none; } /* hero'daki WhatsApp butonu görünürken */
@media (min-width: 900px) { .wa-sabit { display: none; } }

/* Kaydırınca belirme: yalnız JS çalışıyorsa ve hareket azaltılmamışsa */
@media (prefers-reduced-motion: no-preference) {
  .js [data-gor] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--yumusama), transform .8s var(--yumusama); transition-delay: var(--gecikme, 0s); }
  .js [data-gor].gor { opacity: 1; transform: none; }
}