/* ============================================================
site-custom.css — Cappa teması override'ları + siteye özel UI.
(Cookie banner stilleri cookie-consent.css'te; buraya cookie YAZILMAZ.)
style.css'ten SONRA yüklenir ki tema kurallarını geçersiz kılabilsin.
============================================================ */
/* Footer yasal link listesi + şirket bilgisi */
.footer-legal-links {
list-style: none;
margin: 0 0 8px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 18px;
}
.footer-legal-links li a { font-size: 13px; letter-spacing: .3px; }
.footer-legal-info { font-size: 12px; opacity: .75; margin: 0 0 4px; }
/* =====================================================================
Üst bölge ölçüleri — topbar, navbar ve logo (bütün sayfalar)
Logo ekranın kısa kenarıyla orantılı büyür/küçülür ve iki sınır arasında kalır: telefonda
okunacak kadar büyük (46px), masaüstünde tasarımdaki 80px'i aşmaz. Kaydırınca çıkan beyaz
çubukta daha küçük (40–60px). Navbar yüksekliği logodan türetilir; anasayfa hero başlığı da
bu ölçülerle menünün altından başlar (--hdr-h).
===================================================================== */
:root {
--tb-h: 42px; /* topbar */
--logo-h: clamp(46px, 12.5vmin, 80px); /* sayfa başında, saydam navbar */
--nav-pad: 10px;
--nav-h: calc(var(--logo-h) + 2 * var(--nav-pad));
--logo-h-s: clamp(40px, 8vmin, 60px); /* kaydırınca, beyaz çubuk (.nav-scroll) */
--nav-pad-s: 15px;
--nav-h-s: calc(var(--logo-h-s) + 2 * var(--nav-pad-s));
--hdr-h: calc(var(--tb-h) + var(--nav-h)); /* sayfa başında menünün alt kenarı */
}
@media (max-width: 767px) { :root { --tb-h: 40px; } }
.navbar { height: var(--nav-h); }
.navbar.nav-scroll { height: var(--nav-h-s); }
/* Marka logosu (SVG, kahve); tema width:160px'i geçersiz kılınır, boyu yukarıdaki ölçüden gelir. */
.navbar .logo-img { width: auto !important; height: var(--nav-h); padding: var(--nav-pad) 0; transition: filter .3s ease; }
.nav-scroll .logo-img { height: var(--nav-h-s); padding: var(--nav-pad-s) 0; }
/* Scroll YOKKEN (üstte, transparan navbar) SVG logoyu beyaza çevir; scroll'da (nav-scroll) orijinal kahve kalır */
.navbar:not(.nav-scroll) .logo-img { filter: brightness(0) invert(1); }
/* ---- DENEME: utility topbar (navbar üstünde ince şerit). Kaldırmak için: _Layout'taki
_TopBar include'unu sil + bu blok + _TopBar.cshtml. (Ya da bu commit'i git revert et.) ---- */
.topbar {
position: absolute; top: 0; left: 0; width: 100%; z-index: 100;
/*background: rgba(18, 14, 10, .45);*/
font-family: 'Barlow Condensed', sans-serif;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; padding: 5px 0; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-left a, .topbar-social a {
color: #fff; font-size: 13px; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
transition: color .25s; display: inline-flex; align-items: center; gap: 7px;
}
.topbar-left a:hover, .topbar-social a:hover { color: #C19D60; }
.topbar-left i { color: #aa8453; font-size: 14px; }
.topbar-social { display: inline-flex; gap: 13px; font-size: 15px; }
.topbar-sep { width: 1px; height: 15px; background: rgba(255, 255, 255, .22); flex: 0 0 auto; }
/* Dil: aktif dil + diğerleri hover'da açılır liste (tek dilde partial hiç render etmez) */
.topbar-lang { position: relative; }
.topbar-lang-btn { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .12em; cursor: pointer; transition: color .25s; }
.topbar-lang:hover .topbar-lang-btn { color: #C19D60; }
.topbar-lang-btn i { font-size: 11px; }
.topbar-lang-menu {
position: absolute; top: calc(100% + 8px); right: 0; margin: 0; padding: 5px 0; list-style: none;
min-width: 96px; background: #1b1610; border: 1px solid rgba(255, 255, 255, .14);
opacity: 0; visibility: hidden; transform: translateY(6px); transition: .22s ease; z-index: 60;
box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.topbar-lang:hover .topbar-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar-lang-menu a { display: block; padding: 6px 16px; color: #cdbfa6; font-size: 13px; letter-spacing: .08em; text-decoration: none; transition: color .2s, background .2s; }
.topbar-lang-menu a:hover { color: #C19D60; background: rgba(255, 255, 255, .05); }
.topbar-book {
display: inline-flex; align-items: center; gap: 8px;
color: #201810; background: #aa8453; padding: 8px 18px; border-radius: 2px;
font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
transition: background .25s;
}
.topbar-book i { font-size: 14px; }
.topbar-book:hover { background: #C19D60; color: #201810; }
/* navbar'ı topbar'ın altına indir; scroll'da (nav-scroll) tema davranışı korunur */
.navbar:not(.nav-scroll) { top: var(--tb-h); }
.topbar-book { white-space: nowrap; }
/* Telefonda e-posta, sosyal ikonlar ve ayraçlar gizlenir; telefon, dil ve "Prenota" tek satıra sığar.
Seçiciler .topbar-left a (0,1,1) kuralını yenecek özgüllükte. */
@media (max-width: 767px) {
.topbar-left .topbar-mail, .topbar-left .topbar-sep, .topbar-right .topbar-social, .topbar-right .topbar-sep { display: none; }
.topbar-inner { gap: 12px; }
.topbar-right { gap: 14px; }
.topbar-book { padding: 7px 12px; letter-spacing: .1em; }
}
/* Yandan kayarak giren animasyonlar (fadeInLeft/Right, 50px) sürerken öğe ekran dışına taşar; telefonda
sayfanın yana oynamaması / uzaklaşmaması için bölüm yatayda kırpılır (clip kaydırma kutusu yaratmaz). */
section:has(> .container .animate-box[data-animate-effect="fadeInLeft"]),
section:has(> .container .animate-box[data-animate-effect="fadeInRight"]) { overflow-x: clip; }
/* Menü item harf aralığı (tema 3px -> 1px; menünün sığmasına da yardımcı) */
.navbar .navbar-nav .nav-link { letter-spacing: 1px; white-space: nowrap; }
/* Menü düğmesi: üç çizgi, açılınca çarpıya döner. Renkler arka plana göre (saydam navbar'da beyaz,
beyaz çubukta altın, açık menüde beyaz); temanın .navbar button kuralı rengi saydam yaptığı için
çizgiler color değil background ile boyanır. */
.nav-burger { position: relative; display: block; width: 26px; height: 16px; margin: 0 auto; }
.nav-burger i {
position: absolute; right: 0; width: 100%; height: 2px; background-color: #fff;
transition: top .25s ease .15s, transform .25s ease, opacity .2s ease .1s, width .25s ease, background-color .3s ease;
}
.nav-burger i:nth-child(1) { top: 0; }
.nav-burger i:nth-child(2) { top: 7px; width: 65%; }
.nav-burger i:nth-child(3) { top: 14px; }
.nav-scroll .nav-burger i { background-color: #aa8453; }
.navbar-toggler[aria-expanded="true"] .nav-burger i {
background-color: #fff;
transition: top .25s ease, transform .25s ease .15s, opacity .2s ease, width .25s ease, background-color .3s ease;
}
.navbar-toggler[aria-expanded="true"] .nav-burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .nav-burger i:nth-child(2) { opacity: 0; width: 0; }
.navbar-toggler[aria-expanded="true"] .nav-burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
/* =====================================================================
Telefon/tablet menüsü (≤991px) — tam ekran koyu katman
Bootstrap collapse açılıp kapanırken site-custom.js 'e iki sınıf koyar: menu-active
(açılıştan kapanış bitene kadar: katman sırası, konum, kaydırma kilidi) ve menu-open
(görünürlük; kapanışın başında kalkar, katman solarak kapanır). Katman navbar'ın içinde;
kaydırılmış sayfada navbar transform'lu (tema .nav-scroll) olduğundan fixed katman ona göre
konumlanır — bu yüzden bottom:0 yerine yükseklik verilir (navbar her iki durumda da ekranın
tepesinde). Sayfa başında navbar topbar'ın üstüne kayar, logo ve çarpı katmanın üstünde kalır.
===================================================================== */
@media (max-width: 991.98px) {
:root { --nav-gutter: 20px; }
/* Topbar da menü çubuğu gibi tam genişlik: telefon logoyla, Prenota menü düğmesinin çizgileriyle
aynı hizada (tema konteyneri 720/540px'te ortalayınca kenarlar kayıyordu). */
.topbar .container { max-width: none; padding-left: var(--nav-gutter); padding-right: var(--nav-gutter); }
.navbar .logo-wrapper { position: relative; z-index: 2; padding: 0 0 0 var(--nav-gutter); }
.navbar .navbar-toggler {
position: relative; z-index: 2;
width: 48px; height: 48px; margin: 0 calc(var(--nav-gutter) - 11px) 0 0; padding: 0;
border: 0; border-radius: 0; box-shadow: none;
}
.navbar .navbar-toggler:focus { box-shadow: none; }
.navbar .navbar-toggler:focus-visible { box-shadow: inset 0 0 0 2px #c19d60; }
.navbar .navbar-collapse {
position: fixed; z-index: 1; top: 0; left: 0;
display: flex !important; flex-direction: column; align-items: stretch;
width: 100%; height: 100vh !important; height: 100dvh !important; max-height: none;
margin: 0; padding: calc(var(--nav-h) + 12px) var(--nav-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
background: #16120e linear-gradient(180deg, #1d1813 0%, #15110d 60%);
text-align: left;
opacity: 0; visibility: hidden;
transition: opacity .35s ease, visibility 0s linear .35s;
}
.nav-scroll .navbar-collapse { padding-top: calc(var(--nav-h-s) + 12px); }
html.menu-open .navbar .navbar-collapse { opacity: 1; visibility: visible; transition: opacity .35s ease; }
html.menu-active, html.menu-active body { overflow: hidden; }
html.menu-active .navbar { z-index: 1035; }
html.menu-active .navbar:not(.nav-scroll) { transition: top .35s ease; }
html.menu-open .navbar:not(.nav-scroll) { top: 0; }
html.menu-open .navbar .logo-img { filter: brightness(0) invert(1); }
/* Öğeler: büyük serif, ince ayraç; etkin sayfa altın ve önünde kısa çizgi
(listedeki ms-auto masaüstünde menüyü sağa yaslar; burada tam genişlik). */
.navbar .navbar-collapse .navbar-nav { margin: 0 !important; }
.navbar .navbar-collapse .navbar-nav > .nav-item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.navbar .navbar-collapse .nav-link {
display: flex; align-items: center; gap: 12px;
margin: 0 !important; padding: 13px 0;
font-family: "Gilda Display", serif; font-size: clamp(22px, 5.6vw, 28px); line-height: 1.2;
letter-spacing: .02em; text-transform: none; white-space: normal;
color: #f3ede4 !important;
}
.navbar .navbar-collapse .nav-link:hover,
.navbar .navbar-collapse .nav-link:focus-visible,
.navbar .navbar-collapse .nav-link.active { color: #c19d60 !important; }
.navbar .navbar-collapse .nav-link.active::before {
content: ""; flex: 0 0 auto; width: 16px; height: 1px; background-color: currentColor;
}
.navbar .navbar-collapse .dropdown .nav-link i {
margin-left: auto; padding: 0; font-size: 13px; color: rgba(243, 237, 228, .55);
transition: transform .3s ease;
}
.navbar .navbar-collapse .dropdown .nav-link.show i { transform: rotate(180deg); }
.navbar .navbar-collapse .dropdown-menu {
margin: -2px 0 16px; padding: 0;
border: 0; border-left: 1px solid rgba(193, 157, 96, .45); border-radius: 0;
background: transparent; box-shadow: none;
}
.navbar .navbar-collapse .dropdown-menu li { border: 0; }
.navbar .navbar-collapse .dropdown-menu .dropdown-item {
padding: 9px 0 9px 18px;
font-family: "Barlow Condensed", sans-serif; font-size: 15px; line-height: 1.4;
letter-spacing: 2px; text-transform: uppercase; white-space: normal;
color: rgba(243, 237, 228, .72); background: transparent;
}
.navbar .navbar-collapse .dropdown-menu .dropdown-item:hover,
.navbar .navbar-collapse .dropdown-menu .dropdown-item:active,
.navbar .navbar-collapse .dropdown-menu .dropdown-item.active { color: #c19d60; background: transparent; }
/* Alt bölüm: rezervasyon, iletişim, dil ve sosyal bağlantılar */
.nav-extra { margin-top: auto; padding-top: 30px; }
.nav-extra-book {
display: flex; align-items: center; justify-content: center; gap: 10px;
height: 52px; padding: 0 20px;
background-color: #aa8453; color: #fff;
font-family: "Barlow Condensed", sans-serif; font-size: 14px; letter-spacing: 3px;
text-transform: uppercase; text-decoration: none;
transition: background-color .25s ease;
}
.nav-extra-book:hover, .nav-extra-book:focus-visible { background-color: #c19d60; color: #fff; }
.nav-extra-contact { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 16px; }
.nav-extra-contact a {
display: inline-flex; align-items: center; gap: 9px; padding: 7px 0;
font-size: 15px; color: rgba(243, 237, 228, .8); text-decoration: none;
}
.nav-extra-contact i { font-size: 15px; color: #aa8453; }
.nav-extra-foot {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.nav-extra-lang { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nav-extra-lang a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 46px; height: 38px; padding: 0 10px;
border: 1px solid rgba(255, 255, 255, .16);
font-family: "Barlow Condensed", sans-serif; font-size: 14px; letter-spacing: 2px;
color: rgba(243, 237, 228, .75); text-decoration: none;
}
.nav-extra-lang a.active { border-color: #aa8453; color: #fff; }
.nav-extra-social { display: flex; margin-right: -11px; }
.nav-extra-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; font-size: 16px; color: rgba(243, 237, 228, .8);
}
.nav-extra-contact a:hover, .nav-extra-lang a:hover, .nav-extra-social a:hover { color: #c19d60; }
.nav-extra a:focus-visible { outline: 2px solid #c19d60; outline-offset: 2px; }
/* Açılışta öğeler sırayla, hafifçe yukarı kayarak belirir */
.navbar .navbar-collapse .navbar-nav > li,
.navbar .navbar-collapse .nav-extra {
opacity: 0; transform: translateY(14px);
transition: opacity .4s ease, transform .4s ease;
}
html.menu-open .navbar .navbar-collapse .navbar-nav > li,
html.menu-open .navbar .navbar-collapse .nav-extra { opacity: 1; transform: none; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(1) { transition-delay: .06s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(2) { transition-delay: .09s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(3) { transition-delay: .12s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(4) { transition-delay: .15s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(5) { transition-delay: .18s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(6) { transition-delay: .21s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(7) { transition-delay: .24s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(8) { transition-delay: .27s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(9) { transition-delay: .3s; }
html.menu-open .navbar-collapse .navbar-nav > li:nth-child(n+10) { transition-delay: .33s; }
html.menu-open .navbar-collapse .nav-extra { transition-delay: .36s; }
}
/* Alçak yatay ekran (telefon) ve geniş ama alçak tablet penceresi: tek sütun sığmıyor; öğeler iki
sütunda, alt bölüm sağda — kaydırmadan sığsın. */
@media (max-width: 991.98px) and (max-height: 560px),
(min-width: 640px) and (max-width: 991.98px) and (max-height: 860px) {
.navbar .navbar-collapse { flex-flow: row nowrap; align-items: flex-start; gap: 36px; }
.navbar .navbar-collapse .navbar-nav { display: block; flex: 1 1 0; min-width: 0; columns: 2; column-gap: 28px; }
.navbar .navbar-collapse .navbar-nav > .nav-item { break-inside: avoid; }
.navbar .navbar-collapse .nav-link { padding: clamp(8px, 1.6vh, 13px) 0; font-size: clamp(20px, 3.6vh, 26px); }
.nav-extra { flex: 0 0 min(36%, 300px); margin-top: 0; padding-top: 6px; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
.navbar .navbar-collapse,
.navbar .navbar-collapse .navbar-nav > li,
.navbar .navbar-collapse .nav-extra,
html.menu-active .navbar:not(.nav-scroll),
.nav-burger i { transition: none !important; }
}
/* 992–1199px: konteyner 960px, 10 öğe 12px yan boşlukla sığmıyor ("Chi siamo", "Lavora con noi"
alt satırlara kırılıyordu); bu aralıkta yan boşluk daralır. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.navbar .navbar-nav .nav-link { padding-left: 8px; padding-right: 8px; }
}
/* Footer dil değiştirici — "LANGUAGE" butonu, bg görünmez; hover'da tonlanır + yukarı açılır liste */
.footer-lang { position: relative; display: inline-block; margin-bottom: 14px; }
.footer-lang-btn {
background: transparent; border: 0; color: inherit; cursor: pointer;
font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
padding: 8px 14px; border-radius: 3px; transition: background .2s ease;
display: inline-flex; align-items: center; gap: 8px;
}
.footer-lang-btn:hover, .footer-lang.open .footer-lang-btn { background: rgba(255, 255, 255, .12); }
.footer-lang-menu {
position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
margin: 0 0 6px; padding: 6px 0; list-style: none; min-width: 150px;
background: #272727; border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px;
opacity: 0; visibility: hidden; transition: opacity .2s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, .4); z-index: 50;
}
.footer-lang.open .footer-lang-menu { opacity: 1; visibility: visible; }
.footer-lang-menu li a { display: block; padding: 7px 18px; font-size: 13px; }
.footer-lang-menu li a.active { color: #C19D60; }
.footer-lang-menu li a:hover { background: rgba(255, 255, 255, .08); }
/* Footer sosyal ikonları: dokunma alanı 40px (ikon 15px kalır). İlk ikon metin hizasında dursun diye
liste sola, kutunun yarattığı dikey kayma kadar da yukarı alınır. */
.footer-about-social-list { margin: 8px 0 0 -12px; }
.footer-about-social-list a { width: 40px; height: 40px; }
.footer-about-social-list a + a { margin-left: 0; }
/* Footer Explore alt menüsü (açık listelenen dropdown çocukları) */
.footer-submenu { display: none; margin: 4px 0 6px 14px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .12); }
.footer-explore-list > li.open > .footer-submenu { display: block; }
.footer-submenu li a { font-size: 12px; opacity: .85; }
/* Alt menüsü olan parent: tıklanabilir + aç/kapa göstergesi (+ / −) */
.footer-explore-list > li.has-submenu > a { cursor: pointer; }
.footer-explore-list > li.has-submenu > a::after { content: "+"; margin-left: 8px; font-weight: 400; opacity: .7; }
.footer-explore-list > li.has-submenu.open > a::after { content: "\2212"; }
/* Booking widget "Check availability" butonu — hover'da zıplama önlemi.
Tema .btn-form1-submit'e border:none (width=medium/3px, style=none) veriyor; global button:hover
border'ı 'solid' yapınca 3px üst+alt görünür olup section'ı +6px zıplatıyordu. Hover'da border'ı sıfırla
+ kutuyu sabitle (yüksek specificity: .booking-box .btn-form1-submit:hover > button:hover). */
.booking-box .btn-form1-submit { box-sizing: border-box; height: 62px; }
.booking-box .btn-form1-submit:hover { border: 0 solid transparent; }
/* Facilities kartları — satır içinde eşit yükseklik (doğal; uzun/kısa metin farkı hizalanır). YALNIZ kart
kolonları (col-md-4) flex; başlık satırına (col-md-12) dokunma. Satırlar arası 30px boşluk kolon margin'inde
(kartın margin-bottom'u sıfırlanır ki çift boşluk/bitişme olmasın). min-height YOK → gereksiz büyüme yok. */
.facilties .row { display: flex; flex-wrap: wrap; }
.facilties .row > .col-md-4 { display: flex; margin-bottom: 30px; }
.facilties .single-facility { width: 100%; margin-bottom: 0; }
/* Banner arka planı ORTALANSIN — tema .bg-img yalnız 'cover' veriyor, position vermeyince top-left kalıyordu
(dummy/gerçek görsel sola/üste kayıyordu). bg-fixed parallax'ı banner içinde merkezlemeyi engellediğinden
banner'da scroll'a çeviriyoruz → görsel banner kutusuna göre ortalanır. */
.banner-header.bg-img { background-position: center center; background-attachment: scroll; }
/* Alçak ekranda (yatay telefon/tablet) 60vh'lik bant 120px'lik iç boşluklarla menüye ve başlığa yetmiyor,
başlık menünün altına giriyordu: bant içeriğe göre uzar, başlık menünün altından başlar. */
@media (max-height: 560px) {
.banner-header.section-padding { height: auto; min-height: 60vh; padding: calc(var(--hdr-h) + 24px) 0 48px; }
}
/* Legal sayfa içeriği */
.legal-content h3 { margin: 26px 0 10px; }
.legal-content ul { padding-left: 18px; }
.legal-content .legal-company { list-style: none; padding-left: 0; }
.legal-content .legal-updated { margin-top: 26px; opacity: .7; font-size: 13px; }
/* İçerik henüz hazırlanmadı placeholder'ı (_ContentMissing) — yayınlanmış içeriği olmayan sayfa/bölüm için
kullanıcı-dostu, nazik boş durum. Metin DB'den (Shared:ContentNotReady). */
.content-missing { text-align: center; padding: 60px 20px; color: #8a7f72; }
.content-missing-icon { display: block; font-size: 40px; margin-bottom: 16px; opacity: .5; }
.content-missing p { font-size: 17px; margin: 0; }
/* Oda detay slider — galeri görsellerinin üzerinde oda başlığı overlay'i (hangi oda olduğu belli olsun) */
.header.slider.room-slider { position: relative; }
.header.slider.room-slider .room-slider-caption {
position: absolute; left: 0; right: 0; top: 50%;
transform: translateY(-50%); z-index: 3;
text-align: center; color: #fff; padding: 0 20px; pointer-events: none;
}
.header.slider.room-slider .room-slider-caption h1 { color: #fff; margin: 18px 0 0; font-size: 3.6rem; }
.header.slider.room-slider .room-slider-caption h5 { color: #fff; opacity: .95; margin: 0; }
.header.slider.room-slider .room-slider-caption span { display: inline-block; margin-bottom: 22px; }
.header.slider.room-slider .room-slider-caption .star-rating { margin: 0 5px; }
/* Oda detay içerik bölüm başlıkları + öne çıkanlar (ayrıştıran özellikler) listesi */
.rooms-page .room-block-title { margin-bottom: 15px; }
.rooms-page .room-highlights .page-list { margin-bottom: 0; }
/* WebP sarmalaması — PictureTagHelper ![]()
'leri ile sarıyor.
display:contents sayesinde kutu üretmez; tema CSS'indeki
".card img", ".img > img" gibi doğrudan-çocuk seçicileri çalışmaya devam eder. */
picture { display: contents; }
/* ---- Wellness · Membership -----------------------------------------------
Spa etiquette ile booking CTA'sı arasında duran vurgu bloğu. Sayfanın geri
kalanı krem/beyaz zeminde ilerlediği için burada koyu zemine geçiliyor;
hemen ardından gelen booking CTA'sı fotoğraflı olduğundan bu blok bilinçli
olarak fotoğrafsız ve tipografi ağırlıklı tutuldu. */
.wellness-membership {
position: relative;
overflow: hidden;
background-color: #232323;
padding: 100px 0;
text-align: center;
}
/* Altin yildiz pattern'i — section'i kapsar, metin kolonunun (col-lg-8 offset-lg-2)
disinda kalan sol/sag bosluklara serpilir. Yildizlar farkli gecikme ve surelerle
parlar; hareket duyarliligi olanlar icin animasyon kapanir. */
.wellness-membership .wm-stars {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.wellness-membership .wm-stars i {
position: absolute;
display: block;
background-color: #aa8453;
-webkit-mask: var(--wm-star) center / contain no-repeat;
mask: var(--wm-star) center / contain no-repeat;
opacity: .2;
animation: wm-twinkle 5s ease-in-out infinite;
}
.wellness-membership {
--wm-star: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5 10.8 12 12-7 1.2-11.4 5.6-12 12-.6-6.4-5-10.8-12-12 7-1.2 11.4-5.6 12-12z'/%3E%3C/svg%3E");
}
/* Sol bosluk */
.wellness-membership .wm-stars i:nth-child(1) { left: 4%; top: 18%; width: 14px; height: 14px; animation-delay: 0s; animation-duration: 4.5s; }
.wellness-membership .wm-stars i:nth-child(2) { left: 11%; top: 62%; width: 9px; height: 9px; animation-delay: 1.4s; animation-duration: 6s; }
.wellness-membership .wm-stars i:nth-child(3) { left: 7%; top: 84%; width: 18px; height: 18px; animation-delay: 2.6s; animation-duration: 5.2s; }
.wellness-membership .wm-stars i:nth-child(4) { left: 16%; top: 32%; width: 7px; height: 7px; animation-delay: 0.7s; animation-duration: 7s; }
.wellness-membership .wm-stars i:nth-child(5) { left: 2%; top: 48%; width: 11px; height: 11px; animation-delay: 3.3s; animation-duration: 4.8s; }
.wellness-membership .wm-stars i:nth-child(6) { left: 13%; top: 8%; width: 8px; height: 8px; animation-delay: 1.9s; animation-duration: 6.4s; }
.wellness-membership .wm-stars i:nth-child(7) { left: 19%; top: 74%; width: 12px; height: 12px; animation-delay: 4.1s; animation-duration: 5.6s; }
.wellness-membership .wm-stars i:nth-child(8) { left: 8%; top: 40%; width: 6px; height: 6px; animation-delay: 2.2s; animation-duration: 8s; }
/* Sag bosluk */
.wellness-membership .wm-stars i:nth-child(9) { right: 5%; top: 22%; width: 16px; height: 16px; animation-delay: 0.4s; animation-duration: 5.8s; }
.wellness-membership .wm-stars i:nth-child(10) { right: 12%; top: 70%; width: 10px; height: 10px; animation-delay: 2.9s; animation-duration: 4.6s; }
.wellness-membership .wm-stars i:nth-child(11) { right: 3%; top: 55%; width: 8px; height: 8px; animation-delay: 1.1s; animation-duration: 6.8s; }
.wellness-membership .wm-stars i:nth-child(12) { right: 17%; top: 14%; width: 7px; height: 7px; animation-delay: 3.7s; animation-duration: 5.4s; }
.wellness-membership .wm-stars i:nth-child(13) { right: 9%; top: 88%; width: 13px; height: 13px; animation-delay: 1.6s; animation-duration: 7.2s; }
.wellness-membership .wm-stars i:nth-child(14) { right: 15%; top: 44%; width: 9px; height: 9px; animation-delay: 4.4s; animation-duration: 4.9s; }
.wellness-membership .wm-stars i:nth-child(15) { right: 20%; top: 60%; width: 6px; height: 6px; animation-delay: 0.9s; animation-duration: 6.2s; }
.wellness-membership .wm-stars i:nth-child(16) { right: 7%; top: 34%; width: 11px; height: 11px; animation-delay: 3.1s; animation-duration: 5.1s; }
@keyframes wm-twinkle {
0%, 100% { opacity: .12; transform: scale(.8); }
50% { opacity: .85; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.wellness-membership .wm-stars i { animation: none; opacity: .3; }
}
.wellness-membership .container { position: relative; z-index: 1; }
.wellness-membership .wm-eyebrow {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px;
letter-spacing: 4px;
text-transform: uppercase;
color: #aa8453;
margin-bottom: 18px;
}
.wellness-membership .wm-title {
font-family: 'Gilda Display', serif;
font-size: 42px;
line-height: 1.2;
color: #fff;
margin: 0;
}
/* Ayirici: cizgi — ikon — cizgi */
.wellness-membership .wm-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 24px 0 26px;
}
.wellness-membership .wm-rule::before,
.wellness-membership .wm-rule::after {
content: "";
display: block;
width: 46px;
height: 1px;
background-color: #aa8453;
opacity: .55;
}
.wellness-membership .wm-rule svg {
width: 22px;
height: 22px;
color: #aa8453;
display: block;
}
.wellness-membership .wm-text p {
color: #c9c2b8;
margin: 0 auto 32px;
max-width: 30em;
}
.wellness-membership .butn-light {
display: inline-block;
}
@media screen and (max-width: 767px) {
.wellness-membership { padding: 70px 0; }
.wellness-membership .wm-title { font-size: 32px; }
/* Dar ekranda metin kolonu tam genisligi kaplar; pattern okumayi bozmasin. */
.wellness-membership .wm-stars i:nth-child(n+7) { display: none; }
}
/* ---- Wellness · öne çıkan tedaviler + sayfa içi menü ----------------------
Accordion panelleri Treatment kayıtlarından gelir; sayı serbesttir (flex ile akar).
Sayfa içi menü sticky: normal akışta durur, aşağı kaydırınca sabit header'ın altına
yapışır, başa dönünce kendi yerine geçer. Header yüksekliği JS ile --wl-navh'a yazılır.
wellness-treatments-css */
/* ---- sayfa içi menü ---- */
/* Sayfa akisinda normal durur; asagi kaydirinca sabit header'in altina yapisir,
basa donunce kendi yerine geri gecer (position: sticky davranisi). */
.wl-subnav {
/* Yapisma noktasi = temanin .nav-scroll header yuksekligi (90px).
Sayfa ustundeyken menu akista durur, top degeri devreye girmez. */
position: sticky; top: 90px; z-index: 20;
background: rgba(255,255,255,.97);
border-bottom: 1px solid #e9e4dc;
}
.wl-subnav .inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.wl-subnav .inner::-webkit-scrollbar { display: none; }
.wl-subnav a {
flex: 0 0 auto; padding: 20px 18px; text-decoration: none; white-space: nowrap;
font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: 3px;
text-transform: uppercase; color: #8f8674; border-bottom: 2px solid transparent;
transition: color .25s, border-color .25s;
}
.wl-subnav a:hover { color: #232323; }
.wl-subnav a.active { color: #aa8453; border-bottom-color: #aa8453; }
/* ---- öne çıkan treatment bloğu ---- */
.wl-feature { position: relative; height: 460px; display: flex; align-items: center; }
.wl-feature .container { width: 100%; }
.wl-feature .cap { max-width: 480px; }
.wl-feature[data-pos="center"] .cap { margin: 0 auto; text-align: center; }
.wl-feature[data-pos="right"] .cap { margin-left: auto; text-align: right; }
.wl-feature .kick {
display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
letter-spacing: 4px; text-transform: uppercase; color: #c4a274; margin-bottom: 12px;
}
.wl-feature h3 { font-family: 'Gilda Display', serif; font-size: 40px; color: #fff; margin: 0 0 14px; line-height: 1.2; }
.wl-feature p { color: #ddd6cc; margin: 0 0 16px; }
.wl-feature .meta {
font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: 2px;
color: #bdb5aa; margin-bottom: 24px;
}
.wl-feature .meta b { color: #fff; font-weight: 400; }
.wl-gal-btn {
display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: 3px;
text-transform: uppercase; padding: 13px 28px; border: 1px solid rgba(255,255,255,.55);
color: #fff; background: none; transition: all .25s;
}
.wl-gal-btn:hover { background: #aa8453; border-color: #aa8453; }
.wl-gal-btn small { opacity: .75; letter-spacing: 1px; }
.wl-shots { display: none; }
/* ---- VARYANT B: yatay accordion (image accordion) ---- */
/* Tam genislik serit: yukseklik en/boy oranindan gelir, sinirlar guvenlik icin. */
/* Accordion sarmalayicisi: seritten sonra tesis alanlarina nefes birak. */
.wl-acc-wrap { width: 100%; overflow-x: hidden; padding-bottom: 90px; }
.wl-acc {
display: flex; justify-content: center; align-items: stretch; gap: 0;
width: 100%; margin: 0 auto;
aspect-ratio: 2.8 / 1; min-height: 430px; max-height: 680px;
}
.wl-acc .pan {
position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer;
background-size: cover; background-position: center;
transition: flex-grow .55s cubic-bezier(.4,0,.2,1);
}
.wl-acc .pan::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.12) 100%);
transition: background .45s;
}
.wl-acc .pan:hover, .wl-acc .pan:focus-within { flex-grow: 2.6; }
.wl-acc .pan:hover::after, .wl-acc .pan:focus-within::after {
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,0) 100%);
}
.wl-acc .pan-in {
position: absolute; inset: auto 0 0 0; z-index: 2; padding: 28px 30px;
display: flex; flex-direction: column; align-items: flex-start;
}
.wl-acc .pan-kick {
font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 4px;
text-transform: uppercase; color: #c4a274; margin-bottom: 8px; white-space: nowrap;
}
.wl-acc .pan-name {
font-family: 'Gilda Display', serif; font-size: 28px; color: #fff; margin: 0;
line-height: 1.15; white-space: nowrap;
}
/* Kapalıyken gizli, açılınca beliren kısım */
.wl-acc .pan-more {
max-width: 420px; opacity: 0; max-height: 0; overflow: hidden;
transition: opacity .35s .15s, max-height .55s;
}
.wl-acc .pan:hover .pan-more, .wl-acc .pan:focus-within .pan-more { opacity: 1; max-height: 260px; }
.wl-acc .pan-more p { color: #ded7cd; margin: 14px 0 0; font-size: .95rem; }
.wl-acc .pan-more .meta {
font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 2px;
color: #bdb5aa; margin-top: 10px;
}
.wl-acc .pan-more .meta b { color: #fff; font-weight: 400; }
.wl-acc .pan a:focus-visible { outline: 2px solid #aa8453; outline-offset: 2px; }
/* Dokunmatik: hover yok -> dikey yigin, hepsi acik */
@media (hover: none) {
.wl-acc { flex-direction: column; aspect-ratio: auto; height: auto; max-height: none; }
.wl-acc .pan { flex: 0 0 auto; height: 300px; }
.wl-acc .pan-more { opacity: 1; max-height: none; }
}
@media screen and (max-width: 767px) {
.wl-feature { height: 420px; }
.wl-feature h3 { font-size: 28px; }
.wl-feature .cap, .wl-feature[data-pos="center"] .cap, .wl-feature[data-pos="right"] .cap { max-width: 100%; text-align: left; margin: 0; }
}
/* Wellness intro: solda metin + rezervasyon, sagda dikey gorsel.
Tek kolonda sag taraf bos kaliyordu; section-padding (120px) korunur. */
.wellness-intro .wl-intro-text .reservations { margin-top: 34px; }
/* Gorsel metin sutunuyla ayni boyda dursun: sabit oran metin kisayken
asiri uzun bir blok birakiyordu. Sinirlar icinde sutunu takip eder. */
.wellness-intro .wl-intro-figure {
margin: 0;
height: 100%;
min-height: 340px;
max-height: 520px;
overflow: hidden;
}
.wellness-intro .wl-intro-figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
@media screen and (min-width: 992px) {
.wellness-intro .wl-intro-aside { padding-left: 40px; }
}
@media screen and (max-width: 991px) {
.wellness-intro .wl-intro-aside { margin-top: 40px; }
.wellness-intro .wl-intro-figure { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
}
/* Tesis alani: ana gorselin uzerinde ek fotograflarin serididir; herhangi birine
tiklaninca fotograf penceresi acilir (site-lightbox.js, ana gorsel dahil). */
.fac-media { position: relative; }
.fac-thumbs {
position: absolute; left: 18px; bottom: 18px; z-index: 2;
display: flex; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 36px);
}
.fac-thumbs a {
display: block; width: 62px; height: 44px; overflow: hidden;
border: 2px solid rgba(255,255,255,.85); background: #ddd;
transition: border-color .25s, transform .25s;
}
.fac-thumbs a:hover, .fac-thumbs a:focus-visible { border-color: #aa8453; transform: translateY(-2px); }
.fac-thumbs a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fac-thumbs .fac-cover { display: none; }
@media screen and (max-width: 767px) {
.fac-thumbs { left: 12px; bottom: 12px; gap: 6px; }
.fac-thumbs a { width: 50px; height: 36px; }
}
/* Spa menusu bolumu — tesis alanlariyla kurallar arasinda, krem zeminde
sakin bir ara durak. Ikon temanin altin tonunda, ince cizgili. */
.wl-spa-menu { padding-bottom: 100px; }
.wl-spa-menu .wsm-icon { display: inline-block; color: #aa8453; margin-bottom: 22px; }
.wl-spa-menu .wsm-icon svg { width: 44px; height: 44px; display: block; }
.wl-spa-menu .section-subtitle,
.wl-spa-menu .section-title { text-align: center; }
.wl-spa-menu p { max-width: 34em; margin-left: auto; margin-right: auto; }
.wl-spa-menu .butn-dark { display: inline-block; }
@media screen and (max-width: 767px) { .wl-spa-menu { padding-bottom: 70px; } }
/* Galerisi olan gorseller tiklanabilir oldugunu belli etsin. */
.wl-acc .pan.has-gallery { cursor: zoom-in; }
/* Ana gorsel PictureTagHelper ile icine sarilabiliyor; ikisini de kapsa. */
.fac-media.has-gallery > img,
.fac-media.has-gallery > picture > img { cursor: zoom-in; }
/* Wellness tesis alanları: container içinde 3×2 fotoğraf ızgarası. Üstteki öne çıkan tedavi
şeridiyle aynı dil: koyu alt geçiş, altın etiket, beyaz Gilda ad. Kısa metin masaüstünde
üzerine gelince açılır; dokunmatikte ve telefonda hep görünür. Kutunun tamamı galeri bağlantısı.
Kutular arasındaki 2 px çizgi sayfanın zemini (beyaz). */
.wl-fac { padding-bottom: 120px; }
.wl-fac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.wl-fac-tile { position: relative; overflow: hidden; aspect-ratio: 8 / 7; max-height: 600px; background: #1d1915; }
.wl-fac-img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.wl-fac-tile::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.12) 100%);
}
.wl-fac-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 34px; pointer-events: none; }
.wl-fac-kick {
display: block; margin-bottom: 8px;
font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 4px;
text-transform: uppercase; color: #c4a274;
}
.wl-fac-name { margin: 0; font-family: 'Gilda Display', serif; font-size: 28px; line-height: 1.15; color: #fff; }
.wl-fac-text {
max-width: 340px; max-height: 0; opacity: 0; overflow: hidden;
transition: opacity .35s .12s, max-height .55s, margin-top .55s;
}
.wl-fac-text p { margin: 0; font-size: 15px; line-height: 1.6; color: #ded7cd; }
.wl-fac-tile:hover .wl-fac-text,
.wl-fac-tile:focus-within .wl-fac-text { max-height: 140px; opacity: 1; margin-top: 12px; }
.wl-fac-tile:hover .wl-fac-img { transform: scale(1.06); }
.wl-fac-link { position: absolute; inset: 0; z-index: 3; cursor: zoom-in; }
.wl-fac-link:focus-visible { outline: 2px solid #c4a274; outline-offset: -5px; }
/* Öğe sayısı sütuna bölünmezse son satırda tek kalan kutu satırı kaplar (ör. Gym açılınca 7). */
@media screen and (min-width: 992px) {
.wl-fac-tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 24 / 7; }
}
/* Metin hep açıkken yazı bloğu yükselir: etiket açık renkli fotoğrafta da okunsun diye geçiş daha koyu. */
@media (hover: none), screen and (max-width: 767px) {
.wl-fac-tile::after {
background: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.52) 55%, rgba(0,0,0,.14) 100%);
}
}
@media (hover: none) {
.wl-fac-text { max-height: none; opacity: 1; margin-top: 10px; }
}
@media screen and (max-width: 991px) {
.wl-fac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-fac-tile:last-child:nth-child(2n+1) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
}
@media screen and (max-width: 767px) {
.wl-fac { padding-bottom: 70px; }
.wl-fac-grid { grid-template-columns: 1fr; }
.wl-fac-tile, .wl-fac-tile:last-child:nth-child(2n+1) { grid-column: auto; aspect-ratio: 4 / 3; }
.wl-fac-cap { padding: 22px 22px 20px; }
.wl-fac-name { font-size: 24px; }
.wl-fac-text { max-height: none; opacity: 1; margin-top: 8px; }
.wl-fac-text p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
.wl-fac-img, .wl-fac-text { transition: none; }
}
/* ---- Join Us: davet metni + basvuru kutusu -------------------------------
Metin solda, basvuru sagda bir kart olarak duruyor; tek kolonda ikisi alt
alta uzuyor ve sag taraf bos kaliyordu. */
.join-page .join-intro p:last-child { margin-bottom: 0; }
.join-card {
background-color: #f8f5f0;
border: 1px solid #ece7de;
padding: 40px 38px;
text-align: center;
}
.join-card .jc-icon { display: inline-block; color: #aa8453; }
.join-card .jc-icon svg { width: 42px; height: 42px; display: block; }
.join-card .jc-title {
font-family: 'Gilda Display', serif;
font-size: 26px;
margin: 18px 0 0;
color: #232323;
}
.join-card .jc-rule {
display: block; width: 46px; height: 1px;
background-color: #aa8453; opacity: .6;
margin: 18px auto 22px;
}
.join-card .jc-steps {
list-style: none; margin: 0 0 28px; padding: 0;
text-align: left; display: flex; flex-direction: column; gap: 16px;
}
.join-card .jc-steps li {
display: flex; align-items: flex-start; gap: 14px;
color: #6b6459; font-size: 15px; line-height: 1.55;
}
.join-card .jc-step-icon {
flex: 0 0 auto; color: #aa8453; margin-top: 2px;
}
.join-card .jc-step-icon svg { width: 20px; height: 20px; display: block; }
.join-card .jc-btn { display: inline-block; }
.join-card .jc-note {
color: #8f8674; font-size: 13px; line-height: 1.5;
margin: 26px 0 0;
}
@media screen and (min-width: 992px) {
.join-page .join-aside { padding-left: 30px; }
}
@media screen and (max-width: 991px) {
.join-page .join-aside { margin-top: 45px; }
.join-card { padding: 34px 26px; }
}
/* =====================================================================
Bistrot Lago Blu — brief: klasik restoran değil, sosyal buluşma noktası.
Fotoğraf havuzu %86 dikey (2:3), yatay yalnızca 15 kare. Bu yüzden düzen
dikey-öncelikli: yatay görsel yalnızca konum bandında kullanılıyor.
Tema global kuralı img{width:100%;height:auto} oranı kısıtlamadığı için
her slotta aspect-ratio + object-fit zorunlu; aksi hâlde 2:3 bir kare
kolonu ekran boyunun 1.5 katına çıkarıyor.
Seçiciler torun (descendant) yazıldı: PictureTagHelper her ![]()
'i
ile sarıyor ve "> img" doğrudan-çocuk kuralları eşleşmiyor.
===================================================================== */
/* --- Giriş: 7/5, sağda dikey görsel ----------------------------------- */
/* Alt alta düşünce (<768px) max-height görselin genişliğini de daraltır; sola yaslı kalmasın, ortalanır. */
.bistrot-intro .bl-intro-figure {
margin: 0 auto;
aspect-ratio: 2 / 3;
max-height: 560px;
overflow: hidden;
}
.bistrot-intro .bl-intro-figure img {
width: 100%; height: 100%;
object-fit: cover;
}
/* --- Bar & aperitivo: metin + iki kaydırmalı dikey kare ---------------- */
/* Asimetri, ikinci karenin aşağı kaydırılmasından geliyor (About deseni). */
.bl-aperitivo .bl-ap-shot figure {
margin: 0;
aspect-ratio: 2 / 3;
overflow: hidden;
}
.bl-aperitivo .bl-ap-shot img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.bl-aperitivo .bl-ap-shot:hover img { transform: scale(1.05); }
@media screen and (min-width: 992px) {
.bl-aperitivo .bl-ap-shot-a { margin-top: 40px; }
.bl-aperitivo .bl-ap-shot-b { margin-top: 110px; }
.bl-aperitivo .bl-ap-text { padding-right: 40px; }
}
@media screen and (max-width: 991px) {
.bl-aperitivo .bl-ap-shot { margin-top: 30px; }
}
/* --- Teras: ana görsel yatay, üzerinde thumbnail şeridi ---------------- */
/* Tema'nın .section-padding2'si yalnızca ALT boşluk veriyor (padding: 0 0 120px).
Bu bölüm iki dolu bölümün arasında durduğu için üstte de aynı nefes gerekiyor;
aksi hâlde krem zeminli aperitivo bölümüne yapışıyor. */
.bl-terrace { padding-top: 120px; }
@media screen and (max-width: 767px) {
.bl-terrace { padding-top: 70px; }
}
.bl-terrace .fac-media { position: relative; }
.bl-terrace .fac-media img { width: 100%; height: 100%; object-fit: cover; }
/* --- Konum: tam genişlik bant, tek yatay görsel ------------------------ */
.bl-location {
min-height: 460px;
padding: 110px 0;
background-size: cover;
background-position: center;
}
.bl-location .section-subtitle,
.bl-location .section-title,
.bl-location p { color: #fff; }
.bl-location .section-title { margin-bottom: 18px; }
.bl-location p { max-width: 640px; }
@media screen and (max-width: 767px) {
.bl-location { min-height: 0; padding: 80px 0; }
}
/* --- Sezonlar: yan yana iki dikey blok -------------------------------- */
.bl-seasons .bl-season-figure {
position: relative;
margin: 0 0 22px;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.bl-seasons .bl-season-figure img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s ease;
}
.bl-seasons .bl-season:hover .bl-season-figure img { transform: scale(1.04); }
.bl-seasons .bl-season-figure figcaption {
position: absolute; left: 0; bottom: 0;
padding: 8px 18px;
background-color: #aa8453; color: #fff;
font-family: 'Barlow Condensed', sans-serif;
font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
}
.bl-seasons .bl-season h4 {
font-family: 'Gilda Display', serif;
font-size: 24px; margin-bottom: 12px; color: #232323;
}
@media screen and (max-width: 767px) {
.bl-seasons .bl-season + .bl-season { margin-top: 45px; }
}
/* --- Galeri: kaydırmalı asimetrik ızgara ------------------------------ */
/* Dikey kareler için 3 kolon; 2. ve 5. hücre aşağı kaydırılıp ritim kırılıyor.
Saf CSS grid — isotope/owl kullanılmadığı için lazy loading de güvenli. */
.bl-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: start;
}
.bl-grid .bl-cell {
display: block;
aspect-ratio: 2 / 3;
overflow: hidden;
cursor: zoom-in;
}
.bl-grid .bl-cell img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.bl-grid .bl-cell:hover img { transform: scale(1.05); }
@media screen and (min-width: 992px) {
.bl-grid .bl-cell:nth-child(3n + 2) { margin-top: 56px; }
.bl-grid .bl-cell:nth-child(6n + 4) { aspect-ratio: 3 / 4; }
}
@media screen and (max-width: 991px) {
.bl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bl-grid .bl-cell:nth-child(2n) { margin-top: 34px; }
}
@media screen and (max-width: 575px) {
.bl-grid { grid-template-columns: 1fr; }
.bl-grid .bl-cell { margin-top: 0 !important; }
}
/* =====================================================================
Ristorante GIOIA — brief: otel restoranı alt sayfası değil, kendi kimliği
olan restoran sayfası. Düzenler Bistrot Lago Blu'dan bilinçli ayrışır:
Bistrot yatay bantlar ve kaydırmalı ızgara kullanıyor; GIOIA tam ekran
giriş + yapışkan görsel + koyu kart şeridi + yatay ray kullanıyor.
Görsel havuzu %80 dikey (75/94) olduğu için slotların çoğu 2:3.
Seçiciler torun yazıldı: PictureTagHelper her img'i picture ile sarıyor.
===================================================================== */
/* --- Hero: logo + tam ekran görsel ------------------------------------- */
/* Logo negatif varyant (koyu plaka üzerine krem) olduğu için hero koyu
overlay taşıyor; krem zeminde bu logo okunmaz. */
.gi-hero {
min-height: 78vh;
padding: 180px 0 120px;
background-size: cover;
background-position: center;
}
.gi-hero-inner { color: #fff; }
/* Genişlik piksel cinsinden: PictureTagHelper img'i ile sarıyor ve
picture'ın display:contents olması yüzde tabanlı max-width'i sıfır tabanlı
hesaplatıyor (logo 320px yerine 220px kalıyordu). */
.gi-hero-logo {
width: 320px;
height: auto;
margin: 0 auto 28px;
display: block;
}
.gi-hero-title {
font-family: "Gilda Display", serif;
font-size: 46px; line-height: 1.2;
color: #fff; margin-bottom: 18px;
text-wrap: balance;
}
.gi-hero-inner p {
color: rgba(255, 255, 255, .82);
max-width: 620px; margin: 0 auto;
}
@media screen and (max-width: 767px) {
.gi-hero { min-height: 0; padding: 150px 0 90px; }
.gi-hero-title { font-size: 32px; }
.gi-hero-logo { width: 220px; }
}
/* --- Yaklaşım: yapışkan dikey görsel, yanında akan metin ---------------- */
.gi-approach .gi-ap-figure {
margin: 0;
aspect-ratio: 2 / 3;
overflow: hidden;
}
.gi-approach .gi-ap-figure img { width: 100%; height: 100%; object-fit: cover; }
@media screen and (min-width: 992px) {
/* Görsel metin boyunca sabit kalır — Bistrot'ta böyle bir hareket yok. */
.gi-approach .gi-ap-media { position: sticky; top: 120px; }
.gi-approach .gi-ap-text { padding-top: 10px; }
}
@media screen and (max-width: 991px) {
.gi-approach .gi-ap-text { margin-top: 35px; }
}
.gi-approach .gi-ap-strip {
display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap;
}
.gi-approach .gi-ap-strip a {
width: 92px; height: 122px;
overflow: hidden; cursor: zoom-in;
}
.gi-approach .gi-ap-strip img { width: 100%; height: 100%; object-fit: cover; }
/* --- Açık mutfak: kart şeridi ------------------------------------------ */
/* Krem zemin: yaklaşım ve yemekler bölümleri beyaz olduğu için üç bölüm arka
arkaya aynı zeminde kalmasın — sayfa boyunca beyaz/krem ritmi sürsün. */
.gi-kitchen { background-color: #f8f5f0; padding: 110px 0; }
.gi-kitchen-row {
display: flex; gap: 0;
align-items: stretch;
}
.gi-kitchen-card { flex: 1 1 0; min-width: 0; position: relative; }
.gi-kitchen-card + .gi-kitchen-card { border-left: 1px solid #ece7de; }
.gi-kc-media { aspect-ratio: 2 / 3; overflow: hidden; }
.gi-kc-media img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(22%);
transition: filter .6s ease, transform .8s ease;
}
.gi-kitchen-card:hover .gi-kc-media img { filter: none; transform: scale(1.04); }
.gi-kc-body { padding: 28px 30px 0; }
.gi-kc-eyebrow {
display: block;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
color: #aa8453; margin-bottom: 8px;
}
.gi-kc-body h4 {
font-family: "Gilda Display", serif;
font-size: 26px; color: #232323; margin-bottom: 12px;
}
.gi-kc-body p { color: #6b6459; margin-bottom: 0; }
@media screen and (max-width: 991px) {
.gi-kitchen { padding: 80px 0; }
.gi-kitchen-row { flex-direction: column; gap: 45px; }
.gi-kitchen-card + .gi-kitchen-card { border-left: 0; }
.gi-kc-media { aspect-ratio: 4 / 3; }
}
/* --- Yemekler: yatay kaydırmalı ray ------------------------------------ */
/* Bistrot'ta CSS grid var; burada tek satırda kaydırma. */
.gi-dishes { padding-bottom: 90px; }
.gi-dish-rail {
display: flex; gap: 16px;
overflow-x: auto;
padding: 0 0 18px 40px;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.gi-dish-rail::-webkit-scrollbar { height: 4px; }
.gi-dish-rail::-webkit-scrollbar-thumb { background: #d8d0c4; }
.gi-dish-rail .gi-dish {
flex: 0 0 auto;
width: 260px; aspect-ratio: 2 / 3;
overflow: hidden; cursor: zoom-in;
scroll-snap-align: start;
}
.gi-dish-rail .gi-dish img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .7s ease;
}
.gi-dish-rail .gi-dish:hover img { transform: scale(1.05); }
/* Ritim: her üçüncü kare daha geniş ve farklı oranda — düz şeridi kırar. */
.gi-dish-rail .gi-dish:nth-child(3n) { width: 320px; aspect-ratio: 3 / 4; }
@media screen and (max-width: 767px) {
.gi-dish-rail { padding-left: 20px; }
.gi-dish-rail .gi-dish { width: 200px; }
.gi-dish-rail .gi-dish:nth-child(3n) { width: 240px; }
}
/* --- Menüler: koyu zeminde sekmeler ------------------------------------ */
/* Temanın .restaurant-menu bileşeni owl'a bağlı (3 sekmede loop klon üretiyor)
ve global ".item" seçicisi kullanıyor; bu yüzden kendi sekmemiz yazıldı. */
.gi-menus { background-color: #f8f5f0; padding: 110px 0; }
.gi-tabs {
display: flex; justify-content: center; flex-wrap: wrap;
gap: 10px; margin: 34px 0 46px;
}
.gi-tab {
background: none;
border: 1px solid #ddd5c8;
color: #6b6459;
font-family: "Barlow Condensed", sans-serif;
font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase;
padding: 12px 26px;
transition: all .3s ease;
}
.gi-tab:hover { color: #232323; border-color: #c9bda9; }
.gi-tab.active { color: #fff; border-color: #aa8453; background-color: #aa8453; }
.gi-panel { display: none; }
.gi-panel.active { display: block; }
.gi-menu-row { margin-bottom: 26px; }
.gi-menu-row h5 {
font-family: "Gilda Display", serif;
font-size: 21px; color: #232323; margin-bottom: 8px;
}
.gi-menu-row p { color: #6b6459; margin-bottom: 0; }
.gi-menus-cta { margin-top: 24px; }
/* --- Half board: krem zeminde vurgu ------------------------------------ */
/* Menüler bölümü krem olduğu için burası beyaz — iki krem blok yan yana
gelmesin, aradaki sınır kaybolmasın. */
.gi-halfboard { padding: 110px 0; }
.gi-halfboard .gi-hb-mark { display: block; color: #aa8453; margin-bottom: 18px; }
.gi-halfboard .gi-hb-mark svg { width: 34px; height: 34px; }
.gi-halfboard .gi-hb-media figure {
margin: 0; aspect-ratio: 3 / 4; overflow: hidden;
}
.gi-halfboard .gi-hb-media img { width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 991px) {
.gi-halfboard { padding: 80px 0; }
.gi-halfboard .gi-hb-media { margin-top: 40px; }
}
/* --- Menü PDF bandı ---------------------------------------------------- */
.gi-menupdf { padding-top: 100px; padding-bottom: 100px; }
/* --- Sabit masa ayırtma düğmesi (sol alt) --------------------------------
Sayfadaki "Reserve your table" düğmeleri ekran dışındayken görünür (betik Gioia.cshtml'de).
Sağ altta temanın yukarı çık düğmesi (30 px) var; aynı boşlukla sola konur. Katman: sabit menünün (100)
üstünde, mobil menü (1035), rezervasyon paneli (1060+) ve çerez bandının altında; band açıksa betik
düğmeyi bandın üstüne kaldırır. Görünüm temanın butn-dark düğmesiyle aynı. */
.gi-reserve-float {
position: fixed; left: 30px; bottom: 30px; z-index: 1000;
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
background: #ab8a62; color: #fff;
font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 400;
letter-spacing: 3px; text-transform: uppercase; line-height: 1.2;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
opacity: 0; visibility: hidden; transform: translateY(20px);
transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .3s ease;
}
.gi-reserve-float.on { opacity: 1; visibility: visible; transform: none; }
.gi-reserve-float:hover, .gi-reserve-float:focus-visible { background: #222; color: #fff; }
.gi-reserve-float:focus-visible { outline: 2px solid #ab8a62; outline-offset: 3px; }
.gi-reserve-float i { font-size: 16px; letter-spacing: 0; }
@media (max-width: 575px) {
.gi-reserve-float { left: 15px; bottom: 15px; padding: 11px 16px; font-size: 14px; letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.gi-reserve-float { transition: none; }
}
/* --- Marka işareti (yıldızların yerine) -------------------------------- */
/* Brief: "Şu aşamada web sitesinde yıldız kullanılmamalı. 4 yıldız için resmi
denetim ve onay süreci bekleniyor." Başlık üstündeki 5'li yıldız grupları
otelin logosundaki dağ silueti ile değiştirildi — _BrandMark partial'ı.
Rengi currentColor değil sabit gold: hem krem/beyaz bölümlerde hem koyu
overlay'li banner ve CTA bloklarında okunuyor. */
/* Genişlik açıkça veriliyor: display:block yapılsa da içerik genişliği
sıfır kalıyor ve ortalama (margin auto) çalışmıyordu. */
.brand-mark {
display: block;
width: 48px;
color: #aa8453;
margin-bottom: 14px;
}
.brand-mark svg { width: 48px; height: 20px; display: block; }
/* Ortalanmış bağlamlarda (banner caption, içerik-yok bloğu) ortada dursun. */
.text-center .brand-mark,
.caption .brand-mark,
.content-missing .brand-mark { margin-left: auto; margin-right: auto; }
.content-missing .brand-mark { margin-bottom: 16px; opacity: .55; }
/* Koyu zeminli bloklarda (rezervasyon bandı, slider caption) tema metni beyaza
çeviriyor; işaret currentColor kullandığı için oraya uyum sağlıyor — bilerek
böyle, koyu zeminde gold yerine beyaz daha okunur. */
/* =====================================================================
Chi siamo / About — brief: "kim, nerede, bugün ne sunuyor, neden farklı;
kısa ve güven veren". Brief bu sayfaya sayfa akışı ÖNERMİYOR, düzen serbest.
Bistrot (.bl-*) ve GIOIA (.gi-*) düzenlerinden ayrışması için buradaki
omurga farklı: yan yana ikili dikey kare, tam genişlik konum görseli,
kaydırmalı ikili yatay kare.
Seçiciler torun yazıldı: PictureTagHelper her img'i picture ile sarıyor.
===================================================================== */
/* --- Giriş: metin + iki kaydırmalı dikey kare -------------------------- */
/* Kayma yönü karakter bölümünün tersi: burada İLK kare aşağıda, orada ikinci.
Aynı sayfada iki kez aynı ritim tekrarlanmasın. */
.ab-story .ab-story-pair { display: flex; gap: 16px; align-items: flex-start; }
.ab-story .ab-story-pair figure {
margin: 0; flex: 1 1 0;
aspect-ratio: 2 / 3;
overflow: hidden;
}
.ab-story .ab-story-pair img { width: 100%; height: 100%; object-fit: cover; }
.ab-story .ab-story-pair .ab-st-a { margin-top: 58px; }
@media screen and (max-width: 991px) {
.ab-story .ab-story-media { margin-top: 40px; }
}
@media screen and (max-width: 575px) {
.ab-story .ab-story-pair { gap: 10px; }
.ab-story .ab-story-pair .ab-st-a { margin-top: 30px; }
}
/* --- Karakter: yan yana iki dikey kare, biri kaydırmalı ---------------- */
.ab-character .ab-ch-pair { display: flex; gap: 16px; align-items: flex-start; }
.ab-character .ab-ch-pair figure {
margin: 0; flex: 1 1 0;
aspect-ratio: 2 / 3;
overflow: hidden;
}
.ab-character .ab-ch-pair img { width: 100%; height: 100%; object-fit: cover; }
/* İki kare aynı hizada — kayma bilerek YOK. Kaydırmalı ritim giriş bölümünde
(.ab-story-pair) kullanılıyor; burada hizalı duruş tercih edildi. */
@media screen and (max-width: 991px) {
.ab-character .ab-ch-text { margin-top: 40px; }
}
@media screen and (max-width: 575px) {
.ab-character .ab-ch-pair { gap: 10px; }
}
/* --- Konum: tam genişlik görsel + iki mevsim kartı --------------------- */
.ab-location { padding-bottom: 110px; }
/* Yükseklik doğrudan veriliyor: aspect-ratio + max-height birlikte kullanılınca
tarayıcı GENİŞLİĞİ de kısıtlıyordu (1920px ekranda görsel 1120px kalıp sağda
boşluk bırakıyordu). Artık tam genişlik, yükseklik ekrana göre ölçekleniyor. */
.ab-location .ab-loc-hero {
margin: 0 0 60px;
width: 100%;
height: clamp(300px, 40vw, 560px);
overflow: hidden;
}
.ab-location .ab-loc-hero img { width: 100%; height: 100%; object-fit: cover; }
.ab-location .ab-loc-seasons {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 28px; margin-top: 30px;
}
.ab-location .ab-loc-season h5 {
font-family: "Barlow Condensed", sans-serif;
font-size: 16px; letter-spacing: 2px; text-transform: uppercase;
color: #aa8453; margin-bottom: 8px;
}
.ab-location .ab-loc-season p { color: #6b6459; margin-bottom: 0; }
@media screen and (max-width: 767px) {
.ab-location { padding-bottom: 70px; }
.ab-location .ab-loc-hero { aspect-ratio: 3 / 2; margin-bottom: 40px; }
.ab-location .ab-loc-seasons { grid-template-columns: 1fr; gap: 22px; }
.ab-location .ab-loc-body { margin-top: 22px; }
}
/* --- 2025 yenilemesi: kaydırmalı ikili yatay kare ---------------------- */
.ab-renewal .ab-rn-media figure {
margin: 0;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.ab-renewal .ab-rn-media img { width: 100%; height: 100%; object-fit: cover; }
@media screen and (min-width: 992px) {
/* İkinci kare öne ve aşağı kayıyor — Bistrot'taki dikey kayma değil,
yatay format üzerinde bindirme. */
.ab-renewal .ab-rn-media { position: relative; padding-bottom: 70px; }
.ab-renewal .ab-rn-a { width: 76%; }
.ab-renewal .ab-rn-b {
width: 52%;
position: absolute; right: 0; bottom: 0;
border: 8px solid #fff;
}
}
@media screen and (max-width: 991px) {
.ab-renewal .ab-rn-media { margin-top: 35px; }
.ab-renewal .ab-rn-b { margin-top: 16px; }
}
/* --- Olanaklar: 9 madde, sade ızgara ---------------------------------- */
/* Öğeler dikey akar: ikon, başlık, metin alt alta. display:block açıkça
veriliyor — tema h6/span kuralları bunları yan yana akıtıyordu. */
.ab-facilities .ab-fac-item {
margin-bottom: 40px;
padding-right: 20px;
}
.ab-facilities .ab-fac-icon {
display: block;
font-size: 32px; line-height: 1;
color: #aa8453; margin: 0 0 16px;
}
.ab-facilities .ab-fac-item h6 {
display: block;
font-family: "Gilda Display", serif;
font-size: 19px; line-height: 1.3;
color: #232323; margin: 0 0 8px;
}
.ab-facilities .ab-fac-item p {
display: block;
color: #6b6459; margin: 0;
font-size: 15px; line-height: 1.6;
}
/* =====================================================================
Camere / Rooms — liste sayfası
Brief 03: "kategorileri birbirinden net ayırmak", "yalnızca kategori
genelinde gerçekten geçerli olan özellikler", "metinler kısa tutulmalı;
kullanıcı ilk ekranda kategori farkını anlayabilmeli", "oda büyüklüğü,
kapasite ve yatak tipi görsel ikonlarla desteklenebilir".
Düzen ayrımı: About/Bistrot/GIOIA'da metin ve görsel YAN YANA duruyor.
Burada künye kartı hero'nun ÜZERİNE biniyor — sayfanın kendine ait ritmi
bu bindirme; kategori sırası değişince yön de dönüyor.
Seçiciler torun yazılı: PictureTagHelper her img'i picture ile sarıyor.
===================================================================== */
/* --- Giriş: solda metin, sağda kategori dizini ------------------------- */
.rm-intro .rm-intro-text p { color: #6b6459; margin-bottom: 0; }
.rm-index .rm-index-label {
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #aa8453; margin-bottom: 18px;
}
.rm-index-list { list-style: none; margin: 0; padding: 0; }
.rm-index-list li { border-top: 1px solid #e2dbd0; }
.rm-index-list li:last-child { border-bottom: 1px solid #e2dbd0; }
.rm-index-list a {
display: flex; align-items: baseline; justify-content: space-between;
gap: 20px; padding: 17px 0;
color: #232323; transition: color .25s ease;
}
.rm-index-list a:hover { color: #aa8453; }
.rm-index-name {
font-family: "Gilda Display", serif;
font-size: 22px; line-height: 1.2;
}
.rm-index-meta {
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
color: #8c8578; white-space: nowrap;
}
.rm-index-meta span + span::before { content: " · "; }
@media screen and (max-width: 991px) {
.rm-index { margin-top: 45px; }
}
@media screen and (max-width: 575px) {
.rm-index-list a { flex-direction: column; gap: 4px; }
.rm-index-name { font-size: 20px; }
}
/* --- Kategori bloğu: geniş hero + üzerine binen künye kartı ------------ */
.rm-cat { padding: 90px 0; }
/* Görsel mutlak konumlanıyor: PictureTagHelper her img'i picture ile sarıyor ve
picture{display:contents} olduğu için img'deki height:100% çözümlenemiyordu
(görsel 520px kutudan 1200px'e taşıyordu). Mutlak konum picture'ı atlar. */
.rm-cat-media { position: relative; margin: 0; overflow: hidden; }
.rm-cat-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s ease;
}
.rm-cat-media:hover img { transform: scale(1.04); }
/* Hareket azaltma tercihini kullanan ziyaretçide yakınlaşma çalışmasın. */
@media (prefers-reduced-motion: reduce) {
.rm-cat-media img { transition: none; }
.rm-cat-media:hover img { transform: none; }
}
/* Kart yığında görselin ÜSTÜNDE durmalı. .rm-cat-media, içindeki mutlak konumlu
görsel için position:relative aldı; konumlanmış bir kutu, DOM sırası ne olursa
olsun statik kutunun üstüne boyanır — bindirme bandında fotoğraf kartı örtüyordu.
Kartı da konumlandırıp z-index veriyoruz. (Sabit menü z-index:100, etkilenmez.) */
.rm-cat-card {
position: relative;
z-index: 1;
background-color: #fff;
}
.rm-cat-eyebrow {
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
color: #aa8453; margin-bottom: 10px;
}
.rm-cat-name {
font-family: "Gilda Display", serif;
font-size: 34px; line-height: 1.2;
margin: 0 0 22px;
}
.rm-cat-name a { color: #232323; transition: color .25s ease; }
.rm-cat-name a:hover { color: #aa8453; }
/* Künye — ikon + etiket + değer; etiket küçük, değer okunur. */
.rm-specs {
list-style: none; margin: 0 0 22px; padding: 22px 0;
border-top: 1px solid #e6e0d6; border-bottom: 1px solid #e6e0d6;
}
.rm-specs li {
display: grid;
grid-template-columns: 26px 1fr;
align-items: baseline;
column-gap: 12px;
padding: 7px 0;
}
.rm-specs li i {
grid-row: span 2;
align-self: center;
font-size: 19px; line-height: 1;
color: #aa8453;
}
.rm-spec-label {
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
color: #9a9287;
}
.rm-spec-value {
display: block;
font-size: 16px; line-height: 1.4;
color: #232323;
}
/* Ayrıştıran özellikler — ortak servisler burada değil, "Tüm Odalarda"da. */
.rm-cat-feats { list-style: none; margin: 0 0 26px; padding: 0; }
.rm-cat-feats li {
position: relative;
padding-left: 20px; margin-bottom: 9px;
color: #6b6459; font-size: 15px; line-height: 1.6;
}
.rm-cat-feats li::before {
content: ""; position: absolute;
left: 0; top: 10px;
width: 6px; height: 6px;
background-color: #aa8453;
transform: rotate(45deg);
}
.rm-cat-link {
display: inline-block;
font-family: "Barlow Condensed", sans-serif;
font-size: 16px; letter-spacing: 2px; text-transform: uppercase;
color: #aa8453;
}
.rm-cat-link i { margin-left: 7px; font-size: 13px; vertical-align: middle; }
.rm-cat-link:hover { color: #232323; }
@media screen and (min-width: 992px) {
/* Hero geniş, künye kartı üstüne biniyor. İkisi de AYNI grid hücresinde:
satır yüksekliği kendiliğinden ikisinin büyüğü kadar olur, böylece uzun
künyeli bir kategoride kart bölüm dolgusuna taşmaz (mutlak konumda taşıyordu). */
.rm-cat-inner { display: grid; grid-template-columns: 1fr; }
.rm-cat-media {
grid-area: 1 / 1;
width: 72%; height: 520px;
align-self: center; justify-self: start;
}
.rm-cat-card {
grid-area: 1 / 1;
width: 42%;
align-self: center; justify-self: end;
padding: 46px 44px;
box-shadow: 0 18px 45px rgba(35, 35, 35, .09);
}
/* Çift sıradaki kategori ters yöne akar. */
.rm-cat.rm-flip .rm-cat-media { justify-self: end; }
.rm-cat.rm-flip .rm-cat-card { justify-self: start; }
}
@media screen and (max-width: 991px) {
.rm-cat { padding: 60px 0; }
.rm-cat-media { height: 320px; }
/* Kart artık bindirmiyor: kutu olarak değil, görselin altında akan metin olarak
duruyor — cream zeminli bloklarda beyaz şerit gibi görünmesin diye zemin saydam. */
.rm-cat-card { background-color: transparent; padding: 32px 0 0; }
.rm-cat-name { font-size: 29px; }
}
@media screen and (max-width: 575px) {
.rm-cat-media { height: 240px; }
.rm-cat-name { font-size: 26px; }
}
/* --- Tüm Odalarda: ortak servisler ------------------------------------ */
/* About'un olanak ızgarasıyla aynı yapı değil: burada ikon ve metin YAN YANA,
çünkü kalemler kısa ve liste okunacak, taranmayacak. */
/* Zemin beyaz bırakıldı: kategori blokları dönüşümlü cream olduğu için sonuncusu
cream ise ortak blok da cream olsaydı ikisi tek bir alan gibi görünürdü. */
.rm-common .rm-common-item {
display: grid;
grid-template-columns: 40px 1fr;
column-gap: 16px;
align-items: start;
padding: 22px 0;
border-top: 1px solid #e2dbd0;
}
.rm-common .rm-common-icon {
grid-row: span 2;
font-size: 26px; line-height: 1;
color: #aa8453;
margin-top: 3px;
}
.rm-common .rm-common-item h6 {
font-family: "Gilda Display", serif;
font-size: 18px; line-height: 1.3;
color: #232323; margin: 0 0 5px;
}
.rm-common .rm-common-item p {
color: #6b6459; margin: 0;
font-size: 15px; line-height: 1.6;
}
/* =====================================================================
Camera / Room detail — oda detay sayfası
Brief 03: "güçlü bir ana fotoğraf + 3-5 destek fotoğrafı", "metinler kısa;
kullanıcı ilk ekranda kategori farkını anlayabilmeli", "m² / kapasite / yatak
ikonlarla desteklenebilir"; site geneli: "fazla kutulu veya katalog hissinde
olmasın; bölümler fotoğraf, boşluk ve tipografi ile ayrılsın".
Banner sitenin diğer sayfalarıyla aynı (tema banner-header, 60vh); künye
hemen altındaki yatay levhada. Alt bölümler kendi düzenini korur: liste
sayfasının bindirmesini (.rm-*), GIOIA ve Bistrot'un şerit/sekme düzenlerini
tekrarlamaz. Koyu bölüm yok.
Seçiciler torun yazılı: PictureTagHelper her img'i picture ile sarıyor ve
picture{display:contents} olduğu için yüzde boyut / height:100% çözülmez.
===================================================================== */
/* --- Künye levhası: banner'ın hemen altında ---------------------------- */
/* Yatay dizilim; liste sayfasındaki dikey künye şeridinden bilinçli farklı.
Banner 60vh olduğu için levha 900px ekranda kaydırmadan görünür. */
.rd-plate {
border-bottom: 1px solid #e6e0d6;
padding: 22px 0 26px;
}
.rd-back {
display: inline-block;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #9a9287; margin-bottom: 18px;
transition: color .25s ease;
}
.rd-back i { margin-right: 7px; font-size: 12px; }
.rd-back:hover { color: #aa8453; }
.rd-plate-row {
display: flex; align-items: center; justify-content: space-between;
gap: 30px; flex-wrap: wrap;
}
.rd-specs {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap;
gap: 14px 44px;
}
.rd-specs li {
display: grid;
grid-template-columns: 26px auto;
align-items: baseline;
column-gap: 11px;
}
.rd-specs li i {
grid-row: span 2; align-self: center;
font-size: 19px; line-height: 1; color: #aa8453;
}
.rd-spec-label {
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
color: #9a9287;
}
.rd-spec-value {
display: block;
font-size: 16px; line-height: 1.4; color: #232323;
}
.rd-book {
flex: none;
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
color: #fff; background-color: #aa8453;
padding: 13px 30px;
transition: background-color .25s ease;
}
.rd-book:hover { background-color: #232323; color: #fff; }
@media screen and (max-width: 767px) {
.rd-plate-row { gap: 22px; }
.rd-specs { gap: 14px 26px; }
.rd-book { width: 100%; text-align: center; }
}
/* --- Gövde: özellikler solda, açıklama sağda ------------------------- */
.rd-feats-title {
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #aa8453; margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid #e6e0d6;
}
.rd-feats ul { list-style: none; margin: 0; padding: 0; }
.rd-feats li {
position: relative;
padding-left: 20px; margin-bottom: 12px;
color: #232323; font-size: 16px; line-height: 1.5;
}
.rd-feats li::before {
content: ""; position: absolute;
left: 0; top: 10px;
width: 6px; height: 6px;
background-color: #aa8453;
transform: rotate(45deg);
}
.rd-text p { color: #6b6459; font-size: 17px; line-height: 1.8; }
.rd-text p:last-child { margin-bottom: 0; }
@media screen and (max-width: 991px) {
.rd-text { margin-top: 40px; }
}
/* --- Destek fotoğrafları: tek sıra şerit ------------------------------ */
/* Kolon sayısı kare sayısına göre; --n Razor'dan geliyor (1-5). */
.rd-strip { padding: 0 0 110px; }
/* Ardındaki "diğer kategoriler" de beyaz zeminde: iki bölüm boşluğu üst üste binmesin. */
.rd-strip + .rd-others { padding-top: 0; }
.rd-strip-grid {
display: grid;
grid-template-columns: repeat(var(--n, 4), 1fr);
gap: 14px;
}
.rd-shot {
position: relative; margin: 0;
height: 230px; overflow: hidden;
}
.rd-shot img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s ease;
}
.rd-shot:hover img { transform: scale(1.04); }
@media screen and (max-width: 991px) {
.rd-strip { padding-bottom: 70px; }
/* Satır içi --n'i ezmek için doğrudan özelliği yeniden tanımlıyoruz;
satır içi stil yalnızca değişkeni set ediyor, özelliği değil. */
.rd-strip-grid { grid-template-columns: repeat(2, 1fr); }
.rd-shot { height: 200px; }
}
@media screen and (max-width: 575px) {
.rd-strip-grid { grid-template-columns: 1fr; gap: 12px; }
.rd-shot { height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
.rd-shot img { transition: none; }
.rd-shot:hover img { transform: none; }
}
/* --- Diğer kategoriler ------------------------------------------------- */
.rd-rule-head {
display: flex; align-items: center; gap: 22px;
margin-bottom: 42px;
}
.rd-rule-label {
flex: none;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #aa8453;
}
.rd-rule-line { flex: 1 1 auto; height: 1px; background-color: #e6e0d6; }
.rd-others .rd-other { display: block; }
.rd-other-media {
position: relative; margin: 0 0 18px;
height: 240px; overflow: hidden;
}
.rd-other-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s ease;
}
.rd-other:hover .rd-other-media img { transform: scale(1.04); }
.rd-other-name {
font-family: "Gilda Display", serif;
font-size: 24px; line-height: 1.2;
color: #232323; margin: 0 0 8px;
transition: color .25s ease;
}
.rd-other:hover .rd-other-name { color: #aa8453; }
/* Künye öğeleri arasında "·"; satır kırılınca yeni satırın başındaki ayraç görünmesin diye her öğe
ayracını önünde taşır, liste ayraç genişliği kadar sola kayar ve o şerit clip-path ile kesilir.
Şerit (.7em ≈ 10px) sütun iç boşluğundan (12px) dar: telefonda ekranın soluna taşmaz. */
.rd-other-meta {
display: flex; flex-wrap: wrap;
margin-left: -.7em; clip-path: inset(0 0 0 .7em);
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
color: #8c8578; margin-bottom: 14px;
}
/* Ayraç öğenin sol iç boşluğunda: öğe kendi içinde satır kırarsa devam satırı da kesilen şeridin dışında başlar. */
.rd-other-meta span { position: relative; padding-left: .7em; }
.rd-other-meta span::before { content: "\00b7"; position: absolute; left: 0; width: .7em; text-align: center; }
.rd-other-link {
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
color: #aa8453;
}
.rd-other-link i { margin-left: 7px; font-size: 12px; vertical-align: middle; }
@media screen and (max-width: 767px) {
.rd-others .col-md-4 + .col-md-4 { margin-top: 42px; }
}
@media (prefers-reduced-motion: reduce) {
.rd-other-media img { transition: none; }
.rd-other:hover .rd-other-media img { transform: none; }
}
/* =====================================================================
Esperienze / Experiences
Brief 06: "aktivite listesi değil, Cervinia'da yıl boyunca yapılabilecekleri
keşfetmeye yarayan görsel bir rehber"; "daha dijital, hareketli, keşif odaklı".
Sayfanın mesajı: burası yalnızca bir otel değil, dört mevsimin başlangıç noktası.
Düzen: manifesto → deneyimler → iletişim. Deneyimler panelden gelir (Experience)
ve mevsime göre ayrılmadan, panel sırasıyla tek akışta anlatılır; ay aralıkları
ExperienceCalendar'da. Koyu bölüm yok. Seçiciler torun yazılı: PictureTagHelper
her img'i picture ile sarıyor ve picture{display:contents} olduğu için görseller
mutlak konumlu.
===================================================================== */
.ex-eyebrow {
display: inline-block;
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
color: #aa8453;
}
/* --- Manifesto --------------------------------------------------------- */
.ex-manifesto { padding: 110px 0 90px; }
.ex-manifesto-grid {
display: grid; grid-template-columns: 1.15fr .85fr;
gap: 70px; align-items: end;
}
.ex-manifesto-title {
font-family: "Gilda Display", serif;
font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1;
color: #232323; margin: 14px 0 0;
}
.ex-manifesto-title span { color: #aa8453; }
.ex-manifesto-text p { font-size: 17px; line-height: 1.8; color: #6b6459; margin: 0 0 16px; }
.ex-manifesto-count {
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #232323;
border-top: 1px solid #e6e0d6; padding-top: 16px; margin-top: 6px;
}
/* --- Deneyimler: büyük görseller, asimetrik ------------------------------ */
/* Kart ızgarası yerine her deneyim kendi büyük görseliyle anlatılır; ritim üçlü.
Bant: tam genişlik görsel, ek görseller bandın altına taşarak biner (zemin
renginde çerçeveyle "kesik" etkisi). Ardından iki ikili düzen: büyük görsel +
yanında metin ve aşağı kaydırılmış küçük görseller; yön dönüşümlü. */
.ex-list { padding: 0 0 110px; }
.ex-story { margin-top: 110px; }
.ex-list .ex-story:first-child { margin-top: 0; }
.ex-story-kicker {
display: block;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #aa8453; margin-bottom: 12px;
}
.ex-story-title {
font-family: "Gilda Display", serif;
font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1;
color: #232323; margin: 0 0 16px;
}
.ex-story-desc { font-size: 17px; line-height: 1.75; color: #6b6459; margin: 0; max-width: 46ch; }
.ex-story-foot { margin-top: 22px; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.ex-shot { position: relative; margin: 0; overflow: hidden; }
.ex-shot img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.4s ease;
}
.ex-shot:hover img { transform: scale(1.03); }
/* Her fotoğraf deneyimin galerisini (lightbox) açar: bağlantı kutuyu doldurur. Klavye odağı
içeriden çizilir; kutu overflow:hidden olduğu için dıştan çizgi kırpılırdı. */
.ex-zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.ex-zoom:focus-visible { outline: 3px solid #aa8453; outline-offset: -3px; }
/* Bant */
.ex-shot--band { height: clamp(300px, 42vw, 560px); }
.ex-story--band .ex-story-body {
display: grid; grid-template-columns: 5fr 7fr;
column-gap: 60px; align-items: start;
}
.ex-story--band .ex-story-text { padding-top: 40px; }
.ex-insets {
position: relative; z-index: 1;
display: flex; gap: 14px; align-items: flex-start;
margin-top: -120px;
}
.ex-shot--inset { flex: 1 1 0; height: 300px; outline: 12px solid #fff; }
.ex-shot--inset + .ex-shot--inset { height: 230px; margin-top: 70px; }
/* İkili düzen */
.ex-story--split {
display: grid; grid-template-columns: 7fr 5fr;
column-gap: 60px; align-items: stretch;
}
.ex-story--split.is-reversed { grid-template-columns: 5fr 7fr; }
.ex-story--split.is-reversed .ex-shot--main { order: 2; }
.ex-shot--main { height: clamp(380px, 46vw, 620px); }
.ex-story-side {
display: flex; flex-direction: column; justify-content: space-between; gap: 44px;
}
.ex-story--split .ex-story-text { padding-top: 20px; }
.ex-smalls { display: flex; gap: 14px; align-items: flex-end; transform: translateY(60px); }
.ex-shot--small { flex: 1 1 0; height: 250px; }
.ex-shot--small + .ex-shot--small { height: 190px; }
.ex-link {
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
color: #aa8453; border-bottom: 1px solid currentColor;
}
.ex-link::after { content: "\00a0\2197"; }
.ex-link:hover { color: #232323; }
/* Ay aralıkları yaklaşık: listenin dibinde not. İkili düzenin küçük görselleri 60px aşağı
kaydırılmış (transform, akışı etkilemez); not onların üstüne binmesin. */
.ex-note {
margin: 110px 0 0; padding-top: 20px;
border-top: 1px solid #e6e0d6;
font-size: 14px; color: #7d756a;
}
/* --- Genel iletişim çağrısı ---------------------------------------------- */
.ex-contact { background: #f8f5f0; padding: 84px 0; }
.ex-contact-grid {
display: grid; grid-template-columns: 1fr auto;
gap: 30px 60px; align-items: center;
}
.ex-contact-title {
font-family: "Gilda Display", serif;
font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2;
color: #232323; margin: 10px 0 12px;
}
.ex-contact p { max-width: 58ch; margin: 0; font-size: 17px; color: #6b6459; }
.ex-contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ex-contact-mail {
font-family: "Barlow Condensed", sans-serif;
font-size: 15px; letter-spacing: 1.5px;
color: #232323; border-bottom: 1px solid #e6e0d6;
}
.ex-contact-mail:hover { color: #aa8453; }
@media screen and (max-width: 991px) {
.ex-manifesto { padding: 70px 0 56px; }
.ex-manifesto-grid { grid-template-columns: 1fr; gap: 26px; }
.ex-list { padding-bottom: 70px; }
.ex-story { margin-top: 70px; }
.ex-story--band .ex-story-body,
.ex-story--split,
.ex-story--split.is-reversed { grid-template-columns: 1fr; }
.ex-story--split.is-reversed .ex-shot--main { order: 0; }
.ex-story--band .ex-story-text { padding-top: 28px; }
.ex-insets { margin-top: 28px; }
.ex-shot--inset { outline: 0; height: 240px; }
.ex-shot--inset + .ex-shot--inset { height: 240px; margin-top: 0; }
.ex-story-side { gap: 28px; margin-top: 28px; }
.ex-story--split .ex-story-text { padding-top: 0; }
.ex-smalls { transform: none; }
.ex-shot--small, .ex-shot--small + .ex-shot--small { height: 220px; }
.ex-note { margin-top: 56px; }
.ex-contact-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 575px) {
.ex-shot--inset, .ex-shot--inset + .ex-shot--inset,
.ex-shot--small, .ex-shot--small + .ex-shot--small { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
.ex-shot img { transition: none; }
.ex-shot:hover img { transform: none; }
}
/* =====================================================================
Anasayfa — A · Editoryal ritim
Brief 01: konaklama, gastronomi, wellness ve Cervinia tek bakışta; kutulu ya da
katalog hissi yok, bölümleri fotoğraf, boşluk ve tipografi ayırır. Hero (slider +
rezervasyon çubuğu) temanınki; bu blok altındaki bölümleri biçimler. Metinler ve
görseller "home" sayfasından, oda kategorileri Room kayıtlarından gelir.
Sıra: 1964 → odalar → GIOIA + Bistrot → wellness → Cervinia (deneyimler).
Seçiciler torun yazılı: PictureTagHelper img'leri picture{display:contents} ile
sardığı için görseller boyutlu kutunun içinde mutlak konumlu.
===================================================================== */
.hm-eyebrow {
display: inline-block;
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
color: #aa8453; margin-bottom: 14px;
}
.hm-title {
font-family: "Gilda Display", serif;
font-size: clamp(34px, 3.6vw, 48px); line-height: 1.12;
color: #232323; margin: 0 0 20px;
}
.hm-title--xl { font-size: clamp(36px, 4vw, 54px); margin-bottom: 0; }
.hm-cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #232323; padding-bottom: 6px; border-bottom: 1px solid #aa8453;
transition: color .25s ease;
}
.hm-cta::after { content: "\2192"; letter-spacing: 0; transition: transform .25s ease; }
.hm-cta:hover { color: #aa8453; }
.hm-cta:hover::after { transform: translateX(4px); }
.hm-cta:focus-visible { outline: 2px solid #aa8453; outline-offset: 4px; }
.hm-cta--light,
.hm-cta--light:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .7); }
.hm-shot { position: relative; margin: 0; overflow: hidden; }
.hm-shot img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
/* --- 1964 --------------------------------------------------------------- */
/* Arkadaki silik yıl rakamı bölümün konusu; metnin altında kalır. */
.hm-since { padding: 150px 0 170px; overflow: hidden; }
.hm-since-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 90px; align-items: center; }
.hm-since-text { position: relative; z-index: 0; }
.hm-year {
position: absolute; z-index: -1; top: -150px; left: -18px;
font-family: "Gilda Display", serif;
font-size: clamp(150px, 18vw, 240px); line-height: 1; letter-spacing: -3px;
color: #f1ebe2; user-select: none;
}
.hm-since-title {
font-family: "Gilda Display", serif;
font-size: clamp(40px, 4.8vw, 64px); line-height: 1.1;
color: #232323; margin: 0 0 26px;
}
.hm-lede { max-width: 46ch; margin: 0 0 32px; }
.hm-lede p { font-size: 18px; line-height: 1.8; color: #6b6459; margin: 0; }
.hm-lede p + p { margin-top: 14px; }
.hm-since-media { position: relative; }
.hm-since-big { aspect-ratio: 5 / 6; }
/* Küçük görsel büyüğün köşesine biner; beyaz çerçeve ikisini ayırır. */
.hm-since-small {
position: absolute; width: 42%; aspect-ratio: 1;
left: -80px; bottom: -80px; outline: 14px solid #fff;
}
/* --- Odalar (1B) ---------------------------------------------------------- */
/* Kategori listesi solda (container'ın sol yarısı); seçilen kategorinin fotoğrafı sayfanın
ortasından ekranın sağ kenarına kadar, bölümün üstüne, sağına ve altına boşluksuz oturur.
Fotoğraflar üst üste durur, seçilen opaklıkla belirir; gizlenen visibility ile odaktan ve
ekran okuyucudan da çıkar. Bilgi doğrudan fotoğrafın üzerinde, alttan koyulaşan geçişle. */
.hm-rooms {
position: relative; overflow: hidden;
display: flex; align-items: center;
min-height: clamp(580px, 76vh, 720px);
background-color: #f8f5f0;
}
.hm-rooms > .container { position: relative; z-index: 1; width: 100%; }
.hm-rooms-left { max-width: calc(50% - 70px); padding: 100px 0; }
.hm-rooms-left .hm-title { margin-bottom: 28px; }
.hm-rooms-list { list-style: none; margin: 0 0 36px; padding: 0; border-top: 1px solid #e6e0d6; }
.hm-rooms-list button {
display: flex; width: 100%; align-items: baseline; gap: 16px;
background: none; border: 0; border-bottom: 1px solid #e6e0d6;
padding: 12px 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.hm-rooms-list b {
font-family: "Gilda Display", serif; font-weight: 400;
font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1;
color: #c9c0b2; transition: color .3s ease;
}
.hm-rooms-list button[aria-selected="true"] b,
.hm-rooms-list button:hover b { color: #232323; }
.hm-rooms-list span {
margin-left: auto;
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 2px; color: #7d756a;
transition: color .3s ease;
}
.hm-rooms-list button[aria-selected="true"] span { color: #aa8453; }
.hm-rooms-list button:focus-visible { outline: 2px solid #aa8453; outline-offset: 2px; }
.hm-rooms-view { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; }
.hm-room-slide {
position: absolute; inset: 0;
opacity: 0; visibility: hidden;
transition: opacity .6s ease, visibility 0s linear .6s;
}
.hm-room-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hm-room-slide .hm-shot { position: absolute; inset: 0; }
.hm-room-slide::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(20, 16, 12, .8), rgba(20, 16, 12, .25) 42%, rgba(20, 16, 12, 0) 62%);
}
.hm-rooms-info { position: absolute; z-index: 1; left: 56px; bottom: 56px; max-width: 480px; }
.hm-rooms-info .hm-eyebrow { color: #dcc3a0; }
.hm-rooms-tag {
font-family: "Gilda Display", serif;
font-size: clamp(30px, 2.8vw, 40px); line-height: 1.2;
color: #fff; margin: 0 0 12px;
}
/* Ayraç düzeni .rd-other-meta ile aynı: satır başına düşen "·" kesilir. */
.hm-spec {
display: flex; flex-wrap: wrap;
margin-left: -24px; clip-path: inset(0 0 0 24px);
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
color: rgba(255, 255, 255, .82); margin-bottom: 22px;
}
.hm-spec span { position: relative; padding-left: 24px; }
.hm-spec span::before { content: "\00b7"; position: absolute; left: 0; width: 24px; text-align: center; opacity: .55; }
/* --- GIOIA + Bistrot Lago Blu ---------------------------------------------- */
/* İki eşit blok; karakter farkı tonla: GIOIA akşam (metin koyulaşan fotoğrafın
üzerinde), Bistrot gün ışığı (metin açık kartta). */
.hm-dine-head { text-align: center; padding: 140px 15px 60px; }
.hm-dine-head .hm-title { margin: 0; }
.hm-dine {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
height: clamp(540px, 76vh, 720px);
}
.hm-dine article { position: relative; overflow: hidden; }
/* Mekânlardan biri kapatılırsa kalan blok tam genişlik olur. */
.hm-dine > article:only-child { grid-column: 1 / -1; }
.hm-dine .hm-shot { position: absolute; inset: 0; }
.hm-dine-gioia::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(18, 14, 10, .9), rgba(18, 14, 10, .15) 62%, rgba(18, 14, 10, 0));
}
.hm-dine-cap { position: absolute; z-index: 1; left: 52px; bottom: 52px; max-width: 430px; }
.hm-dine-cap h3 { font-family: "Gilda Display", serif; line-height: 1.12; margin: 0 0 14px; }
.hm-dine-cap p { font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
.hm-dine-gioia .hm-eyebrow { color: #dcc3a0; }
.hm-dine-gioia h3 { color: #fff; font-size: clamp(32px, 3.2vw, 44px); }
.hm-dine-gioia p { color: rgba(255, 255, 255, .84); }
.hm-dine-bistrot .hm-dine-cap { background-color: #fff; padding: 38px 40px 36px; }
.hm-dine-bistrot .hm-eyebrow { color: #35606b; }
.hm-dine-bistrot h3 { color: #232323; font-size: clamp(30px, 2.8vw, 40px); }
.hm-dine-bistrot p { color: #6b6459; }
/* --- Wellness ------------------------------------------------------------ */
.hm-well { padding: 150px 0 0; }
.hm-well-img { height: clamp(440px, 64vh, 660px); }
.hm-well-card {
position: relative; z-index: 1;
max-width: 540px; margin: -200px 0 0 auto; padding: 54px 58px 50px;
background-color: #fff;
}
.hm-well-card p { font-size: 16px; line-height: 1.75; color: #6b6459; margin: 0 0 26px; }
/* --- Cervinia: başlık + 4 görsel (alt yazısız, çiftler aşağı kaydırılmış) ---- */
.hm-seasons { padding: 150px 0 170px; }
.hm-seasons-head {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
align-items: end; margin-bottom: 64px;
}
.hm-seasons-head p { font-size: 16px; line-height: 1.75; color: #6b6459; margin: 0 0 22px; }
.hm-seasons-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hm-season { margin: 0; }
.hm-season:nth-child(even) { transform: translateY(60px); }
.hm-season-img { aspect-ratio: 3 / 4; }
@media screen and (max-width: 991px) {
.hm-since { padding: 90px 0 130px; }
.hm-lede { max-width: none; } /* fotoğraf alta indi, metin tam genişlik */
.hm-since-grid,
.hm-seasons-head { grid-template-columns: 1fr; gap: 50px; }
.hm-year { top: -90px; }
.hm-since-small { left: auto; right: -10px; bottom: -60px; width: 40%; }
.hm-rooms { display: block; min-height: 0; }
.hm-rooms-left { max-width: none; padding: 90px 0 44px; }
.hm-rooms-view { position: relative; left: auto; height: 480px; }
.hm-rooms-info { left: 24px; right: 24px; bottom: 28px; max-width: none; }
.hm-dine-head { padding: 100px 15px 44px; }
.hm-dine { grid-template-columns: 1fr; height: auto; }
.hm-dine article { min-height: 520px; }
.hm-dine-cap { left: 24px; right: 24px; bottom: 24px; }
.hm-dine-bistrot .hm-dine-cap { padding: 30px 28px; }
.hm-well { padding-top: 100px; }
.hm-well-card { max-width: none; margin: -80px 0 0; padding: 40px 30px; }
.hm-seasons { padding: 100px 0 130px; }
.hm-seasons-row { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 575px) {
.hm-seasons-row { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.hm-cta, .hm-cta::after,
.hm-rooms-list b, .hm-rooms-list span, .hm-room-slide { transition: none; }
}
/* =====================================================================
Anasayfa hero başlığı — her ekranda menünün altında kalır
Tema başlığı heronun tam ortasına koyup yazıyı yalnız genişliğe göre küçültüyordu; alçak
ekranlarda (992x558, yatay telefon) üst satırlar menünün arkasına giriyordu. Başlık artık
menünün alt kenarı (--hdr-h) ile heronun alt kenarı — şerit heronun içindeyse şeridin üstü
(--strip-h) — arasındaki alanda ortalanır. Yazı ekran yüksekliğiyle de küçülür, harf aralığı
yazıyla orantılı; alçak ekranlarda boşluklar daralır, en alçakta marka işareti gizlenir.
===================================================================== */
.header.slider-fade { --strip-h: 92px; }
.header.slider-fade .caption.v-middle {
top: var(--hdr-h); bottom: var(--strip-h);
display: flex; align-items: center; align-items: safe center;
padding: 16px 0; transform: none;
}
.header.slider-fade .caption h1 { font-size: clamp(26px, 6.5vh, 55px); letter-spacing: .27em; }
@media (max-width: 991.98px) {
.header.slider-fade { --strip-h: 88px; }
.header.slider-fade .caption h1 { font-size: clamp(22px, 7vh, 40px); }
}
@media (max-width: 767.98px) {
.header.slider-fade .caption h1 { font-size: clamp(20px, min(7.5vw, 7vh), 30px); }
}
@media (max-width: 767.98px), (max-height: 560px) {
.header.slider-fade { --strip-h: 0px; } /* şerit heronun altında */
}
@media (max-height: 820px) {
.header.slider-fade .caption h4 { margin: 12px 0; }
.header.slider-fade .caption .butn-light { margin-top: 20px !important; margin-bottom: 0 !important; }
}
@media (max-height: 460px) {
.header.slider-fade .caption .brand-mark { display: none; }
.header.slider-fade .caption h4 { margin: 0 0 8px; }
.header.slider-fade .caption h1 { margin-bottom: 8px; line-height: 1.3em; }
.header.slider-fade .caption .butn-light { margin-top: 14px !important; }
}
/* Hero ilk açılışta görünür alanı tam doldursun: telefonda 100vh tarayıcının araç çubuğunun
arkasına taşar (masaüstünde svh ile vh aynı). */
@supports (height: 100svh) {
.slider-fade .owl-item { height: 100svh; }
.header.slider-fade { min-height: 100svh; }
}
/* =====================================================================
Anasayfa hero'su — rezervasyon şeridi (D · ince şerit)
Heronun dibinde yarı saydam koyu şerit: tarih aralığı tek alanda (gece sayısıyla),
kişiler ve çerçeveli düğme; fotoğrafın önünü en az kapatan yön. Takvim ve kişi
paneli body'ye eklenir (hero overflow:hidden) ve alanın üstünde açılır. 768px'ten dar
ve alçak ekranlarda şerit heronun altına iner (hero ekranı tam doldurur) ve alanlara
dokununca alttan panel açılır (takvim tek ay + kişiler).
Davranış: js/booking-strip.js. Düğme seçicileri iki sınıflı: temanın button:hover
kuralı çerçeveyi sıfırlıyor.
===================================================================== */
.bs-strip {
position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
background: rgba(16, 13, 10, .5);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, .16);
}
.bs-strip .container {
display: grid; grid-template-columns: 1.6fr 1fr auto;
align-items: stretch; min-height: 84px;
}
.bs-strip .bs-field {
display: flex; flex-direction: column; justify-content: center; min-width: 0;
padding: 14px 26px; margin: 0;
border: 0; border-left: 1px solid rgba(255, 255, 255, .14);
background: none; color: #fff; text-align: left; line-height: 1.4; cursor: pointer;
}
.bs-strip .bs-field:first-child { border-left: 0; padding-left: 0; }
.bs-label {
font-family: "Barlow Condensed", sans-serif;
font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #dcc3a0;
}
.bs-value {
align-self: flex-start; max-width: 100%; margin-top: 3px;
font-family: "Gilda Display", serif; font-size: 21px; line-height: 1.25; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.bs-value.is-empty { font-family: "Barlow", sans-serif; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.bs-sub { margin-top: 1px; font-size: 12.5px; color: rgba(255, 255, 255, .66); white-space: nowrap; }
.bs-strip .bs-field:hover .bs-value { border-bottom-color: rgba(220, 195, 160, .6); }
.bs-strip .bs-field[aria-expanded="true"] .bs-value { border-bottom-color: #aa8453; }
.bs-strip .bs-submit {
align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 50px; padding: 0 28px; margin-left: 24px;
border: 1px solid #aa8453; background: none; color: #fff; cursor: pointer;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase; line-height: 1;
transition: background-color .25s ease, border-color .25s ease;
}
.bs-strip .bs-submit::after { content: "\2192"; letter-spacing: 0; transition: transform .25s ease; }
.bs-strip .bs-submit:hover { border: 1px solid #aa8453; background: #aa8453; }
.bs-strip .bs-submit:hover::after { transform: translateX(4px); }
.bs-strip .bs-field:focus-visible,
.bs-strip .bs-submit:focus-visible { outline: 2px solid #dcc3a0; outline-offset: -2px; }
.bs-short { display: none; }
/* --- Açılır paneller (takvim, kişiler) ve alttan açılan panel --------------- */
.bs-panel { color: #232323; font-family: "Barlow", sans-serif; font-size: 15px; line-height: 1.5; }
.bs-panel:focus { outline: none; }
.bs-pop {
position: absolute; z-index: 1050; top: 0; left: 0;
background: #fff; border: 1px solid #e6e0d6;
box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
animation: bs-in .18s ease both;
}
@keyframes bs-in { from { opacity: 0; transform: translateY(6px); } }
.bs-cal { position: relative; padding: 18px 24px 16px; }
.bs-cal-nav {
position: absolute; top: 16px; left: 20px; right: 20px;
display: flex; justify-content: space-between; pointer-events: none;
}
.bs-panel .bs-cal-nav button {
pointer-events: auto; width: 34px; height: 34px; padding: 0;
border: 1px solid #e6e0d6; background: #fff; color: #232323;
font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .2s ease;
}
.bs-panel .bs-cal-nav button:hover:not(:disabled) { border: 1px solid #aa8453; }
.bs-panel .bs-cal-nav button:disabled { opacity: .3; cursor: default; }
.bs-cal-months { display: grid; grid-template-columns: repeat(2, 252px); gap: 0 32px; }
.bs-cal-title {
font-family: "Gilda Display", serif; font-size: 19px; line-height: 38px;
text-align: center; color: #232323; margin-bottom: 6px;
}
.bs-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bs-cal-grid span {
font-family: "Barlow Condensed", sans-serif;
font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
color: #8b8377; text-align: center; padding: 2px 0 8px;
}
.bs-panel .bs-day {
position: relative; height: 36px; padding: 0; border: 0; background: none;
font-family: "Barlow", sans-serif; font-size: 14px; line-height: 1; color: #232323; cursor: pointer;
}
.bs-panel .bs-day:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #aa8453; }
.bs-panel .bs-day:disabled { color: #cfc8bd; cursor: default; }
.bs-panel .bs-day.is-in,
.bs-panel .bs-day.is-preview { background: #f3ece1; }
.bs-panel .bs-day.is-start,
.bs-panel .bs-day.is-end { background: #aa8453; color: #fff; }
.bs-panel .bs-day.is-today::after {
content: ""; position: absolute; left: 50%; bottom: 5px;
width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #aa8453;
}
.bs-panel .bs-day.is-start::after,
.bs-panel .bs-day.is-end::after { background: #fff; }
.bs-panel .bs-day:focus-visible { outline: 2px solid #232323; outline-offset: -2px; }
.bs-cal-foot {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: 50px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6e0d6;
font-size: 14px; color: #6b6459;
}
.bs-cal-hint { transition: color .3s ease; }
.bs-cal-hint b { font-family: "Gilda Display", serif; font-weight: 400; font-size: 17px; color: #232323; }
.bs-cal-hint.is-attn { color: #aa8453; animation: bs-attn .6s ease 2; }
@keyframes bs-attn { 50% { opacity: .35; } }
.bs-cal-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.bs-panel .bs-link {
padding: 6px 0; border: 0; background: none; cursor: pointer;
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.4; color: #8b8377;
}
.bs-panel .bs-link:hover:not(:disabled) { color: #232323; }
.bs-panel .bs-link:disabled { opacity: .4; cursor: default; }
.bs-panel .bs-ok {
padding: 9px 18px; border: 0; background: #232323; color: #fff; cursor: pointer;
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.4;
transition: background-color .2s ease;
}
.bs-panel .bs-ok:hover { background: #aa8453; }
.bs-panel .bs-link:focus-visible,
.bs-panel .bs-ok:focus-visible,
.bs-panel .bs-cal-nav button:focus-visible,
.bs-panel .bs-step button:focus-visible { outline: 2px solid #aa8453; outline-offset: 2px; }
.bs-guests { width: 300px; padding: 8px 22px 16px; }
.bs-g-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.bs-g-row + .bs-g-row { border-top: 1px solid #e6e0d6; }
.bs-g-row b { font-family: "Gilda Display", serif; font-weight: 400; font-size: 19px; color: #232323; }
.bs-step { display: flex; align-items: center; gap: 12px; }
.bs-panel .bs-step button {
width: 34px; height: 34px; padding: 0; border-radius: 50%;
border: 1px solid #e6e0d6; background: #fff; color: #232323;
font-size: 18px; line-height: 1; cursor: pointer; transition: border-color .2s ease;
}
.bs-panel .bs-step button:hover:not(:disabled) { border: 1px solid #aa8453; }
.bs-panel .bs-step button:disabled { opacity: .3; cursor: default; }
.bs-step output { min-width: 18px; text-align: center; font-family: "Gilda Display", serif; font-size: 19px; }
.bs-guests-foot { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #e6e0d6; }
.bs-scrim { position: fixed; inset: 0; z-index: 1060; background: rgba(0, 0, 0, .4); }
.bs-sheet {
position: fixed; z-index: 1070; left: 0; right: 0; bottom: 0;
max-height: 88vh; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px));
background: #fff; box-shadow: 0 -18px 40px rgba(0, 0, 0, .25);
animation: bs-up .24s ease both;
}
@keyframes bs-up { from { opacity: 0; transform: translateY(24px); } }
.bs-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bs-sheet-title { font-family: "Gilda Display", serif; font-size: 24px; line-height: 1.2; margin: 0; color: #232323; }
.bs-sheet .bs-x {
width: 42px; height: 42px; margin-right: -10px; padding: 0; border: 0; background: none;
font-size: 28px; line-height: 1; color: #232323; cursor: pointer;
}
.bs-sheet .bs-cal { padding: 8px 0 0; }
.bs-sheet .bs-cal-nav { top: 10px; left: 0; right: 0; }
.bs-sheet .bs-cal-months { grid-template-columns: 1fr; }
.bs-sheet .bs-day { height: 42px; font-size: 15px; }
.bs-sheet .bs-guests { width: auto; padding: 4px 0 0; }
.bs-sheet .bs-cta {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; height: 54px; margin-top: 12px; border: 0;
background: #aa8453; color: #fff; cursor: pointer;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase; line-height: 1;
}
.bs-sheet .bs-cta::after { content: "\2192"; letter-spacing: 0; }
.bs-sheet .bs-cta:hover { background: #8a6a40; }
.bs-sheet .bs-x:focus-visible,
.bs-sheet .bs-cta:focus-visible { outline: 2px solid #232323; outline-offset: 2px; }
html.bs-lock, html.bs-lock body { overflow: hidden; }
/* Heronun altında: 768px'ten dar her ekran ve alçak ekran (yatay telefon, 992x558). Hero ekranı tam
doldurur, şerit aşağı kaydırınca görünür; tasarım aynı. Takvim ve kişiler bu ekranlarda alttan
açılan panelde (booking-strip.js). */
@media (max-width: 767.98px), (max-height: 560px) {
.bs-strip { position: relative; background: #2b241d; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 991.98px) {
.bs-strip .bs-field { padding: 12px 18px; }
.bs-value { font-size: 19px; }
.bs-strip .bs-submit { margin-left: 16px; padding: 0 20px; }
.bs-long { display: none; }
.bs-short { display: inline; }
}
/* 576px'ten dar: tarih ve kişiler yan yana, düğme altında tam genişlik. */
@media (max-width: 575.98px) {
.bs-strip .container { grid-template-columns: 1.35fr 1fr; padding-bottom: 18px; }
.bs-strip .bs-field { padding: 14px 0 14px 16px; }
.bs-value { font-size: 18px; }
.bs-strip .bs-submit { grid-column: 1 / -1; width: 100%; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.bs-pop, .bs-sheet, .bs-cal-hint.is-attn { animation: none; }
.bs-value, .bs-strip .bs-submit, .bs-strip .bs-submit::after { transition: none; }
}
/* =====================================================================
Hata sayfaları (404, diğer 4xx, 500) — Views/Shared/ErrorPage.cshtml
Fotoğrafsız koyu bölüm (navbar sayfa başında saydam ve beyaz): büyük durum kodu çizgi rakam, ortada metin
ve düğmeler. Altında açık şeritte üst menünün sayfaları ("Forse cercavi"), sonra footer.
===================================================================== */
.err-hero {
position: relative; overflow: hidden;
display: flex; align-items: center;
min-height: min(100vh, 920px);
padding: 170px 0 110px;
background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(170, 132, 83, .18), rgba(170, 132, 83, 0) 70%), #1b1712;
text-align: center;
}
.err-hero > .container { width: 100%; }
.err-inner { max-width: 640px; margin: 0 auto; }
.err-code {
display: block; margin-bottom: 14px;
font-family: "Gilda Display", serif; font-weight: 400;
font-size: clamp(120px, 26vw, 290px); line-height: .9; letter-spacing: -2px;
color: transparent; -webkit-text-stroke: 1px rgba(201, 164, 110, .55);
user-select: none;
}
.err-eyebrow {
margin: 0 0 12px;
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 4px; text-transform: uppercase; line-height: 1.6;
color: #c9a46e;
}
.err-title {
margin: 0 0 18px;
font-size: clamp(32px, 5vw, 52px); line-height: 1.15;
color: #fff;
}
.err-text {
max-width: 46ch; margin: 0 auto 34px;
font-size: 16px; line-height: 1.75; text-wrap: pretty;
color: rgba(255, 255, 255, .72);
}
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.err-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 50px; padding: 0 30px;
font-family: "Barlow Condensed", sans-serif;
font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: #fff; background: #aa8453; border: 1px solid #aa8453;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.err-btn:hover, .err-btn:focus-visible { color: #fff; background: #c19d60; border-color: #c19d60; }
.err-btn--line { background: transparent; border-color: rgba(255, 255, 255, .45); }
.err-btn--line:hover, .err-btn--line:focus-visible { color: #c9a46e; background: transparent; border-color: #c9a46e; }
.err-links { padding: 48px 0 54px; background: #f8f5f0; text-align: center; }
.err-links-title {
margin: 0 0 16px;
font-family: "Barlow Condensed", sans-serif;
font-size: 13px; letter-spacing: 4px; text-transform: uppercase; line-height: 1.6;
color: #aa8453;
}
.err-links-list {
display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px;
max-width: 860px; margin: 0 auto; padding: 0; list-style: none;
}
.err-links-list a {
padding: 6px 0;
font-family: "Gilda Display", serif; font-size: 19px; line-height: 1.4;
color: #232323; border-bottom: 1px solid transparent;
transition: color .25s ease, border-color .25s ease;
}
.err-links-list a:hover, .err-links-list a:focus-visible { color: #aa8453; border-bottom-color: #aa8453; }
@media (max-width: 767px) {
.err-hero { min-height: 0; padding: 150px 0 80px; }
.err-actions .err-btn { flex: 1 1 100%; }
.err-links { padding: 40px 0 44px; }
.err-links-list { gap: 2px 20px; }
.err-links-list a { font-size: 18px; }
}