.logo-bg.bg-mask {
    mask-image: url('/assets/img/logo_bg_mask.png');
}

.logo-svg-header {
    height: 60px !important;
}

.logo-svg-mobile {
    height: 60px !important;
}

.logo-svg-about {
    height: 70px !important;
}

.submenu-mobile li {
    height: 32px;
    padding-top: 6px;
}

.submenu-mobile img {
    width: 24px;
    margin-top: -4px;
}

.submenu-mobile a {
    display: contents !important;
}

/* Masaustu alt menude ikon IKI kez ciziliyordu: bir kez <img> elemaniyla
   (_MenuTree.cshtml tek partial; mobil icin konan img masaustunde de basiliyor,
   cunku masaustu <ul> de submenu-mobile sinifini tasiyor), bir kez de temanin
   a:before arka planiyla. IMAGE_URL bosken ikisi de gorunmedigi icin cakisma
   fark edilmiyordu. Tek kaynak <img> olsun -- gercek eleman, akista duruyor ve
   mobilde de zaten o kullaniliyor. Temanin :before ikonu kapatildi; zaten
   .submenu-mobile a { display: contents } yuzunden konumlandirmasi da guvenilmezdi.
   Ikon duruşta %50, fare satirin uzerine gelince tam opak. */
.main-menu ul.sub-menu li a:before {
    content: none;
}

.main-menu ul.sub-menu li img {
    opacity: .5;
    transition: opacity 0.3s ease-in-out;
}

.main-menu ul.sub-menu li:hover img {
    opacity: 1;
}

.section-bg-01 {
    background-image: url("/assets/img/bg/category_bg_1.png");
    background-repeat: repeat-x;
}

.location-list {
    position: absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateX(0);
    transition: 8s;
    display: flex;
    align-items: center;
    gap: 35px;
}

.location-area {
    position: relative;
    height: 24px;
    overflow: hidden;
    font-size: 14px;
}

.card-view-verification-svg {
    max-height: 24px;
    max-width: 24px;
}

.tour-box .tour-action label {
    display: contents;
    color: var(--primary-color1);
}

.blog-box label {
    display: contents;
    color: var(--primary-color) !important;
}

.blog-box .blog-action {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    float: right;
}

.blog-box .verification-tooltip {
    padding-top: 5px;
}

.bold-black {
    color: black !important;
    font-weight: bold !important;
}


