/* ============================================================================
   dt-shell.css — Deniz Teknik ORTAK KABUK STİLİ  ·  TEK KAYNAK
   ----------------------------------------------------------------------------
   TÜM sayfalarda geçerlidir (index · urunler · fiyatlar · arizalar · sss ·
   iletisim · randevu · galeri · foto-galeri · bilgi-bankasi · destek ·
   yetkili-servisler · garanti).
   ⚠ Bu dosyayı sayfalara KOPYALAMA — her sayfa <link> ile çağırır.
      Sayfanın kendi <style> bloğundan SONRA yüklenir (cascade'i o kazanır).
   SIRA ÖNEMLİ:  1) kabuk temel stili  2) iyileştirme/mobil paketi (son söz).
   Kaynak tasarım: mobil-test.html (onay 04.08.2026) · rollout 05.08.2026
   Değişiklikten sonra ?v= sürümünü artır + Cloudflare purge.
   ============================================================================ */

/* ============================================================================
   KABUK TEMEL STİLİ — topbar · header · logo · butonlar · footer · dev banner
   Kaynak: index.html (kanonik). Bu blok her sayfanın kendi <style>'ından SONRA
   yüklenir → kanonik değerler kazanır, eksik olan sayfaya da gelir.
   ============================================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* ============ DEV BANNER ============ */
.dev-banner {
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 50%, #fef3c7 100%);
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
  font-size: 0.85rem;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}
.dev-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, #f59e0b 0, #f59e0b 10px, #fbbf24 10px, #fbbf24 20px);
}
.dev-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  flex-wrap: wrap;
}
.dev-banner svg {
  width: 18px;
  height: 18px;
  color: #d97706;
  flex-shrink: 0;
}
.dev-banner strong {
  color: #78350f;
  font-weight: 700;
}
/* ============ TOPBAR ============ */
.topbar { background: var(--bg-dark); color: #dbe3ea; font-size: 0.82rem; padding: 9px 0; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar-item { display: flex; align-items: center; gap: 8px; opacity: 0.92; }
.topbar-item svg { width: 14px; height: 14px; stroke: var(--brand); }

/* ============ HEADER ============ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}
.header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; }
.header-nav { display: flex; align-items: center; gap: 4px; }
.header-nav a { padding: 7px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); transition: background 0.2s, color 0.2s; }
.header-nav a:hover { background: var(--bg-soft); color: var(--ink); }
.header-nav a.active { color: var(--brand); background: rgba(43,166,214,0.1); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 52px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.logo-text .tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 3px;
}
.header-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-outline { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-1px); }
.btn-wa { background: var(--whatsapp); color: #fff; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); }
.btn-wa:hover { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4); }
.btn svg { width: 16px; height: 16px; }
/* ============ FOOTER ============ */
.footer { background: var(--ink); color: #a5b6c4; padding: 60px 0 24px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .logo-text .name { color: #fff; }
.footer-brand .logo-text .tag { color: var(--brand); }
.footer-brand p { margin-top: 16px; font-size: 0.88rem; line-height: 1.6; max-width: 320px; }
.footer-col h4 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 0.88rem; color: #a5b6c4; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.82rem; flex-wrap: wrap; gap: 16px;
}
.footer-bottom .copyright { color: #6b7c8a; }

/* =====================================================================
   MOBİL YOĞUNLUK PAKETİ  (A + B)  ·  04.08.2026
   A = boşluk + tipografi kısma   B = kartlar dikey → yatay satır
   Bu blok DOSYANIN EN SONUNDA durmalı — önceki @media 640 kurallarını
   ezmesi buna bağlı. Yalnızca 640px altı (mobil) etkilenir.
   ===================================================================== */
/* ============ REFERANSLAR (TEK KAYNAK — 23.08.2026'da index.html'den taşındı)
   Taban kurallar burada; mobil override'lar bu dosyanın @media bloğunda. */
/* ============ REFERANSLAR ============ */
.refs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ref-card {
  background: #fff;
  padding: 28px 20px 22px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  text-align: center;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ref-card::before {
  content: ""; position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(43, 166, 214, 0.03), rgba(242, 103, 34, 0.03));
  opacity: 0; transition: opacity 0.3s ease;
}
.ref-card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow); }
.ref-card:hover::before { opacity: 1; }
.ref-logo {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  padding: 6px 10px;
}
.ref-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.ref-card:hover .ref-logo img {
  transform: scale(1.06);
}
.ref-logo-text {
  color: var(--brand-deep);
}
.ref-logo-text svg {
  width: 48px;
  height: 48px;
}
.ref-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); position: relative; z-index: 1; margin-bottom: 4px; }
.ref-type { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; position: relative; z-index: 1; }

