/* ═══════════════════════════════════════════════
   GaziantepDepoLife — Ana Stil Dosyası
   Font: Manrope · Referanslar: Özgül (navbar),
   stelll (hero), trailersp (yorumlar), exunay (footer)
   ═══════════════════════════════════════════════ */

:root {
  --red: #c4231f;
  --red-deep: #9a1815;
  --red-soft: #fdecec;
  --amber: #c9973b;
  --ink: #1a2028;
  --dark: #0d1013;
  --dark-2: #14181d;
  --body: #5a6472;
  --muted: #6a727f;        /* açık zeminde ikincil metin — AA (4.5:1) sınırını geçer */
  --muted-inv: #98a1af;    /* koyu zeminde ikincil metin */
  --line: #e8ebef;
  --paper: #f2f5f8;
  --tint: #f8f9fb;        /* Süreç ve Yorumlar bölümlerinin ortak zemini */
  --white: #ffffff;
  --f-gray: #b0b7bd;      /* exunay footer gümüş grisi */
  --f-gray-deep: #a4abb2;
  --radius: 5px;
  --font: "Manrope", system-ui, sans-serif;
  --shadow-soft: 0 12px 44px rgba(26, 32, 40, .09);
  --shadow-card: 0 4px 22px rgba(26, 32, 40, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--body);
  background: var(--white);
  line-height: 1.7;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); line-height: 1.18; }
/* Navbar ile aynı ızgara: iki tarafta da kenarlar birebir hizalanır */
.container { max-width: 1440px; margin: 0 auto; padding: 0 36px; }
.section { padding: 104px 0; }