.btn-primary {
    color: white;
    border-color: var(--theme-color);
    background-color: var(--theme-color);
}

    .btn-primary:hover {
        background-color: var(--theme-color);
        box-shadow: 0 0 0 .15rem #87C3A8;
        border-color: var(--theme-color);
    }

        .btn-primary:hover svg {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

        .btn-primary:hover img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

    .btn-primary:active {
        background-color: var(--theme-color);
        color: var(--theme-color);
        border-color: var(--theme-color);
        box-shadow: 0 0 0 .25rem #87C3A8;
    }

        .btn-primary:active svg {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

        .btn-primary:active img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

    .btn-primary:focus {
        background-color: var(--theme-color);
        color: white;
        border-color: var(--theme-color);
        box-shadow: 0 0 0 .25rem #87C3A8;
    }

        .btn-primary:focus svg {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

        .btn-primary:focus img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

.btn-outline-primary {
    color: white;
    border-color: var(--theme-color);
}

    .btn-outline-primary:hover {
        background-color: var(--theme-color);
        box-shadow: 0 0 0 .15rem #87C3A8;
        border-color: var(--theme-color);
    }

        .btn-outline-primary:hover svg {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

        .btn-outline-primary:hover img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

    .btn-outline-primary:active {
        background-color: var(--theme-color);
        color: white;
        border-color: var(--theme-color);
        box-shadow: 0 0 0 .25rem #87C3A8;
    }

        .btn-outline-primary:active svg {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

        .btn-outline-primary:active img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

    .btn-outline-primary:focus {
        background-color: var(--theme-color);
        color: white;
        border-color: var(--theme-color);
        box-shadow: 0 0 0 .25rem #87C3A8;
    }

        .btn-outline-primary:focus svg {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

        .btn-outline-primary:focus img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

.batch {
    position: absolute;
    top: 25px;
    z-index: 10;
    opacity: 0.8;
    font-size: 15px;
}

    .batch .location {
        background-color: var(--white-color);
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgba(99, 171, 69, 0.5);
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: rgba(99, 171, 69, 0.5);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(99, 171, 69, 0.5);
        border-left-width: 0px;
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
        padding: 4px 10px;
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 180px;
        border-radius: 0px 20px 20px 0px;
    }

        .batch .location img {
            margin-left: -6px;
        }

.sidebar-area .widget {
    background-image: url("/assets/img/bg/category_bg_1.png");
    background-repeat: repeat-x;
    background-color: rgba(255, 255, 255, 0.5); /* beyaz üzerine %60 şeffaf */
    background-blend-mode: lighten; /* veya overlay / multiply */
}

.widget li:last-of-type label {
    border-bottom: none;
}

.widget_title {
    margin-top: -10px;
}

    .widget_title .btn-icon {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .widget_title > h3 {
        font-size: 20px;
        color: var(--title-color);
        margin-top: -10px;
        margin-bottom: 0;
    }


.th-sort-bar .search-info-text {
    position: relative;
    margin-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
}

    .th-sort-bar .search-info-text:before {
        content: '';
        height: 3px;
        width: 100%;
        background-color: var(--th-border-color);
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .th-sort-bar .search-info-text:after {
        content: '';
        position: absolute;
        height: 3px;
        width: 75%;
        background-color: var(--theme-color);
        bottom: 0;
        left: 0;
    }

    .th-sort-bar .search-info-text span {
        color: var(--theme-color);
    }

.th-sort-bar .dropdown-menu {
    max-height: 300px;
    min-width: 300px;
    overflow-y: auto;
    border-radius: 8px;
    z-index: 12;
}
    /* Dropdown içi spacing */
    .th-sort-bar .dropdown-menu .form-check {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        min-height: 36px;
        white-space: nowrap;
        border-bottom: 1px solid #ccc;
    }

        .th-sort-bar .dropdown-menu .form-check:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

    /* Checkbox hizalaması */
    .th-sort-bar .dropdown-menu .form-check-input {
        margin-top: 0 !important;
        margin-right: 6px;
    }

    /* Yazı hizalaması */
    .th-sort-bar .dropdown-menu .form-check-label {
        margin-bottom: 16px;
        font-size: 0.9rem;
        flex-grow: 1;
    }

.th-sort-bar .dropdown > button {
    border-color: rgb(43, 149, 101);
}

    .th-sort-bar .dropdown > button:hover {
        background-color: rgb(43, 149, 101);
    }

        .th-sort-bar .dropdown > button:hover img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

    .th-sort-bar .dropdown > button:focus {
        box-shadow: 0 0 0 .1rem rgb(43, 149, 101);
    }

    .th-sort-bar .dropdown > button:active {
        box-shadow: 0 0 0 .1rem rgb(43, 149, 101);
        background-color: rgb(43, 149, 101);
    }

        .th-sort-bar .dropdown > button:active img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(100deg);
        }

    .th-sort-bar .dropdown > button > img {
        display: flex;
        margin-top: -5px;
        margin-bottom: -5px;
        margin-left: -10px;
    }

.border-bottom {
    border-bottom: 1px solid var(--gray-color) !important;
}

.custom-checkbox {
    cursor: pointer;
    display: block;
    background-color: transparent;
    margin: 0;
    padding: 10px 45px 10px 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.313;
    color: var(--title-color);
    border-radius: 0;
    border-bottom: 1px solid var(--gray-color);
    user-select: none; /* 🔒 prevents text selection */
}

    .custom-checkbox:hover {
        color: var(--theme-color);
    }

    .custom-checkbox input {
        display: none;
    }

    .custom-checkbox i {
        transition: color 0.3s ease;
        padding-right: 4px;
    }

    .custom-checkbox input:checked + i::before {
        content: "\f14a"; /* fa-square-check */
    }

    .custom-checkbox input:not(:checked) + i::before {
        content: "\f0c8"; /* fa-square */
    }

.widget > ul > li {
    display: block;
    position: relative;
}

.widget .selected-item-icon {
    width: 24px;
    height: 24px;
    object-fit: cover;
    margin-top: -2px;
}

.modal-selector-form .form-check-label > div > img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.widget > ul > li > a {
    padding: 0px !important;
}

    .widget > ul > li > a > .custom-checkbox {
        border: none !important;
    }

    .widget > ul > li > a > span {
        color: var(--theme-color);
        text-align: center;
        position: absolute;
        right: 0;
        top: 8px;
        -webkit-transition: all ease 0.4s;
        transition: all ease 0.4s;
        pointer-events: none;
        min-width: 20px;
        text-align: right;
        font-size: 20px;
    }



.modal.show {
    display: block;
    z-index: 10;
}

.modal-header {
    position: relative;
    border-bottom: 0;
    padding-bottom: 16px;
    overflow: visible;
}

    .modal-header:before {
        content: '';
        position: absolute;
        height: 3px;
        width: 100%;
        background-color: var(--th-border-color);
        bottom: 0;
        left: 0;
    }

    .modal-header:after {
        content: '';
        position: absolute;
        height: 3px;
        width: 40%;
        background-color: var(--theme-color);
        bottom: 0;
        left: 0;
    }

.header-account-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-support-link,
.header-account-link {
    color: var(--title-color);
    font-size: 14px;
    font-weight: 500;
}

.header-support-link:hover,
.header-account-link:hover {
    color: var(--theme-color);
}

.header-account-button {
    min-width: 165px;
    text-align: center;
}

.mobile-header-account {
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin: 18px 0 10px;
}

.mobile-profile-button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-header-account .content h6 {
    margin-bottom: 0;
}

.mobile-login-tag {
    color: var(--title-color);
}

.member-login-shell {
    max-width: 640px;
    margin: 0 auto;
}

.member-login-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(15, 33, 23, 0.08);
    padding: 32px 28px;
}

.member-login-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    color: #111111;
    margin-bottom: 12px;
}

.member-login-subtitle {
    max-width: 100%;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
}

.member-login-reasons-title {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
    color: #111111;
    margin-bottom: 12px;
}

.member-login-reasons {
    max-width: 100%;
    margin: 0 0 16px;
    padding-left: 20px;
    color: #111111;
    font-size: 15px;
    line-height: 1.6;
}

/* OTP gecerlilik sayaci — eski surumdeki gibi kod alaninin altinda,
   butondan bagimsiz kendi seridinde durur. */
.otp-countdown-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    background-color: rgba(43, 149, 101, 0.1);
    color: #217a52;
    font-size: 14px;
    line-height: 1.4;
}

.otp-countdown-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.otp-countdown-bar.is-expiring {
    background-color: rgba(217, 164, 6, 0.14);
    color: #8a6a04;
}

.otp-countdown-bar.is-expired {
    background-color: rgba(200, 55, 55, 0.12);
    color: #a33131;
}

.member-login-reasons-rich {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.member-login-reasons-rich li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.member-login-reason-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: rgba(43, 149, 101, 0.1);
    color: #2b9565;
    font-size: 15px;
}

.member-login-form {
    max-width: 100%;
    margin: 0;
}

.member-login-phone-field .iti {
    width: 100%;
}

.member-login-phone-field .iti__selected-flag {
    border-radius: 12px 0 0 12px;
}

.member-login-phone-field .form-control {
    height: 52px;
    border-radius: 12px;
    border: 1px solid #d7ddd7;
    font-size: 16px;
    padding-left: 92px !important;
    color: #6a6a6a;
}

.member-login-phone-field .form-control:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 .2rem rgba(43, 149, 101, 0.15);
}

/* Kod tamamlanmadan gonderilemez; buton da bunu gostermeli, aksi halde
   aktif gorunup tiklaninca hicbir sey olmuyordu. */
.member-login-submit:disabled {
    background-color: #b9c4bd;
    cursor: not-allowed;
}

.member-login-submit {
    width: 100%;
    border: 0;
    border-radius: 12px;
    min-height: 52px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background-color: #2b9565;
}

.member-login-footnote {
    font-size: 13px;
    color: #6a6a6a;
}

.account-entry-space {
    padding-top: 96px;
    padding-bottom: 96px;
}

.member-entry-card,
.member-register-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #ebefeb;
    box-shadow: 0 14px 36px rgba(16, 41, 29, 0.07);
    padding: 32px 28px;
}

.member-entry-title {
    font-size: 34px;
    font-weight: 800;
    color: #111111;
    line-height: 1.2;
}

.member-entry-subtitle {
    font-size: 15px;
    color: #6b6b6b;
    line-height: 1.6;
}

.member-entry-alert {
    text-align: left;
}

.member-entry-open-btn {
    min-width: 220px;
}

.member-entry-register-link {
    margin-top: 14px;
    display: inline-block;
    color: var(--title-color);
}

.member-auth-modal .modal-dialog {
    max-width: 520px;
}

.member-auth-modal .modal-content {
    border: none;
    border-radius: 18px;
    box-shadow: 0 22px 46px rgba(14, 33, 24, 0.2);
}

.member-auth-modal .modal-body {
    max-height: none;
    overflow-y: visible;
}

.member-auth-modal-title {
    font-size: 24px;
    font-weight: 700;
}

.member-login-phone-input {
    font-size: 16px;
}

.member-login-footer-links,
.member-register-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.member-register-form .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
    margin-bottom: 6px;
}

.member-register-form .form-control {
    min-height: 46px;
    border-radius: 10px;
    font-size: 14px;
}

.member-register-check .form-check-label {
    font-size: 14px;
    color: #5d5d5d;
}

.main-menu ul li.menu-item-has-children > a:after,
.th-mobile-menu ul .menu-item-has-children > a:after,
.th-mobile-menu ul .menu-item-has-children > a .th-mean-expand:before {
    font-weight: 900 !important;
}

.scroll-top:after {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", var(--icon-font);
    font-weight: 900 !important;
}

@media (max-width: 991.98px) {
    .account-entry-space {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .member-entry-card,
    .member-register-card,
    .member-login-card {
        padding: 24px 18px;
    }

    .member-entry-title,
    .member-login-title {
        font-size: 28px;
    }

    .member-entry-subtitle,
    .member-login-subtitle {
        font-size: 14px;
    }

    .member-login-reasons-title {
        font-size: 18px;
    }

    .member-login-reasons {
        font-size: 14px;
    }

    .member-login-phone-field .form-control {
        height: 48px;
        font-size: 15px;
        padding-left: 86px !important;
    }

    .member-login-submit {
        min-height: 48px;
        font-size: 15px;
    }

    .member-auth-modal-title {
        font-size: 20px;
    }
}

.modal-title {
    font-size: 24px;
}

.modal-body {
    max-height: 60vh;
    overflow-y: scroll;
    scrollbar-width: auto;
    scrollbar-color: var(--theme-color) #f1f1f1;
}

    .modal-body::-webkit-scrollbar {
        width: 16px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: var(--theme-color);
    }

    .modal-body::-webkit-scrollbar-thumb {
        background-color: #0d6efd;
        border-radius: 8px;
        border: 4px solid var(--theme-color);
    }


.modal-selector-form {
    display: block;
    z-index: 10;
    position: absolute;
    top: 15%;
    left: 20%;
    right: 20%;
    bottom: 20%;
    --transform: translate(-50%, -50%) !important;
}

    .modal-selector-form .widget_title {
        width: 100%;
    }

@media (min-width: 1300px) {
    .modal-selector-form > .row {
        --bs-gutter-x: 0 !important;
    }
}

.modal-selector-card {
    transition: background-color 0.3s ease, border-color 0.3s ease;
    min-height: 130px;
}

/* Preloader "Yüklemeyi İptal Et" butonu tema paketinden (WP admin-bar .logged-in
   kuralına bağlıydı) miras kaldığı için hiç konumlandırılmamıştı; #preloader'ın
   ilk flow child'ı olarak sol üstte çıplak metin halinde görünüyordu. */
.preloader .preloaderCls {
    position: absolute;
    left: 50%;
    bottom: 48px;
    top: auto;
    transform: translateX(-50%);
    z-index: 101;
    background-color: transparent;
    color: var(--body-color, #6b7385);
    border: 1px solid var(--border-color, #e3e6ea);
    padding: 8px 20px;
    font-size: 13px;
}

    .preloader .preloaderCls:hover {
        color: var(--white-color, #fff);
        border-color: var(--theme-color, #2b9565);
    }

/* ============================================================
   Header hesap menüsü
   Header'da Profil 3, Çıkış 2, Rezervasyon/Mesaj/Favori 2'şer kez
   tekrarlanıyordu. Hepsi tek bir açılır menüde toplandı.
   ============================================================ */
.header-account {
    position: relative;
}

.header-account__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--th-border-color, #e3e6ea);
    border-radius: 48px;
    background-color: var(--white-color, #fff);
    color: var(--title-color, #113d48);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
}

    .header-account__toggle:hover,
    .header-account.is-open .header-account__toggle {
        border-color: var(--theme-color, #2b9565);
        box-shadow: 0 2px 10px rgba(43, 149, 101, 0.15);
    }

.header-account__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--theme-color, #2b9565);
    color: var(--white-color, #fff);
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 auto;
}

.header-account__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account__caret {
    font-size: 12px;
    transition: transform .25s ease;
}

.header-account.is-open .header-account__caret {
    transform: rotate(180deg);
}

/* Okunmamış mesaj rozeti */
.header-account__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #e5484d;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.header-account__badge--inline {
    margin-left: auto;
}

/* Açılır panel */
.header-account__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 244px;
    padding: 8px;
    background-color: var(--white-color, #fff);
    border: 1px solid var(--th-border-color, #e3e6ea);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(17, 61, 72, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 999;
}

.header-account.is-open .header-account__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

    .header-account__menu a,
    .header-account__menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        border-radius: 8px;
        background: none;
        color: var(--body-color, #6b7385);
        font-size: 15px;
        text-align: left;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
    }

        .header-account__menu a:hover,
        .header-account__menu button:hover {
            background-color: #f2f7f4;
            color: var(--theme-color, #2b9565);
        }

    .header-account__menu i {
        width: 18px;
        font-size: 14px;
        text-align: center;
        color: var(--theme-color, #2b9565);
    }

/* Çıkış, portal bağlantılarından ince bir çizgiyle ayrılır */
.header-account__logout {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--th-border-color, #e3e6ea);
}

.modal-selector-checkbox {
    z-index: 2;
}

input[type="checkbox"] ~ label {
    padding-left: 0px;
    top: 1rem;
    height: 100%;
    bottom: -1rem;
    margin-top: -1rem;
    font-size: 16px;
}

    input[type="checkbox"] ~ label::before {
        border-color: var(--theme-color);
        margin-top: -1rem;
        top: 1rem;
        left: auto;
        right: 0px;
        height: 24px;
        width: 24px;
        line-height: 22px;
        font-size: 20px;
    }

.form-check-label strong {
    padding-right: 26px;
    line-height: 18px;
    word-wrap: normal;
    color: var(--theme-color);
}

.form-check-label small,
.form-check-label * small {
    line-height: 18px;
    display: block;
}

/* Breadcrumb fixes */
.breadcumb-menu {
    list-style: none;
}


.detail-title {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.detail-title-info {
    display: flex;
    margin-bottom: 5px;
}

    .detail-title-info .info-box_link {
        font-weight: 500;
        display: flex;
    }

    .detail-title-info .icon {
        margin-right: 8px !important;
    }

/* Adres mobilde sariyor; sarma sonrasi alta dusen kelime ortalanmis kaliyordu.
   Metin bloğu sola yaslanir, ikon kucultulmez ve ust satira hizali kalir. */
.detail-title-info .info-box_link {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

    .detail-title-info .info-box_link .icon {
        flex: 0 0 auto;
    }

.campsite-features {
    margin-top: 20px !important;
}

    .campsite-features ul {
        list-style: none;
        padding: 0;
        margin: 0 0 15px 0;
        color: var(--text-color);
        font-family: var(--font-jost);
        font-size: 18px;
        font-weight: 400;
        line-height: 32px;
        letter-spacing: .54px;
    }

    .campsite-features li {
        border: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: flex-start; /* keep content tight; status icon pushed with margin-left:auto */
        gap: 16px;
        padding: 16px 20px;
        margin: 0 0 16px 0;
        color: var(--title-color);
        font-family: var(--font-jost);
        font-size: 18px;
        font-weight: 400;
        letter-spacing: .66px;
        list-style-type: none;
    }    

        .campsite-features li:first-child {
            margin-top: 0;
        }
        /* left icon */
        .campsite-features li > img:first-child {
            width: 36px;
            height: 36px;
            margin-right: 12px;
            object-fit: contain;
            flex: 0 0 36px;
        }

    /* middle text block */
    .campsite-features .cf-text {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .campsite-features .campsite-features-title {
        margin: 0 0 2px 0;
        line-height: 1.2;
        font-weight: 600;
        font-size: 1.15rem;
    }

    /* right status icon */
    .campsite-features li > img:last-child {
        width: 24px;
        height: 24px;
        margin-left: auto;
        object-fit: contain;
        flex: 0 0 24px;
    }

    .campsite-features h6 {
        color: var(--text-color) !important;
        font-family: var(--font-rubik);
        font-size: 0.95rem !important;
        font-weight: normal !important;
        line-height: 1.35;
        letter-spacing: .2px;
        margin: 0;
    }

    .campsite-features .widget_title {
        margin-top: 20px !important;
        color: var(--theme-color);
        font-weight: bold !important;
    }


/* ==========================================================================
   KART PUAN ROZETİ (_RatingBadge)
   Arama listesi ve bölge kartlarında GERÇEK puan. Detay sayfasındaki büyük
   blokla aynı renkler kullanılıyor — aynı kamp alanı iki yüzeyde farklı
   görünmesin. Rozet yalnız onaylı değerlendirmesi olan kartta çizilir.
   ========================================================================== */
.cs-rating-badge-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 6px;
}

.cs-rating-badge-link:hover .cs-rating-badge__value {
    text-decoration: underline;
}

.cs-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.cs-rating-badge__stars {
    color: #f5a623;
    font-size: 12px;
    letter-spacing: .5px;
}

.cs-rating-badge__value {
    font-size: 14px;
    color: #2b9565;
}

.cs-rating-badge__count {
    font-size: 12px;
    color: #6b7280;
}

/* ============================================================
   DİL SEÇİCİ — bayraklı açılır liste
   Önce <select> + nice-select vardı; <option> görsel taşıyamadığı
   için bayrak konamıyordu. Artık düz HTML, bayraklar flagpedia'dan.
   ============================================================ */
.lang-switch {
    position: relative;
    display: inline-block;
}

/* ---------- Üst şerit hapları: dil seçici + WhatsApp ----------
   ÖNCEKİ HÂLİ GÖRÜNMÜYORDU: bu düğme koyu zemin varsayımıyla yazılmıştı
   (beyaz yazı, beyaz saydam kenarlık), ama .header-layout1 üst şeridi
   BEYAZ (style.css: background-color: var(--white-color)). Beyaz üstüne
   beyaz yazı = görünmez etiket.

   İkisi de aynı hap: ince yeşil kenarlık, yuvarlatılmış köşe, koyu yazı.
   Yan yana duran iki yardımcı eylemin farklı görünmesi için sebep yok. */
.header-pill,
.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(43, 149, 101, .45);
    border-radius: 999px;
    background: rgba(43, 149, 101, .06);
    color: var(--title-color);
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.header-pill:hover,
.header-pill:focus-visible,
.lang-switch__toggle:hover,
.lang-switch.is-open .lang-switch__toggle {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white-color);
}

.header-pill i {
    font-size: 14px;
    color: var(--theme-color);
    transition: color .15s ease;
}

/* Hap yeşile döndüğünde ikon da beyaza geçmeli; yoksa yeşil üstünde yeşil. */
.header-pill:hover i,
.header-pill:focus-visible i {
    color: var(--white-color);
}

/* WhatsApp ikonu markanın kendi yeşiliyle: hangi kanal olduğu tek bakışta
   anlaşılsın. Hap yeşile döndüğünde yukarıdaki kural devralır. */
.header-pill--whatsapp i {
    color: #25D366;
    font-size: 15px;
}

/* ============================================================
   TELEFON AHIZESI YONU — SITE GENELI
   Ahize her yerde saga bakar (header'daki .header-phone i kurali
   referans: FA glifi + scaleX(-1)).

   img[src$="/icon/phone.svg"] BURAYA DAHIL EDILMEZ: o ozel SVG,
   FA glifinin AKSI yonde cizilmis (2026-08-15'te iki ikon ayni
   sayfada karsilastirilinca fark edildi — biri sol-ust/sag-alt,
   digeri sag-ust/sol-alt caprazinda kaliyordu). SVG'nin kendi
   varsayilan hali zaten FA'nin flip'li haliyle AYNI yone bakiyor;
   ona da scaleX(-1) uygulamak onu TERSINE ceviriyordu.
   ============================================================ */
.fa-phone,
.fa-phone-alt {
    transform: scaleX(-1);
}

/* Üst şeritteki telefon: hap değil, düz bağlantı — adresle aynı satırda
   ve onunla aynı ağırlıkta durmalı. */
.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--title-color);
    font-weight: 500;
    text-decoration: none;
}

.header-phone i {
    color: var(--theme-color);
    transform: scaleX(-1);
}

.header-phone:hover {
    color: var(--theme-color);
}

/* Sağ blok: hap ile dil seçici arasında nefes payı. */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dar ekran: üst şerit iki satıra inmesin. Haplar daralır, telefonun
   yazısı kalır — dokunmatikte asıl işe yarayan o. */
@media (max-width: 575.98px) {
    .header-pill,
    .lang-switch__toggle {
        padding: 5px 10px;
        font-size: 12px;
        gap: 6px;
    }

    /* WhatsApp etiketi düşer, ikon kalır: 375px'te üç öğe yan yana
       sığmıyor ve yeşil WhatsApp ikonu tek başına zaten tanınıyor. */
    .header-pill--whatsapp span {
        display: none;
    }

    .header-phone {
        font-size: 13px;
    }

    .header-right {
        gap: 6px;
    }
}

/* Bayrak oranı 4:3 — flagcdn görselleri bu oranda geliyor.
   object-fit olmadan dar bayraklar (CH, NP) eziliyor. */
.lang-switch__flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex: 0 0 20px;
}

/* Etiket ve ok, hap yeşile döndüğünde beyaza geçer — beyaz şeritte
   koyu, yeşil hapta beyaz. Tek kural iki durumu da karşılıyor. */
.lang-switch__label {
    color: inherit;
}

.lang-switch__caret {
    font-size: 10px;
    color: inherit;
    transition: transform .15s ease;
}

.lang-switch.is-open .lang-switch__caret {
    transform: rotate(180deg);
}

.lang-switch__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e9e5;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.lang-switch.is-open .lang-switch__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switch__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #21301f;
    font-size: 14px;
    text-align: left;
}

.lang-switch__item:hover,
.lang-switch__item.is-active {
    background: #eef4ef;
}

/* Kısa kod sabit genişlikte: diller alt alta dizilirken adlar hizalansın. */
.lang-switch__code {
    flex: 0 0 26px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    color: #6b7280;
}

.lang-switch__item.is-active .lang-switch__code {
    color: var(--theme-color);
}

/* ============================================================
   GİRİŞ / KAYIT DÜĞMESİ
   Önce .th-btn style3 kullanıyordu: koyu yeşil zemin üstünde koyu
   yeşil düğme, kenarlığı da yoktu — düğme olduğu anlaşılmıyordu.
   Artık dolu marka yeşili + beyaz metin; header'ın tek birincil eylemi.
   ============================================================ */
.header-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--theme-color);
    border: 1px solid var(--theme-color);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(43, 149, 101, .28);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.header-login-btn:hover,
.header-login-btn:focus-visible {
    background: #237d55;
    border-color: #237d55;
    color: #fff;
    box-shadow: 0 8px 22px rgba(43, 149, 101, .38);
    transform: translateY(-1px);
}

.header-login-btn__arrow {
    font-size: 12px;
    transition: transform .18s ease;
}

.header-login-btn:hover .header-login-btn__arrow {
    transform: translateX(3px);
}

/* ============================================================
   KAMP ALANI BAŞVURU BANDI (footer üstü, her sayfada)
   İçerik ile footer arasındaki nefes payını da bu bölüm veriyor;
   önceden sayfa gövdesi doğrudan footer'a yapışıyordu.
   ============================================================ */
.owner-cta {
    padding: 70px 0 80px;
    background: #fff;
}

.owner-cta__card {
    padding: 54px 32px;
    border-radius: 24px;
    background-color: #21301f;
    text-align: center;
}

.owner-cta__title {
    margin: 0 0 34px;
    color: #fff;
    font-size: 34px;
    line-height: 1.3;
}

.owner-cta__fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.owner-cta__input {
    flex: 0 1 260px;
    min-width: 0;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #21301f;
    font-size: 15px;
}

.owner-cta__input::placeholder {
    color: #9aa39a;
}

.owner-cta__submit {
    height: 52px;
    padding: 0 34px;
    border: 0;
    border-radius: 999px;
    background: var(--theme-color);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background .18s ease;
}

.owner-cta__submit:hover {
    background: #237d55;
}

.owner-cta__notice {
    margin: 20px 0 0;
    font-size: 14px;
}

.owner-cta__notice.is-ok {
    color: #9be7c2;
}

.owner-cta__notice.is-error {
    color: #ffb4b4;
}

@media (max-width: 767.98px) {
    .owner-cta { padding: 44px 0 52px; }
    .owner-cta__card { padding: 36px 18px; }
    .owner-cta__title { font-size: 24px; }
    .owner-cta__input, .owner-cta__submit { flex: 1 1 100%; width: 100%; }
}

/* ============================================================
   KURUMSAL FOOTER

   Üç katman: içerik sütunları -> güven/ödeme kuşağı -> telif.
   Yeşil ton v1'den (#21301f). Önceki footer arka plan GÖRSELİ
   kullanıyordu; görsel geç yüklendiği için ilk boyamada beyaz
   yazılar beyaz zemin üstünde kayboluyordu.
   ============================================================ */
.footer-corporate {
    background: #21301f;
    color: rgba(255, 255, 255, .78);
}

.footer-corporate__top {
    padding: 76px 0 60px;
}

/* --- Marka sütunu --- */
.footer-col__logo {
    display: inline-block;
    margin-bottom: 20px;
}

.footer-col__logo img {
    height: 38px;
    width: auto;
}

/* Ölçülü satır uzunluğu: 4 sütunlu düzende metin sütunu genişleyince
   satırlar 100 karakteri aşıp okunmaz oluyordu. */
.footer-col__slogan {
    max-width: 42ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .7);
}

/* --- Başlıklar: tüm sütunlarda AYNI temel çizgi --- */
.footer-col__title {
    margin: 0 0 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* --- Bağlantı listeleri --- */
.footer-col__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col__list li + li {
    margin-top: 13px;
}

.footer-col__list a,
.footer-contact a {
    color: rgba(255, 255, 255, .76);
    font-size: 14.5px;
    line-height: 1.5;
    transition: color .15s ease;
}

.footer-col__list a:hover,
.footer-contact a:hover {
    color: #fff;
}

/* --- İletişim --- */
.footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.5;
}

.footer-contact li + li {
    margin-top: 15px;
}

/* İkon sütunu sabit genişlikte: metinler tek dikey çizgide hizalansın.
   Yalnız gap verilseydi telefon/zarf/konum ikonlarının farklı
   genişlikleri yüzünden her satır farklı yerden başlardı. */
.footer-contact i {
    flex: 0 0 16px;
    margin-top: 4px;
    color: var(--theme-color);
    font-size: 14px;
    text-align: center;
}

/* --- Sosyal --- */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

.footer-social a:hover {
    background: var(--theme-color);
    color: #fff;
}

/* ============================================================
   GÜVEN VE ÖDEME KUŞAĞI
   Rozetler solda, ödeme sağda; ince ayraçla sütunlardan ayrı.
   ============================================================ */
.footer-trustbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px 48px;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-trustbar__label {
    display: block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .55);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Ödeme grubu sağa yaslanır ama dar ekranda sola döner
   (aşağıdaki medya kuralı). */
.footer-trustbar__group--payment {
    text-align: right;
}

.footer-trustbar__group--payment .footer-trustbar__label {
    text-align: right;
}

/* --- Rozetler --- */
.footer-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

/* Kutular BEYAZ: üç görselin ikisi (ETBİS kare kodu, Cloudflare)
   koyu çizgili; yeşil zemine doğrudan konunca okunmuyorlar.

   Yükseklik sabit, genişlik içeriğe göre. Hepsini kareye zorlamak
   Cloudflare'ı (1400x570, yani 2,46:1) minicik gösteriyordu. */
/* Kutu olcusu ve saydam zemin OtoSistem'in calisan yerlesiminden alindi
   (cert-tile): KARE kutu, yesilin ustunde hafif aydinlatilmis yuzey,
   ince kenarlik. Beyaz kutu denendi ama footer'da uc parlak leke gibi
   duruyordu; ETBIS gorseli zaten KENDI beyaz zeminini tasiyor.

   Her logoya AYRI max-height veriliyor -- ucunun orani cok farkli
   (ETBIS ve damga 1:1, Cloudflare 1400x570 yani 2,46:1). Tek olcu
   verilseydi Cloudflare kutunun icinde minicik kalirdi. */
.footer-trust__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    transition: background .15s ease;
}

.footer-trust__badge:hover {
    background: rgba(255, 255, 255, .08);
}

.footer-trust__badge img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Optik denge: kare kod kutuyu neredeyse doldurur, damga daha kucuk
   durur, genis Cloudflare logosu genislige gore sinirlanir. */
.footer-trust__badge--etbis img { max-height: 74px; }
.footer-trust__badge--seal img { max-height: 58px; }
.footer-trust__badge--cloudflare img { max-height: 42px; max-width: 76px; }

/* --- Ödeme bandı --- */
.footer-payment img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
    margin-left: auto;
}

/* ============================================================
   TELİF
   ============================================================ */
.footer-corporate__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-copyright,
.footer-build {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

.footer-build {
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

@media (max-width: 991.98px) {
    .footer-corporate__top { padding: 54px 0 42px; }

    /* Ödeme grubu sola döner: dar ekranda sağa yaslı tek öğe
       sayfanın ortasında asılı kalıyordu. */
    .footer-trustbar { gap: 26px; }
    .footer-trustbar__group--payment,
    .footer-trustbar__group--payment .footer-trustbar__label { text-align: left; }
    .footer-payment img { margin-left: 0; }

    .footer-corporate__bottom { justify-content: center; text-align: center; }
}

/* İletişim sayfası haritası — v1'den. Tam genişlik, sabit yükseklik;
   iframe varsayılan olarak satır içi öğe gibi davranıp altında boşluk
   bırakıyordu (display:block onu kapatıyor). */
.contact-map {
    line-height: 0;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    filter: grayscale(.25);
}

@media (max-width: 767.98px) {
    .contact-map iframe { height: 300px; }
}

/* ============================================================
   İÇ SAYFA BAŞLIK BANDI (breadcrumb)

   SORUN: 15 iç sayfa v1 temasının sınıf adlarını kullanıyor
   (.breadcrumb-section / .banner-content / .breadcrumb-list),
   v2 temasının style.css'i ise .breadcumb-wrapper / .breadcumb-title /
   .breadcumb-menu tanımlıyor. Yani HİÇBİR kural eşleşmiyordu:
   başlık koyu görselin üstünde koyu renkte çıkıyor, kırıntı yolu da
   madde imli düz <ul> olarak görünüyordu.

   ÇÖZÜM: 15 sayfayı tek tek düzenlemek yerine v1 adlarına v2 tasarımını
   veriyoruz. Tek yer, tek kural — yeni bir sayfa hangi adı kullanırsa
   kullansın doğru görünecek.
   ============================================================ */
.breadcrumb-section {
    position: relative;
    padding: 120px 0;
    background-color: var(--title-color);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: center;
}

.breadcrumb-section .banner-content {
    position: relative;
    z-index: 2;
}

/* Başlık: koyu görselin üstünde BEYAZ. Sayfalar bu bandı her zaman
   koyu bir fotoğrafla çiziyor; devralınan gövde rengi (koyu yeşil)
   yazıyı görünmez yapıyordu. Gölge, açık renkli fotoğraflarda da
   okunurluğu koruyor. */
.breadcrumb-section h1,
.breadcrumb-section .breadcumb-title {
    margin: 0;
    color: var(--white-color);
    font-family: var(--title-font);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* Kırıntı yolu: yatay, ayraçlı. list-style kaldırılmazsa tarayıcı
   varsayılan madde imlerini çiziyor (ekran görüntüsündeki noktalar). */
.breadcrumb-section .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: 100%;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-section .breadcrumb-list li {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.5;
}

/* Ayraç ::after ile — işaretleme her sayfada farklı yazılmış,
   araya <span> koymak 15 dosyayı düzenlemek demekti. */
.breadcrumb-section .breadcrumb-list li:not(:last-child)::after {
    content: '\f105'; /* fa-angle-right */
    /* Projede Font Awesome 6 PRO paketi var (fontawesome.min.css yalnızca
       "Font Awesome 6 Pro" / "... 6 Brands" tanımlıyor). "Free" adını
       yazmak ayracı sessizce kaybettiriyordu — tarayıcı yazı tipini
       bulamayınca glif basmıyor. */
    font-family: var(--icon-font), 'Font Awesome 6 Free';
    font-weight: 900;
    margin: 0 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

.breadcrumb-section .breadcrumb-list li a {
    color: rgba(255, 255, 255, .85);
    transition: color .15s ease;
}

.breadcrumb-section .breadcrumb-list li a:hover {
    color: var(--theme-color);
}

/* Son öğe geçerli sayfa: vurgulu ve tıklanmaz görünmeli. */
.breadcrumb-section .breadcrumb-list li:last-child {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .breadcrumb-section { padding: 84px 0; }
    .breadcrumb-section h1 { font-size: 34px; }
    .breadcrumb-section .breadcrumb-list li { font-size: 14px; }
}

@media (max-width: 575.98px) {
    .breadcrumb-section { padding: 64px 0; }
    .breadcrumb-section h1 { font-size: 27px; }
}

/* ============================================================
   İÇ SAYFA KART AİLELERİ

   ORTAK KÖK NEDEN: Bölgeler ve Aktiviteler sayfaları v1 temasının
   sınıf adlarıyla yazılmış (.destination-card, .event-info-card,
   .category-*), v2 temasının style.css'inde bu adların HİÇBİRİ yok.
   Yani sayfalar stilsiz HTML olarak çiziliyordu: görseller ham
   boyutta, başlıklar üst üste, kutular yok.

   15 sayfalık breadcrumb düzeltmesiyle aynı yaklaşım: işaretlemeyi
   sayfa sayfa değiştirmek yerine eksik kuralları TEK yerde yazıyoruz.
   ============================================================ */

/* ---------- Bölgeler: destinasyon kartları ---------- */
.destination-gallery-section .destination-card {
    position: relative;
    display: block;
    height: 100%;
    min-height: 300px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
}

/* Görsel kartı DOLDURUR. Ölçü verilmediğinde tarayıcı fotoğrafın
   doğal boyutunu kullanıyor (1500px+), kart taşıyordu. */
.destination-gallery-section .destination-card > img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    transition: transform .5s ease;
}

.destination-gallery-section .destination-card:hover > img {
    transform: scale(1.06);
}

/* Alttan yukarı koyu geçiş: başlık fotoğrafın açık kısımlarına
   denk geldiğinde de okunsun. */
.destination-gallery-section .destination-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%);
    pointer-events: none;
}

/* Üstteki .card-title ile alttaki .content AYNI metni taşıyor
   (şablondan kalma çift yazım) — üstteki gizleniyor, yoksa
   başlık kartta iki kez görünüyor. */
.destination-gallery-section .destination-card .card-title {
    display: none;
}

.destination-gallery-section .destination-card .content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 22px 20px;
}

.destination-gallery-section .destination-card .content h4 {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.3;
}

.destination-gallery-section .destination-card .content h4 a {
    color: #fff;
    transition: color .15s ease;
}

.destination-gallery-section .destination-card .content h4 a:hover {
    color: var(--theme-color);
}

.destination-gallery-section .destination-card .eg-tag span {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* Kartın tamamı tıklanabilir olsun: başlıktaki bağlantı kartı
   kaplayan görünmez bir katman kazanıyor. Ziyaretçi fotoğrafa
   tıklayınca hiçbir şey olmuyordu. */
.destination-gallery-section .destination-card .content h4 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (max-width: 575.98px) {
    .destination-gallery-section .destination-card,
    .destination-gallery-section .destination-card > img { min-height: 220px; }
}

/* ---------- Bölgeler: mozaik yerleşim ----------

   Kart genişlikleri eskiden görünümde col-lg-3/4/5 olarak elle yazılıyor ve
   her satırın 12'ye tamamlanması elle sağlanıyordu. Bölge sayısı değişince
   ritim sessizce bozuluyordu — Kıbrıs+Adalar listeden çıkınca son satırı
   3+5+4'ten 6+6'ya elle çevirmek gerekmişti.

   Ritim artık burada, altılı ve simetrik bir döngüde:
       1. satır  25% + 33.333% + 41.666%   (dar → orta → geniş)
       2. satır  41.666% + 33.333% + 25%   (geniş → orta → dar)
   Üçlü gruplar %100'e tam oturuyor, çıkarılan piksellerin toplamı da satır
   başına düşen 48px boşluğa eşit. Eksik son satırı flex-grow dolduruyor,
   min-width de dar ekranda 2'li ve 1'li düzeni media query olmadan getiriyor.

   DÖNGÜ NEDEN BU SIRADA: bölge fotoğrafları üç oran kümesinde kesilmiş —
   0.82 dikey, 1.12 kare, 1.42 yatay. ORDER_NO sırasında oranlar tam bu
   simetriyi izliyor (Akdeniz .82 · Ege 1.12 · Marmara 1.42 · Trakya 1.42 ·
   Karadeniz 1.12 · İç Anadolu .82 · Güneydoğu .82), yani her fotoğraf kendi
   oranına yakın slota düşüyor ve kırpma her kartta yumuşak kalıyor. Yeni bölge
   eklenirse eşleşme kayabilir; o gün ya fotoğrafı uygun orana kesin ya da
   ORDER_NO ile sırayı ayarlayın — ikisi de panelden yapılabilir, kod değişmez. */

.destination-gallery-section .region-mosaic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* Varsayılan: orta — kare fotoğrafların yeri. 6n+2 ve 6n+5 bu değerde kalır.
   min-width 200px: lg kırılımında kapsayıcı 960px ve dar slot 222px'e düşüyor;
   alt sınır bunun üstünde olsaydı üçlü satır sığmayıp sarılırdı. */
.destination-gallery-section .region-mosaic > .destination-card {
    flex: 1 1 calc(33.333% - 16px);
    min-width: 200px;
}

/* Dar — dikey fotoğraflar (oran ~0.82) */
.destination-gallery-section .region-mosaic > .destination-card:nth-child(6n+1),
.destination-gallery-section .region-mosaic > .destination-card:nth-child(6n+6) {
    flex-basis: calc(25% - 18px);
}

/* Geniş — yatay fotoğraflar (oran ~1.42) */
.destination-gallery-section .region-mosaic > .destination-card:nth-child(6n+3),
.destination-gallery-section .region-mosaic > .destination-card:nth-child(6n+4) {
    flex-basis: calc(41.666% - 14px);
}

/* Masaüstünde kartlar KENDİ ölçüsünde kalır — flex-grow kapalı.
   Açıkken son satırda tek kart kalınca (7 bölge = 3+3+1) o kart satırın
   tamamını kaplıyordu: 1140x300 kutu, oran 3.8, dikey fotoğrafın neredeyse
   tamamı kırpılıyordu. Üçlü grup zaten %100'e tam oturduğu için dolu
   satırlarda büyümeye ihtiyaç yok; eksik satır da justify-content:center
   ile ortalanıyor ve kartlar oranlarını koruyor.

   Sınır yalnız masaüstünde. Altında büyüme açık kalır: orada satır başına
   iki ya da tek kart düşer ve kartın satırı doldurması istenen davranıştır. */
@media (min-width: 992px) {
    .destination-gallery-section .region-mosaic > .destination-card {
        flex-grow: 0;
    }
}

/* Tablette alt sınır yükselir: 200px ile satıra üç kart sığabiliyor ve
   "Güneydoğu Anadolu Bölgesi" gibi başlıklar üç satıra kırılıp sıkışıyordu.
   280px, 720px'lik kapsayıcıda üçüncü kartı taşırıp düzeni 2'li tutuyor. */
@media (max-width: 991.98px) {
    .destination-gallery-section .region-mosaic > .destination-card {
        min-width: 280px;
    }
}

/* Tablette büyüme AÇIK kalmak zorunda — alt sınır devreye girdiği için üçlü
   grubun tam oturma özelliği orada geçerli değil, satırı flex-grow dolduruyor.
   Ama son satırda tek kart kalınca aynı büyüme onu 720px'e yayıyordu (dikey
   fotoğraf için oran 1.95). Üst sınır yalnız o kartı ilgilendiriyor: ikili
   satırın kartları zaten %48 civarında, sınırın altında kalıyorlar. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .destination-gallery-section .region-mosaic > .destination-card {
        max-width: 60%;
    }
}

/* ---------- Aktiviteler: bilgi kartları ---------- */
.event-info-card,
.event-category-card {
    height: 100%;
    padding: 30px 26px;
    border: 1px solid var(--th-border-color, #e5e9e5);
    border-radius: 16px;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}

.event-info-card:hover,
.event-category-card:hover {
    box-shadow: 0 12px 30px rgba(33, 48, 31, .1);
    transform: translateY(-3px);
}

.event-info-card .card-icon,
.event-category-card .category-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #eef4ef;
}

/* Sayfa işaretlemesinde ikon boyutu satır içi stille veriliyordu
   (font-size: 2.5rem) ve kutuyu taşırıyordu. */
.event-info-card .card-icon i,
.event-category-card .category-image i {
    font-size: 22px !important;
    color: var(--theme-color) !important;
}

.event-info-card h4,
.event-info-card h5,
.event-category-card h4,
.event-category-card h5 {
    margin: 0 0 10px;
    font-size: 19px;
    color: var(--title-color);
}

.event-info-card p,
.event-category-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body-color);
}

.pd-header h2 {
    margin-bottom: 14px;
}

.pd-header .lead {
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.75;
    color: var(--body-color);
}

/* "Yakında" bloğu — sayfanın ana mesajı, kutuyla ayrılıyor. */
.events-coming-soon {
    padding: 44px 32px;
    border-radius: 18px;
    background: #f5f8f5;
    text-align: center;
}

.events-coming-soon .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

/* ============================================================
   İÇ SAYFA İSKELETİ + KENAR SÜTUNU + İLETİŞİM

   Breadcrumb ve kart aileleriyle AYNI kök neden: İletişim, SSS ve
   Aktiviteler sayfaları v1 temasının sınıf adlarıyla yazılmış
   (.package-details-*, .single-*-widget, .contact-*, .primary-btn1),
   v2'nin style.css'i bu adların HİÇBİRİNİ tanımıyor. Sayfa stilsiz
   HTML olarak çiziliyordu: kenar sütunu kutusuz, listeler madde imli,
   düğmeler düz bağlantı.

   Sayfaları tek tek v2 adlarına çevirmek yerine eksik adlara v2'nin
   tasarımını veriyoruz — tek yer, dört sayfa.
   ============================================================ */

/* ---------- Düğmeler: v1 adları, v2 görünümü ----------
   style.css'te .th-btn var, .primary-btn1/2 yok. Dört sayfa
   (İletişim, Aktiviteler, Bölge, kamp alanı kartı) v1 adını
   kullanıyor; ikisini eşliyoruz. */
.primary-btn1,
.primary-btn2 {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 32px;
    border: 1px solid var(--theme-color);
    border-radius: 48px;
    background-color: var(--theme-color);
    color: var(--white-color);
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: all .3s ease-out;
}

.primary-btn1:hover,
.primary-btn1:focus-visible {
    background-color: var(--title-color);
    border-color: var(--title-color);
    color: var(--white-color);
}

/* İkincil düğme: aynı ölçü, boş gövde. Yan yana durduklarında
   hangisinin ana eylem olduğu görünsün. */
.primary-btn2 {
    background-color: transparent;
    color: var(--title-color);
    border-color: var(--gray-color);
}

.primary-btn2:hover,
.primary-btn2:focus-visible {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white-color);
}

/* ---------- Sayfa gövdesi ---------- */
.package-details-area,
.contact-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

/* pt-120/pb-120/mb-120 yardımcı sınıfları işaretlemede duruyor ama
   style.css'te tanımlı değil; boşluk yukarıdaki kuraldan geliyor.
   Bu iki satır olmadan sayfa başlık bandına yapışıyordu. */
.package-details-area.pt-120,
.contact-section.pt-120 { padding-top: 90px; }

.package-details-area.mb-120 { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .package-details-area,
    .contact-section,
    .package-details-area.pt-120,
    .contact-section.pt-120 {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

.package-details-content,
.contact-content {
    max-width: 100%;
}

.pd-header {
    margin-bottom: 32px;
}

.package-details-content .pd-header h2,
.contact-content .section-title h2 {
    margin: 0 0 12px;
    font-family: var(--title-font);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--title-color);
}

/* ---------- Statik içerik (static_pages/*.html) ----------
   Bu gövde Html.Raw ile geliyor; sınıf veremiyoruz, seçici
   sarmalayıcı üzerinden inmek zorunda. */
.static-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--body-color);
}

