/* ==========================================================================
   Katuma Performance — ön yüz stilleri
   Mevcut sitenin görsel dili korundu (koyu zemin, marka kırmızısı, karbon
   dokusu, yuvarlak kartlar); tipografi, ritim ve etkileşimler yenilendi.
   ========================================================================== */

:root{
  --bg:            #0b0b0f;
  --bg-raise:      #101016;
  --text:          #f5f5f7;
  --muted:         #a9a9b6;
  --muted-dim:     #7d7d8a;
  --red:           #e50914;
  --red-bright:    #ff2733;
  --ok:            #10b981;
  --gold:          #ffc94d;

  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.16);
  --card:          linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));

  --shadow-sm:     0 4px 16px rgba(0,0,0,.35);
  --shadow:        0 18px 44px rgba(0,0,0,.48);
  --shadow-lg:     0 32px 80px rgba(0,0,0,.6);
  --glow-red:      0 14px 44px rgba(229,9,20,.28);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 28px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

/* Karbon dokusu + marka ışıkları doğrudan body'nin arka plan yığınında.
   Daha önce tam ekran position:fixed sözde-elemanlar kullanılıyordu; bunlar
   iki ayrı kompozit katman yaratıp kaydırmada boyama sorunlarına yol açıyordu.
   Katman sırası (üstten alta): ışıklar → karartma perdesi → doku → taban renk.
   Perde, dokunun opaklığını düşürme işini görüyor (arka plan katmanına
   doğrudan opacity verilemediği için). */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;

  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% 0%,   rgba(229,9,20,.20), transparent 62%),
    radial-gradient(900px 520px at 92% 6%,    rgba(120,150,255,.07), transparent 60%),
    radial-gradient(1000px 700px at 50% 100%, rgba(229,9,20,.10), transparent 65%),
    linear-gradient(rgba(11,11,15,.88), rgba(11,11,15,.88)),
    url("/img/carbon-tile.webp");
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size:auto, auto, auto, auto, 190px 190px;
  background-attachment:fixed, fixed, fixed, fixed, fixed;
}

/* Sabit arka plan mobilde kaydırmayı ağırlaştırıyor — küçük ekranda akıtıyoruz */
@media (max-width: 900px){
  body{ background-attachment:scroll, scroll, scroll, scroll, scroll }
}

img,svg,video{ max-width:100%; display:block }

/* Satır içi SVG ikonların taban boyutu — kapsayıcı ayrıca boyut vermezse
   metinle orantılı kalsınlar, asla kutuyu doldurmasınlar. */
.icon{ width:1.15em; height:1.15em; flex:none }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }

h1,h2,h3,h4{ margin:0; line-height:1.14; letter-spacing:-.022em; font-weight:800 }
p{ margin:0 }

::selection{ background:rgba(229,9,20,.45); color:#fff }

:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:3px;
  border-radius:6px;
}

.container{ width:min(var(--container), 100% - var(--gutter)*2); margin-inline:auto }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:12px 18px; border-radius:0 0 12px 0;
  font-weight:800;
}
.skip-link:focus{ left:0 }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ----------------------------------------------------------------- butonlar */
.btn{
  --btn-bg: rgba(255,255,255,.05);
  --btn-bd: var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 20px;
  border-radius:999px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--text);
  font-weight:700; font-size:15px; letter-spacing:.01em;
  white-space:nowrap; cursor:pointer;
  transition:transform .16s var(--ease), background .16s var(--ease),
             border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{ transform:translateY(-2px); --btn-bg:rgba(255,255,255,.09); --btn-bd:rgba(255,255,255,.24) }
.btn:active{ transform:translateY(0) }
.btn .icon{ width:18px; height:18px }

.btn--primary{
  --btn-bg: linear-gradient(135deg, var(--red) 0%, #b3060f 100%);
  --btn-bd: rgba(255,80,90,.5);
  box-shadow:var(--glow-red);
}
.btn--primary:hover{
  --btn-bg: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 100%);
  box-shadow:0 18px 52px rgba(229,9,20,.42);
}
.btn--wa{
  --btn-bg: rgba(16,185,129,.14);
  --btn-bd: rgba(16,185,129,.42);
  color:#d6fff0;
}
.btn--wa:hover{ --btn-bg:rgba(16,185,129,.22); --btn-bd:rgba(16,185,129,.6) }
.btn--sm{ padding:10px 15px; font-size:14px }
.btn--block{ width:100% }

