/*============================================================================================*/
/* Hotel Komana - Custom Styles                                                              */
/* Consolidated from inline <style> blocks across all PHP pages                              */
/*============================================================================================*/

/* ===========================================================================================
   1. HEADER & NAVIGATION
   =========================================================================================== */

.is-transitioned .slide-animated.three {
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
    padding: 0px;
    margin: 0px;
}

.logo-text .hotel {
    font-weight: 700;
}

.binbirdirek {
    letter-spacing: 2.6px;
}

header.fixed_header.sticky .popup-link a {
    position: absolute;
    display: block;
    right: 2%;
    top: 2px;
    background: #978667;
    color: #ffffff;
}

header.fixed_header.sticky .popup-link a:hover {
    background-color: #4b514d;
}

.popup-link a {
    position: absolute;
    display: block;
    right: 2%;
    top: 57px;
}

.nice-select {
    border: 0px;
}

a.btn_1, .btn_1 {
    position: relative;
}

li a.lang {
    padding: 6px 20px;
    margin-right: -20px;
    border: 1px solid;
    border-radius: 16px;
}

@media only screen and (min-width: 768px) {
    .logo-text {
        position: absolute;
        margin-left: 63px;
        top: 22px;
    }
    #header-padding.container-fluid {
        padding: 0px 80px;
    }
    header.sticky #header-padding.container-fluid {
        padding: 0px 50px;
    }
    #mobile-menu {
        display: none;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    .logo_normal img, .logo_sticky img {
        width: 70px;
    }
    #mainNav {
        margin-left: -45px;
    }
    header.fixed_header nav ul li a {
        font-size: 11px !important;
    }
    header nav ul li {
        margin-left: 10px !important;
    }
    a#rezerv {
        margin-left: -50px;
        font-size: 12px;
        padding: 12px;
    }
    a#contacts {
        font-size: 12px;
        top: 33px;
        padding: 8px 12px 8px 12px;
    }
    #mainNav a.btn_1, #mainNav .btn_1 {
        padding: 10px 12px 10px 12px;
        font-size: 12px;
    }
    .fixed_header.sticky #contacts {
        top: -9px;
    }
    #popup2 .margin_120_95 {
        padding-top: 60px;
    }
    #popup2 img.poplogo {
        margin-top: -70px !important;
        width: 80px;
    }
    #popup2 a.btn_1, #popup2 .btn_1 {
        padding: 12px 20px 12px 20px;
        font-size: 12px;
    }
    .box_facilities i {
        font-size: 2rem;
    }
    .box_facilities h3 {
        font-size: 1rem;
    }
    .detail-button {
        margin-top: -40px !important;
    }
    .pinned_over_content h2 {
        font-size: 2.5rem;
    }
    #rezerve a.btn_1, #rezerve .btn_1 {
        padding: 12px !important;
        font-size: 11px !important;
    }
    #header-padding.container-fluid {
        padding: 0px 60px !important;
    }
}

@media (max-width: 576px) {
    .logo_normal img, .logo_sticky img, .logo_panel img {
        width: auto;
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    #rezerve {
        display: none;
    }
    a#contacts-mobile.btn_1 {
        border: none;
        color: #fff !important;
        background-color: #978667 !important;
        outline: none;
        cursor: pointer;
        display: inline-flex;
        text-decoration: none;
        padding: 14px 25px 14px 25px !important;
        font-weight: 600;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        border-radius: 25px;
        align-items: center;
        justify-content: center;
        line-height: 2.5;
        height: 50px;
    }
    .logo_normal img, .logo_sticky img {
        width: 80px !important;
    }
    /* Hamburger vertically centered in the white band — absolute positioning
       relative to the fixed header makes it device-agnostic (works at any
       header height). #rezerve is hidden at this breakpoint, so no overlap. */
    /* NB: must out-specify the theme's `.fixed_header.sticky .hamburger_2
       { top:-30px !important }` (3 classes) — hence .always-sticky/.sticky here. */
    header.fixed_header.always-sticky .hamburger_2,
    header.fixed_header.sticky .hamburger_2 {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        z-index: 20;
    }
    /* Taller white header band so the logo + hamburger sit fully inside it */
    header.fixed_header.always-sticky,
    header.fixed_header.sticky {
        height: 96px;
    }
    header.fixed_header #header-padding.container-fluid,
    header.fixed_header #header-padding .row.align-items-center {
        height: 100%;
    }
    /* Logo vertically centred in the band too — `.row.align-items-center` alone
       left it ~7px low (so it didn't line up with the absolutely-centred
       hamburger). Absolute-centring the logo column matches the hamburger and
       the header centre exactly, in both states. Same scheme as the dardanelles
       header fix. */
    header.fixed_header #header-padding > .row > .col-3 {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: 62% !important;
        z-index: 21 !important;
    }
    #desktop-menu {
        display: none;
    }
    a.lang {
        padding: 0.35rem 0.65rem !important;
        margin: 0 0 10px 0;
        min-width: 100% !important;
        line-height: 2;
        height: 50px;
        font-size: 17px;
        font-weight: 600;
        align-items: center;
        color: #fff !important;
        background-color: #978667 !important;
        border-radius: 25px !important;
    }
}

