/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

:root {
    /* Varsayilanlar — layout head'inde settings.brand_color_* ile override edilir */
    --brand-primary: #978667;
    --brand-secondary: #24262d;
}

/* Statik sayfalar (Hakkimizda, Gizlilik, KVKK, Cerez) icin Sayfalar > [duzenle] >
   Hero Gorseli — DB'de kaydediliyordu ama static-page.php hicbir zaman
   render etmiyordu (kullanicinin "sadece ana sayfaya koyabiliyorum" bildirimi).
   .parallax_section_1 (70vh) bir icerik sayfasi icin fazla uzun oldugundan
   kendi, daha kisa bantı kullanilir. */
.page-hero-banner {
    position: relative;
    height: 460px;
    overflow: hidden;
}
@media (max-width: 767px) {
    .page-hero-banner {
        height: 320px;
    }
}

/* Hakkimizda ve Konum ve Ulasim sayfalari haritasi: .lazy-map'in "tikla-yukle"
   oynat ikonu harita baglaminda video oynaticiya benziyormus gibi durup kafa
   karistiriyordu — burada dogrudan gomulu iframe kullanilir (native
   loading="lazy" ile hala viewport'a yaklasana kadar yuklenmez). Once sadece
   Hakkimizda'da uygulanmisti, ayni sikayet Konum ve Ulasim sayfasi icin de
   geldiginde oraya da tasindi. */
.map-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
}
.map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ayarlar > Gorunum > yazi tipi (Bolum 9.12). --brand-font sadece bir secim
   yapildiginda layout head'inde tanimlanir; tanimli degilse tema varsayilani
   (Montserrat, style.css) degismeden kalir. */
body {
    font-family: var(--brand-font, "Montserrat", Helvetica, sans-serif);
}

/* Panelden yuklenen logo (Ayarlar > Genel) tema kutusunun sabit 135x45 oranina
   uymayabilir — object-fit ile oranı bozmadan kutunun icine sigdirilir. */
.logo_normal img,
.logo_sticky img,
.logo_panel img {
    width: 135px;
    height: 45px;
    object-fit: contain;
}

/* Footer: tema varsayilani soluk bir fotografi (.footer_bg) ustune koyup
   asagi dogru karartiyordu — bu, footer.php'de kaldirildi (duz antrasit
   zemin istendi). Footer_bg'nin 230px'lik ust bosluguna karsilik gelen
   -80px'lik negatif margin (.move_content) da artik gereksiz/hatali
   goruntu birakiyor, sade bir ust bosluk ile degistirildi. */
footer.flat-footer .move_content {
    margin-top: 0;
    padding-top: 90px;
}

/* Ana sayfa hero'sundaki WhatsApp butonu (.btn_1.outline) tema varsayilaniyla
   tamamen saydam + koyu (--brand-secondary) yazi/kenarlikla geliyor — hero'nun
   koyu video zemininde neredeyse görünmez oluyordu, sadece hover'da (gri dolgu)
   okunur hale geliyordu. Sürekli okunabilir olması için hafif saydam beyaz bir
   dolgu (hero'daki response-time-badge ile ayni "cam" gorunumu) verildi. */
.hero .hero_ctas a.btn_1.outline {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.hero .hero_ctas a.btn_1.outline:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: #fff;
    color: #fff;
}

/* Ana sayfa disindaki tum sayfalarda (Odalarimiz, Galeri, Hakkimizda...) header
   arkasinda koyu bir hero/video olmadigi icin, tema varsayilani seffaf+beyaz
   yazi (sadece kaydirinca .sticky ile koyulasiyor) sayfanin duz beyaz zeminiyle
   birlesip okunamaz hale geliyordu — sayfa yuklendigi haliyle (kaydirmadan once)
   de .sticky ile ayni gorunumu (beyaz zemin + koyu yazi) sabit uygular. */
header.fixed_header.inner-page-header {
    background-color: #fff;
    border-bottom: 1px solid #d9e1e6;
}
header.fixed_header.inner-page-header .logo_normal {
    display: none;
}
header.fixed_header.inner-page-header .logo_sticky {
    display: inline-block;
}
header.fixed_header.inner-page-header nav ul li a {
    color: #333;
}
header.fixed_header.inner-page-header nav ul li a.animated_link:before {
    background-color: #333;
}
header.fixed_header.inner-page-header nav ul li a.btn_1 {
    color: #fff;
}