.static-content h2,
.static-content h3,
.static-content h4 {
    margin: 32px 0 12px;
    font-family: var(--title-font);
    color: var(--title-color);
    line-height: 1.3;
}

.static-content h2 { font-size: 26px; }
.static-content h3 { font-size: 21px; }
.static-content h4 { font-size: 18px; }
.static-content > :first-child { margin-top: 0; }

.static-content p { margin: 0 0 16px; }

.static-content ul,
.static-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.static-content li { margin-bottom: 8px; }

.static-content a {
    color: var(--theme-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.static-content table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.static-content th,
.static-content td {
    padding: 10px 12px;
    border: 1px solid var(--th-border-color);
    text-align: left;
    vertical-align: top;
}

.static-content th {
    background: var(--smoke-color2);
    color: var(--title-color);
    font-weight: 600;
}

/* ---------- Kenar sütunu (SSS + İletişim ortak) ---------- */
.package-details-sidebar,
.contact-sidebar {
    position: sticky;
    top: 100px;
}

.single-sidebar-widget,
.single-contact-widget {
    padding: 26px 24px;
    border: 1px solid var(--th-border-color);
    border-radius: 16px;
    background: var(--white-color);
}

.single-sidebar-widget + .single-sidebar-widget,
.single-contact-widget + .single-contact-widget,
.single-sidebar-widget.mb-30,
.single-contact-widget.mb-30 {
    margin-bottom: 24px;
}

.single-sidebar-widget .widget-title,
.single-contact-widget .widget-title {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--th-border-color);
}

.single-sidebar-widget .widget-title h4,
.single-contact-widget .widget-title h4 {
    margin: 0;
    font-family: var(--title-font);
    font-size: 19px;
    font-weight: 700;
    color: var(--title-color);
}

.sidebar-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-list li + li {
    margin-top: 4px;
}

.sidebar-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    color: var(--body-color);
    font-size: 15px;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}