/* ===========================================================================================
   2. POPUP / MODAL STYLES
   =========================================================================================== */

.popup-link {
    display: flex;
    flex-wrap: wrap;
}

.popup-link a {
    background: #ffffff;
    color: #978667;
    padding: 9px 25px 9px 25px;
    border-radius: 25px;
    font-size: 17px;
    cursor: pointer;
    margin: 20px;
    text-decoration: none;
    font-weight: 600;
}

.popup-link a:hover {
    background: #978667;
    color: #ffffff;
}

.popup-container {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
}

.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

.popup-content p {
    font-size: 17px;
    padding: 10px;
    line-height: 20px;
}

.popup-content a.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.popup-content a.close:hover {
    color: #333;
}

.popup-content span:hover,
.popup-content span:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popup-container:target {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.popup-container h3 {
    margin: 10px;
}

/* Popup animation variants */
.popup-style-2 { transform: scale(0.3); }
.popup-style-2:target { transform: scale(1); }
.popup-style-3 { left: 100%; }
.popup-style-3:target { left: 0; }
.popup-style-4 { transform: rotate(180deg); }
.popup-style-4:target { transform: rotate(0deg); }
.popup-style-5 { top: 100%; }
.popup-style-5:target { top: 0; }
.popup-style-6 { transform: scale(15.3); }
.popup-style-6:target { transform: scale(1); }
.popup-style-7 { transform: skewY(180deg); transition: all 0.7s ease-in-out; }
.popup-style-7:target { transform: skewY(0deg); }

/* Modal Overlay (index/tr homepage) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-image {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
    color: #333;
    line-height: 1;
}

.modal-close:hover {
    transform: scale(1.1);
    background-color: #f0f0f0;
}

.page-content {
    padding: 50px;
    text-align: center;
}

.reset-btn {
    margin-top: 20px;
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

.reset-btn:hover {
    background-color: #0056b3;
}

/* ===========================================================================================
   3. SLIDER & HERO STYLES
   =========================================================================================== */

@font-face {
    font-family: 'JavaCom';
    src: url('../fonts/JavaCom.ttf') format('truetype');
}

.slider-text {
    color: #ffffff;
    text-align: center;
    line-height: 1.9;
    z-index: 999 !important;
    position: relative;
    font-family: 'Javacom', 'Dancing Script', cursive;
}

.slider-text h1 {
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0px;
    font-family: 'Javacom', 'Dancing Script', cursive;
}

#best-rate h4 {
    padding-right: 30px;
}

