/* TurLEO ortak bileşen stilleri: üst bar, alt dock, iletişim merkezi, giriş sayfaları, tur detay/rezervasyon masaüstü. içinde, sayfa stillerinden SONRA yüklenir (resources/views/legacy/layout.blade.php). Değişince ?v= dosya tarihinden otomatik değişir. */ /* ===== ust-bar-stil ===== */ @media (max-width: 991px) { .glass-header.ust-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1070; padding: calc(8px + env(safe-area-inset-top)) 0 8px; background: transparent; border: 0; box-shadow: none; transition: background-color 0.25s ease, box-shadow 0.25s ease; } /* Sayfa kayınca: koyu buzlu cam (beyaz logo ve ikonlar okunur kalır) */ .glass-header.ust-bar.ust-bar-kaydi { background: rgba(20, 20, 22, 0.62); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); } /* Üstünde koyu görsel olmayan sayfalar: bar hep koyu, içerik barın altından başlar */ body:has(.glass-header.ust-bar.ust-bar-daima) { padding-top: calc(60px + env(safe-area-inset-top)); } /* Bir modal açıkken bar karartmanın altında kalsın */ body.modal-open .glass-header.ust-bar, body.modal-open .app-bottom-nav.dock { z-index: 1040; } .ust-bar > .container, .ust-bar > .container-xl { position: relative; min-height: 44px; flex-wrap: wrap; } .ust-bar .navbar-brand { position: absolute; left: 50%; top: 22px; transform: translate(-50%, -50%); margin: 0; padding: 0; } .ust-bar .header-logo img { height: 30px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); } .ust-bar-ikon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; text-decoration: none; border-radius: 12px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .ust-bar-ikon:hover, .ust-bar-ikon:active { color: #fff; background: rgba(255, 255, 255, 0.14); } .ust-bar-sag { display: flex; align-items: center; gap: 4px; margin-left: auto; } .ust-bar-hesap { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.9); color: #fff; background: rgba(255, 255, 255, 0.14); font-size: 15px; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ust-bar-hesap:hover { color: #fff; background: rgba(255, 255, 255, 0.24); } .ust-bar .navbar-toggler { color: #fff; font-size: 22px; padding: 4px 8px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } /* Açılan menü: koyu buzlu cam kart */ .ust-bar .navbar-collapse { flex-basis: 100%; margin-top: 8px; padding: 6px 12px 14px; border-radius: 18px; background: rgba(28, 28, 30, 0.72); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); } .ust-bar .nav-link-header { color: #fff !important; } .ust-bar .nav-link-header:hover, .ust-bar .nav-link-header.active { color: #F6BB42 !important; background: rgba(255, 255, 255, 0.08); } } /* Panel / Giriş düğmesi: sayfanın kendi stili olmasa da (giriş/üye ol gibi) aynı altın düğme */ .ust-bar .btn-panel { background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%); color: #1e293b !important; border: 0; font-weight: 600; box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3); } .ust-bar .btn-panel:hover { color: #000 !important; } /* Masaüstü / büyük ekran: ortada yüzen koyu buzlu cam hap; logo solda, menü ortada, Panel + iletişim sağda (ELITICA desktop.css düzeni) */ @media (min-width: 992px) { .glass-header.ust-bar { position: fixed; top: 14px; z-index: 1070; padding: 0; left: max(16px, calc((100% - 1200px) / 2)); right: max(16px, calc((100% - 1200px) / 2)); border: 0; border-radius: 22px; background: rgba(20, 20, 22, 0.62); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); } .glass-header.ust-bar > .container, .glass-header.ust-bar > .container-xl { max-width: none; min-height: 64px; padding: 0 12px 0 22px !important; display: flex; align-items: center; flex-wrap: nowrap; } .ust-bar .navbar-brand { order: 1; margin-right: 12px; padding: 0; } .ust-bar .header-logo img { height: 32px; } .ust-bar .navbar-collapse { order: 2; } .ust-bar .ust-bar-ikon.d-lg-none { display: inline-flex !important; order: 3; margin-left: 8px; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font-size: 16px; background: rgba(255, 255, 255, 0.12); text-decoration: none; } .ust-bar .ust-bar-ikon.d-lg-none:hover { background: rgba(255, 255, 255, 0.22); color: #F6BB42; } .ust-bar .nav-link-header { padding: 8px 14px !important; font-size: 14.5px; border-radius: 999px; color: rgba(255, 255, 255, 0.9) !important; } .ust-bar .nav-link-header:hover, .ust-bar .nav-link-header.active { color: #F6BB42 !important; background: rgba(255, 255, 255, 0.1); } .ust-bar .btn-panel { padding: 9px 18px !important; font-size: 14px; border-radius: 999px; } body.modal-open .glass-header.ust-bar, body.modal-open .app-bottom-nav.dock { z-index: 1040; } /* Üstünde kahraman görseli olmayan sayfalarda içerik hap barın altından başlasın (panel kendi boşluğunu kullanır) */ body:has(.glass-header.ust-bar.ust-bar-daima):not(:has(.profile-container)) { padding-top: 84px; } } /* ===== alt-dock-stil ===== */ .app-bottom-nav.dock { position: fixed; z-index: 1060; display: flex; flex-direction: row; box-sizing: border-box; padding: 9px 4px 8px; border-radius: 22px; border: 0; background: rgba(30, 30, 32, 0.9); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); justify-content: space-around; align-items: stretch; } .app-bottom-nav.dock .nav-item-app, .app-bottom-nav.dock .nav-action-center { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; width: auto; height: auto; padding: 2px 0; margin: 0; border: 0; border-radius: 12px; background: none; box-shadow: none; transform: none; color: #F6BB42 !important; font-size: 19px; line-height: 1; text-decoration: none; cursor: pointer; } .app-bottom-nav.dock .nav-action-center:hover { transform: none; box-shadow: none; } .app-bottom-nav.dock .nav-item-app i, .app-bottom-nav.dock .nav-action-center i { color: #F6BB42; height: 24px; display: flex; align-items: center; transition: transform 0.15s ease; } .app-bottom-nav.dock .dock-etiket { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; color: #fff; opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .app-bottom-nav.dock .active .dock-etiket, .app-bottom-nav.dock a:hover .dock-etiket { opacity: 1; font-weight: 600; } .app-bottom-nav.dock .active { background: rgba(255, 255, 255, 0.08); } @media (max-width: 991px) { .app-bottom-nav.dock { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; } body:has(.app-bottom-nav.dock) { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; } /* Hızlı erişim düğmesi (sağ alt) dock'un üstünde dursun, araya sıkışmasın */ body:has(.app-bottom-nav.dock) .floating-menu, body:has(.app-bottom-nav.dock) .floating-contact-stack { bottom: calc(108px + env(safe-area-inset-bottom)) !important; } } /* Masaüstü / büyük ekran: ortada kompakt hap (ELITICA desktop.css düzeni) */ @media (min-width: 992px) { .app-bottom-nav.dock { left: 50%; right: auto; bottom: 18px; width: 560px; transform: translateX(-50%); padding: 10px 8px 9px; border-radius: 22px; } .app-bottom-nav.dock .nav-item-app, .app-bottom-nav.dock .nav-action-center { font-size: 18px; } .app-bottom-nav.dock .dock-etiket { font-size: 11px; } .app-bottom-nav.dock a:hover i { transform: translateY(-2px); } body:has(.app-bottom-nav.dock) { padding-bottom: 96px !important; } } /* ===== iletisim-merkezi ===== */ .im-dialog { max-width: 380px; margin-left: auto; margin-right: auto; padding: 0 14px; } .im-kart { border: 0; border-radius: 24px; padding: 14px 12px 12px; color: #fff; background: rgba(28, 28, 30, 0.82); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); } .im-ust { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px; } .im-baslik { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #F6BB42; } .im-kapat { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 15px; } /* ===== iletisim-satirlari ===== */ .im-satir { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; color: #fff; text-decoration: none; transition: background-color 0.15s ease; } .im-satir + .im-satir { border-top: 0.5px solid rgba(255, 255, 255, 0.08); } .im-satir:hover, .im-satir:active { background: rgba(255, 255, 255, 0.07); color: #fff; } .im-ikon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; } .im-kirmizi, .info-item .info-icon.im-kirmizi { background: linear-gradient(135deg, #ff4d5a, #c8101c); } .im-yesil, .info-item .info-icon.im-yesil { background: linear-gradient(135deg, #25D366, #128C7E); font-size: 20px; } .im-sari, .info-item .info-icon.im-sari { background: linear-gradient(135deg, #F6BB42, #d8900f); } .im-mavi, .info-item .info-icon.im-mavi { background: linear-gradient(135deg, #4a8cff, #1f5fd6); } .im-turkuaz, .info-item .info-icon.im-turkuaz { background: linear-gradient(135deg, #2cc4c4, #13868f); } .im-gri, .info-item .info-icon.im-gri { background: linear-gradient(135deg, #8e8e93, #5a5a5f); } .im-mor, .info-item .info-icon.im-mor { background: linear-gradient(135deg, #a26bff, #6b3fd6); } .im-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .im-metin strong { font-size: 15px; font-weight: 600; color: #fff; } .im-metin small { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); } .im-ok { font-size: 12px; color: rgba(255, 255, 255, 0.35); } /* Kart görünümü (İletişim sayfası): tıklanabilir kutulu öğe */ a.im-kart-satir { text-decoration: none; color: inherit; cursor: pointer; } a.im-kart-satir .info-text { flex: 1 1 auto; min-width: 0; } .im-kart-ok { font-size: 12px; color: rgba(255, 255, 255, 0.35); flex-shrink: 0; } /* ===== auth-kompakt-stil ===== */ /* Geri düğmesi üst barla çakışır; menüler her ekranda göründüğü için gerek kalmadı */ .back-link { display: none !important; } /* Masaüstü: kart, üst hap bar ile alt dock arasında ortalanır */ @media (min-width: 992px) { .auth-wrapper { padding-top: 96px !important; padding-bottom: 110px !important; } } @media (max-width: 991px) { .auth-wrapper { align-items: flex-start; margin: 0 !important; padding: calc(64px + env(safe-area-inset-top)) 12px calc(104px + env(safe-area-inset-bottom)) !important; } .auth-container { margin-top: 0 !important; max-width: 420px; } } @media (max-width: 480px) { .auth-container { padding: 18px 18px 16px !important; border-radius: 22px !important; } .auth-header { margin-bottom: 12px !important; } .auth-header i { width: 48px !important; height: 48px !important; border-radius: 15px !important; font-size: 22px !important; margin-bottom: 8px !important; } .auth-header h2 { font-size: 20px !important; margin-bottom: 3px !important; } .auth-header p { font-size: 12.5px !important; line-height: 1.35; } .auth-container .alert { padding: 9px 12px; font-size: 13px !important; margin-bottom: 10px; } .ios-input { padding: 11px 14px !important; margin-bottom: 8px !important; font-size: 14px !important; } .auth-container form .mb-4 { margin-bottom: 12px !important; } .auth-container form .mt-2 { margin-top: 4px !important; } .custom-checkbox { font-size: 12.5px !important; line-height: 1.35 !important; } .ios-btn { padding: 12px !important; font-size: 15px !important; margin-top: 0 !important; } .auth-footer { margin-top: 12px !important; font-size: 13px !important; } .auth-footer br { display: none !important; } .auth-footer a { margin-top: 0 !important; padding: 5px 12px !important; } } /* Kısa ekranlar (küçük telefonlar): açıklama satırı gizlenir */ @media (max-width: 480px) and (max-height: 700px) { .auth-header p { display: none; } .auth-header i { display: none !important; } } /* ===== detay-masaustu-stil ===== */ @media (min-width: 992px) { :root { --tl-kolon: 1200px; --tl-kenar: max(16px, calc((100% - var(--tl-kolon)) / 2)); } body:has(.hero-banner) .ios-header, body:has(.hero-banner) .bottom-bar, body:has(#bookingForm) .ios-header, body:has(#bookingForm) .bottom-bar { left: var(--tl-kenar) !important; right: var(--tl-kenar) !important; width: auto !important; } body:has(.hero-banner) .bottom-bar, body:has(#bookingForm) .bottom-bar { bottom: 18px !important; } body:has(.hero-banner) .hero-banner { left: var(--tl-kenar) !important; right: var(--tl-kenar) !important; width: auto !important; border-radius: 0 0 28px 28px; } body:has(.hero-banner) .hero-info-badges { left: calc(var(--tl-kenar) + 20px) !important; } body:has(.hero-banner) .content-container { max-width: var(--tl-kolon); margin-left: auto !important; margin-right: auto !important; padding: 34px 32px !important; } body:has(.hero-banner) { background-color: #e9ebf0; } body:has(#bookingForm) .ios-header { top: 14px !important; border-radius: 18px; } #bookingForm { max-width: var(--tl-kolon); margin-left: auto; margin-right: auto; } } /* ===== google-giris (Google ile devam et) ===== */ .gg-ayrac { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: rgba(60, 60, 67, 0.55); font-size: 12.5px; font-weight: 600; } .gg-ayrac::before, .gg-ayrac::after { content: ""; flex: 1; height: 1px; background: rgba(60, 60, 67, 0.16); } .gg-dugme { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: 999px; background: #fff; color: #1f1f1f !important; text-decoration: none; border: 1px solid #dadce0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12); transition: background-color 0.15s ease, box-shadow 0.15s ease; } .gg-dugme:hover { background: #f8f9fa; box-shadow: 0 2px 6px rgba(60, 64, 67, 0.18); } .gg-logo { flex: 0 0 20px; } @media (max-width: 480px) { .gg-ayrac { margin: 10px 0 8px; } .gg-dugme { padding: 10px 14px; font-size: 14.5px; } }