@media (max-width: 640px) {

  /* ┌────────────────────────────────────────────────────────────┐
     │  ⚙ MOBİL AYAR PANELİ — bu 12 sayı mobil yoğunluğu belirler │
     │  Aynı blok /assets/css/dt-mobil.css ile diğer sayfalarda   │
     │  da geçerlidir; değer değişirse İKİSİNİ birlikte güncelle. │
     └────────────────────────────────────────────────────────────┘ */
  :root {
    --m-bolum-bosluk:   40px;    /* bölüm üst/alt boşluğu   (eski 64px) */
    --m-hero-baslik:    1.75rem; /* ana başlık = 28px       (eski 35px) */
    --m-bolum-baslik:   1.45rem; /* bölüm başlığı = 23px    (eski 29px) */
    --m-alt-yazi:       0.92rem; /* bölüm alt açıklaması    (eski 1.05rem) */
    --m-satir-araligi:  1.5;     /* gövde satır aralığı     (eski 1.6) */

    --m-kart-foto:      108px;   /* ÜRÜN kartı foto genişliği (yatay kart) */
    --m-kurulum-foto:   112px;   /* KURULUM kartı foto genişliği */
    --m-kart-bosluk:    12px;    /* kartlar arası boşluk    (eski 24px) */
    --m-kart-ic-pad:    12px 14px; /* kart iç boşluğu       (eski 24px 26px) */

    --m-kart-baslik:    1.02rem; /* kart başlığı            (eski 1.35rem) */
    --m-kart-metin:     0.78rem; /* kart açıklama metni     (eski 0.9rem) */
    --m-kart-spec:      0.72rem; /* teknik özellik satırı   (eski 0.85rem) */
  }

  /* ---------- A · genel yoğunluk ---------- */
  body { line-height: var(--m-satir-araligi); }

  .section { padding: var(--m-bolum-bosluk) 0; }
  .quick-nav { padding: calc(var(--m-bolum-bosluk) - 6px) 0; }
  .stats { padding: calc(var(--m-bolum-bosluk) - 8px) 0; }

  .eyebrow { font-size: 0.66rem; padding: 5px 11px; margin-bottom: 11px; letter-spacing: 0.18em; }
  .hero h1 { font-size: var(--m-hero-baslik); margin-bottom: 15px; }
  .section-title { font-size: var(--m-bolum-baslik); margin-bottom: 9px; }
  .section-sub { font-size: var(--m-alt-yazi); margin-bottom: 24px; }

  /* hero (görsel yukarıda tamamen kaldırıldı — burada sadece boşluk) */
  .hero-inner { gap: 24px; }
  .hero { padding-bottom: 10px; }

  /* hızlı erişim kartları */
  .quick-nav-grid { gap: 10px; }
  .quick-card { padding: 14px 13px; gap: 9px; }
  .quick-card .icon { width: 36px; height: 36px; border-radius: 9px; }
  .quick-card .icon svg { width: 18px; height: 18px; }
  .quick-card .title { font-size: 0.92rem; }
  .quick-card .desc { font-size: 0.75rem; margin-top: -6px; }

  /* istatistik şeridi */
  .stats-grid { gap: 16px; }
  .stat-num { font-size: 1.85rem; }
  .stats-visitors { margin-top: 22px; padding-top: 18px; }
  .stats-visitors-grid { gap: 12px; }

  /* malzeme / referans / iletişim / footer */
  .materials-wrap { padding: 26px 18px; }
  .refs-grid { gap: 10px; }
  .ref-card { padding: 14px 10px 12px; }
  .ref-logo { height: 46px; margin-bottom: 8px; }
  .ref-name { font-size: 0.85rem; }
  .contact-grid { gap: 12px; }
  .footer { padding-top: 40px; }
  .footer-inner { gap: 22px; }
  .faq-q { padding: 15px 18px; font-size: 0.92rem; }
  .faq-a-inner { padding: 0 18px 16px; font-size: 0.88rem; line-height: 1.55; }
  .review-card { padding: 16px; }
  .review-text { font-size: 0.85rem; line-height: 1.55; }
  .reviews-cards { gap: 12px; margin-top: 26px; }
  .reviews-banner { padding: 22px; gap: 18px; }

  /* ---------- B · ÜRÜN KARTI: dikey → yatay ---------- */
  .products-grid { gap: var(--m-kart-bosluk); }

  .product-card { flex-direction: row; align-items: stretch; }
  .product-badge { display: none; }            /* bilgi zaten .product-power satırında */

  .product-img {
    flex: 0 0 var(--m-kart-foto); width: var(--m-kart-foto);
    aspect-ratio: auto;
    padding: 10px;
  }
  .product-img img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 4px 10px rgba(15,37,53,.12)); }

  .product-body { padding: var(--m-kart-ic-pad); min-width: 0; }
  .product-title { font-size: var(--m-kart-baslik); margin-bottom: 2px; }
  .product-power { font-size: 0.75rem; margin-bottom: 8px; letter-spacing: 0.02em; }

  /* teknik özellikler: alt alta liste → tek satır akış */
  .product-specs {
    display: flex; flex-wrap: wrap;
    gap: 2px 9px;
    border-top: 1px dashed var(--line);
    padding-top: 8px; margin: 0 0 8px;
  }
  .product-specs li {
    display: inline-flex; justify-content: flex-start;
    gap: 4px; padding: 0;
    font-size: var(--m-kart-spec); border-bottom: none;
  }
  .product-specs li .lbl { opacity: .75; }

  .product-footer { padding-top: 8px; gap: 8px; }
  .flow-rate { font-size: 0.85rem; }
  .flow-rate svg { width: 14px; height: 14px; }
  .product-card .btn-mini { padding: 7px 12px; font-size: 0.75rem; }

  /* ---------- B · KURULUM KARTI: dikey → yatay ---------- */
  .install-grid { gap: var(--m-kart-bosluk); }

  .install-card { display: flex; align-items: stretch; }
  .install-img { flex: 0 0 var(--m-kurulum-foto); width: var(--m-kurulum-foto); aspect-ratio: auto; }
  .install-img::after { background: linear-gradient(90deg, transparent 60%, rgba(15,37,53,.18) 100%); }

  .install-body { padding: var(--m-kart-ic-pad); flex: 1; min-width: 0; }
  .install-title { font-size: var(--m-kart-baslik); margin-bottom: 4px; line-height: 1.25; }
  .install-desc { font-size: var(--m-kart-metin); margin-bottom: 8px; line-height: 1.4; }
  .install-price .amount { font-size: 1.3rem; }
  .install-price .currency { font-size: 0.85rem; }
  .install-price-detail { font-size: 0.7rem; margin-top: 2px; }
}