@media only screen and (min-width: 768px) {
    .slider-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .slider-text span.desktop {
        display: block;
    }
    .slider-text span.mobile {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    /* Reserve button removed from the mobile header bar (it lives inside the
       hamburger menu). Let the nav column fill the row so the hamburger sits
       flush right, with the logo on the left — consistent on every page. */
    .nav-col {
        flex: 1 1 auto;
        max-width: 100%;
        min-height: 96px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .slider-text {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        flex-direction: column;
        padding: 0 15px;
    }
    .slider-text h1 {
        font-size: 1.2rem !important;
        line-height: 1.5;
    }
    .slider-text span.desktop {
        display: none;
    }
    .slider-text span.mobile {
        display: block;
        font-size: 60px;
    }
    #header-padding a.btn_1, #header-padding .btn_1 {
        min-width: 180px;
    }
}

/* ===========================================================================================
   4. ROOM & CHAMBER PAGE STYLES
   =========================================================================================== */

.room_facilities_list img {
    margin-right: 15px;
}

h3.header-text {
    color: #ffffff;
    margin: auto;
    text-align: center;
    position: relative;
    width: 100%;
    z-index: 999999;
    top: 50%;
    letter-spacing: 2px;
}

/* ===========================================================================================
   5. HOMEPAGE SPECIFIC STYLES
   =========================================================================================== */

.bg-header {
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 100px 0px rgba(0 0 0 / 11%);
    -moz-box-shadow: 0px 0px 100px 0px rgba(0 0 0 / 11%);
    box-shadow: 0px 0px 100px 0px rgba(0 0 0 / 11%);
}

.detail-button a.btn_1.outline {
    background-color: #ffffff;
}

.detail-button a.btn_1.outline:hover {
    border: 1px solid #ffffff;
    background: #978667;
}

@media only screen and (max-width: 767px) {
    #first_section .kenburns .owl-item.active .item img,
    #first_section img.jarallax-img.kenburns {
        animation: none;
    }
    #first_section img {
        max-width: 100% !important;
    }
    .btn_1, .outline {
        min-width: 50%;
        max-width: max-content;
    }
}

/* ===========================================================================================
   6. POLICY / LEGAL PAGE STYLES
   =========================================================================================== */

.box_item_info {
    background-color: transparent;
    box-shadow: inherit;
}

.row_list_version_2 .box_item_info,
.row_list_version_2.inverted .box_item_info {
    margin: 0px;
}

.bg-white {
    background: #ffffff;
}

/* ===========================================================================================
   7. CONTACT PAGE STYLES
   =========================================================================================== */

.contact i {
    font-size: 35px;
}

/* ===========================================================================================
   8. NEWS / PRESS PAGE STYLES
   → Styles moved back to inline <style> in news.php and news-tr.php (page-specific body bg)
   =========================================================================================== */

/* ===========================================================================================
   9. FACILITIES PAGE - SLIDER BANNER
   =========================================================================================== */

#sliderbanner a, #sliderbanner button {
    cursor: pointer;
    user-select: none;
    border: none;
    outline: none;
    background: none;
}

#sliderbanner img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#sliderbanner .section {
    margin: 0 auto;
    padding-block: 5rem;
}

#sliderbanner .container {
    max-width: 81rem;
    height: auto;
    margin-inline: auto;
    padding-inline: 0;
}

#sliderbanner .swiper-button-next::after,
#sliderbanner .swiper-button-prev::after {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 1rem;
    width: 2rem;
    height: 2rem;
    opacity: 0.75;
    border-radius: 50%;
    color: var(--white-100);
    background: var(--black-300);
}

#sliderbanner .swiper-button-next,
#sliderbanner .swiper-button-prev.swiper-button-next,
#sliderbanner .swiper-button-prev {
    background-color: #ffffff;
    border-radius: 50%;
    padding: 0px 22px;
}

#sliderbanner .swiper-button-next,
#sliderbanner .swiper-button-prev {
    color: #14273c;
}

.swiper-pagination-bullet-active {
    background: #ffffff;
}

#reserve {
    margin-top: -100px;
    z-index: 999999;
    position: relative;
}

/* ===========================================================================================
   10. GALLERY / LIGHTBOX STYLES
   =========================================================================================== */

:root {
    --lightbox-bg-color: #292929;
    --lightbox-caption-text-color: white;
    --lightbox-controls-color: white;
    --lightbox-controls-hover-color: #bf40bf;
}

#lightbox {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: var(--lightbox-bg-color);
    opacity: 0;
    transition: opacity 0.5s;
}

#lightbox figure {
    max-width: calc(90vw - 100px);
    max-height: calc(90vh - 100px);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    width: 60vw;
    height: 100%;
    max-height: calc(100vh - 100px);
    display: block;
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s;
    object-fit: contain;
    aspect-ratio: 4/3;
}