/* Ayrı bir <i> yok — ok işareti ::before ile geliyor ki
   işaretlemeye dokunmadan liste "bağlantı" gibi okunsun. */
.sidebar-list li a::before {
    content: '\f105';
    font-family: var(--icon-font), 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: var(--theme-color);
}

.sidebar-list li a:hover {
    color: var(--theme-color);
    padding-left: 4px;
}

@media (max-width: 1199.98px) {
    .package-details-sidebar,
    .contact-sidebar { position: static; }
}

/* ---------- İletişim: bilgi listesi ---------- */
.contact-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-info-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    background: var(--smoke-color2);
}

.contact-info-list li + li {
    margin-top: 12px;
}

/* İkon kutusu SABİT ölçüde: flex öğesi olarak daralmasına izin
   verilirse uzun e-posta adresi yuvarlağı ezip oval yapıyor. */
.contact-info-list .icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--white-color);
    font-size: 17px;
}

.contact-info-list .content {
    min-width: 0;
}

.contact-info-list .content h6 {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--body-color);
}

.contact-info-list .content a,
.contact-info-list .content span {
    display: block;
    color: var(--title-color);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-info-list .content a:hover {
    color: var(--theme-color);
}

/* ---------- İletişim: sosyal hesaplar ---------- */
.contact-sidebar .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-sidebar .social-link {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--white-color);
    font-size: 16px;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease;
}