/* === 04.08 rötuş: header/hero/stats/footer === */
.footer-brand .logo img { background:#fff; padding:6px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.28); }
@media (max-width:640px){
  .hero { padding: 18px 0 10px; }
  .stat-num { font-size: 1.5rem; }
  .header-actions .btn-outline { display: inline-flex; }
  .header-actions .btn { padding: 9px; border-radius: 50%; font-size: 0; }
  .header-actions .btn svg { width: 19px; height: 19px; margin: 0; }
}

/* === Hero görseli (masaüstü) · Blue-S konsept · 04.08 === */
.hero-photo { display:none; grid-area: visual; }
.hero-photo img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
@media (min-width:981px){
  .hero-inner { grid-template-columns:1.15fr .85fr; grid-template-areas:"text visual" "nav nav"; align-items:center; }
  .hero-text { max-width:620px; }
  .hero-photo { display:block; }
}

/* === Header: snug logo (taşmasız) + auto-hide · rozet · 04.08 === */
.header { overflow: visible; transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.header--hidden { transform: translateY(-100%); }               /* aşağı → kayarak çıkar, yukarı → kayarak gelir */
.header-inner { align-items: center; padding: 4px 0; }
.logo img { height: 66px; width: auto; }                        /* header sınırına yaklaşık, taşmaz */
.stat-icon { display:flex; justify-content:center; }
.stat-icon svg { width: 2.7rem; height: 2.7rem; color: var(--brand); }
.stat-badge .stat-lbl { color:#cfe0ec; }
@media (max-width:640px){
  .logo img { height: 50px; }
  .topbar-inner { justify-content: center; gap: 8px 16px; text-align: center; }
}

@media (max-width:640px){
  .adr-rest { display:none; }
  .topbar-item span { white-space: nowrap; }
}

/* === İletişim bölümü kompakt (mobil) · 04.08 === */
@media (max-width:640px){
  .map-wrap { height: 200px; }
  .contact-card { padding: 14px 16px; }
  .contact-card .ic { width: 40px; height: 40px; margin-bottom: 6px; }
  .contact-card .ic svg { width: 17px; height: 17px; }
  .contact-card .val { font-size: 0.95rem; }
  .contact-card .lbl { font-size: 0.66rem; }
  .contact-cta-bottom { padding: 18px 16px; margin-top: 20px; }
  .contact-cta-bottom h3 { font-size: 1.1rem; margin-bottom: 12px; }
  #iletisim .section-sub { font-size: .86rem; }
}

/* === Ürün kartı çıpalı link · 04.08 === */
.product-card { position: relative; cursor: pointer; }
.card-cover { position: absolute; inset: 0; z-index: 3; }
.product-card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow); }

/* === Müşteri yorumları kompakt · 04.08 === */
.reviews-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 28px; }
.review-card { padding: 16px 18px; }
.review-card-head { gap: 10px; margin-bottom: 10px; }
.review-avatar { width: 34px; height: 34px; font-size: .9rem; }
.review-text { font-size: .85rem; line-height: 1.55; }
@media (max-width:640px){
  .reviews-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .review-card { padding: 13px 15px; }
  .review-text { font-size: .82rem; }
}

/* === İletişim = ürünlerle aynı tıklanabilir-kutu dili · 04.08 === */
.contact-card { cursor: pointer; }
a.contact-card { text-decoration: none; }
.contact-card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow); }

/* === İletişim kartı yatay: ikon solda, sağda etiket/değer · 04.08 === */
.contact-card { flex-direction: row; align-items: center; gap: 14px; text-align: left; }
.contact-card .ic { margin-bottom: 0; flex: 0 0 auto; }
.cc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* === İletişim değer yazıları okunur sans font · 04.08 === */
.contact-card .val { font-family: inherit; letter-spacing: 0; font-weight: 600; }

