/* Evin Depoda sitesi ortak stilleri (ana sayfa ve alt sayfalar). Tasarım: kırmızı-siyah-beyaz, mobil öncelikli.
   Önce telefon düzeni yazılır, geniş ekranlar @media (min-width) ile eklenir. Renkler tasarım görselinden ölçüldü. */
:root {
  --kirmizi: #e50914;
  --kirmizi-koyu: #b8070f;
  --koyu: #171717;
  --beyaz: #ffffff;
  --gri: #f5f6f7;
  --gri-2: #f4f4f4;
  --pembe: #fde3e6;      /* simge daireleri */
  --pembe-2: #feeceb;    /* teklif kartı */
  --cizgi: #e4e6e9;
  --yazi: #1d1d1f;
  --soluk: #5c6067;
  --whatsapp: #25d366;
  --font-baslik: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-govde: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kenar: max(16px, env(safe-area-inset-left, 0px));
  --golge: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  /* Başlık altındaki kırmızı fırça çizgisi */
  --firca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 14'%3E%3Cpath d='M2 10C50 1 120 1 178 6C120 4.5 60 6 4 12.5Z' fill='%23e50914'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--beyaz); color: var(--yazi); font: 400 1rem/1.55 var(--font-govde); }
img { max-width: 100%; display: block; }
a { color: inherit; }
svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--kenar); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.gec { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--koyu); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.gec:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 3px; }

/* ---- Butonlar ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border-radius: 12px;
  font: 800 1.06rem/1 var(--font-baslik); text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.btn-kirmizi { background: var(--kirmizi); color: #fff; box-shadow: 0 8px 22px rgba(229,9,20,.35); }
.btn-kirmizi:hover { background: var(--kirmizi-koyu); }
.btn-beyaz { background: #fff; color: var(--koyu); border-color: var(--kirmizi); }
.btn-beyaz:hover { background: #fff5f5; }
.btn-beyaz svg { color: var(--kirmizi); }
.btn .ok { width: 18px; height: 18px; }

/* ---- 1. Üst menü ---- */
.ust { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--cizgi);
  padding-top: env(safe-area-inset-top, 0px); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); }