/* Menu ogeleri (Ana Sayfa, Odalarimiz, ..., Rezervasyon Talebi butonu, TR/EN)
   tema varsayilani 25px bosluk ile masaustunde tek satira sigmiyor, son oge
   (dil degistirici) asagi satira tasiyordu — bosluk daraltilarak duzeltildi. */
.header nav ul li,
header nav ul li {
    margin-left: 14px;
}

/* Mobil menu esigi (991px) ile rahat masaustu genisligi (~1450px) arasinda
   15px yazi + varsayilan boşluklarla menu (Ana Sayfa...SSS + telefon
   olmadan bile Rezervasyon Talebi butonu + TR/EN) tek satira sigmiyor —
   bu aralikta hem bosluk hem yazi/buton boyutu kademeli daraltiliyor. */
@media (min-width: 992px) and (max-width: 1449px) {
    header nav ul li {
        margin-left: 8px;
    }
    header nav ul li a {
        font-size: 11px;
    }
    header nav ul li a.btn_1 {
        padding: 10px 16px;
    }
}

/* Above-the-fold hero: 1366x768 ve 375x667'de scroll etmeden gorunmeli (Bolum 4.1) */
.hero.home-search {
    min-height: 100vh;
}

.hero .response-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 0.85rem;
    backdrop-filter: blur(2px);
}

.hero .hero_ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Hizli talep seridi (mini form) */
.quick-request-strip {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

@media (max-width: 991px) {
    .quick-request-strip {
        margin-top: -30px;
        border-radius: 0;
    }
}

.room-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.room-card figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.room-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.room-card:hover figure img {
    transform: scale(1.05);
}

.room-card .room-card-body {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.room-card .room-card-price {
    margin-top: auto;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 10px;
}

/* Oda karti meta satiri (kat / kapasite / m2) */
.room-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: #666;
    margin: 10px 0;
}

.room-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.room-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Oda detay: sticky rezervasyon kutusu (masaustu) */
.sticky-reservation-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 24px;
}

@media (min-width: 992px) {
    .sticky-reservation-box {
        position: sticky;
        top: 100px;
    }
}

.quick-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 20px 0;
}

.quick-info-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-secondary);
}

/* Sticky mobil CTA cubugu (Bolum 6) */
.sticky-mobile-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.sticky-mobile-cta .row {
    height: 64px;
    margin: 0;
}

.sticky-mobile-cta a {
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.72rem;
    color: var(--brand-secondary);
    text-decoration: none;
    border-right: 1px solid #eee;
}

.sticky-mobile-cta a:last-child {
    border-right: none;
    background: var(--brand-primary);
    color: #fff;
}

.sticky-mobile-cta i {
    font-size: 1.1rem;
}

@media (max-width: 991px) {
    .sticky-mobile-cta {
        display: block;
    }

    /* .sticky-mobile-cta yalnizca bu esikte gorunur oldugundan, altta bosluk
       ayirma da ayni esige bagli olmali — oncesinde masaustunde de (barin
       kendisi görunmedigi halde) footer'in altinda bos/acik renkli 64px'lik
       bir bosluk birakiyordu (kullanicinin bildirdigi "beyaz bosluk"). */
    body.has-sticky-cta {
        padding-bottom: 64px;
    }
}

/* Kapanis CTA bandi */
/* Kapanis CTA bandi footer ile ayni renkteydi (--brand-secondary) — art arda
   geldiklerinde (ana sayfa, odalarimiz, konum) aralarinda hic gorsel ayrim
   kalmiyor, tek bir koyu blok gibi birlesip "renk sorunu" olarak bildirildi.
   Griye yakin olmayan, markanin zaten kullandigi sicak ara ton (--brand-primary)
   ile ayristirildi. */