.contact-sidebar .social-link:hover {
    background: var(--title-color);
    color: var(--white-color);
    transform: translateY(-3px);
}

/* ---------- Form alanları (İletişim + talep formları ortak) ---------- */
.bicamps-form .form-group,
.contact-form .form-group {
    margin-bottom: 20px;
}

.bicamps-form label,
.contact-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--title-color);
    font-size: 15px;
    font-weight: 600;
}

.bicamps-form .form-control,
.bicamps-form .form-select,
.contact-form .form-control {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--th-border-color);
    border-radius: 12px;
    background: var(--white-color);
    color: var(--title-color);
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.bicamps-form .form-control:focus,
.bicamps-form .form-select:focus,
.contact-form .form-control:focus {
    outline: none;
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(43, 149, 101, .15);
}

.bicamps-form .form-control.is-invalid,
.contact-form .form-control.is-invalid {
    border-color: var(--error-color);
}

.bicamps-form textarea.form-control,
.contact-form textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

.bicamps-form .form-text,
.contact-form .form-text {
    display: block;
    margin-top: 6px;
    color: var(--body-color);
    font-size: 13px;
}

/* ---------- Bal küpü ----------
   `display: none` KULLANILMIYOR: bazı otomatik gönderim araçları gizli
   alanları atlar. Alan gerçekten sayfada duruyor, sadece görüntü
   alanının dışında. aria-hidden + tabindex="-1" ekran okuyucuyu ve
   klavye gezinmesini dışarıda tutar. */