/* ---------------------------------------------------------------- gezinme */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(11,11,15,.72);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.nav.is-stuck{
  background:rgba(9,9,12,.93);
  border-bottom-color:var(--line);
  box-shadow:0 10px 34px rgba(0,0,0,.42);
}
/* Menünün altındaki ince kırmızı ışık çizgisi */
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(229,9,20,.85), transparent);
  opacity:.55;
}

.nav-inner{ display:flex; align-items:center; gap:18px; padding:12px 0 }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto }
.brand img{ width:40px; height:40px; object-fit:contain }
.brand-text{ display:flex; flex-direction:column; line-height:1.15 }
.brand-name{ font-weight:900; font-size:17px; letter-spacing:.06em }
.brand-sub{ font-size:11.5px; font-weight:700; color:var(--muted-dim); letter-spacing:.05em }

.nav-links{ display:flex; align-items:center; gap:4px }
.nav-links a{
  padding:9px 13px; border-radius:999px;
  font-size:14.5px; font-weight:600; color:var(--muted);
  transition:color .16s var(--ease), background .16s var(--ease);
}
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.06) }
.nav-links a.is-active{ color:var(--text); background:rgba(229,9,20,.16) }

.nav-cta{ display:flex; align-items:center; gap:9px }

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:0;
  border:1px solid var(--line-strong); border-radius:13px;
  background:rgba(255,255,255,.05);
  cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--text);
  position:relative; transition:background .18s var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:19px; height:2px;
  border-radius:2px; background:var(--text);
  transition:transform .22s var(--ease), top .22s var(--ease);
}
.nav-toggle span::before{ top:-6px }
.nav-toggle span::after{ top:6px }
.nav-toggle[aria-expanded="true"] span{ background:transparent }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg) }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg) }

.nav-drawer{ display:none }

/* ------------------------------------------------------------------- hero */
.hero{ position:relative; padding:clamp(38px, 6vw, 76px) 0 clamp(28px, 4vw, 48px) }
.hero-bg{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  mask-image:linear-gradient(180deg, #000 0%, transparent 88%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 88%);
}
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.16; filter:grayscale(.4) }

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px, 4vw, 54px);
  align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border-radius:999px;
  border:1px solid rgba(229,9,20,.42);
  background:rgba(229,9,20,.11);
  font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--red-bright); box-shadow:0 0 0 4px rgba(229,9,20,.22);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(229,9,20,.28) }
  50%    { box-shadow:0 0 0 8px rgba(229,9,20,0) }
}

.hero h1{
  font-size:clamp(34px, 5.4vw, 60px);
  font-weight:900; letter-spacing:-.032em;
  margin:20px 0 16px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg, #fff 15%, var(--red-bright) 55%, var(--red) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{
  color:var(--muted); font-size:clamp(15.5px, 1.35vw, 18px);
  max-width:54ch; margin-bottom:26px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:11px }

.hero-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px; margin-top:32px;
  border-top:1px solid var(--line); padding-top:24px;
}
.hero-stats dt{ font-size:clamp(17px, 1.7vw, 21px); font-weight:900; letter-spacing:-.02em }
.hero-stats dd{ margin:3px 0 0; font-size:12.5px; color:var(--muted-dim); font-weight:600; line-height:1.4 }

/* Hero görsel kartı */
.hero-media{ position:relative }
.hero-card{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
  aspect-ratio:3/4;
  background:#000;
}
.hero-card img{ width:100%; height:100%; object-fit:cover }
.hero-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 34%, rgba(0,0,0,.72) 100%);
}
.hero-card-tag{
  position:absolute; left:16px; bottom:16px; right:16px; z-index:2;
  display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius:16px;
  background:rgba(10,10,14,.62);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.hero-card-tag > .icon{ width:21px; height:21px; color:var(--red-bright) }
.hero-card-tag b{ font-size:14px; display:block }
.hero-card-tag span{ font-size:12px; color:var(--muted); font-weight:600 }

/* Puan rozeti — hero kartın üzerine taşar */
.rating-badge{
  position:absolute; top:-14px; right:-10px; z-index:3;
  display:flex; align-items:center; gap:12px;
  padding:13px 17px; border-radius:18px;
  background:rgba(14,14,19,.9);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.rating-badge .score{ font-size:26px; font-weight:900; line-height:1; letter-spacing:-.03em }
.rating-badge .meta{ font-size:11.5px; color:var(--muted); font-weight:600; white-space:nowrap }

.star{ color:rgba(255,255,255,.2); font-size:13px; letter-spacing:1px }
.star.is-on{ color:var(--gold) }
.star.is-half{
  background:linear-gradient(90deg, var(--gold) 50%, rgba(255,255,255,.2) 50%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ------------------------------------------------------------- bölüm başlık */
section{ padding:clamp(46px, 6.5vw, 88px) 0; position:relative }
section[id]{ scroll-margin-top:82px }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(24px, 3vw, 40px);
}
.section-head h2{ font-size:clamp(25px, 3.1vw, 38px); margin:12px 0 0 }
.section-head p{ color:var(--muted); margin-top:11px; max-width:60ch; font-size:15.5px }
.label{
  font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--red-bright);
  display:inline-flex; align-items:center; gap:9px;
}
.label::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--red), transparent);
}

