/* ===================================================
   UMUT YOL YARDIM — ANA STİL  v2
   =================================================== */

/* ---------- RESET & TOKENS ---------- */
:root {
  --sari:      #f5a623;
  --sari2:     #e8940f;
  --sari-dim:  rgba(245,166,35,.18);
  --sari-line: rgba(245,166,35,.28);
  --siyah:     #0b0b0b;
  --s2:        #141414;
  --s3:        #1c1c1c;
  --s4:        #242424;
  --beyaz:     #ffffff;
  --metin:     #d4d4d4;
  --soluk:     #737373;
  --line:      rgba(255,255,255,.08);
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --shadow-card: 0 8px 40px rgba(0,0,0,.55);
  --shadow-glow: 0 0 40px rgba(245,166,35,.12);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; overflow-x:hidden; max-width:100%; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--siyah); color:var(--metin);
  overflow-x:hidden; line-height:1.6; font-size:15px;
  max-width:100vw;
}

/* ════════════════════════════════════════════
   GLOBAL SAYFA ARKA PLANI
   Tüm bölümlerin altında tek bir tutarlı ışık sistemi.
   İki yavaş hareket eden sarı orb — sol-üst & sağ-alt.
   Hero'nun altından başlar (hero kendi arkaplanına sahip).
   ════════════════════════════════════════════ */
.page-bg {
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.page-bg::before {
  content:'';
  position:absolute;
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.07) 0%, transparent 60%);
  top:-200px; left:-200px;
  animation:orb-wander 22s ease-in-out infinite;
}
.page-bg::after {
  content:'';
  position:absolute;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.055) 0%, transparent 60%);
  bottom:-150px; right:-150px;
  animation:orb-wander 18s ease-in-out infinite reverse;
  animation-delay:-9s;
}
a  { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button,input,textarea,select { font:inherit; }
.hizmet-card, .galeri-item { color:inherit; font:inherit; text-align:left; }
button.hizmet-card, button.galeri-item { appearance:none; -webkit-appearance:none; padding:0; width:100%; cursor:pointer; }
button.hizmet-card:focus-visible, button.galeri-item:focus-visible, .lb-close:focus-visible, .lb-nav:focus-visible { outline:3px solid var(--sari); outline-offset:3px; }

/* ---------- SPOTLIGHT KART -- GLOBAL ---------- */
[data-spot] {
  --sx: 50%; --sy: 50%;
  position: relative;
  background:
    radial-gradient(
      280px circle at var(--sx) var(--sy),
      rgba(245,166,35,.10) 0%,
      transparent 70%
    ),
    linear-gradient(160deg, var(--s2) 0%, var(--s3) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .3s, transform .3s, box-shadow .3s;
  overflow: hidden;
}
[data-spot]:hover {
  border-color: var(--sari-line);
  box-shadow: var(--shadow-glow), var(--shadow-card);
  transform: translateY(-5px);
}
[data-spot]::before {
  content:'';
  position:absolute; inset:0; border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--sx) var(--sy),
    rgba(245,166,35,.06) 0%,
    transparent 65%
  );
  pointer-events:none; z-index:0;
}
[data-spot] > * { position:relative; z-index:1; }

/* ---------- TOPBAR ---------- */
.topbar {
  position:sticky; top:0; z-index:100;
  background:rgba(11,11,11,.95);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--sari-line);
}
.topbar-inner {
  max-width:1160px; margin:auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
}
.logo-area { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.logo-img  { height:40px; width:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.logo-mark {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(145deg,var(--sari),var(--sari2));
  display:grid; place-items:center;
  font-size:19px; font-weight:900; color:#000;
  box-shadow:0 4px 16px rgba(245,166,35,.35);
}
.logo-text { min-width:0; overflow:hidden; }
.logo-text strong { display:block; font-size:15px; font-weight:800; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo-text span   { font-size:10px; letter-spacing:.08em; color:var(--sari); font-weight:600; text-transform:uppercase; white-space:nowrap; }

.topbar-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:nowrap; }
.phone-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sari); color:#000;
  padding:10px 18px; border-radius:999px;
  font-weight:900; font-size:14px; white-space:nowrap;
  box-shadow:0 4px 20px rgba(245,166,35,.4); transition:.25s;
}
.phone-btn svg { width:16px; height:16px; flex-shrink:0; }
.phone-btn:hover { background:var(--sari2); transform:translateY(-2px); }
.wa-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(37,211,102,.14); border:1px solid rgba(37,211,102,.3);
  color:#25D366; padding:9px 14px; border-radius:999px;
  font-weight:700; font-size:13px; transition:.25s; white-space:nowrap;
}
.wa-btn svg { width:16px; height:16px; }
.wa-btn:hover { background:rgba(37,211,102,.24); }