.lightbox-caption {
    color: var(--lightbox-caption-text-color);
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.5s;
}

#lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 36px;
    color: var(--lightbox-controls-color);
    cursor: pointer;
    z-index: 1000;
    line-height: 1;
}

#lightbox .close:hover {
    color: var(--lightbox-controls-hover-color);
}

#lightbox .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
    color: var(--lightbox-controls-color);
    cursor: pointer;
    z-index: 1000;
    user-select: none;
    padding: 10px;
}

#lightbox .arrow:hover {
    color: var(--lightbox-controls-hover-color);
}

#lightbox .arrow.prev {
    left: 20px;
}

#lightbox .arrow.next {
    right: 20px;
}

/* Gallery Grid */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.gallery img:hover {
    opacity: 0.85;
}

@media only screen and (max-width: 767px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .gallery img {
        height: 150px;
    }
    .lightbox-image {
        width: 90vw;
    }
}

/* ===========================================================================================
   11. RESTAURANT / EXPERIENCE PAGE STYLES
   =========================================================================================== */

@media only screen and (min-width: 768px) {
    img.desktoplogo {
        display: block;
        margin: auto;
    }
    img.mobillogo {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    img.mobillogo {
        display: block;
        margin: auto;
    }
    img.desktoplogo {
        display: none;
    }
}

/* ===========================================================================================
   12. FOOTER STYLES
   =========================================================================================== */

.footer-logo-col-full {
    width: 100% !important;
    flex: 0 0 100% !important;
    align-content: center;
}

.footer-logo-col-half {
    width: 50% !important;
    flex: 0 0 50% !important;
    align-content: center;
}

@media (min-width: 768px) {
    .footer-logo-col-full,
    .footer-logo-col-half {
        width: 25% !important;
        flex: 0 0 25% !important;
    }
}

/* The last footer logo (The Komana) is scaled 2× with `transform-origin: right center`
   inline — correct on desktop where its column is right-aligned (text-md-end), but on
   mobile the column is centred and scaling from the right edge shifts the logo off to
   the left. Re-anchor the scale to the centre on mobile so it sits truly centred. */
@media (max-width: 767px) {
    footer .copy .footer-logo-col-full.text-md-end img {
        transform-origin: center center !important;
    }
}

/* Footer Booking Badge */
.footer-booking {
    margin-top: 12px;
}

.footer-booking .booking-badge {
    max-width: 300px;
    height: auto;
}

@media (max-width: 767px) {
    .footer-booking {
        text-align: center;
    }
}

/* ===========================================================================================
   13. OUR STORY / SUSTAINABILITY - HERO HEIGHT
   =========================================================================================== */

.hero.full-height {
    z-index: 999999;
    height: 100vh;
}

/* Policy pages override */
.policy-page .hero.full-height {
    height: 50vh;
}

/* ===========================================================================================
   14. CONTACT PAGE MARGIN OVERRIDE
   =========================================================================================== */

.contact-page .margin_120_95 {
    padding-top: 180px;
    padding-bottom: 150px;
}

.contact-page .hero.medium-height {
    height: 40vh;
}

/* ===========================================================================================
   15a. PRESSREADER IMAGE - MOBILE FIX
   =========================================================================================== */

.pressreader img {
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 767px) {
    .pressreader img {
        max-width: 100%;
        width: 100%;
    }
}

/* ===========================================================================================
   15b. MOBILE MENU - LANG BUTTON & RESERVE OVERLAP FIX
   =========================================================================================== */

#mobile-menu .popup-link a {
    position: relative;
    right: auto;
    top: auto;
    display: inline-block;
}

#mobile-menu .rr_opener {
    margin-top: 10px;
}

/* ===========================================================================================
   15. WHATSAPP FLOATING BUTTON
   =========================================================================================== */

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 24px;
    z-index: 9999;
}

.whatsapp-float img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.whatsapp-float img:hover {
    transform: scale(1.1);
}

/* ===========================================================================================
   16. COOKIE CONSENT BANNER & MODAL
   =========================================================================================== */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 20px 20px 80px;
    z-index: 2147483647;
    display: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Cookie banner/modal açıkken Book Now barını gizle (JS tarafından kontrol edilir) */

