/* ==========================================================================
SyncResto — V4 "SAHİL" · main.css
21 Eyl 2026. Biçim referansı: Aysel's mobil tasarımı.
🔴 TEK PALET — KOYU MOD YOK (Mustafa kararı, 21 Eyl). Klasik temadaki çizgi.
🔴 RENKLER BAYİDEN. Referanstaki petrol+altın yalnız varsayılan. Sunucu
(server.js v4Accents) üç kısıtı ÖLÇEREK tutturuyor, 9 kenar durumda doğrulandı:
beyaz metin / koyu bant ≥ 4.5 · altın / koyu bant ≥ 4.5 · bant / zemin ≥ 4.19
🔴 --primary/--accent/--price-color ADLARINI TANIMLAMA: common.js onları her
temada HAM renkle :root'a inline yazıyor. Köprü aşağıda, body üzerinde.
ÖLÇÜLEN GEOMETRİ (referans 1058×1600 görselinden, 390px genişliğe ölçeklenmiş):
dış marj %3,85 (15px) · kart arası %1,4 (5,5px) · kart oranı 2,05:1
========================================================================== */
:root {
/* v4-theme-head.ejs basar; buradakiler yalnız yedek */
--v4-deep: #053F50;
--v4-deep-rgb: 5, 63, 80;
--v4-gold: #C9AE78;
--v4-gold-rgb: 201, 174, 120;
--v4-gold-ink: #8A6A2F;
--v4-paper: #EEEFF0;
--v4-surface: #ffffff;
--v4-surface-2: #f5f6f7;
--v4-ink-0: #16242a;
--v4-ink-1: #46555a;
--v4-ink-2: #7a878d;
--v4-line: rgba(var(--v4-deep-rgb), .13);
--v4-on-deep: #ffffff;
--v4-on-deep-soft: rgba(255, 255, 255, .80);
--v4-on-deep-mute: rgba(255, 255, 255, .62);
--v4-shadow-1: 0 1px 3px rgba(16, 34, 40, .10);
--v4-shadow-2: 0 10px 28px rgba(16, 34, 40, .16);
--v4-gap: 6px; /* ölçüldü: 5,5 CSS */
--v4-edge: 17px; /* ölçüldü: 16,6 CSS */
--v4-r-card: 14px;
--v4-r-panel: 20px;
--v4-head-h: 32px; /* ölçüldü: bant 42,8 CSS (dalga dahil) — canlıda 47 çıktı, 4px kısıldı */
--v4-ikon: 26px; /* ölçüldü: 26,5 CSS */
--v4-tabbar-h: 59px; /* ölçüldü: 59,0 CSS */
--v4-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--v4-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--v4-ease: cubic-bezier(.22, .61, .36, 1);
}
/* ==========================================================================
🔗 DEĞİŞKEN KÖPRÜSÜ — TEK KAYNAK
Temel tema ve checkout.js'in ÜRETTİĞİ inline stiller renklerini
`--primary / --price-color / --bg / --text …` üzerinden kuruyor; common.js
bunları ÇALIŞMA ANINDA `:root`a inline yazıyor (ham bayi rengi, kontrast
denetimi YOK). `:root` inline'ı BODY'deki tanımı EZEMEZ → !important gerekmez.
Bu tek blok sepeti, ödeme adımlarını, giriş modalını temaya sokar.
common.js'in yazdığı 16 değişkenin TAMAMI burada karşılanır.
========================================================================== */
body.v4-theme {
--primary: var(--v4-deep);
--primary-color: var(--v4-deep);
--primary-dark: var(--v4-deep);
--primary-light: var(--v4-gold-ink);
--primary-rgb: var(--v4-deep-rgb);
--primary-glow: rgba(var(--v4-deep-rgb), .10);
--primary-soft: rgba(var(--v4-deep-rgb), .07);
--primary-alpha-30: rgba(var(--v4-deep-rgb), .30);
--secondary: var(--v4-gold-ink);
--secondary-color: var(--v4-gold-ink);
--secondary-glow: rgba(var(--v4-gold-rgb), .18);
--secondary-rgb: var(--v4-gold-rgb);
--accent: var(--v4-gold-ink);
--price-color: var(--v4-deep);
--price-color-rgb: var(--v4-deep-rgb);
--price-color-soft: rgba(var(--v4-deep-rgb), .08);
--bg: var(--v4-paper);
--surface-2: var(--v4-surface-2);
--text: var(--v4-ink-0);
--text-light: var(--v4-ink-2);
--text-muted: var(--v4-ink-2);
--shadow: rgba(16, 34, 40, .16);
--warning: #d99a2b;
--border-color: var(--v4-line);
}
/* ==========================================================================
TEMEL
========================================================================== */
body.v4-theme {
background: var(--v4-paper);
color: var(--v4-ink-0);
font-family: var(--v4-font-body);
padding-bottom: calc(var(--v4-tabbar-h) + env(safe-area-inset-bottom, 0px));
}
body.v4-theme h1, body.v4-theme h2, body.v4-theme h3,
body.v4-theme .section-title {
font-family: var(--v4-font-display);
font-weight: 700;
letter-spacing: .2px;
}
body.v4-theme ::selection { background: rgba(var(--v4-gold-rgb), .35); }
/* ==========================================================================
ÜST ÇUBUK — koyu bant, alt kenarı aşağı kavisli (referans)
🔴 min-height ZORUNLU: logo gizlenince başlık yalnız padding'e düşüyor ve
mutlak konumlu aksiyon ikonları ekranın üstünden kesiliyordu (klasik temada ölçüldü).
========================================================================== */
body.v4-theme .v3-header {
position: sticky; top: 0; z-index: 60;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: var(--v4-head-h);
/* 🔴 Alt pay 2px iken logo doğrudan dalganın üstüne oturuyordu ("logoyu yukarı
kaydır"). Referansta ölçüldü: logo 36,5 CSS, bandın kenar yüksekliği 46,5 →
üstte ~6, altta ~5 pay. */
/* Alt pay 0 iken logo dalgaya bitişiyordu. Üst pay, betiğin kestiği saydam
paydan (negatif marj) BÜYÜK olmalı; yoksa logo bandın dışına taşıyor. */
padding: 8px var(--v4-edge) 5px;
background: var(--v4-deep);
color: var(--v4-on-deep);
border: 0; box-shadow: none;
}
/* ── MENÜ BAŞLIĞIN YERİNİ ALIR ───────────────────────────────────────────────
Menü çubuğu başlığa değince başlık yukarı çekilir, çubuk onun yerine oturur.
Sınıfı `.v4-menu-nobeti` kutusunu izleyen betik koyuyor/kaldırıyor. */
body.v4-theme .v3-header { transition: transform .22s var(--v4-ease); will-change: transform; }
body.v4-theme.v4-menu-sabit .v3-header { transform: translateY(-115%); }
body.v4-theme.v4-menu-sabit .categories { top: 0; }
body.v4-theme .v4-menu-nobeti { height: 0; margin: 0; padding: 0; }
/* Kullanıcı hareket azaltma istediyse kaydırma yerine anında değişsin. */
@media (prefers-reduced-motion: reduce) {
body.v4-theme .v3-header { transition: none; }
}
/* ══ DALGA — referanstan ÖLÇÜLEREK çıkarıldı, göz kararı değil ══════════════
Altın çizginin yolu referans görselde sütun sütun izlendi:
x=%0 y=117 (band en ince)
x=%21 y=151 (en derin nokta)
x=%74 y=117 (tekrar düzleşir, sağa kadar sabit)
Genlik 44px/1600 = %2,75 → 390px ekranda ~16px. Ortalama bant yüksekliği ~46 CSS px.
Uygulama: border-radius elipsi bu eğriyi VERMİYOR (simetrik olur). Bunun yerine
ölçülen yol SVG maskesi olarak kullanılıyor; renk maskeden değil CSS değişkeninden
geldiği için BAYİ RENGİYLE birlikte değişiyor. Maske desteklenmezse (çok eski
tarayıcı) düz bir bant kalır — bozulmaz, sadece düz görünür.
═══════════════════════════════════════════════════════════════════════════ */
body.v4-theme .v3-header::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 11px;
background: var(--v4-deep);
-webkit-mask: var(--v4-dalga) no-repeat 0 0 / 100% 100%;
mask: var(--v4-dalga) no-repeat 0 0 / 100% 100%;
pointer-events: none;
}
/* altın çizgi: aynı eğrinin konturu */
body.v4-theme .v3-header::before {
content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 14px;
background: var(--v4-gold);
-webkit-mask: var(--v4-dalga-cizgi) no-repeat 0 0 / 100% 100%;
mask: var(--v4-dalga-cizgi) no-repeat 0 0 / 100% 100%;
pointer-events: none; z-index: 1;
}
/* Dalga sol kenarda en ince, ~%20'den sonra derinleşiyor. Logo tam sol kenarda
durunca bandın en dar yerine denk geliyordu; biraz sağa alınca eğrinin geniş
kısmına oturuyor. */
body.v4-theme .v3-header__brand { display: flex; align-items: center; gap: 8px; min-width: 0; margin-inline-start: 22px; }
/* Bandın yüksekliğini logo belirliyor (ölçüldü: 43 + 2 + 2 = 47). Referans bant 42,8. */
body.v4-theme .v3-header__brand img,
/* ⚠️ Bayinin logo dosyasında SAYDAM PAY var (aysels: 790x316 PNG'de üst 40 / alt 39 px,
görünür çizim dosyanın %75'i). Bu yüzden kutu yüksekliği = çizim yüksekliği DEĞİL.
Referansta çizim 34,3 CSS → 34,3 / 0,75 ≈ 45. Logo dosyası kırpılırsa bu değer
36'ya indirilmeli, bant da referanstaki 43,5'e oturur. */
body.v4-theme #headerLogo { max-height: 52px; height: auto; width: auto; }
body.v4-theme .v4-head-logo { max-height: 31px; width: auto; display: block; } /* ölçüldü: 31,3 CSS */
body.v4-theme .v3-header__name {
font-family: var(--v4-font-display); font-size: 1.28rem; font-weight: 700;
color: var(--v4-on-deep); letter-spacing: .4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.v4-theme .v3-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
body.v4-theme .v3-icon-btn {
width: var(--v4-ikon); height: var(--v4-ikon); border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(var(--v4-gold-rgb), .5);
color: var(--v4-on-deep); cursor: pointer; position: relative;
transition: background .18s var(--v4-ease);
}
body.v4-theme .v3-icon-btn:hover { background: rgba(255, 255, 255, .2); }
body.v4-theme .v3-icon-btn .cart-count {
position: absolute; top: -3px; inset-inline-end: -3px;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
background: var(--v4-gold); color: var(--v4-deep);
font: 700 10px/17px var(--v4-font-body); text-align: center;
}
/* ==========================================================================
KAPAK (hero)
========================================================================== */
body.v4-theme .v3-hero {
position: relative;
/* 🔴 NEGATİF MARJ KULLANILMIYOR. İlk hâlde arama paneli -46px ile kapağın dışına
taşırılıyordu; ama common.js bilgi şeridini panelin HEMEN ARDINA, yani AYNI
kapsayıcının içine koyuyor (ölçüldü) ve negatif marj şeridin yüksekliğini de
yukarı çekip alttaki bölümlerle çakıştırıyordu. Panel kapağın İÇİNDE en altta
duruyor — referanstaki görünümün aynısı, hesap kırılganlığı olmadan. */
padding: 0 0 2px;
background: var(--v4-paper);
}
/* Referanstan ölçüldü: kapak fotoğrafı alanı genişliğin %34,6'sı (390px'te ~135px),
arama paneli %9,5 (~37px). İlk sürümde 238/64 idi — bu yüzden aynı ekranda
referansın 6 kategori kartı görünürken bizde 2 kart görünüyordu. */
/* Ölçüldü: kapak fotoğrafı alanı 138 CSS, arama paneli 37 CSS, bilgi kartı 31 CSS,
kategori ızgarası y=258 CSS'te başlıyor. */
/* 🔴 min-height KULLANILMIYOR: kapağın görünen yüksekliği, içerik (panel + kart +
opsiyonel duyuru şeridi) ne kadar sürerse ona göre kayıyordu. Referansta kapak
ALANI SABİT (139 CSS) ve panel onun hemen altından başlıyor — bu yüzden yükseklik
içerikten değil, içeriğin ÜST BOŞLUĞUNDAN veriliyor. */
body.v4-theme .v3-hero.has-media,
body.v4-theme .v3-hero:not(.has-media) { min-height: 0; }
/* 🔴 21 Eyl — Mustafa: "şu tasarımı kapak fotoğrafının üstüne tasarlamayı bırak".
Fotoğraf artık kapağın TAMAMINI kaplamıyor; yalnız üstteki 139 CSS'lik bant.
Arama paneli, bilgi kartı ve duyuru şeridi fotoğrafın ALTINDA, sayfa zemininde. */
body.v4-theme .v3-hero__media {
position: absolute; top: 0; left: 0; right: 0;
height: var(--v4-kapak-h); overflow: hidden;
}
/* Kapağın ALT kenarı da dalgalı — başlık bandındaki eğrinin AYNISI, böylece iki
eğri paralel okunuyor. Dalganın altı sayfa zemini rengiyle boyanıp maskeleniyor;
maske desteklenmezse düz kenar kalır (bozulmaz). */
body.v4-theme .v3-hero__media::after,
body.v4-theme .v3-hero__bg::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
background: var(--v4-paper);
-webkit-mask: var(--v4-dalga-alt) no-repeat 0 0 / 100% 100%;
mask: var(--v4-dalga-alt) no-repeat 0 0 / 100% 100%;
pointer-events: none; z-index: 2;
}
body.v4-theme .v3-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.v4-theme .v3-hero__scrim {
position: absolute; top: 0; left: 0; right: 0; height: var(--v4-kapak-h);
background: linear-gradient(180deg, rgba(var(--v4-deep-rgb), .16) 0%, rgba(var(--v4-deep-rgb), .04) 44%, rgba(var(--v4-deep-rgb), .20) 100%);
}
/* görsel yoksa marka bandı — öne çıkan ürün fotoğrafına DÜŞMEZ (öngörülebilir davranış) */
body.v4-theme .v3-hero__bg { position: absolute; top: 0; left: 0; right: 0; height: var(--v4-kapak-h); background: var(--v4-deep); }
body.v4-theme .v3-hero__layer {
position: absolute; top: 0; left: 0; right: 0; height: var(--v4-kapak-h);
background: radial-gradient(120% 90% at 16% 10%, rgba(var(--v4-gold-rgb), .22), transparent 62%);
}
body.v4-theme .v3-hero__grain { display: none; }
/* Referansta metin kapağın ÜSTÜNDE, arama paneli kapağın EN ALTINDA duruyor
(foto 92-185, panel 185-224 CSS). İlk sürümde panel metnin hemen altına geliyor,
kapağın ortasında kalıyordu — ölçümde görüldü. */
body.v4-theme .v3-hero__content {
position: relative; z-index: 2;
padding: var(--v4-kapak-h) var(--v4-edge) 0;
display: flex; flex-direction: column; align-items: stretch;
justify-content: flex-end;
min-height: 0;
}
/* Referansta başlık bandının altındaki temiz fotoğraf şeridi 139 CSS (ölçüldü). */
/* 21 Eyl — Mustafa: "kapak fotoğrafını kıstın, büyük yap". Kapak, referanstaki
fotoğrafın panel+kart dâhil kapladığı görsel alan kadar: geniş bir kapak bandı,
tasarım onun ALTINDA (fotoğrafın üstünde hiçbir şey yok). */
body.v4-theme .v3-hero.has-media { --v4-kapak-h: 234px; } /* Mustafa: kapak BÜYÜK olsun (21 Eyl) */
body.v4-theme .v3-hero:not(.has-media) { --v4-kapak-h: 44px; }
body.v4-theme .v3-hero__content > :not(.search-section) { align-self: flex-start; }
body.v4-theme .v3-hero__name {
font-family: var(--v4-font-display); font-size: 1.62rem; line-height: 1.08;
font-weight: 700; color: var(--v4-on-deep);
}
body.v4-theme .v4-hero__rule {
width: 46px; height: 2px; margin: 8px 0 5px;
background: var(--v4-gold); border-radius: 2px;
}
body.v4-theme .v4-hero__tagline {
font: 500 .62rem/1 var(--v4-font-body); letter-spacing: .32em;
color: var(--v4-on-deep-soft); text-transform: uppercase;
}
/* ==========================================================================
ARAMA PANELİ — kapağın altına binen koyu panel
⚠️ `.search-container` SINIFI KORUNMALI: home.js dropdown'ı
`e.target.closest('.search-container')` ile kapatıyor; sınıf yoksa girdiye
tıklayınca bile kapanır ve arama kullanılamaz hâle gelir.
⚠️ common.js bilgi şeridini (#customInfoStrip) TAM bu elemanın ardına koyuyor.
⚠️ Temel tema `.search-section`a BEYAZ zemin veriyor (tarayıcıda ölçüldü) — ezilmeli.
========================================================================== */
/* SIRA REFERANSTAKİ GİBİ: arama paneli → bilgi kartı → duyuru şeridi.
Şeridi `common.js` çalışma anında `.search-container`ın hemen ARDINA koyuyor;
DOM sırası değiştirilemediği için görsel sıra `order` ile kuruluyor (üçü de
aynı esnek kapsayıcının çocuğu). */
body.v4-theme .search-section {
position: relative; z-index: 3;
display: flex; flex-direction: column;
width: 100%;
background: transparent; border: 0; box-shadow: none;
margin: -32px 0 0; padding: 0; /* referansta arama hapı kapağın ÜSTÜNE biniyor */
}
/* Referansta panel YARI SAYDAM: altındaki kapak fotoğrafı hafifçe görünüyor
(büyütmede ölçüldü). Blur destekleyen tarayıcıda cam etkisi, desteklemeyende
düz koyu zemin — okunurluk her iki hâlde de korunur. */
body.v4-theme .search-container {
width: 100%; max-width: none;
display: flex; align-items: center; gap: 7px;
background: rgba(var(--v4-deep-rgb), .90);
border: 1px solid rgba(var(--v4-gold-rgb), .42);
border-radius: 15px;
padding: 5px; /* dış 37 CSS: 5 + 27 + 5 */
box-shadow: var(--v4-shadow-2);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
body.v4-theme .search-container {
background: rgba(var(--v4-deep-rgb), .76);
-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
}
body.v4-theme .search-container > .search-bar { flex: 1 1 auto; min-width: 0; }
body.v4-theme .search-bar {
display: flex; align-items: center; gap: 9px;
background: rgba(255, 255, 255, .11);
border: 1px solid rgba(var(--v4-gold-rgb), .30);
border-radius: 999px;
padding: 2px 12px; /* iç hap 27 CSS */
min-height: 23px;
}
body.v4-theme .search-bar::before {
content: ""; width: 17px; height: 17px; flex: 0 0 17px;
background: var(--v4-on-deep-soft);
-webkit-mask: var(--v4-ico-search) center / contain no-repeat;
mask: var(--v4-ico-search) center / contain no-repeat;
}
body.v4-theme #searchInput {
flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
color: var(--v4-on-deep); font: 400 .78rem var(--v4-font-body);
}
body.v4-theme #searchInput::placeholder { color: var(--v4-on-deep-mute); }
body.v4-theme .search-clear {
display: none; background: transparent; border: 0; cursor: pointer;
color: var(--v4-on-deep-soft); padding: 2px;
}
/* 🔴 JS `.visible` EKLER — çifti yazılmazsa düğme hep görünür kalır */
body.v4-theme .search-clear.visible { display: inline-flex; }
body.v4-theme .search-dropdown {
display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px);
background: var(--v4-surface); color: var(--v4-ink-0);
border: 1px solid var(--v4-line); border-radius: var(--v4-r-card);
box-shadow: var(--v4-shadow-2);
max-height: 58vh; overflow: auto;
z-index: 70; /* kategori şeridinin (50) ÜSTÜNDE olmalı */
}
body.v4-theme .search-dropdown.active { display: block; }
/* ==========================================================================
İLETİŞİM / SAAT KARTI — referansın beyaz iki sütunlu kartı
========================================================================== */
body.v4-theme .v4-info {
order: 2;
display: flex; align-items: stretch; flex-wrap: wrap;
margin: 7px 0 0;
background: var(--v4-surface);
border: 1px solid var(--v4-line);
border-radius: var(--v4-r-card);
box-shadow: var(--v4-shadow-1);
overflow: hidden;
}
body.v4-theme .v4-info__col {
flex: 1.3 1 0; min-width: 0; overflow: hidden;
display: flex; align-items: center; gap: 8px;
padding: 7px 8px; gap: 7px; text-decoration: none; color: inherit;
}
body.v4-theme .v4-info__ico {
flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--v4-deep); color: var(--v4-on-deep);
}
body.v4-theme .v4-info__txt { display: flex; flex-direction: column; min-width: 0; }
body.v4-theme .v4-info__ico svg { width: 16px; height: 16px; }
/* 🔴 Referansta bu kartın TAMAMI serif (büyütülmüş karşılaştırmada okundu) —
gövde yazı tipiyle basmak kartı tasarımdan ayırıyordu. */
body.v4-theme .v4-info__txt small {
font: 400 .70rem/1.2 var(--v4-font-display); color: var(--v4-ink-1);
white-space: nowrap; /* "Rezervasyon için" alt satıra düşüyordu (ölçüldü) */
}
body.v4-theme .v4-info__txt b {
font: 700 .86rem/1.2 var(--v4-font-display); color: var(--v4-ink-0);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Saat sütunu referansta İKİ SATIR: "Restoran Açılış: 08:00" / "Kapanış: 23:00" */
body.v4-theme .v4-info__line {
display: block; white-space: nowrap;
font-size: .86rem; line-height: 1.22; /* 🔴 satır kutusu gövde 16px'e göre kurulup
kartı 52 CSS'e şişiriyordu (ölçüldü) */
}
body.v4-theme .v4-info__line[hidden] { display: none; }
body.v4-theme .v4-info__line small,
body.v4-theme .v4-info__line b { display: inline; }
/* 🔴 AYRAÇ ayrı eleman DEĞİL, saat sütununun kendi kenarlığı.
İlk hâli `:has()` ile yazılmıştı — eski Android WebView ve Safari<15.4 onu YOK SAYAR
ve saat verisi olmayan bayide ortada boşta bir çizgi kalırdı. Kenarlık, sütun
gizlenince kendiliğinden gider. */
body.v4-theme .v4-info__sep { display: none; }
body.v4-theme .v4-info__col--hours { flex: 1.15 1 0; border-inline-start: 1px solid rgba(var(--v4-gold-rgb), .55); }
body.v4-theme .v4-info__col--hours[hidden] { display: none; }
/* ==========================================================================
BİLGİ ŞERİDİ — panelden `qr_banner_*`; DOM'u common.js üretir
========================================================================== */
body.v4-theme .v3-info-strip {
display: flex; align-items: center; gap: 8px;
margin: 8px var(--v4-edge) 0;
padding: 11px 13px;
background: var(--v4-surface); color: var(--v4-ink-1);
border: 1px solid var(--v4-line); border-left: 3px solid var(--v4-gold-ink);
border-radius: var(--v4-r-card);
box-shadow: var(--v4-shadow-1);
font: 500 .85rem/1.35 var(--v4-font-body);
}
body.v4-theme .v3-info-strip__icon { color: var(--v4-gold-ink); }
/* Şerit `common.js` tarafından `.search-container`ın ARDINA, yani `.search-section`
içine konuyor (ölçüldü) — sayfa düzeyinde değil. Boşluk ona göre. */
/* 🔴 Duyuru artık bilgi kartının 3. SÜTUNU (yukarıdaki betik taşıyor). Şerit
görünümündeki kart/çerçeve/gölge sıfırlanır; kart içindeki diğer sütunlarla
AYNI tasarım: altın dikey ayraç + aynı serif yazı. */
/* 🔴 390 CSS'te üç sütun SIĞMIYOR: saat sütunu taşıp duyurunun üstüne biniyordu
(ölçüldü). Duyuru AYNI KARTIN içinde kalır; dar ekranda alt satıra, geniş
ekranda diğerlerinin yanına geçer — tasarım her iki hâlde de aynı. */
body.v4-theme .v4-info .v3-info-strip {
flex: 1 1 100%; min-width: 0;
margin: 0; padding: 7px 11px 7px 9px;
background: transparent; box-shadow: none; border-radius: 0;
/* ⚠️ `border: 0` ile aynı kuralda `border-top` yazılırsa sıraya göre siliniyor —
sıfırlama ÖNCE, ayraç SONRA. */
border: 0;
border-top: 1px solid rgba(var(--v4-gold-rgb), .55);
display: flex; align-items: center; gap: 6px; min-height: 0;
font: 400 .70rem/1.2 var(--v4-font-display); color: var(--v4-ink-1);
}
body.v4-theme .v4-info .v3-info-strip .v3-info-strip__text {
min-width: 0; overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;
}
/* Kartın dışında kaldıysa (betik yetişmediyse/kart yoksa) eski şerit görünümü sürer. */
body.v4-theme .search-section > .v3-info-strip { order: 3; margin: 6px 0 0; padding: 5px 10px; font-size: .70rem; }
body.v4-theme .banners-row,
body.v4-theme .v3-catgrid { margin-top: 14px; }
/* 🔴 Temel tema `.banners-row`a SABİT `min-height: 92px` veriyor (ölçüldü) — tüm
bantlar gizliyken bile 92px boşluk kalıyordu. Sahil'de bantlar akışta dizildiği
için sıfırlanır. */
body.v4-theme .banners-row { min-height: 0; height: auto; }
body.v4-theme .banners-row,
body.v4-theme .v3-catgrid { margin-top: 14px; }
/* 🔴 Temel tema `.banners-row`a SABİT `min-height: 92px` veriyor (ölçüldü) — tüm
bantlar gizliyken bile 92px boşluk kalıyordu. Sahil'de bantlar akışta dizildiği
için sıfırlanır. */
body.v4-theme .banners-row { min-height: 0; height: auto; }
body.v4-theme .v3-info-strip ~ .banners-row,
body.v4-theme .v3-info-strip ~ .v3-catgrid,
body.v4-theme .v4-info ~ .banners-row,
body.v4-theme .v4-info ~ .v3-catgrid { margin-top: 12px; }
/* ==========================================================================
SABİT DÜĞMELER — sekme çubuğunun ÜSTÜNE
========================================================================== */
body.v4-theme .floating-call-btn,
body.v4-theme .scroll-to-top {
bottom: calc(var(--v4-tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
z-index: 58;
}
body.v4-theme .floating-call-btn {
background: var(--v4-deep); color: var(--v4-on-deep);
border: 1px solid rgba(var(--v4-gold-rgb), .5);
}
body.v4-theme .scroll-to-top { background: var(--v4-surface); color: var(--v4-ink-1); border: 1px solid var(--v4-line); }
/* ==========================================================================
MAĞAZA KAPALI KATMANI
========================================================================== */
body.v4-theme .store-closed-overlay { background: rgba(var(--v4-deep-rgb), .96); color: var(--v4-on-deep); }
body.v4-theme .store-closed-content h2 { font-family: var(--v4-font-display); color: var(--v4-on-deep); }
body.v4-theme .closed-status { color: var(--v4-gold); }
/* ==========================================================================
MASAÜSTÜ — referans mobil; ≥901px'te sekme çubuğu gizlenir
========================================================================== */
@media (min-width: 901px) {
body.v4-theme { padding-bottom: 0; }
body.v4-theme .v4-tabbar { display: none; }
/* 🔴 Başlık bandı mobil ve masaüstünde AYNI 48 CSS kalıyordu; 1440 genişlikte
bant ince, logo küçük duruyordu (ölçüldü). Masaüstüne kendi ölçüleri. */
body.v4-theme .v3-header { padding: 11px var(--v4-edge) 8px; }
body.v4-theme #headerLogo { max-height: 68px; }
body.v4-theme .v3-header__brand { margin-inline-start: 0; }
/* Başlık içeriği alttaki 1180'lik kapsayıcıyla HİZALI olsun; bant tam genişlikte kalır. */
body.v4-theme .v3-header { padding-inline: max(var(--v4-edge), calc((100% - 1180px) / 2)); }
/* 🔴 Dalga `preserveAspectRatio: none` ile yatay geriliyor: 390'da 11px olan
derinlik 1440'ta neredeyse düz bir çizgiye dönüşüyordu. Genişlikle birlikte
derinlik de artırılır. */
body.v4-theme .v3-header::after { bottom: -26px; height: 26px; }
body.v4-theme .v3-header::before { bottom: -29px; height: 33px; }
body.v4-theme .v3-hero__media::after,
body.v4-theme .v3-hero__bg::after { height: 34px; }
body.v4-theme .floating-call-btn,
body.v4-theme .scroll-to-top { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
body.v4-theme .v3-hero.has-media { --v4-kapak-h: 340px; }
body.v4-theme .v3-hero__content { max-width: 1180px; margin-inline: auto; padding-inline: var(--v4-edge); }
/* 🔴 `.v4-info` ESNEK bir kapsayıcının (`.search-section`) çocuğu; çapraz eksende
`margin-inline: auto` germeyi iptal edip kartı İÇERİĞİNE büzüyor — masaüstünde
arama 1140px iken kart 375px kalıyordu (ölçüldü). Kart zaten 1180'lik kapsayıcının
içinde, ayrıca sınırlanmasına gerek yok. */
body.v4-theme .v4-info { width: 100%; max-width: none; margin-inline: 0; }
/* Şerit kartın DIŞINDA kaldıysa (betik yetişmediyse) ortalanır. */
/* 🔴 Şerit de `.search-section` ESNEK kapsayıcısının çocuğu: `margin-inline: auto`
germeyi iptal edip şeridi metnine büzüyordu (masaüstünde 489px ölçüldü, kapsayıcı
1146px). Aynı tuzağın üçüncü kez çıktığı yer. */
body.v4-theme .search-section > .v3-info-strip {
width: 100%; max-width: none; margin-inline: 0;
padding: 11px 16px; font-size: .85rem;
}
/* 🔴 Bant satırı genişlik sınırı almamıştı: "Günün Fırsatı" 1400px'e yayılıp
ortası bomboş kalıyordu. */
body.v4-theme .banners-row,
body.v4-theme .featured-slider { max-width: 1180px; margin-inline: auto; }
}
:root {
/* Ölçülen dalga: M0,0 → (%21, derin) → (%74, düz) → sağa kadar düz.
Kübik Bézier yaklaşımı ölçüm noktalarına oturtuldu. */
--v4-dalga: url('data:image/svg+xml;utf8,');
--v4-dalga-alt: url('data:image/svg+xml;utf8,');
--v4-dalga-cizgi: url('data:image/svg+xml;utf8,');
--v4-ico-search: url('data:image/svg+xml;utf8,');
}
/* Duyuru ancak kart üç sütunu GERÇEKTEN taşıyabildiğinde yana geçer.
540'ta saat sütunu kırpılıyordu (masaüstü çekiminde görüldü). */
@media (min-width: 760px) {
body.v4-theme .v4-info .v3-info-strip {
flex: 1 1 0;
border-top: 0;
border-inline-start: 1px solid rgba(var(--v4-gold-rgb), .55);
}
}