.bicamps-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   SSS (Sıkça Sorulan Sorular)

   Açılır kapanır davranış <details>/<summary> ile geliyor; JavaScript
   yok. Bootstrap akordeonu id eşleştirmesi istiyor, içerik ise statik
   HTML dosyasından (static_pages/<dil>/faq.html) basılıyor — orada
   benzersiz id üretecek bir yer yok.
   ============================================================ */
.static-content .faq-intro {
    padding: 16px 18px;
    margin-bottom: 28px;
    border-left: 3px solid var(--theme-color);
    border-radius: 0 12px 12px 0;
    background: var(--smoke-color);
    font-size: 15px;
}

.static-content .faq-group {
    margin-bottom: 34px;
}

.static-content .faq-group > h2 {
    margin: 0 0 16px;
    font-size: 22px;
}

.static-content .faq-item {
    border: 1px solid var(--th-border-color);
    border-radius: 12px;
    background: var(--white-color);
    overflow: hidden;
}

.static-content .faq-item + .faq-item {
    margin-top: 10px;
}

.static-content .faq-item > summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
    transition: background-color .15s ease;
}

/* Tarayıcının varsayılan üçgeni iki motorda iki farklı yerde çiziliyor;
   ikisini de kapatıp kendi işaretimizi koyuyoruz. */
.static-content .faq-item > summary::-webkit-details-marker { display: none; }
.static-content .faq-item > summary::marker { content: ''; }

.static-content .faq-item > summary::before {
    content: '\f067'; /* fa-plus */
    font-family: var(--icon-font), 'Font Awesome 6 Free';
    font-weight: 900;
    flex: 0 0 22px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--theme-color);
    transition: transform .2s ease;
}