.closing-cta-band {
    background: var(--brand-primary);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

/* Dolu "Rezervasyon Talebi Oluştur" butonu sitenin her yerinde (header,
   hero) --brand-primary (altin/bej) renginde — ama bu bant zaten o rengi
   zemin olarak kullandigindan buton zeminle aynilasip kaybolurdu, once koyu
   (--brand-secondary) yapilmisti. Kullanici bunu "rengi sıkıntılı" diye
   bildirdi: agir, sitenin geri kalaniyla tutarsiz bir koyu blok gibi
   duruyordu. Bunun yerine temanin kendi "inverse" varyantiyla ayni mantik
   (beyaz zemin + koyu yazi) kullanilir — bantla net kontrast kurar, agir
   durmaz, sicak zeminde "one cikan" bir CTA hissi verir. */
.closing-cta-band .btn_1 {
    background: #fff;
    color: var(--brand-secondary);
}
.closing-cta-band .btn_1:hover {
    background: var(--brand-secondary);
    color: #fff;
}

/* Kapanis CTA bandindaki outline butonlar (Telefon + WhatsApp) tema
   varsayilaniyla tamamen saydam + koyu (--brand-secondary) yazi/kenarlikla
   geliyor — bandin kendisi zaten koyu olmayan sicak bir tonda (--brand-primary)
   oldugundan buton görünmez denecek kadar zayif kaliyor, sadece hover'da
   (gri dolgu) belli oluyordu. Hero'daki ayni sorun icin kullanilan "cam"
   dolgu burada da (aciklik farkli, zemin daha acik oldugundan biraz daha
   koyu) uygulanir. */
.closing-cta-band .hero_ctas a.btn_1.outline {
    background-color: rgba(36, 38, 45, 0.14);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}
.closing-cta-band .hero_ctas a.btn_1.outline:hover {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
}

/* Honeypot alani (Bolum 5.1) — ekran okuyucular ve gercek kullanicilar icin gorunmez */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Rezervasyon formu alan hatalari */
.field-error {
    color: #c0392b;
    font-size: 0.82rem;
    margin-top: 4px;
    display: block;
}

.is-invalid {
    border-color: #c0392b !important;
}

.trust-panel {
    background: #faf8f5;
    border-radius: 8px;
    padding: 24px;
}

.trust-panel ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

.trust-panel ul li {
    padding: 6px 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.char-counter {
    font-size: 0.78rem;
    color: #999;
    text-align: right;
    display: block;
}

/* Lazy harita (Bolum 4.6/4.7) — tiklanana kadar statik gorsel */
.lazy-map {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lazy-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
}

.lazy-map .lazy-map-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--brand-primary);
}

.distance-table td, .distance-table th {
    padding: 10px 14px;
}

/* Cerez onay banner'i (Bolum 7.8) */
.consent-banner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: #24262d;
    color: #fff;
    padding: 16px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.consent-banner.is-visible {
    display: flex;
}

.consent-banner__text {
    font-size: 0.85rem;
    flex: 1;
    min-width: 220px;
}

.consent-banner__text a {
    color: #fff;
    text-decoration: underline;
}

.consent-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    /* Sticky mobil CTA cubugunun (64px) ustunde konumlanir, ustune binmez */
    .consent-banner {
        bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Ana sayfa musteri yorumlari (.box_overlay): tema bu kutuyu sol-üstte 45px'de
   mutlak konumlu, dairesel bir musteri fotografi (.pic) icin tasarlamis —
   225px'lik sol bosluk o fotografa yer aciyordu. Bu proje musteri fotografi
   kullanmadigindan (.pic hicbir zaman render edilmiyor), 3 sutunlu (col-md-4)
   düzende kutu genisligi bu bosluga yetmiyor, yorum metni ~30px'lik bir
   seride sikisip yuzlerce satira bolunerek kutuyu binlerce piksel
   uzatiyordu ("musteri yorumlari buyuk sorunlu"). Fotografsiz kullanima
   uygun, simetrik bir ic bosluk ile degistirildi. */
.box_overlay {
    padding: 35px 30px;
}

/* Breadcrumb */
.breadcrumb-bar {
    padding: 14px 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow-x: auto;
}

.breadcrumb-bar a {
    color: var(--brand-secondary);
    text-decoration: none;
}

.breadcrumb-bar [aria-current="page"] {
    color: #888;
}