/* === Bölüm göstergesi (üst çubuk + sağ ray) · 04.08 === */
/* üst ilerleme çubuğu 24.08.2026'da KALDIRILDI (Atakan) — sadece sağ nokta rayı kaldı */
.section-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:13px;align-items:flex-end;}
.rail-dot{display:flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none;padding:0;}
.rail-dot .lbl{font-size:.72rem;font-weight:600;color:var(--ink-soft);opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;white-space:nowrap;background:rgba(255,255,255,.92);padding:2px 9px;border-radius:20px;box-shadow:var(--shadow-sm);}
.rail-dot .pt{width:9px;height:9px;border-radius:50%;background:#c3d1db;transition:all .25s;flex:0 0 auto;}
.rail-dot:hover .lbl{opacity:1;transform:translateX(0);}
.rail-dot.active .pt{background:var(--brand);width:12px;height:12px;box-shadow:0 0 0 4px rgba(43,166,214,.2);}
.rail-dot.reveal .lbl{opacity:1;transform:translateX(0);color:var(--brand-deep);}
.section-title.plain{font-family:inherit;}
.section-title.plain em{font-style:normal;}
@media (max-width:640px){
  .section-rail{right:8px;gap:10px;}
  .rail-dot .lbl{display:none;}
  .rail-dot.reveal .lbl{display:inline-block;}
}

@view-transition { navigation: auto; }

/* === Animasyonlar 1/3/4/5/8 · 04.08 === */
/* 4) Hero Ken Burns (masaüstü) */
.hero-photo{overflow:hidden;border-radius:var(--radius-lg);}
@keyframes dtKen{0%{transform:scale(1)}100%{transform:scale(1.08)}}
@media (min-width:981px){ .hero-photo img{animation:dtKen 22s ease-in-out infinite alternate;will-change:transform;} }
/* 3) ürün görseli mobil dokunuşta da yakınlaş */
.product-card:active .product-img img{ transform:scale(1.05); }
/* 5) WhatsApp CTA nabzı */
@keyframes dtWa{0%{box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 0 rgba(37,211,102,0)}}
.contact-cta-bottom .btn-wa{animation:dtWa 2.6s ease-out infinite;}
/* 8) yorumlar kayan şerit */
.marquee-wrap{overflow:hidden;margin-top:28px;}
.reviews-marquee{display:flex!important;flex-wrap:nowrap;width:max-content;gap:16px;margin-top:0!important;animation:dtMarquee 45s linear infinite;}
.reviews-marquee .review-card{flex:0 0 300px;}
.reviews-marquee:hover{animation-play-state:paused;}
@keyframes dtMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){ .reviews-marquee .review-card{flex-basis:250px;} .reviews-marquee{animation-duration:32s;} }
@media (prefers-reduced-motion: reduce){ .hero-photo img,.contact-cta-bottom .btn-wa,.reviews-marquee{animation:none!important;} }