.static-content .faq-item[open] > summary::before {
    content: '\f068'; /* fa-minus */
}

.static-content .faq-item > summary:hover {
    background: var(--smoke-color2);
}

.static-content .faq-item[open] > summary {
    background: var(--smoke-color);
}

.static-content .faq-answer {
    padding: 4px 18px 18px 52px;
    font-size: 15px;
}

.static-content .faq-answer > :last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .static-content .faq-answer { padding-left: 18px; }
}

/* Yardım kutusu kenar sütununda: düğme kutuya sığsın. */
.faq-help-box .widget-body p {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.7;
}

.faq-help-box .primary-btn1 {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 15px;
}

/* ============================================================
   AKTİVİTELER SAYFASI + TALEP FORMLARI
   ============================================================ */
.activity-section {
    padding: 80px 0;
}

/* Bölümler dönüşümlü zeminde: kart aileleri beyaz olduğu için düz
   beyaz sayfada bölüm sınırı görünmüyordu. */
.activity-section--tinted {
    background: var(--smoke-color);
}

@media (max-width: 991.98px) {
    .activity-section { padding: 52px 0; }
}

.activity-partners {
    margin-top: 8px;
    padding: 24px 26px;
    border: 1px solid var(--th-border-color);
    border-left: 3px solid var(--theme-color);
    border-radius: 0 16px 16px 0;
    background: var(--white-color);
}

.activity-partners h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--title-font);
    font-size: 19px;
    font-weight: 700;
    color: var(--title-color);
}

.activity-partners h3 i { color: var(--theme-color); }

.activity-partners p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--body-color);
}

/* ---------- Konaklama / ulaşım satırları ---------- */
.activity-option {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: 22px;
    border: 1px solid var(--th-border-color);
    border-radius: 16px;
    background: var(--white-color);
}

/* İkon kutusu sabit: flex öğesi olarak daralmasına izin verilirse
   uzun başlıkta yuvarlak eziliyor. */
.activity-option__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(43, 149, 101, .1);
    color: var(--theme-color);
    font-size: 18px;
}

.activity-option h5 {
    margin: 0 0 6px;
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--title-color);
}

.activity-option p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body-color);
}

/* ---------- Form kartı ---------- */
.activity-form-card {
    padding: 40px;
    border: 1px solid var(--th-border-color);
    border-radius: 20px;
    background: var(--white-color);
}

@media (max-width: 575.98px) {
    .activity-form-card { padding: 24px 18px; }
}

.activity-form-card .pd-header { margin-bottom: 26px; }

.form-section-title {
    margin: 34px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--th-border-color);
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--title-color);
}

.form-section-title:first-of-type { margin-top: 0; }

.bicamps-form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}

.bicamps-form legend {
    float: none;
    width: auto;
    margin-bottom: 8px;
    padding: 0;
    color: var(--title-color);
    font-size: 15px;
    font-weight: 600;
}

/* ---------- Seçim rozetleri ----------
   Onay kutusu görünür kalıyor: "seçili mi değil mi" sorusunun cevabını
   yalnızca arka plan rengine bağlamak renk körlüğünde okunmuyor. */
/* İki kolon SABİT, auto-fill değil. minmax(210px,1fr) geniş ekranda dörde
   çıkıyordu ve "Bisiklet ve Motosiklet Turları" gibi uzun etiketler kutuya
   sığmayıp iki-üç satıra sarıyordu. Etiket uzunluğu içerikten geliyor, yani
   sütun sayısını ekran genişliğine bırakmak sarmayı kaçınılmaz kılıyor. */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

/* Dar ekranda iki kolon da dar kalıyor: tek kolona in. */
@media (max-width: 575.98px) {
    .choice-grid {
        grid-template-columns: 1fr;
    }
}

/* Hizalama flex-start: uzun etiketler ("Bisiklet ve Motosiklet Turları")
   iki satıra sarıyor ve ortalanmış kutu o zaman metnin ortasında asılı
   kalıyordu. Kutu ilk satırla hizalı duruyor, sarma olsun olmasın aynı
   yerde. */
.choice-chip,
.choice-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--th-border-color);
    border-radius: 12px;
    background: var(--white-color);
    color: var(--title-color);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

/* style.css GLOBAL olarak `input[type=checkbox]` ve `input[type=radio]`
   için display:none + visibility:hidden + opacity:0 yazıyor (temanın kendi
   özel işaret kutuları için). Bu üçünü geri açmak ZORUNLU: display:none
   olan bir denetim klavyeyle odaklanamaz, yani seçim yalnız fareyle
   yapılabilir hâle gelir. Seçili olup olmadığını sadece arka plan tonuna
   bırakmak da renk körlüğünde okunmuyor. */
.choice-chip input,
.choice-radio input,
.form-consent input {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    /* Satır yüksekliğinin ortasına: 15px yazının optik merkezi. */
    margin-top: 2px;
    accent-color: var(--theme-color);
    cursor: pointer;
}

.choice-chip span,
.choice-radio span {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}

/* İkon da ilk satırla hizalı kalsın. */
.choice-chip span i {
    margin-top: 3px;
}

.choice-chip span i { color: var(--theme-color); }

/* ------------------------------------------------------------------
   Simge solda, isaret kutusu sagda.
   Markup'ta <input> once geliyor; sirasi CSS'te cevriliyor cunku
   <label> sarmalini bozmak dokunma alanini kucultur (etikete dokunmak
   da secimi degistiriyor — mobilde asil tiklanabilir yuzey bu).
   ------------------------------------------------------------------ */
.choice-chip,
.choice-radio {
    align-items: center;
}

    .choice-chip > span,
    .choice-radio > span {
        order: 1;
        flex: 1 1 auto;
        align-items: center;
    }

    .choice-chip > input,
    .choice-radio > input {
        order: 2;
        margin-top: 0;
        margin-left: auto;
    }

/* Dikey hizalama artik ortalandigi icin ikonun ust bosluguna gerek yok. */
.choice-chip > span i { margin-top: 0; }

.choice-chip:hover,
.choice-radio:hover {
    border-color: var(--theme-color);
}

.choice-chip:has(input:checked),
.choice-radio:has(input:checked) {
    border-color: var(--theme-color);
    background: rgba(43, 149, 101, .07);
}

/* Klavye ile gezinenin nerede olduğu görünsün — :has() desteklenmese de
   bu kural çalışır. */
.choice-chip:focus-within,
.choice-radio:focus-within {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(43, 149, 101, .15);
}

.choice-inline {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.choice-inline--wrap { flex-wrap: wrap; }

@media (max-width: 575.98px) {
    .choice-inline { flex-direction: column; }
}

/* ---------- Onay ve gönderim ---------- */
.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 26px 0 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--smoke-color2);
}

.form-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.form-consent label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--body-color);
}

/* Temanın SAHTE işaret kutusunu kapat.
   style.css (ve custom.css'in üst tarafı) `input[type=checkbox] ~ label::before`
   ile kendi kutusunu çiziyor; bizim düzenimizde input ile label KARDEŞ olduğu
   için kural buraya da işliyordu ve satırın sağ ucunda ikinci, tıklanmayan bir
   kutu beliriyordu. Gerçek denetim solda ve görünür durumda — sahte olan gitmeli.
   (Rozetlerde sorun yok: orada input label'ın İÇİNDE, kardeş seçici tutmuyor.) */
.form-consent input ~ label::before,
.form-consent input ~ label::after {
    content: none;
    display: none;
}

.form-consent a {
    color: var(--theme-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-required-note {
    margin: 0 0 20px;
    color: var(--body-color);
    font-size: 13px;
}

/* ---------- Rehber / operatör çağrısı ---------- */
.guide-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    border-radius: 20px;
    background: var(--title-color);
    color: var(--white-color);
}

.guide-cta__icon {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--white-color);
    font-size: 24px;
}

.guide-cta__body { flex: 1 1 auto; }

.guide-cta h3 {
    margin: 0 0 8px;
    font-family: var(--title-font);
    font-size: 21px;
    font-weight: 700;
    color: var(--white-color);
}

.guide-cta p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .82);
}

/* Düğme koyu zeminde: yeşil dolgu okunuyor, ama üzerine gelince
   koyu renge dönmesi zeminde kaybolmasına yol açardı. */
.guide-cta .primary-btn1 {
    flex: 0 0 auto;
    white-space: nowrap;
}

.guide-cta .primary-btn1:hover {
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--title-color);
}

@media (max-width: 991.98px) {
    .guide-cta {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ============================================================
   KAMP SİHİRBAZI
   ============================================================ */
.wizard-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 16px;
    border: 1px solid rgba(43, 149, 101, .35);
    border-radius: 999px;
    background: rgba(43, 149, 101, .08);
    color: var(--theme-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Video 16:9 kutuda: yükseklik veren bir kural olmadan tarayıcı dosya
   çözünürlüğünü kullanıyor ve yüklenene kadar sayfa zıplıyor. */
.wizard-video {
    position: relative;
    max-width: 900px;
    margin: 8px auto 40px;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: var(--smoke-color);
}

.wizard-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wizard-intro {
    max-width: 860px;
    margin: 0 auto;
}

.wizard-intro p {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--body-color);
}

.wizard-intro p:last-child { margin-bottom: 0; }

/* ---------- Adımlar ---------- */
.wizard-steps {
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.wizard-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 0 30px 0;
}

/* Adımlar arası dikey çizgi: sıranın akış olduğunu gösterir.
   Son adımda çizgi yok, yoksa boşluğa doğru uzuyor. */
.wizard-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 46px;
    bottom: 8px;
    width: 2px;
    background: var(--th-border-color);
}

.wizard-step__no {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--white-color);
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 700;
    z-index: 1;
}

