/* ========================================================================= st-fix.css — REVİZYON (Faz 8): Porto theme.css "bleed" düzeltmeleri. ------------------------------------------------------------------------- EN SON yüklenir (functions.php priority 999, st-style bağımlı). Amaç: onaylı statik tasarımın tipografisi (Plus Jakarta Sans / Dancing Script) ve header/footer form stilleri Porto'nun kendi CSS'ini (Poppins + input skin) EZSİN. İkonlar inline SVG olduğundan Porto icon-font'ları (FontAwesome / Simple-Line-Icons) ETKİLENMEZ — burada i/.fa/.sli hedeflenmez. ========================================================================= */ /* 1) TİPOGRAFİ — tüm sitede statik font. Porto base font'u Poppins; statik tasarım Plus Jakarta Sans. Metin öğelerinde zorlanır (icon-font'lara dokunulmaz). */ body, button, input, textarea, select { font-family: var(--st-font) !important; } h1, h2, h3, h4, h5, h6, .st-nav-link, .st-mega-link, .st-mega-col-title, .st-section-title, .st-eyebrow, .st-newsletter h2, .st-footer-cols h5, .st-foot-links a, .st-mobile-link, .st-lang, .st-lang button { font-family: var(--st-font) !important; } /* El yazısı vurgular Dancing Script kalır */ .st-script, .st-script * { font-family: var(--st-script) !important; } /* 2) NEWSLETTER INPUT — Porto input[type=email] skin'ini geri al (statik birebir: şeffaf zemin, çerçevesiz, beyaz metin; pill çerçeve .st-news-input'ta). */ .st-news-input input { background: none !important; border: none !important; border-radius: 999px !important; color: #fff !important; font-size: 15px !important; font-weight: 500 !important; height: auto !important; min-height: 0 !important; padding: 12px 0 !important; box-shadow: none !important; outline: none !important; } .st-news-input input::placeholder { color: rgba(255,255,255,.6) !important; opacity: 1; } /* 3) BUTON — SADECE `.btn` ile birlikte kullanılan st- butonları Porto `.btn` temelini ezmeli (mobil menü .btn.st-btn-blue beyaz kutu görünüyordu). Yalnız şablonlarda class="btn st-btn-*" geçen 3 varyant hedeflenir; gold/read standalone olduğundan dokunulmaz (hover davranışları korunur). */ .st-btn-blue { background: var(--st-blue) !important; color: #fff !important; border: none !important; border-radius: 999px !important; } .st-btn-blue:hover { color: #fff !important; } .st-btn-resv { background: var(--st-red) !important; color: #fff !important; border: none !important; border-radius: 13px !important; } .st-btn-resv:hover { color: #fff !important; } .st-btn-outline-dark { background: transparent !important; border: 1.6px solid var(--st-navy) !important; border-radius: 999px !important; color: var(--st-navy) !important; } .st-btn-outline-dark:hover { background: var(--st-navy) !important; color: #fff !important; } /* 4) FABLE ONAY TURU minörleri (2026-07-21): (a) turlar filtre arama kutusu — Porto input padding'i statik 40px sol boşluğu eziyordu (ikon-placeholder çakışması); (b) footer Abone Ol — Porto .btn metriği statik pill boyutunu küçültüyordu. */ .st-fsearch input { padding: 13px 14px 13px 40px !important; } .st-news-form .st-btn-blue { padding: 16px 30px !important; font-size: 15px !important; line-height: 1.2 !important; } /* ========================================================================= REVİZYON-3 (2026-07-21) — müşteri revizyon turu, 6 kalem. ========================================================================= */ /* R1) Header util bar border — custom.css'teki .st-hbx-util border-bottom'u, satır kendisi porto-inner-container padding'i (30px) yüzünden 1380/1440px genişliğinde kalıp kenarlara değmiyordu (statikte .st-util tam genişlik kenar-kenar çiziliyor). Satırı olduğu gibi bırakıp ::after ile aynı çizgiyi ebeveyn .container-fluid'in (tam viewport) kenarlarına kadar uzatıyoruz. */ #header .st-hbx-util { position: relative; } #header .st-hbx-util::after { content: ""; position: absolute; left: -30px; right: -30px; bottom: 0; border-bottom: 1px solid rgba(255,255,255,.14); pointer-events: none; } /* R2) Anasayfa hero noktaları — custom.css'teki .st-hx .owl-dots{left:5vw} kuralı viewport > 1480px olduğunda (.st-hero-content'in max-width:1480+margin:auto ile ortalanmasını hesaba katmadığından) içerikle (eyebrow/başlık) hizasını kaybediyordu — 1890px genişlikte ~205px sola kaymış görünüyordu (statik referansta da aynı formül var; geniş ekranlarda ikisi de kayıyor, burada noktaları içerik kutusuyla HER genişlikte hizalı kalacak şekilde düzeltiyoruz). */ @media (min-width: 768px) { .st-hx .owl-dots { left: max(5vw, calc(55vw - 740px)) !important; } } /* R3) Tur detay "Program Hakkında" grid'i — .st-detail-wrap'ın ana kolonu sabit "1fr" olduğundan (varsayılan min-width:auto), herhangi bir turda (8 turdan biri) uzun/kırılmayan içerik olursa kolon genişliği viewport'u aşıp sağdaki rezervasyon panelini görünmez kılabilir ("grid blowout"). minmax(0,1fr) ile kolonun içerik ne olursa olsun asıl genişliğine (744px vb.) sabit kalmasını, taşan metnin normal şekilde satır kırmasını sağlarız. Görsel sonuç mevcut (taşmayan) durumda birebir aynıdır. (2026-07-28: kural min-width:992px'e scope'landı — scope'suz hali mobil tek-kolon kuralını ezip içerik kolonunu 0px'e düşürüyordu) */ @media (min-width: 992px) { .st-detail-wrap { grid-template-columns: minmax(0,1fr) 388px !important; } } .st-detail-wrap > * { min-width: 0; } .st-detail-sec, .st-detail-sec p { overflow-wrap: break-word; word-break: normal; } /* R4) Header "Turlar" dropdown — Porto'nun narrow-submenu bileşeni JS ile "pos-left"/"pos-right" sınıfları arasında geçiş yaparak dar (240px) kutuyu bazen sağdan sola ani bir sıçramayla konumlandırıyor; bu statikteki mega-menünün (kırmızı üst çizgili, düzgün fade+slide açılış) hissiyatından çok farklı ve "sağdan tuhaf" görünüyor. Porto'nun konum hesaplamasını (pos-left/pos-right + olası inline left/right) tamamen devre dışı bırakıp popup'ı KENDİ tetikleyici linkinin (li, position:relative) SAĞ kenarına sabit ve öngörülebilir şekilde hizalıyoruz — statikteki mega menünün kırmızı üst çizgi + gölge + yumuşak fade/slide açılışını taklit ederken, viewport'a göre değil kendi öğesine göre konumlandığından hiçbir genişlikte taşma/sıçrama riski yok (Porto'nun kendi açma/kapama JS'ine dokunulmadı, yalnız konum/ hizalama/görünüm ezildi). */ #header .top-links.mega-menu li.has-sub { position: relative !important; } #header .top-links.mega-menu li.has-sub > .popup { left: auto !important; right: 0 !important; width: 360px !important; max-width: 360px !important; transform: translateY(-8px) !important; } #header .top-links.mega-menu li.has-sub:hover > .popup, #header .top-links.mega-menu li.has-sub.sub-ready:hover > .popup { transform: translateY(0) !important; } #header .top-links.mega-menu li.has-sub > .popup > .inner { border-top: 3px solid var(--st-red) !important; box-shadow: 0 34px 70px rgba(4,14,28,.3) !important; } #header .top-links.mega-menu .sub-menu.pos-left, #header .top-links.mega-menu .sub-menu.pos-right { position: static !important; width: 100% !important; max-width: none !important; margin: 0; padding: 14px 8px !important; } /* R5) Anasayfa/Hakkımızda/İletişim — Porto'nun varsayılan .main-content padding-bottom:40px kuralı (page şablonunda tüm sayfa builder içeriğinden SONRA, footer'dan ÖNCE) statik tasarımda hiç olmayan beyaz bir boşluk yaratıyordu (footer newsletter bandı statikte son bölüme bitişik başlar). */ body.page-id-14 .main-content, body.page-id-15 .main-content, body.page-id-16 .main-content, body.page-id-153 .main-content { padding-bottom: 0 !important; } /* R6) İstatistik bandı — mevcut token'lara sadık zarif iyileştirme (müşteri isteği: bilinçli statikten-iyileştirme). Kolonlar arası ince ayraç, sayılarda altın degrade + hover mikro-etkileşim, etiket kontrastı, bandın köşe/gölge rafinesi. Abartısız, kurumsal. */ .st-stx-band { border-radius: 26px !important; box-shadow: 0 26px 60px -14px rgba(0,28,64,.5), inset 0 1px 0 rgba(255,255,255,.16) !important; position: relative; overflow: hidden; } .st-stx-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; } .st-stx-band > .vc_column_container { position: relative; transition: transform .3s ease; } .st-stx-band > .vc_column_container:not(:first-child)::after { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.3), transparent); } .st-stx-band > .vc_column_container:hover { transform: translateY(-3px); } .st-stx-num { background: linear-gradient(120deg, #ffffff 40%, var(--st-gold-2) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; letter-spacing: -.02em !important; } .st-stx-lbl p { color: #eaf5ff !important; letter-spacing: .05em !important; text-transform: uppercase; font-size: 12.5px !important; font-weight: 700 !important; opacity: .95; } /* ==================== REVİZYON-2c-HAKKIMIZDA (2026-07-21) ==================== Hakkımızda (sayfa 15) Text-Block HTML'den NATIVE elementlere çevrildi. story/trust custom.css'teki st-abx/st-trx hook'larını yeniden kullanır (birebir). Aşağıdaki 3 blok YENİ: iç hero (st-ihx), plain istatistik bandı (st-abtstx — st-stx REVİZYON-3 altın/uppercase iyileştirmesi taşıdığından statik düz banda uymuyor, ayrı düz hook), CTA bandı (st-ctx). En son yüklenir (@999). */ /* --- İç hero: .st-detail-hero native karşılığı --- */ .vc_row.st-ihx { position: relative; min-height: 452px; height: 60vh; overflow: hidden; background: var(--st-navy); } .st-ihx .st-ihx-img { position: absolute !important; inset: 0; margin: 0 !important; z-index: 0; width: 100%; height: 100%; } .st-ihx .st-ihx-img .vc_single_image-wrapper, .st-ihx .st-ihx-img figure { width: 100%; height: 100%; margin: 0; } .st-ihx .st-ihx-img img { position: absolute; inset: -2%; width: 104% !important; height: 104% !important; object-fit: cover; animation: st-kenburns 14s ease-out alternate infinite; } .st-ihx::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,rgba(6,18,34,.78) 0%,rgba(6,18,34,.45) 45%,rgba(6,18,34,.15) 100%); } .st-ihx::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg,rgba(6,18,34,.85) 0%,rgba(6,18,34,.25) 34%,transparent 60%); } .st-ihx .st-ihx-cap { position: static !important; margin: 0 !important; } .st-ihx .st-hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 5vw 54px; max-width: 1480px; margin: 0 auto; z-index: 2; } .st-ihx .st-hero-content h1 { font-weight: 800; font-size: clamp(32px,4.6vw,58px); line-height: 1.06; letter-spacing: -.025em; color: #fff; margin: 0 0 26px; max-width: 920px; text-wrap: balance; text-shadow: 0 4px 30px rgba(0,0,0,.4); } @media (max-width: 767.98px) { .vc_row.st-ihx { height: auto; min-height: 0; padding-top: 96px; } .st-ihx .st-hero-content { position: relative; padding: 28px 24px 34px; } .st-ihx .st-hero-content h1 { font-size: 30px; } } /* --- Plain istatistik bandı: .st-stats/.st-stats-band birebir (REVİZYON-3'süz) --- */ .vc_row.st-abtstx { max-width: 1240px; margin: 0 auto !important; padding: 0 28px 20px; } .st-abtstx .st-abtstx-band { background: linear-gradient(120deg,#004890,#0a86c4); border-radius: 24px; padding: 44px 40px; margin: 0 !important; text-align: center; color: #fff; display: flex; } .st-abtstx-band > .vc_column_container { padding: 0 !important; } .st-abtstx-band .vc_column-inner { padding: 0 !important; } .st-abtstx-num { font-weight: 800 !important; font-size: clamp(30px,3.4vw,42px) !important; color: #fff !important; margin: 0 !important; } .st-abtstx-lbl { margin: 0 !important; } .st-abtstx-lbl p { font-weight: 500; font-size: 14px; color: #cfe4f3; margin: 0 !important; } @media (max-width: 991.98px) { .st-abtstx-band { flex-wrap: wrap; gap: 30px 16px; } .st-abtstx-band > .vc_column_container { width: 50% !important; } } /* --- CTA bandı: .st-cta / .st-cta-inner / .st-cta-band native karşılığı --- */ .vc_row.st-ctx { max-width: 1240px; margin: 0 auto !important; padding: 100px 28px; } .st-ctx .st-ctx-band { position: relative !important; border-radius: 28px; overflow: hidden; padding: 66px 56px !important; background: var(--st-navy); margin: 0 !important; } .st-ctx .st-ctx-band > .vc_column-inner { padding: 0 !important; } .st-ctx .st-ctx-img { position: absolute !important; inset: 0; margin: 0 !important; z-index: 0; width: 100%; height: 100%; } .st-ctx .st-ctx-img .vc_single_image-wrapper, .st-ctx .st-ctx-img figure { width: 100%; height: 100%; margin: 0; } .st-ctx .st-ctx-img img { width: 100% !important; height: 100% !important; object-fit: cover; opacity: .28; } .st-ctx .st-ctx-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(12,32,52,.92) 30%, rgba(12,32,52,.55)); } .st-ctx .st-ctx-body { position: relative; z-index: 2; margin: 0 !important; } .st-ctx .st-ctx-body .body { position: relative; max-width: 640px; color: #fff; } .st-ctx .st-ctx-body .body h2 { font-weight: 800; font-size: clamp(28px,3.4vw,44px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; color: #fff; } .st-ctx .st-ctx-body .body p { font-size: 16px; line-height: 1.7; color: #c3d4e4; margin: 0 0 28px; } @media (max-width: 575.98px) { .vc_row.st-ctx { padding: 70px 20px; } .st-ctx .st-ctx-band { padding: 46px 28px !important; } } /* ========================================================================= 404 — "Sayfa bulunamadı" (child 404.php · Türkçe) Porto'nun .page-not-found bloğu yerine geçer; yalnız bu şablona scoped. ========================================================================= */ body.error404 #main > .container, body.error404 #main > .container > .row > .main-content { max-width: 100%; } body.error404 .main-content { padding-bottom: 0 !important; } /* 404'te hero yok → sabit (transparent) header beyaz zeminde görünmez kalıyordu. Bu sayfada header kalıcı olarak "is-stuck" görünümüne alınır (st-style.css + uploads/js_composer/custom.css is-stuck kurallarının error404'e scoped kopyası; st-main.js scroll mantığına DOKUNULMAZ, sınıf değil stil kopyalanır). */ body.error404 .st-header { background: #fff !important; box-shadow: 0 10px 30px rgba(16,60,100,.14); } body.error404 .st-header .st-util, body.error404 .st-header .st-hbx-util { max-height: 0 !important; opacity: 0 !important; border-color: transparent !important; } body.error404 .st-header .st-nav-link, body.error404 .st-header ul.st-hbx-menu-left > li > a, body.error404 .st-header ul.st-hbx-menu-right > li > a { color: var(--st-navy) !important; } body.error404 .st-header .st-nav-link:hover, body.error404 .st-header ul.st-hbx-menu-left > li > a:hover, body.error404 .st-header ul.st-hbx-menu-right > li > a:hover { color: var(--st-blue) !important; } body.error404 .st-header .st-logo-white, body.error404 .st-header .st-hbx-logo-white { display: none !important; } body.error404 .st-header .st-logo-dark, body.error404 .st-header .st-hbx-logo-dark { display: block !important; } body.error404 .st-header .st-burger, body.error404 .st-header .st-hbx-burger { color: var(--st-navy) !important; } .st-404 { padding: 120px 28px 110px; text-align: center; } .st-404-inner { max-width: 720px; margin: 0 auto; } .st-404-num { font-weight: 800; font-size: clamp(90px, 16vw, 170px); line-height: .9; letter-spacing: -.05em; background: linear-gradient(120deg, var(--st-navy) 10%, var(--st-blue) 60%, var(--st-gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin: 0 0 6px; user-select: none; } .st-404 .st-eyebrow { display: block; margin-bottom: 8px; } .st-404-script { font-size: 30px; line-height: 1; margin-bottom: 6px; } .st-404 .st-section-title { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 16px; } .st-404-text { font-size: 16px; line-height: 1.75; color: var(--st-body); margin: 0 auto 32px; max-width: 560px; } .st-404-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 40px; } .st-404-links { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; padding-top: 26px; border-top: 1px solid var(--st-line); font-size: 14px; } .st-404-links span { color: var(--st-muted); font-weight: 700; } .st-404-links a { color: var(--st-navy); font-weight: 600; text-decoration: none; } .st-404-links a:hover { color: var(--st-red); } @media (max-width: 575.98px) { .st-404 { padding: 96px 20px 78px; } .st-404-actions .st-btn-blue, .st-404-actions .st-btn-outline-dark { flex: 1 1 100%; justify-content: center; } } /* ========================================================================= Footer bülten formu — JS ile CF7'ye bağlandı (assets/js/st-newsletter.js). Görünüm DEĞİŞMEZ; yalnız durum mesajı + gönderim sırasındaki opaklık. ========================================================================= */ .st-news-form.is-sending { opacity: .65; pointer-events: none; } .st-news-msg { flex: 0 0 100%; margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: #d7ecf8; } .st-news-msg.is-error { color: #ffd2ce; } .st-news-msg.is-ok { color: #b9f0d3; } /* ========================================================================= HAC SAYFASI (2026-07-28) — native builder bölümleri için sarmalayıcılar. Diğer tüm görsel öğeler mevcut sınıflarla çözüldü (.st-value(-grid), .st-rule(s), .st-abx-script/-h2/-body, .st-ihx, .st-ctx, .st-btn-*). ========================================================================= */ /* Porto kapsayıcı nötrlemesi — custom.css'teki page-id-14/15/16 bloğunun 153 karşılığı (custom.css/option senkronuna dokunmamak için burada). Builder satırları kendi max-width'ini yönetir; .container 1140px hapsi kalkar. */ body.page-id-153 .page-top { display: none !important; } body.page-id-153 #main { padding: 0 !important; } body.page-id-153 #main.boxed { max-width: none !important; margin: 0 !important; box-shadow: none !important; background: transparent !important; } body.page-id-153 #main > .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-153 .main-content-wrap { margin-left: 0 !important; margin-right: 0 !important; } body.page-id-153 .main-content { padding-left: 0 !important; padding-right: 0 !important; overflow: visible; } body.page-id-153 #content { padding: 0 !important; margin: 0 !important; } body.page-id-153 .page-content { padding: 0 !important; margin: 0 !important; } .vc_row.st-hacx { max-width: 1240px; margin: 0 auto !important; padding: 74px 28px 10px; } .vc_row.st-hacx-2col { max-width: 1240px; margin: 0 auto !important; padding: 74px 28px; display: grid !important; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; } .vc_row.st-hacx-2col > div { width: auto !important; max-width: none !important; padding: 0 !important; } .st-hacx-img { margin: 0 !important; } .st-hacx-img .vc_single_image-wrapper { display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(16,60,100,.16); border: 1px solid var(--st-line); } .st-hacx-img img { width: 100% !important; height: auto !important; display: block; } /* SSS: accordion'suz düz soru/cevap listesi */ .st-hacx-faq { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; } .st-hacx-faq .q { background: var(--st-soft); border: 1px solid var(--st-line); border-radius: 16px; padding: 26px 28px; } .st-hacx-faq .q h3 { font-weight: 800; font-size: 18px; line-height: 1.35; color: var(--st-navy); margin: 0 0 12px; } .st-hacx-faq .q p { font-size: 15px; line-height: 1.75; color: var(--st-body); margin: 0 0 12px; } .st-hacx-faq .q p:last-child { margin: 0; } .st-hacx-faq .q a { color: var(--st-blue); font-weight: 600; } @media (max-width: 991.98px) { .vc_row.st-hacx { padding: 52px 22px 8px; } .vc_row.st-hacx-2col { grid-template-columns: 1fr; gap: 34px; padding: 52px 22px; } } /* === TIMELINE TARİH ROZETİ (2026-07-28) === */ /* Gün alaninda tarih/aralik gibi uzun deger olan turlarda (hac) daire rozet metni kirpiyordu -> pil (pill) rozete donusur. Arka plan/renk .st-tl-badge'ten miras. */ .st-tl-badge.st-tl-badge--date { width: auto; height: auto; min-width: 64px; max-width: 100%; border-radius: 999px; padding: 10px 14px; box-sizing: border-box; } .st-tl-badge.st-tl-badge--date .d { font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } /* Mobil: 64px rozet kolonunda "Kasım/Aralık" break-word ile bolunuyordu -> yalnizca tarih rozetli satirlarda kolon masaustuyle ayni 86px. Umre turlari etkilenmez. */ @media (max-width: 767.98px) { .st-tl-item:has(.st-tl-badge--date) { grid-template-columns: 86px 1fr; } } /* === MOBİL ONARIM-2 (2026-07-29) === */ /* A) FİLTRE ÇEKMECESİ GÖLGE SIZINTISI st-style.css @media(max-991.98) .st-filters kapaliyken translateX(-100%) ile ekran disinda duruyor AMA box-shadow 0 0 60px hâlâ boyaniyor -> sag kenari x=0'da oldugu icin viewport'un SOL kenarinda tam boy gri degrade sizintisi (z-index:1045 her seyin ustunde). Kapali cekmece hicbir sey boyamasin. Animasyon korunur: visibility gecikmesi transform suresiyle (.32s) esitlendi. */ @media (max-width: 991.98px) { .st-shop .st-filters { visibility: hidden; box-shadow: none !important; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s .32s; } .st-shop .st-filters.is-open { visibility: visible; box-shadow: 0 0 60px rgba(4,14,28,.4) !important; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s 0s; } } /* B) MOBİL MENÜ PANELİ LOGO+BURGER'I ÖRTÜYOR #nav-panel header#header'in ICINDE ve z-index:1029; logo/burger'i tasiyan div.porto-block z-index:auto oldugundan ayni stacking context'te panel ustte kaliyor -> menu acikken logo gorunmez, burger'a basilamiyor (kullanici menuyu kapatamiyor). porto-block panelin ustune alinir. */ @media (max-width: 991.98px) { #header .porto-block { position: relative; z-index: 1030; } } /* Panel acikken hamburger -> X: artik asagidaki MOBIL HEADER PARITESI blogunda mask ile yapiliyor (fa \f00d font-swap'i kaldirildi; i gizli). */ /* === MOBİL HEADER PARİTESİ — BURGER + LOGO (2026-07-29) === */ /* Statik referans (saygint/turlar.html, 430x932x3): .st-nav padding 16px 5vw; button.st-burger x=21.5 y=20 40x40, icinde 28px feather-menu SVG (stroke=currentColor, width 2, linecap round); .st-logo-center saga dayali, img h=48 (sag kenar boslugu 21.5); header yuksekligi 80px. WP'deki 3 sapmanin kok nedenleri: (a) nav satiri, header'in .container-fluid'indeki 20px yan dolgu yuzunden her iki kenardan 20px iceride -> logo saga dayansa bile 20px kisa kalir; (b) .st-hbx-nav-r .vc_column-inner'da gap:34px + clearfix ::before flex item'i + burger margin-left:13px -> burger 41.5 yerine 88.5'te (67px iceride "bosluga asilmis" gorunuyordu); (c) ikon Font Awesome i.fa-bars (900 weight, tiknaz) ve logo 40px + ortali. Hepsi YALNIZ <=991.98px'te duzeltilir; >=992 header'a etki yoktur. */ @media (max-width: 991.98px) { /* (a) yalnizca nav satiri viewport kenarina cekilir (util satiri dokunulmaz). Telafi sabit -20px DEGIL: header'in .container-fluid dolgusu Porto'nun --porto-fluid-spacing degiskeni (430px'te 20px, 900px'te 30px) -> ayni degiskenle geri alinir, boylece her mobil genislikte icerik kutusu statikteki .st-nav (5vw) ile birebir ortusur. */ .st-header .vc_row.st-hbx-nav { margin-left: calc(-1 * var(--porto-fluid-spacing, 20px)) !important; margin-right: calc(-1 * var(--porto-fluid-spacing, 20px)) !important; } /* (b) burger akisi temizlenir -> sol 5vw, 40x40 dokunma alani, dikey ortali */ .st-header .st-hbx-nav-r .vc_column-inner { gap: 0 !important; } .st-header .st-hbx-burger { margin: 0 !important; padding: 0 !important; width: 40px !important; height: 40px !important; flex: 0 0 40px !important; align-items: center !important; justify-content: center !important; } /* (c) FA glifi gizlenir, statikteki feather-menu SVG'si mask olarak basilir. background-color: currentColor -> renk mevcut mantiktan gelir: hero'da beyaz, .is-stuck ve panel acikken navy (custom.css kurallari). */ .st-header .st-hbx-burger i { display: none !important; } .st-header .st-hbx-burger::before { content: "" !important; display: block !important; width: 28px !important; height: 28px !important; background-color: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; } /* Panel acikken ayni teknikle feather-x (tek ikon, cift degil) */ body:has(#nav-panel[style*="display: block"]) .st-header .st-hbx-burger::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; } /* logo: GERCEK ORTALI (viewport merkezi), 48px (beyaz+koyu ciftin ikisi de). NOT: statikte mobil logo saga yapisik gorunur, ama bu KAZARA bir hatadir: .st-logo-center mobilde position:static'e dusuyor ve .st-nav'in justify-content:space-between'i 2 gorunur eleman kalinca (burger+logo) logoyu saga itiyor. Tasarimin niyeti ortali (sinif adi "center", masaustunde absolute left:50%). Kullanici karari: ORTALI. Teknik: burger kolonu akistan cikarilip absolute 5vw'ye sabitlenir -> satirda yalniz logo kolonu kalir, kolon icerik kutusu = container icerik kutusu (5vw..95vw, simetrik) -> center ortalama = viewport merkezi. Satir yuksekligi de logodan gelir (16+48+16 = 80px, statikle ayni). */ .st-header .st-hbx-nav-r { position: absolute !important; left: 5vw !important; top: 50% !important; transform: translateY(-50%) !important; padding: 0 !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; z-index: 2; } .st-header .st-hbx-logo { flex: 1 1 auto !important; width: auto !important; max-width: none !important; } .st-header .st-hbx-logo .vc_column-inner { justify-content: center !important; } .st-header .st-hbx-logo img { height: 48px !important; width: auto !important; max-width: none !important; } } /* Dar ekran carpismasi: logo 48px'te 252.5px genis; 360px'in altinda ortali logonun sol kenari burger'in (5vw + 40px) uzerine biner. Kirilimda logo kuculur; ortalama ve 5vw burger konumu korunur, tasma olmaz. 360px: logo 210.4 -> sol kenar 74.8 vs burger sagi 58.0 (16.8px bosluk) 320px: logo 178.9 -> sol kenar 70.6 vs burger sagi 56.0 (14.6px bosluk) */ @media (max-width: 389.98px) { .st-header .st-hbx-logo img { height: 40px !important; } } @media (max-width: 359.98px) { .st-header .st-hbx-logo img { height: 34px !important; } } /* === HERO COVER — TUM GENISLIKLER (2026-07-29 v1.7.2; v1.7.1'de mobil-scope'luydu) === */ /* SORUN: Anasayfa hero'sunda (porto_carousel .st-hx) aktif slide gorseli gorseli hero kutusunu kaplamiyor: 430px'te 430x287 (altinda ~645px bos lacivert), 1100x900'de 1100x733 (altinda 167px bosluk); caption tek basina en altta duruyor. KOK NEDEN: custom.css'teki REVİZYON-2b kurallari yuzde-YUKSEKLIK zincirine dayaniyor (.st-hx-img .vc_single_image-wrapper/figure/img { height:100% }). Zincir WPBakery'nin araya koydugu .wpb_wrapper katmaninda KIRILIYOR: o div height:auto oldugundan alt yuzdeler cozulemiyor ve img fiilen dogal en-boy oraniyla (yaklasik 3:2) yerlesiyor; object-fit:cover height belirsiz oldugu icin etkisiz kaliyor. Masaustunde gozden kacmasinin sebebi: 1440px genislikte ayni gorselin dogal yuksekligi (~960px) viewport yuksekligini (900) zaten astigi icin hero dolu GORUNUYOR -- hata maskeleniyor, dar/portre ekranda ortaya cikiyor. COZUM: yuzde zincirine hic guvenme -> img'i absolute olarak konumlandir. En yakin konumlanmis ata .wpb_single_image.st-hx-img (custom.css'te position:absolute; inset:0) oldugundan img tam hero kutusunu kaplar; object-fit:cover artik belirli bir kutuda calisir. Veil ::before/::after katmanlari, owl-item opacity fade mekanigi, caption ve dots konumlari DEGISMEZ (yalnizca img kutusu duzeltilir). KAPSAM (2026-07-29 v1.7.2 guncellemesi): kural artik TUM genisliklerde gecerli (media query YOK). Hata her genislikte var; genis ekranda yalnizca gorselin dogal boyu hero'yu astigi icin maskeleniyor. 992-1350px araligi dogrudan kirik: 1100x900'de img 1100x733 olculdu, hero altinda 167px lacivert bosluk kaldi. Statik referans (saygint/index.html) da her genislikte absolute+cover kullandigindan bu degisiklik statik pariteyi BOZMAZ, iyilestirir. Scope .st-hx ile sinirli -> baska bilesene sizmaz. */ .st-hx .st-hx-img .wpb_wrapper, .st-hx .st-hx-img .vc_single_image-wrapper, .st-hx .st-hx-img figure { position: static !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .st-hx .st-hx-img img { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; } /* === MOBIL MENU — PANEL LISTESI KIRPILMASI (2026-07-30 v1.7.3) === */ /* SORUN: 390x844'te mobil menu acildiginda son madde ("Iletisim") hic gorunmuyor, liste boyunca ince bir IC scrollbar cikiyor ve panelin alt ~320px'i bombos beyaz kaliyor. KOK NEDEN: Porto'nun nav-panel.css'inde #nav-panel .mobile-nav-wrap { max-height:50vh; overflow-y:auto } Porto'nun kendi tasariminda #nav-panel header'in altina acilan KISA bir dropdown oldugu icin 50vh makul. Bizim child temada #nav-panel tam ekran (fixed; inset:0; overflow:auto) beyaz overlay. Sonuc: 844px'lik panelin icinde 422px'lik ikinci bir scroll kutusu; menu icerigi 485px oldugundan son madde kirpiliyor + panelin geri kalani bos duruyor. COZUM: mobil kirilimda ic scroll kutusunu kaldir; kaydirmayi zaten tam ekran olan panelin kendisi yapsin. Masaustu etkilenmez (panel yalnizca <=991.98px'te kullaniliyor). */ @media (max-width: 991.98px) { #nav-panel .mobile-nav-wrap { max-height: none !important; overflow-y: visible !important; overflow-x: visible !important; } } /* === MOBIL HERO — YUKSEKLIK + BASLIK TIPOGRAFISI (2026-07-30 v1.7.4) === */ /* TALEP (kullanici): "Ekran oraninda yuksek olmus; insanlar girdiginde sadece full height slider goruyor, bunu yariya dusurmemiz gerekiyor. Sonrasinda basliklar mobile gore optimize edilmeli." MEVCUT DURUM (390x844 olculdu): .st-hx ve slide kutulari height:100vh (min-height:640px) -> hero 844px = ekranin TAMAMI. Ziyaretci acilista altindaki hicbir bolumu (arama bandi, programlar) gormuyor. Caption tipografisi de masaustu olcusunde kaliyor: h1 38px/39.5 -> 390px ekranda 4 SATIR (158px), p 18px. COZUM: 1) Yukseklik: telefonlarda 52svh (tabletlerde 62svh). svh = "small viewport height" -> iOS/Android'de adres cubugu ACIKKEN gecerli olan yukseklik; boylece hero'nun alti hicbir zaman tarayici cubugunun altinda kalmaz. svh bilmeyen eski tarayicilar icin ayni satirin oncesinde vh fallback'i birakildi (bilinmeyen birimi olan ikinci bildirimi atlarlar). 844px'lik ekranda hero 439px olur -> ekranin ~%52'si, altindaki bolum gorunmeye baslar. 2) Tipografi: h1 clamp(22px,6.6vw,28px) -> 390'da ~25.7px, 3 satir (~92px); p clamp(14px,3.9vw,16px); eyebrow 11px. Boylece kisalan hero'da caption + noktalar rahat sigar. 3) Konum: .st-hero-content zaten position:absolute; bottom:120px ile ALTA sabitli oldugundan hero kisalinca caption otomatik yukari gelir; mobilde bottom 74px'e, noktalar 32px'e cekilerek header ile arasinda ~90px nefes payi birakildi. KAPSAM: yalnizca .st-hx (anasayfa hero'su) ve <=991.98px. Masaustu gorunumu ve ic sayfa hero'su (.st-ihx) DEGISMEZ. */ @media (max-width: 991.98px) { .st-hx, .st-hx .porto-carousel-item, .st-hx .owl-item > div { height: 62vh !important; height: 62svh !important; min-height: 440px !important; max-height: 620px !important; } } @media (max-width: 767.98px) { .st-hx, .st-hx .porto-carousel-item, .st-hx .owl-item > div { height: 52vh !important; height: 52svh !important; min-height: 400px !important; max-height: 560px !important; } .st-hx .st-hero-content { bottom: 74px !important; } .st-hx .st-hero-content h1 { font-size: clamp(22px, 6.6vw, 28px) !important; line-height: 1.18 !important; margin-bottom: 10px !important; } .st-hx .st-hero-content p { font-size: clamp(14px, 3.9vw, 16px) !important; line-height: 1.5 !important; } .st-hx .st-hero-eyebrow { font-size: 11px !important; margin-bottom: 12px !important; } .st-hx .owl-dots { bottom: 32px !important; } } /* === HEADER ALT MENUSU — YENIDEN TASARIM (2026-07-30 v1.7.5) === */ /* TALEP (kullanici): "Bu sub menu cok kotu, duzeltelim." OLCUM (1440x900, "Turlar" uzerine gelindiginde): tetikleyici link : x 1151..1210 (59px) popup : x 850..1210 (360px), yani tetikleyicisinden 300px SOLA tasan, ortasi bombos beyaz bir levha. En uzun madde ("Hac Bilgilendirme") 15px'te ~128px; yani kutunun yarisindan fazlasi bos alandi. maddeler : padding 9px 24px, hover geri bildirimi yok. SORUN: kutu genisligi icerikle hicbir iliskisi olmayan sabit bir degerdi (R4'te viewport tasmasini onlemek icin 360px verilmisti). Sonuc: dropdown kendi tetikleyicisiyle gorsel bagini kaybediyor, logonun uzerine dogru uzanan bos bir dikdortgen gibi duruyordu. COZUM (yalnizca gorunum; Porto'nun ac/kapa JS'ine ve R4'un right:0 hizalamasina DOKUNULMADI -> tasma/sicrama riski geri gelmez): 1) Genislik 360 -> 250px. Icerige oranli; kutu artik 960..1210 araliginda, tetikleyicisinin hemen altinda duruyor. 2) Maddeler kart hissiyati kazandi: 9px yan bosluk, 9px radius, hover'da hafif kirmizi zemin + kirmizi metin + sola 3px'lik kirmizi aksan cubugu ve 6px kayma (0.18s gecis). 3) Kart golgesi biraz daha sikilastirildi (0 24px 48px), alt kose radius'u (14px) ve kirmizi 3px ust cizgi korundu. NOT: popup'in padding-top:14px'i tetikleyici ile kart arasindaki bosluga koprü kuruyor (hover kaybi yok) — bu yapiya dokunulmadi. */ #header .top-links.mega-menu li.has-sub > .popup { width: 250px !important; max-width: 250px !important; } #header .top-links.mega-menu li.has-sub > .popup > .inner { padding: 8px 0 10px !important; box-shadow: 0 24px 48px rgba(4, 14, 28, .22) !important; } #header .top-links.mega-menu li.has-sub > .popup .sub-menu { padding: 0 9px !important; } #header .top-links.mega-menu li.has-sub > .popup .sub-menu > li { border: 0 !important; } #header .top-links.mega-menu li.has-sub > .popup .sub-menu > li > a { position: relative !important; display: block !important; padding: 10px 14px 10px 18px !important; margin: 1px 0 !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #33475b !important; border-radius: 9px !important; transition: background-color .18s ease, color .18s ease, padding-left .18s ease !important; } #header .top-links.mega-menu li.has-sub > .popup .sub-menu > li > a::before { content: ""; position: absolute; left: 8px; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--st-red); transform: translateY(-50%); transition: height .18s ease; } #header .top-links.mega-menu li.has-sub > .popup .sub-menu > li > a:hover, #header .top-links.mega-menu li.has-sub > .popup .sub-menu > li.current-menu-item > a { background: rgba(226, 35, 26, .06) !important; color: var(--st-red) !important; padding-left: 24px !important; } #header .top-links.mega-menu li.has-sub > .popup .sub-menu > li > a:hover::before, #header .top-links.mega-menu li.has-sub > .popup .sub-menu > li.current-menu-item > a::before { height: 16px; } /* === ALT MENU ACIKKEN HEADER BEYAZ (2026-07-30 v1.7.6) === */ /* TALEP (kullanici): "Sub menu acilinca header kismi komple beyaz yapalim." TASARIM GEREKCESI: acilan kart zaten beyaz + kirmizi ust cizgili. Header saydam kalinca kart havada asili bir cikartma gibi duruyor; "kotu" hissin asil kaynagi buydu. Header beyaza donunce kart header'in DEVAMI gibi okunur (mega menu hissi). Ayrica site zaten asagi kaydirinca beyaza geciyor (.st-header.is-stuck) -> ayni gorsel dil tekrar kullaniliyor, yeni bir durum icat edilmiyor. YONTEM: CSS-only, :has() ile. st-main.js'in scroll/is-stuck mantigina HIC dokunulmadi -> sinif catismasi yok. :has() desteklemeyen eski tarayicida kural hic uygulanmaz, mevcut davranis aynen kalir (zararsiz degradasyon). Yalnizca >=992px: mobilde bu menu zaten gizli, alt menu #nav-panel akordiyonundan aciliyor. ONEMLI AYRINTI — UST BAR: is-stuck durumu ust bari tamamen KAPATIYOR (max-height:0). Burada ayni seyi yapmak header'in boyunu hover sirasinda degistirir; kart zipla(r) ve imlec kartin disinda kalip menu kapanir. Bu yuzden ust bar ACIK BIRAKILDI, sadece icerigi yeniden renklendirildi: metin/ikonlar #dceaf5 ve beyazdi -> beyaz zeminde GORUNMEZ olurlardi. Header'in kendi transition'i (background .3s, box-shadow .3s) zaten tanimli oldugundan gecis yumusak; ust bar renklerine de ayni sure verildi. */ @media (min-width: 992px) { .st-header:has(.top-links.mega-menu li.has-sub:hover), .st-header:has(.top-links.mega-menu li.has-sub:focus-within) { background: #fff !important; box-shadow: 0 10px 30px rgba(16, 60, 100, .14) !important; } /* Ust bar: acik kalir, icerik koyulasir */ .st-header .st-hbx-util, .st-header .st-hbx-util a, .st-header .st-hbx-util span, .st-header .st-hbx-util svg, .st-header .st-hbx-util .st-lang { transition: color .3s ease, border-color .3s ease; } .st-header:has(.top-links.mega-menu li.has-sub:hover) .st-hbx-util, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) .st-hbx-util { border-color: rgba(12, 32, 52, .10) !important; } .st-header:has(.top-links.mega-menu li.has-sub:hover) .st-hbx-util a, .st-header:has(.top-links.mega-menu li.has-sub:hover) .st-hbx-util span, .st-header:has(.top-links.mega-menu li.has-sub:hover) .st-hbx-util svg, .st-header:has(.top-links.mega-menu li.has-sub:hover) .st-hbx-util .st-lang, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) .st-hbx-util a, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) .st-hbx-util span, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) .st-hbx-util svg, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) .st-hbx-util .st-lang { color: rgba(12, 32, 52, .74) !important; border-color: rgba(12, 32, 52, .16) !important; } /* Ana menu linkleri: is-stuck ile ayni */ .st-header:has(.top-links.mega-menu li.has-sub:hover) ul.st-hbx-menu-left > li > a, .st-header:has(.top-links.mega-menu li.has-sub:hover) ul.st-hbx-menu-right > li > a, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) ul.st-hbx-menu-left > li > a, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) ul.st-hbx-menu-right > li > a { color: var(--st-navy) !important; } .st-header:has(.top-links.mega-menu li.has-sub:hover) ul.st-hbx-menu-left > li > a:hover, .st-header:has(.top-links.mega-menu li.has-sub:hover) ul.st-hbx-menu-right > li > a:hover, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) ul.st-hbx-menu-left > li > a:hover, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) ul.st-hbx-menu-right > li > a:hover { color: var(--st-blue) !important; } /* Logo: beyazdan renkliye (is-stuck ile ayni) */ .st-header:has(.top-links.mega-menu li.has-sub:hover) .st-hbx-logo-white, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) .st-hbx-logo-white { display: none !important; } .st-header:has(.top-links.mega-menu li.has-sub:hover) .st-hbx-logo-dark, .st-header:has(.top-links.mega-menu li.has-sub:focus-within) .st-hbx-logo-dark { display: block !important; } } /* === MOBIL HEADER: SOL BURGER / ORTA LOGO / SAG DIL SECICI (2026-07-30 v1.7.7) === */ /* TALEP (kullanici): "Mobilde header'a solda menu, ortada logo, sagda dil secenegi ekleyebilir misin." YAPILAN (Page Builder tarafi): porto_builder #27 "Sayin Header" icinde st-hbx-nav-r kolonuna, burger'dan SONRA [vc_column_text el_class="st-hbx-lang-m"][st_lang_switcher][/vc_column_text] eklendi. ([st_lang_switcher] parametre kabul etmedigi icin hedeflenebilir bir sinif kazandirmak uzere vc_column_text ile sarildi.) UST BAR'DAKI DIL SECICI DURUYOR; masaustunde bu YENI kopya gizlenir, yalnizca <=991.98px'te gorunur. Boylece masaustu gorunumu bayt ayni kalir. YERLESIM: st-hbx-nav-r kolonu v1.7.0'da logoyu ortalayabilmek icin akistan cikarilmisti (position:absolute; left:5vw). Simdi ayni kolon tum satiri kaplar (left:0; right:0) ve icindekiler space-between ile dagilir: burger 5vw solda, dil secici 5vw sagda. Kolon HALA absolute oldugundan logo kolonu satirda tek basina kalir ve ORTALAMASI BOZULMAZ (v1.7.0 mantigi korunur). DIKKAT (v1.6.9 dersi): Porto'nun clearfix ::before/::after'i flex'te HAYALET item yaratir; space-between ile hizalama kayar (hayalet sola, burger ortaya duserdi). Bu yuzden bu kapsamda pseudo elemanlar kapatildi. RENK: seciciler burger ile ayni mantigi izler -> hero uzerinde beyaz, .is-stuck ve mobil panel acikken lacivert. */ @media (min-width: 992px) { .st-header .st-hbx-lang-m { display: none !important; } } @media (max-width: 991.98px) { .st-header .st-hbx-nav-r { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; padding: 0 5vw !important; } /* NOT: WPBakery bu kolonda .vc_column-inner ve .wpb_wrapper sinifllarini AYNI dugume basiyor (ic ice DEGIL) -> seciciyi tek seviye tut. */ .st-header .st-hbx-nav-r > .vc_column-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 0 !important; gap: 0 !important; } .st-header .st-hbx-nav-r > .vc_column-inner::before, .st-header .st-hbx-nav-r > .vc_column-inner::after { display: none !important; } .st-header .st-hbx-lang-m { display: block !important; margin: 0 !important; flex: 0 0 auto !important; } .st-header .st-hbx-lang-m .wpb_wrapper { margin: 0 !important; } .st-header .st-hbx-lang-m .st-lang { margin: 0 !important; } .st-header .st-hbx-lang-m .st-lang-btn { color: #fff !important; } .st-header.is-stuck .st-hbx-lang-m .st-lang-btn { color: var(--st-navy) !important; } body:has(#nav-panel[style*="display: block"]) .st-header .st-hbx-lang-m .st-lang-btn { color: var(--st-navy) !important; } } /* --- v1.7.8 devami: logo genisligi, dil secici icin yeniden hesaplandi --- Header artik 3 elemanli (burger | logo | dil). Logo viewport merkezinde sabit; sagdaki dil secici (~55px) 5vw ic boslukla saga yaslandigindan logonun yari genisligi (merkez -> dil secicinin sol kenari) ile sinirli. Olcum (390px): dil secici sol kenari 315.3, merkez 195 -> azami yari genislik 120.3; 10px nefes payi birakilinca 110 -> logo eni 220 -> yukseklik 42px (dogal oran 363/69 = 5.26). Ayni hesap dar kirilimlar icin: 360px'te 36px, 320px'te 30px. Onceki degerler (48/40/34) dil secici YOKKEN dogruydu; burada eziliyor. */ @media (max-width: 991.98px) { .st-header .st-hbx-logo img { height: 42px !important; } } @media (max-width: 389.98px) { .st-header .st-hbx-logo img { height: 36px !important; } } @media (max-width: 359.98px) { .st-header .st-hbx-logo img { height: 30px !important; } } /* ============================================================ v1.8.0 — HAKKIMIZDA BOLUMU (.st-abx) MOBILDE YIKILIYOR ------------------------------------------------------------ KOK NEDEN: REVIZYON-2b'de bolum native elementlere cevrilirken statik .st-about-grid'in MASAUSTU kurallari .st-abx hook'una kopyalandi, ama st-style.css'teki @media (max-width:991.98px){ .st-about-grid{grid-template-columns:1fr} } tek-kolon override'i KOPYALANMADI. SONUC (390px'te olculdu): satir 2 kolon kaliyor -> gorsel kolonu 57.3px, metin kolonu 212.7px; blob ince dikey elipse doniyor, fotograflar 39x39 / 26x26px'e cokuyor, basliklar 4-5 satira yayiliyor. NEDEN QA'DAN KACTI: sikismis grid YATAY TASMA URETMIYOR (docW=390) ve konsola hata basmiyor -> "tasma 0 / konsol 0" testleri PASS veriyor. Ders: mobil QA'da tasmaya degil KOLON GENISLIGINE bakilacak. ============================================================ */ @media (max-width: 991.98px) { .vc_row.st-abx { grid-template-columns: 1fr !important; gap: 40px !important; padding: 70px 24px !important; } /* Statik karsiligi: .st-about-visual{min-height:360px} */ .st-abx .st-about-visual { min-height: 360px !important; } } /* ============================================================ v1.8.1 — BLOG / ARSIV SAYFA BASLIGI (.st-detail-hero) MOBILDE KIRPILIYOR ------------------------------------------------------------ KOK NEDEN: st-style.css'te dogru mobil kural VAR -- @media(max-width:767.98px){ .st-detail-hero{height:auto;min-height:0;padding-top:96px} } ama iki sablon hero'ya SATIR ICI style yaziyor: home.php -> style="min-height:360px;height:44vh" archive-tur.php -> style="min-height:380px;height:46vh" Satir ici style, !important'siz stil sayfasi kuralini EZER -> mobil kural olu kaliyor. Ayni breakpointte .st-hero-content position:relative (akisa giriyor) ama bolum sabit yukseklikte + overflow:hidden kaldigi icin breadcrumb/h1/paragraf ALTTAN KIRPILIYOR. ETKI: /blog/, /category//, /turlar/, /tur-kategori// (category.php home.php'yi, taxonomy-tur_kategori.php archive-tur.php'yi include eder). Etkilenmeyen: single.php ve single-tur.php (satir ici style yok). COZUM: sablonlara dokunmadan satir ici degeri !important ile geri al. ============================================================ */ @media (max-width: 767.98px) { .st-detail-hero { height: auto !important; min-height: 0 !important; } } /* ============================================================ v1.8.3 — MASAUSTU: SAYFA BASLIGI BANDI HEADER'IN ALTINA GIRIYOR ------------------------------------------------------------ BELIRTI (1440x900'de olculdu, tur-kategori sayfasi): header : 0 - 128px breadcrumb: 107 - 131px -> baslik bandi menu cubuguyla CAKISIYOR KOK NEDEN: .st-hero-content mutlak konumlu ve bolumun ALT kenarina yapisik (bottom:0). Bolum yuksekligi ise iki sablonda satir ici style ile kisaltilmis: home.php -> height 44vh / min 360px archive-tur.php -> height 46vh / min 380px Bolum kisa + icerik yuksek olunca icerik yukari tasip seffaf header'in altina giriyor. Ayni hata STATIK tasarimda da var (statikte breadcrumb 55px, header 106px) -- devralinan hata. Etkilenmeyen: single-tur.php ve .st-ihx (60vh/452px kullaniyorlar, yer bol) -- ama kisa pencerelerde onlar da riskli, kural hepsini kapsar. COZUM: sabit yukseklik yerine akiskan kutu. Bolum flex kolon olur, icerik alta yapisik kalir (justify-content:flex-end), ustte header payi kadar dolgu birakilir. Yer varken gorunum AYNI; icerik sigmazsa bolum kendiliginden uzar, asla header'in altina girmez. ============================================================ */ @media (min-width: 768px) { .st-detail-hero { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; box-sizing: border-box !important; height: auto !important; min-height: 46vh !important; padding-top: 160px !important; } /* Flex kutuda yatay margin:auto olan oge STRETCH olmaz, kendi icerik genisligine buzulur ve ortalanir. Genisligi acikca ver. */ .st-detail-hero .st-hero-content { position: relative !important; bottom: auto !important; width: 100% !important; align-self: stretch !important; } /* Tur detay sayfasinin hero'su satir ici style TASIMIYOR; kendi yuksekligi (60vh / en az 452px) zaten header'i asiyordu ve dogru goruntuleniyordu. Yukaridaki 46vh tabani onu 21px kisaltiyordu -- eski degerine sabitle, gorunum bayt ayni kalsin. */ body.single-tur .st-detail-hero { min-height: max(60vh, 452px) !important; } /* Blog YAZI sayfasinin baslik bandi ayri bir sinif kullaniyor (.st-article-hero, min 440px / 56vh, icerik .inner). Ayni gizli hataya sahip: kisa pencerede icerik header'in altina girer. Blog LISTELEME bandiyla ayni davranisi ver -- ust bosluk 160px, icerik alta yapisik, bant gerekirse uzar. */ .st-article-hero { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; box-sizing: border-box !important; height: auto !important; min-height: 56vh !important; padding-top: 160px !important; } .st-article-hero .inner { position: relative !important; bottom: auto !important; width: 100% !important; align-self: stretch !important; } /* Sayfa olusturucuyla yapilan ic hero'lar (Hakkimizda / Iletisim / Hac) ucuncu bir sinif kullaniyor: .st-ihx (60vh / en az 452px). 1440x700'de olculdu -> breadcrumb 83px, header 128px = 45px CAKISMA. Ayni davranisi ona da ver. WPBakery satirinda flex ogesi kolonun kendisidir; icerik kolonun icinde akar, bant alta hizalanir. */ .vc_row.st-ihx { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; box-sizing: border-box !important; height: auto !important; min-height: 60vh !important; padding-top: 160px !important; } .st-ihx .st-hero-content { position: relative !important; bottom: auto !important; width: 100% !important; } } /* ============================================================ v1.8.9 — IC HERO'LARIN KOYU GECIS KATMANLARI (VEIL) HIC CIZILMIYORDU ------------------------------------------------------------ Hakkimizda / Iletisim / Hac basliklarinda koyu degrade katmanlar .st-ihx::before ve ::after ile yapiliyor. Porto theme.css'te .row::after, .row::before { content: none } kurali var; ayni ozgulluk (0,1,1) ve kaynak sirasinda sonra geldigi icin bizim content degerimizi eziyordu -> psodo ogeler hic uretilmiyordu, baslik metni parlak gorselin uzerinde okunmuyordu. Bu benim flex degisikligimden DEGIL, bastan beri boyleydi (element display:block'a alinarak dogrulandi: content yine none). COZUM: ozgullugu .vc_row.st-ihx (0,2,1) yaparak ve content/display'i acikca vererek geri kazan. Diger ozellikler (position/inset/z-index/ background) zaten uygulaniyordu, onlara dokunulmadi. ============================================================ */ .vc_row.st-ihx::before, .vc_row.st-ihx::after { content: "" !important; display: block !important; } /* ============================================================ v1.9.0 — IC HERO ARKA PLAN GORSELI BANDIN TAMAMINI KAPLAMIYOR ------------------------------------------------------------ .st-ihx-img mutlak konumlu; konumlandigi kutu WPBakery kolonu (.vc_column_container position:relative), satirin kendisi degil. Kolon icerik boyunda oldugu icin gorsel bandin tamamini kaplamiyordu: masaustu 1440x700 -> gorsel 123-566, bant 0-529 mobil 390 -> gorsel 96-517, bant 0-517 (ust 96px duz lacivert, seffaf header'in arkasi bos gorunuyordu) Kolonu konumlandirma zincirinden cikar; gorsel yine position:relative olan satiri referans alir ve inset:0 tam bandi kaplar. Medya sorgusuna KOYULMADI -- hata her genislikte vardi. ============================================================ */ .vc_row.st-ihx > .st-ihx-col, .vc_row.st-ihx > .vc_column_container { position: static !important; } /* ============================================================ v1.9.1 — MOBIL MENU ALT MADDELERI ------------------------------------------------------------ BULGU: Porto'nun ac/kapa oku (span.arrow) 0x0 gorunuyordu ama bu BOZUKLUK DEGIL -- kendi custom.css'imizde bilincli olarak kapatilmis: #nav-panel .arrow { display: none !important; } #nav-panel ul.sub-menu { display: block !important; } Sebebi statik tasarim: statikteki mobil menu (#mobileMenu offcanvas) TAMAMEN DUZ bir liste, alt menu hic yok (01..07 numarali linkler). Bu yuzden akordeon INSA EDILMEDI; alt menu hep acik birakildi. Burada yalnizca alt maddelerin gorsel tutarligi duzeltiliyor: ust maddeler iri/numarali koyu lacivert iken alt maddeler soluk gri (15.5px #4a5b6c) ve hicbir marka isareti tasimiyordu. ============================================================ */ @media (max-width: 991.98px) { #nav-panel .sub-menu { border-left: 2px solid rgba(226, 35, 26, .18); padding-left: 18px !important; margin-left: 14px !important; } #nav-panel .sub-menu > li > a { color: #33475b !important; font-weight: 500 !important; padding: 11px 0 !important; } #nav-panel .sub-menu > li > a:hover, #nav-panel .sub-menu > li.current-menu-item > a { color: var(--st-red, #e2231a) !important; } } /* ============================================================ v1.9.3 — UST BAR AYRAC CIZGISI GENIS EKRANDA KENARLARA ULASMIYOR ------------------------------------------------------------ REVIZYON-3 R1'de cizgi .st-hbx-util::after ile left/right:-30px verilerek kapsayici dolgusunun disina tasirilmisti. -30px degeri 1440px'teki dolguya gore secilmisti; Porto'nun akiskan kapsayicisi genis ekranda daha fazla yan dolgu verdiginden 2560px'te cizgi ve bar iki kenarda 30'ar piksel iceride kaliyor. STATIK .st-util -> 0 ... 2560 (tam genislik) WP .st-hbx-util -> 30 ... 2530 (30px eksik) COZUM: sabit -30px yerine viewport genisligi. Boylece ekran ne kadar genis olursa olsun cizgi kenardan kenara uzanir. ============================================================ */ #header .st-hbx-util::after { left: 50% !important; right: auto !important; width: 100vw !important; transform: translateX(-50%) !important; } /* ============================================================ v1.9.4 — GIRIS YAPMIS YONETICIDE MOBILDE HEADER'IN USTUNDE BOSLUK ------------------------------------------------------------ custom.css'te medya sorgusu OLMAYAN su kural var: body.admin-bar .header-wrapper.st-header { top: 32px; } 32px masaustu yonetici cubugunun yuksekligi. Ama: - <=782px'te WP cubugu 46px olur, - <=600px'te WP cubugu position:absolute olur ve sayfayla kayar. Sonuc: telefonda header 32px asagida cakili kalir, cubuk kayip gittikten sonra ustte 32px'lik bos serit gorunur (arkada hero). YALNIZ GIRIS YAPMIS KULLANICIYI etkiler; ziyaretcide header top:0 (cikis yapilmis olcumle dogrulandi: kaydirmadan once de sonra da 0). COZUM: Porto'nun kendi .porto-scroll-progress kuralindaki kalibi birebir uygula -> 32px / 46px / 0. ============================================================ */ @media screen and (max-width: 782px) { body.admin-bar .header-wrapper.st-header { top: 46px !important; } } @media screen and (max-width: 600px) { body.admin-bar .header-wrapper.st-header { top: 0 !important; } } /* ============================================================ v1.9.5 — BASLIK BANDINI SAYFANIN KENDI KAPSAYICISIYLA HIZALA ------------------------------------------------------------ Baslik bandinin ic kutusu her sablonda ayni: max-width 1480 + 5vw yan dolgu. Sayfa govdelerinin kapsayicilari ise FARKLI. 1920px'te olculen sol kenarlar: blog listeleme / kategori : baslik 316 govde 368 -> 52px sapma blog yazisi : baslik 96 govde 380 -> 284px sapma tur detay : baslik 316 govde 368 -> 52px sapma turlar / tur-kategori : baslik 316 govde 318 -> 2px (hizali) hakkimizda / iletisim/hac : baslik 316 govde 328 -> 12px (yakin) Sapma statikte de birebir ayni; tasarimdan devralinan tutarsizlik. Kullanici talebi uzerine baslik kutusu her sablonda o sablonun kendi kapsayici olculerine cekiliyor. Zaten hizali olan iki aileye (turlar arsivi ve sayfa olusturucu ic hero'lari) DOKUNULMUYOR. Mobilde (<992px) baslik akisa giriyor ve kendi dolgusunu kullaniyor, o yuzden kural yalniz masaustunde. ============================================================ */ @media (min-width: 992px) { body.blog .st-detail-hero .st-hero-content, body.category .st-detail-hero .st-hero-content { max-width: 1184px !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; } body.single-tur .st-detail-hero .st-hero-content { max-width: 1240px !important; padding-left: 28px !important; padding-right: 28px !important; margin-left: auto !important; margin-right: auto !important; } .st-article-hero .inner { max-width: 1160px !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; } } /* ============================================================ v1.9.5b — FOOTER BULTEN BASLIGI SOLA YASLI ------------------------------------------------------------ Basliktaki dekoratif SVG footer icerigi'nden (porto_builder 28) kaldirildi. Geriye wpautop'un urettigi BOS bir

kaliyor ve .st-news-lead flex kutusunun 24px gap'ini yiyerek basligi saga itiyor. Bos paragrafi kaldir, baslik kapsayicinin sol kenarindan bassin. ============================================================ */ .st-news-lead > p:empty { display: none !important; } /* ============================================================ REVİZYON-4 (2026-08-03) — TUR ARŞİVİ: MOBİL/TABLET GERÇEK LİSTE GÖRÜNÜMÜ + KART ÇİP DÜZENİ ------------------------------------------------------------ GÖREV A: st-style.css'teki 977-980 satırları @media(max-767.98) içinde .is-list'i .st-tour-grid ile aynılaştırıp (tek sütun + dikey kart) 992px altında Liste butonunu görünüşte işlevsiz bırakıyordu. st-style.css'e DOKUNULMADI (proje kuralı); burada, sonradan yüklenen st-fix.css'ten !important ile üzerine yazılıyor. Kompakt yatay liste kartı: solda ~124px kare-ish görsel (flex:none), sağda başlık (2 satır clamp) + meta + fiyat/buton (wrap ile taşmaz). Izgara görünümü (is-list YOKKEN) burada değiştirilmedi. ============================================================ */ @media (max-width: 991.98px) { .st-tour-grid.is-list { grid-template-columns: 1fr !important; gap: 12px !important; } .st-tour-grid.is-list .st-tour-card { flex-direction: row !important; align-items: flex-start !important; } .st-tour-grid.is-list .media { width: 124px !important; flex: none !important; aspect-ratio: 1 / 1 !important; align-self: stretch !important; } .st-tour-grid.is-list .media .cat { top: 7px !important; left: 7px !important; padding: 4px 9px !important; font-size: 9.5px !important; } .st-tour-grid.is-list .media .fav { width: 26px !important; height: 26px !important; top: 6px !important; right: 6px !important; } .st-tour-grid.is-list .media .fav svg { width: 13px !important; height: 13px !important; } .st-tour-grid.is-list .media .dur { bottom: 7px !important; left: 7px !important; padding: 4px 8px !important; font-size: 10.5px !important; } .st-tour-grid.is-list .tbody { padding: 12px 14px 12px 15px !important; min-width: 0 !important; } .st-tour-grid.is-list .rate { font-size: 11px !important; gap: 5px !important; margin-bottom: 5px !important; } .st-tour-grid.is-list h3 { font-size: 15px !important; line-height: 1.32 !important; margin: 0 0 7px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .st-tour-grid.is-list .tdesc { display: none !important; } .st-tour-grid.is-list .tmeta { gap: 4px 9px !important; margin-bottom: 8px !important; } .st-tour-grid.is-list .tmeta span { font-size: 11px !important; min-width: 0 !important; } .st-tour-grid.is-list .tmeta span svg { width: 12px !important; height: 12px !important; } .st-tour-grid.is-list .tfoot { flex-wrap: wrap !important; gap: 6px 10px !important; padding-top: 9px !important; align-items: center !important; } .st-tour-grid.is-list .tprice .val { font-size: 16px !important; } .st-tour-grid.is-list .tbtn { padding: 7px 12px !important; font-size: 11.5px !important; } } @media (max-width: 480px) { .st-tour-grid.is-list .media { width: 96px !important; } .st-tour-grid.is-list h3 { font-size: 14px !important; } } /* GÖREV B: kart .tmeta şeridine Havayolu + Tarih çipleri eklendi (archive-tur.php + inc/vc-elements.php st_render_tour_card — ızgara+liste ortak markup). 4 çip olabileceğinden satır aralığı biraz sıklaştırıldı, taşma olmasın diye min-width:0. */ .st-tour-card .tmeta { row-gap: 7px; } .st-tour-card .tmeta span { min-width: 0; } /* =================================================================== REVİZYON-5 — Coverflow sürükleme kararlılığı + program şeridi (G8/G9) Opus, 2026-08-03 =================================================================== */ /* G8 — sürükleme sırasında geçiş animasyonu kapalı olmalı ki kartlar fareyi gecikmesiz takip etsin; bırakınca yumuşak oturma geri gelir. */ #destStage.is-dragging .st-cf-card { transition: none !important; } #destStage.is-dragging { cursor: grabbing; } /* Tarayıcının kendi görsel-sürükleme hayaleti sürükleme akışını kesiyordu */ .st-cf-card img { -webkit-user-drag: none; user-select: none; pointer-events: none; } /* G9 — program şeridi diğer full-bleed bölümlerle aynı korumaya sahip olsun. .st-progs'un kendisi yatay kaydırma kabı olduğu için ona DOKUNULMUYOR; koruma bir üstteki sarmalayıcıya veriliyor. */ .st-programs-x { overflow-x: clip; } /* G9 — .st-progs "100vw + margin-left:calc(50% - 50vw)" ile full-bleed oluyordu. Sarmalayıcı (.st-programs-x) ZATEN tam genişlikte olduğundan bu hack gereksiz; üstelik 100vw kaydırma çubuğunu DA sayar, % saymaz → görünür çubuklu sistemlerde (Windows Chrome/Edge/Firefox) bölüm birkaç-on px sola kayıp sol kenarda kırpılır. Mac'te overlay çubuk olduğu için bu hiç görünmez — "sizde görünmüyor" şikayetinin teknik karşılığı bu. Geometri aynı kalır, kayma ortadan kalkar. */ .st-progs { width: 100% !important; margin-left: 0 !important; padding-left: max(28px, calc(50% - 632px)) !important; padding-right: max(28px, calc(50% - 632px)) !important; scroll-padding-left: max(28px, calc(50% - 632px)) !important; } /* =================================================================== G10 — Mobil sabit alt menü (bottom nav) Markup st-main.js tarafından basılır. Yalnız <992px'te görünür. WhatsApp ve chatbox balonları mobilde buraya taşındı. =================================================================== */ @media (max-width: 991.98px) { .st-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 2px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--st-line, #e7eff6); box-shadow: 0 -8px 28px rgba(12, 32, 52, .10); transform: translateY(0); transition: transform .28s ease, opacity .28s ease; } .st-bnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 6px 2px; color: var(--st-muted, #7e93a7); text-decoration: none; font: 600 10.5px/1.2 var(--st-font, inherit); letter-spacing: .01em; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: color .18s ease, background .18s ease; } .st-bnav-item .st-bnav-ic { display: flex; } .st-bnav-item svg { width: 21px; height: 21px; } .st-bnav-item:active { background: var(--st-soft, #f6fafd); } .st-bnav-item.is-active { color: var(--st-navy, #0c2034); } .st-bnav-item.is-active .st-bnav-ic { color: var(--st-red, #e2231a); } /* Ortadaki WhatsApp: yükseltilmiş birincil aksiyon */ .st-bnav-item.is-mid { color: var(--st-navy, #0c2034); } .st-bnav-item.is-mid .st-bnav-ic { width: 46px; height: 46px; margin-top: -20px; display: flex; align-items: center; justify-content: center; background: var(--st-wa, #25d366); color: #fff; border-radius: 50%; box-shadow: 0 8px 18px rgba(37, 211, 102, .38), 0 0 0 4px #fff; } .st-bnav-item.is-mid svg { width: 23px; height: 23px; } /* İçerik alt menünün altında kalmasın */ body.has-st-bnav { padding-bottom: 64px; } /* Mobilde yüzen balonlar gizli — işlevleri alt menüde */ body.has-st-bnav .st-wa-float { display: none !important; } body.has-st-bnav .crayn-chatbox__toggle, body.has-st-bnav .crayn-chatbox .crayn-chatbox__toggle { display: none !important; } /* Chatbox açıkken alt menü yoldan çekilsin */ body.st-chat-open .st-bnav { transform: translateY(120%); opacity: 0; pointer-events: none; } body.st-chat-open .crayn-chatbox { bottom: 12px !important; } /* Tur arşivindeki mobil filtre çekmecesi alt menüyle çakışmasın */ body.has-st-bnav .st-filters { padding-bottom: 76px; } } /* Masaüstünde alt menü hiç render edilmez, ama güvenlik için: */ @media (min-width: 992px) { .st-bnav { display: none !important; } } /* ========================================================================== HERO BUTONU — MOBİLDE TEK SATIR (2026-08-12) Sorun: hero'daki "Bizi Yakından Tanıyın" butonunun yatay dolgusu 56px (WPBakery buton stili, masaüstü için tasarlanmış). 390px ekranda metne yalnız ~83px kalıyor ve yazı üç satıra bölünüp buton kare bir kutuya dönüşüyordu. Yalnız dar ekranda dolgu daraltılır, metin tek satıra sabitlenir. Kapsam: hero karuseli (fullscreen-carousel > porto-ibanner) — sayfadaki diğer butonlar etkilenmez. ========================================================================== */ @media (max-width: 767.98px) { .fullscreen-carousel .porto-ibanner .vc_btn3 { padding-left: 26px !important; padding-right: 26px !important; white-space: nowrap; max-width: calc(100vw - 44px); font-size: 15px !important; } } /* ========================================================================== FOOTER — 5 KOLON + MOBİL AKORDEON (2026-08-12) Sorun: onaylı statik footer 4 EŞİT kolondu (her biri 216px, toplam 610px). Link grupları eklenince 6 grup 4 kolona sığmadı; ikişer grup üst üste bindirildi, kolonlar 200/603/640/250px oldu ve footer 1012px'e şişti — sağ alt ve sol altta iki büyük boşluk kaldı. Çözüm: her grup kendi sütununda (marka+iletişim | Umre | Hac | Kurumsal | Faydalı Bilgi). Renk, tipografi, ok işaretleri, boşluk ritmi aynı kalır. ========================================================================== */ @media (min-width: 992px) { .st-ftx-cols .row { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr 1fr; gap: 26px 30px; align-items: start; } .st-ftx-cols .row > .st-ftx-col { width: 100%; max-width: none; flex: 0 0 auto; padding-left: 0; padding-right: 0; } } /* Tablet: marka tam satır, 4 link grubu yan yana. * (2x2 denendi — Umre 5, Hac 8 link olduğu için grid satır yüksekliği en uzun * gruba göre oluşuyor ve kısa grubun altında büyük boşluk kalıyordu.) */ @media (min-width: 768px) and (max-width: 991.98px) { .st-ftx-cols .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; align-items: start; } .st-ftx-cols .row > .st-ftx-col { width: 100%; max-width: none; flex: 0 0 auto; padding-left: 0; padding-right: 0; } .st-ftx-cols .row > .st-ftx-col--marka { grid-column: 1 / -1; } .st-ftx-cols .st-ftx-col--marka p { max-width: 460px; } } /* ---- İletişim şeridi: telif barının hemen üstünde, yatay 5'li ---- İki telefon + e-posta + WhatsApp + adres tam 5 öğe; link kolonlarıyla aynı ritmi tutar. Hepsi tıklanabilir (tel: / mailto: / wa.me / Google Haritalar). */ .st-ftx-cbar { padding-top: 4px; } .st-foot-cbar { display: grid; /* her öğe kendi metni kadar yer alır, boşluk aralara eşit dağılır → hiçbiri satır ortasından bölünmez (eşit 1fr sütunlarda e-posta ve adres kırılıyordu) */ grid-template-columns: repeat(5, max-content); justify-content: space-between; gap: 14px 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); } .st-foot-cbar .ci { display: flex; align-items: center; gap: 11px; min-width: 0; color: #e6eff2; text-decoration: none; transition: color .16s; } .st-foot-cbar .ci .ico { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.07); color: #45b6e0; transition: background .16s, color .16s; } .st-foot-cbar .ci .tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .st-foot-cbar .ci small { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a7c0c9; line-height: 1.3; } .st-foot-cbar .ci b { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.35; white-space: nowrap; } /* adres tek parça ve en uzun metin — biraz küçük punto */ .st-foot-cbar .ci:last-child b { font-size: 13.5px; } /* dar ekranda satır bölünmesine izin ver, yoksa taşar */ @media (max-width: 1199.98px) { .st-foot-cbar { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; } .st-foot-cbar .ci b { white-space: normal; overflow-wrap: anywhere; } } .st-foot-cbar .ci:hover .ico, .st-foot-cbar .ci:focus-visible .ico { background: rgba(69,182,224,.18); color: #7fd4f5; } .st-foot-cbar .ci:hover b { color: #fff; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1199.98px) { .st-foot-cbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .st-foot-cbar { grid-template-columns: 1fr; gap: 14px; padding-top: 20px; } } /* ---- Footer metin rengi: Porto'nun #777 varsayılanı sızıyordu ---- Onaylı statik tasarımda footer link/paragraf rengi #a7c0c9 (açık mavi-gri); Porto footer'a kendi gri tonunu basınca linkler koyu zeminde okunmaz olmuştu. */ .st-footer .st-foot-links a, .st-footer .st-ftx-col p, #footer .st-foot-links a, #footer .st-ftx-col p { color: #a7c0c9; } .st-footer .st-foot-links a:hover, .st-footer .st-foot-links a:focus-visible, #footer .st-foot-links a:hover, #footer .st-foot-links a:focus-visible { color: #fff; } /* ---- Mobil akordeon ---- Mobilde footer 2193px'ti (sayfanın %23'ü, 32 link alt alta). Başlıklar kapalı gelir, dokunulunca açılır. Marka ve iletişim bloğu her zaman açık. */ @media (max-width: 767.98px) { /* Porto footer satırı grid ve row-gap 36px — akordeonda her başlık ayrı kolon olduğu için başlıklar arasında 36px'lik boşluklar oluşuyordu. Kapalı akordeon satırları bitişik dursun; ayrım alt çizgiyle yapılır. */ .st-ftx-cols .row { row-gap: 0; } .st-ftx-cols .row > .st-ftx-col--marka { margin-bottom: 16px; } /* ERİŞİLEBİLİRLİK (2026-08-17): tıklanabilir öğe artık

DEĞİL, başlığın içindeki gerçek