/* ------------------------------------------------------------------ kartlar */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}

.grid{ display:grid; gap:clamp(12px, 1.6vw, 18px) }
.grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)) }

/* Hizmet kartı */
.service{
  position:relative; overflow:hidden;
  padding:clamp(20px, 2.4vw, 28px);
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.service::before{
  content:""; position:absolute; top:-60px; right:-60px;
  width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle, rgba(229,9,20,.22), transparent 68%);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .45s var(--ease);
  opacity:.65;
}
.service:hover{
  transform:translateY(-4px);
  border-color:rgba(229,9,20,.35);
  box-shadow:var(--shadow), 0 0 0 1px rgba(229,9,20,.14);
}
.service:hover::before{ opacity:1; transform:scale(1.18) }

.service-icon{
  width:50px; height:50px; border-radius:15px;
  display:grid; place-items:center;
  background:rgba(229,9,20,.13);
  border:1px solid rgba(229,9,20,.34);
  color:#fff;
  margin-bottom:17px;
}
.service-icon .icon{ width:24px; height:24px }
.service h3{ font-size:18.5px; margin-bottom:9px }
.service p{ color:var(--muted); font-size:14.8px }
.service ul{
  list-style:none; margin:16px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:8px;
}
.service li{
  position:relative; padding-left:22px;
  font-size:13.6px; font-weight:600; color:var(--muted);
}
.service li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 3px rgba(229,9,20,.16);
}

/* -------------------------------------------------------------- ürün kartı */
.product{
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.product:hover{
  transform:translateY(-4px);
  border-color:rgba(229,9,20,.32);
  box-shadow:var(--shadow);
}
.product-figure{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 45%, #17171f, #0a0a0e);
  border-bottom:1px solid var(--line);
}
.product-figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.product:hover .product-figure img{ transform:scale(1.05) }
.product-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1 }
.product-body h3{ font-size:17.5px }
.product-body p{ color:var(--muted); font-size:14.4px; flex:1 }
.tags{ display:flex; flex-wrap:wrap; gap:6px }
.tag{
  font-size:11.5px; font-weight:700; letter-spacing:.03em;
  padding:5px 10px; border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  color:var(--muted);
}
.product-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px; margin-top:2px; border-top:1px solid var(--line);
}
.price{ font-size:13.5px; font-weight:800; color:var(--gold) }

