/* ═══════════════════════════════════════════════════════════
   İmaj Yüzey Kaplama İzmir
   Renk kuralı: sayfada tek renk kaynağı malzemenin kendisidir.
   Arayüz tamamen akromatiktir (siyah / beyaz / gri).
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #1D1D1F;
  --ink-2:    #6E6E73;
  --ink-3:    #86868B;
  --paper:    #FFFFFF;
  --mist:     #F5F5F7;
  --hair:     #D2D2D7;
  --void:     #060607;
  --void-2:   #131315;
  --sheen:    #BFE7FF;

  --w-page: 1120px;
  --w-text: 720px;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 26px;

  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 60px;

  --f-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.matlib{ position:absolute; width:0; height:0; overflow:hidden; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:var(--r-s);
  font-size:14px; text-decoration:none; transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

:focus-visible{
  outline:2px solid var(--sheen);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Tipografi ─────────────────────────────────────────── */

.eyebrow{
  margin:0 0 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.h2{
  font-family:var(--f-display);
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  line-height:1.06;
  letter-spacing:-.032em;
  font-weight:600;
  margin:0;
}

.mute{ color:var(--ink-3); }

.lede{
  font-size:clamp(1.06rem,1.6vw,1.28rem);
  line-height:1.5;
  color:var(--ink-2);
  max-width:var(--w-text);
  margin:22px 0 0;
  letter-spacing:-.015em;
}

/* ── Yapı ──────────────────────────────────────────────── */

.wrap{ width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:24px; }

.section{ padding:clamp(84px,11vw,148px) 0; background:var(--paper); color:var(--ink); }
.section--mist{ background:var(--mist); }
.section--dark{ background:var(--void); color:#F5F5F7; }
.section--dark .mute{ color:#86868B; }
.section--dark .lede{ color:#A1A1A6; }
.section--dark .eyebrow{ color:#86868B; }

.head{ margin-bottom:clamp(48px,6vw,80px); }
.head--center{ text-align:center; }
.head--center .lede{ margin-inline:auto; }

/* ── Butonlar ve linkler ───────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 26px;
  border-radius:999px;
  font-size:16px; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  transition:transform .3s var(--ease), background-color .25s, opacity .25s;
}
.btn:active{ transform:scale(.97); }
.btn--light{ background:#F5F5F7; color:var(--ink); }
.btn--light:hover{ background:#fff; }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--full{ width:100%; }

.link{
  font-size:16px; text-decoration:none; letter-spacing:-.01em;
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.link:hover{ border-bottom-color:currentColor; }
.link--onDark{ color:#F5F5F7; }

/* ── Nav ───────────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  background:rgba(6,6,7,.62);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#F5F5F7;
  transition:background-color .3s;
}
.nav.is-solid{ background:rgba(6,6,7,.88); }

.nav__inner{
  height:100%;
  max-width:var(--w-page); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; gap:28px;
}

/* Logo tek renk beyaz bir dosya. Koyu zeminde olduğu gibi, açık zeminde
   brightness(0) ile siyaha çevrilerek kullanılıyor. */
.brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.brand__logo{ display:block; height:34px; width:auto; }
.brand--foot .brand__logo{ height:56px; filter:brightness(0); }

.nav__links{ display:flex; gap:26px; margin-inline:auto; }
@media (max-width:1100px){ .nav__links{ gap:18px; } .nav__inner{ gap:20px; } }
.nav__links a{
  font-size:13.5px; color:rgba(245,245,247,.78); text-decoration:none;
  letter-spacing:-.005em; transition:color .2s;
}
.nav__links a:hover{ color:#fff; }

.nav__cta{
  font-size:13.5px; font-weight:500; text-decoration:none;
  color:var(--void); background:#F5F5F7;
  padding:7px 15px; border-radius:999px;
  transition:background-color .2s, transform .3s var(--ease);
}
.nav__cta:hover{ background:#fff; }
/* İkincil buton: garanti sorgulama (Teklif alın'ın yanında, çerçeveli) */
.nav__check{
  font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap;
  color:#F5F5F7; border:1px solid rgba(245,245,247,.32);
  padding:6px 14px; border-radius:999px; margin-right:-16px;
  transition:border-color .2s, background-color .2s;
}
.nav__check:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.nav__check[aria-current]{ border-color:#fff; }
@media (max-width:1100px){ .nav__check{ margin-right:-8px; } }
.nav__cta:active{ transform:scale(.96); }

.nav__toggle{
  display:none; margin-left:auto;
  width:40px; height:40px; padding:0;
  background:none; border:0; color:inherit; cursor:pointer;
}
.nav__toggle-box{ display:block; position:relative; width:20px; height:12px; margin-inline:auto; }
.nav__toggle-box i{
  position:absolute; left:0; width:100%; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s;
}
.nav__toggle-box i:first-child{ top:0; }
.nav__toggle-box i:last-child{ bottom:0; }
.nav__toggle[aria-expanded="true"] i:first-child{ transform:translateY(5.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child{ transform:translateY(-5.25px) rotate(-45deg); }

.menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99;
  background:rgba(6,6,7,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  color:#F5F5F7;
  padding:clamp(20px,2.6vh,32px) 24px calc(clamp(24px,3vh,40px) + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; justify-content:space-between;
  /* Son madde ve telefon blogu hicbir ekranda kirpilmasin: olculer sigmazsa
     menu kendi icinde kayar. */
  overflow-y:auto; overscroll-behavior:contain;
  animation:menuIn .35s var(--ease);
}
/* iOS'ta position:fixed alt arac cubugunu hesaba katmaz; bottom:0 cubugun
   altinda kalip son maddeyi yutuyordu. dvh gercek gorunur yuksekligi verir. */
@supports (height:100dvh){
  .menu{ bottom:auto; height:calc(100dvh - var(--nav-h)); }
}
.menu[hidden]{ display:none; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-8px); } }

.menu__list{ display:flex; flex-direction:column; }
.menu__list a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--f-display);
  font-size:clamp(18px,5.2vw,23px); font-weight:500; letter-spacing:-.025em;
  line-height:1.2; color:#F5F5F7;
  text-decoration:none; padding:clamp(10px,1.6vh,15px) 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s, padding-left .3s var(--ease);
}
.menu__list a::after{
  content:"›"; font-size:.9em; color:rgba(245,245,247,.32);
  transition:color .2s, transform .3s var(--ease);
}
.menu__list a:hover,
.menu__list a:active{ padding-left:4px; }
.menu__list a:hover::after,
.menu__list a:active::after{ color:#F5F5F7; transform:translateX(2px); }
.menu__list a[aria-current]{ color:#fff; }
.menu__list a[aria-current]::after{ color:#F5F5F7; }

.menu__foot{ padding-top:clamp(22px,3vh,36px); }
.menu__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:clamp(24px,3.4vh,36px); }
.menu__cta,
.menu__check{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 14px; border-radius:999px;
  font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap;
  transition:background-color .2s, border-color .2s, transform .3s var(--ease);
}
.menu__cta{ color:var(--void); background:#F5F5F7; }
.menu__cta:hover{ background:#fff; }
.menu__check{ color:#F5F5F7; border:1px solid rgba(245,245,247,.32); }
.menu__check:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.menu__cta:active,
.menu__check:active{ transform:scale(.97); }
.menu__phone{
  font-family:var(--f-display);
  font-size:clamp(24px,7.4vw,30px); font-weight:600; letter-spacing:-.03em; text-decoration:none;
}
.menu__note{ margin:8px 0 0; font-size:14px; line-height:1.5; color:#86868B; }
.menu__social{ display:flex; gap:20px; margin:14px 0 0; }
.menu__social a{ font-size:14px; color:#D2D2D7; text-decoration:none; transition:color .2s; }
.menu__social a:hover{ color:#fff; }

/* ── Hero ──────────────────────────────────────────────── */

.hero{
  position:relative;
  background:var(--void);
  color:#F5F5F7;
  min-height:clamp(640px,94vh,960px);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + clamp(28px,3.4vw,40px)) 0 clamp(18px,2.4vw,28px);
  overflow:hidden;
  isolation:isolate;
}

/* Hero fotoğrafı tam taşma; üzerindeki perde metni okunur tutar. */
.hero__media{ position:absolute; inset:0; z-index:0; display:block; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 56%; display:block; }

/* Perde metnin oturduğu orta banda yoğunlaşır; alt taraf açık bırakılır ki
   kadrajın asıl konusu olan mermer tezgâh karanlıkta kaybolmasın. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(76% 56% at 50% 44%,
      rgba(6,6,7,.88) 0%, rgba(6,6,7,.60) 56%, rgba(6,6,7,.14) 100%),
    linear-gradient(to bottom,
      rgba(6,6,7,.78) 0%,
      rgba(6,6,7,.42) 26%,
      rgba(6,6,7,.30) 58%,
      rgba(6,6,7,.46) 100%);
}

.hero__copy{
  position:relative; z-index:2;
  width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:24px;
  text-align:center;
}

.hero__title{
  font-family:var(--f-display);
  font-size:clamp(2.75rem,7.6vw,5.4rem);
  line-height:1.03;
  letter-spacing:-.042em;
  font-weight:600;
  margin:0;
}
.hero__title .eyebrow{ display:block; font-family:var(--f-body); line-height:1.4; color:#A6A6AD; }
.hero__title .line{ display:block; }
/* Fotoğraf üzerinde durduğu için düz koyu zemindekinden bir tik açık */
.hero__title .line--mute{ color:#9A9AA2; }

.hero__lede{
  max-width:580px; margin:22px auto 0;
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.5; color:#C4C4CA; letter-spacing:-.012em;
}

.hero__actions{
  margin-top:30px;
  display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;
}

/* ── Hero yüzey şeridi ────────────────────────────────── */

.hstrip{
  position:relative; z-index:2;
  margin-top:auto;                       /* metni yukarı, şeridi aşağı iter */
  padding-top:clamp(18px,2.2vw,24px);
}

.hstrip__head{
  max-width:var(--w-page); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:baseline; justify-content:center; gap:16px;
  margin-bottom:11px;
  text-align:center;
}
.hstrip__label{
  margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,245,247,.62);
}

.hstrip__body{ position:relative; }
/* Ray ve oklar arasindaki siralama acikca yazildi: aksi halde son kartin
   perdesi okun ustune binip tiklamayi yutuyor. */
.hstrip__track{ position:relative; z-index:1; }

/* Ray: yatay kaydırma + kart hizalama. Kaydırma çubuğu gizli ama
   dokunmatikte parmakla, masaüstünde oklarla ve klavyeyle erişilebilir. */
.hstrip__track{
  list-style:none; margin:0;
  display:flex; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  /* CSS scroll-snap bilerek kullanilmadi: yumusak kaydirmayi yarida kesip
     seridi geri cekiyordu. Kartlar zaten sabit genislikte, hizalama
     snap olmadan da duzgun duruyor. */
  scrollbar-width:none; -ms-overflow-style:none;
  /* Kartlar rayin tamamina sigdiginda ekranin ortasinda durur; sigmadiginda
     "safe" sayesinde basa yaslanir, yoksa merkezleme ilk karti erisilemez
     bir tasmaya itiyor. Bosluk iki yanda esit: aksi halde ortalama sayfanin
     ortasina degil, asimetrik ic kutunun ortasina oturuyor. */
  justify-content:safe center;
  padding-inline:24px;
}
.hstrip__track::-webkit-scrollbar{ display:none; }

.hcard{
  flex:0 0 auto;
  width:clamp(168px,18vw,240px);
}
.hcard a{
  position:relative; display:block;
  aspect-ratio:1/1; border-radius:var(--r-m); overflow:hidden;
  text-decoration:none; color:#fff;
  background:#1A1A1C;
  outline-offset:3px;
  transition:transform .4s var(--ease);
}
.hcard a:hover{ transform:translateY(-4px); }
.hcard img{
  position:absolute; inset:0; width:100%; height:100%;
  /* Kadrajlar dikey cekildi, yuzey alt yarida: kare kirpmada orayi tut. */
  object-fit:cover; object-position:50% 64%; display:block;
  transition:transform 1s var(--ease);
}
.hcard a:hover img{ transform:scale(1.05); }
.hcard__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,7,.78) 0%, rgba(6,6,7,.12) 52%, rgba(6,6,7,0) 100%);
}
.hcard__t{
  position:absolute; left:12px; right:12px; bottom:11px;
  font-size:13px; font-weight:500; line-height:1.3; letter-spacing:-.015em;
}

/* Ok tuşları: yalnızca işaretleyici cihazlarda. Dokunmatikte parmakla
   kaydırmak zaten doğal olduğu için yer kaplamalarına gerek yok. */
.hstrip__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:999px;
  display:none; align-items:center; justify-content:center;
  border:1px solid rgba(245,245,247,.16);
  background:rgba(6,6,7,.62); color:#F5F5F7;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  cursor:pointer; padding:0;
  transition:background .25s var(--ease), opacity .25s var(--ease);
}
.hstrip__nav svg{ width:19px; height:19px; }
.hstrip__nav:hover{ background:rgba(6,6,7,.86); }
.hstrip__nav[disabled]{ opacity:0; pointer-events:none; }
.hstrip__nav--prev{ left:14px; }
.hstrip__nav--next{ right:14px; }

@media (hover:hover) and (pointer:fine){
  .hstrip__nav{ display:flex; }
}

/* Alcak ekranlarda (dizustu 768-860px) hero katlamayi asmasin:
   kart kuculur, baslik biraz iner. */
/* Kartlar buyudugu icin hero dikeyde siki. 940px altindaki ekranlarda
   basligi bir tik kucultup serit icin yer aciyoruz; katlamanin altinda
   yarim kalmis kart birakmak istemiyoruz. */
@media (min-width:861px) and (max-height:940px){
  .hero{ min-height:0; }
  .hero__title{ font-size:clamp(2.3rem,4.6vw,3.4rem); }
  .hero__lede{ margin-top:16px; }
  .hero__actions{ margin-top:22px; }
  .hstrip{ padding-top:14px; }
}

/* ── Kesit diyagramı ───────────────────────────────────── */

.cross{ margin:0 0 clamp(56px,7vw,88px); }
.cross__svg{ width:100%; height:auto; font-family:var(--f-body); }
.cross__t{ fill:var(--ink); font-size:15px; font-weight:500; letter-spacing:-.01em; }
.cross__s{ fill:var(--ink-3); font-size:13px; letter-spacing:-.005em; }

.cross.in .cross__layer{ animation:layerIn .8s var(--ease) both; }
.cross.in .cross__layer:nth-of-type(2){ animation-delay:.1s; }
.cross.in .cross__leads,
.cross.in .cross__labels{ animation:fadeIn .7s var(--ease) .55s both; }
.cross.in .cross__drop{ animation:dropIn .9s var(--ease) .8s both; }

.cross__legend{ display:none; list-style:none; margin:22px 0 0; padding:0; }
.cross__legend li{
  display:grid; grid-template-columns:auto 1fr; gap:0 12px;
  padding:13px 0; border-top:1px solid var(--hair);
}
.cross__legend strong{ font-size:15px; font-weight:600; letter-spacing:-.015em; }
.cross__legend em{ grid-column:2; font-style:normal; font-size:13px; color:var(--ink-3); }
.cross__sw{ width:14px; height:14px; margin-top:4px; border-radius:3px; border:1px solid var(--hair); }
.cross__sw--film{ background:linear-gradient(135deg,#E4F0FA,#FFFFFF); }
.cross__sw--glue{ background:#ECECEF; }
.cross__sw--base{ background:#CFC8BA; }
@keyframes layerIn{ from{ opacity:0; transform:translateY(16px); } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-22px); } }

.claims{
  list-style:none; margin:0; padding:0;
  display:grid; gap:28px;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair);
  padding-top:34px;
}
.claims li{ font-size:16px; line-height:1.5; color:var(--ink-2); }
.claims strong{ display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }

/* ── Önce / Sonra ──────────────────────────────────────── */

.compare{ margin:0; }
.compare__stage{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-l);
  overflow:hidden;
  background:#EFEBE4;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  /* pan-y: dikey kaydirma tarayicida kalir, yatay surukleme bize gelir. */
  touch-action:pan-y;
  cursor:ew-resize;
  /* Surukleme sirasinda metin secimi / uzun basma menusu acilmasin. */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.compare__fill{ position:absolute; inset:0; width:100%; height:100%; }

.compare__side{ position:absolute; inset:0; }
.compare__side--before{
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  filter:contrast(.86) brightness(.93) saturate(.8);
}
.compare__side--after{
  clip-path:inset(0 0 0 var(--pos));
  filter:contrast(1.08) saturate(1.06);
}

/* Kaplamasız taraf: mat, tozlu, ışığı dağıtan yüzey */
.compare__matte{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(150,142,124,.34), rgba(120,112,96,.42)),
    linear-gradient(to bottom, rgba(128,120,104,.14), rgba(92,86,74,.24));
  mix-blend-mode:multiply;
}
/* Kaplı taraf: tavan ışığının yumuşak yansıması — keskin bir parlaklık şeridi değil */
.compare__gloss{
  position:absolute; inset:0;
  background:
    radial-gradient(44% 58% at 31% -6%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%),
    radial-gradient(30% 40% at 74% 106%, rgba(214,240,255,.3), rgba(255,255,255,0) 74%),
    radial-gradient(22% 26% at 88% 24%, rgba(255,255,255,.16), rgba(255,255,255,0) 76%),
    linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0) 36%, rgba(28,32,38,.15));
}

.compare__tag{
  position:absolute; top:20px; z-index:3;
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px;
  background:rgba(6,6,7,.55); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.compare__tag--l{ left:20px; }
.compare__tag--r{ right:20px; }

.compare__handle{
  position:absolute; top:0; bottom:0; left:var(--pos);
  z-index:4; width:2px; margin-left:-1px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.compare__handle i{
  position:absolute; inset:0;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 18px rgba(0,0,0,.35);
}
.compare__handle svg{
  position:relative; width:22px; height:22px;
  padding:10px; box-sizing:content-box;
  border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

.compare__range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.compare__range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:100%; }
.compare__range::-moz-range-thumb{ width:56px; height:400px; border:0; opacity:0; }
.compare__range:focus-visible{ opacity:1; outline-offset:-4px; }

.compare__cap{
  margin:20px auto 0; text-align:center;
  font-size:13.5px; color:#86868B; max-width:560px;
}
.compare__cap a{ color:#C7C7CC; }

/* ── Kartlar ───────────────────────────────────────────── */

.grid{ display:grid; gap:20px; }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--paper);
  border-radius:var(--r-m);
  padding:30px 26px 32px;
  border:1px solid rgba(0,0,0,.05);
}
.card__icon{ display:block; width:32px; height:32px; color:var(--ink); margin-bottom:22px; }
.card__icon svg{ width:100%; height:100%; }
.card h3{
  font-family:var(--f-display);
  font-size:18px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px;
}
.card p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); }

.card--heal .heal__scratch{
  stroke-dasharray:20; stroke-dashoffset:0;
  transition:stroke-dashoffset .1s;
}
.card--heal.is-healing .heal__scratch{ animation:heal 2.2s var(--ease); }
@keyframes heal{
  0%{ stroke-dashoffset:0; opacity:1; }
  45%{ stroke-dashoffset:0; opacity:1; }
  85%{ stroke-dashoffset:20; opacity:.35; }
  100%{ stroke-dashoffset:20; opacity:0; }
}

/* ── Yüzey kartları ────────────────────────────────────── */

.tile{ border-radius:var(--r-m); overflow:hidden; background:var(--mist); }
.tile__vis{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.tile__surface{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.tile:hover .tile__surface{ transform:scale(1.04); }
/* Parlaklık: düz bir ışık şeridi değil, yüzeye düşen pencere yansıması.
   Her kartta konumu farklı — aynı damga üç kez basılmış gibi durmasın. */
.tile__gloss{
  position:absolute; inset:0;
  background:
    radial-gradient(52% 30% at var(--gx,27%) var(--gy,15%), rgba(255,255,255,.32), rgba(255,255,255,0) 70%),
    radial-gradient(34% 20% at var(--gx2,76%) var(--gy2,78%), rgba(255,255,255,.13), rgba(255,255,255,0) 72%),
    linear-gradient(to bottom, rgba(255,255,255,.09), rgba(255,255,255,0) 44%, rgba(0,0,0,.09));
  transition:opacity .6s var(--ease);
}
.tile:nth-child(2) .tile__gloss{ --gx:64%; --gy:21%; --gx2:22%; --gy2:80%; }
.tile:nth-child(3) .tile__gloss{ --gx:38%; --gy:68%; --gx2:80%; --gy2:18%; }
.tile:hover .tile__gloss{ opacity:.72; }
.tile__body{ padding:26px 26px 30px; }
.tile__body h3{
  font-family:var(--f-display);
  font-size:21px; font-weight:600; letter-spacing:-.024em; margin:0 0 8px;
}
.tile__body p{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-2); }
.tile__more{
  display:inline-block; margin-top:16px;
  font-size:14.5px; font-weight:500; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.tile__more:hover{ border-bottom-color:currentColor; }

.foot-note{
  margin:40px 0 0; padding-top:28px;
  border-top:1px solid var(--hair);
  font-size:15px; color:var(--ink-2); max-width:var(--w-text);
}

/* ── Uygulama videoları ────────────────────────────────── */

/* YouTube oynatıcısı ancak tıklanınca yüklenir: sayfa açılışında
   dışarıya istek gitmez, çerez düşmez. */
/* Shorts dikey çekilir: kart 9:16, yoksa videonun etrafı siyah bantla dolar. */
.grid--vid{ grid-template-columns:repeat(4,1fr); }

.vid{
  position:relative; display:block; width:100%; padding:0;
  aspect-ratio:9/16; border:0; border-radius:var(--r-m); overflow:hidden;
  background:#1A1A1C; color:#fff; cursor:pointer;
  font-family:inherit; text-align:left;
}
.vid img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0;
  transition:transform 1s var(--ease), opacity .4s;
}
.vid:hover img{ transform:scale(1.04); }
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.vid__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 42%);
}
.vid__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:var(--ink);
  box-shadow:0 8px 28px rgba(0,0,0,.4);
  transition:transform .35s var(--ease);
}
.vid:hover .vid__play{ transform:translate(-50%,-50%) scale(1.08); }
.vid__play svg{ width:20px; height:20px; margin-left:3px; }
.vidcard{ display:flex; flex-direction:column; gap:12px; }
.vidcard__t{
  margin:0; font-size:14.5px; font-weight:500;
  letter-spacing:-.015em; line-height:1.35; color:var(--ink);
}
.vid__fb{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding:16px; color:#fff; text-decoration:none;
  font-size:14px; font-weight:500; line-height:1.35; letter-spacing:-.015em;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.vid__fb:hover{ text-decoration:underline; text-underline-offset:3px; }

.vid__badge{
  position:absolute; top:14px; left:14px;
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px;
  background:rgba(6,6,7,.6); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

.ulink{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair); }
.ulink:hover{ text-decoration-color:currentColor; }

/* ── Hizmet bölgeleri ──────────────────────────────────── */

.areas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.areas li{
  font-size:15px; letter-spacing:-.01em; color:var(--ink-2);
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--hair); background:var(--paper);
}

/* ── Sıkça sorulan sorular ─────────────────────────────── */

.faq{ border-top:1px solid var(--hair); max-width:860px; }
.faq__i{ border-bottom:1px solid var(--hair); }
.faq__i summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:20px;
  padding:22px 0;
  font-family:var(--f-display);
  font-size:clamp(1.05rem,1.7vw,1.22rem); font-weight:600; letter-spacing:-.02em;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::after{
  content:""; flex:0 0 auto; margin-left:auto; margin-top:.4em;
  width:12px; height:12px;
  border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg); transform-origin:60% 60%;
  transition:transform .3s var(--ease);
}
.faq__i[open] summary::after{ transform:rotate(-135deg); }
.faq__i summary:hover{ color:#000; }
.faq__a{ padding:0 0 24px; max-width:70ch; }
.faq__a p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-2); }

/* ── Adımlar ───────────────────────────────────────────── */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
}
.step{ padding:26px 22px 0 0; border-top:1px solid rgba(255,255,255,.16); }
.step__n{
  display:block; margin-bottom:16px;
  font-family:var(--f-display);
  font-size:13px; font-weight:600; letter-spacing:.02em; color:#6E6E73;
  font-variant-numeric:tabular-nums;
}
.step h3{
  font-family:var(--f-display);
  font-size:17px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px; color:#F5F5F7;
}
.step p{ margin:0; font-size:14.5px; line-height:1.5; color:#8E8E93; }

/* ── Garanti ───────────────────────────────────────────── */

.warranty{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.warranty__hero{ display:flex; align-items:baseline; gap:20px; }
.warranty__num{
  font-family:var(--f-display);
  font-size:clamp(7rem,15vw,12.5rem);
  font-weight:600; line-height:.82; letter-spacing:-.06em;
}
.warranty__unit{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:600; letter-spacing:-.03em; margin:0;
}
.warranty__sub{ margin:6px 0 0; font-size:15px; color:var(--ink-2); }
.warranty__link{display:inline-block;margin-top:12px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}

.warranty__side{ display:grid; gap:26px; padding-top:12px; }
.fact{ border-top:1px solid var(--hair); padding-top:20px; }
.fact h3{
  font-family:var(--f-display);
  font-size:17px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px;
}
.fact p{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-2); }

/* ── Garanti sayfası ───────────────────────────────────── */

.g-sec{ scroll-margin-top:var(--nav-h); padding-block:clamp(56px,7vw,88px); }
.g-narrow > *{ max-width:760px; }
.g-h2{ font-family:var(--f-display); font-size:clamp(1.7rem,3vw,2.2rem); font-weight:600; letter-spacing:-.03em; margin:0 0 28px; }

/* Üst bölüm: başlık + sorgulama formu */
.g-top{
  color:#F5F5F7;
  background:
    linear-gradient(90deg, rgba(6,6,7,.88) 0%, rgba(6,6,7,.62) 50%, rgba(6,6,7,.4) 100%),
    var(--void) url(assets/foto/siyah-mermer-tezgah-1400.webp) center 60% / cover no-repeat;
}
@media (max-width:860px){
  .g-top{ background-image:linear-gradient(180deg, rgba(6,6,7,.72), rgba(6,6,7,.88)), url(assets/foto/siyah-mermer-tezgah-700.webp); }
}
.g-top__in{
  display:grid; grid-template-columns:1fr 400px; gap:clamp(32px,6vw,80px); align-items:center;
  padding-top:calc(var(--nav-h) + clamp(48px,7vw,88px)); padding-bottom:clamp(48px,7vw,88px);
}
.g-top__tag{ display:inline-block; margin:0; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:13px; font-weight:600; }
.g-top__title{ font-family:var(--f-display); font-size:clamp(2.4rem,5.4vw,4rem); font-weight:600; letter-spacing:-.045em; line-height:1.02; margin:18px 0 0; }
.g-top__lede{ max-width:44ch; margin:16px 0 0; font-size:17px; line-height:1.55; color:#A1A1A6; }

.g-form{ padding:28px; border-radius:var(--r-l); background:var(--paper); color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.g-form label{ display:block; font-size:14px; font-weight:600; margin-bottom:10px; }
.g-form input{
  display:block; width:100%; height:52px; margin-bottom:12px; padding:0 18px; border-radius:var(--r-s);
  border:1px solid var(--hair); background:var(--mist); color:var(--ink);
  font:500 17px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.05em; text-transform:uppercase;
}
.g-form input::placeholder{ color:var(--ink-3); }
.g-form input:focus{ outline:none; border-color:var(--ink); background:#fff; }
.g-form__hint{ margin:14px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-2); }

/* Koşul sekmeleri */
.g-tabs{ display:flex; gap:4px; padding:4px; margin-bottom:24px; border-radius:999px; background:var(--mist); width:max-content; max-width:100%; overflow-x:auto; }
.g-tabs button{
  flex:0 0 auto; height:40px; padding:0 18px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  font:500 15px var(--f-body); color:var(--ink-2); transition:background-color .2s, color .2s;
}
.g-tabs button[aria-selected="true"]{ background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }

.g-rows{ margin:0; }
.g-rows div{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--hair); }
.g-rows div:first-child{ border-top:1px solid var(--hair); }
.g-rows dt{ font-weight:600; }
.g-rows dd{ margin:0; color:var(--ink-2); line-height:1.5; }

.g-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.g-list li{ position:relative; padding:14px 0 14px 32px; border-bottom:1px solid var(--hair); font-size:16px; line-height:1.5; color:var(--ink-2); }
.g-list li::before{ position:absolute; left:4px; top:14px; font-weight:700; }
.g-list--no li::before{ content:"✕"; color:#C0392B; }
.g-list--ok li::before{ content:"✓"; color:#1B7A43; }
.g-list strong{ color:var(--ink); font-weight:600; }

.g-contact{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:36px; padding:20px 24px; border-radius:var(--r-m); background:var(--paper); }
.g-contact p{ margin:0; font-weight:500; }

@media (max-width:860px){
  .g-top__in{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .g-form{ padding:22px; }
  .g-rows div{ grid-template-columns:1fr; gap:4px; }
  .g-tabs{ width:100%; }
  .g-tabs button{ flex:1 1 0; padding:0 10px; font-size:14px; }
  .g-contact .btn{ width:100%; }
}

/* ── İletişim ──────────────────────────────────────────── */

.contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,80px); align-items:start; }
.contact__direct{ margin-top:40px; padding-top:28px; border-top:1px solid var(--hair); }
.bigphone{
  font-family:var(--f-display);
  font-size:clamp(2rem,4.4vw,3rem); font-weight:600; letter-spacing:-.035em;
  text-decoration:none; display:inline-block;
}
.contact__hours{ margin:8px 0 0; font-size:15px; color:var(--ink-2); }
.contact__links{ display:flex; flex-wrap:wrap; gap:20px; margin:18px 0 0; }
.contact__links a{
  font-size:14.5px; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--hair); transition:color .2s, border-color .2s;
}
.contact__links a:hover{ color:var(--ink); border-bottom-color:currentColor; }

.quote{
  background:var(--mist);
  border-radius:var(--r-l);
  padding:32px;
}
.quote__set{ border:0; margin:0 0 24px; padding:0; }
.quote__set legend{
  padding:0; margin-bottom:12px;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.opt{ text-transform:none; letter-spacing:0; font-weight:400; }

.seg{ display:flex; flex-wrap:wrap; gap:8px; }
.seg__b{
  font-family:inherit; font-size:14.5px; letter-spacing:-.01em;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  background:var(--paper); color:var(--ink-2);
  border:1px solid var(--hair);
  transition:background-color .2s, color .2s, border-color .2s, transform .3s var(--ease);
}
.seg__b:hover{ border-color:#B0B0B6; color:var(--ink); }
.seg__b:active{ transform:scale(.96); }
.seg__b.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.quote__in{
  width:100%; height:48px; padding:0 16px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hair); border-radius:var(--r-s);
  transition:border-color .2s;
}
.quote__in::placeholder{ color:var(--ink-3); }
.quote__in:hover{ border-color:#B0B0B6; }

.quote__prev{
  margin:16px 0 0; font-size:13px; line-height:1.5; color:var(--ink-3);
}
.quote__prev span{ color:var(--ink-2); }

/* ── Blog ──────────────────────────────────────────────── */

.blog-top{ padding-top:calc(var(--nav-h) + clamp(52px,7vw,88px)); }

.crumbs{ display:flex; gap:10px; align-items:center; margin-bottom:26px; font-size:13.5px; color:var(--ink-3); }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }

.h1-page{
  font-family:var(--f-display);
  font-size:clamp(2.3rem,5.6vw,4rem);
  line-height:1.05; letter-spacing:-.036em; font-weight:600; margin:0;
}

.posts{ list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:repeat(2,1fr); }
.post a{
  display:flex; flex-direction:column; height:100%;
  background:var(--paper); border-radius:var(--r-m);
  text-decoration:none; overflow:hidden;
  border:1px solid rgba(0,0,0,.05);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.post a:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.07); }

/* Kapak: yazinin kendi giris gorseli. alt="" bilerek bos - baglantinin
   erisilebilir adi zaten basliktan geliyor, gorsel onu tekrarlamasin. */
.post__cover{
  position:relative; display:block;
  aspect-ratio:16/10; background:var(--mist);
}
.post__cover img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 1s var(--ease);
}
.post a:hover .post__cover img{ transform:scale(1.04); }

.post__body{ display:flex; flex-direction:column; flex:1; padding:26px 28px 28px; }

.foot-note--center{ margin-inline:auto; text-align:center; }

/* Koyu bolumdeki blog kartlari beyaz kaliyor: rengi bolumden miras alan
   iki ogeyi geri koyu yapmak yetiyor. Alt not ise koyu zemine uyuyor. */
.section--dark .post h2,
.section--dark .post h3,
.section--dark .post__go{ color:var(--ink); }

.section--dark .foot-note{ border-top-color:rgba(245,245,247,.16); color:#A1A1A6; }
.section--dark .foot-note .ulink{ color:#F5F5F7; text-decoration-color:rgba(245,245,247,.38); }
.section--dark .foot-note .ulink:hover{ text-decoration-color:currentColor; }
.post__meta{ margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.post h2,
.post h3{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,2.1vw,1.5rem); font-weight:600; letter-spacing:-.026em;
  line-height:1.2; margin:0 0 12px;
}
.post__ex{ margin:0 0 20px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.post__go{ margin-top:auto; font-size:14.5px; font-weight:500; }

.article{ padding-top:calc(var(--nav-h) + clamp(44px,6vw,72px)); }
.article__head{ max-width:var(--w-text); margin-bottom:clamp(36px,5vw,52px); }
.article__meta{ margin:20px 0 0; font-size:13.5px; color:var(--ink-3); }

/* Yazı giriş görseli. Metin sütunundan (68ch) biraz geniş durur ki
   sayfa tek sütun bir duvar gibi okunmasın. */
.article__media{
  margin:0 0 clamp(34px,4.6vw,48px);
  max-width:900px;
}
.article__media img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-m);
  background:var(--hair);
}

/* Akış boşlukları alt kenar boşluğuyla kuruluyor: bitişik kenar boşlukları
   birleştiği için başlık öncesi/sonrası mesafe kendiliğinden doğru çıkıyor.
   (Önceki `> * + *` kuralı `.prose p` tarafından eziliyordu.) */
.prose{ max-width:68ch; }
.prose p{ margin:0 0 22px; font-size:17.5px; line-height:1.65; color:#3A3A3E; }
.prose h2{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:600; letter-spacing:-.026em;
  line-height:1.2; margin:52px 0 16px; color:var(--ink);
}
.prose h3{
  font-family:var(--f-display);
  font-size:1.15rem; font-weight:600; letter-spacing:-.02em; margin:36px 0 12px; color:var(--ink);
}
.prose ul,.prose ol{ margin:0 0 22px; padding-left:22px; }
.prose > *:last-child{ margin-bottom:0; }
.prose li{ font-size:17.5px; line-height:1.6; color:#3A3A3E; margin-top:10px; }
.prose li::marker{ color:var(--ink-3); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair); }
.prose a:hover{ text-decoration-color:currentColor; }

.callout{
  margin-top:34px; padding:24px 26px;
  background:var(--mist); border-radius:var(--r-m);
}
.callout p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-2); }
.callout strong{ display:block; color:var(--ink); margin-bottom:6px; font-weight:600; }

.cta-band{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding:clamp(30px,4vw,44px);
  background:var(--mist); border-radius:var(--r-l);
}
.cta-band .h2{ font-size:clamp(1.4rem,2.6vw,2rem); }
.cta-band .lede{ font-size:16px; margin-top:10px; }
.cta-band .btn{ flex:0 0 auto; }

.more-posts{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.more-posts a{
  display:block; text-decoration:none; padding:22px 0 0;
  border-top:1px solid var(--hair);
  font-family:var(--f-display); font-size:16px; font-weight:600; letter-spacing:-.02em; line-height:1.3;
}
.more-posts a:hover{ color:#000; }

/* ── Footer ────────────────────────────────────────────── */

.foot{ background:var(--mist); border-top:1px solid var(--hair); padding:56px 0 40px; }
.foot__top{ display:grid; grid-template-columns:1fr 2fr; gap:40px; }
.brand--foot{ color:var(--ink); align-self:start; }
.foot__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.foot__nav h3{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;
}
.foot__nav a{
  display:block; font-size:14px; color:var(--ink-2);
  text-decoration:none; padding:5px 0; transition:color .2s;
}
.foot__nav a:hover{ color:var(--ink); }

.foot__bar{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.foot__bar p{ margin:0; font-size:12.5px; color:var(--ink-3); }
.foot__credit a{
  color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--hair);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot__credit a:hover{ color:var(--ink); border-bottom-color:currentColor; }

/* ── WhatsApp (mobil) ──────────────────────────────────── */

.fab{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:52px; height:52px; border-radius:999px;
  display:none; align-items:center; justify-content:center;
  background:var(--ink); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.fab svg{ width:25px; height:25px; }
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }

/* ── Scroll reveal ─────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

/* .in gelince .reveal.in devralsin diye :not(.in) sart: esit ozgullukte
   sonra geldigi icin bu kural bitis halini eziyordu. */
.hero .reveal:not(.in){ transform:translateY(26px); }
.hero__title .eyebrow.in{ transition-delay:.02s; }
.hero__title .line:nth-child(2).in{ transition-delay:.09s; }
.hero__title .line:nth-child(3).in{ transition-delay:.17s; }
.hero__title .line:nth-child(4).in{ transition-delay:.25s; }
.hero__lede.in{ transition-delay:.3s; }
.hero__actions.in{ transition-delay:.38s; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width:1000px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--vid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .step{ padding-bottom:26px; }
  .contact{ grid-template-columns:1fr; }
  .warranty{ grid-template-columns:1fr; }
  .claims{ grid-template-columns:1fr; gap:20px; }
}

@media (max-width:860px){
  .nav__links,
  .nav__check,
  .nav__cta{ display:none; }
  .nav__toggle{ display:block; }
  .grid--3{ grid-template-columns:1fr; }
  .posts{ grid-template-columns:1fr; }
  .more-posts{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .foot__top{ grid-template-columns:1fr; }
  .foot__nav{ grid-template-columns:repeat(2,1fr); }
  .fab{ display:flex; }
  /* Diyagram yana kaydırılmaz: SVG sağdan kırpılır, etiketler alta listelenir */
  .cross__svg{ width:100%; height:auto; }
  .cross__leads,
  .cross__labels{ display:none; }
  .cross__legend{ display:block; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .section{ padding:72px 0; }
  .wrap{ padding-inline:20px; }
  .grid--4{ grid-template-columns:1fr; }
  /* Dikey videolar telefonda tek sütunda devasa olur; ikili kalsın */
  .grid--vid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .vidcard__t{ font-size:13px; }
  .vidcard{ gap:9px; }
  .vid__play{ width:46px; height:46px; }
  .steps{ grid-template-columns:1fr; }
  .step{ padding:22px 0; }
  /* Telefonda hero sabit bir yukseklige zorlanmiyor. Zorlandiginda artan
     boslugu .hstrip'in margin-top:auto'su yutup seridi ekranin dibine
     itiyor, metinle kartlar arasinda kocaman bir delik kaliyordu. Icerik
     kadar yuksek olunca kartlar metnin hemen altinda duruyor; altta bir
     sonraki bolum gorunup kaydirma isareti de veriyor. */
  .hero{
    min-height:0;
    padding-top:calc(var(--nav-h) + clamp(16px,2.6vh,28px));
    padding-bottom:clamp(20px,3vh,30px);
  }
  .hero__actions{ flex-direction:column; gap:16px; margin-top:clamp(20px,3vh,30px); }
  .hero__actions .btn{ width:100%; max-width:340px; }
  .hero__title{ font-size:clamp(2.05rem,8vw,2.6rem); }
  /* Ust etiket iki satira dusuyordu; bir satira sigacak kadar kisildi. */
  .hero__title .eyebrow{ font-size:11px; letter-spacing:.11em; margin-bottom:14px; }
  .hero__lede{ margin-top:clamp(14px,2.2vh,24px); font-size:1.02rem; line-height:1.58; }
  .hstrip{ padding-top:clamp(24px,4.2vh,40px); }
  .hstrip__track{ padding-inline:16px; gap:10px; }
  .hcard{ width:146px; }
  .hstrip__head{ padding-inline:16px; margin-bottom:9px; }
  .brand__logo{ height:28px; }
  .brand--foot .brand__logo{ height:46px; }
  .compare__stage{ aspect-ratio:4/3; }
  .compare__tag{ top:14px; font-size:10px; padding:6px 10px; }
  .compare__tag--l{ left:14px; }
  .compare__tag--r{ right:14px; }
  .quote{ padding:24px; }
  .warranty__hero{ flex-direction:column; gap:6px; }
  .foot__bar{ flex-direction:column; gap:6px; }
}

/* Kisa telefon ekranlarinda (<=650px) baslik dort satira dustugu icin
   serit alttan tasiyordu; olculer bir tik daha kisiliyor. Modern
   telefonlarin cogu bu esigin uzerinde oldugu icin oralarda ferah kaliyor. */
@media (max-width:620px) and (max-height:650px){
  .hero__lede{ font-size:1rem; line-height:1.45; }
  .hero__actions{ gap:12px; }
  .hcard{ width:130px; }
  .hstrip{ padding-top:clamp(14px,2.4vh,22px); }
  .hstrip__head{ margin-bottom:7px; }
}

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