/* * Public Theme Override CSS * Bu dosya DreamsTour style.css uzerine marka renk ve ozel ayarlamalari uygular. * Load order: bootstrap.min.css → style.css → demircode-override.css * * ⚠️ OTURUM 68 — BU DOSYA TENANT MARKA RENGINI EZIYORDU. * Onceki hali ':root { --dc-primary: #CF3425 }' ile platform kirmizisini SABIT tanimliyordu ve * _Layout'un inline ':root { --dc-primary: }' blogundan SONRA yuklendigi icin * esit ozgullukte kazaniyordu. Sonuc: beyaz-etiket sitede tum .btn-primary/.bg-primary * ogeleri platform kirmizisi cikiyordu (marka ADI degil GORSEL marka sizintisi). * Ayrica dosya basligindaki platform adi, ziyaretcinin "sayfa kaynagini goruntule" ile * okuyabilecegi bir metin sizintisiydi. * * Cozum: renkler artik _Layout'un tenant degiskeni --brand-primary'den TURETILIYOR. * CSS ozel degiskenleri kullanildigi anda cozuldugu icin yuklenme sirasi onemsiz hale gelir. * Fallback degeri kimseye ait olmayan notr bir gri (AgencyBranding.NeutralPrimaryColor). */ /* ============================ 1. MARKA RENKLERI (tenant'tan turetilir) ============================ */ :root { --dc-primary: var(--brand-primary, #1f2937); --dc-primary-dark: color-mix(in srgb, var(--dc-primary) 82%, #000); --dc-primary-light: color-mix(in srgb, var(--dc-primary) 12%, #fff); --dc-topbar-bg: #1a1a2e; --dc-header-bg: #ffffff; --dc-footer-bg: #16213e; --dc-footer-text: #b0b8c8; /* Dugme kose yaricapi — TEK KAYNAK (Ot.98/Faz-1). ⭐ Deger tahmin degil OLCUM: kullanicinin referans aldigi `.flag-dropdown .dropdown-toggle` tarayicida 6px olculdu. ⚠️ Bu bir BICIM jetonudur, marka jetonu DEGIL — kiraciya gore degismez (dort kiracida da ayni olculdu). Renk jetonlarina karistirma. */ --dc-radius-btn: 6px; } /* DreamsTour primary rengini tenant markasina uyarla */ .btn-primary, .bg-primary { background-color: var(--dc-primary) !important; border-color: var(--dc-primary) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--dc-primary-dark) !important; border-color: var(--dc-primary-dark) !important; } .text-primary { color: var(--dc-primary) !important; } .border-primary { border-color: var(--dc-primary) !important; } .bg-primary-transparent { background-color: var(--dc-primary-light) !important; } a { color: var(--dc-primary); } a:hover { color: var(--dc-primary-dark); } /* ============================ 2. FONT AYARLARI ============================ */ body { font-family: 'Poppins', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================ 3. HEADER / TOPBAR ============================ */ .header-topbar { background-color: var(--dc-topbar-bg) !important; } /* ============================ 4. FOOTER ============================ */ .footer-section, footer { background-color: var(--dc-footer-bg); color: var(--dc-footer-text); } /* ============================ 5. LOADER ============================ */ .loader-line { background: var(--dc-primary); } /* ============================ 6. BACK TO TOP ============================ */ .back-to-top { background-color: var(--dc-primary); } .back-to-top:hover { background-color: var(--dc-primary-dark); } /* ============================ 7. BADGE / STATUS RENKLERI ============================ */ .badge.bg-primary { background-color: var(--dc-primary) !important; } /* ============================ 8. FORM FOCUS RENGI ============================ */ .form-control:focus, .form-select:focus { border-color: var(--dc-primary); /* --dc-primary-rgb kaldirildi (sabit platform rengiydi); saydamlik color-mix ile turetilir */ box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dc-primary) 25%, transparent); } /* ============================ 9. PAGINATION AKTIF ============================ */ .page-item.active .page-link { background-color: var(--dc-primary); border-color: var(--dc-primary); } /* ============================ 10. STEP WIZARD AKTIF ============================ */ .step-wizard .step.active, .step-wizard .step.completed { background-color: var(--dc-primary); border-color: var(--dc-primary); } /* ============================ 11. PRINT STYLESHEET ============================ */ @media print { .main-header, .header-topbar, .header-eight, footer, .footer-section, .back-to-top, .breadcrumb-wrapper, .btn-print, .sidebar, .mobile-menu, .offcanvas-info, #loader-wrapper, .cookie-consent-bar { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } .card { border: 1px solid #ddd; box-shadow: none !important; } a { color: #000; text-decoration: none; } } /* ============================ 12. COOKIE CONSENT BAR ============================ */ .cookie-consent-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background-color: var(--dc-topbar-bg); color: #fff; padding: 16px 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15); } .cookie-consent-bar a { color: var(--dc-primary-light); text-decoration: underline; } .cookie-consent-bar .btn-accept { background-color: var(--dc-primary); border: none; color: #fff; padding: 8px 24px; border-radius: 4px; cursor: pointer; } .cookie-consent-bar .btn-accept:hover { background-color: var(--dc-primary-dark); } /* ═══════════════════════════════════════════════════════════════════════════════ FAZ-1 · DÜĞME BİÇİMİ STANDARDI (Oturum 98) ─────────────────────────────────────────────────────────────────────────────── TALEP: "Düğmeler yuvarlak olmasın, para birimi ve dil seçeneğindeki gibi dikdörtgen, köşeleri hafif yuvarlak olsun — bu tüm düğmelerin standartı olmalı." ⭐ HEDEF DEĞER TAHMİN DEĞİL ÖLÇÜM: kullanıcının referans aldığı seçici `.flag-dropdown .dropdown-toggle` tarayıcıda **6px** ölçüldü. 🔴 NEDEN BURADA, `site.css`'te DEĞİL: site.css BEŞ layout'un hepsinde yüklü (Admin/B2B dahil); bu dosya yalnız public layout'ta. Panellerdeki Bootstrap düğmeleri bu işin kapsamında değil ve sızıntı olmamalı. 🔴 NEDEN SADECE `border-radius`: düğmelerin rengi acentenin panelden seçtiği `--brand-primary`'den geliyor (518 kullanım). Kuralı yeniden yazmak yerine YALNIZ yarıçap satırı ezilir; `background` / `box-shadow` satırlarına dokunulmaz — aksi hâlde beyaz-etiket sitede platform rengi sızardı. ⚠️ Bu dosya `style.css`'ten SONRA yükleniyor (`_Layout.cshtml`), dolayısıyla eşit özgüllükte kazanır; `!important` yalnızca karşısında `!important` olan TEK noktada kullanıldı. ⛔ DOKUNULMAYANLAR: `%50` yuvarlak ikon düğmeleri (`.dc-sw-swap` vb.), `.rounded-circle`, ve `badge` rozetleri — onlar düğme değil. ═══════════════════════════════════════════════════════════════════════════ */ /* 1) Genel düğme — `style.css { .btn } = 40px` yerine */ .btn { border-radius: var(--dc-radius-btn); } /* 2) Header'daki Giriş Yap / Kayıt Ol — `style.css { header .header-btn .btn } = 55px` (özgüllük 0,2,1 → sade `.btn`'i yener, ayrıca ezilmesi ZORUNLU) */ header .header-btn .btn { border-radius: var(--dc-radius-btn); } /* 3) Footer bülten düğmesi — karşı taraf `!important` taşıyor (54px), tek çare bu */ .footer-input .input-group .btn { border-radius: var(--dc-radius-btn) !important; } /* 4) Arama motoru düğmeleri (`.dc-sw-submit`, `.dc-sw-apply-btn`) ⛔ BURADA EZİLMİYOR — denendi ve TARAYICIDA ÖLÇÜLDÜ: kural hiç uygulanmıyordu. Sebep: iki kural da eşit özgüllükte (0,1,0) ve `search-widget.css` `_Layout.cshtml`'de bu dosyadan SONRA yükleniyor → o kazanıyor. ⭐ Özgüllük savaşı yerine kaynağında düzeltildi: `search-widget.css` kendi kuralında artık `var(--dc-radius-btn, 6px)` kullanıyor. Widget stilinin evi orası; buraya ikinci bir kopya koymak ayrışma üretirdi. ⚠️ Yalnız yarıçap değişti: zemin `color-mix(... var(--brand-primary) ...)` ve gölge `--bs-primary-rgb` acentenin rengini taşıyor, onlara dokunulmadı. */ /* ═══════════════════════════════════════════════════════════════════════════════ FAZ-2 · OPAK HEADER + ÜST TAMPON (Oturum 98) ─────────────────────────────────────────────────────────────────────────────── Başlık bandı kaldırılan sayfalar `ViewBag.SolidHeader = true` der; `_Layout` gövdeye `dc-solid-header` sınıfını basar. 🔴 NEDEN GEREKLİ: bandın gizli işlevlerinden biri header'a KONTRAST sağlamaktı. Band kalkınca beyaz içerik üzerinde BEYAZ menü + BEYAZ logo kalır. ⚠️ ÖZGÜLLÜK TUZAĞI (depoda belgeli — Checkout/*TestPayment.cshtml): `_Layout` içindeki `.header-eight:not(.fixed) .header-nav` kuralı (0,3,0) ile şeffaflığı DAYATIYOR. Buradaki seçici `:not(.fixed)` içermezse (0,2,0) kalır, KAYBEDER ve yalnız renk kuralı uygulanır → şeffaf header üzerinde siyah menü. Bu yüzden her iki biçim de yazıldı. ⭐ Bu blok o iki görünümdeki kopyanın TEK GÖVDEYE alınmış hâlidir. ═══════════════════════════════════════════════════════════════════════════ */ body.dc-solid-header .header-eight .header-nav, body.dc-solid-header .header-eight:not(.fixed) .header-nav { background-color: #fff !important; backdrop-filter: none !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; } body.dc-solid-header .header-eight .header-nav .main-menu-wrapper .main-nav > li > a { color: #111827 !important; } body.dc-solid-header .header-eight .header-nav .header-btn .theme-toggle, body.dc-solid-header .header-eight .header-nav .header-btn .wishlist-icon, body.dc-solid-header .header-eight .header-nav .header__hamburger .sidebar-menu { color: #111827 !important; } /* LOGO TAKASI — zemin beyazlaşınca açık/ters logo GÖRÜNMEZ olur. Tema bu takası normalde yalnız `header.fixed` iken yapıyor (`style.css`: `.logo-dark{display:none}` + `header.fixed .logo-dark{display:block}`). Burada aynı durum sayfa başında da geçerli kılınıyor. ⚠️ Özgüllük: karşı kural `header .header-logo.logo-dark` (0,2,1); buradaki (0,3,1) → kazanır. */ body.dc-solid-header header .header-logo.logo-dark { display: block; } body.dc-solid-header header .header-logo.logo-white { display: none; } /* ÜST TAMPON — band kalkınca içerik header'ın ALTINA GİRİYOR. 🔴 ÖLÇÜLDÜ (ve ilk okumam YANLIŞTI): dıştaki sarmalayıcı `div.main-header` **position: absolute** — akışta SIFIR yer kaplıyor. İçteki `header` elemanı `relative` olduğu için önce "akışta, altına giremez" sanmıştım; yanlış ögeyi ölçmüşüm. `main#main-content` üstü = 0, header kutusu = 16..91 (masaüstü) / 16..115 (mobil-tablet). Yani tampon ZORUNLU. ⚠️ TEK DEĞER İKİ SAYFA TÜRÜNE BİRDEN DOĞRU GELMİYOR: · Arama motoru TAŞIYAN sayfalar (listeleme) kendi üst boşluğunu zaten üretiyor (`.dc-sw-results-wrap` dolgusu + bölüm dolgusu). Onlara tam açıklığı vermek mobilde ~90px fazladan boşluk bırakıyordu. · Motor TAŞIMAYAN sayfalar (detay, rezervasyon) sıfırdan başlıyor ve tam açıklık gerekiyor — ölçüldü: hero galeri 85'te, header altı 91 → 6px altta. Bu yüzden iki değer var; ayrım `:has()` ile yapılıyor (sayfalara sınıf eklemeden). */ /* VARSAYILAN — motor taşımayan sayfalar: header altı + 16px nefes payı */ body.dc-solid-header main#main-content { padding-top: 107px; } /* Motor TAŞIYAN sayfalar — kendi boşluğunu ürettiği için daha az. Ölçüldü: 86px ile sekmeler 107'de (header altı 91 + 16). */ body.dc-solid-header main#main-content:has(.dc-sw-results-wrap) { padding-top: 86px; } @media (max-width: 991.98px) { /* Mobil/tablette header 115'e kadar iniyor (logo daha büyük yuvada). */ body.dc-solid-header main#main-content { padding-top: 131px; } /* Ölçüldü: 43px ile ilk sonuç bloğu 131'de (header altı 115 + 16). */ body.dc-solid-header main#main-content:has(.dc-sw-results-wrap) { padding-top: 43px; } } /* ============================================================ OT.105 — BOLUM BASLIGI OLCUSU (kullanici: "Neden Bizi Tercih Etmelisiniz?" metninin boyutu tasarimsal olarak sayfada buyuk duruyor) 🔴 OLCULDU (ayni sayfa, ayni an): .section-header-eight h2 52px <- BU hero slogani (h2) 40px bulten basligi (h2) 32px Yani bolum basligi, sayfanin KENDI ana basligindan da buyuktu; hiyerarsi tersine donmustu. Sorun "buyuk" olmasi degil, SIRALAMANIN bozuk olmasiydi. ⭐ clamp ile olceklenir: 390px -> 24px · 768px -> ~28px · 1440px -> 36px. Boylece hero slogani (40px) her genislikte USTTE kalir. ⛔ Global `h2` kuralina DOKUNULMADI: yalniz bu bolum basligi sinifi hedeflendi; aksi halde bulten/blog basliklari da istenmeden degisirdi. ============================================================ */ .section-header-eight h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.25; } /* ============================================================ OT.105/5 — HERO BASLIGI HEADER ALTINDA KALIYORDU (responsive) 🔴 OLCULDU (390px, canli, DORT KIRACI): hero slogani her kiracida 108px'de basliyor ama header'in alt kenari 115px (uc kiraci) ve 140px (biletnette): acentecode / erriogo / bed2jet pay -7px ORTUSUYOR biletnette pay -32px ORTUSUYOR Yani bu YALNIZ biletnette sorunu DEGILDI ve benim degisikliklerimden de gelmiyordu — tema hero dolgusu SABIT, header yuksekligi ise KIRACIYA GORE degisir. ⭐ Dolgu header'in GERCEK ALT KENARINDAN turetiliyor (`--dc-sw-header-h`, JS yazar). Slogan `margin-top: 2rem` (32px) tasidigi icin dolgu = altKenar + 16 - 32. SONUC: her kiracida slogan header'in 16px altinda baslar. ⛔ Yalniz <992px: masaustunde hero zaten header'in altinda (olculdu, pay pozitif) ve orada dolgu eklemek hero'yu gereksiz uzatirdi. ============================================================ */ @media (max-width: 991.98px) { .hero-sec-eight > .container { /* ⚠️ ILK DENEMEM FAZLA DUZELTTI: pay 16px hedeflerken 92px cikti, cunku bolumun KENDI ust ofsetini (76px) hesaba katmamistim — dolgu onun USTUNE eklendi. Olculdu: slogan dogal olarak 108px'de basliyor (tema sabiti). ⭐ Dogru buyukluk EKSIK OLAN KADAR: altKenar + 16 - 108. `max()` ile, header kisa oldugunda NEGATIF dolgu uretmesin. */ padding-top: max(0px, calc(var(--dc-sw-header-h, 115px) + 16px - 108px)); } } /* ============================================================ §11 — DÜZ BEYAZ ZEMİN (Ot.111 / F3) ============================================================ Talep (`Düzenlemeler.docx` §11): *"Orta kısım ve bu ekranda gördüğün tüm kısımların arka plan rengi düz beyaz, hiç renk cümbüşü farklı renk olmadan şimdilik direk beyaz komple aşağıya kadar."* Maddenin görseli (`image9.png`) tam olarak fotoğraf zeminli "Neden Bizi Tercih Etmelisiniz?" bölümünü gösteriyor — yani o bölüm KAPSAMDA. 🔴 NEDEN BU DOSYA: `site.css` BEŞ layout'un hepsinde yüklü ve panellere sızar; `demircode-override.css` ise YALNIZ public layout'ta (ölçüldü: /admin, /b2b, layout'larında 0 referans). Zemin değişikliği panelleri etkilememeli. 🔴 ÖZGÜLLÜK SIRAYA BAĞLI OLAMAZ — yükleme sırası ÖLÇÜLDÜ (_Layout.cshtml): 266 tema style.css → 269 demircode-override.css → 272 site.css Yani tema kuralları buradan EŞİT özgüllükle ezilebilir (sonra geliyoruz), ama `site.css` bizden SONRA yüklendiği için onun `body` kuralı eşit özgüllükte KAZANIR. Bu yüzden `html body` (0-0-2) yazıldı. ⚠️ Faz 1'de birebir bu tuzağa düşülmüştü (override'a yazıldı, uygulanmadı). ============================================================ */ html body { background-color: #fff; } /* "Neden Bizi Tercih Etmelisiniz?" — fotoğraf zemini ve koyu gradyan kalkıyor. ⚠️ ZEMİN TEK BAŞINA DEĞİŞTİRİLEMEZ: bölümün başlığı ve kart metinleri BEYAZ. Yalnız arka planı beyaza çevirmek yazıları GÖRÜNMEZ yapardı. Metin tarafı markup'ta düzeltildi (`text-white` sınıfları kaldırıldı) — CSS'te `!important` savaşı açmak yerine ARTIK YANLIŞ OLAN GİRDİ düzeltildi. */ .why-choose-sec { background-image: none; background-color: #fff; } .why-choose-sec::before { display: none; /* koyu gradyan örtü */ } .why-choose-sec .section-header-eight h2 { color: var(--dc-text-dark, #111827); } /* Kartlar yarı saydamdı (`rgba(255,255,255,.3)` + `blur(44px)`) ve zemin beyaz olunca KAYBOLURDU. Yüzey UYDURULMADI: temanın KENDİ açık varyantından alındı (`.why-choose-nine .why-choose-item { border: 1px solid #E4EBF1 }`) — ve o değer bizim `--dc-border` jetonumuzla BİREBİR aynı. */ .why-choose-sec .why-choose-item { background-color: #fff; backdrop-filter: none; border: 1px solid var(--dc-border, #E4EBF1); } /* ============================================================ Ot.143 / #22 — UST MENUDE DIL + PARA BIRIMI SECICISI 🔴 KAPATTIGI KUSUR: secicileri saran kutular `d-none d-xl-block` tasiyordu, yani 1199px ve altindaki HER pencerede (tablet, dar dizustu, telefon) ust menude dil ve para birimi secicisi YOKTU. Olculdu (canli, biletnette.com/ucuslar): 1200 VAR @831,51 · 1199 YOK · 1100 YOK · 992 YOK · 768 YOK. Karsiligi yalnizca hamburger menunun icindeydi. ⭐ Kutular artik her genislikte cizilir; DAR ekranda yalnizca KISALIR: <576px para KODU gizlenir (simge kalir), boylece logo + secici + hamburger tek satira sigar. Acilir liste (tam ad + kod) her boyutta ayni. ⛔ Yalniz PUBLIC layout: bu dosya admin/b2b kabuklarinda yuklenmez. ============================================================ */ .dc-ust-secici { display: block; } @media (max-width: 575.98px) { /* Dar ekranda para KODU ("TRY") gizlenir; simge ("₺") ve dil kodu ("TR") kalir. */ .dc-ust-secici .dc-flag-code { display: none; } /* Dokunma hedefi korunur: kucuk yazi + dar bosluk, ama 32px yukseklik altina inmez. */ .dc-ust-secici .dropdown-toggle { min-height: 32px; font-size: 0.9rem; } }