/* ── Topbar Sosyal Medya İkonları ── */
.topbar-socials {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.topbar-social-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px;
  color:#fff; font-weight:700; font-size:13px; white-space:nowrap;
  transition:.25s; flex-shrink:0; line-height:1;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.topbar-social-btn svg { display:block; flex-shrink:0; }
.topbar-social-btn--ig:hover {
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color:transparent; color:#fff; transform:translateY(-2px);
}
.topbar-social-btn--fb:hover {
  background:#1877f2; border-color:transparent; transform:translateY(-2px);
}
.topbar-social-btn--tt:hover {
  background:#010101; border-color:rgba(255,255,255,.3); transform:translateY(-2px);
}
.topbar-divider {
  width:1px; height:24px; background:rgba(255,255,255,.12); margin:0 4px; flex-shrink:0;
}

/* ---------- HERO ---------- */
.hero {
  position:relative; overflow:hidden;
  min-height:100vh;       /* fallback: eski tarayıcılar */
  min-height:100svh;      /* modern: adres çubuğu hariç gerçek görünür yükseklik */
  display:flex; align-items:center;
  background:#0b0b0b;
}

/* Video tam ekran arkaplan */
.hero-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}
/* Video oynat\u0131lamazsa (desteklenmeyen codec vb.) devreye giren statik foto\u011fraf */
.hero-video-fallback-img {
  display:none; position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  z-index:0;
}

/* Video üzeri karartma — videonun görünmesine izin ver, yazılar okunabilir olsun */
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.65) 100%),
    linear-gradient(to right,  rgba(0,0,0,.70) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.0) 100%);
}

/* Video yoksa fallback arka plan */
.hero-no-video {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 40% 50%, rgba(245,166,35,.08), transparent),
    linear-gradient(160deg, #0b0b0b 0%, #120e00 50%, #0b0b0b 100%);
}
.hero-no-video::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px, transparent 1px, transparent 60px);
}

/* Sarı parıltı sol-alt */
.hero-glow {
  position:absolute; z-index:2; pointer-events:none;
  bottom:-100px; left:-80px;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(245,166,35,.14) 0%, transparent 65%);
  filter:blur(20px);
}

/* İÇERİK — video üzerinde, tamamen solda hizalanmış */
.hero-inner {
  position:relative; z-index:3;
  width:100%; max-width:1160px;
  margin:0 auto; padding:140px 24px 100px;
  /* Tek sütun, sol hiza — yazılar videonun üzerinde */
  display:flex; flex-direction:column; align-items:flex-start;
}

/* Hero içerik genişliği — çok geniş olmasın */
.hero-copy { max-width:680px; width:100%; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,166,35,.2); border:1px solid rgba(245,166,35,.4);
  color:var(--sari); font-size:11px; font-weight:700; letter-spacing:.12em;
  padding:7px 15px; border-radius:999px; margin-bottom:22px; text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.hero-badge::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--sari); animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