.ust-ic { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.logo { flex: none; display: block; text-decoration: none; }
.logo img { height: 50px; width: auto; }
.menu { display: none; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.yuvarlak { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--cizgi); background: var(--beyaz); color: var(--koyu); text-decoration: none; cursor: pointer; }
.yuvarlak.wa { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
.yuvarlak svg { width: 22px; height: 22px; }
.giris-bag span { display: none; }
.wa-hap { display: none; }
@media (max-width: 359px) { .logo img { height: 44px; } .ust-ic { gap: 6px; } .ust-sag { gap: 5px; } .yuvarlak { width: 40px; height: 40px; } }
.menu-ac .ac-ikon { display: block; } .menu-ac .kapa-ikon { display: none; }
.menu-ac[aria-expanded="true"] .ac-ikon { display: none; } .menu-ac[aria-expanded="true"] .kapa-ikon { display: block; }
/* Telefon menüsü: üst çubuğun beyaz alanı içinde açılan kart (sayfayı aşağı iter, üstüne binmez);
   satırlarda solda simge, bulunulan sayfa pembe zeminli */
.mobil-menu { margin: 6px 8px 16px; padding: 10px 14px 16px; background: var(--beyaz); border-radius: 20px; border: 1px solid #eef0f2;
  box-shadow: 0 12px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain;
  transform-origin: top center; animation: menuAc .2s ease-out; }
@keyframes menuAc { from { opacity: 0; transform: scale(.97) translateY(-8px); } to { opacity: 1; transform: none; } }
.mm-liste { list-style: none; margin: 0; padding: 0; }
.mm-liste > li { border-bottom: 1px solid var(--cizgi); }
.mm-liste > li > a, .mm-liste summary { display: flex; align-items: center; gap: 14px; min-height: 48px; margin: 4px 0; padding: 0 10px; border-radius: 10px;
  font: 700 1.02rem/1.2 var(--font-baslik); color: var(--koyu); text-decoration: none; cursor: pointer; list-style: none; }
.mm-liste > li > a > span, .mm-liste summary > span { flex: 1; }
.mm-liste svg.ic { width: 24px; height: 24px; stroke-width: 1.8; }
.mm-liste a[aria-current="page"], .mm-liste summary.aktif { background: #fdecee; color: var(--kirmizi); }
.mm-liste summary::-webkit-details-marker { display: none; }
.mm-liste svg.mm-ok { width: 20px; height: 20px; stroke-width: 2.2; transition: transform .2s; }
.mm-liste details[open] .mm-ok { transform: rotate(180deg); }
.mm-liste details ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 48px; }
.mm-liste details a { display: flex; align-items: center; min-height: 40px; font: 600 .95rem/1.2 var(--font-govde); color: var(--soluk); text-decoration: none; }
.mm-liste details a[aria-current="page"] { color: var(--kirmizi); font-weight: 700; }
.mm-tara > svg { color: var(--kirmizi); }
.mm-tara small { padding: 5px 10px; border-radius: 99px; background: var(--kirmizi); color: #fff; font: 800 .72rem/1 var(--font-baslik); white-space: nowrap; }
.mobil-iletisim { display: grid; gap: 10px; padding: 14px 0 2px; }
.mobil-iletisim .btn { min-height: 50px; border-radius: 12px; font-size: 1.02rem; gap: 12px; }
.mobil-iletisim .btn svg { width: 22px; height: 22px; }
.mobil-iletisim .btn-beyaz { border: 1.5px solid #cfd2d6; }
.mobil-iletisim .mm-wa svg { width: 26px; height: 26px; color: var(--whatsapp); }

/* ---- 2. Giriş (hero): tam genişlik sessiz depo videosu, üstünde yazılar ---- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #292828, #161716); color: #fff; }
.hero-ic { position: relative; display: grid; }
.hero-metin { position: relative; padding: 30px var(--kenar) 32px; }
/* Metnin arkasında sağa doğru açılan kırmızı kepenk (çizgili) */
.hero-metin::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, #c8141c 0 12px, #8e0d13 12px 14px, #b5121a 14px 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.9) 75%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.9) 75%, #000 100%); }
.hero-metin::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,22,22,.96) 0%, rgba(22,22,22,.82) 45%, rgba(22,22,22,.35) 100%); }
.hero-metin > * { position: relative; z-index: 1; }
/* Metnin arkasında sessiz depo videosu; üstündeki koyu katman yazıyı okunur tutar (kepenk çizgileri videonun altında kalır) */
.hero-metin > .hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Videolu girişte kırmızı kepenk çizgileri hiç görünmesin: video yüklenene kadar arkada videonun ilk karesi durur */
.hero-metin.videolu { background: #161716 url("gorsel/hero-arka.webp?v=22") center / cover no-repeat; }
.hero-metin.videolu::before { display: none; }
.hero-metin.videolu::after { background: linear-gradient(180deg, rgba(14,14,14,.48), rgba(14,14,14,.56) 60%, rgba(64,4,9,.68)); }
.hero-metin.videolu h1, .hero-metin.videolu .hero-alt, .hero-metin.videolu .hero-rozet { text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }
.hero h1 { margin: 0; font: 800 clamp(2.1rem, 9vw, 3.5rem)/1.06 var(--font-baslik); letter-spacing: -.01em; }
.hero h1 .firca { position: relative; display: inline-block; }
.hero h1 .firca::after { content: ""; position: absolute; left: 30%; right: -2%; bottom: -.24em; height: .22em; background: var(--firca) center / 100% 100% no-repeat; }
.hero-alt { margin: 20px 0 0; max-width: 30rem; font-size: 1.12rem; line-height: 1.45; color: #f1f1f1; }
.butonlar { display: grid; gap: 12px; margin-top: 24px; }
.hero-bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .98rem; color: #eee; }
.hero-bilgi li { display: inline-flex; align-items: center; gap: 7px; }
.hero-bilgi li + li { padding-left: 14px; border-left: 2px solid rgba(255,255,255,.55); }
.hero-bilgi svg { width: 18px; height: 18px; color: #fff; }
/* "İstanbul Geneli Hizmet": butonların altında öne çıkan rozet */
.hero-rozet { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 4px 13px 4px 4px; border-radius: 99px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font: 800 .86rem/1.2 var(--font-baslik); letter-spacing: .01em; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.hero-rozet-ikon { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--kirmizi);
  box-shadow: 0 0 0 3px rgba(229,9,20,.25); }
.hero-rozet-ikon svg { width: 15px; height: 15px; color: #fff; }

/* ---- 3. Avantajlar ---- */
.avantaj { background: #f7f8f7; border-bottom: 1px solid var(--cizgi); }
.avantaj ul { list-style: none; margin: 0; padding: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.avantaj li { display: flex; align-items: center; gap: 12px; }
/* Beş madde: telefonda ve tablette ikişerli dizilir, sonuncusu tek başına tam satır */
.avantaj li:last-child { grid-column: 1 / -1; }
.ikon-daire { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pembe); color: var(--kirmizi); }
.ikon-daire svg { width: 26px; height: 26px; }
.avantaj .ikon-daire { width: 50px; height: 50px; }
.avantaj b { display: block; font: 800 .92rem/1.2 var(--font-baslik); color: var(--koyu); }
.avantaj li > div > span { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.3; color: #3a3d42; }

/* ---- Ortak bölüm düzeni ---- */
.bolum { padding: 44px 0; }
.bolum-baslik { text-align: center; margin: 0 auto 26px; max-width: 60rem; }
.bolum-baslik h2 { margin: 0; font: 800 clamp(1.45rem, 6vw, 2.1rem)/1.15 var(--font-baslik); color: #08090c; }
.bolum-baslik h2::after { content: ""; display: block; width: 180px; height: 14px; margin: 6px auto 0; background: var(--firca) center / contain no-repeat; }
.bolum-baslik p { margin: 8px 0 0; color: #33363b; }

/* ---- 4. Hizmet kartları ---- */
.kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kart { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 8px 14px; text-align: center;
  background: #fff; border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.kart-resim { width: 100%; aspect-ratio: 215 / 90; border-radius: 8px; overflow: hidden; background: #eee; }
.kart-resim img { width: 100%; height: 100%; object-fit: cover; }
.kart h3 { margin: 4px 0 0; font: 800 1.02rem/1.15 var(--font-baslik); color: var(--koyu); }
.kart p { flex: 1; margin: 0; padding: 0 4px; font-size: .84rem; line-height: 1.35; color: #2c2f33; }
.kart-btn { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 8px;
  background: var(--kirmizi); color: #fff; font: 800 .8rem/1 var(--font-baslik); text-decoration: none; white-space: nowrap; }
@media (min-width: 400px) { .kart-btn { gap: 8px; padding: 0 14px; font-size: .86rem; } }
.kart-btn:hover { background: var(--kirmizi-koyu); }
.kart-btn svg { width: 16px; height: 16px; }

/* ---- 5. Eşya hacmi bandı ---- */
.hacim-kart { display: grid; gap: 16px; justify-items: center; text-align: center; margin-top: 30px; padding: 22px 18px; border-radius: 18px; color: #fff;
  background: linear-gradient(180deg, #262626, #1a1a1a); box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.hacim-kart img { width: 150px; height: auto; }
.hacim-kart h2 { margin: 0; font: 800 clamp(1.4rem, 6vw, 1.9rem)/1.15 var(--font-baslik); }
.hacim-kart h2 .m3 { color: var(--kirmizi); }
.hacim-kart p { margin: 6px 0 0; color: #e6e6e6; font-size: 1.02rem; }
.hacim-kart .btn { border-radius: 12px; }

/* ---- 6. Nasıl çalışır ---- */
.adimlar { --ikon: 64px; --ara: 22px; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ara); }
.adim { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.adim .ikon-daire { position: relative; z-index: 1; width: var(--ikon); height: var(--ikon); background: #fdd5d3; box-shadow: inset 0 0 0 6px #ffe7e6; transition: background-color .35s, color .35s, box-shadow .35s, transform .35s; }
.adim .ikon-daire svg { width: 30px; height: 30px; }
.adim h3 { margin: 6px 0 0; font: 800 1.08rem/1.25 var(--font-baslik); color: var(--koyu); }
.adim p { margin: 4px 0 0; font-size: .95rem; color: #2c2f33; }
/* Çizgi bir sonraki ikona ilerler; "ulasti" ve "gecti" sınıflarını site_uret.py'deki betik sırayla ekler */
.adim-cizgi { position: absolute; left: calc(var(--ikon) / 2 - 1.5px); top: var(--ikon); bottom: calc(var(--ara) * -1); width: 3px; background: #fdd5d3; }
.adim-cizgi::before { content: ""; position: absolute; inset: 0; background: var(--kirmizi); transform: scale(1, 0); transform-origin: 0 0; transition: transform .3s; }
.adim.gecti .adim-cizgi::before { transform: none; transition: transform .8s linear; }
.adim.ulasti .ikon-daire { background: var(--kirmizi); color: #fff; box-shadow: inset 0 0 0 6px #f2545b, 0 8px 18px rgba(229,9,20,.3); transform: scale(1.06); animation: adimBuyu .55s ease-out; }
.adim.ulasti .ikon-daire::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--kirmizi); opacity: 0; animation: adimHalka .8s ease-out; }
@keyframes adimBuyu { 0% { transform: scale(1); } 50% { transform: scale(1.24); } 100% { transform: scale(1.06); } }
@keyframes adimHalka { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* ---- 7–8. Video + Neden Evindepoda.com ---- */
.tanitim-ic { display: grid; gap: 16px; }
/* Dikey (9:16) tanıtım videosu */
.video-oynatici { position: relative; width: min(100%, 340px); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #111; box-shadow: var(--golge); }
.video-oynatici video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.video-rozet { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px;
  background: rgba(0,0,0,.62); color: #fff; font: 800 .78rem/1 var(--font-baslik); pointer-events: none; }
.video-rozet i { width: 8px; height: 8px; border-radius: 50%; background: #ff2d37; box-shadow: 0 0 8px #ff2d37; }
.duraklatildi .video-rozet i { background: #bbb; box-shadow: none; }
.video-dugmeler { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
.video-dugmeler button { height: 42px; min-width: 42px; border: 0; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0,0,0,.62); color: #fff; font: 800 .8rem/1 var(--font-baslik); cursor: pointer; }
.video-dugmeler button:hover { background: var(--kirmizi); }
.video-dugmeler svg { width: 20px; height: 20px; }
.video-ses { padding: 0 12px; }
.video-ses .ses-acik, .video-ses[aria-pressed="true"] .ses-kapali { display: none; }
.video-ses[aria-pressed="true"] .ses-acik { display: block; }
.video-ses[aria-pressed="true"] span { display: none; }  /* ses açıkken yalnızca simge kalsın */
.video-ses[aria-pressed="true"] { padding: 0; width: 42px; }
.video-oynat { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(229,9,20,.92); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .2s, transform .2s; }
.video-oynat svg { width: 34px; height: 34px; margin-left: 4px; }
.duraklatildi .video-oynat { opacity: 1; transform: none; pointer-events: auto; }
/* Büyütülünce: büyüt düğmesi yerine kenarda ✕ (kapat) çıkar */
.video-dugmeler .video-kapat { display: none; width: 46px; height: 46px; }
.video-kapat svg { width: 24px; height: 24px; stroke-width: 2.6; }
.video-tam .video-kapat, .video-oynatici:fullscreen .video-kapat, .video-oynatici:-webkit-full-screen .video-kapat { display: inline-flex; }
.video-tam .video-buyut, .video-oynatici:fullscreen .video-buyut, .video-oynatici:-webkit-full-screen .video-buyut { display: none; }
.video-tam .video-dugmeler, .video-oynatici:fullscreen .video-dugmeler { top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
.video-oynatici:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
.video-oynatici:fullscreen video { object-fit: contain; }
.video-oynatici:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
.video-oynatici:-webkit-full-screen video { object-fit: contain; }
.video-oynatici.video-tam { position: fixed; inset: 0; z-index: 300; width: 100%; max-width: none; margin: 0; aspect-ratio: auto; border-radius: 0; background: #000; }
.video-tam video { object-fit: contain; }
.video-tam .video-dugmeler { top: calc(10px + env(safe-area-inset-top, 0px)); }
html.video-tam-acik, html.video-tam-acik body { overflow: hidden; }
html.video-tam-acik .tarama-fab { display: none; }
.tanitim-sag { display: grid; gap: 16px; align-content: center; }
.tanitim-kart { display: grid; gap: 14px; padding: 20px 18px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #2a2a2a, #171717); box-shadow: var(--golge); }
.tanitim-kart h3 { margin: 0; font: 800 1.25rem/1.2 var(--font-baslik); }
.tanitim-kart .tikli { gap: 8px; }
.tanitim-kart .btn { min-height: 50px; }
.tanitim-kart .btn svg { width: 22px; height: 22px; fill: currentColor; }

/* ---- Güven: Eşyanız nasıl korunuyor? ---- */

/* ---- Güven: Google puanı ---- */
.google-kart { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 22px 18px; border-radius: 18px; background: var(--gri-2); border: 1px solid #ebebeb; }
.google-puan { display: grid; justify-items: center; gap: 2px; }
.google-puan b { font: 800 2.6rem/1 var(--font-baslik); color: var(--koyu); }
.yildizlar { color: #fbbc04; font-size: 1.3rem; letter-spacing: 2px; line-height: 1.1; }
.google-puan small { font-size: .85rem; color: var(--soluk); }
.google-metin h2 { margin: 0; font: 800 clamp(1.3rem, 5vw, 1.6rem)/1.2 var(--font-baslik); color: #08090c; }
.google-metin p { margin: 6px 0 0; color: #33363b; }

/* ---- 9. Fiyatlar ---- */
.fiyatlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fiyat-kart { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 10px 14px; text-align: center; background: var(--gri-2); border-radius: 14px; }
.fiyat-kart img { width: 44px; height: auto; }
.fiyat-kart .m { margin-top: 4px; font: 800 1.7rem/1.1 var(--font-baslik); color: #08090c; }
.fiyat-kart .m sup { font-size: .55em; }
.fiyat-kart .alan { font-size: .9rem; color: #2c2f33; }
.fiyat-kart .tl { margin-top: 8px; font: 800 1.9rem/1 var(--font-baslik); color: var(--kirmizi); }
.fiyat-kart .ay { margin-top: 4px; font-size: .88rem; color: #2c2f33; }
/* Üç paket: dar ekranda ikisi yan yana, üçüncüsü tam satır */
.fiyat-kart:nth-child(3) { grid-column: 1 / -1; }
.populer { position: absolute; top: -10px; right: 10px; padding: 3px 10px; border-radius: 99px; background: var(--kirmizi); color: #fff; font: 800 .74rem/1.3 var(--font-baslik); }
.teklif-kart { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px; text-align: center;
  background: var(--pembe-2); border: 2px solid var(--kirmizi); border-radius: 14px; }
.teklif-kart h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 1.3rem/1.2 var(--font-baslik); color: var(--kirmizi); }
.teklif-kart h3 svg { width: 28px; height: 28px; }
.teklif-kart p { margin: 0; color: #2c2f33; }
.teklif-kart .btn { width: 100%; min-height: 48px; }

/* ---- 10. Alt bilgi ---- */
.alt { padding: 44px 0 0; background: var(--koyu); color: #d6d6d8; }
.alt-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.alt-ic > :first-child, .alt-ic > :last-child { grid-column: 1 / -1; }
.alt-logo { display: inline-block; padding: 8px 12px; border-radius: 12px; background: #fff; }
.alt-logo img { height: 58px; width: auto; }
.alt p { margin: 14px 0 0; font-size: .93rem; }
.alt h3 { margin: 0 0 12px; font: 800 1rem/1.2 var(--font-baslik); color: #fff; }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt a { color: #d6d6d8; text-decoration: none; }
.alt a:hover { color: #fff; text-decoration: underline; }
.alt-iletisim li { display: flex; align-items: flex-start; gap: 10px; }
.alt-iletisim svg { width: 18px; height: 18px; margin-top: 3px; color: var(--kirmizi); }
.alt-son { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 36px; padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: #9a9a9e; }

/* ---- Alt sayfalar ---- */
/* Açık banner: sol beyaz zeminde yazı, sağda kırmızı kapılı koridor fotoğrafı beyaza doğru solarak biter */
.sayfa-hero { position: relative; overflow: hidden; color: var(--koyu); background: #fbfbfc; border-bottom: 1px solid #efefef; }
.sayfa-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; pointer-events: none;
  background: url("gorsel/sayfa-banner.webp?v=27") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, rgba(0,0,0,.14) 65%, rgba(0,0,0,.3) 100%);
  mask-image: linear-gradient(90deg, transparent 35%, rgba(0,0,0,.14) 65%, rgba(0,0,0,.3) 100%); }
.sayfa-hero-ic { position: relative; padding-top: 26px; padding-bottom: 32px; }
.yol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .88rem; color: var(--koyu); }
.yol a { color: #5b5f66; text-decoration: none; }
.yol a:hover { color: var(--kirmizi); text-decoration: underline; }
.yol li + li::before { content: "›"; margin-right: 8px; color: var(--kirmizi); font-weight: 800; }
.sayfa-hero h1 { margin: 0; max-width: 46rem; font: 800 clamp(1.8rem, 7.5vw, 2.9rem)/1.1 var(--font-baslik); color: #1d1f24; }
.sayfa-hero h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--kirmizi); }
.sayfa-hero p { margin: 16px 0 0; max-width: 34rem; font-size: 1.08rem; color: #2c2f33; }
.sayfa-hero .butonlar { margin-top: 22px; }
@media (min-width: 768px) {
  .sayfa-hero::before { width: 48%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
  .sayfa-hero-ic { padding-top: 52px; padding-bottom: 60px; }
  .sayfa-hero h1 { max-width: 11em; }
  .sayfa-hero p { max-width: 26rem; }
}
@media (min-width: 1100px) { .sayfa-hero::before { width: 58%; } .sayfa-hero-ic { padding-top: 64px; padding-bottom: 74px; } .sayfa-hero p { max-width: 34rem; } }
.icerik-ic { display: grid; gap: 32px; }
.metin > section + section { margin-top: 34px; }
.metin h2 { margin: 0 0 12px; font: 800 clamp(1.3rem, 5vw, 1.65rem)/1.2 var(--font-baslik); color: #08090c; }
.metin h2::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 4px; background: var(--firca) left center / contain no-repeat; }
.metin p { margin: 0 0 12px; }
.tikli { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tikli li { display: flex; align-items: flex-start; gap: 10px; }
.tikli svg { width: 20px; height: 20px; margin-top: 2px; color: var(--kirmizi); stroke-width: 3.2; }
.yan { display: grid; gap: 16px; align-content: start; }
.yan-kutu { padding: 22px 20px; border-radius: 16px; background: var(--gri-2); }
.yan-kutu h3 { margin: 0 0 12px; font: 800 1.05rem/1.2 var(--font-baslik); color: #08090c; }
.yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.yan-liste a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px;
  font-weight: 600; color: var(--koyu); text-decoration: none; }
.yan-liste a svg { width: 16px; height: 16px; color: var(--kirmizi); }
.yan-liste a:hover, .yan-liste a[aria-current="page"] { background: #fff; color: var(--kirmizi); }
.yan .teklif-kart .btn + .btn { margin-top: 0; }
.ozet-kartlar { display: grid; gap: 12px; }
.bolge { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--cizgi); border-radius: 14px; background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.05); text-decoration: none; color: var(--koyu); }
.bolge:hover { border-color: var(--kirmizi); }
.bolge .ikon-daire { width: 46px; height: 46px; }
.bolge .ikon-daire svg { width: 22px; height: 22px; }
.bolge b { display: block; font: 800 1.02rem/1.2 var(--font-baslik); }
.bolge b + span { display: block; font-size: .88rem; color: var(--soluk); overflow-wrap: anywhere; }
.harita { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 16px; background: #eee; }
.iletisim-kartlar { display: grid; gap: 12px; }

/* ---- Tarama: sağ altta hareketli buton + tam sayfa tarama penceresi ---- */
.tarama-fab { position: fixed; z-index: 60; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; background: var(--kirmizi); color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px rgba(229,9,20,.45), 0 2px 6px rgba(0,0,0,.2); animation: fabZipla 6s ease-in-out 2s infinite; }
.tarama-fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--kirmizi); pointer-events: none; animation: fabHalka 2s ease-out infinite; }
.tarama-fab:hover { background: var(--kirmizi-koyu); }
.tarama-fab-ikon { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #fff; color: var(--kirmizi); }
.tarama-fab-ikon svg { width: 22px; height: 22px; }
/* ikonun üzerinden geçen tarama çizgisi */
.tarama-fab-ikon i { position: absolute; left: 7px; right: 7px; top: 9px; height: 2px; border-radius: 2px; background: var(--kirmizi); box-shadow: 0 0 6px 1px rgba(229,9,20,.7);
  animation: fabTara 1.6s ease-in-out infinite alternate; }
.tarama-fab-yazi b { display: block; font: 800 .98rem/1.1 var(--font-baslik); white-space: nowrap; }
.tarama-fab-yazi small { display: block; font: 600 .78rem/1.25 var(--font-govde); opacity: .92; }
@keyframes fabHalka { from { transform: scale(1); opacity: .85; } to { transform: scale(1.12, 1.45); opacity: 0; } }
@keyframes fabTara { from { top: 9px; } to { top: 31px; } }
@keyframes fabZipla { 0%, 88%, 100% { transform: none; } 91% { transform: translateY(-9px); } 94% { transform: none; } 97% { transform: translateY(-4px); } }

/* "Kimler Kullanıyor?": duruma göre kartlar; her kartta o duruma özel WhatsApp mesajı */
/* Dikey kart: ikon üstte, altında başlık ve metin */
.kimler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kimler-kart { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: 20px 12px 18px;
  background: #fff; border: 1px solid #ececec; border-top: 4px solid var(--kirmizi); border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.kimler-kart .ikon-daire { width: 62px; height: 62px; margin-bottom: 12px; }
.kimler-kart .ikon-daire svg { width: 29px; height: 29px; }
.kimler-kart h3 { margin: 0; font: 800 .98rem/1.25 var(--font-baslik); color: var(--koyu); }
.kimler-kart p { margin: 8px 0 0; font-size: .84rem; line-height: 1.45; color: #2c2f33; }
@media (min-width: 640px) { .kimler { grid-template-columns: repeat(3, 1fr); gap: 14px; } .kimler-kart { padding: 24px 16px 18px; } }
@media (min-width: 1100px) { .kimler { grid-template-columns: repeat(6, 1fr); } }

/* Sık sorulan sorular: açılır kapanır */
.sss { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.sss-oge { background: #fff; border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.sss-oge summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none;
  font: 800 1rem/1.3 var(--font-baslik); color: var(--koyu); }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary svg { width: 20px; height: 20px; flex: none; color: var(--kirmizi); transition: transform .2s; }
.sss-oge[open] summary svg { transform: rotate(180deg); }
.sss-oge[open] summary { color: var(--kirmizi); }
.sss-oge p { margin: 0; padding: 0 18px 16px; font-size: .95rem; line-height: 1.55; color: #2c2f33; }

/* "Güler Yüzlü Ekibimiz": telefonda fotoğraflar alt alta ve yazı altta; geniş ekranda araç fotoğrafı ekip fotoğrafının
   sağ alt köşesine biner, yazı sağda */
.ekip { display: grid; gap: 22px; align-items: center; }
.ekip-fotolar { display: grid; gap: 12px; }
.ekip-foto, .ekip-arac { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 18px; box-shadow: var(--golge); }
.ekip-foto { aspect-ratio: 3 / 2; }
.ekip-arac { aspect-ratio: 16 / 9; }
@media (min-width: 640px) {
  .ekip-fotolar { display: block; position: relative; padding-bottom: 70px; }
  .ekip-foto { width: 86%; }
  .ekip-arac { position: absolute; right: 0; bottom: 0; width: 48%; border: 6px solid #fff; border-radius: 16px; }
}
.ekip-metin h2 { margin: 0; font: 800 clamp(1.5rem, 5.5vw, 2.1rem)/1.15 var(--font-baslik); color: var(--koyu); }
.ekip-metin h2::after { content: ""; display: block; width: 150px; height: 12px; margin-top: 6px; background: var(--firca) left center / contain no-repeat; }
.ekip-metin p { margin: 12px 0 16px; font-size: 1rem; line-height: 1.6; color: #2c2f33; }
@media (min-width: 960px) { .ekip { grid-template-columns: 1.35fr 1fr; gap: 44px; } }

/* "Mutlu Müşterilerimiz": kendiliğinden sola kayan fotoğraf şeridi (liste iki kez yazılı, -50% kayınca başa sarar) */
.musteri-serit { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.musteri-liste { display: flex; gap: 16px; width: max-content; margin: 0; padding: 6px 0 14px; list-style: none; animation: musteriKay 40s linear infinite; }
.musteri-serit:hover .musteri-liste { animation-play-state: paused; }
.musteri-liste li { flex: none; width: 250px; }
/* sağdaki boşluk da kaymaya dahil olsun ki başa sararken sıçramasın */
.musteri-liste li:last-child { margin-right: 16px; }
.musteri-liste img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.12);
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
@keyframes musteriKay { to { transform: translateX(-50%); } }
@media (max-width: 639px) { .musteri-liste { gap: 12px; animation-duration: 30s; } .musteri-liste li { width: 190px; } .musteri-liste li:last-child { margin-right: 12px; } }
@media (prefers-reduced-motion: reduce) { .musteri-serit { overflow-x: auto; } .musteri-liste { animation: none; } }
/* "Eşyanız Nasıl Korunuyor?" şeridi: aynı kayan şerit, dikey fotoğraflar ve fotoğraf sayısına göre süre */
.koruma-liste { animation-duration: var(--sure); }
.koruma-liste img { aspect-ratio: 941 / 1672; }
@media (max-width: 639px) { .koruma-liste { animation-duration: calc(var(--sure) * .75); } }

/* Tarama butonunun üstündeki "Hemen Ara" butonu (tarama butonu 56px yüksekliğinde, arada 10px boşluk) */
.hizli-ara { position: fixed; z-index: 60; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--koyu); color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.2); }
.hizli-ara:hover { background: #000; }
.hizli-ara-ikon { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--kirmizi); color: #fff; }
.hizli-ara-ikon svg { width: 19px; height: 19px; animation: araSalla 3s ease-in-out 1s infinite; }
.hizli-ara-yazi b { display: block; font: 800 .95rem/1.1 var(--font-baslik); white-space: nowrap; }
@keyframes araSalla { 0%, 70%, 100% { transform: none; } 74%, 82%, 90% { transform: rotate(-14deg); } 78%, 86% { transform: rotate(14deg); } }
html.tarama-acik .hizli-ara, html.menu-acik .hizli-ara, html.video-tam-acik .hizli-ara { display: none; }
.alt-son { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }  /* sağ alttaki butonlar alt satırı örtmesin */

/* "kaç m³ tutar?" bandındaki koli resminin üzerinde gidip gelen tarama çizgisi */
.hacim-resim { position: relative; display: block; border-radius: 10px; overflow: hidden; }
.hacim-resim::after { content: ""; position: absolute; left: 16%; right: 16%; top: 14%; height: 2px; background: #ff2d37; box-shadow: 0 0 10px 2px rgba(255,45,55,.8);
  animation: hacimTara 2.4s ease-in-out infinite alternate; }
@keyframes hacimTara { from { top: 14%; } to { top: 84%; } }

/* Telefonda adres çubuğu açılıp kapansa da pencere görünen ekranı tam kaplasın (100dvh) */
.tarama-pencere { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 200; display: flex; flex-direction: column;
  background: #f5f6f7; overscroll-behavior: none; animation: pencereAc .22s ease-out; }
.tarama-govde { flex: 1; min-height: 0; padding-top: env(safe-area-inset-top, 0px); background: #f5f6f7; }
.tarama-govde iframe { display: block; width: 100%; height: 100%; border: 0; background: #f5f6f7; }
html.tarama-acik, html.tarama-acik body { overflow: hidden; }
html.tarama-acik .tarama-fab, html.menu-acik .tarama-fab { display: none; }
@keyframes pencereAc { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Telefonda tanıtım videosu siteye uyumlu yatay çerçevede (dikey videonun ortası); büyütünce videonun tamamı görünür */
@media (max-width: 639px) {
  .video-oynatici { width: 100%; aspect-ratio: 16 / 10; }
  .video-oynatici video { object-position: center 45%; }
}

/* Telefonda tek sütun yeterince yer olmayan yerler */
@media (max-width: 359px) {
  .kartlar, .fiyatlar { grid-template-columns: 1fr; }
  .avantaj ul { grid-template-columns: 1fr; }
}

/* ---- Geniş ekranlar ---- */
@media (min-width: 640px) {
  .butonlar { grid-template-columns: auto auto; justify-content: start; }
  .hero-metin { padding-top: 44px; padding-bottom: 44px; }
  .hacim-kart { grid-template-columns: auto 1fr; text-align: left; justify-items: start; }
  .hacim-kart .btn { grid-column: 1 / -1; justify-self: stretch; }
  .adimlar { --ara: 28px; max-width: 620px; margin: 0 auto; }
  .google-kart { grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; text-align: left; gap: 24px; padding: 22px 26px; }
  .google-puan { padding-right: 24px; border-right: 1px solid #ddd; }
  .tanitim-ic { grid-template-columns: 280px 1fr; align-items: center; }
  .video-oynatici { width: 100%; }
  .fiyatlar { grid-template-columns: repeat(3, 1fr); }
  .fiyat-kart:nth-child(3) { grid-column: auto; }
  .ozet-kartlar, .iletisim-kartlar { grid-template-columns: 1fr 1fr; }
  .iletisim-kartlar > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .kartlar { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .kart { padding: 10px 10px 16px; }
  .kart h3 { font-size: 1.12rem; }
  .kart p { font-size: .9rem; }
  .hacim-kart { grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; padding: 18px 26px; }
  .hacim-kart .btn { grid-column: auto; padding: 0 26px; min-height: 58px; font-size: 1.15rem; }
  .hacim-kart > div { padding-right: 26px; border-right: 2px solid rgba(255,255,255,.7); }
}
@media (min-width: 1024px) {
  .ust-ic { min-height: 64px; gap: 18px; }
  .logo img { height: 54px; }
  .menu { display: block; }
  .menu > ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .menu li { position: relative; }
  .menu a, .menu button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border: 0; background: none; border-radius: 8px;
    font: 700 .9rem/1 var(--font-baslik); color: var(--koyu); text-decoration: none; cursor: pointer; white-space: nowrap; }
  .menu a:hover, .menu button:hover, .menu li:focus-within > button, .menu a[aria-current="page"] { color: var(--kirmizi); }
  .menu button svg { width: 16px; height: 16px; }
  .alt-menu { position: absolute; left: 0; top: 100%; min-width: 250px; padding: 8px; margin: 0; list-style: none; background: #fff; border: 1px solid var(--cizgi);
    border-radius: 12px; box-shadow: var(--golge); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
  .menu li:hover > .alt-menu, .menu li:focus-within > .alt-menu, .menu button[aria-expanded="true"] + .alt-menu { opacity: 1; visibility: visible; transform: none; }
  .alt-menu a { display: flex; width: 100%; min-height: 40px; font: 600 .9rem/1.2 var(--font-govde); }
  .menu-ac, .yuvarlak.tel, .yuvarlak.wa { display: none; }
  .wa-hap { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px; border-radius: 99px; background: var(--kirmizi); color: #fff;
    font: 800 .98rem/1 var(--font-baslik); text-decoration: none; white-space: nowrap; box-shadow: 0 6px 16px rgba(229,9,20,.3); }
  .wa-hap .wa-daire { width: 32px; height: 32px; border-radius: 50%; background: var(--whatsapp); display: grid; place-items: center; }
  .wa-hap .wa-daire svg { width: 18px; height: 18px; }
  .yuvarlak.giris-bag { border-radius: 99px; border-color: var(--koyu); }
  .yuvarlak.giris-bag:hover { color: var(--kirmizi); border-color: var(--kirmizi); }
  .mobil-menu { display: none !important; }

  /* Video bandı tam genişlik; yazılar sitenin içerik hizasında solda */
  .hero-ic { max-width: none; padding: 0; }
  .hero-metin { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 500px; padding: 40px 40px 40px max(var(--kenar), calc((100vw - 1200px) / 2 + 16px)); }
  .hero-metin.videolu::after { background: linear-gradient(90deg, rgba(14,14,14,.7) 0%, rgba(14,14,14,.48) 55%, rgba(70,4,9,.38) 100%); }
  .hero-alt { font-size: 1.25rem; }
  .butonlar { grid-template-columns: auto auto; }
  /* Beş madde tek satıra ancak geniş ekranda sığar: burada üçlü + ikili dizilir */
  .avantaj ul { grid-template-columns: repeat(6, 1fr); gap: 14px 0; padding: 14px 0; }
  .avantaj li { grid-column: span 2; padding: 0 18px; }
  .avantaj li:nth-child(n+4) { grid-column: span 3; }
  .avantaj li + li { border-left: 1px solid #dcdcdc; }
  .avantaj li:nth-child(4) { border-left: 0; }
  .bolum { padding: 40px 0; }
  .adimlar { --ikon: 78px; --ara: 20px; max-width: none; grid-template-columns: repeat(4, 1fr); }
  .adim { flex-direction: column; align-items: center; text-align: center; }
  .adim .ikon-daire svg { width: 36px; height: 36px; }
  .adim-cizgi { left: calc(50% + var(--ikon) / 2); top: calc(var(--ikon) / 2 - 1.5px); bottom: auto; width: calc(100% + var(--ara) - var(--ikon)); height: 3px; }
  .adim-cizgi::before { transform: scale(0, 1); }
  .tanitim-ic { grid-template-columns: 330px 1fr; gap: 28px; }
  .fiyatlar { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .teklif-kart { grid-column: auto; justify-content: center; }
  .icerik-ic { grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
  .yan { position: sticky; top: 84px; }
  .ozet-kartlar { grid-template-columns: repeat(3, 1fr); }
  .alt-ic { grid-template-columns: 1.3fr 1fr 1fr 1.25fr; }
  .alt-ic > * { grid-column: auto !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .ust-ic { gap: 10px; }
  .logo img { height: 50px; }
  .menu a, .menu button { padding: 0 6px; font-size: .82rem; }
  .wa-hap { padding-right: 12px; font-size: .9rem; }
}
@media (min-width: 1200px) {
  /* Müşteri Girişi yazısı da sığsın diye menü boşlukları biraz daralır */
  .ust-ic { gap: 10px; }
  .logo img { height: 50px; }
  .menu a, .menu button { padding: 0 7px; }
  .wa-hap { padding-right: 12px; }
  .yuvarlak.giris-bag { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: 800 .88rem/1 var(--font-baslik); white-space: nowrap; }
  .yuvarlak.giris-bag svg { width: 18px; height: 18px; }
  .giris-bag span { display: inline; }
  .avantaj ul { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .avantaj li:nth-child(n) { grid-column: auto; padding: 0 14px; }
  .avantaj li:nth-child(4) { border-left: 1px solid #dcdcdc; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .alt-menu, .mobil-menu summary svg { transition: none; }
  .tarama-fab, .tarama-fab::before, .tarama-fab-ikon i, .hizli-ara-ikon svg, .hacim-resim::after, .tarama-pencere { animation: none; }
}
[hidden] { display: none !important; }