/* === Yeni animasyonlar (parallax/başadön/pin/yıldız) · 04.08 === */
/* 5) harita pin düşme */
.map-wrap{position:relative;}
.map-pin{position:absolute;left:50%;top:42%;width:34px;height:34px;transform:translate(-50%,-100%);z-index:2;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));}
.map-pin svg{width:100%;height:100%;}
@keyframes dtPin{0%{opacity:0;transform:translate(-50%,-260%);}60%{opacity:1;transform:translate(-50%,-90%);}80%{transform:translate(-50%,-108%);}100%{opacity:1;transform:translate(-50%,-100%);}}
.map-wrap.visible .map-pin{animation:dtPin .95s cubic-bezier(.34,1.56,.64,1) .15s forwards;}
/* 4) başa dön */
.to-top{position:fixed;right:16px;bottom:20px;width:44px;height:44px;border-radius:50%;border:none;background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(43,166,214,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:160;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s;}
.to-top svg{width:22px;height:22px;}
.to-top.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.to-top:hover{background:var(--brand-deep);}
/* 6) yıldız doldurma */
.review-stars{position:relative;display:inline-block;color:#dfe6ec;}
.review-stars::before{content:"★★★★★";position:absolute;left:0;top:0;color:#f59e0b;width:0;overflow:hidden;white-space:nowrap;}
.stars-go .review-stars::before{animation:dtStars 1.1s ease .1s forwards;}
@keyframes dtStars{to{width:100%;}}
@media (prefers-reduced-motion: reduce){ .map-wrap.visible .map-pin{animation:none;opacity:1;} .stars-go .review-stars::before{animation:none;width:100%;} }
/* === Çıpa ile gelen kartı vurgula (View Transitions eşlikçisi) · 05.08 ==== */
@keyframes dtFlash{
  0%   { box-shadow: 0 0 0 0 rgba(43,166,214,.55); }
  45%  { box-shadow: 0 0 0 10px rgba(43,166,214,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,166,214,0); }
}
.dt-flash{ animation: dtFlash 1.3s ease-out 2; border-color:#2ba6d6 !important; }
@media (prefers-reduced-motion: reduce){ .dt-flash{ animation:none; } }

/* === Dil seçici (dt-shell.js enjekte eder) · 05.08.2026 ==================== */
.dt-lang{position:relative;display:inline-flex;align-items:center;margin-left:10px;font-family:inherit;}
.dt-lang__btn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.9);border:1px solid rgba(15,37,53,.12);
  border-radius:20px;padding:5px 10px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#0f2535;cursor:pointer;line-height:1;}
.dt-lang__btn:hover{border-color:#2ba6d6;color:#2ba6d6;}
.dt-lang__btn .car{font-size:.6rem;opacity:.6;}
.dt-lang__menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid rgba(15,37,53,.1);
  border-radius:12px;box-shadow:0 10px 28px rgba(15,37,53,.15);padding:5px;min-width:132px;display:none;z-index:400;}
.dt-lang.open .dt-lang__menu{display:block;}
.dt-lang__menu a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;text-decoration:none;
  color:#0f2535;font-size:.8rem;font-weight:600;white-space:nowrap;}
.dt-lang__menu a:hover{background:#f1f8fc;color:#2ba6d6;}
.dt-lang__menu a.on{color:#2ba6d6;background:#eaf6fc;}
.dt-lang__menu a .fl{font-size:1rem;line-height:1;}
@media (max-width:640px){
  .dt-lang{margin-left:6px;}
  .dt-lang__btn{padding:5px 8px;font-size:.68rem;}
}

/* === Topbar taşma koruması (uzun çeviriler için) · 05.08 ==================== */
@media (max-width:640px){
  .topbar-inner { max-width:100%; }
  .topbar-item { min-width:0; max-width:100%; }
  .topbar-item span { overflow:hidden; text-overflow:ellipsis; }
}

/* === Hızlı Cevap kutusu (AEO — AI motorlarının alıntıladığı özet) · 08.08 === */
.hizli-cevap{
  max-width:820px;margin:0 auto 30px;padding:18px 20px 16px;
  background:linear-gradient(180deg,#f6fbfe 0%,#fff 100%);
  border:1px solid rgba(43,166,214,.28);border-left:4px solid #2ba6d6;
  border-radius:14px;box-shadow:0 4px 16px rgba(15,37,53,.06);
}
.hizli-cevap .hc-lbl{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#2ba6d6;
}
.hizli-cevap .hc-lbl::before{content:"⚡";font-size:.85rem;letter-spacing:0;}
.hizli-cevap h2.hc-soru,.hizli-cevap .hc-soru{
  font-size:1.02rem;font-weight:800;color:#0f2535;margin:0 0 6px;line-height:1.35;
}
.hizli-cevap p{margin:0;color:#3d5566;font-size:.94rem;line-height:1.62;}
.hizli-cevap p + p{margin-top:8px;}
.hizli-cevap b,.hizli-cevap strong{color:#0f2535;}
.hizli-cevap .hc-alt{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(15,37,53,.08);
  font-size:.85rem;font-weight:700;
}
.hizli-cevap .hc-alt a{color:#2ba6d6;text-decoration:none;}
.hizli-cevap .hc-alt a:hover{color:#f26722;}
@media (max-width:640px){
  .hizli-cevap{margin-bottom:22px;padding:15px 16px 14px;border-radius:12px;}
  .hizli-cevap h2.hc-soru,.hizli-cevap .hc-soru{font-size:.96rem;}
  .hizli-cevap p{font-size:.9rem;line-height:1.58;}
}

/* === GÖRSEL BÜYÜTEÇ (LIGHTBOX) · 09.08.2026 ================================
   Davranış karşılığı: /js/dt-shell.js → "GÖRSEL BÜYÜTEÇ" bölümü.
   Sayfada -400/-800 küçük varyant gösterilir, tıklanınca ORİJİNAL tam kaliteli
   dosya açılır. Bu blok "mobil/iyileştirme paketi"nden SONRA gelir (CSS sıra
   tuzağı) — ::after/::before KULLANILMAZ, mevcut kart gradyanlarını ezmesin.
   ========================================================================== */
.dt-buyutulebilir { cursor: zoom-in; }
.dt-lb-kap { position: relative; }
.dt-lb-rozet {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; color: #fff;
  background: rgba(15, 37, 53, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  opacity: 0; transform: scale(.85);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.dt-lb-kap:hover .dt-lb-rozet,
.dt-lb-kap:focus-within .dt-lb-rozet { opacity: 1; transform: scale(1); }
@media (hover: none) {
  .dt-lb-rozet { opacity: .8; transform: scale(1); width: 22px; height: 22px; font-size: 11px; }
}

html.dt-lb-kilit, html.dt-lb-kilit body { overflow: hidden; }

.dt-lb {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(9, 20, 29, .94);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease;
  touch-action: none;
}
.dt-lb.acik { display: flex; opacity: 1; }

.dt-lb-sahne {
  position: relative;
  width: min(96vw, 1500px); height: min(88vh, 1500px);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.dt-lb-sahne img {
  position: absolute; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.dt-lb-onizleme { filter: blur(14px); transform: scale(1.02); transition: opacity .25s ease; }
.dt-lb-resim { opacity: 0; transition: opacity .25s ease; }
.dt-lb-resim.hazir { opacity: 1; }

.dt-lb-x, .dt-lb-ok {
  position: absolute; z-index: 2;
  border: none; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .18s ease, transform .18s ease;
  font-family: inherit; line-height: 1;
}
.dt-lb-x {
  top: 14px; right: 14px; width: 42px; height: 42px;
  border-radius: 12px; font-size: 19px;
}
.dt-lb-ok {
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 66px; border-radius: 12px; font-size: 30px;
}
.dt-lb-ok--sol { left: 12px; }
.dt-lb-ok--sag { right: 12px; }
.dt-lb-x:hover, .dt-lb-ok:hover { background: rgba(255, 255, 255, .24); }
.dt-lb-ok:hover { transform: translateY(-50%) scale(1.06); }
.dt-lb-x:focus-visible, .dt-lb-ok:focus-visible { outline: 2px solid #f26722; outline-offset: 2px; }
.dt-lb [hidden] { display: none !important; }

.dt-lb-alt {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 60px; color: rgba(255, 255, 255, .82);
  font-size: .85rem; text-align: center; pointer-events: none;
}
.dt-lb-sayac { font-weight: 700; color: #fff; white-space: nowrap; }

@media (max-width: 640px) {
  .dt-lb-sahne { width: 100vw; height: 82vh; }
  .dt-lb-sahne img { border-radius: 6px; }
  .dt-lb-x { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 17px; }
  .dt-lb-ok { width: 38px; height: 54px; font-size: 25px; }
  .dt-lb-ok--sol { left: 6px; }
  .dt-lb-ok--sag { right: 6px; }
  .dt-lb-alt { bottom: 10px; padding: 0 12px; font-size: .78rem; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-lb, .dt-lb-sahne, .dt-lb-resim, .dt-lb-onizleme, .dt-lb-rozet { transition: none; }
}


/* === FOTOĞRAF ŞERİDİ (dt-serit) · TEK KAYNAK · 24.08.2026 ===================
   Davranış karşılığı: /js/dt-serit.js
   Kullanım:
     <div class="dt-serit" data-galeri="blue-s">
       <div class="serit-ray">
         <figure class="serit-kare"><img ... data-tamboy="…"><figcaption>…</figcaption></figure>
       </div>
     </div>
   Oklar + noktalar JS tarafından eklenir; JS yoksa parmakla kaydırma çalışır.
   ⛔ Bu kodu sayfalara KOPYALAMA.
   ========================================================================== */
.dt-serit { position: relative; margin: 0 0 18px; }
.serit-ray {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 16px;
}
.serit-ray::-webkit-scrollbar { display: none; }
.serit-kare {
  position: relative;
  /* 88% → yandaki fotoğrafın bir kısmı görünür: "devamı var" işareti */
  flex: 0 0 88%;
  scroll-snap-align: start;
  margin: 0;
  background: linear-gradient(180deg, #f6f9fc, #eef4f9);
  border: 1px solid #e4e9ee;
  border-radius: 16px;
  overflow: hidden;
  opacity: .42;
  transform: scale(.965);
  transition: opacity .32s ease, transform .32s ease;
}
.serit-kare.aktif { opacity: 1; transform: scale(1); }
/* son fotoğraf da sola yaslanabilsin diye kuyruk boşluğu */
.serit-ray::after { content: ""; flex: 0 0 calc(12% - 10px); }
/* JS yoksa hepsi net kalsın */
.dt-serit:not(.hazir) .serit-kare { opacity: 1; transform: none; }
.serit-kare img {
  width: 100%; height: 360px;
  object-fit: contain;
  display: block;
  padding: 14px 14px 0;
  cursor: zoom-in;
}
.serit-kare figcaption {
  display: block;
  padding: 10px 14px 13px;
  font-size: .82rem; line-height: 1.45;
  color: #3b5062; text-align: center;
  background: rgba(255,255,255,.72);
  border-top: 1px solid #e4e9ee;
  min-height: 46px;
}
.serit-kare figcaption b { color: #0f2535; font-weight: 700; }

/* "Gerçek montaj" rozeti */
.serit-kare .serit-rozet {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(242,103,34,.94); color: #fff;
  box-shadow: 0 2px 8px rgba(242,103,34,.32);
}
.serit-kare .serit-rozet.r-urun { background: rgba(30,123,163,.94); box-shadow: 0 2px 8px rgba(30,123,163,.3); }

/* oklar (JS ekler) */
.serit-ok {
  position: absolute; top: 170px; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #e4e9ee; background: rgba(255,255,255,.94);
  color: #155473; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  box-shadow: 0 4px 14px rgba(15,37,53,.14);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.serit-ok:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.serit-ok:focus-visible { outline: 2px solid #f26722; outline-offset: 2px; }
.serit-ok.sol { left: 10px; }
.serit-ok.sag { right: calc(12% - 14px); }
.serit-ok[disabled] { opacity: .28; cursor: default; }

/* noktalar (JS ekler) */
.serit-nokta { display: flex; gap: 7px; justify-content: center; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.serit-nokta button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: #cdd8e1; cursor: pointer; transition: all .2s ease;
}
.serit-nokta button.aktif { background: #2ba6d6; width: 22px; border-radius: 999px; }
.serit-nokta button:focus-visible { outline: 2px solid #f26722; outline-offset: 2px; }
.serit-sayac { font-size: .78rem; color: #6b7c8a; font-weight: 600; margin-left: 6px; }

@media (max-width: 640px) {
  .serit-kare { flex: 0 0 86%; }
  .serit-ray::after { flex: 0 0 calc(14% - 10px); }
  .serit-kare img { height: 270px; padding: 10px 10px 0; }
  .serit-ok { top: 135px; width: 34px; height: 34px; font-size: 17px; }
  .serit-ok.sag { right: calc(14% - 12px); }
  .serit-kare figcaption { font-size: .78rem; padding: 9px 11px 12px; }
}

/* kaydırma teşviki: şerit görünürlüğe girince sağ kenardaki ipucu bir kez parlar */
.serit-ipucu {
  position: absolute; top: 322px; left: 50%; transform: translateX(-50%);
  z-index: 4; pointer-events: none; opacity: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(15,37,53,.82); color: #fff;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15,37,53,.28);
}
.dt-serit.ipucu-goster .serit-ipucu { animation: seritIpucu 2.6s ease forwards; }
@keyframes seritIpucu {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  14%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  72%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
.serit-ipucu .el { display: inline-block; animation: seritEl 1.1s ease-in-out infinite; }
@keyframes seritEl { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@media (max-width: 640px) { .serit-ipucu { top: 232px; font-size: .7rem; padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .dt-serit.ipucu-goster .serit-ipucu { animation: none; opacity: 0; }
  .serit-kare { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .serit-ray { scroll-behavior: auto; }
  .serit-ok, .serit-nokta button { transition: none; }
}


/* ============================================================================
   HİKÂYE / AÇILIR BLOK + ÖZET LİSTE + VEITO KUTUSU · 25.08.2026 — TEK KAYNAK
   Kullanan: index.html · hakkimizda.html · veito-nedir.html
   ⛔ Sayfaya kopyalama — buradan gelir.
   ============================================================================ */
.ozet-list { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.ozet-list li { position:relative; padding-left:26px; font-size:1rem; line-height:1.65; color:var(--ink-soft); }
.ozet-list li::before { content:""; position:absolute; left:0; top:.6em; width:9px; height:9px; border-radius:50%; background:var(--brand); }
.ozet-list li b { color:var(--ink); }
.oyku-ipucu { margin:26px 0 10px; font-size:.85rem; color:var(--ink-soft); opacity:.8; }
.oyku-ac { border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:10px; overflow:hidden; text-align:left; }
.oyku-ac summary { cursor:pointer; list-style:none; padding:16px 20px; font-weight:600; color:var(--ink); font-size:.98rem; display:flex; align-items:center; gap:10px; transition:background .2s; }
.oyku-ac summary::-webkit-details-marker { display:none; }
.oyku-ac summary::before { content:"+"; font-size:1.2rem; line-height:1; color:var(--brand); font-weight:400; width:16px; text-align:center; flex:none; }
.oyku-ac[open] summary::before { content:"–"; }
.oyku-ac summary:hover { background:var(--bg-soft,#f7f9fb); }
.oyku-ac .oyku-ic { padding:2px 20px 18px 46px; }
.oyku-ac .oyku-ic p { font-size:.94rem; line-height:1.75; color:var(--ink-soft); margin-bottom:12px; }
.oyku-ac .oyku-ic p:last-child { margin-bottom:0; }
.veito-kutu { margin-top:34px; border:1.5px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius); background:#fff; padding:24px 24px 20px; text-align:left; }
.veito-kutu h3 { font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--ink); margin-bottom:12px; }
.veito-kutu p { font-size:.94rem; line-height:1.7; color:var(--ink-soft); margin-bottom:12px; }
.veito-acilim { background:var(--bg-soft,#f7f9fb); border-radius:10px; padding:12px 14px; font-size:.92rem !important; color:var(--ink) !important; letter-spacing:.01em; }
.veito-acilim b:first-child { color:var(--brand-deep); }
.veito-link { display:inline-block; margin-top:2px; font-size:.9rem; font-weight:600; color:var(--brand-deep); text-decoration:none; }
.veito-link:hover { text-decoration:underline; }

/* ============================================================================
   FİYAT ŞERİDİ · 05.09.2026 — TEK KAYNAK
   ----------------------------------------------------------------------------
   İçeriği ELLE YAZILMAZ: `_icerik/fiyatlar.json` + `_icerik/fiyat_uret.py` basar.
   .dt-fiyat-urun    = cihaz satış fiyatı  → KİOSKTA GİZLENİR (js/dt-kiosk.js)
   .dt-fiyat-iscilik = montaj/malzeme ibaresi → kioskta da GÖRÜNÜR, asla gizlenmez
   ============================================================================ */
.dt-fiyat-serit { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin:18px 0 6px; padding:12px 16px; border:1.5px solid var(--line);
  border-left:4px solid var(--brand); border-radius:var(--radius);
  background:var(--bg-soft,#f7f9fb); }
.dt-fiyat-serit .dt-fiyat-urun { font-size:1.22rem; font-weight:700; color:var(--brand-deep);
  letter-spacing:-.01em; }
.dt-fiyat-serit .dt-fiyat-urun.dt-fiyat-yok { font-size:1rem; font-weight:600;
  color:var(--ink-soft); }
.dt-fiyat-serit .dt-fiyat-iscilik { font-size:.9rem; font-weight:600; color:var(--ink-soft); }
/* fiyatlar.html 'Ürün Fiyatları' ızgarasındaki cihaz kartı */
.product-card .dt-fiyat-urun { font-size:1.24rem; font-weight:700; color:var(--brand-deep);
  letter-spacing:-.01em; margin:8px 0 2px; }
.product-card .dt-fiyat-urun.dt-fiyat-yok { font-size:.98rem; font-weight:600;
  color:var(--ink-soft); }
.product-card .dt-fiyat-iscilik { font-size:.82rem; font-weight:600; color:var(--ink-soft);
  margin-bottom:10px; }

/* ============================================================================
   AKIŞKAN KABUK (RESPONSIVE) · 24.08.2026 — TEK KAYNAK
   ----------------------------------------------------------------------------
   NEDEN: Kabuk taban kuralları (bu dosyanın başındaki .logo/.footer-inner/
   .refs-grid/.btn blokları) sayfaların KENDİ <style> @media kurallarından SONRA
   yüklendiği için onları eziyordu → telefonda footer 3 kolon kalıyor, İletişim
   sütunu ekrandan taşıyor, logo yazısı 3 satıra bölünüyordu.
   ÇÖZÜM: kabuğun TÜM ölçek/kırılım davranışı bu son blokta toplandı. Kaynak
   sırası gereği burası son sözü söyler — sayfalara @media yazmayın, buraya yazın.

   Ölçek yöntemi: sabit kırılım yerine clamp() → 320 px telefondan 4K kioska
   kadar kesiksiz büyür. Kırılımlar yalnız DÜZEN (kolon sayısı) için kullanılır:
     ≤430  küçük telefon    · ≤640  telefon      · ≤980  tablet
     ≤1200 küçük dizüstü    · ≥1600 büyük ekran / kiosk
   ============================================================================ */

/* --- yatay taşma emniyeti: bilinmeyen cihazda sayfa yana kaymasın ---------- */
body { overflow-x: clip; }

/* --- kap: kenar boşluğu ekranla ölçeklenir -------------------------------- */
.container { padding-left: clamp(14px, 3.4vw, 20px); padding-right: clamp(14px, 3.4vw, 20px); }
@media (min-width: 1600px) { .container { max-width: 1320px; } }

/* ============ LOGO + "DENİZ TEKNİK / VEİTO YETKİLİ SERVİSİ" ================
   Kural: isim ASLA bölünmez. Etiket dar ekranda önce küçülür, yer yine yoksa
   üç nokta ile kısalır (EN/DE/RU çevirileri Türkçeden uzun — bu şart).       */
.header-inner { gap: clamp(8px, 2.4vw, 20px); padding: clamp(9px, 2.2vw, 14px) 0; }
.logo { gap: clamp(7px, 1.8vw, 12px); flex: 0 1 auto; min-width: 0; }
.logo img { height: clamp(36px, 10vw, 52px); width: auto; }
.logo-text { min-width: 0; }
.logo-text .name {
  font-size: clamp(0.98rem, 3.4vw, 1.25rem);
  white-space: nowrap;
}
.logo-text .tag {
  font-size: clamp(0.54rem, 1.85vw, 0.7rem);
  letter-spacing: clamp(0.04em, 0.3vw, 0.12em);
  margin-top: clamp(2px, 0.5vw, 3px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-actions { flex: 0 0 auto; gap: clamp(6px, 1.6vw, 10px); }

/* çok dar telefonda "Ara" yuvarlağı gizlenir — numara zaten üst çubukta ve
   sağ altta WhatsApp balonu var; logo yazısına yer açan tek fedakârlık bu. */
@media (max-width: 380px) { .header-actions .btn-outline { display: none; } }

/* --- buton: dokunma hedefi korunarak ölçeklenir --------------------------- */
.btn { padding: clamp(9px, 2.3vw, 11px) clamp(14px, 3.6vw, 20px); font-size: clamp(0.82rem, 2.2vw, 0.9rem); }

/* ============ REFERANS KARTLARI =========================================== */
@media (max-width: 1200px) { .refs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  { .refs-grid { grid-template-columns: repeat(2, 1fr); } }
.ref-logo { height: clamp(46px, 9vw, 90px); margin-bottom: clamp(8px, 1.4vw, 16px); }
.ref-name { font-size: clamp(0.85rem, 2.2vw, 1.05rem); }

/* ============ FOOTER ======================================================
   ≥981  : marka 2fr + iki liste
   641-980: marka biraz daralır, üç kolon durur (tablette bu düzen onaylı)
   ≤640  : marka TAM GENİŞLİK üstte, Menü + İletişim yan yana iki kolon
           (tek kolona düşürmek footer'ı gereksiz uzatıyor; 320 px'te de sığar) */
.footer { padding: clamp(34px, 5.5vw, 60px) 0 clamp(18px, 2.4vw, 24px); }
.footer-inner { gap: clamp(20px, 3.2vw, 40px); margin-bottom: clamp(22px, 3.2vw, 40px); }
.footer-brand .logo img { height: clamp(54px, 13vw, 82px); width: auto; }
.footer-col h4 { font-size: clamp(0.92rem, 2.3vw, 1rem); margin-bottom: clamp(10px, 1.4vw, 16px); }
.footer-col a, .footer-brand p { font-size: clamp(0.82rem, 2.1vw, 0.88rem); }
.footer-col li { margin-bottom: clamp(8px, 1.1vw, 10px); }

@media (max-width: 980px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; margin-top: 12px; }
  .footer-bottom {
    flex-direction: column; align-items: center; text-align: center;
    gap: 10px; font-size: 0.78rem; padding-top: 18px;
  }
}

/* ============ ÜST ÇUBUK ==================================================== */
.topbar { font-size: clamp(0.72rem, 2vw, 0.82rem); }
.topbar-inner { gap: clamp(8px, 2vw, 20px); }

/* ============ BÜYÜK EKRAN / KIOSK (≥1600) ================================== */
@media (min-width: 1600px) {
  .logo img { height: 58px; }
  .logo-text .name { font-size: 1.4rem; }
  .logo-text .tag { font-size: 0.75rem; }
  .footer-brand .logo img { height: 92px; }
}