/* ----------------------------------------------------------------- galeri */
.gallery{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(10px, 1.4vw, 16px);
}
.gallery-item{
  position:relative; overflow:hidden;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:#000;
  aspect-ratio:3/4;
  cursor:zoom-in;
  padding:0;
  transition:border-color .26s var(--ease), transform .26s var(--ease);
}
.gallery-item:hover{ border-color:rgba(229,9,20,.42); transform:translateY(-3px) }
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease), filter .3s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.06); filter:brightness(1.07) }
.gallery-item figcaption{
  position:absolute; left:10px; right:10px; bottom:10px;
  padding:9px 12px; border-radius:13px;
  background:rgba(8,8,12,.62);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:12.5px; font-weight:700; text-align:left;
  transform:translateY(4px); opacity:.92;
  transition:transform .26s var(--ease), opacity .26s var(--ease);
}
.gallery-item:hover figcaption{ transform:translateY(0); opacity:1 }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:none; place-items:center;
  padding:clamp(16px, 4vw, 48px);
  background:rgba(5,5,8,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.lightbox[open]{ display:grid }
.lightbox img{
  max-width:100%; max-height:82vh;
  border-radius:var(--r); border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
}
.lightbox-cap{
  margin-top:14px; text-align:center; color:var(--muted);
  font-size:14px; font-weight:600;
}
.lightbox-close,.lightbox-nav{
  position:absolute;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.lightbox-close:hover,.lightbox-nav:hover{ background:rgba(255,255,255,.15); transform:scale(1.06) }
.lightbox-close{ top:20px; right:20px; font-size:22px; line-height:1 }
.lightbox-nav{ top:50%; transform:translateY(-50%); font-size:24px }
.lightbox-nav:hover{ transform:translateY(-50%) scale(1.06) }
.lightbox-prev{ left:16px }
.lightbox-next{ right:16px }

/* ---------------------------------------------------------------- yorumlar */
.review{
  padding:22px;
  display:flex; flex-direction:column; gap:13px;
  transition:transform .26s var(--ease), border-color .26s var(--ease);
}
.review:hover{ transform:translateY(-3px); border-color:var(--line-strong) }
.review-head{ display:flex; align-items:center; gap:12px }
.avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-weight:900; font-size:16px;
  background:linear-gradient(135deg, rgba(229,9,20,.32), rgba(229,9,20,.1));
  border:1px solid rgba(229,9,20,.36);
}
.review-who b{ display:block; font-size:14.5px; font-weight:800 }
.review-who span{ font-size:12px; color:var(--muted-dim); font-weight:600 }
.review p{ color:var(--muted); font-size:14.4px; flex:1 }
.review-src .icon{ width:14px; height:14px; color:var(--gold) }
.review-src{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:var(--muted-dim);
  padding-top:12px; border-top:1px solid var(--line);
}

.reviews-empty{
  padding:30px; text-align:center; color:var(--muted);
  border:1px dashed var(--line-strong); border-radius:var(--r);
}

/* --------------------------------------------------------------------- SSS */
.faq{ display:grid; gap:11px; max-width:900px }
.faq details{
  border:1px solid var(--line);
  background:rgba(255,255,255,.028);
  border-radius:var(--r-sm);
  padding:4px 18px;
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.faq details[open]{ border-color:rgba(229,9,20,.3); background:rgba(229,9,20,.045) }
.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0;
  font-weight:700; font-size:15.5px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; flex:none;
  width:11px; height:11px;
  border-right:2px solid var(--red-bright);
  border-bottom:2px solid var(--red-bright);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(225deg) translateY(-2px) }
.faq details > div{ padding:0 0 18px; color:var(--muted); font-size:14.6px; max-width:72ch }

/* ------------------------------------------------------------------- form */
.form{ padding:clamp(20px, 2.6vw, 30px); display:grid; gap:16px }
.form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px }
.field{ display:grid; gap:7px }
.field label{ font-size:13px; font-weight:800; letter-spacing:.01em }
.field .hint{ font-size:12px; color:var(--muted-dim); font-weight:600 }
.field input,.field select,.field textarea{
  width:100%;
  padding:13px 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:rgba(0,0,0,.3);
  color:var(--text);
  font:inherit; font-size:15px; font-weight:600;
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ min-height:112px; resize:vertical }
.field input::placeholder,.field textarea::placeholder{ color:rgba(169,169,182,.5); font-weight:500 }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:rgba(229,9,20,.6);
  background:rgba(0,0,0,.42);
  box-shadow:0 0 0 4px rgba(229,9,20,.12);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9a9b6' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:38px;
}
.field select option{ background:#15151c; color:var(--text) }
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:rgba(229,9,20,.75);
}
.field-error{ font-size:12.5px; color:#ff8189; font-weight:700; display:none }
.field.is-invalid .field-error{ display:block }

.form-actions{ display:flex; flex-wrap:wrap; gap:11px; align-items:center }
.form-note{ font-size:12.6px; color:var(--muted-dim); font-weight:600 }

/* ------------------------------------------------------- iletişim & konum */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(14px,2vw,20px); align-items:start }

.contact-list{ display:grid; gap:9px; padding:clamp(18px,2.2vw,24px) }
.contact-row{
  display:flex; align-items:center; gap:14px;
  padding:14px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(0,0,0,.24);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.contact-row:hover{ border-color:rgba(229,9,20,.34); background:rgba(229,9,20,.06); transform:translateX(3px) }
.contact-row .ico{
  width:40px; height:40px; flex:none; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line-strong);
}
.contact-row .ico .icon{ width:19px; height:19px }
.contact-row b{ display:block; font-size:14.5px; font-weight:800 }
.contact-row span{ font-size:13px; color:var(--muted); font-weight:600 }

.map-frame{
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  background:#0a0a0e;
  box-shadow:var(--shadow-sm);
}
.map-frame iframe{ width:100%; height:clamp(300px, 42vh, 430px); border:0; display:block; filter:grayscale(.28) contrast(1.06) }

.hours{ padding:clamp(18px,2.2vw,24px); display:grid; gap:2px }
.hours h3{ font-size:16px; margin-bottom:12px; display:flex; align-items:center; gap:9px }
.hours h3 .icon{ width:18px; height:18px; color:var(--red-bright) }
.hours-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:14px; font-weight:600;
}
.hours-row:last-child{ border-bottom:0 }
.hours-row span:first-child{ color:var(--muted) }
.hours-row.is-today{ color:var(--text) }
.hours-row.is-today span:first-child{ color:var(--red-bright); font-weight:800 }
.hours-row.is-closed span:last-child{ color:var(--muted-dim) }