.hero h1 {
  font-size:clamp(36px,5.5vw,74px);
  font-weight:900; line-height:1.0; color:#fff; margin-bottom:10px;
  letter-spacing:-.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.hero h1 em { color:var(--sari); font-style:normal; }
.hero-sub  {
  font-size:clamp(17px,2.2vw,24px); font-weight:700; color:var(--sari);
  margin-bottom:16px; text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.hero-desc {
  color:rgba(255,255,255,.72); font-size:15px;
  max-width:480px; margin-bottom:32px; line-height:1.8;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.btn-call {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--sari); color:#000;
  padding:15px 28px; border-radius:999px;
  font-weight:900; font-size:17px; transition:.3s;
  box-shadow:0 6px 30px rgba(245,166,35,.5);
}
.btn-call svg { width:20px; height:20px; }
.btn-call:hover { background:var(--sari2); transform:translateY(-3px); box-shadow:0 10px 44px rgba(245,166,35,.65); }
.btn-wa {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(37,211,102,.18); border:1px solid rgba(37,211,102,.4);
  color:#2ecc71; padding:15px 22px; border-radius:999px;
  font-weight:800; font-size:15px; transition:.3s;
  backdrop-filter:blur(6px);
}
.btn-wa svg { width:18px; height:18px; }
.btn-wa:hover { background:rgba(37,211,102,.28); transform:translateY(-3px); }

.hero-stats {
  display:flex; gap:0;
  border-radius:var(--r-md); overflow:hidden;
  background:rgba(255,255,255,.06); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  width:fit-content; margin-top:36px;
}
.hero-stat  { padding:16px 22px; text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.hero-stat:last-child { border-right:none; }
.hero-stat strong { display:block; font-size:24px; font-weight:900; color:var(--sari); line-height:1; }
.hero-stat span   { font-size:10px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em; margin-top:5px; display:block; }

/* No-video sağ fotoğraf (video yokken zaten hero-inner flex-col, visual gizlenir) */
.hero-visual { display:none; }

/* No-video fallback görsel — hero-inner altında full-width değil, overlay görevi görür */
.hero-img-wrap {
  position:absolute; inset:0; z-index:0;
}
.hero-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-img-placeholder {
  width:100%; height:100%; background:var(--s2);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; color:var(--soluk); padding:30px; text-align:center;
}
.hero-img-placeholder svg { width:56px; height:56px; opacity:.3; }
.hero-img-placeholder p   { font-size:13px; }

/* info-panel — artık kullanılmıyor (hero tek sütun) */
.hero-info-panel { display:none; }

/* Video alt etiketi */
.hero-video-badge {
  position:absolute; bottom:20px; left:20px; right:20px; z-index:4;
  max-width:1160px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.hero-badge-pill {
  background:rgba(0,0,0,.6); backdrop-filter:blur(12px);
  border:1px solid var(--sari-line); border-radius:999px;
  padding:10px 18px; display:flex; align-items:center; gap:10px;
  pointer-events:all;
}
.hero-badge-pill svg { width:18px; height:18px; color:var(--sari); flex-shrink:0; }
.hero-badge-pill strong { color:#fff; font-size:13px; font-weight:700; }
.hero-badge-pill span   { font-size:11px; color:rgba(255,255,255,.55); margin-left:4px; }

/* Scroll indicator */
.hero-scroll {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.35); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  pointer-events:none;
}
.hero-scroll-line {
  width:1px; height:40px; background:linear-gradient(to bottom, var(--sari), transparent);
  animation:scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line { 0%{opacity:0;transform:scaleY(0);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1);transform-origin:bottom} }

/* ---------- SECTION WRAPPER ---------- */
.section { max-width:1160px; margin:auto; padding:88px 24px; }
.section-sm { max-width:1160px; margin:auto; padding:60px 24px; }
.sec-head { text-align:center; margin-bottom:52px; }
.sec-eyebrow {
  display:inline-block; font-size:10px; font-weight:800;
  letter-spacing:.2em; color:var(--sari); text-transform:uppercase;
  padding:6px 16px; border-radius:999px;
  background:var(--sari-dim); border:1px solid var(--sari-line);
  margin-bottom:14px;
}
.sec-head h2 { font-size:clamp(26px,3.8vw,44px); font-weight:900; color:#fff; letter-spacing:-.02em; margin-bottom:12px; }
.sec-head p  { color:var(--soluk); max-width:520px; margin:auto; font-size:15px; }

@keyframes glow-pulse {
  0%   { opacity:.7; }
  100% { opacity:1; }
}

/* ---------- HİZMETLER ---------- */
.hizmetler-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.hizmet-card { cursor:default; }

/* Görsel alanı — BURAYA HİZMET FOTOĞRAFI GELİR */
.hizmet-img-wrap {
  height:210px; overflow:hidden;
  border-radius:var(--r-md) var(--r-md) 0 0;
}
.hizmet-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:.4s; }
.hizmet-card:hover .hizmet-img-wrap img { transform:scale(1.05); }
.hizmet-placeholder {
  height:210px; background:linear-gradient(145deg,#1a1200,#2a1e00);
  display:grid; place-items:center; color:var(--sari);
}
.hizmet-placeholder svg { width:52px; height:52px; opacity:.35; }
.hizmet-body { padding:22px; }
.hizmet-ikon { width:40px; height:40px; color:var(--sari); margin-bottom:12px; }
.hizmet-ikon svg { width:40px; height:40px; }
.hizmet-body h3 { font-size:17px; font-weight:800; color:#fff; margin-bottom:8px; }
.hizmet-body p  { font-size:13px; color:var(--soluk); line-height:1.7; }

/* ─── NEDEN BİZ ─── */
.neden-bg {
  background:var(--s2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}

@keyframes orb-wander {
  0%,100% { transform:translate(0, 0) scale(1); }
  33%     { transform:translate(40px,-30px) scale(1.08); }
  66%     { transform:translate(-20px, 40px) scale(.94); }
}

/* ---------- NEDEN BİZ ---------- */
.neden-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.neden-card { padding:26px 20px; text-align:center; cursor:default; }
.neden-ikon {
  width:52px; height:52px; border-radius:14px;
  background:var(--sari-dim); border:1px solid var(--sari-line);
  display:grid; place-items:center; margin:0 auto 16px;
  color:var(--sari);
}
.neden-ikon svg { width:24px; height:24px; }
.neden-card h4 { font-size:15px; font-weight:800; color:#fff; margin-bottom:8px; }
.neden-card p  { font-size:13px; color:var(--soluk); line-height:1.65; }

/* ---------- GALERİ ---------- */
/* Galeri — BURAYA GALERİDEN FOTOĞRAFLAR GELİR */
.galeri-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
/* İlk kart büyük (2 sütun, 2 satır) */
.galeri-grid .galeri-item:first-child {
  grid-column:span 2;
  grid-row:span 2;
}
.galeri-item {
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); cursor:pointer;
  position:relative; aspect-ratio:4/3;
  touch-action:manipulation;
}
.galeri-grid .galeri-item:first-child { aspect-ratio:auto; }
.galeri-item img { width:100%; height:100%; object-fit:cover; display:block; transition:.4s ease; }
.galeri-item:hover img { transform:scale(1.06); }
.galeri-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%);
  opacity:0; transition:.3s;
  display:flex; align-items:flex-end; padding:14px;
}
.galeri-item:hover .galeri-overlay { opacity:1; }
.galeri-overlay span { color:#fff; font-size:13px; font-weight:600; }

/* Yorumlar — neden-bg'nin içinde, ek efekt yok */

/* ---------- YORUMLAR ---------- */
.yorum-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.yorum-card { padding:24px; }
.yorum-stars { display:flex; gap:3px; margin-bottom:14px; }
.yorum-stars svg { width:15px; height:15px; fill:var(--sari); color:var(--sari); }
.yorum-text  { font-size:14px; color:var(--metin); line-height:1.75; margin-bottom:16px; font-style:italic; }
.yorum-isim  { font-size:12px; font-weight:700; color:var(--soluk); }

/* ─── GALERİ ─── */
#galeri { position:relative; }

/* ---------- CTA BAR ---------- */
.cta-bar {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #0f0900 0%, #0b0b0b 100%);
  border-top:1px solid var(--sari-line);
  border-bottom:1px solid var(--sari-line);
}
.cta-inner {
  max-width:1160px; margin:auto; padding:56px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-text h2 { font-size:clamp(22px,3vw,38px); font-weight:900; color:#fff; margin-bottom:6px; }
.cta-text h2 em { color:var(--sari); font-style:normal; }
.cta-text p  { color:var(--soluk); font-size:14px; }
.cta-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cta-call {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--sari); color:#000;
  padding:16px 32px; border-radius:999px;
  font-weight:900; font-size:19px; transition:.3s;
  box-shadow:0 6px 30px rgba(245,166,35,.4);
}
.cta-call svg { width:20px; height:20px; }
.cta-call:hover { background:var(--sari2); transform:translateY(-3px); }
.cta-wa {
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff;
  padding:16px 22px; border-radius:999px;
  font-weight:800; font-size:15px; transition:.3s;
}
.cta-wa svg { width:18px; height:18px; }
.cta-wa:hover { background:#1da851; transform:translateY(-3px); }

/* ---------- FOOTER ---------- */
.footer {
  background:#080808; border-top:1px solid var(--line);
}
.footer-main {
  max-width:1160px; margin:0 auto; padding:56px 24px 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;
}
.footer-logo      { height:56px; width:auto; object-fit:contain; filter:brightness(1.05); }
.footer-logo-text { font-size:20px; font-weight:900; color:#fff; letter-spacing:-.02em; }
.footer-slogan    { font-size:13px; color:var(--sari); font-style:italic; margin:8px 0 16px; }
.footer-meta      { display:flex; align-items:center; gap:8px; color:var(--soluk); font-size:13px; margin-top:8px; }
.footer-meta svg  { width:15px; height:15px; opacity:.6; flex-shrink:0; }
.footer-col-title { font-size:11px; font-weight:700; color:var(--sari); text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; }
.footer-phone-link {
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:900; font-size:18px; margin-bottom:12px; transition:.2s;
}
.footer-phone-link svg { width:20px; height:20px; color:var(--sari); }
.footer-phone-link:hover { color:var(--sari); }
.footer-wa-link {
  display:inline-flex; align-items:center; gap:8px;
  background:#25d366; color:#fff; font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:50px; transition:.2s;
}
.footer-wa-link svg { width:16px; height:16px; }
.footer-wa-link:hover { background:#1da851; }
.footer-social     { display:flex; gap:8px; margin-top:14px; }
.footer-social-btn {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--soluk); transition:.2s;
}
.footer-social-btn:hover { border-color:var(--sari-line); color:var(--sari); }

.footer-bottom {
  border-top:1px solid var(--line);
  max-width:1160px; margin:0 auto; padding:18px 24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px;
  font-size:12px; color:var(--soluk);
}
.footer-bottom-copy { opacity:.7; }
.footer-credit a { color:var(--sari); font-weight:600; }
.footer-credit a:hover { text-decoration:underline; }

/* ---------- DIVIDER ---------- */
.divider {
  height:1px; background:linear-gradient(90deg, transparent, var(--sari-line), transparent);
  max-width:1160px; margin:0 auto;
}

/* ---------- LİGHTBOX ---------- */
.lightbox { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.9); align-items:center; justify-content:center; overscroll-behavior:contain; }
.lightbox.active { display:flex; }
.lightbox img {
  max-width:90vw; max-height:88vh; display:block; object-fit:contain;
  border-radius:0; box-shadow:none; touch-action:none; user-select:none;
  transform-origin:center center; will-change:auto; contain:layout paint;
}
.lightbox img.is-zoomed { cursor:grab; }
.lightbox img.is-zoomed:active { cursor:grabbing; }
.lb-zoom-hint { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,.72); padding:7px 12px; border-radius:999px; font-size:11px; pointer-events:none; }
.lb-close { position:fixed; top:18px; right:22px; font-size:34px; color:#fff; cursor:pointer; background:none; border:none; line-height:1; opacity:.7; transition:.2s; z-index:2; }
.lb-close:hover { opacity:1; transform:scale(1.1); }

.lb-nav {
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,20,20,.55); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:20px; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.lb-nav:hover { background:var(--sari); border-color:var(--sari); color:#000; transform:translateY(-50%) scale(1.08); }
.lb-prev { left:22px; }
.lb-next { right:22px; }
.lb-sayac {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:rgba(20,20,20,.6); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:13px; font-weight:700; padding:7px 16px; border-radius:999px;
  z-index:2;
}

/* ---------- FLOATING BUTONLAR ---------- */
/* Masaüstü: sol-alt köşe, dikey grup */
.float-bar {
  position:fixed; bottom:28px; left:24px; z-index:998;
  display:flex; flex-direction:column; gap:10px;
}
.float-btn {
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:50px;
  font-weight:700; font-size:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform .2s, box-shadow .2s;
  white-space:nowrap;
}
.float-btn:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.float-btn svg   { width:20px; height:20px; flex-shrink:0; }
.float-btn--phone {
  background:var(--sari); color:#000;
  box-shadow:0 6px 24px rgba(245,166,35,.45);
  animation:float-pulse 2.5s infinite;
}
.float-btn--phone:hover { box-shadow:0 10px 30px rgba(245,166,35,.65); }
.float-btn--wa { background:#25d366; color:#fff; }
.float-btn--wa:hover { background:#1da851; }

@keyframes float-pulse {
  0%,100%{box-shadow:0 6px 24px rgba(245,166,35,.45)}
  50%     {box-shadow:0 8px 36px rgba(245,166,35,.8)}
}

/* ---------- HİZMET DETAY POPUP ---------- */
.hizmet-card--tikla { cursor:pointer; }
.hizmet-detay-link  { display:inline-block; margin-top:10px; font-size:12px; color:var(--sari); font-weight:600; }

.hizmet-img-badge {
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.7); color:var(--sari);
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px;
  pointer-events:none;
}

.hizmet-popup-overlay {
  display:none; position:fixed; inset:0; z-index:9000;
  /* backdrop-filter KASTEN kullanılmıyor — fixed katman + blur, mobil
     GPU'larda pinch-zoom sırasında ciddi performans sorununa/çökmeye
     yol açan bilinen bir kombinasyon. Düz koyu arka plan yeterli. */
  background:rgba(0,0,0,.88);
  align-items:center; justify-content:center; padding:16px;
  overscroll-behavior:contain;
}
.hizmet-popup-overlay.active { display:flex; }
.hizmet-popup-box {
  background:var(--s2); border:1px solid var(--sari-line);
  border-radius:var(--r-xl); padding:32px; max-width:680px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,.8), 0 0 60px rgba(245,166,35,.1);
  overscroll-behavior:contain;
  margin:auto; /* dikey+yatay tam ortalama garantisi */
}
.hizmet-popup-kapat {
  position:absolute; top:16px; right:18px;
  font-size:26px; color:var(--soluk); background:none; border:none;
  cursor:pointer; line-height:1; transition:.2s;
}
.hizmet-popup-kapat:hover { color:#fff; transform:scale(1.15); }
.hizmet-popup-ikon { color:var(--sari); margin-bottom:8px; }
.hizmet-popup-ikon svg { width:32px; height:32px; }
.hizmet-popup-baslik   { font-size:22px; font-weight:900; color:#fff; margin-bottom:8px; }
.hizmet-popup-aciklama { font-size:14px; color:var(--soluk); line-height:1.7; margin-bottom:20px; }

.hizmet-popup-galeri {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:24px;
}
.hp-gorsel {
  width:100%; border-radius:10px; object-fit:cover; height:130px;
  cursor:zoom-in; border:2px solid transparent; transition:.2s;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.hp-gorsel:hover { border-color:var(--sari); transform:scale(1.02); }
.hp-gorsel--ana {
  grid-column:1/-1; height:220px;
}
.hizmet-popup-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hizmet-popup-actions .btn-call { flex:1; justify-content:center; min-width:140px; }
.hizmet-popup-actions .btn-wa   { flex:1; justify-content:center; min-width:140px; }

/* ======================================================
   ADMIN PANEL STİL
   ====================================================== */
[data-theme="dark"]  { --ab:#0f0f0f; --ac:#171717; --at:#e4e4e4; --am:#6b7280; --al:rgba(255,255,255,.07); }
[data-theme="light"] { --ab:#f4f5f7; --ac:#ffffff;  --at:#1a1a1a;  --am:#6b7280; --al:#e5e7eb; }

.admin-body { background:var(--ab); color:var(--at); min-height:100vh; }
.admin-shell { display:flex; min-height:100vh; }

.admin-sidebar {
  width:232px; flex-shrink:0;
  background:var(--ac); border-right:1px solid var(--al);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-brand {
  display:flex; align-items:center; gap:10px;
  padding:16px; border-bottom:1px solid var(--al);
}
.admin-brand .brand-mark { width:36px; height:36px; border-radius:9px; background:var(--sari); display:grid; place-items:center; font-size:17px; font-weight:900; color:#000; flex-shrink:0; }
.admin-brand strong { display:block; font-size:12px; font-weight:700; color:var(--at); }
.admin-brand small   { font-size:10px; color:var(--am); }

.admin-sidebar a, .admin-submenu summary {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; font-size:13px; color:var(--am);
  transition:.18s; border-left:3px solid transparent;
  list-style:none; cursor:pointer;
}
.admin-sidebar a:hover, .admin-submenu summary:hover { background:rgba(245,166,35,.07); color:var(--at); border-left-color:var(--sari); }
.admin-sidebar a.active { background:rgba(245,166,35,.11); color:var(--sari); border-left-color:var(--sari); font-weight:700; }
.admin-sidebar a span { font-size:15px; }
.admin-menu-title { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--am); padding:12px 14px 3px; opacity:.55; }

.admin-submenu { border:none; padding:0; }
.admin-submenu summary { padding-left:14px; }
.admin-submenu a { padding-left:38px; font-size:12px; }

.admin-content { flex:1; display:flex; flex-direction:column; min-width:0; }
.admin-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 20px; background:var(--ac); border-bottom:1px solid var(--al);
  position:sticky; top:0; z-index:20;
}
.admin-top-btn {
  padding:7px 13px; border-radius:7px; font-size:12px; font-weight:600;
  background:var(--sari-dim); border:1px solid var(--sari-line);
  color:var(--sari); cursor:pointer; transition:.18s;
}
.admin-top-btn:hover { background:rgba(245,166,35,.22); }
.admin-main { padding:22px; flex:1; }
.admin-page-title { font-size:21px; font-weight:800; color:var(--at); margin-bottom:18px; }

.admin-card { background:var(--ac); border:1px solid var(--al); border-radius:12px; padding:18px; margin-bottom:18px; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { padding:9px 11px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--am); border-bottom:1px solid var(--al); }
.admin-table td { padding:11px; font-size:13px; color:var(--at); border-bottom:1px solid var(--al); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:rgba(245,166,35,.03); }
.admin-table img { width:60px; height:45px; object-fit:cover; border-radius:6px; border:1px solid var(--al); }

.form-row { margin-bottom:14px; }
.form-row label { display:block; font-size:12px; font-weight:600; color:var(--at); margin-bottom:5px; }
.form-row input,.form-row textarea,.form-row select {
  width:100%; padding:9px 11px; border-radius:7px;
  border:1px solid var(--al); background:var(--ab); color:var(--at); font-size:13px; transition:.18s;
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus { outline:none; border-color:var(--sari); box-shadow:0 0 0 3px rgba(245,166,35,.1); }
.form-row textarea { min-height:90px; resize:vertical; }
.form-row small { display:block; font-size:10px; color:var(--am); margin-top:3px; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:7px; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:.18s; }
.btn-primary   { background:var(--sari); color:#000; }
.btn-primary:hover  { background:var(--sari2); }
.btn-danger    { background:rgba(220,38,38,.12); color:#ef4444; border:1px solid rgba(220,38,38,.25); }
.btn-danger:hover   { background:rgba(220,38,38,.22); }
.btn-secondary { background:var(--al); color:var(--at); }
.btn-secondary:hover{ opacity:.8; }

.badge { display:inline-flex; padding:3px 8px; border-radius:999px; font-size:10px; font-weight:700; }
.badge-green { background:rgba(34,197,94,.12); color:#22c55e; }
.badge-red   { background:rgba(239,68,68,.12);  color:#ef4444; }

.alert { padding:11px 14px; border-radius:9px; margin-bottom:14px; font-size:13px; }
.alert-ok  { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.22);   color:#22c55e; }
.alert-err { background:rgba(239,68,68,.1);   border:1px solid rgba(239,68,68,.22);   color:#ef4444; }

.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.dash-stat { background:var(--ac); border:1px solid var(--al); border-radius:12px; padding:18px; }
.dash-stat-num   { font-size:30px; font-weight:900; color:var(--sari); }
.dash-stat-label { font-size:11px; color:var(--am); margin-top:3px; }

.admin-burger { display:none; background:none; border:none; color:var(--at); font-size:20px; cursor:pointer; padding:4px 8px; }
.admin-back-btn { display:inline-flex; align-items:center; gap:4px; background:none; border:none; color:var(--am); font-size:12px; cursor:pointer; padding:4px 8px; border-radius:5px; transition:.18s; }
.admin-back-btn:hover { color:var(--at); background:var(--al); }

/* ---------- MOBİL ---------- */
@media (max-width:960px) {
  /* ── TOPBAR ── */
  .topbar-inner   { padding:10px 16px; }
  .logo-mark      { width:36px; height:36px; font-size:16px; border-radius:8px; }
  .logo-img       { height:36px; width:36px; }
  .logo-text strong { font-size:14px; }
  .logo-text span   { display:none; } /* alt yazıyı gizle — logo yanında yer açar */
  .topbar-socials  { gap:3px; }
  .topbar-social-btn {
    width:32px; height:32px; padding:0; border-radius:8px;
    justify-content:center;
  }
  .topbar-social-btn span { display:none; } /* mobilde yazıyı gizle, sadece ikon kalsın */
  .topbar-divider  { display:none; }
  .lb-nav { width:42px; height:42px; font-size:16px; }
  .lb-prev { left:10px; }
  .lb-next { right:10px; }
  .wa-btn          { display:none; } /* nav'daki WA gizle — altta float var */
  .phone-btn      { padding:9px 14px; font-size:13px; }
  .phone-btn .phone-num { display:none; } /* numara metnini gizle, sadece ikon */

  /* ── HERO ── */
  .hero             { min-height:100svh; } /* svh: adres çubuğu dahil gerçek görünür yükseklik */
  .hero-inner       { padding:52px 18px 60px; }
  .hero-copy        { max-width:100%; }
  .hero h1          { font-size:clamp(28px,8vw,42px); }
  .hero-badge       { font-size:10px; padding:5px 12px; }
  .hero-desc        { font-size:14px; }
  .hero-actions     { flex-direction:column; gap:10px; }
  .btn-call, .btn-wa { justify-content:center; width:100%; }
  .hero-stats       { width:100%; flex-wrap:nowrap; }
  .hero-stat        { flex:1; padding:12px 8px; }
  .hero-stat strong { font-size:18px; }
  .hero-video-badge { left:12px; right:12px; bottom:90px; justify-content:center; } /* float bar'ın üstünde kalsın */
  .hero-badge-pill  { font-size:12px; padding:8px 14px; }
  .hero-scroll      { display:none; } /* mobilde dar alanda badge'i ortalamak için scroll göstergesini gizle */

  /* ── GRID ── */
  .hizmetler-grid { grid-template-columns:1fr; }
  .neden-grid     { grid-template-columns:repeat(2,1fr); }
  .yorum-grid     { grid-template-columns:1fr; }
  .galeri-grid    { grid-template-columns:repeat(2,1fr); }
  .galeri-grid .galeri-item:first-child { grid-column:span 2; grid-row:span 1; aspect-ratio:16/7; }

  /* ── CTA ── */
  .cta-inner  { flex-direction:column; text-align:center; gap:20px; }
  .cta-actions { justify-content:center; flex-direction:column; align-items:center; gap:10px; }
  .cta-call,.cta-wa { width:100%; max-width:320px; justify-content:center; }

  /* ── FOOTER ── */
  .footer-main   { grid-template-columns:1fr; gap:28px; padding:36px 18px 20px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:5px; padding:14px 18px 80px; }

  /* ── FLOAT BAR (mobil: tam genişlik alt çubuk) ── */
  .float-bar {
    bottom:0; left:0; right:0; width:100%;
    flex-direction:row; gap:0;
    border-top:1px solid rgba(255,255,255,.1);
    padding:0; border-radius:0;
    background:#0b0b0b;
  }
  .float-btn {
    flex:1; justify-content:center; gap:8px;
    border-radius:0; padding:15px 10px;
    font-size:14px; font-weight:800;
  }
  .float-btn--phone { animation:none; }

  /* ── POPUP ── */
  /* Mobilde de tam ortalanmış modal — alta yapıştırılmış "bottom sheet"
     görünümü kafa karıştırıcı olduğu için kaldırıldı. */
  .hizmet-popup-overlay { padding:12px; align-items:center; }
  .hizmet-popup-box    { padding:22px 16px; border-radius:var(--r-lg); max-height:85vh; }
  .hizmet-popup-galeri { grid-template-columns:1fr 1fr; }
  .hp-gorsel--ana      { grid-column:1/-1; height:160px; }
  .hizmet-popup-actions { flex-direction:column; }
}

@media (max-width:480px) {
  .section    { padding:52px 16px; }
  .section-sm { padding:40px 16px; }
  .neden-grid { grid-template-columns:1fr 1fr; }
  .galeri-grid { grid-template-columns:1fr 1fr; }
  .galeri-grid .galeri-item:first-child { grid-column:span 2; }
  .sec-head h2 { font-size:26px; }
  .sec-head    { margin-bottom:32px; }
  .footer-bottom { padding-bottom:80px; }
}

@media (pointer:coarse) {
  .lightbox { background:#000; }
  .lightbox img { max-width:100vw; max-height:100vh; }
  .lb-zoom-hint { bottom:76px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}