.wizard-step h5 {
    margin: 10px 0 6px;
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color);
}

.wizard-step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--body-color);
}

/* ---------- Durum kutusu ---------- */
.wizard-status {
    margin-bottom: 32px;
    padding: 22px 24px;
    border: 1px solid var(--th-border-color);
    border-left: 3px solid var(--theme-color);
    border-radius: 0 14px 14px 0;
    background: var(--smoke-color2);
}

.wizard-status h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color);
}

.wizard-status h3 i { color: var(--theme-color); }

.wizard-status p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--body-color);
}

.wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ============================================================
   KART GÖRSELİ — sabit oran, ortalı kırpma
   ============================================================
   Tema `.tour-box_img img` için yalnız `width: 100%` veriyor; yükseklik
   kaynağın kendi oranından geliyordu. Oranı farklı TEK bir kayıt (ör.
   "Kuzuyayla Tabiat Parkı") kartı diğerlerinden kısa bırakıyor ve ızgarada
   satır hizası bozuluyordu.

   Görseller zaten 400x300 (4:3) üretiliyor — GetCachedImagePath(..., 400, 300, 75).
   Kutu o orana sabitleniyor; oranı tutmayan kaynak `cover` ile ORTADAN
   kırpılıyor, yani kartın tasarımı yerine görselin kenarları feragat ediyor.

   `object-position: center` açıkça yazıldı: varsayılan zaten "50% 50%" ama
   niyet belli olsun — kırpma merkezden, üstten/alttan değil. */
.tour-box .tour-box_img {
    aspect-ratio: 4 / 3;
}

.tour-box .tour-box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Satırdaki kartlar aynı yükseklikte bitsin. Bootstrap sütunu zaten
   gerilir; kutunun onu doldurması gerekiyor. */
.tour-box {
    height: 100%;
}

/* ============================================================
   MOBIL FILTRE PANELI (kamp alani listesi)
   Masaustu tasarim DEGISMEZ: asagidaki her sey yalniz
   <992px'te devreye girer. 992px ve ustunde kenar cubugu
   eskisi gibi sayfa akisinda durur, buradaki ogeler gizlidir.
   ============================================================ */
.cs-filter-toggle,
.cs-filter-tab,
.cs-filter-backdrop,
.cs-filter-head,
.cs-filter-apply {
    display: none;
}

@media (max-width: 991.98px) {

    /* --- Arama cubugu sayfa kaydirilirken ustte kalir --- */
    .th-sort-bar {
        position: sticky;
        top: 0;
        z-index: 1035;
        background: var(--white-color, #fff);
        padding: 10px 0;
        margin-bottom: 20px;
        box-shadow: 0 6px 16px rgba(15, 33, 23, .06);
    }

    .search-form-area {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .search-form-area .search-form {
            flex: 1 1 auto;
            min-width: 0;
        }

    /* --- Arama cubugundaki filtre dugmesi --- */
    .cs-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        height: 46px;
        padding: 0 14px;
        border: 1px solid var(--th-border-color, #e0e5e0);
        border-radius: 10px;
        background: #fff;
        color: var(--title-color, #111);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* --- Kenardaki kulakcik: panel kapaliyken hep erisilebilir --- */
    .cs-filter-tab {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        position: fixed;
        left: 0;
        top: 45%;
        z-index: 1035;
        padding: 12px 7px;
        border: 0;
        border-radius: 0 12px 12px 0;
        background: var(--theme-color, #2b9565);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        box-shadow: 0 4px 14px rgba(15, 33, 23, .22);
    }

        .cs-filter-tab span {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        .cs-filter-tab i {
            font-size: 14px;
        }

    /* --- Panel: kenardan kayarak girer --- */
    .sidebar-area.style2 {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1045;
        width: min(86vw, 360px);
        margin: 0;
        padding: 0 16px 16px;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-102%);
        transition: transform .25s ease;
        box-shadow: 0 0 36px rgba(15, 33, 23, .26);
        /* "Sonuclari goster" seridi akisin sonunda yapisik durdugu icin
           ayrica bir bosluk payi gerekmiyor; 84px bos alan birakiyordu. */
        padding-bottom: 16px;
    }

        .sidebar-area.style2.is-open {
            transform: translateX(0);
        }

    .cs-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(9, 20, 14, .48);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

        .cs-filter-backdrop.is-open {
            opacity: 1;
            visibility: visible;
        }

    /* Panel acikken arka plan kaymasin. */
    body.cs-filter-lock {
        overflow: hidden;
    }

    /* --- Panel basligi --- */
    .cs-filter-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 -16px 12px;
        padding: 14px 16px;
        background: #fff;
        border-bottom: 1px solid var(--th-border-color, #e6ebe6);
    }

    .cs-filter-head__title {
        font-size: 17px;
        font-weight: 700;
        color: var(--title-color, #111);
    }

    .cs-filter-close {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: #f1f4f1;
        color: #333;
        font-size: 15px;
    }

    /* --- Her filtre grubu kendi icinde acilir/kapanir --- */
    .sidebar-area.style2 .widget {
        margin-bottom: 8px;
        padding: 0;
        border: 1px solid var(--th-border-color, #e6ebe6);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

        .sidebar-area.style2 .widget > .widget_title {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            margin: 0;
            padding: 13px 14px;
            font-size: 15px;
            line-height: 1.3;
            cursor: pointer;
            background: #f7faf7;
        }

            /* Temanin baslik altina cizdigi iki ince serit (gri cizgi + yesil
               kisa cubuk) burada islevsiz: baslik artik kendi kutusunun
               basligi. Ustelik ::after'i ok olarak kullaniyoruz — devralinan
               "height:3px; position:absolute" degerleri temizlenmezse ok
               3 piksellik yesil bir kutuya sikisip gorunmez oluyordu. */
            .sidebar-area.style2 .widget > .widget_title::before {
                display: none;
            }

            /* Ozellik gruplarinda baslik bir <div>, icindeki <h3> tema
               olculerini tasiyordu; kutu basligiyla ayni boyda olsun. */
            .sidebar-area.style2 .widget > .widget_title > h3 {
                margin: 0;
                font-size: inherit;
                line-height: inherit;
                font-weight: 600;
            }

            /* Baslikta duran "ozellik ekle" dugmesi sagda, okun solunda. */
            .sidebar-area.style2 .widget > .widget_title > button {
                margin-left: auto;
                flex: 0 0 auto;
            }

            /* Acilir/kapanir oldugunu gosteren ok. */
            .sidebar-area.style2 .widget > .widget_title::after {
                content: "\f078"; /* chevron-down */
                font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", var(--icon-font);
                font-weight: 900;
                font-size: 12px;
                line-height: 1;
                color: #6b7280;
                transition: transform .2s ease;
                position: static;
                width: auto;
                height: auto;
                background: none;
                margin-left: auto;
                flex: 0 0 auto;
            }

        .sidebar-area.style2 .widget.is-collapsed > .widget_title::after {
            transform: rotate(-90deg);
        }

        /* Govde: baslik disindaki her sey. */
        .sidebar-area.style2 .widget > *:not(.widget_title) {
            padding-left: 14px;
            padding-right: 14px;
        }

        /* Tema kategori listesini "margin: -20px 0" ile yukari cekiyor; bu,
           30px alt bosluklu masaustu basligina gore ayarli. Mobil baslik
           bitisik oldugu icin ayni negatif bosluk listeyi basligin UZERINE
           bindiriyordu (ilk secenek baslikla ust uste biniyordu). */
        .sidebar-area.style2 .widget > ul {
            margin-top: 10px;
            margin-bottom: 0;
        }

        .sidebar-area.style2 .widget > *:last-child:not(.widget_title) {
            padding-bottom: 12px;
        }

        .sidebar-area.style2 .widget.is-collapsed > *:not(.widget_title) {
            display: none;
        }

    /* --- Alt serit: sonuca don --- */
    .cs-filter-apply {
        display: block;
        position: sticky;
        bottom: 0;
        margin: 12px -16px -16px;
        padding: 12px 16px;
        background: #fff;
        border-top: 1px solid var(--th-border-color, #e6ebe6);
        /* Uzerinden kayan filtre gruplarindan ayrissin. */
        box-shadow: 0 -8px 16px rgba(15, 33, 23, .08);
    }
}

/* ============================================================
   FORM SONUC MODALI
   Gonderim sonrasi "alindi / iletilemedi" geri bildirimi.
   ============================================================ */
.form-result-modal {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 22px 46px rgba(14, 33, 24, .2);
}

.form-result-modal__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2rem;
}

    .form-result-modal__icon.is-success {
        background-color: rgba(43, 149, 101, .12);
        color: #2b9565;
    }

    .form-result-modal__icon.is-error {
        background-color: rgba(200, 55, 55, .12);
        color: #c83737;
    }

.form-result-modal__channels {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-result-modal__channels li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 1.45;
    }

        .form-result-modal__channels li.is-ok {
            background-color: rgba(43, 149, 101, .08);
            color: #217a52;
        }

        .form-result-modal__channels li.is-warn {
            background-color: rgba(217, 164, 6, .12);
            color: #8a6a04;
        }

/* Bu modal kisa; genel .modal-body kaydirma kurali burada gereksiz. */
.form-result-modal .modal-body {
    max-height: none;
    overflow-y: visible;
}