/* ---------------------------------------------------------------- CTA şerit */
.cta-band{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid rgba(229,9,20,.3);
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(229,9,20,.28), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  padding:clamp(28px, 4vw, 48px);
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.cta-band h2{ font-size:clamp(22px, 2.8vw, 32px) }
.cta-band p{ color:var(--muted); margin-top:10px; max-width:52ch }

/* ------------------------------------------------------------------- footer */
footer{
  border-top:1px solid var(--line);
  padding:clamp(36px, 4vw, 56px) 0 30px;
  margin-top:clamp(30px, 4vw, 50px);
  background:rgba(6,6,9,.5);
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;
  padding-bottom:30px;
}
.foot-brand p{ color:var(--muted); font-size:14px; margin-top:14px; max-width:42ch }
.foot-col h4{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:14px }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.foot-col a{ color:var(--muted); font-size:14px; font-weight:600; transition:color .16s var(--ease) }
.foot-col a:hover{ color:var(--text) }
.foot-bottom{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--muted-dim); font-size:13px; font-weight:600;
}
.foot-bottom a{ color:var(--muted-dim) }
.foot-bottom a:hover{ color:var(--muted) }

/* --------------------------------------------------------- yüzen WhatsApp */
.wa-float{
  position:fixed; right:clamp(14px,3vw,24px); bottom:clamp(14px,3vw,24px); z-index:90;
  display:flex; align-items:center; gap:11px;
  padding:11px 17px 11px 12px;
  border-radius:999px;
  background:rgba(16,185,129,.16);
  border:1px solid rgba(16,185,129,.42);
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:#dcfff2; font-weight:800;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px); background:rgba(16,185,129,.24) }
.wa-float .ico{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:rgba(16,185,129,.22); border:1px solid rgba(16,185,129,.45);
}
.wa-float .ico .icon{ width:20px; height:20px }
.wa-float b{ display:block; font-size:14px; line-height:1.2 }
.wa-float small{ font-size:11.5px; color:rgba(220,255,242,.72); font-weight:700 }

/* ------------------------------------------------------ giriş animasyonları */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ============================================================== duyarlılık */
@media (max-width: 1080px){
  .gallery{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}

@media (max-width: 900px){
  .nav-links{ display:none }
  .nav-toggle{ display:flex }
  .nav-cta .btn--desktop{ display:none }

  .nav-drawer{
    display:block;
    position:fixed; inset:64px 0 auto; z-index:59;
    /* Tam opak: menü okunurluğu backdrop-filter desteğine bağlı kalmasın */
    background:#0a0a0e;
    border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 22px;
    transform:translateY(-120%);
    visibility:hidden;
    transition:transform .32s var(--ease), visibility .32s;
    max-height:calc(100dvh - 64px); overflow-y:auto;
  }
  .nav-drawer.is-open{ transform:translateY(0); visibility:visible }
  .nav-drawer ul{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:2px }
  .nav-drawer a{
    display:block; padding:14px 12px; border-radius:12px;
    font-size:16px; font-weight:700; color:var(--muted);
    border-bottom:1px solid var(--line);
  }
  .nav-drawer a:hover,.nav-drawer a:focus-visible{ color:var(--text); background:rgba(255,255,255,.05) }
  .nav-drawer .drawer-cta{ display:grid; gap:9px; margin-top:6px }

  .hero-grid{ grid-template-columns:1fr; gap:32px }
  .hero-media{ max-width:440px; margin-inline:auto; width:100% }
  .rating-badge{ right:8px }

  .grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .contact-grid{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px }
  .foot-brand{ grid-column:1 / -1 }
}

@media (max-width: 620px){
  .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr }
  .form-grid{ grid-template-columns:1fr }
  .hero-stats{ grid-template-columns:1fr; gap:0 }
  .hero-stats > div{ padding:12px 0; border-bottom:1px solid var(--line) }
  .hero-stats > div:last-child{ border-bottom:0 }
  .hero-cta .btn{ flex:1 1 100%; }
  .cta-band{ flex-direction:column; align-items:flex-start }
  .wa-float b{ display:none }
  .wa-float small{ display:none }
  .wa-float{ padding:10px; border-radius:50% }
  .foot-grid{ grid-template-columns:1fr }
  .lightbox-nav{ width:42px; height:42px }
}

@media print{
  .nav,.wa-float,.lightbox,.hero-bg,body::after{ display:none !important }
  body{ background:#fff; color:#000 }
}