.cookie-consent-banner.show {
    display: block;
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.cookie-consent-text {
    flex: 1;
    min-width: 300px;
    font-size: 14px;
    line-height: 1.6;
}

.cookie-consent-text a {
    color: #c9a961;
    text-decoration: underline;
}

.cookie-consent-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-consent-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cookie-consent-btn-accept {
    background-color: #c9a961;
    color: #1a1a1a;
}

.cookie-consent-btn-accept:hover {
    background-color: #d4b76e;
}

.cookie-consent-btn-settings {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.cookie-consent-btn-settings:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Cookie Modal */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    padding: 20px;
}

.cookie-modal.show {
    display: flex;
}

.cookie-modal-content {
    background-color: #ffffff;
    color: #1a1a1a;
    border-radius: 8px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.cookie-modal-header {
    padding: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.cookie-modal-header h2 {
    margin: 0 0 15px 0;
    font-size: 24px;
}

.cookie-modal-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.cookie-modal-body {
    padding: 30px;
}

.cookie-category {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.cookie-category:last-child {
    border-bottom: none;
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cookie-category h3 {
    margin: 0;
    font-size: 18px;
}

.cookie-category p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.cookie-toggle {
    position: relative;
    width: 50px;
    height: 26px;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.cookie-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background-color: #c9a961;
}

.cookie-toggle input:checked + .cookie-toggle-slider:before {
    transform: translateX(24px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-modal-footer {
    padding: 30px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-modal-footer button {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-save-preferences {
    background-color: #c9a961;
    color: #ffffff;
}

.btn-save-preferences:hover {
    background-color: #d4b76e;
}

.btn-accept-all {
    background-color: #c9a961;
    color: #ffffff;
}

.btn-accept-all:hover {
    background-color: #d5ba8c;
}

.btn-reject-all {
    background-color: transparent;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.btn-reject-all:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .cookie-consent-content {
        flex-direction: column;
    }
    .cookie-consent-buttons {
        width: 100%;
        justify-content: stretch;
    }
    .cookie-consent-btn {
        flex: 1;
    }
    .cookie-modal-footer {
        flex-direction: column;
    }
    .cookie-modal-footer button {
        width: 100%;
    }
}

/* ===========================================================================================
   POLICY / SUSTAINABILITY PAGE LIST STYLES
   =========================================================================================== */

.policy-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.policy-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #e8e4dc;
    transition: all 0.3s ease;
}

.policy-item:first-child {
    border-top: 1px solid #e8e4dc;
}

.policy-item:hover {
    background-color: #f8f6f2;
    color: #978667;
    padding-left: 28px;
}

.policy-icon {
    font-size: 22px;
    color: #c9a961;
    min-width: 40px;
    flex-shrink: 0;
}

.policy-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

.policy-arrow {
    font-size: 16px;
    color: #bbb;
    margin-left: 15px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.policy-item:hover .policy-arrow {
    color: #c9a961;
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .policy-item {
        padding: 15px 12px;
    }
    .policy-text {
        font-size: 13px;
    }
    .policy-icon {
        font-size: 18px;
        min-width: 32px;
    }
}

/* ===========================================================================================
   WHATSAPP BUTTON
   =========================================================================================== */

#whatsapp-btn {
    position: fixed;
    bottom: 90px;
    right: 25px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

#whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
    #whatsapp-btn {
        right: 15px;
        bottom: 85px;
        width: 52px;
        height: 52px;
    }
    #whatsapp-btn svg {
        width: 28px;
        height: 28px;
    }
}

/* ===========================================================================================
   COOKIE BANNER — MOBILE MODAL
   (The RealRate/Globres booking bar was removed, so its bottom-offset rules — body
   padding-bottom, back-to-top nudge, footer padding — are gone with it. Only the
   cookie-banner modal styling remains here.)
   =========================================================================================== */

@media (max-width: 991px) {
    /* Cookie banner - mobilde ekranın tam ortasında modal olarak göster */
    .cookie-consent-banner,
    .cookie-consent-banner.show,
    body .cookie-consent-banner {
        position: fixed !important;
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 400px !important;
        border-radius: 12px !important;
        padding: 24px !important;
        margin: 0 !important;
    }

    /* Cookie modal - ortada kalmalı */
    .cookie-modal-content {
        margin-bottom: 70px;
    }
}

/* ============================================================
   Homepage hero — handwriting text reveal + scroll-down chevron
   (scoped to .handwrite-text / .hero .scroll-down → homepage only)
   ============================================================ */
.handwrite-text { text-align: center; }
.handwrite-text .hw-line {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Homepage banner text colour (no shadow) */
    color: #8a7e74;
    text-shadow: none;
    opacity: 0;
    animation: hwReveal 1.6s cubic-bezier(.55, .06, .18, 1) forwards;
}
.handwrite-text .hw-line-2 { animation-delay: 1.15s; }
/* GÜVENLİ SÜRÜM — clip-path animasyonu Chrome 150'de render sürecini kalıcı
   kilitliyordu ("Page Unresponsive"; test?off=nohwreveal deneyiyle kanıtlandı).
   Efekt compositor'da çalışan opacity+transform ile yeniden yazıldı: banner
   yazısı yumuşakça belirip hafifçe yükselir. clip-path'e geri DÖNMEYİN. */
@keyframes hwReveal {
    from { opacity: 0; transform: translateY(0.35em); }
    to   { opacity: 1; transform: none; }
}

.hero .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    animation: scrollNudge 2s ease-in-out infinite;
}
.hero .scroll-down svg { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45)); }
.hero .scroll-down:hover { opacity: .85; }
@keyframes scrollNudge {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
    .handwrite-text .hw-line {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .hero .scroll-down { animation: none; }
}

/* ============================================================
   Solid header on EVERY page (homepage-style white band).
   Applied directly to .always-sticky via CSS so it shows from
   first paint on all pages — independent of the JS scroll handler.
   ============================================================ */
header.fixed_header.always-sticky {
    background-color: #fff;
    border-bottom: 1px solid #d9e1e6;
}
header.fixed_header.always-sticky .logo_normal { display: none; }
header.fixed_header.always-sticky .logo_sticky { display: inline-block; }
header.fixed_header.always-sticky nav ul li a { color: #333; }
header.fixed_header.always-sticky nav ul li a.animated_link:before { background-color: #333; }
header.fixed_header.always-sticky nav ul li a.btn_1 { color: #fff; }
header.fixed_header.always-sticky .hamburger__inner,
header.fixed_header.always-sticky .hamburger__inner::before,
header.fixed_header.always-sticky .hamburger__inner::after {
    background-color: #333;
}

/* ============================================================
   Handwriting reveal for inner-page banner text.
   Sweeps the cursive banner word left-to-right on load, like the
   homepage. The homepage hero (.handwrite-text) keeps its own
   per-line reveal and is excluded here to avoid double animation.
   ============================================================ */
.slider-text:not(.handwrite-text) .desktop,
.slider-text:not(.handwrite-text) .mobile {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: hwReveal 1.6s cubic-bezier(.55, .06, .18, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .slider-text:not(.handwrite-text) .desktop,
    .slider-text:not(.handwrite-text) .mobile {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Fluid banner text — scales down on smaller desktop screens so
   the big hero wording doesn't overflow/wrap awkwardly.
   (.desktop spans only show ≥768px; clamp handles every width.)
   ============================================================ */
.handwrite-text .desktop {
    font-size: clamp(30px, 3.8vw, 60px) !important;
}
.slider-text:not(.handwrite-text) .desktop {
    font-size: clamp(40px, 7vw, 100px) !important;
}

/* ===========================================================================================
   PERF FIX — Chrome "Page Unresponsive" donması.
   Bootstrap :root{scroll-behavior:smooth} kuralı HER kaydırmayı çok kareli animasyona
   çevirip scroll-bağlı handler'ların (scrollCue/jarallax/progress) zorunlu reflow'larını
   katlıyordu. Native smooth scroll kapatıldı; JS ile yapılan yumuşak kaydırmalar
   (menü/ok — scrollIntoView ve jQuery animate) etkilenmez, aynen yumuşak kalır.
   =========================================================================================== */
html { scroll-behavior: auto !important; }