/* ───────── Başlık düzeni (cevikbas/classen: ince + kalın karışımı) ───────── */
.eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--muted);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1.5px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 12px;
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
/* Tüm bölüm başlıkları: flow-head yapısı (36px/300, gri gradyan metin) */
.section-head h2 {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.32;
  padding-bottom: 4px;
  background: linear-gradient(90deg, #8a8f96 0%, #1a2028 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
  margin-left: auto; margin-right: auto;
}
.section-head h2 em { font-style: normal; font-weight: inherit; }
.section-desc { margin-top: 20px; font-size: 16px; color: var(--muted); font-weight: 400; }
.section-head--light h2 { background: linear-gradient(90deg, #8a8f96 0%, #e8ebef 100%); -webkit-background-clip: text; background-clip: text; }
.section-head--light .section-desc { color: var(--muted-inv); }
.section-head--light .eyebrow { color: var(--muted-inv); }

/* exunay ".themeTitle.verticalTitle": başlık solda, açıklama sağda, alta hizalı */
.section-head--split {
  max-width: none; margin: 0 0 64px; text-align: left;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 37px;
}
.section-head--split h2 {
  margin-left: 0; margin-right: 0;
  max-width: 620px;
}
.section-head--split .section-desc {
  margin-top: 0; flex: 0 1 480px;
  font-size: 18px; font-weight: 300; line-height: 27px;
}

/* Sola dayalı, açıklama başlığın altında — başlık tüm genişliği kullanabilir */
.section-head--left {
  max-width: none; margin: 0 0 64px; text-align: left;
}
.section-head--left h2 { margin-left: 0; margin-right: 0; max-width: none; }
.section-head--left .section-desc {
  margin-top: 18px; max-width: 820px;
  font-size: 18px; font-weight: 300; line-height: 27px;
}

/* ───────── Butonlar ───────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px; line-height: 1;
  padding: 17px 32px;
  border-radius: 5px;
  transition: .25s;
  cursor: pointer;
}

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14px;
  color: var(--ink);
  /* Dokunma alanı 24 → 36px; negatif dış boşlukla yerleşim değişmez */
  padding: 6px 0; margin: -6px 0;
}
.text-link i { font-style: normal; color: var(--red); transition: transform .25s; }
.text-link:hover i { transform: translateX(5px); }

/* ═══════════ NAVBAR — Özgül referansı ═══════════ */
/* Hero'nun üstüne binen cam bar (hero CTA ile aynı cam formülü) */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
}
/* Cam katman ::before'a alındı: header'ın kendisi filtre uygulasaydı
   içindeki açılır panelin backdrop-filter'ı çalışmazdı (iç içe backdrop root) */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(103,103,103,.2);      /* açılır menü paneliyle aynı cam */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* Koyu sayfalarda (medya): altındaki bölümle aynı renk, ama cam yapısı korunuyor.
   Ayırıcı şerit yok — header ile sayfa tek parça görünsün. */
.site-header--dark::before {
  background: rgba(13,16,19,.72);   /* --dark ile aynı ton */
}
.nav-wrap {
  max-width: 1440px; margin: 0 auto;
  padding: 0 36px;
  display: flex; align-items: center;
  height: 96px;
  gap: 20px;
}
/* trailersp logo döngüsü: yazı sağdan silinir → amblem ortaya kayar →
   amblem döner, yazı soldan geri yazılır → üzerinden metalik parlama geçer */
.nav-logo {
  display: flex; align-items: center; gap: 13px; margin-right: auto;
  --logo-shift: 96px;      /* amblemin ortaya kayma mesafesi */
  --logo-loop: 6.26s;     /* referans GIF: 119 kare, toplam 6260ms */
}
.nav-logo-mark {
  position: relative; flex: none; display: block;
  animation: logoMarkTour var(--logo-loop) cubic-bezier(.65,0,.35,1) 1 both;
}
.nav-logo img { width: 62px; height: 62px; object-fit: contain; }
/* Amblem üzerinde gezen parlama — logonun kendi silüetiyle maskeli */
.nav-logo-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-mask: url("../img/depolife.svg") center / contain no-repeat;
  mask: url("../img/depolife.svg") center / contain no-repeat;
  animation: logoShine var(--logo-loop) linear 1 both;
  pointer-events: none;
}
.nav-logo-text {
  font-size: 21px; line-height: 1.05; font-weight: 800;
  display: inline-block;
  color: #fff;
  /* Parlama bandı dışında tamamı beyaz kalır */
  background: linear-gradient(100deg, #fff 0%, #fff 42%, #c3cdda 50%, #fff 58%, #fff 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Yalnızca sayfa açılışında bir tur — sürekli tekrarlamaz */
  animation:
    logoTextWipe var(--logo-loop) cubic-bezier(.4,0,.2,1) 1 both,
    logoShine var(--logo-loop) linear 1 both;
}
.nav-logo-text strong { font-weight: 800; }

/* Sıra kesin: yazı tamamen silinmeden amblem kımıldamaz,
   amblem yerine dönmeden yazı açılmaz — ikisi asla üst üste binmez */
/* Aşama yüzdeleri referans GIF'ten kare kare ölçüldü (6260ms üzerinden):
   duruş 0-1000 · yazı silinme 1000-1250 · amblem ortaya 1250-1580 ·
   bekleme 1580-2800 · dönüş 2800-3050 · yazı açılma 3050-3260 ·
   parlama 3470-4210 · duruş 4210-6260 */
@keyframes logoMarkTour {
  0%, 20%   { transform: translateX(0) scale(1); }
  25%       { transform: translateX(var(--logo-shift)) scale(1.04); }
  45%       { transform: translateX(var(--logo-shift)) scale(1.04); }
  49%, 100% { transform: translateX(0) scale(1); }
}
@keyframes logoTextWipe {
  0%, 16%   { clip-path: inset(0 0 0 0); }
  20%, 49%  { clip-path: inset(0 100% 0 0); }
  52%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes logoShine {
  0%, 55%     { background-position: 100% 0; }
  67%, 99.9%  { background-position: 0% 0; }
  100%        { background-position: 100% 0; }
}

.nav-menu { display: flex; align-items: center; gap: 46px; }
.nav-menu > a,
.nav-drop > a {
  font-weight: 600; font-size: 14px;
  color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0;
  white-space: nowrap;   /* dar masaüstünde menü başlıkları iki satıra düşmesin */
  transition: color .2s;
}
.nav-menu > a:hover,
.nav-drop > a:hover { color: rgba(255,255,255,.62); }
.nav-drop > a.has-ico svg { color: inherit; }

/* ── Hizmetler açılırı — stelll overlay menü davranışı:
   panel translateY(-20px) scale(.95) + opacity 0 → translateY(0) scale(1),
   .3s cubic-bezier(.4,0,.2,1); koyu cam zemin, satırlar hover'da 10px içeri ── */
.nav-drop { position: relative; display: flex; align-items: center; }
/* Şeffaf köprü: bar ile panel arasındaki boşlukta hover kopmasın */
.quick-menu {
  position: absolute; top: 100%; left: -35px;
  padding-top: 32px;
  visibility: hidden;
  pointer-events: none;
  transition: visibility .3s ease;
  z-index: 60;
}
.nav-drop:hover .quick-menu,
.nav-drop:focus-within .quick-menu { visibility: visible; pointer-events: auto; }
.quick-menu-panel {
  width: 304px; max-width: calc(100vw - 3rem);
  padding: 30px 35px;
  background: rgba(103,103,103,.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  transform: translateY(-20px) scale(.95);
  opacity: 0;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.nav-drop:hover .quick-menu-panel,
.nav-drop:focus-within .quick-menu-panel { transform: translateY(0) scale(1); opacity: 1; }
.quick-menu-nav { display: flex; flex-direction: column; gap: 20px; }
.quick-back { display: none; }   /* yalnızca mobil alt menüde kullanılır */
.quick-menu-item {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 400; line-height: 1.3;
  color: #fff;
  padding-left: 0;
  transition: all .3s ease;
}
.quick-menu-item:hover { padding-left: 10px; opacity: .8; }
.quick-menu-item img {
  width: 20px; height: 11px; flex: none;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.quick-menu-item:hover img { opacity: 1; visibility: visible; }

/* Sağ kart: zemin, logo yazısının gradyanı */
.nav-side {
  align-self: stretch;
  display: flex; flex-direction: column;
  /* Açık uç marka kırmızısı (--red) sabit, koyu uç bordoya çekildi */
  background: linear-gradient(115deg, #3d0908 0%, var(--red) 100%);
  min-width: 192px;
  margin-left: 24px;
  position: relative; z-index: 2;
}
/* Hero CTA ile aynı cam katman */
.nav-cta {
  position: relative; overflow: hidden;
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 18px;
  background: rgba(255,255,255,.02);   /* cam filmi gradyanı soldurmasın */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
}
/* Hover: renk değişimi yok — logodaki parlama bandı butonun üzerinden geçer */
.nav-cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.42) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 100% 0;
  transition: background-position .74s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.nav-cta:hover::after { background-position: 0 0; }
.nav-cta img { width: 28px; height: 16px; object-fit: contain; flex: none; }
.nav-cta span { font-weight: 600; font-size: 14px; line-height: 1.7; color: #fff; white-space: nowrap; }

/* stelll menu-w.svg düzeni: üç farklı boyda, sağa yaslı çubuk — dolgu sitenin gümüş gradyanı */
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 14px 10px;
  width: 54px;
}
.nav-burger span {
  display: block; height: 3px; margin-left: auto;
  background: linear-gradient(90deg, #e8ebef 0%, #8a8f96 100%);
  transition: width .3s, opacity .3s, transform .3s;
}
.nav-burger span:nth-child(1) { width: 15px; opacity: .8; }
.nav-burger span:nth-child(2) { width: 34px; margin-top: 5px; margin-bottom: 5px; }
.nav-burger span:nth-child(3) { width: 27px; opacity: .4; }
.nav-burger.open span { width: 26px; opacity: 1; }
.nav-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Açık zeminli sayfalarda (ör. Kurumsal): beyaz bar, kırmızı gradyanlı logo yazısı */
.site-header--light::before { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Üstü gri açılan sayfalarda (oda detayı) bar da o griye boyanır;
   yazı renkleri ve açılır menüler --light ile aynı kalır. */
.site-header--tint::before { background: var(--tint); }
/* Teklif Al butonuyla aynı kırmızı gradyan; yazı açılış animasyonu (wipe) korunur,
   beyaz zeminde anlamı kalmayan parlama bandı kaldırılır */
.site-header--light .nav-logo-text {
  background-image: linear-gradient(115deg, #3d0908 0%, var(--red) 100%);
  background-size: 100% 100%;
  background-position: 0 0;
  animation: logoTextWipe var(--logo-loop) cubic-bezier(.4,0,.2,1) 1 both;
}
/* Hizmetlerimiz ve Depolama Alanları başlıkları bir yere gitmez, yalnızca
   menüyü açar; href olmadığı için imleç ayrıca tanımlanıyor */
.nav-drop > a[role="button"] { cursor: pointer; }
.site-header--light .nav-menu > a,
.site-header--light .nav-drop > a { color: var(--ink); }
.site-header--light .nav-menu > a:hover,
.site-header--light .nav-drop > a:hover { color: var(--red); }
.site-header--light .nav-burger span { background: linear-gradient(90deg, #1a2028 0%, #8a8f96 100%); }
/* Beyaz zeminli sayfalarda cam panel de beyazlaşıp içindeki beyaz yazı okunmuyordu:
   panel koyulaştırılır, tipografi ve blur aynı kalır */
.site-header--light .quick-menu-panel { background: rgba(22,26,32,.72); }

/* ═══════════ HERO — stelll referansı ═══════════ */
.hero { position: relative; background: #0f0f0f; }
.hero-slides {
  position: relative;
  height: 920px;
  max-height: 100vh;      /* kısa ekranlarda taşmasın */
  overflow: hidden;
}
/* Sürüklerken yatay hareket slider'a, dikey kaydırma sayfada kalsın */
.hero { touch-action: pan-y; }
/* Metin normalde seçilebilir/kopyalanabilir; yasak yalnız sürükleme süresince */
.hero.is-dragging, .rooms-slider.is-dragging, .services-slider.is-dragging {
  -webkit-user-select: none; user-select: none;
}
/* stelll: Swiper effect:"slide" — yatay kayma (süre JS'teki SLIDE_MS ile aynı olmalı) */
.hero-slide {
  position: absolute; inset: 0;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.hero-slide.is-active { transform: translateX(0); visibility: visible; z-index: 2; }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
.hero-slide.is-active .hero-bg { transform: scale(1); }
/* JS varsa ilk açılışta da zoom çalışsın (geçişler ilk render'da tetiklenmez) */
.js .hero .hero-slide.is-active .hero-bg { transform: scale(1.05); }
.js .hero.is-ready .hero-slide.is-active .hero-bg { transform: scale(1); }

/* ── Video arka plan ──
   Video, .hero-bg'nin içine konur; background-image kapak olarak altında
   kalır, böylece video yüklenene kadar ekran boş görünmez. */
.hero-bg > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Kapak görselinden videoya yumuşak geçiş */
  opacity: 0; transition: opacity .6s ease;
}
.hero-bg > video.hazir { opacity: 1; }
/* Dar ekranda ve hareketi azalt ayarında video indirilmez; kapak kalır */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .hero-bg > video { display: none; }
}
/* stelll: dikey karartma (üst %30 → alt %60) + okunabilirlik için hafif sol koyuluk */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.6) 100%),
    linear-gradient(90deg, rgba(15,15,15,.68) 0%, rgba(15,15,15,.34) 45%, rgba(15,15,15,0) 72%);
}
.hero-inner {
  position: relative; z-index: 3;
  max-width: 1400px; margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-title {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.2;
  color: #fff;
  max-width: 640px;
}
.hero-sub {
  margin-top: 24px;
  max-width: 608px;
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,.7);
  line-height: 28px;
}
/* Çerçeveli cam CTA: tek buton, hover'da kırmızı glow */
.hero-cta {
  margin-top: 44px;
  display: inline-flex; align-items: center;
  width: fit-content;
  height: 66px;
  padding: 0 40px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 16px; font-weight: 400;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.hero-cta:hover {
  background: linear-gradient(115deg, var(--red) 55%, #14181f 100%);
  border-color: rgba(196,35,31,.85);
}

/* ── Hero içerik girişi (stelll "slideInUp"): aşağıdan + bulanıktan netleşerek ──
   html.js yalnızca JS varken gelir; JS yoksa içerik olduğu gibi görünür.
   CSS animasyonu, .is-active her el değiştirdiğinde kendiliğinden yeniden başlar. */
@keyframes heroSlideInUp {
  from { opacity: 0; transform: translateY(40px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* Çıkan slaytın içeriği anında kaybolmasın, kayarken sönsün */
.js .hero .hero-title,
.js .hero .hero-sub { opacity: 0; transition: opacity .45s ease; }
.js .hero .hero-cta {
  opacity: 0;
  transition: background .3s, border-color .3s, box-shadow .3s, opacity .45s ease;
}
/* Sürüklerken gelen slaydın içeriği de görünsün (stelll'de sürükleme sırasında metin görünür) */
.js .hero .hero-slide.is-peek .hero-title,
.js .hero .hero-slide.is-peek .hero-sub,
.js .hero .hero-slide.is-peek .hero-cta { opacity: 1; }
.js .hero .hero-slide.is-active .hero-title { animation: heroSlideInUp .8s cubic-bezier(.16,1,.3,1) .2s both; }
.js .hero .hero-slide.is-active .hero-sub   { animation: heroSlideInUp .8s cubic-bezier(.16,1,.3,1) .4s both; }
.js .hero .hero-slide.is-active .hero-cta   { animation: heroSlideInUp .8s cubic-bezier(.16,1,.3,1) .6s both; }

/* ═══════════ HİZMET KARTLARI ═══════════ */
.services-grid {
  display: flex;
  gap: 26px;
}
/* Kart yapısı, animasyonu ve tipografisi oda kartlarıyla aynı */
.service-card {
  flex: 0 0 calc((100% - 52px) / 3);
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.service-media { height: 330px; overflow: hidden; }   /* .room-shot ile aynı */
.service-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--z, 1.05));
  transform-origin: var(--zo, 50% 50%);
  transition: transform .3s ease;
}
/* Odalardaki gibi: hover'da görsel uzaklaşır (aynı .96 oranı) */
.service-card:hover .service-media img { transform: scale(calc(var(--z, 1.05) * .96)); }
.service-body { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.service-body h3 { font-size: 20px; font-weight: 400; line-height: 1.35; margin-bottom: 4px; }
/* Başlık da hizmet sayfasına gider (oda kartlarındaki gibi) */
.service-body h3 a { color: var(--ink); transition: color .25s; }
.service-body h3 a:hover { color: var(--red); }
.service-body p { font-size: 14px; margin: 10px 0 20px; flex: 1; }

/* ═══════════ SÜREÇ — nemutlu referansı (kaynak CSS'ten birebir) ═══════════ */
.flow {
  position: relative;
  overflow: hidden;
  background: var(--dark);      /* CTA bandıyla aynı düz koyu zemin */
}
/* Artı deseni (heropatterns) — ortada net, kenarlara doğru radial maskeyle söner */
.flow::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4231f' fill-opacity='0.55'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle, #fff 10%, transparent 90%);
  mask-image: radial-gradient(circle, #fff 10%, transparent 90%);
}
.flow .flow-grid {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 250px;
  padding-bottom: 175px;
  gap: 24px;
}
/* Kolon, başlığın bölünemeyen "Gaziantep DepoLife?" satırından dar olmamalı;
   330px'te son harf kırpılıyordu (.flow'da overflow: hidden var). */
.flow-left { flex: 0 0 360px; align-self: flex-end; }   /* başlık bloğu aşağıda dursun */
.flow-head { width: 360px; display: flex; flex-direction: column; gap: 45px; padding-bottom: 0; }
.flow-head p { max-width: 330px; }   /* açıklamanın satır ölçüsü eskisi gibi kalsın */
.flow-head-logo { position: relative; top: -60px; width: 104px; height: 104px; object-fit: contain; margin-bottom: -30px; }
/* Başlık ve açıklama: gri gradyan metin (referans değerleri) */
.flow-head h2 {
  font-size: 36px;
  max-width: 100%;
  font-weight: 300;
  line-height: 40px;
  margin: 0;
  background: linear-gradient(90deg, #8a8f96 0%, #e8ebef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
}
.flow-head p {
  font-size: 18px; font-weight: 300; line-height: 24px; margin: 0;
  max-width: 260px;
  background: linear-gradient(90deg, #8a8f96 0%, #d8dce1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Özellik listesi: görsel olarak gizli, DOM'da ve kaynakta mevcut */
.flow-features {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── Kutu: bölümün üst boşluğunda, sıradaki özellik içine düşer ── */
.flow-bucket {
  position: relative;
  --flow-fill: 2.9s;     /* main.js'teki tur süresiyle aynı olmalı */
  --drop-start: -100px;  /* çipin giriş yüksekliği */
  --drop-end: 320px;     /* kutunun içinde kaybolduğu derinlik */
  flex: 0 0 min(660px, 50vw);
  aspect-ratio: 655 / 352;
  pointer-events: none;
  filter: drop-shadow(0 30px 54px rgba(0,0,0,.55));
}
.flow-bucket > svg { position: absolute; inset: 0; width: 100%; height: 100%; }   /* yalnız kutu katmanları */
.bucket-back  { z-index: 0; }
.bucket-front { z-index: 2; }
.bucket-stage { position: absolute; inset: 0; z-index: 1; }
/* Çip: eski kartların cam malzemesi + tipografisi, hap formunda */
.bucket-chip {
  position: absolute; left: 50%; top: -16%;
  width: fit-content; max-width: 86%;   /* içeriğe göre; sabit genişlikte fazla boş kalıyordu */
  display: flex; align-items: center; gap: 16px;
  padding: 13px 38px 13px 16px;   /* içerik aynı, hap birkaç px daha ferah */
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(16px);          /* hareketli elemanda 40px her karede yeniden hesaplanıyordu */
  -webkit-backdrop-filter: blur(16px);
  will-change: transform;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform: translate(-50%, -50%);
  animation: bucketDrop var(--flow-fill, 2.9s) cubic-bezier(.455,.03,.515,.955) infinite;
  animation-play-state: paused;   /* sıra başlayınca .is-playing ile çalışır */
}
.flow-bucket.is-playing .bucket-chip { animation-play-state: running; }
.bucket-chip-ico {
  position: relative;
  flex: none; width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: none;      /* çerçeve/zemin yok — yalnızca kırmızı ışık */
  color: #fff;
}
/* Kartlardaki kırmızı ışık topu — ikonun arkasında */
.bucket-chip-ico::after {
  content: "";
  position: absolute; width: 36px; height: 36px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background-color: var(--red);
  border-radius: 50%;
  filter: blur(11px);
  opacity: .7;
  z-index: 1;
}
.bucket-chip-ico svg {
  position: relative; z-index: 2;
  width: 32px; height: 32px;
  stroke-width: 1.9;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.bucket-chip-title {
  min-width: 0;
  font-size: 18px; font-weight: 600; line-height: 1.15;
  color: #fff;               /* metin panelden ne yazılırsa o: zorla büyük harf yok */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes bucketDrop {
  0%   { transform: translate(-50%, calc(-50% + var(--drop-start))) scale(.86); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1);                             opacity: 1; }
  56%  { transform: translate(-50%, -50%) scale(1);                             opacity: 1; }
  100% { transform: translate(-50%, calc(-50% + var(--drop-end))) scale(.78);   opacity: 1; }
}

/* ═══════════ NEDEN BİZ — flow yapısıyla (image2 arka planı) ═══════════ */

/* ═══════════ SÜREÇ + RAKAMLAR — cevikbas "Rakamlarla Gücümüz" düzeni ═══════════ */
.stats { background: var(--tint); padding: 110px 0; overflow: hidden; }
.stats-grid { display: flex; align-items: center; gap: 44px; }
.stats-left {
  flex-shrink: 0; width: 310px;
  display: flex; flex-direction: column; gap: 30px;
}
.stats-eyebrow { font-size: 14px; font-weight: 300; color: var(--body); }
.stats-left h2 {
  font-size: 30px; font-weight: 300; line-height: 1.3;
  color: var(--muted); letter-spacing: 0;
}
.stats-left h2 span { color: var(--red); font-weight: 300; }
.stats-link {
  display: inline-flex; align-items: center; gap: 14px;
  width: fit-content;
  font-size: 14px; font-weight: 400; color: var(--ink);
  transition: color .3s;
}
.stats-link i { font-style: normal; color: var(--red); transition: transform .3s; }
.stats-link:hover { color: var(--red); }
.stats-link:hover i { transform: translateY(-3px); }

.stats-bento {
  flex: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}
.stats-col { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.stats-col .stat-card { width: calc(100% - 20px); }
.stats-col--shift, .stats-bento .stats-col:first-child { margin-top: 44px; }
.stat-card {
  position: relative; overflow: hidden;
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 28px;
  min-height: 235px;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 14px 34px rgba(26, 32, 40, .06);
  transition: transform .3s, box-shadow .3s;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(26, 32, 40, .1); }
.stat-card--dark { background: #14181f; }
.stat-card--big { min-height: 360px; justify-content: space-between; }
.stat-ico { display: block; color: rgba(255, 255, 255, .85); filter: drop-shadow(0 0 24px rgba(255, 255, 255, .9)); }
.stat-orb {
  position: absolute; right: -22px; bottom: -22px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--red);
  filter: blur(52px);
  opacity: .7;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s;
}
.stat-card--dark:hover .stat-orb { transform: scale(2.4); opacity: 1; }
.stat-body { position: relative; z-index: 2; }
.stat-num {
  font-size: 42px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, #14181f 0%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
}
.stat-card--dark .stat-num { background: linear-gradient(90deg, #fff 0%, #6a7482 110%); -webkit-background-clip: text; background-clip: text; }
.stat-card--big .stat-num { font-size: 48px; }
.stat-body h3 { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--body); }
.stat-card--dark .stat-body h3 { color: rgba(255, 255, 255, .78); }
.stat-desc { margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--body); }
.stat-card--dark .stat-desc { color: rgba(255, 255, 255, .62); }

/* ═══════════ KARŞILAŞTIRMA SLIDER'I — nemutlu referansı ═══════════ */
.compare {
  position: relative;
  overflow: hidden;
  padding: 155px 0 180px;
  background:
    radial-gradient(rgba(26,32,40,.07) 1.2px, transparent 1.2px);
  background-size: 90px 90px;
  background-color: #fff;
}
.compareSlider {
  position: relative;
  width: 100%;
  height: auto;          /* yükseklik görselin oranından gelir, sabit değer yok */
  user-select: none;
  -webkit-user-select: none;
  display: flex; align-items: center;
  cursor: ew-resize;
  touch-action: pan-y;
}
.compare-images {
  position: relative;
  margin: 0 auto;
  width: min(100%, 1200px);
  aspect-ratio: 3532 / 2222;   /* yedek: JS görselin gerçek oranını yazar */
  pointer-events: none;
}
.compare-bg, .compare-fg {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;    /* görsel oranı ne olursa olsun ezilmez */
  pointer-events: none;
}
.compare-bg { background-image: var(--compare-bg); z-index: 1; }
.compare-fg { background-image: var(--compare-fg); z-index: 2; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 40px;
  z-index: 10;
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-handle::after {
  content: "";
  /* Çizgi görselin dolu alanı kadar — değerleri JS görselden ölçüp yazar */
  position: absolute; top: var(--line-top, 0%); left: 50%;
  width: 2px; height: var(--line-h, 100%);
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--red) 25%, #14181f 90%);
}
.compare-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 73px; height: 48px;
  border-radius: 48px;
  pointer-events: auto;
  border: none;
  background: linear-gradient(115deg, rgba(196,35,31,.92) 25%, rgba(20,24,31,.88) 90%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  z-index: 11;
  transition: transform .2s, box-shadow .3s;
}
.compare-btn:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 0 26px rgba(196,35,31,.55), 0 0 60px rgba(196,35,31,.3);
}

/* ═══════════ ODA TİPLERİ ═══════════ */
/* Depolama alanları ve Hizmetler: footer ile aynı gümüş gri zemin (exunay .newProducts bandı) */
.rooms, .services { background: var(--f-gray); }
/* Gri zeminde başlık ve açıklama düz beyaz (footer metinleriyle aynı) */
.rooms .section-head h2, .services .section-head h2, .post-more--srv .section-head h2 {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff; color: #fff;
}
.rooms .section-desc, .services .section-desc { color: #fff; }
/* exunay New Products slider'ı: 3 kart görünür, sonsuz döngü, 3 sn'de bir otomatik kayar.
   JS yoksa .is-live gelmez ve bölüm normal yatay kaydırmaya düşer. */
.rooms-slider, .services-slider {
  overflow-x: auto;
  touch-action: pan-y;   /* yatay hareket slider'a, dikey kaydırma sayfaya */
}
.rooms-slider.is-live, .services-slider.is-live { overflow: hidden; cursor: pointer; }
.is-dragging .room-card, .is-dragging .service-card { pointer-events: none; }
.rooms-track {
  display: flex;
  gap: 20px;
}
.is-live .rooms-track, .is-live .services-grid { will-change: transform; }
/* Depolama alanları listesi: kaydırma yok, sabit üçlü ızgara.
   Izgara öğeleri flex-basis'i yok saydığı için .room-card olduğu gibi kullanılır. */
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rooms-grid .room-card h2 { font-size: 20px; font-weight: 400; line-height: 1.35; margin-bottom: 4px; }
.rooms-grid .room-card h2 a { color: var(--ink); }
.rooms-grid .room-card h2 a:hover { color: var(--red); }
.room-card {
  flex: 0 0 calc((100% - 40px) / 3);
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  display: flex; flex-direction: column;
}
/* Hover: görsel büyümek yerine aynı oranda uzaklaşır (küçülür) */
.room-card:hover .room-shot img { transform: scale(.96); }
/* "Popüler" rozeti — pricing.html'deki .popular-badge karşılığı */
.room-badge {
  position: absolute; top: 32px; right: 32px;
  display: inline-grid; place-items: center; height: 27px; padding: 0 13px;
  font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--body); background: none;
  border: 1px solid #aab3b8;
  border-radius: 3px; line-height: 1;
}
.room-tag {
  display: inline-grid; place-items: center;
  min-width: 46px; height: 27px; padding: 0 13px;
  background: linear-gradient(115deg, #c4231f 0%, #6e1512 45%, #14181d 100%);
  color: #fff;
  border-radius: 3px;
  font-weight: 600; font-size: 14px; letter-spacing: .06em;
  justify-self: start; margin-right: auto;
}
.room-shot {
  width: 100%; height: 330px; margin: 30px 0 34px;
  display: grid; place-items: center;
}
/* Basılı tutup sürüklerken tarayıcının görsel/link kopyası çıkmasın */
.room-shot a, .room-shot img {
  -webkit-user-drag: none; user-drag: none;
  -webkit-user-select: none; user-select: none;
}
.room-shot a { display: block; width: 100%; height: 100%; }
.room-shot img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.room-detail { width: 100%; margin-top: auto; }
/* Kartın her yeri tıklanabilir: başlık bağı kartın tamamını kaplar
   (yalnız görsel ve başlık bağlıyken kartın boş alanı ölü kalıyordu) */
.room-card h2 a::after,
.room-card h3 a::after { content: ""; position: absolute; inset: 0; }
.room-card h3 { font-size: 20px; font-weight: 400; line-height: 1.35; margin-bottom: 4px; }
.room-card h3 a { color: var(--ink); }
.room-card h3 a:hover { color: var(--red); }
.room-fit {
  display: block; font-size: 13px; font-weight: 600; line-height: 23px;
  color: var(--muted);
}
.room-size { font-size: 16px; line-height: 23px; color: var(--ink); margin-top: 6px; }

/* ═══════════ YORUMLAR — trailersp referansı ═══════════ */
/* ═══════════ BLOG — exunay "News and Innovations" liste düzeni ═══════════ */
.blog { padding-bottom: 96px; }
/* Başlık iki satıra düştüğünde açıklamayla iç içe geçmesin:
   üstten hizala, aralarını aç, başlığa sabit bir kolon genişliği ver */
.blog .section-head--split, .post-more .section-head--split { align-items: flex-start; gap: 80px; }
.blog .section-head--split h2, .post-more .section-head--split h2 { flex: 0 1 520px; max-width: 520px; }
.blog .section-desc, .post-more .section-desc { flex: 0 1 480px; padding-top: 6px; }
.blog-list { border-top: 1px solid var(--line); }
.blog-row {
  display: flex; align-items: center; gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s cubic-bezier(.22,1,.36,1);
}
.blog-row:hover { padding-left: 14px; }
.blog-thumb {
  flex: none; width: 200px; height: 122px;
  border-radius: 999px;
  overflow: hidden;
}
.blog-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.blog-row:hover .blog-thumb img { transform: scale(1.06); }
.blog-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.blog-row h3 {
  font-size: 22px; font-weight: 300; line-height: 1.35;
  color: var(--ink);
  transition: color .3s;
}
.blog-row:hover h3 { color: var(--ink); }
.blog-date {
  font-size: 14px; font-weight: 400;
  color: var(--muted);
}
/* Tarihin eski yerinde: "Devamını oku" — tarihin ilk stiliyle, ok hover'da belirir */
.blog-more {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 400;
  color: var(--muted);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.blog-row:hover .blog-more { transform: translateX(-14px); }   /* satırın padding-left kayması kadar */
.blog-arrow {
  font-style: normal; font-size: 20px; line-height: 1;
  color: var(--red);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.blog-row:hover .blog-arrow { opacity: 1; transform: translateX(0); }

.reviews { overflow: hidden; background: var(--tint); }
.marquee { overflow: hidden; padding: 16px 0 100px; position: relative; }
.marquee + .marquee { margin-top: -70px; }
.marquee-track {
  display: flex; gap: 20px;
  width: max-content;
  will-change: transform;
  animation: scroll-left 55s linear infinite;
}
.marquee[data-dir="right"] .marquee-track { animation-name: scroll-right; }
/* Duraklatma şeridin kendisine bağlı: .marquee'nin 100px alt dolgusu boş bir
   alan bırakıyor, kapsayıcıya bağlıyken orada da duruyordu.
   Dokunmatikte :hover yapışık kaldığı için yalnız gerçek hover'da uygulanır. */
@media (hover: hover) {
  .marquee-track:hover { animation-play-state: paused; }
}
/* Bölüm ekranda değilken boşuna dönmesin (JS varsa; .is-visible gözlemciyle gelir) */
.js .marquee:not(.is-visible) .marquee-track { animation-play-state: paused; }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* trailersp: geniş beyaz kart, büyük düz renkli avatar, isim+şehir tek stilde */
.section-head--reviews { margin-bottom: 48px; }
/* "Neden GaziantepDepoLife?" (flow-head) yapısında, ortalı bölüm başlığı */
.section-head--hero { max-width: 800px; }            /* başlık tek satırda kalsın diye */
.section-head--hero h2 {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 40px;
  background: linear-gradient(90deg, #8a8f96 0%, #1a2028 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
  margin-left: auto; margin-right: auto;
}
.review-card {
  width: 530px;
  min-height: 165px;
  background: #fff;
  border-radius: 10px;
  padding: 34px 36px;
  display: flex; gap: 24px;
  align-items: flex-start;
  box-shadow: rgba(179, 189, 191, .22) -8px 26px 40px;
}
.review-avatar {
  flex: 0 0 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--av, var(--red));
  color: #fff;
  border-radius: 10px;
  font-weight: 700; font-size: 23px;
}
.review-card b { font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--ink); display: block; margin-bottom: 10px; }
.review-card p { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ═══════════ CTA BANDI ═══════════ */
.cta-band { background: var(--dark); padding: 76px 0; }
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 300; letter-spacing: -.01em; }
.cta-band p { color: var(--muted-inv); margin-top: 10px; font-size: 16px; }
.cta-band-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-band-call { margin-top: 0; gap: 12px; }
.cta-band-call svg { transition: transform .3s; }
.cta-band-call:hover svg { transform: translateX(4px); }

/* ═══════════ FOOTER — exunay referansı (gümüş gri) ═══════════ */
.site-footer { font-size: 14px; }
.prefooter {
  display: flex; align-items: center; gap: 56px;
  padding-top: 40px; padding-bottom: 40px;
  flex-wrap: wrap;
}

/* Ana gövde: gümüş gri */
.footer-main {
  background: var(--f-gray);
  position: relative;
  overflow: hidden;
}
.footer-quality {
  display: flex; align-items: center; gap: 44px;
  padding-top: 52px; padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,.35);
  position: relative;
  flex-wrap: wrap;
}
.fq-badge {
  flex: 0 0 auto;
  display: flex; align-items: stretch;
  border: 1.5px solid rgba(255,255,255,.75);
  color: #fff;
}
.pf-ico { display: grid; place-items: center; padding: 0 20px; }
.fq-badge b { display: flex; flex-direction: column; justify-content: center;
  border-left: 1.5px solid rgba(255,255,255,.75); padding: 16px 22px; font-weight: 600; font-size: 16px; line-height: 1.6; letter-spacing: normal; color: #fff; }
.prefooter-note { font-weight: 400; font-size: 20px; line-height: 1.6; color: #fff; max-width: 680px; }

.footer-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.3fr;
  gap: 44px;
  padding-top: 52px; padding-bottom: 60px;
  position: relative;
}
.footer-col h3 {
  color: #fff; font-size: 15px; font-weight: 700;
  margin-bottom: 20px;
}
.footer-col > a, .fc-panel > a {
  display: block;
  font-size: 14px; font-weight: 500;
  padding: 7px 0;
  color: #f0f2f3;
  transition: .2s;
}
.footer-col > a:hover, .fc-panel > a:hover { color: var(--ink); transform: translateX(4px); }
.footer-col--social p { font-size: 14px; margin-bottom: 20px; color: #f0f2f3; }
.footer-social { display: flex; gap: 20px; }
.footer-social a {
  display: grid; place-items: center;
  color: #fff;
  /* 22×22 ikon, 40×40 dokunma alanı (yerleşim negatif dış boşlukla korunur) */
  padding: 9px; margin: -9px;
  transition: color .25s, transform .25s;
}
.footer-social a:hover { color: var(--red); transform: translateY(-3px); }

.footer-contactbar { position: relative; }
.footer-contactbar-inner { border-top: 1px solid rgba(255,255,255,.35); }
.footer-contactbar-inner {
  display: flex; align-items: center; gap: 44px;
  padding-top: 30px; padding-bottom: 34px;
  flex-wrap: wrap;
}
.footer-logo img { border-radius: 50%; background: #fff; }
.fc-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; line-height: 1.55; font-weight: 500;
  color: #fff;
  padding: 5px 0; margin: -5px 0;   /* dokunma alanı 22 → 32px */
  transition: opacity .2s;
}
.fc-item:hover { opacity: .8; }
.fc-item svg { flex: 0 0 auto; margin-top: 3px; }
/* Footer telefon ikonu: önceki gibi beyaz */
.fc-item img { flex: 0 0 auto; filter: brightness(0) invert(1); }

/* Alt beyaz şerit */
.footer-bottom { background: #fff; }
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 26px; padding-bottom: 26px;
  font-size: 13px; color: var(--muted);
  flex-wrap: wrap;
}
.footer-legal { display: flex; align-items: center; gap: 24px; }
.footer-legal a { font-size: 13px; color: var(--muted); transition: color .2s; }
.footer-legal a:hover { color: var(--red); }
.footer-credit { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
/* Taaf logosu maske olarak basılıyor: normalde gri, hover'da markanın kendi laciverti */
.taaf-logo {
  display: block; width: 54px; height: 25px; flex: 0 0 auto;
  background-color: #a8b0bb; transition: background-color .25s;
  -webkit-mask: url("/assets/img/taaf.svg") no-repeat center / contain;
  mask: url("/assets/img/taaf.svg") no-repeat center / contain;
}
.taaf-logo:hover { background-color: #2b357c; }

/* ═══════════ KURUMSAL SAYFASI — stelll "hakkimizda" düzeni ═══════════ */
/* Hero: beyaz zemin, ana sayfadaki kırmızı artı deseni */
.about-hero {
  position: relative;          /* z-index YOK: yelpaze koyu bölümün üstüne binebilsin */
  background: #fff;
  padding: 176px 0 0;
}
.about-hero::before, .sol-hero::before {
  content: ""; position: absolute; inset: 96px 0 0; z-index: 0; pointer-events: none;   /* desen navbar'ın altına girmesin */
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4231f' fill-opacity='0.55'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  /* İki maske kesişir: dikeyde üstte (başlığın olduğu yerde) sönük, aşağı indikçe belirgin;
     yatayda ana sayfadaki gibi sol ve sağ kenarlara doğru silikleşir. */
  -webkit-mask-image:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.1) 30%, #fff 60%, #fff 100%),
    linear-gradient(90deg, transparent 0%, #fff 22%, #fff 78%, transparent 100%);
  mask-image:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.1) 30%, #fff 60%, #fff 100%),
    linear-gradient(90deg, transparent 0%, #fff 22%, #fff 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.about-hero::before, .sol-hero::before { opacity: .62; }   /* metnin okunurluğu için desen ferahlatıldı */
/* Sol hizalı hero'larda metin sol kolonda: desen o kolondan çekildiği için
   sağdaki boş alanda biraz daha güçlü olabilir */
.sol-hero::before { opacity: .82; }
/* Çözümler hero'su kurumsalınkinden kısa: aynı "alttan gelen" etki için
   desenin güçlendiği nokta aşağı kaydırıldı, metnin arkası temiz kalıyor */
.sol-hero::before {
  -webkit-mask-image:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.26) 46%, rgba(255,255,255,.62) 76%, #fff 100%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(255,255,255,.4) 56%, #fff 78%, #fff 93%, transparent 100%);
  mask-image:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.26) 46%, rgba(255,255,255,.62) 76%, #fff 100%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(255,255,255,.4) 56%, #fff 78%, #fff 93%, transparent 100%);
}
.about-hero > .container { position: relative; z-index: 90; }   /* yelpaze koyu bölümün üstüne binsin */
/* Konteyner depo görseli — şeffaf zeminli render, koyu bölümün üstüne taşar */
.about-head { text-align: center; max-width: 900px; margin: 0 auto; }
.about-eyebrow {
  font-size: 16px; font-weight: 400; line-height: 27px; color: var(--muted);
  letter-spacing: 0; margin-bottom: 26px;
}
.about-head h1 {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 300; line-height: 1.35;   /* bölüm başlıklarıyla aynı sıklık */
  color: var(--ink);
}
.about-unit {
  position: relative; z-index: 90;
  width: min(1000px, 100%);
  margin: 86px auto 0;
}
.about-unit img {
  width: 100%; height: auto;
  filter: drop-shadow(0 40px 60px rgba(26,32,40,.28));
}

/* Koyu bölüm hero'nun üstüne biner */
.about-story {
  position: relative; z-index: 10;
  background: var(--dark);
  margin-top: -250px;      /* koyu alan yukarı doğru biraz daha uzar */
  padding: 340px 0 110px;   /* bloklar arası nefes payı */
}
.about-story-inner { max-width: 940px; margin: 0 auto; text-align: center; }
.about-story-inner > p {
  font-size: 20px; font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,.86);
}
.about-story-inner > h2 {
  margin-top: 26px;
  font-size: 24px; font-weight: 300; line-height: 1.5;
  color: #fff;
}
/* Vizyon/Misyon — beyaz zemin */
.about-dark { background: #fff; padding: 104px 0; }
.about-dark > .container > * + * { margin-top: 110px; }

/* Vizyon & Misyon — exunay "Vision and Mission" düzeni: solda küçük etiket,
   sağda tek büyük ifade ve ortak metin */
.about-vm { display: flex; align-items: flex-start; gap: 24px; }   /* exunay: bootstrap kolon aralığı */
/* Blog bölüm başlığıyla aynı tipografi (36px/300, gradyan metin) — koyu zemin varyantı */
.about-vm > h3 {
  flex: 0 0 33.33%;        /* exunay: col-md-4 */
  font-size: 36px; font-weight: 300; line-height: 1.32;
  letter-spacing: 0;
  background: linear-gradient(90deg, #8a8f96 0%, #1a2028 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}
.about-vm-body {
  flex: 0 1 66.66%;         /* exunay: col-md-8 */
  margin-left: auto;
  display: flex; flex-direction: column; gap: 20px;
}
/* CTA bandındaki başlıkla aynı tip */
.about-vm-body h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 300; letter-spacing: -.01em; line-height: 1.25;
  color: var(--ink);
  margin-bottom: 40px;   /* exunay: başlık ile metin arası 60px (20 gap + 40) */
}
/* Blog açıklamasıyla aynı tip */
.about-vm-body p {
  font-size: 18px; font-weight: 300; line-height: 27px;
  color: var(--body);
}
/* "Vizyonumuz: / Misyonumuz:" satır içinde, yalnızca vurgulu */
.about-vm-body p b { font-weight: 400; color: var(--ink); }
.about-values { margin-top: 110px; }
.about-values > h2 {
  margin-bottom: 40px;
  font-size: 36px; font-weight: 300; line-height: 1.32;
  background: linear-gradient(90deg, #8a8f96 0%, #e8ebef 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.about-values > h2 em { font-style: normal; }
/* Blog/CTA açıklamalarıyla aynı tip — koyu zemin varyantı */
.about-values-desc {
  margin: -22px 0 60px; max-width: 760px;   /* diğer bölüm açıklamalarıyla aynı genişlik */
  font-size: 18px; font-weight: 300; line-height: 27px; color: var(--muted-inv);
}
/* Değer kartları: oda kartlarının aynısı, başlığın altında 4'lü sıra.
   4 kart tam sığdığı için otomatik kaydırma yok; dar ekranda yatay kaydırmaya düşer. */
/* Kaydırma yok: dört kart sabit ızgarada */
.about-values-slider { min-width: 0; }
.about-values-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Oda kartlarıyla aynı kabuk: beyaz zemin, 5px radius, 32px dolgu */
.about-value {
  aspect-ratio: 1;             /* kare kutu */
  display: flex; flex-direction: column;   /* içerik üstten başlar: başlıklar tüm kartlarda aynı hizada */
  background: #fff;
  border-radius: var(--radius);
  padding: 36px;
}
/* Ana sayfadaki .stat-ico gibi: kutu yok, sade ikon */
.about-value-ico { display: block; margin-bottom: 26px; color: var(--red); }
.about-value-ico svg { width: 30px; height: 30px; }
/* Ana sayfadaki bento rakamlarıyla aynı: büyük, kalın, gradyan */
.about-value p.about-num {
  margin-bottom: 8px; width: fit-content;
  font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  background: linear-gradient(90deg, #14181f 0%, var(--red) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.about-value h3 {
  margin-bottom: 10px;
  font-size: 21px; font-weight: 400; line-height: 1.35;
  color: var(--ink);
}
.about-value p {
  font-size: 15px; font-weight: 300; line-height: 1.72;
  color: var(--body);
}

/* ═══════════ ÇÖZÜMLERİMİZ SAYFASI ═══════════ */
/* Hero: kurumsal sayfasıyla aynı beyaz zemin + kırmızı artı deseni (maske yukarıda paylaşılıyor) */
.sol-hero { position: relative; background: #fff; padding: 172px 0 110px; }
.sol-hero > .container { position: relative; z-index: 2; }
.sol-crumb {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 400; color: var(--body); margin-bottom: 44px;
}
.sol-crumb a { color: var(--body); }
.sol-crumb a:hover { color: var(--red); }
.sol-crumb i { font-style: normal; opacity: .5; }
.sol-crumb span { color: var(--ink); }
.sol-head { max-width: 900px; }
/* Ana sayfadaki "Neden GaziantepDepoLife?" başlığının sayfa ölçeğine büyütülmüş hâli */
.sol-head h1 {
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 300; line-height: 1.18; letter-spacing: -.01em;
  color: var(--ink);
}
.sol-head h1 em { font-style: normal; color: var(--red); }
.sol-head > p {
  margin-top: 24px; max-width: 660px;
  /* Artı deseninin üstünde durduğu için gri değil koyu: desen okunurluğu bozuyordu */
  font-size: 18px; font-weight: 400; line-height: 27px; color: var(--ink);
}
/* Giriş satırı — hero'nun devamı: aynı beyaz blok, aynı desen üstünde */
.sol-intro-inner { display: flex; align-items: flex-start; gap: 26px; margin-top: 104px; }
.sol-key { flex: 0 0 auto; margin-top: 9px; line-height: 0; }
.sol-intro-inner p {
  flex: 1 1 auto; max-width: 940px;
  font-size: clamp(19px, 2.1vw, 25px); font-weight: 300; line-height: 1.52; color: var(--ink);
}
/* Çözüm kartları — 21st.dev "card curtain reveal" uyarlaması:
   dinlenirken başlık kartın alt yarısında ve gövde perdeyle kapalı; fare gelince
   perde ortadan iki yana açılır, başlık yukarı kayar ve mix-blend-difference
   katmanı gövdenin rengini tersine çevirir. Alttaki fotoğraf da perdeyle açılır. */
.sol-solutions { background: var(--dark); padding: 104px 0 110px; }
.sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cc-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  height: 520px; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.09);
  background: #0b0e12; color: #f2f4f7;
}
.cc-body { position: relative; flex: 1 1 auto; min-height: 0; padding: 28px; }
/* İkon kartın üstünde sabit; perde açılınca yerinden oynamaz */
.cc-ico {
  display: block; margin-bottom: 22px; color: var(--red);
  position: relative; z-index: 3;   /* perdenin üstünde kalsın; difference kırmızıyı turkuaza çeviriyordu */
}
.cc-title {
  font-size: 30px; font-weight: 400; letter-spacing: -.01em; line-height: 1.16;
  color: #f2f4f7;
  transform: translateY(90px);
  /* Açılış ve kapanış aynı süre/eğri: taşmayan easing, sonda duraklama olmuyor */
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.cc-curtain, .cc-foot {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: clip-path .42s cubic-bezier(.22, 1, .36, 1);
}
/* Açıklama clip-path yerine opacity ile geliyor: bir kartta üç değil iki clip animasyonu kalır */
.cc-desc { margin: 18px 0 0; opacity: 0; transition: opacity .34s ease .06s; }
.cc-desc p { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(242,244,247,.72); }
.cc-curtain { position: absolute; inset: 0; pointer-events: none; background: #f2f4f7; mix-blend-mode: difference; contain: strict; }
.cc-foot { margin-top: auto; }
.cc-foot img { display: block; width: 100%; height: 232px; object-fit: cover; }

@media (hover: hover) and (min-width: 993px) {
  /* Katman terfisi yalnızca animasyonun çalıştığı yerde ve az sayıda:
     kalıcı will-change 24 katman yaratıp kendisi takılmaya sebep oluyordu. */
  .cc-card { transform: translateZ(0); }
  .cc-foot img { transform: translateZ(0); }   /* büyük görsel bir kez ölçeklenip raster'lansın */
  .cc-card:hover .cc-title { transform: none; }
  .cc-card:hover .cc-desc { opacity: 1; }
  .cc-card:hover .cc-curtain,
  .cc-card:hover .cc-foot { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 992px) {
  .sol-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cc-card { height: auto; min-height: 0; }
  .cc-title { font-size: 26px; transform: none; }
  .cc-desc { opacity: 1; }
  .cc-foot { clip-path: none; }
  .cc-curtain { display: none; }
}
@media (max-width: 576px) {
  .sol-cards { grid-template-columns: 1fr; }
  .cc-body { padding: 24px; }
  .cc-title { font-size: 24px; }
  .cc-foot img { height: 200px; }
}
@media (hover: none) {
  .cc-title { transform: none; }
  .cc-desc { opacity: 1; }
  .cc-foot { clip-path: none; }
  .cc-curtain { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-title, .cc-desc, .cc-curtain, .cc-foot { transition: none; }
}

/* Süreç adımları — stelll "Neden Stelll?" düzeni: üstte iki satırlık sakin giriş,
   altta ince dikey ayraçlarla bölünmüş üç kolon. */
.steps { background: var(--tint); padding: 110px 0 120px; }
/* "Gaziantep'te Neden Biz?" bloğuyla birebir aynı yapı: gradyan başlık + altında açıklama */
.steps-head h2 {
  font-size: 36px; font-weight: 300; line-height: 1.32; letter-spacing: 0;
  background: linear-gradient(90deg, #8a8f96 0%, #1a2028 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}
.steps-head h2 em { font-style: normal; }
.steps-desc {
  margin-top: 18px; max-width: 760px;
  font-size: 18px; font-weight: 300; line-height: 27px; color: var(--muted);
}
.steps-grid {
  margin-top: 110px;
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: start;
}
.step { padding: 8px 34px 8px 0; }
.step + .step { padding-left: 46px; border-left: 1px solid rgba(26,32,40,.12); }
/* Ana sayfadaki bento rakamlarıyla aynı: büyük, kalın, gradyan */
.step-num {
  display: block; margin-bottom: 28px; width: fit-content;
  font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  background: linear-gradient(90deg, #14181f 0%, var(--red) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.step h3 { font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.step p { margin-top: 20px; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--body); }

/* Rakam kartları (kurumsal): kare değil içerik yüksekliğinde, koyu zemin, gümüş rakam */
.about-values--stats .about-value {
  aspect-ratio: auto; padding-bottom: 30px;
  background: radial-gradient(120% 110% at 32% 72%, #34363a 0%, #212326 46%, #131518 100%);
  border: 1px solid rgba(255,255,255,.08);
}
.about-values--stats .about-value-ico { margin-bottom: 46px; }
.about-values--stats .about-value h3 { font-size: 18px; color: rgba(255,255,255,.85); }
.about-values--stats .about-value p.about-num {
  font-size: 36px;
  background-image: linear-gradient(90deg, #fff 0%, #6a7482 110%);   /* sitenin gümüş gradyanı */
}

/* ═══════════ HUKUKİ METİNLER (KVKK / Gizlilik) ═══════════ */
/* Neden Biz hero'suyla aynı beyaz zemin + artı deseni; gövde tek sütun,
   numaralı düz başlıklar. Yan menü, kutu ve ayırıcı çizgi yok. */
.sol-hero--legal { padding-bottom: 96px; }
/* Altında koyu bölüm yok: desen en yoğun yerinde kesilmesin, metne varmadan sönsün */
.sol-hero--legal::before {
  -webkit-mask-image:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.28) 44%, rgba(255,255,255,.72) 72%, rgba(255,255,255,.6) 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(255,255,255,.4) 56%, #fff 78%, #fff 93%, transparent 100%);
  mask-image:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.28) 44%, rgba(255,255,255,.72) 72%, rgba(255,255,255,.6) 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(255,255,255,.4) 56%, #fff 78%, #fff 93%, transparent 100%);
}
.sol-hero--legal .sol-head > p { max-width: 720px; }
/* Hero metnindeki bağlantılar: genel kuralda a{color:inherit} olduğu için
   burada ayrıca işaretlenir, yoksa düz metinden ayırt edilemiyor. */
.sol-head > p a {
  color: var(--red); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .2s;
}
.sol-head > p a:hover { color: var(--red-deep); }

.legal { background: #fff; padding: 0 0 112px; }
.legal-body { max-width: 840px; }
.legal-sec + .legal-sec { margin-top: 56px; }
.legal-sec > h2 {
  font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--ink);
}
.legal-sec p { margin-top: 18px; font-size: 16px; font-weight: 300; line-height: 1.74; color: var(--body); }
/* Madde içi alt başlık: h2'den bir kademe küçük, gövdeden ayrışsın */
.legal-sec > h3 {
  margin-top: 36px;
  font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink);
}
/* Madde listeleri yazı gövdesindekiyle aynı; yalnızca punto hukuki metnin ölçüsünde */
.legal-sec ul { margin-top: 18px; padding-left: 21px; }
.legal-sec li { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.74; color: var(--body); }
.legal-sec li::marker { color: var(--red); }
.legal-sec a {
  color: var(--red); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
/* Kapanış satırı — diğer metne ve iletişime tek cümlelik yönlendirme */
.legal-foot {
  max-width: 840px; margin-top: 56px;
  font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--muted);
}
.legal-foot a { color: var(--ink); }
.legal-foot a:hover { color: var(--red); }

@media (max-width: 992px) {
  .legal { padding-bottom: 78px; }
  .legal-body, .legal-foot { max-width: none; }
  .legal-sec > h2 { font-size: 20px; }
}
/* "Gaziantep DepoLife?" gibi bölünemeyen satırlar 337px altında kutuya sığmıyordu */
@media (max-width: 400px) {
  .sol-head h1 { font-size: min(30px, 7.7vw); }
}

/* ═══════════ ODA DETAY SAYFASI ═══════════ */
/* nemutlu ürün detayı düzeni: solda çerçeveli galeri paneli, sağda ikon
   başlıklı üst üste kartlar (kategori + başlık, özet, teknik özellikler). */
/* Bar da aynı griye boyandığı için bant tepeden düz akar */
.sol-hero--room {
  background: var(--tint);
  padding-bottom: 76px;
}
.rd-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 26px; align-items: start; }

/* ── Galeri: üstte büyük görsel, altında küçük resimler ── */
.rd-gallery { display: flex; flex-direction: column; gap: 14px; }
.rd-thumbs { display: flex; gap: 14px; }
/* Büyük görselle aynı mantık: sabit 3:2 kutu, görsel kutuyu tam doldurur */
.rd-thumb {
  flex: 0 0 118px; padding: 0; cursor: pointer; overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s;
}
.rd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-thumb:hover { border-color: #d8dde3; }
.rd-thumb.is-active { border-color: var(--red); }
/* Kutu sabit oranlı; büyük görsel biraz daha yüksek dursun diye 3:2 yerine 7:5
   (görsel 3:2 olduğundan cover ile yanlardan çok az kırpılır). */
.rd-shot {
  position: relative; overflow: hidden; aspect-ratio: 7 / 5; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.rd-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Sağ kolon kartları ── */
.rd-info { display: flex; flex-direction: column; gap: 16px; }
.rd-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* Kart başlıkları sitenin normal başlık tipografisiyle: küçük büyük-harf
   etiket yerine 18px/400 koyu metin */
.rd-card-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 400; line-height: 1.35; letter-spacing: -.005em; color: var(--ink);
}
/* Kutu yok: yalnızca kırmızı ikon */
.rd-ico { flex: none; display: grid; place-items: center; color: var(--red); }
.rd-card-body { padding: 26px; }
.rd-card-body h1 {
  font-size: clamp(28px, 3.1vw, 38px); font-weight: 400; line-height: 1.16; letter-spacing: -.015em; color: var(--ink);
}
/* Beden kodu görselde değil, ismin yanında — ana sayfadaki oda rozetinin aynısı */
.rd-beden { vertical-align: middle; margin: 0 0 .18em 10px; }
.rd-card-body h1 span {
  display: block; margin-top: 10px;
  font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--body);
}
/* Başlıkla aynı kartta: aralarında nefes payı */
.rd-lead { margin-top: 20px; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--body); }
.rd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Teklif Al: iletişim formundaki "Gönder" düğmesiyle aynı (kural .ct-submit ile ortak) */
.rd-cta { margin-top: 0; }
/* Teknik özellikler kartında tablo kenarlara kadar uzanır */
.rd-card .rd-card-body { padding-top: 8px; padding-bottom: 22px; }
.rd-card-head + .rd-card-body > h1 { margin-top: 14px; }

/* ── Sekmeler (üst blokla aynı gri zemin) ── */
.rd-tabs-sec { background: var(--tint); padding: 0 0 60px; }
/* Sekmeler tek çerçeve içinde, altı kırmızı şeritle işaretli (e-ticaret ürün
   sekmeleri düzeni, sitenin tipografisi ve renkleriyle) */
.rd-tabs {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.rd-tabnav {
  display: flex; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.rd-tabnav::-webkit-scrollbar { display: none; }
.rd-tab {
  flex: none; padding: 20px 30px; cursor: pointer; white-space: nowrap;
  background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--body);
  transition: color .25s, border-color .25s;
}
.rd-tab:hover { color: var(--ink); }
.rd-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--red); }
.rd-panels { padding: 30px 30px 34px; }
.rd-panel[hidden] { display: none; }
.rd-table { width: 100%; border-collapse: collapse; }
.rd-table th, .rd-table td {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--ink); text-align: left;
}
.rd-table tr:last-child th, .rd-table tr:last-child td { border-bottom: 0; }
.rd-table th { width: 46%; font-weight: 400; color: var(--ink); }
/* Değerler de sola hizalı: iki kolon aynı hizadan başlar (referanstaki gibi) */
.rd-table td { color: var(--ink); }
.rd-list { max-width: 780px; padding-left: 21px; }
.rd-list li { margin-top: 10px; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--body); }
/* Vizyon/Misyon paragraflarındaki vurguyla aynı: ince ağırlık, koyu renk */
.rd-list li b { font-weight: 400; color: var(--ink); }
.rd-list li::marker { color: var(--red); }

@media (max-width: 1100px) {
  .rd-main { grid-template-columns: 1fr; gap: 18px; }

}
@media (max-width: 992px) {
  .sol-hero--room {
    padding-bottom: 56px;
  }
  .rd-tabs-sec { padding: 0 0 46px; }
  .rd-tab { padding: 16px 20px; font-size: 14px; }
  .rd-panels { padding: 24px 20px 28px; }
  .rd-table th, .rd-table td { padding: 15px 4px; font-size: 14px; }
}
@media (max-width: 576px) {
  .rd-actions .rd-cta { width: 100%; justify-content: center; }
  /* Sabit 118px küçük resimler dar ekrana sığmıyordu: satırı paylaşsınlar */
  .rd-thumbs { gap: 10px; }
  .rd-thumb { flex: 1 1 0; min-width: 0; }
}

/* ═══════════ HİZMETLER LİSTESİ ═══════════ */
/* kervancioglumetal "Ürünlerimiz" düzeni: görsel kutular, başlık görselin
   üstünde. Beş hizmet için üstte 2, altta 3 kutuluk asimetrik ızgara. */
/* Bölüm başlığı yok: ızgara doğrudan başlar, üst dolgu ona göre */
.srv-page { background: var(--tint); padding: 76px 0 110px; }
.srv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.srv-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); min-height: 300px;
  grid-column: span 2;
}
/* İlk iki kutu geniş: üst satır ikiye bölünür, alt satırda üç kutu kalır */
.srv-tile:nth-child(1), .srv-tile:nth-child(2) { grid-column: span 3; min-height: 380px; }
.srv-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
/* Başlığın okunması için alttan yukarı karartma */
.srv-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,13,0) 34%, rgba(8,10,13,.5) 68%, rgba(8,10,13,.88) 100%);
}
.srv-tile h2 {
  position: absolute; left: 30px; right: 30px; bottom: 26px; z-index: 2;
  font-size: 22px; font-weight: 400; line-height: 1.25; color: #fff;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
/* Oda kutularında ölçü satırı ve köşedeki beden etiketi */
.srv-tile p {
  position: absolute; left: 30px; right: 30px; bottom: 26px; z-index: 2;
  font-size: 14px; font-weight: 300; color: rgba(255,255,255,.72);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.srv-tile:has(p) h2 { bottom: 52px; }
.srv-tile:hover img { transform: scale(1.05); }
.srv-tile:hover h2, .srv-tile:hover p { transform: translateY(-4px); }

@media (max-width: 992px) {
  .srv-page { padding: 56px 0 78px; }
  .srv-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .srv-tile { grid-column: span 1; min-height: 240px; }
  .srv-tile:nth-child(1), .srv-tile:nth-child(2) { grid-column: span 1; min-height: 240px; }
  .srv-tile h2 { left: 22px; right: 22px; bottom: 20px; font-size: 19px; }
  .srv-tile p { left: 22px; right: 22px; bottom: 18px; font-size: 13px; }
  .srv-tile:has(p) h2 { bottom: 44px; }
}
@media (max-width: 576px) {
  .srv-grid { grid-template-columns: 1fr; }
  .srv-tile, .srv-tile:nth-child(1), .srv-tile:nth-child(2) { min-height: 220px; }
}

/* ═══════════ BLOG SAYFASI ═══════════ */
/* Kart dili "Depolama Çözümlerimiz" ile aynı: perde ortadan iki yana açılır,
   başlık yukarı kayar, alttaki görsel belirir. Farkı beyaz tema — ikon yok,
   dinlenirken yalnızca başlık; açılınca açıklama ve "Devamını oku" gelir. */
.sol-hero--blog { padding-bottom: 92px; }
/* Altında koyu bölüm yok: desen metne varmadan sönsün (hukuki metinlerle aynı) */
.sol-hero--blog::before, .sol-hero--post::before, .sol-hero--ct::before {
  -webkit-mask-image:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.28) 44%, rgba(255,255,255,.72) 72%, rgba(255,255,255,.6) 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(255,255,255,.4) 56%, #fff 78%, #fff 93%, transparent 100%);
  mask-image:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.28) 44%, rgba(255,255,255,.72) 72%, rgba(255,255,255,.6) 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(255,255,255,.4) 56%, #fff 78%, #fff 93%, transparent 100%);
}

/* Zemin iletişim sayfasının orta bandıyla aynı */
.blog-page { background: var(--tint); padding: 96px 0 110px; }
.blog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Sayfalama — tek çerçeve içinde bölmeli düğmeler; yön düğmelerinde yazı değil ok */
.pager-wrap { display: flex; justify-content: center; margin-top: 56px; }
.pager {
  display: inline-flex; align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.pg-btn, .pg-num {
  display: grid; place-items: center;
  /* Üç hücre de aynı kare ölçüde: ok kutusu rakam kutusundan geniş durmasın */
  min-width: 46px; height: 46px; padding: 0 12px;
  font-family: var(--font); font-size: 15px; font-weight: 400;
  color: var(--body);
  transition: background-color .25s, color .25s;
}
.pager > * + * { border-left: 1px solid var(--line); }
a.pg-btn:hover, a.pg-num:hover { background: var(--paper); color: var(--ink); }
.pg-num.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Gidilecek sayfa yoksa ok sönük ve tıklanamaz durur */
.pg-btn.is-off { color: #ccd2d9; cursor: default; }
.pg-btn svg { display: block; }

.bc-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  /* Sabit yükseklik değil taban yükseklik: uzun başlık + açıklama açıldığında
     içerik alttaki görselin üstüne binmesin, satır kendi boyuna uzasın. */
  min-height: 520px; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .42s, box-shadow .42s;
}
.bc-body { position: relative; flex: 1 1 auto; min-height: 0; padding: 30px; }
/* Koyu karttaki mix-blend-difference katmanının beyaz karşılığı: renk tersine
   dönmez, gövde aynı hareketle bir ton koyulaşır. */
.bc-curtain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--dark); contain: strict;
}
.bc-date, .bc-title, .bc-desc, .bc-more { position: relative; z-index: 1; }
.bc-date {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--muted);
  transition: color .42s;
}
.bc-title {
  font-size: 24px; font-weight: 400; letter-spacing: -.01em; line-height: 1.25;
  color: var(--ink); transition: color .42s;
}
/* Tarih ve başlık tek blok gibi davranır: dinlenirken ikisi de gövdenin alt
   yarısında durur, kart açılınca birlikte yerine oturur. */
.bc-date, .bc-title {
  transform: translateY(117px);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.bc-desc { margin: 14px 0 0; opacity: 0; transition: opacity .34s ease .06s; }
.bc-desc p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--body); transition: color .42s; }
.bc-more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: 14px; font-weight: 400; color: var(--muted);
  opacity: 0; transition: opacity .34s ease .06s, color .3s;
}
.bc-more i { font-style: normal; font-size: 20px; line-height: 1; color: var(--red); }
.bc-curtain, .bc-foot {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: clip-path .42s cubic-bezier(.22, 1, .36, 1);
}
.bc-foot { margin-top: auto; }
.bc-foot img { display: block; width: 100%; height: 232px; object-fit: cover; }

@media (hover: hover) and (min-width: 993px) {
  .bc-card { transform: translateZ(0); }
  .bc-foot img { transform: translateZ(0); }
  .bc-card:hover { border-color: #d8dde3; box-shadow: var(--shadow-soft); }
  .bc-card:hover .bc-date,
  .bc-card:hover .bc-title { transform: none; }
  .bc-card:hover .bc-desc, .bc-card:hover .bc-more { opacity: 1; }
  /* Perde koyu: açık haldeki metinler aydınlık tona geçer */
  .bc-card:hover .bc-title { color: #f2f4f7; }
  .bc-card:hover .bc-date { color: rgba(255,255,255,.5); }
  .bc-card:hover .bc-desc p { color: rgba(255,255,255,.62); }
  .bc-card:hover .bc-more { color: #f2f4f7; }
  .bc-card:hover .bc-curtain,
  .bc-card:hover .bc-foot { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
/* Dokunmatikte ve dar ekranda perde yok: kart zaten açık halde durur */
@media (max-width: 992px) {
  .blog-page { padding: 68px 0 78px; }
  .blog-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .bc-card { min-height: 0; }
  .bc-date, .bc-title { transform: none; }
  .bc-desc, .bc-more { opacity: 1; }
  .bc-foot { clip-path: none; }
  /* Perde açık halde sabit: kart koyu zeminle durur.
     Çerçeve ve gölge masaüstünün açık hâliyle aynı. */
  .bc-curtain { display: block; clip-path: none; }
  .bc-card { border-color: #d8dde3; box-shadow: var(--shadow-soft); }
  .bc-title { color: #f2f4f7; }
  .bc-date { color: rgba(255,255,255,.5); }
  .bc-desc p { color: rgba(255,255,255,.62); }
  .bc-more { color: #f2f4f7; }
}
@media (max-width: 576px) {
  /* Sayfa yolu tek satırda kalsın: uzun yazı başlığı üç noktayla kısalır */
  .sol-crumb { flex-wrap: nowrap; overflow: hidden; }
  .sol-crumb a, .sol-crumb i { flex: none; white-space: nowrap; }
  .sol-crumb span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .blog-cards { grid-template-columns: 1fr; }
  .bc-body { padding: 24px; }
  .bc-foot img { height: 200px; }
}
@media (hover: none) {
  .bc-date, .bc-title { transform: none; }
  .bc-desc, .bc-more { opacity: 1; }
  .bc-foot { clip-path: none; }
  /* Perde açık halde sabit: kart koyu zeminle durur.
     Çerçeve ve gölge masaüstünün açık hâliyle aynı. */
  .bc-curtain { display: block; clip-path: none; }
  .bc-card { border-color: #d8dde3; box-shadow: var(--shadow-soft); }
  .bc-title { color: #f2f4f7; }
  .bc-date { color: rgba(255,255,255,.5); }
  .bc-desc p { color: rgba(255,255,255,.62); }
  .bc-more { color: #f2f4f7; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-date, .bc-title, .bc-desc, .bc-more, .bc-curtain, .bc-foot { transition: none; }
}

/* ── Blog yazı sayfası (freenco haber detayı akışı, sitenin dili) ── */
.sol-hero--post { padding-bottom: 52px; }
.post-head { max-width: 900px; }
.post-date {
  display: block; margin-bottom: 20px;
  font-size: 13px; font-weight: 500; letter-spacing: .08em;
  color: var(--muted);
}
.post-head h1 {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 300; line-height: 1.18;
  letter-spacing: -.015em; color: var(--ink);
}
.post-lead {
  margin-top: 26px; max-width: 820px;
  /* Diğer sayfa girişleriyle aynı: 18px / 400 */
  font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--ink);
}

/* Zemin blog listesi ve iletişim sayfasındaki bantla aynı */
.post { background: var(--tint); padding: 46px 0 100px; }
.post-cover { overflow: hidden; border-radius: var(--radius); }
.post-cover img {
  display: block; width: 100%;
  height: clamp(240px, 40vw, 500px); object-fit: cover;
}
/* Gövde sitenin konteyner genişliğinde: kapak görseliyle aynı hizada */
.post-body { margin-top: 60px; }
.post-body p { margin-top: 22px; font-size: 17px; font-weight: 300; line-height: 1.78; color: var(--body); }
.post-body > p:first-child { margin-top: 0; }
.post-body h2 { margin-top: 50px; font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.post-body h2 + p { margin-top: 16px; }
.post-body ul { margin-top: 18px; padding-left: 21px; }
.post-body li { margin-top: 10px; font-size: 17px; font-weight: 300; line-height: 1.72; color: var(--body); }
.post-body li::marker { color: var(--red); }
.post-body strong { font-weight: 600; color: var(--ink); }
/* Diğer yazılar: ana sayfadaki üçlü liste bileşeninin aynısı; aynı bant sürer */
.post-more { background: var(--tint); padding: 92px 0 100px; }
/* Hizmet sayfalarında bölüm ana sayfadaki Hizmetler bandının aynısı:
   gümüş gri zemin, beyaz başlık, kaydırmalı kart şeridi */
.post-more--srv { background: var(--f-gray); }

@media (max-width: 992px) {
  .post { padding: 34px 0 72px; }
  .post-body { margin-top: 40px; }
  .post-body p, .post-body li { font-size: 16px; }
  .post-body h2 { margin-top: 38px; font-size: 21px; }
  .post-lead { font-size: 17px; }   /* ≤992 */
  .post-more { padding: 64px 0 72px; }
}

/* ═══════════ İLETİŞİM SAYFASI ═══════════ */
/* Üst blokta adres ve iletişim bilgileri alt alta.
   Alttaki form nacarogluevdeneve.com yapısında: etiketli alanlar, bot tuzağı,
   gönderim sonrası durum satırı. Renk dili Medya sayfasıyla aynı. */
/* Hero: solda başlık ve açıklama, sağda yol tarifi kutusu */
.sol-hero--ct { padding-bottom: 52px; }
.ct-hero-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 48px;
}
.ct-hero-row .sol-head { flex: 1 1 460px; min-width: 0; max-width: 640px; }
/* Kutu sitenin sağ sınırında durur (formun sağ kenarıyla aynı hizada) */

/* ── Adres & iletişim bloğu ──
   Zemin Süreç/Yorumlar bölümleriyle aynı; üstteki hero ve alttaki form beyaz. */
.ct-map { background: var(--tint); padding: 92px 0 100px; }

/* Yol tarifi kutusu — kabuk nemutlu "İhtiyaca Özel Çözümler" kartından:
   köşesiz kutu, solda ikon hücresi, 2px dikey ayraç, sağda gri yazı.
   Hover'da yazı ve ikon koyulaşır, ikonun arkasında kırmızı ışık belirir. */
.ct-pin {
  display: flex; align-items: stretch; width: fit-content; margin: 0;
  min-height: 130px; max-width: 100%; overflow: hidden;
  /* Cam: arkadaki artı deseni hafifçe görünsün */
  background: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(26,32,40,.09);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s, background-color .3s, box-shadow .35s;
}
.ct-pin-ico {
  position: relative; flex: none; width: 130px; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(26,32,40,.09);
  color: var(--red); transition: color .3s;
}
/* İkonun arkasındaki kırmızı ışık — yalnızca hover'da */
.ct-pin-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background-color: var(--red); filter: blur(15px);
  opacity: 0; transition: opacity .3s; z-index: 1;
}
.ct-pin-ico svg { position: relative; z-index: 2; }
.ct-pin-txt {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding: 0 38px; white-space: nowrap;
}
.ct-pin-label {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  color: var(--body); transition: color .3s;
}
.ct-pin-title {
  width: fit-content;
  font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em;
  /* Bölüm başlıklarıyla aynı gümüş gradyan */
  background: linear-gradient(90deg, #8a8f96 0%, #1a2028 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ct-pin:hover { transform: translateY(-6px); background: rgba(255,255,255,.66); border-color: rgba(26,32,40,.18); box-shadow: var(--shadow-soft); }
.ct-pin:hover .ct-pin-label { color: var(--ink); }
.ct-pin:hover .ct-pin-ico::after { opacity: .28; }

/* Bilgi kartları — kabuk Kurumsal sayfasındaki rakam kartlarıyla aynı düzen:
   üstte küçük kırmızı çizgi ikon, altında başlık ve değer. */
.ct-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ct-card {
  display: flex; flex-direction: column;
  padding: 36px 36px 30px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .35s, transform .35s;
}
.ct-card:hover { border-color: #d8dde3; box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.ct-card-ico { display: block; margin-bottom: 46px; color: var(--red); }
.ct-card-ico svg, .ct-card-ico img { width: 30px; height: 30px; display: block; }
.ct-card h2 { margin-bottom: 10px; font-size: 18px; font-weight: 400; line-height: 1.35; color: var(--ink); }
.ct-card p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--body); }
.ct-card a {
  color: var(--body); transition: color .25s;
  display: inline-block; padding: 5px 0; margin: -5px 0;   /* dokunma alanı 21 → 31px */
}
.ct-card a:hover { color: var(--red); }

/* ── Form ── */
/* Form bölümü de aynı zeminde: hero beyaz, altındaki iki bölüm tek bant */
.ct-form-sec { background: var(--tint); padding: 0 0 108px; }
/* Başlık üstte, form altında ve tam konteyner genişliğinde */
.ct-form-intro { max-width: 760px; margin-bottom: 46px; }
.ct-form-intro h2 { font-size: 30px; font-weight: 300; line-height: 1.28; letter-spacing: -.01em; color: var(--ink); }
.ct-form-intro p { margin-top: 20px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--body); }
/* Zemin sayfayla aynı beyaz, çerçeve duruyor; kart tam konteyner genişliğinde */
.ct-form {
  min-width: 0; padding: 36px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
}
.ct-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Boşluk yalnızca formun doğrudan çocukları arasında; satır içindeki iki alan
   yan yana ve aynı hizada kalmalı */
.ct-form > * + * { margin-top: 14px; }
/* .ct-lbl: denetimi yerel bir alan olmayan (konu açılır kutusu) satırın başlığı */
.ct-fld label, .ct-fld .ct-lbl {
  display: block; margin-bottom: 9px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--ink);
}
.ct-fld label em { font-style: normal; color: var(--red); }
/* Çerçeve yok: alanlar sitenin açık gri zemin tonuyla dolu */
.ct-field {
  width: 100%; padding: 15px 16px; border-radius: var(--radius);
  background: #f4f6f9; border: 1px solid transparent;
  font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--ink);
  transition: background-color .25s;
}
.ct-field:hover { background: #eef1f5; }
/* Telefon alanı: sabit +90 öneki, tek kutu gibi görünür */
/* Telefon alanı: +90 alanın içinde küçük beyaz bir hapta durur */
.ct-tel { position: relative; }
.ct-tel-pre {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; height: calc(100% - 12px); min-width: 58px; padding: 0 10px;
  border-radius: var(--radius) 0 0 var(--radius); background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 500; letter-spacing: .01em;
}
.ct-tel .ct-field { padding-left: 80px; }
.ct-field::placeholder { color: var(--muted); }
/* Odakta kırmızı değil, çerçevenin bir tık koyusu */
.ct-field:focus { outline: none; background: #eef1f5; }   /* odakta çerçeve yok, yalnız zemin koyulaşır */
textarea.ct-field { display: block; min-height: 132px; resize: vertical; }

/* ── Konu açılır kutusu: yerel <select> yerine kendi listemiz ── */
.dd { position: relative; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer;
}
.dd-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-arrow { flex: none; color: var(--muted); transition: transform .25s, color .25s; }
.dd.is-open .dd-btn { background: #eef1f5; }
.dd.is-open .dd-arrow { transform: rotate(180deg); color: var(--ink); }
.dd-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  max-height: 400px; overflow-y: auto;
  margin: 0; padding: 8px; list-style: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 22px 44px rgba(26,32,40,.14);
}
.dd-list[hidden] { display: none; }
.dd-list li {
  padding: 13px 14px; border-radius: 4px; cursor: pointer;
  font-size: 15px; font-weight: 300; line-height: 1.4; color: var(--body);
  transition: background-color .2s, color .2s;
}
.dd-list li:hover, .dd-list li.is-focus { background: var(--paper); color: var(--ink); }
.dd-list li[aria-selected="true"] { color: var(--red); font-weight: 400; }

.ct-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; cursor: pointer; }
.ct-consent input { flex: none; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--red); }
.ct-consent span { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--body); }
.ct-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ct-consent a:hover { color: var(--red); }
/* Bot tuzağı: gerçek ziyaretçi görmez, doldurulursa gönderim reddedilir */
.ct-hpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Gönder — dinlenirken sade kutu, hover'da kırmızıdan siyaha gradyan */
.ct-submit,
.rd-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
  padding: 18px 30px; border-radius: var(--radius); cursor: pointer;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: .01em;
  transition: border-color .25s, color .3s, opacity .25s;
}
.ct-submit::before,
.rd-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--red) 0%, #7d1512 44%, #131518 100%);
  opacity: 0; transition: opacity .3s;
}
.ct-submit svg,
.rd-cta svg { color: var(--red); transition: transform .25s, color .3s; }
.ct-submit:hover,
.rd-cta:hover { border-color: transparent; color: #fff; }
.ct-submit:hover::before,
.rd-cta:hover::before { opacity: 1; }
.ct-submit:hover svg,
.rd-cta:hover svg { color: #fff; transform: translateX(4px); }
/* Gönder: form alanlarıyla aynı dolgu, çerçevesiz (hover'da gradyan aynı kalır) */
.ct-submit { background: #f4f6f9; border-color: transparent; }
.ct-submit:hover { border-color: transparent; }
.ct-submit:disabled { opacity: .6; cursor: default; }
.ct-submit:disabled::before { opacity: 0; }
.ct-submit:disabled svg { transform: none; }
/* Kutu yok: yalnızca uyarı yazısı */
.ct-status {
  margin-top: 14px;
  font-size: 14px; font-weight: 400; line-height: 1.55;
}
.ct-status.ok  { color: #1f7a45; }
.ct-status.err { color: #a3201d; }
.ct-status[hidden] { display: none; }

@media (max-width: 992px) {
  .ct-map { padding: 60px 0 68px; }
  .ct-cards { grid-template-columns: 1fr; gap: 14px; }
  .ct-card { padding: 26px 26px 24px; }
  .ct-card-ico { margin-bottom: 26px; }
  /* Dar ekranda alt satıra iner, sola yaslanır */
  .ct-hero-row { gap: 34px; }
  .ct-hero-row .ct-pin { margin: 0 auto 0 0; }
  .ct-pin { min-height: 104px; }
  .ct-pin-ico { width: 100px; padding: 16px; }
  .ct-pin-txt { padding: 0 26px; }
  .ct-pin-title { font-size: 22px; }
  .ct-form-sec { padding: 0 0 76px; }
  .ct-form-intro { margin-bottom: 34px; }
  .ct-form { padding: 24px; }
  .ct-frow { grid-template-columns: 1fr; }
}

/* ═══════════ MEDYA SAYFASI ═══════════ */
/* nemutlu medya merkezi kurgusu: üstte kategori kartları, seçilen kategorinin
   içeriği kartların hemen altında açılır. Kart dili sitenin koyu kartlarıyla aynı. */
.sol-hero--dark { background: var(--dark); padding-bottom: 84px; }
/* Desen Neden Biz sayfasıyla aynı: aynı konum, aynı maske, aynı görünürlük */
.sol-hero--dark .sol-crumb, .sol-hero--dark .sol-crumb a { color: rgba(255,255,255,.48); }
.sol-hero--dark .sol-crumb a:hover { color: var(--red); }
.sol-hero--dark .sol-crumb span { color: rgba(255,255,255,.9); }
.sol-hero--dark .sol-head h1 { color: #f2f4f7; }
.sol-hero--dark .sol-head > p { color: rgba(255,255,255,.58); }

/* ── Kategori kartları ── */
.media-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 74px; }
.media-nav-card {
  position: relative; overflow: hidden; display: block; min-height: 250px; padding: 30px;
  background: linear-gradient(135deg, #1d1d1d 0%, #3f3f3f 100%);
  border: 1px solid rgba(184,184,184,.1); border-radius: var(--radius);
  transition: border-color .3s;
}
.media-nav-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .55s cubic-bezier(.22,1,.36,1);
}
/* Görsel tam kartı kaplıyor: metnin okunurluğu için soldan güçlü karartma */
.media-nav-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,10,13,.93) 0%, rgba(8,10,13,.82) 38%, rgba(8,10,13,.5) 72%, rgba(8,10,13,.38) 100%);
}
.media-nav-card:hover { border-color: #fff; }
.media-nav-card:hover img { transform: scale(1.05); }
.media-nav-text { position: relative; z-index: 2; max-width: 62%; }
/* Saydam ikon taşıyan kart: fotoğraf değil grafik — karartma yok, görsel sağda durur */
.media-nav-card--ico::before { display: none; }
.media-nav-card--ico img {
  inset: 50% 28px auto auto; transform: translateY(-50%);
  width: auto; height: 64%; max-width: 32%;      /* geniş ikonlar metne binmesin */
  object-fit: contain; object-position: center right;
}
.media-nav-card--ico:hover img { transform: translateY(-50%) scale(1.05); }
.media-nav-card--ico .media-nav-text { max-width: 55%; }

.media-nav-card.is-active { border-color: var(--red); }
.media-nav-text p {
  margin-top: 10px; font-size: 13px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.5);
}
.media-nav-text h2 {
  font-size: 19px; font-weight: 400; line-height: 1.3; color: #f2f4f7;
}

/* ── Seçilen kategorinin içeriği ── */
.media { background: var(--dark); padding: 96px 0 108px; }
.media-head { margin-bottom: 44px; }
.media-head--center { margin-bottom: 0; }   /* galeri başlığı: sola hizalı, alt boşluk ızgaradan gelir */
/* Koyu zeminde sitenin klasik başlık gradyanı */
.media-head h2 {
  font-size: 32px; font-weight: 300; line-height: 1.28; width: fit-content;
  background: linear-gradient(90deg, #8a8f96 0%, #e8ebef 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.media-head h2 em { font-style: normal; font-weight: inherit; }
.media-head p { margin-top: 14px; max-width: 620px; font-size: 16px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.5); }

/* İçerik kartı — stelll ürün kartının uyarlaması */
/* Galeri: üçerli ızgara, ilk 6 öğe görünür, gerisi "Daha Fazla" ile açılır */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.media-more-wrap { display: flex; justify-content: center; }
.media-more {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 36px; padding: 16px 32px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #f2f4f7;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  transition: box-shadow .3s;
}
.media-more::before {                                  /* baştaki kırmızı artı */
  content: "+"; color: var(--red);
  font-size: 30px; font-weight: 400; line-height: .6; margin-top: -2px;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
/* Hover: kutu rengi aynı kalır, yalnızca hafif beyaz hâle belirir */
.media-more:hover { box-shadow: 0 0 10px rgba(255,255,255,.24); }   /* dar, hafif hâle */
.media-more:hover::before { transform: rotate(90deg); }
.media-more[hidden] { display: none; }
.media-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 348px; padding: 40px;
  background: linear-gradient(135deg, #1d1d1d 0%, #3f3f3f 100%);
  border-radius: var(--radius);
}
button.media-card {
  width: 100%; font: inherit; text-align: left; border: 0; cursor: pointer;
}
button.media-card[data-video=""] { cursor: default; }   /* kaynak girilene kadar tıklanmaz */
.media-card[hidden] { display: none; }
.media-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.media-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,10,13,.93) 0%, rgba(8,10,13,.82) 38%, rgba(8,10,13,.5) 72%, rgba(8,10,13,.38) 100%);
}
.media-card:hover img { transform: scale(1.05); }
.media-card-top { display: block; position: relative; z-index: 2; max-width: 62%; }
.media-card h3, .media-card-title {
  display: block;
  font-size: 19px; font-weight: 400; line-height: 1.35; color: #f2f4f7;
}
.media-card-cat {
  display: block; margin-top: 7px; font-size: 14px; font-weight: 300; color: rgba(255,255,255,.5);
}
/* Video kartı: yazısız, beyaz çerçeveli play butonu */
.play-btn {
  position: relative; z-index: 2; margin-top: auto; align-self: flex-start;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid #fff; color: #fff; background: transparent;
  transition: box-shadow .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.play-btn svg { display: block; margin-left: -1px; }   /* ikon kutusundaki hazır sağ kaçıklık dengelendi */
/* "Daha Fazla" düğmesiyle aynı: kutu rengi değişmez, dar beyaz hâle belirir */
.media-card:hover .play-btn { box-shadow: 0 0 10px rgba(255,255,255,.24); transform: scale(1.06); }

/* Foto karoları — metin/buton yok, tıklanınca büyütülür */
.photo-item {
  position: relative; display: block; overflow: hidden; min-height: 348px; cursor: pointer;
  background: #141414; border-radius: var(--radius);
}
.photo-item[hidden] { display: none; }
.photo-item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.photo-item:hover img { transform: scale(1.05); }

/* Görsel büyütme katmanı */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 56px 64px;
  background: rgba(8,10,13,.95);
}
.lb.is-open { display: flex; }
.lb img, .lb video { max-width: min(1240px, 92vw); max-height: 84vh; object-fit: contain; display: block; }
.lb iframe { width: min(1240px, 92vw); aspect-ratio: 16 / 9; max-height: 84vh; border: 0; display: block; }
.lb-btn[hidden] { display: none; }   /* display:grid, [hidden]'ı eziyordu */
.lb-btn {
  position: absolute; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff;
  transition: background-color .25s, border-color .25s;
}
.lb-btn:hover { background: var(--red); border-color: var(--red); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: 13px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums;
}
body.lb-lock { overflow: hidden; }

/* Belgeler — içerik kartlarıyla aynı dil, 4'lü ızgara */
.doc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.doc-grid--tek { grid-template-columns: repeat(4, 1fr); }
.doc-grid--tek .doc-card { grid-column: span 1; }
.doc-card {
  position: relative; display: flex; flex-direction: column; cursor: pointer;
  min-height: 320px; padding: 34px;
  background: #fff; border: 1px solid #e7eaee; border-radius: var(--radius);
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.doc-card:hover {
  border-color: #d8dde3; box-shadow: 0 16px 34px rgba(0,0,0,.28); transform: translateY(-3px);
}
.doc-card h3 { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.doc-card-meta { display: block; margin-top: 8px; font-size: 13px; font-weight: 300; color: var(--muted); }
/* Blogdaki "Devamını oku" ile aynı yapı: kutu yok, ok hover'da belirir */
.doc-more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 400; color: var(--muted);
  transition: transform .35s cubic-bezier(.22,1,.36,1), color .25s;
}
.doc-arrow {
  font-style: normal; font-size: 20px; line-height: 1; color: var(--red);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.doc-card:hover .doc-more { color: var(--ink); }
.doc-card:hover .doc-arrow { opacity: 1; transform: translateX(0); }

/* SSS akordiyonu — başlık solda, sorular sağda; her soru kendi çerçevesinde */
.faq-layout { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 88px; align-items: start; }
.faq-layout .media-head { margin-bottom: 0; position: sticky; top: 118px; }
.faq-layout .media-head p { max-width: none; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: transparent;
  border: 1px solid rgba(184,184,184,.16); border-radius: var(--radius);
  transition: border-color .3s;
}
.faq-item:hover, .faq-item.open { border-color: rgba(255,255,255,.24); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 26px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 17px; font-weight: 400; line-height: 1.45; color: #f2f4f7;
  transition: color .25s;
}
.faq-q:hover { color: var(--red); }
.faq-sign { flex: 0 0 auto; position: relative; width: 14px; height: 14px; margin-top: 5px; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px;
  background: var(--red); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item.open .faq-sign::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; height: 0; transition: height .34s cubic-bezier(.22,1,.36,1); }
.faq-a p { padding: 0 52px 24px 26px; font-size: 16px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.58); }
html:not(.js) .faq-a { height: auto; }

@media (max-width: 1200px) {
  .media-nav { grid-template-columns: repeat(2, 1fr); }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .sol-hero--dark { padding-bottom: 60px; }
  .media { padding: 68px 0 76px; }
  .media-nav { margin-top: 52px; gap: 14px; }
  .media-nav-card { min-height: 176px; padding: 22px 24px; }
  .media-nav-card--ico img { height: 56%; max-width: 28%; inset: 50% 22px auto auto; }
  .media-nav-text h2 { font-size: 17px; }
  .media-head { margin-bottom: 32px; }
  .media-head h2 { font-size: 26px; }
  .media-grid { grid-template-columns: 1fr; gap: 14px; }
  .media-card { min-height: 290px; padding: 26px; }
  .photo-item { min-height: 290px; }
  .lb { padding: 64px 18px; }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
  .doc-card { min-height: 248px; padding: 26px; }
  .faq-layout { grid-template-columns: 1fr; gap: 34px; }
  .faq-layout .media-head { position: static; }
  .faq-q { font-size: 16px; }
  .faq-a p { padding-right: 20px; }
}
@media (max-width: 560px) {
  .media-nav { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .media-nav-text, .media-card-top { max-width: 62%; }
}

/* ═══════════ WHATSAPP FLOAT ═══════════ */
.wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  display: grid; place-items: center;
  transition: transform .25s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float img { width: 62px; height: 62px; }

/* ═══════════ ANİMASYON: scroll reveal ═══════════ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .hero-bg { transition: none; transform: none; }
  .js .hero .hero-title, .js .hero .hero-sub, .js .hero .hero-cta {
    opacity: 1; animation: none;
  }
  .hero-slide { transition: none; }
  .nav-logo-mark, .nav-logo-mark::after, .nav-logo-text { animation: none; }
  .bucket-chip { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .nav-logo-text { -webkit-text-fill-color: #fff; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1400px) {
  .nav-menu { gap: 34px; }
  .nav-wrap, .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1200px) {
  /* 993-1200px arasında logo + menü + CTA satıra sığmayıp navbar'ı 1-2px taşırıyordu */
  .nav-menu { gap: 24px; }
  .nav-side { min-width: 168px; }
  .nav-wrap, .container { padding-left: 18px; padding-right: 18px; }
  .stats-grid { flex-direction: column; align-items: flex-start; gap: 48px; }
  .stats-left { width: 100%; }
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 22px; }
  .section-head--split h2 { max-width: none; }
  .section-head--split .section-desc { flex: 0 1 auto; max-width: 640px; }
  /* Kolon düzende flex-basis yüksekliğe dönüşür: başlıkla açıklama arasında dev boşluk oluyordu */
  .blog .section-head--split, .post-more .section-head--split { gap: 22px; }   /* 80px yatay boşluk dikeyde çok büyüktü */
  /* Dikey düzende flex-basis yüksekliğe dönüşüyor: 520px'lik başlık kutusu
     "Diğer Hizmetlerimiz" bölümünü boş yere uzatıyordu */
  .blog .section-head--split h2,
  .post-more .section-head--split h2 { flex: 0 1 auto; max-width: none; }
  .blog .section-desc, .post-more .section-desc { flex: 0 1 auto; }
}
@keyframes navSubIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 992px) {
  .room-card { flex-basis: calc((100% - 20px) / 2); }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { flex-basis: calc((100% - 26px) / 2); }
  .nav-wrap { height: 78px; gap: 10px; }
  /* CTA gizlendiği için hizalama derdi biter: içerik nefes alsın */
  .container { padding-left: 24px; padding-right: 24px; }
  .nav-side { display: none; }
  .nav-burger { display: block; }
  /* Mobil menü, masaüstündeki açılır menü paneliyle aynı dil:
     aynı cam zemin, aynı satır tipografisi, aynı açılış hareketi */
  .nav-menu {
    /* Masaüstündeki açılır menü kartıyla aynı ölçü: tam ekran değil, sağa yaslı panel */
    /* Bardan hafif ayrık: masaüstünde panel barın hemen dibinden başlıyor */
    position: absolute; top: calc(100% + 10px); left: auto; right: 18px;
    width: 304px; max-width: calc(100vw - 3rem);
    background: rgba(103,103,103,.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    flex-direction: column; align-items: stretch;
    gap: 20px;
    padding: 30px 35px;
    transform: translateY(-20px) scale(.95);
    transform-origin: top right;
    opacity: 0; visibility: hidden;
    transition: all .3s cubic-bezier(.4,0,.2,1);
  }
  .nav-menu.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
  .nav-menu > a,
  .nav-drop > a {
    width: 100%; padding: 0;
    justify-content: space-between;
    font-size: 16px; font-weight: 400; line-height: 1.3;
  }
  /* Masaüstü barındaki ızgara ikonu panelde yok */
  .nav-drop > a.has-ico svg { display: none; }
  .nav-drop { width: 100%; }
  /* ── Mobilde alt menüler: satırın altına açılmaz, panelin içinde ayrı sayfa olarak açılır ── */
  .quick-menu { display: none; }
  /* Alt menüsü olan satırlarda ok */
  .nav-drop > a::after {
    content: ""; flex: none;
    width: 16px; height: 16px;
    background: linear-gradient(90deg, #8a8f96 0%, #e8ebef 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Alt menü açıkken ana satırlar gizlenir, panelde yalnız o menü kalır */
  .nav-menu.sub-open > a,
  .nav-menu.sub-open .nav-drop:not(.is-open),
  .nav-menu.sub-open .nav-drop.is-open > a { display: none; }
  .nav-drop.is-open .quick-menu {
    display: block; position: static;
    padding: 0; visibility: visible; pointer-events: auto;
  }
  .nav-drop.is-open .quick-menu-panel {
    width: auto; max-width: none; padding: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none; opacity: 1;
    animation: navSubIn .3s cubic-bezier(.4,0,.2,1) both;
  }
  .quick-back {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-bottom: 20px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 600; color: #fff;
    text-align: left;
  }
  .quick-back::before {
    content: ""; flex: none;
    width: 16px; height: 16px;
    background: linear-gradient(90deg, #8a8f96 0%, #e8ebef 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Dokunmatikte hover yok: alt menü satırlarındaki anahtar ikonu gizli kalsın */
  .quick-menu-item img { display: none; }
  /* Beyaz zeminli sayfalarda panelin kendisi koyu olduğu için satırlar da beyaz olmalı */
  .site-header--light .nav-menu { background: rgba(22,26,32,.72); }
  .site-header--light .nav-menu > a,
  .site-header--light .nav-drop > a { color: #fff; }
  .site-header--light .nav-menu > a:hover,
  .site-header--light .nav-drop > a:hover { color: rgba(255,255,255,.62); }
  .compare { padding: 60px 0 56px; }
  .section { padding: 60px 0; }
  .section-head h2 { font-size: 30px; line-height: 1.28; }
  .section-head { margin-bottom: 44px; }
  .section-head--split .section-desc,
  .section-head--left .section-desc { font-size: 16px; line-height: 1.6; }
  .compareSlider { flex-wrap: wrap; padding-bottom: 8px; }
  .stats { padding: 60px 0; }
  .cta-band { padding: 60px 0; }
  .stats-bento { grid-template-columns: 1fr; width: 100%; }
  /* Tek kolonda kartlar sağa yaslı ve 20px dar kalıyordu: tam genişliğe aç */
  .stats-col { align-items: stretch; gap: 16px; }
  /* Kolon içi ve kolonlar arası boşluk aynı olsun: tek sırada eşit aralık */
  .stats-bento { gap: 16px; }
  /* Sıralama süreç adımlarıyla (01-02-03) başlasın, rakam kartları sonra gelsin */
  .stats-bento .stats-col:nth-child(2) { order: -1; }
  .stats-col .stat-card { width: 100%; }
  .stats-col--shift, .stats-bento .stats-col:first-child { margin-top: 0; }   /* kaydırma payı tek kolonda fazladan boşluk yapıyordu */
  .stat-card--big { min-height: 0; gap: 22px; }
  .flow { min-height: auto; }
  /* ── Neden Biz: tek kolon, kutu üstte ── */
  /* NOT: yatay dolgu .container'dan gelir; kısayol kullanılırsa sıfırlanır */
  /* gap: çipin kutunun üstünde asılı kaldığı boşluk kadar olmalı (yazıya binmesin) */
  .flow .flow-grid { flex-direction: column; align-items: stretch; padding-top: 96px; padding-bottom: 104px; gap: 118px; }   /* kutu metinden uzaklaşsın, bant yükselsin */
  .flow-left { flex: 1 1 auto; align-self: stretch; }   /* kolon düzende flex-end sağa itiyordu */
  .flow-head { width: 100%; gap: 18px; }
  /* 360px altında 30px'lik satır sığmıyordu: yalnız o aralıkta küçülür */
  .flow-head h2 { font-size: min(30px, 8vw); line-height: 1.2; }
  .flow-head p { max-width: 560px; font-size: 16px; line-height: 24px; }
  .flow-head-logo { position: static; top: auto; width: 84px; height: 84px; margin-bottom: 4px; }
  /* Mobilde sıra: başlık üstte, kutu altta */
  .flow-bucket {
    flex: 0 0 auto;
    width: 100%; max-width: 560px; margin: 0 auto;
    --drop-start: -76px; --drop-end: 206px;      /* kutu ölçüsüyle birlikte çip mesafeleri */
  }
  .bucket-chip {
    max-width: 88%;
    gap: 12px;
    padding: 10px 18px 10px 10px;
    top: -14%;
  }
  .bucket-chip-ico { width: 44px; height: 44px; }
  .bucket-chip-ico svg { width: 27px; height: 27px; }
  .bucket-chip-title { font-size: 15px; }
  /* Dar ekranda oran çok basık kalıyor; stelll de burada ekran yüksekliğine geçiyor */
  .hero-slides {
    aspect-ratio: auto;
    height: 74svh;       /* tam ekran değil: alttaki bölüm görünsün, kaydırmaya davet etsin */
    min-height: 480px;
    max-height: 640px;
  }
  /* İçerik navbar'ın altında ortalansın; kısa ekranlarda başlık bara giriyordu */
  .hero-inner { padding-top: 78px; }
  .hero-sub { margin-top: 18px; font-size: 16px; line-height: 25px; }
  .hero-cta { margin-top: 30px; height: 58px; padding: 0 32px; }
  /* Kurumsal sayfası */
  .about-hero { padding-top: 128px; }
  .about-unit { margin-top: 46px; }
  .about-story { margin-top: -100px; padding: 162px 0 84px; }
  .about-story-inner > p { font-size: 17px; }
  .about-story-inner > h2 { font-size: 20px; }
  .about-values-track { grid-template-columns: repeat(2, 1fr); }   /* tablette 2'li */
  /* Çözümlerimiz: akordiyon dar ekranda alt alta, hepsi açık */
  .sol-hero { padding: 128px 0 72px; }
  .sol-crumb { margin-bottom: 32px; }
  .about-hero::before, .sol-hero::before {
    top: 78px;
    /* Dar ekranda metin ortada duruyor: desen metnin arkasında sönük kalsın,
       aşağıya doğru güçlensin (desen kaldırılmadı, yalnızca geri çekildi) */
    opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 44%, rgba(255,255,255,.7) 64%, #fff 80%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 44%, rgba(255,255,255,.7) 64%, #fff 80%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .sol-intro-inner { gap: 18px; margin-top: 70px; }
  .sol-key { margin-top: 6px; transform: scale(.82); transform-origin: left top; }
  .sol-solutions { padding: 72px 0 78px; }
  .steps { padding: 72px 0 78px; }
  .steps-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 54px; }
  .step { padding: 0; }
  .step + .step { padding: 34px 0 0; border-left: 0; border-top: 1px solid rgba(26,32,40,.12); }
  .steps-head h2 { font-size: 26px; }
  .steps-desc { font-size: 16px; line-height: 25px; }
  .about-dark { padding: 72px 0; }
  .about-dark > .container > * + * { margin-top: 84px; }
  .about-vm { flex-direction: column; align-items: stretch; gap: 22px; }
  .about-vm > h3 { flex: 0 0 auto; font-size: 28px; }
  .about-vm-body { flex: 1 1 auto; margin-left: 0; gap: 18px; }
  .about-vm-body p { font-size: 16px; line-height: 25px; }
  .about-values { margin-top: 84px; }
  .about-values > h2 { font-size: 26px; margin-bottom: 32px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-quality { flex-direction: column; align-items: flex-start; gap: 26px; }
  .prefooter { gap: 28px; }
  .footer-main::before { font-size: 80px; }
}
@media (max-width: 576px) {
  .service-card { flex-basis: 78%; }
  .room-card { flex-basis: 78%; padding: 24px; }
  .rooms-grid { grid-template-columns: 1fr; }
  .room-badge { top: 24px; right: 24px; }   /* kart dolgusuyla aynı hizada kalsın */
  .room-shot { height: 250px; margin: 22px 0 26px; }
  .service-media { height: 250px; }
  .service-body { padding: 24px; }
  .section { padding: 52px 0; }
  .stats { padding: 52px 0; }
  .cta-band { padding: 52px 0; }
  .section-head h2 { font-size: 26px; }
  .stats-left h2 { font-size: 26px; }
  /* Alt metinler 26px başlıklarla dengelensin (footer sloganı aynı kalır) */
  /* Telefonda desen daha da geri çekilir: metnin okunurluğu önce gelir */
  .about-hero::before, .sol-hero::before { opacity: .28; }
  /* Blog / yazı / iletişim hero'larında metin bandın büyük kısmını kaplıyor:
     desen yalnızca metnin bittiği alt bölgede belirsin */
  .sol-hero--blog::before, .sol-hero--post::before, .sol-hero--ct::before {
    opacity: .24;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255,255,255,.3) 80%, rgba(255,255,255,.75) 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255,255,255,.3) 80%, rgba(255,255,255,.75) 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .section-desc,
  .section-head--split .section-desc,
  .section-head--left .section-desc { font-size: 14px; line-height: 1.6; }
  /* İç sayfa giriş metinleri: anasayfadaki ölçekle aynı hizaya çekildi */
  .sol-head > p,
  .post-lead,
  .about-story-inner > p,
  .about-values-desc,
  .media-head p { font-size: 16px; line-height: 1.6; }
  .cta-band p { font-size: 14px; line-height: 1.6; }
  .flow-head p { font-size: 14px; line-height: 1.6; }
  .blog-row h3 { font-size: 17px; }
  .section-head { margin-bottom: 34px; }
  .section-head--split, .section-head--left { margin-bottom: 32px; }
  .blog-row { flex-wrap: wrap; gap: 16px; }
  .blog-more { display: none; }   /* satırın tamamı bağlantı: telefonda ayrıca gerekmiyor */
  .blog-thumb { width: 108px; height: 74px; }
  .blog-text { flex: 1 1 200px; gap: 6px; }
  .blog-row h3 { font-size: 18px; }
  .blog-date { font-size: 13px; }
  .review-card { width: min(92vw, 460px); padding: 26px 24px; gap: 18px; }   /* sabit 320px dar kalıyordu: ekrana göre genişler */
  .footer-cols { grid-template-columns: 1fr; }
  .footer-contactbar-inner { align-items: flex-start; flex-direction: column; gap: 20px; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .hero-title br { display: none; }
  .about-values-track { grid-template-columns: 1fr; }   /* telefonda tek kolon, tam genişlik */
  .about-value { padding: 26px; }
  .nav-logo-text { font-size: 17px; }
  .nav-logo { --logo-shift: 72px; }
  /* Telefonda kutu kapsayıcı dolgusunun dışına biraz taşsın: daha büyük görünür
     (.flow'da overflow: hidden var, sayfa taşması olmaz) */
  .flow-bucket {
    width: calc(100% + 40px); max-width: none; margin-left: -20px; margin-right: -20px;
    --drop-start: -60px; --drop-end: 168px;
  }
  .bucket-chip { max-width: 92%; padding: 9px 16px 9px 9px; }
  .bucket-chip-title { font-size: 14px; }
  .flow-head-logo { width: 74px; height: 74px; }
  .nav-logo img { width: 46px; height: 46px; }
  .prefooter { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* Adres iki satıra sardığında ikon ortada kalıp kopuk duruyordu: ilk satıra hizala */
  .fc-item { align-items: flex-start; font-size: 13px; }   /* 13px'te "…Nolu Cad." satırı tek parça sığar */
  .fc-item svg, .fc-item img { margin-top: 2px; }
  /* Footer sütunları akordiyon: başlık satırı düğme, ok durumu gösterir */
  .footer-cols { gap: 0; padding-top: 40px; padding-bottom: 44px; }
  .footer-col:not(.footer-col--social) h3 {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0; padding: 16px 0; cursor: pointer;
  }
  .footer-col:not(.footer-col--social) h3::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);   /* aşağı ok: kapalı */
    transition: transform .25s ease;
  }
  .footer-col.is-open h3::after { transform: rotate(-135deg) translate(-2px, -2px); }   /* yukarı ok: açık */
  .footer-col--social {
    margin-top: 28px; padding-top: 28px; position: relative;
  }
  .footer-col--social::before {           /* menülerden ayıran şerit, içerik genişliğinde */
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: rgba(255,255,255,.35);
  }
  .fc-panel { height: 0; overflow: hidden; transition: height .3s cubic-bezier(.4,0,.2,1); }
  .footer-col.is-open .fc-panel { height: auto; }
  .fc-panel > a:first-child { padding-top: 14px; }
  .fc-panel > a:last-child { padding-bottom: 18px; }
  .footer-social { padding-bottom: 4px; }

  /* Ayırıcı çizgiler ekran kenarına dayanmasın: içerik genişliğinde dursun */
  .footer-quality { border-bottom: 0; position: relative; }
  .footer-quality::after {
    content: ""; position: absolute; left: 24px; right: 24px; bottom: 0;
    height: 1px; background: rgba(255,255,255,.35);
  }
  .footer-contactbar-inner { border-top: 0; position: relative; }
  .footer-contactbar-inner::before {
    content: ""; position: absolute; left: 24px; right: 24px; top: 0;
    height: 1px; background: rgba(255,255,255,.35);
  }

  /* Menüler ve "Eşyanızın güvenliği…" satırı solda; footerın kalanı ortalı */
  .footer-col--social { text-align: center; }
  .footer-social { justify-content: center; }
  .footer-contactbar-inner { align-items: center; text-align: center; }
  .footer-contactbar-inner .footer-logo { align-self: center; }
  .fc-item { justify-content: center; text-align: center; }

  /* Alt şerit: önce hukuki bağlantılar, telif altta — ortalı */
  .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer-legal { order: -1; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .wa-float { right: 18px; bottom: 18px; width: 54px; height: 54px; }
}

/* ═══════════ PANELDEN VERİLEN RENK ═══════════
   Bölüm başlıkları gradyanla ya da sabit bir renkle yazılıyor
   (-webkit-text-fill-color); bu, başlığın içine konan rengi de eziyordu, yani
   panelden bir ifadeyi renklendirmek sitede hiçbir şeyi değiştirmiyordu.
   Aşağıdaki kural yalnızca RENK VERİLMİŞ parçayı serbest bırakır: dokunulmamış
   başlıklar, mevcut vurgular ve gradyan olduğu gibi kalır. */
.section-head h2 [style*="color"],
.steps-head h2 [style*="color"],
.media-head h2 [style*="color"],
.about-values > h2 [style*="color"],
.flow-head h2 [style*="color"],
.about-vm h3 [style*="color"],
.sol-head h1 [style*="color"] {
  -webkit-text-fill-color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   ÇEREZ ONAYI — band + ayar penceresi
   KVKK gereği pazarlama ve analitik çerezler için ayrı ayrı,
   önceden rıza alınır. Arayüzü /assets/js/olcum.js kurar.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── Alt band ───────── */
.cerez-band {
  /* Kutu değil: tarayıcı genişliğinde tam blok */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  border-top: 1px solid rgba(255, 255, 255, .1);
  /* Siyahtan koyu bordoya */
  background: linear-gradient(115deg, #000 0%, #2a0605 55%, #3d0908 100%);
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.cerez-band.acik { transform: none; }
/* İçerik de tarayıcı genişliğini kullanır: metin solda, butonlar sağ uçta */
.cerez-band-ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; padding: 30px 36px;
}
.cerez-metin {
  flex: 1 1 540px; min-width: 0;
  font-size: 13px; font-weight: 300; line-height: 1.72; color: #fff;
}
.cerez-metin b { font-weight: 600; color: #fff; }
.cerez-metin a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cerez-metin a:hover { color: rgba(255, 255, 255, .72); }

/* Üç seçenek de aynı ağırlıkta: reddetmek kabul etmek kadar kolay olmalı.
   Beyaz zemin, yumuşak köşe; hover efekti yok. Klavye odağı görünür kalır. */
.cerez-butonlar { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.cerez-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; cursor: pointer; white-space: nowrap;
  min-width: 150px;   /* üçü de en uzun etikete göre eşit genişlikte */
  border: 0; border-radius: var(--radius); background: #fff; color: var(--ink);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  line-height: 1;
}
.cerez-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ───────── Ayar penceresi ───────── */
.cerez-katman {
  position: fixed; inset: 0; z-index: 310;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: rgba(8, 10, 13, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .28s ease;
}
.cerez-katman.acik { opacity: 1; }
.cerez-kutu {
  width: min(760px, 100%); max-height: min(86vh, 860px);
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 90px rgba(8, 10, 13, .38);
  transform: translateY(16px) scale(.985);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.cerez-katman.acik .cerez-kutu { transform: none; }

/* Başlık ortada, kapat düğmesi sağ üstte (akıştan çıkarılır ki
   başlık kutunun tam ortasında kalsın). */
.cerez-kutu-bas {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 26px 64px 0;
}
/* Kapat: yalnızca çarpı işareti. Tıklama alanı 40x40 kalır ama
   arkasında daire/zemin çıkmaz; üzerine gelindiğinde yalnızca rengi koyulaşır. */
.cerez-kapat {
  position: absolute; top: 20px; right: 22px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--body); transition: color .25s;
}
.cerez-kapat:hover { color: var(--ink); }

.cerez-govde {
  padding: 20px 32px 30px; overflow-y: auto; flex: 1 1 auto;
}
.cerez-baslik {
  text-align: center;
  font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--ink);
}
.cerez-giris {
  font-size: 14px; font-weight: 300; line-height: 1.74; color: var(--body);
}
.cerez-giris a {
  color: var(--red); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* Kategori satırları */
.cerez-grup { border-top: 1px solid var(--line); }
.cerez-grup:first-of-type { margin-top: 28px; }
.cerez-grup:last-of-type { border-bottom: 1px solid var(--line); }
.cerez-grup-bas { display: flex; align-items: center; gap: 14px; padding: 20px 0; }
.cerez-ac {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 17px; font-weight: 500; color: var(--ink);
  transition: color .25s;
}
.cerez-ac:hover { color: var(--red); }
.cerez-ok { flex: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1); color: var(--muted); }
.cerez-ac[aria-expanded="true"] .cerez-ok { transform: rotate(90deg); color: var(--red); }
.cerez-sabit { flex: none; font-size: 13px; font-weight: 500; color: var(--muted); }

.cerez-grup-govde {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1);
}
.cerez-grup-govde > div { overflow: hidden; }
.cerez-grup.acik .cerez-grup-govde { grid-template-rows: 1fr; }
.cerez-grup-govde p {
  padding-bottom: 20px;
  font-size: 14px; font-weight: 300; line-height: 1.72; color: var(--body);
}

/* Aç/kapa anahtarı */
.cerez-anahtar { flex: none; display: inline-flex; cursor: pointer; }
.cerez-anahtar input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.cerez-yuva {
  position: relative; display: block; width: 50px; height: 28px;
  border-radius: 999px; background: #d3d9e0; transition: background-color .28s;
}
.cerez-yuva::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(26, 32, 40, .28);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.cerez-anahtar input:checked + .cerez-yuva { background: var(--red); }
.cerez-anahtar input:checked + .cerez-yuva::after { transform: translateX(22px); }
.cerez-anahtar input:focus-visible + .cerez-yuva { outline: 2px solid var(--ink); outline-offset: 3px; }

.cerez-alt {
  display: flex; justify-content: center; gap: 12px;
  padding: 8px 32px 30px;
}
/* Kaydet: dolu kutu. Gradyan, navbar'daki "Teklif Al" bloğuyla aynı —
   sayfadaki birincil eylem diliyle tutarlı. Hover efekti yok. */
.cerez-kaydet {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 34px; cursor: pointer;
  border: 0; border-radius: var(--radius);
  background: linear-gradient(115deg, #3d0908 0%, var(--red) 100%);
  color: #fff;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  line-height: 1;
}
.cerez-kaydet:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Sabit "Çerez Ayarları" düğmesi — sol altta, WhatsApp'ın karşı köşesinde.
   Yalnızca [data-cerez-ayar] işaretçisi olan sayfada basılır. */
/* Kulakçık: sol kenara yapışır, yalnızca içeri bakan köşeleri yuvarlaktır. */
.cerez-ayar-dugme {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 90;
  display: grid; place-items: center;
  width: 60px; height: 60px; padding: 0; cursor: pointer;
  border: 0; border-radius: 0 10px 10px 0;
  /* Navbar'daki "Teklif Al" ve kaydet düğmesiyle aynı gradyan */
  background: linear-gradient(115deg, #3d0908 0%, var(--red) 100%);
  color: #fff;
  box-shadow: 6px 0 20px rgba(8, 10, 13, .18);
}
.cerez-ayar-dugme svg { flex: none; }
.cerez-ayar-dugme:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Band açıkken WhatsApp düğmesi üstte kalsın.
   --cerez-h bandın gerçek yüksekliğidir; olcum.js ölçüp yazar. */
.cerez-var .wa-float { transform: translateY(calc(-1 * (var(--cerez-h, 112px) + 22px))); }
.cerez-var .wa-float:hover { transform: translateY(calc(-1 * (var(--cerez-h, 112px) + 22px))) scale(1.08); }

@media (max-width: 992px) {
  .cerez-band-ic { padding: 26px 20px; gap: 16px; }
  .cerez-metin { flex-basis: 100%; font-size: 13px; line-height: 1.62; }
  .cerez-butonlar { width: 100%; gap: 8px; }
  .cerez-btn { flex: 1 1 0; width: auto; min-width: 0; height: 44px; padding: 0 8px; }
  .cerez-katman { padding: 0; align-items: flex-end; }
  .cerez-kutu { width: 100%; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
  .cerez-kutu-bas { padding: 20px 56px 0; }
  .cerez-kapat { top: 14px; right: 14px; }
  .cerez-govde { padding: 18px 22px 26px; }
  .cerez-baslik { font-size: 19px; }
  .cerez-alt { padding: 16px 22px 22px; }
  .cerez-kaydet { width: 100%; }
}
/* Çok dar ekranda (iPhone SE gibi) "Çerezleri Ayarla" yan yana sığmıyor,
   etiket kutudan taşıyordu: üçü alt alta, yine eşit genişlikte. */
@media (max-width: 560px) {
  .cerez-ayar-dugme { width: 52px; height: 52px; border-radius: 0 10px 10px 0; }
}

@media (max-width: 340px) {
  .cerez-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cerez-band, .cerez-katman, .cerez-kutu, .cerez-grup-govde, .cerez-ok, .cerez-yuva::after { transition: none; }
}

/* ═══════════ HUKUKİ METİNLERDE TABLO ═══════════
   Çerez listesi gibi çok kolonlu tablolar. Tipografi .rd-table ile aynı;
   dar ekranda tablo kendi içinde yatay kayar, sayfa kaymaz. */
.legal-tablo-sar {
  overflow-x: auto; margin-top: 22px; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.legal-tablo { width: 100%; min-width: 760px; border-collapse: collapse; }
.legal-tablo th, .legal-tablo td {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink);
  text-align: center; vertical-align: middle;
}
/* Dış kenarları çerçeve zaten çiziyor; hücre çizgileri içeride kalsın */
.legal-tablo th:last-child, .legal-tablo td:last-child { border-right: 0; }
.legal-tablo tbody tr:last-child > * { border-bottom: 0; }

.legal-tablo thead th {
  background: var(--paper); font-weight: 500; white-space: nowrap;
}
/* Satır atlamalı zemin: uzun tabloda satır takibi kolaylaşır */
.legal-tablo tbody tr:nth-child(even) > * { background: var(--tint); }

.legal-tablo tbody th { font-weight: 500; white-space: nowrap; }
/* Kısa değerler ortalı, uzun açıklama sütunu sola hizalı okunur */
.legal-tablo tbody td:last-child { text-align: left; }
.legal-tablo td:nth-child(5) { white-space: nowrap; }