/* ================================================================
   DESIGN TOKENS — single source of truth
   ----------------------------------------------------------------
   Monochrome base: black accent on a neutral gray ramp.
   The three former :root blocks (style.css head, "DESIGN TOKENS",
   step2 block) are merged here; their old names are kept below as
   aliases so existing rules keep resolving.
   Change a value here, not in the rules.
   ================================================================ */
:root {

    /* --- Neutral ramp (only gray scale used site-wide) --- */
    --n-0: #ffffff;
    --n-25: #fafafa;
    --n-50: #f5f5f5;
    --n-100: #ededed;
    --n-200: #e0e0e0;
    --n-300: #cccccc;
    --n-400: #a3a3a3;
    --n-500: #7a7a7a;
    --n-600: #575757;
    --n-700: #3d3d3d;
    --n-800: #262626;
    --n-900: #141414;
    --n-1000: #000000;

    /* --- Accent: pure mono. Swap these 5 to re-brand the whole site --- */
    --accent: #000000;
    --accent-hover: #1f1f1f;
    --accent-fg: #ffffff;
    --accent-soft: #f5f5f5;
    --accent-on-dark: #ffffff;

    /* --- Mavi vurgu (2026-08-10): monokrom paletin uzerine tek renk aksan.
       Zemin #2896c9 uzerinde beyaz yazi 3.34:1 -- buton/etiket gibi kalin ve
       kisa metinler icin yeterli, uzun gri-tonlu paragraf icin degil.
       Beyaz zeminde yazi rengi olarak --turkuaz-dark kullan (7.0:1). */
    --turkuaz: #2896c9;
    --turkuaz-hover: #2280ad;
    --turkuaz-dark: #1a6288;
    --turkuaz-fg: #ffffff;
    --turkuaz-soft: #eaf5fb;

    /* --- Semantic surfaces --- */
    --surface: #ffffff;
    --surface-2: var(--n-50);
    --surface-3: var(--n-100);
    --surface-inverse: #000000;

    /* --- Semantic text --- */
    --text: var(--n-900);
    --text-2: var(--n-700);
    --text-muted: var(--n-500);
    --text-inverse: #ffffff;

    /* --- Borders --- */
    --border: var(--n-200);
    --border-strong: var(--n-300);
    --border-inverse: rgba(255, 255, 255, 0.18);

    /* --- Status (only colored hues in the system) --- */
    --success: #15803d;
    --success-soft: #eef7f1;
    --danger: #b91c1c;
    --danger-soft: #fdf1f1;
    --warning: #b45309;
    --warning-soft: #fdf6ec;
    --info: var(--n-800);
    --info-soft: var(--n-100);

    /* --- Radii --- */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* --- Elevation --- */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, .06), 0 2px 10px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);

    /* --- Motion --- */
    --transition: 0.22s ease;
    --main-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Spacing --- */
    --column-gap: 10px;
    --main-gap: 20px;
    --section-gap: 60px;

    /* --- Typography --- */
    --font-size: 15px;
    --mobile-font-size: 14px;
    --line-height: 1.6em;
    --letter-spacing: 0.3px;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-family-base: "Google Sans", "Segoe UI", "Roboto", sans-serif;
    --font-family-display: "Google Sans", "Segoe UI", "Roboto", sans-serif;
    --font-family-mono: "Ubuntu Sans Mono", "SFMono-Regular", "Menlo", monospace;
    --font-display: var(--font-family-display);

    /* --- Form elements --- */
    --input-color: var(--text);
    --input-padding: 0 16px;
    --input-height: 48px;
    --input-border: solid 1px var(--border-strong);
    --placeholder-color: var(--text-muted);
    --textarea-padding: 12px 16px;
    --button-color: var(--accent);
    --button-hover-color: var(--accent-hover);
    --button-padding: 0 32px;
    --button-height: 48px;
    --button-border: none;

    /* --- Media ratios (overridden per request by inc/css.php) --- */
    --transfer-media-ratio: 4 / 1;

    /* ============================================================
       LEGACY ALIASES — kept so old rules keep working.
       Do not use these in new CSS; use the semantic names above.
       ============================================================ */

    /* was: brand palette (orange) -- 2026-08-10: mavi aksana baglandi.
       Bu aliaslar fiyat, adim gostergesi ve gradyan butonlarda kullaniliyor;
       beyaz zemin uzerinde yazi olarak da ciktiklari icin acik ton degil
       --turkuaz-dark alinir. */
    --brand-primary: var(--turkuaz-dark);
    --brand-gold: var(--turkuaz);
    --brand-gold-dark: var(--turkuaz-hover);
    --brand-dark: var(--n-900);
    --brand-light: var(--n-50);

    /* was: gold palette */
    --gold: var(--turkuaz-dark);
    --gold-dark: var(--turkuaz-hover);
    --gold-light: var(--n-100);

    /* was: navy palette */
    --navy: var(--n-1000);
    --navy-800: var(--n-900);
    --navy-600: var(--n-800);
    --navy-100: var(--n-100);
    --step2-navy: var(--n-1000);

    /* was: site properties */
    --background-color: var(--surface);
    --main-color: var(--accent);
    --alternate-color: var(--surface-2);
    --main-text-color: var(--text);
    --soft-text-color: var(--text-muted);
    --white: #ffffff;
    --light: var(--n-50);
    --light-alt: var(--n-100);
    --c-bg: var(--n-50);
    --border-color: rgba(0, 0, 0, 0.14);
    --transparent-color: rgba(0, 0, 0, 0.1);
    --transparent-color-2: rgba(0, 0, 0, 0.05);
    --border-radius: var(--radius);
    --small-border-radius: 6px;
    --box-shadow: var(--shadow-md);
    --box-shadow-hover: var(--shadow-lg);
}

body {
    margin: 0;
    padding: 0;
    padding-top: 76px;
    background: var(--background-color);
    font-family: var(--font-family-base);
}

html {
    font-size: var(--font-size);
    font-weight: var(--font-regular);
    color: var(--main-text-color);
    font-family: var(--font-family-base);
    scroll-behavior: smooth;
}

* {
    text-decoration: none !important;
    outline: none !important;
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

::placeholder {
    color: var(--placeholder-color);
}

code,
pre,
kbd,
samp {
    font-family: var(--font-family-mono);
}

.panel-text {
    font-size: 1rem;
    color: #181a1f;
    margin-bottom: -10px;
    font-weight: var(--font-regular);
    text-align: justify;
}

.panel-text img,
.panel-text iframe,
.panel-text video {
    max-width: 100%;
}

.panel-text iframe {
    width: 100%;
}

.panel-text h1,
.panel-text h2,
.panel-text h3,
.panel-text h4,
.panel-text h5,
.panel-text h6 {
    display: block;
    margin-bottom: 10px;
    font-weight: var(--font-medium);
    color: var(--main-text-color);
}

.panel-text h1 {
    font-size: 1.6em;
}

.panel-text h2 {
    font-size: 1.5em;
}

.panel-text h3 {
    font-size: 1.4em;
}

.panel-text h4 {
    font-size: 1.3em;
}

.panel-text h5 {
    font-size: 1.2em;
}

.panel-text h6 {
    font-size: 1em;
}

.panel-text p {
    display: block;
    margin-bottom: 10px;
}

.panel-text b {
    font-weight: 600;
}

.panel-text ul {
    list-style: circle;
    display: block;
    padding-left: 20px;
}

.panel-text ul li {
    margin-bottom: 5px;
    position: relative;
}

.panel-text>* {
    color: #181a1f !important;
}


.section-gray {
    padding: 40px 0;
    background: #ededed;
}

.section-blue {
    padding: 40px 0;
    background: #ededed;
}


.main-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: var(--button-border);
    background: linear-gradient(95.14deg, var(--turkuaz-dark), var(--turkuaz) 91.74%);
    padding: var(--button-padding);
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 8px;
}

.main-btn.small {
    height: calc(var(--button-height) / 1.4);
}

.main-btn>span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    position: relative;
    line-height: 3;
    letter-spacing: .15px;
    z-index: 10;
    color: #fff;
    font-weight: 700;
    text-transform: capitalize;
}


.main-btn.small>span {
    font-size: 0.8rem;
    text-transform: unset;
}

.main-btn>span>i {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 24px;
    height: 24px;
    font-size: 1.2rem;
}

.main-btn.small>span>i {
    font-size: 1rem;
    min-width: 20px;
    height: 20px;
}

.main-btn.full-width {
    display: flex;
    width: 100%;
}

.main-btn.full-height {
    height: 100%;
}

.main-btn.no-radius {
    border-radius: 0;
}

.showcase-form {
    padding: 10px;
    background: rgb(255 255 255 / 30%);
    box-shadow: var(--box-shadow);
    border-radius: 2px;
    border: solid 1px rgb(255 255 255);
}

.showcase-form .main-btn {
    height: 50px;
    width: 100%;
    background: linear-gradient(95.14deg, #e52c43, #7a7a7a 91.74%);
    color: #fff;
    border-radius: 8px;
}

.showcase-form .passenger-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #fff;
    font-size: 1.1rem;
    font-weight: var(--font-medium);
    color: var(--input-color);
    padding: var(--input-padding);
    border: none;
    border-radius: var(--border-radius);
    padding-left: 35px;
    position: relative;
    cursor: pointer;
}

.showcase-form .passenger-select>i {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 10px;
    font-size: 1.4rem;
    color: var(--main-text-color);
}

.search-group {
    display: block;
    position: relative;
    width: 100%;
}

.search-group>input {
    display: block;
    width: 100%;
    font-size: 1.1rem;
    font-weight: var(--font-medium);
    color: #181a1f;
    height: 50px;
    padding: var(--input-padding);
    border: none;
    padding-left: 35px;
    background: #fff;
}

.search-group>i {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 10px;
    font-size: 1.4rem;
    color: #424242;
}

.dropdown-menu.show {
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-width: 45px;
    width: 13rem;
    text-align: center;
}

.passenger-menu {
    margin: 0 !important;
    top: 100% !important;
    left: 50% !important;
    transform: translate(-65%, 11%) !important;
    border: solid 1px #ddd;
    border-radius: 0;
    background-color: #fff;

}

.passengers-pad {
    padding-right: 16px !important;
    padding-left: 16px !important;
    margin-bottom: 15px;
}

.slide-group>input,
.slide-group>.dropdown .dropdown-toggle {
    display: block;
    width: 100%;
    padding: 0 10px;
    padding-top: 20px;
    padding-bottom: 19px;
    padding-left: 40px;
    border: solid 1px #696969;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    background: #fff;
    text-align: left;
    color: #1e293b;
    border-radius: 5px;
}

.yolcu-select {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px transparent;
    background: #fff;
    height: 50px;
}

.yolcu-select>span>i {
    position: absolute;
    top: 15.2px;
    left: 22px;
    color: #181a1f;
}

.route {
    background: #f1f5f9;
    color: #1e293b;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.space {
    height: 5rem;
}

.step1-header-background {
    display: flex;
    background-position: 0 50%;
    height: 7rem;
    background-size: cover;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.index {
    max-width: 1200px;
    font-size: 1.3rem;
}

.route-details {
    border: 1px solid #dee2e6 !important;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 29px 0 rgba(100, 100, 111, .2);
    padding: 1rem;
}

.route-info {
    position: relative;
    width: 100%;
}

.route-info-text {
    position: relative !important;
    margin-bottom: 0.5rem !important;
    padding-left: 0.25rem !important;
    font-size: 14px !important;
    margin-top: 0.5rem !important;
}

.route-info-icon {
    display: flex;
    align-items: center;
    justify-content: center !important;
}

.child {
    display: none;
}

.car-img {
    position: relative;
    display: block;
    width: 100%;
}

.car-image {
    position: relative;
    overflow: hidden;
    padding-top: calc(3 / 4 * 100%) !important;
}


.car-image>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services {
    padding-left: 0;
    list-style: none;
    font-size: 14px;
}

.services-title {
    margin-bottom: 20px;
    font-weight: 700;
    color: #28A0D8 !important;
}

.services-item {
    padding-bottom: 0.25rem !important;
    padding-top: 0.25rem !important;
    margin-bottom: 0.50rem !important;
}

.services-item>div>.bold {
    font-weight: 700;
    text-align: start;
}

.icon {
    padding-top: 0.5rem !important;
    padding-right: 0rem !important;
    font-size: 18px !important;
}

.price {
    font-size: 22px;
}

.semibold {
    font-weight: 600;
    font-size: 15px;
}

.bottom-services {
    font-size: 12px;
    cursor: pointer;
    background-color: white;
    padding-top: 0.5rem;
    padding-bottom: 0;
    flex: 0 0 100%;
    max-width: 100%;
    border-top: 1px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.orange {
    border-top: 10px solid #a3a3a3;
    border-left: 10px solid transparent;
    position: relative;
    right: 0;
}

.p-all {
    padding: 0.5rem !important;
}

.step2-nav {
    z-index: 99;
    background: white;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    position: relative;
    padding: 0.5rem 1rem;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.sn-logo>.step2-logo {
    width: 300px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}


.cnt {
    display: flex;
    justify-content: space-between;
}

.cnt>span {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.form-group {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

.select2-container {
    width: 340px !important;
}

.select2-container:focus {
    border: 1px solid #ced4da !important;
}

.form-group.alternate>input,
.form-group.alternate>.iti>input,
.form-group.alternate>textarea,
.form-group.alternate>.select2-container .select2-selection--single,
.form-group.alternate>.passenger-box {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 300;
    color: #181a1f;
    padding: unset;
    height: unset;
    border: none;
    background-color: transparent !important;
    min-height: 24px;
}

.iti {
    width: 100%;
}

.journey-details {
    padding: 1rem;
}

.csp {
    color: #181a1f;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: .2rem;
}

.csg {
    color: #181a1f;
    font-size: 13px;
    margin-bottom: 1rem;
}

.total-payment {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: end;
}

.info-box {
    background-color: rgba(186, 223, 147, .6);
    color: #444;
    font-size: 14px;
    padding: 1rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    height: auto;
}

.location {
    bottom: 0;
    left: 5px;
    position: absolute;
    top: 0
}

.location:before {
    bottom: 30px;
    content: "";
    left: 15px;
    border-left: 1px dashed #000;
    position: absolute;
    top: 20px
}

.location .icon-1 {
    left: 10px;
    position: absolute;
    top: 5px
}

.location .icon-2 {
    bottom: 16px;
    left: 10px;
    position: absolute
}

.datepicker-group {
    position: relative;
}

.policy {
    display: flex;
    flex-direction: row;
    color: #181a1f;
}

.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    position: relative;
    left: 98%;
    width: 20px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-primary.focus,
.btn-primary:focus {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: none;
}

input[type=checkbox] {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
}

.counter {
    display: block;
    padding: 5px;
    border: solid 2px #7a7a7a;
    line-height: 22px;
    color: #7a7a7a;
    height: 2.5rem;
    text-align: center;
    width: 2.5rem;
    border-radius: 10px;
}

.counter:hover {
    color: #AD0014;
    border: solid 2px #AD0014;
}

.counter-title {
    font-size: 1.5rem;
}

.buttons {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.custom-hr {
    border: 1px solid rgba(0, 0, 0, .1);
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.extra-lines,
.rextra-lines {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column-reverse;
    width: 100%;
}

.extra-lines>.caption,
.rextra-lines>.caption {
    font-size: 14px;
    line-height: 20px;
    color: #1e293b;
    margin-bottom: 10px;
}

.extra-lines>.item~.caption,
.rextra-lines>.item~.caption {
    display: none;
}

.extra-lines>.item,
.rextra-lines>.item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    color: #444;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
}

.extra-lines>.item>span:last-child,
.rextra-lines>.item>span:last-child {
    text-align: right;
    color: #1e293b;
    font-weight: 600;
}

.checkout-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment {
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    padding: 5px 10px 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    text-transform: uppercase;
    font-weight: 700;
}

.payment.active {
    border: 1px solid var(--accent);
    background-color: #fff;
    transition: 1s;
}

.payment .payment-content {
    text-align: center;
    width: 100%;
    min-height: 55px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #181a1f;
}

.payment>i {
    font-size: 3rem;
    color: #181a1f;
}

.ex-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.extra-items {
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    color: #181a1f;
}


.form-box {
    background: transparent;
    border: solid 1px #eee;
    padding: 20px;
    padding-bottom: 0;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 7.1%;
}

.form-box .row {
    margin-left: -10px;
    margin-right: -10px;
}

.form-box .row>[class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.form-box .title {
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
}

.form-box .title-in {
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;
}

.form-box .title~.title-in {
    margin-top: -8px;
}

.destinations-banner {
    background-position: 0 77%;
    height: 7rem;
    background-size: cover;
}


.destination-links {
    color: #444
}

.customer-comments {
    width: 100%;
}

.yildiz {
    color: #a3a3a3;
}

.dmr {
    margin-right: 1rem;
}

.dml {
    margin-left: 1rem;
}

.smt {
    margin-top: 2%;
}

.dmb {
    margin-bottom: 1.5rem;
}

.d-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    border: solid 1px #00000000;
    border-radius: 5px;
    padding: 5px
}

.d-price>span {
    font-size: 16px;
    font-weight: 600;
    color: #155b91;
}

.step2-footer {
    padding: 25px;
    margin-top: 25px;
}

.step2-img>img {
    width: 20rem;
    filter: contrast(0) brightness(2) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}

.booking-input {
    width: 100%;
}

.booking-input:first-child {
    margin-bottom: 1rem;
}

.booking-form {
    border: solid 2px orange;
    border-radius: 5px;
    padding: 1rem;
}

.booking-span {
    font-size: 15px;
    font-weight: 600;
}

.booking-i {
    display: flex;
    flex-direction: row;
}

.booking-i:first-child {
    margin-bottom: 1rem;
}


.bege {
    display: block;
    height: 25rem;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -15px;
    margin-bottom: -14px;
    border-radius: 0 5px 5px 0;
    position: relative;
}

.bege:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, .45) 70%, hsla(0, 0%, 100%, 0))
}

.booking-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lr-title {
    margin-bottom: 1rem;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
}

.profile-dropdown {
    color: #444;
}

.btn-gray {
    background-color: #f8f9fa;
    color: #444;
    border-color: #f8f9fa;
}

#yolcu {
    color: #181a1f
}


.main {
    border: solid 2px orange;
    border-radius: 2rem;
    padding: 2rem;
}

.selection {
    height: 100%;
}


.ftr-slogan {
    display: block;
    margin-bottom: 10px;
}

.ftr-slogan>.item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ftr-slogan>.item>span {
    display: block;
    font-size: 14px;
    line-height: 18px;
    color: #475569 !important;
    margin-bottom: 10px;
}

.nav-breadcrumb {
    padding-top: 16px !important;
    background-size: cover;
    color: #181a1f;
    margin-top: 20px !important;
}/* PAGINATION START */

/* PAGINATON END */

.dest-car-selection {
    border: 1px solid #dee2e6 !important;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 29px 0 rgba(100, 100, 111, .2);
    margin-bottom: 1.5rem !important;
    padding: 2rem;
    flex-direction: column;
}

.language-dropdown {
    transform: translate3d(-20px, 23px, 0px) !important;
    width: 9rem !important;
    min-width: 9rem !important;
    text-align: left !important;
}

.pointer {
    cursor: pointer;
}

.dash-form {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #4444444a;
    margin-top: 5px;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.btn-secondary {
    background-color: var(--n-800) !important;
    border-color: var(--n-800) !important;
}

.btn-secondary:hover {
    background-color: var(--n-600) !important;
    border-color: var(--n-600) !important;
}

.error-label {
    color: red;
    font-size: 12px;
}

#phone-error {
    position: absolute;
}

.rf-title {
    padding: 0;
    margin-bottom: 15px;
    padding: 10px 20px;
    background: #f1f5f9;
    border: solid 1px #e2e8f0;
}

.rf-title span {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: #1e293b;
    font-weight: 600;
}

.rf-body {
    padding: 0;
}

.sn-money {
    border: solid 1px #8d222242;
    border-radius: 5px;
    padding: 0.25rem;
}

.sn-money>a {
    color: #444
}

.main-slider-area {
    display: block;
    width: 100%;
    position: relative;
    z-index: 50;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    min-height: 580px;
    /* vitrin verisi olmasa bile form görünür */
    background: #f8fafc;
}

.main-slider-container {
    width: 100%;
    position: relative;
}

.main-banner {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 525px;
    background: #fff;
}

.main-banner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0) 100%);
    z-index: 10;
}

.main-banner>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Çerçeveye tam oturur, ancak orantısı bozulabilir */
}


.main-slider-buttons {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    pointer-events: none;
}

.main-slider-buttons>div {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    position: relative;
    background: none;
    pointer-events: all;
}

.main-slider-buttons>div:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Material Design Icons";
    font-weight: 400;
    font-size: 24px;
    line-height: 1.6 30px;
    color: #fff;
}

.main-slider-buttons>div.prev:before {
    content: "\F0142";
}

.main-slider-buttons>div.next:before {
    content: "\F0141";
}

.slide-desc {
    position: absolute;
    top: 170px;
    display: flex;
    width: 100%;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    text-align: start;
}

.slide-desc .title {
    display: block;
    font-size: 45px;
    line-height: 1.2;
    padding-bottom: 0;
    color: #fff;
    font-weight: 700;
    text-shadow: 4px 5px #222;
}

.slide-desc .desc {
    display: block;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin-top: 10px;
    text-shadow: 2px 2px #222;
    text-align: center;
}

.slide-desc-in {
    pointer-events: all;
    text-align: center;
}

.main-slider-items {
    width: 100%;
    z-index: 1000;
    background: #00000000;
    align-self: flex-end;
    position: absolute;
    bottom: 50px;
}


.b-black {
    background-color: #f8fafc !important;
}

.f-black {
    color: #181a1f !important;
}


.b-white {
    background-color: #fff !important;
}


.pad-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.dropdown-toggle::after {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #1e293b;
}


.chk {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#return-transfer {
    width: 100%;
    margin-top: 20px;
}

.live-transfer-price-round {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
}

.policy>input[type=checkbox] {
    width: 33px !important;
    height: 33px !important;
}


.collapse-item {
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: solid 1px #ddd;
}

.collapse-item:last-child {
    margin-bottom: 0;
}

.collapse-item>.title {
    display: block;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: #1e293b;
    width: 100%;
    padding: 10px 15px;
    padding-right: calc(15px + 15px + 10px);
    background: #f1f5f9;
    cursor: pointer;
    height: unset !important;
    border: none;
    margin: 0;
    position: relative;
}

.collapse-item>.title:after {
    content: "\F0142";
    font-family: "Material Design Icons";
    font-weight: 900;
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 14px;
    line-height: 20px;
    height: calc(22px + 10px + 10px);
    width: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.collapse-item>.title[aria-expanded="true"]:after {
    content: "\F0140";
}

.collapse-item>.title[aria-expanded="true"] {

    background-color: var(--brand-primary);
}

.collapse-item>.content {
    border-top: solid 1px #ddd;
}

.collapse-item>.content>.content-inner {
    padding: 15px;
}

.collapse-item>.content>.content-inner>p {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #475569;
    margin: 0;
}


.smb {
    margin-bottom: 2%;
}

.f-20 {
    font-size: 20px;
}

.contact-page-items {
    display: block;
}

.contact-page-items>.item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.contact-page-items>.item:not(:last-child) {
    margin-bottom: 10px;
}

.contact-page-items>.item>i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.4rem;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    border: solid 2px var(--turkuaz);
    color: var(--turkuaz-dark);
    margin-right: 10px;
}

.contact-page-items>.item>div>span:first-child {
    display: block;
    font-size: 1rem;
    font-weight: var(--font-bold);
    color: var(--turkuaz-dark);
    margin-bottom: 5px;
}

.contact-page-items>.item>div>span:last-child,
.contact-page-items>.item>div>a {
    display: block;
    font-size: 1rem;
    color: #181a1f;
}

.contact-page-items>.item>div>a:hover {
    text-decoration: underline !important;
}


.ftr-links i {
    position: relative;
    color: #475569 !important;
    font-size: 20px;
    margin-right: 5px;
}


#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--brand-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }}

.card-body {
    padding: .5rem !important;
}

.card-title {
    margin-bottom: .25rem;
}

.main-color {
    color: #222831;
}

.price-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-left: 15px;
    border-radius: 5px;
    padding: 15px;
    border: solid 1px transparent;
}

.price-box>.price {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #181a1f;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    height: 100%;
    margin-bottom: 10px;
}

.price-box>.main-btn-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 11px 21px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    font-weight: 600;
    color: #fff !important;
    border: none;
    background: linear-gradient(95.14deg, #575757, #a3a3a3 91.74%);
    transition: 0.2s ease 0.1s;
    overflow: hidden;
    border-radius: 5px;
    white-space: nowrap;
    width: 100%;
}

.price-options-2 {
    display: flex;
    align-items: center;
    gap: 20px;
}

.price-option-2 {
    display: flex;
    align-items: center;
}

.price-option-2 label {
    margin-left: 5px;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 600;
    color: #181a1f;
}

.price-option-2 span {
    margin-left: 5px;
    margin-top: 10px;
}

.selected-price {
    margin-top: 20px;
    font-weight: bold;
}

.price-option-2 {
    display: flex;
    align-items: center;
}


.transfer-note {
    margin-top: 5px;
}

.rad-ton[type="radio"] {
    display: none;
}

.rad-but {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.rad-but::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    margin-right: 10px;
    box-sizing: border-box;
}

.rad-ton[type="radio"]:checked+label::before {
    background-color: #1852ff;
    /* Seçilme rengi */
    border-color: var(--brand-primary);
}

.step2-msg {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}


.leftf {
    float: left;
    padding: 10px 10px;
    position: relative;
    left: 7px;
}

.bold {
    font-weight: 700;
}


.new-hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    width: 100%;
}

.iti--separate-dial-code .iti__selected-dial-code {
    color: #181a1f;
}


.destination-item>.desc .dm {
    color: #64748b;
    font-weight: 300;
    font-size: 13px;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1e293b !important;
}



.payment-method label {
    color: #1e293b;
}


.container-1200 {
    max-width: 1200px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}


.blog-title {
    color: #181a1f;
    text-shadow: 0px 0px 2px #ffffffbf;
}

.mt-40px {
    margin-top: 40px;
}


/* These belong to tour_detail.php's <div class="page-gallery"> photo collage.
   galeri.php uses the same name as a <body> class, so they must stay
   qualified with div - otherwise they leak onto that page's footer rows. */
div.page-gallery {
    position: relative;
}

div.page-gallery .row {
    margin-left: -5px;
    margin-right: -5px;
}

div.page-gallery>.gal-btn {
    position: absolute;
    bottom: 20px;
    right: 10px;
}

div.page-gallery .row>[class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.page-gal-item {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3/4*100%);
    margin-bottom: 8px;
    border-radius: 10px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
}

.page-gal-item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: 0.2s ease 0s;
}

.page-gal-item:hover:after {
    opacity: 1;
}

.page-gal-item:hover>img {
    transform: scale(1.1);
}

.page-gal-item>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease 0s;
}


.gal-btn {
    border: solid 1px #00796B;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    transition: 0.2s ease 0s;
    background: #00796B;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
}


.tour-form {
    border: solid 1px #e2e8f0;
    border-radius: 5px;
    padding: 15px;
    background: #fff;
}

.send-ok {
    margin: 10px 15px 10px 0px;
    padding: 10px 10px 10px 5px;
    border-radius: 5px;
    border: solid 1px var(--accent);
    color: #1e293b;
    background: #f8fafc;
}

.send-ok-close {
    color: #aaa;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 0;
    background-color: transparent;
    border: 0;
}


.form-bolge-small {
    font-size: 12px;
    Margin-left: 12px;
    line-height: 1.6;
    font-weight: 300;
    font-style: italic;
    float: right;
    text-align: right;
    position: absolute;
    right: 15px;
}


.blog-item {
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 20px
}

.blog-item>.blog-desc {
    width: 100% !important;
    padding: 10px 12px;
    color: #181a1f;
}

.blog-item>.blog-desc>p {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    color: #444;
}


.blog-item.main-page {
    margin-bottom: 0;
}


.page-box {
    display: block;
    padding: 15px;
    border-radius: var(--border-radius);
    background: #fff;
    margin-bottom: var(--main-gap);
}

.page-box.gal-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.page-box.full-height {
    height: calc(100% - var(--main-gap));
}

.page-box.limit-height {
    height: 298px;
}


.car-banner {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(600/700*100%);
}

.car-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-banner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}


.car-slider-container {
    position: relative;
    display: block;
    width: 100%;
}

.lang-dropdown {
    animation: slideUpAndFade .4s cubic-bezier(.16, 1, .3, 1);
}


.lang-dropdown.show {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    transform: none !important;
    animation: slideUpAndFade .4s cubic-bezier(.16, 1, .3, 1);
    right: calc(1080/1920*20%) !important;
    left: unset !important;
    top: 60px !important;
}


.list-group-item {
    border: none !important;
}

.list-group-item span {
    color: #424242;
}

.list-group-item:hover {
    background-color: #f0f2f7;
    outline: none;
}

@keyframes slideUpAndFade {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.showcase-forum {
    padding: 8px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    border: solid 1px #e2e8f0;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}

.search-groups {
    display: block;
    position: relative;
    width: 100%;
    background: #f0f2f7;
    height: 58px;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 13px;
    border: solid 2px transparent;
    outline: none;
}

.search-groups>input {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #181a1f;
    padding: 0 10px;
    border: none;
    padding-left: 35px;
    background-color: transparent !important;
    min-height: 24px;
}

.search-groups>input::placeholder {
    color: #424242aa;
    font-weight: 400;
    font-size: 14px;
}


#passenger-text {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #181a1f;
    padding: 0 10px;
    border: none;
    padding-left: 1px;
    background-color: transparent !important;
    min-height: 24px;
}

.search-groups>i {
    position: absolute;
    bottom: 13px;
    left: 14px;
    font-size: 1.4rem;
    color: #424242;
}

.search-groups>label {
    padding-left: 35px;
    width: 100%;
    font-weight: 600;
    color: #424242aa;
    margin-bottom: 0 !important;
}


.search-groups.pax {
    height: 70px;
    padding: 5px;
}

.search-groups.button-group {
    padding: 5px;
    background-color: transparent !important;
}

.button-group>button {
    width: 100%;
}

.hero-div {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    min-width: 320px;
    position: relative;
    width: 100%;
}


.form-title {
    background-color: transparent;
    color: #181a1f;
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 30px;
    text-align: left;
    width: 100%;
    z-index: 1;
    font-weight: 500;
}


h2.subtitle {
    font-size: 20px;
}

.new-route {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.new-route span {
    font-size: 16px;
    font-weight: 400;
    color: #181a1f;
    letter-spacing: 0.15px;
}

.new-route i {
    margin-left: 8px;
}

.search-groups.currency {
    height: 60px;
}

.search-groups.currency>label {
    padding-left: 0;
}

.search-groups .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #181a1f !important;
    padding-left: 0 !important;
    font-weight: 500;
}

.search-groups.currency .select2-container {
    width: 100% !important;
}


.search-groups.currency .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: none !important;
}

.select2-container--open .select2-dropdown--below {
    /* border-top: 1px solid #aaa !important; */
    border-radius: 5px !important;
}

.select2-container--default .select2-results>.select2-results__options {
    border-radius: 5px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f0f2f7 !important;
    color: #181a1f !important;
}

.select2-results__option {
    padding: 10px !important;
}


.my-card {
    background-color: transparent;
    border: none;
}


.blog-item.main-page>h2 {
    color: #181a1f;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
}

.blog-item.main-page>.blog-desc {
    width: 100% !important;
    padding: 10px 0;
    color: #181a1f;
}


.section-grey {
    background-color: #fbfbfd !important;
}

.br-5 {
    border-radius: 5px !important;
}

.border-bottom-1 {
    border-bottom: solid 1px #313338 !important;
}


.ftr-bottom-flex>.left,
.ftr-bottom-flex>.right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.policies {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.policies>a:last-child {
    margin-right: 0;
}

.policies>a:first-child {
    margin-left: 32px;
}

.policies>a {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: #475569;
    margin-right: 32px;
    margin-bottom: 5px;
    font-weight: 400;
}

.policies>a:hover {
    text-decoration: underline !important;
    color: #1e293b !important;
}

.p-all-12 {
    padding: 12px !important;
}


.mr-20 {
    margin-right: 20px !important;
}

.swiper-pagination-bullet-active {
    background: #64666b !important;
}


.step-breadcrumb {
    padding: 16px 8px;
}

.step-breadcrumb>ul {
    display: flex;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

.step-breadcrumb>ul>li {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1;
    flex-direction: column;
    text-align: center;
    position: relative;
}

.step-breadcrumb>ul>li>.step-name {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.step-breadcrumb>ul>li>.step-name>span {
    color: #64666b;
    background-color: transparent;
    padding: 2px 10px;
    border-radius: 10px;
}

.step-breadcrumb>ul>li>.step-name>span.active {
    color: #181a1f;
    background-color: #f0f2f7;
}

.step-breadcrumb>ul>li>.circle-group {
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .1px;
    border-radius: 8px;
    border: 2px solid #e3e5ea;
}

.step-breadcrumb>ul>li>.circle-group.active {
    color: var(--turkuaz-dark);
    background-color: transparent;
    border: 2px solid var(--turkuaz);
    border-radius: 8px;
}

.step-breadcrumb>ul>li>.circle-group:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 6px;
    left: -6px;
    order: -1;
    width: 6px;
    height: 2px;
}

.step-breadcrumb>ul>li:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: 6px;
    order: -1;
    width: calc(100% - 16px);
    height: 2px;
    background-color: #e3e5ea;
    left: calc(50% + 8px);
}

.step-route-date {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    margin-top: 8px;
}

.step-route-date>.date-time {
    box-sizing: border-box;
    color: #64666b;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppv {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 5px;
    margin-left: 5px;
}

.features-toggle-container {
    margin-top: 10px;
}

.features-toggle-btn {
    background: transparent;
    border: unset;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    display: block;
    text-align: left;
    transition: all 0.3s ease;
}

.features-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.toggle-icon.rotated {
    transform: rotate(180deg);
}


.features-content {
    width: 100%;
}

.features-content .item {
    font-size: 13px;
    font-weight: 200;
    color: #525252;
}

.form-group.alternate>.iti>input::placeholder {
    color: #424242aa;
    font-weight: 400;
    font-size: 14px;
}

.iti__selected-flag {
    padding: unset !important
}

.iti--separate-dial-code .iti__selected-flag {
    background: transparent !important;
}


.text-box {
    overflow: hidden;
}

.text-box p {
    font-size: 16px;
    line-height: 1.6;
}


html.modal-active,
body.modal-active {
    overflow: hidden;
}

#modal-container {
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transform: scale(0);
    z-index: 9999;
}

#modal-container.six {
    transform: scale(1);
}

#modal-container.six .modal-background {
    background: rgba(0, 0, 0, 0);
    animation: none;
}

#modal-container.six .modal-background .modall {
    background-color: #ffffff;
    animation: none;
}

#modal-container.six .modal-background .modall h2,
#modal-container.six .modal-background .modall p,
#modal-container.six .modal-background .modall button {
    opacity: 1;
    position: relative;
    animation: none;
}

#modal-container.six .modal-background .modall .modal-svg rect {
    animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out {
    animation: quickScaleDown 0s 0.5s linear forwards;
}

#modal-container.six.out .modal-background {
    animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modall {
    animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modall h2,
#modal-container.six.out .modal-background .modall p,
#modal-container.six.out .modal-background .modall button {
    animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.six.out .modal-background .modall .modal-svg rect {
    animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}


#modal-container .modal-background {
    display: table-cell;
    background: rgba(0, 0, 0, .8);
    text-align: center;
    vertical-align: middle;
}

#modal-container .modal-background .modall {
    background: white;
    padding: 50px;
    display: inline-block;
    border-radius: 3px;
    font-weight: 300;
    position: relative;
}

#modal-container .modal-background .modall h2 {
    font-size: 25px;
    line-height: 25px;
    margin-bottom: 15px;
    color: #222222 !important;
}

#modal-container .modal-background .modall p {
    font-size: 18px;
    line-height: 22px;
    color: #333333 !important;
}

#modal-container .modal-background .modall button {
    color: #222222 !important;
    background: #f5f5f5;
    border: 1px solid #ccc;
    padding: 8px 24px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 16px;
    font-size: 15px;
}

#modal-container .modal-background .modall .modal-svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 3px;
}

#modal-container .modal-background .modall .modal-svg rect {
    stroke: #fff;
    stroke-width: 2px;
    stroke-dasharray: 778;
    stroke-dashoffset: 778;
}/* Yolcu dropdown her zaman aşağı açılsın */


.index-gall {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: calc(3/4*100%);
    background: #fff;
    border-radius: 10px;
}

.index-gall>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.blog-img {
    position: relative;
    display: block;
    width: 100%;
}

.blog-img>div {
    position: relative;
    overflow: hidden;
    padding-top: calc(2 / 4 * 100%);
}

.blog-img>div>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.blog-container {
    padding: 0;
    border-radius: 5px;
    overflow: hidden;
}

.blog-desc {
    width: 90%;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
}

.blog-desc h4 {
    color: #000;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    font-size: 20px;
    font-weight: 600;
}

.blog-p {
    color: #222222d6;
    font-size: 13px;
    font-weight: 500;
}

/* ================================================
   RESERVATION FLOW MODERN STYLES
   ================================================ */

/* Progress Breadcrumb */
.step-progress {
    padding: 40px 0 30px;
    background: white;
}

.step-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.step-breadcrumb ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.step-breadcrumb li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-breadcrumb li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.step-breadcrumb li.active:not(:last-child)::after {
    background: var(--brand-gold);
}

.step-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--soft-text-color);
    margin-bottom: 10px;
    text-align: center;
}

.step-name.active,
.step-name span.active {
    color: var(--brand-primary);
}

.circle-group {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--soft-text-color);
    position: relative;
    z-index: 1;
}

.circle-group.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(40, 150, 201, 0.3);
}/* Route Box */

.step-route-date {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    color: var(--soft-text-color);
}

.date-time {
    display: flex;
    align-items: center;
    gap: 8px;
}/* Car Selection */

.car-slider-container {
    aspect-ratio: 4/3;
    position: relative;
}

.car-image {
    width: 100%;
    height: 100%;
}

.car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csg {
    color: var(--soft-text-color);
    font-weight: 500;
}

.cl-rate {
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.price-box .price {
    font-size: 28px;
    font-weight: 700;
    color: var(--brand-primary);
}

.main-btn-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--turkuaz) 0%, var(--turkuaz-dark) 100%);
    color: white;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
}

.main-btn-2:hover {
    background: linear-gradient(135deg, var(--turkuaz-dark) 0%, var(--turkuaz) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 150, 201, 0.4);
    color: white;
}

.features-toggle-container {
    margin-top: 15px;
}

.features-toggle-btn {
    width: 100%;
    padding: 12px;
    background: rgba(71, 94, 138, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: var(--brand-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
}

.features-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.features-content {
    padding: 15px 0 0;
}

.features-content .item {
    font-size: 14px;
    color: var(--soft-text-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.features-content .item i {
    color: var(--brand-gold-dark);
}/* Checkout Box *//* Step2 input-groups height fix (override base 58px) */

/* Summary Sidebar */
.summary-box {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(71, 94, 138, 0.08);
    position: sticky;
    top: 100px;
}

.summary-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
}

.summary-item-label {
    color: var(--soft-text-color);
    font-weight: 500;
}

.summary-item-value {
    color: var(--main-text-color);
    font-weight: 600;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0;
    margin-top: 15px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.summary-total-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-primary);
}

.summary-total-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--brand-primary);
}/* Confirmation Page *//* Responsive *//* ================================================
   CONTENT PAGES MODERN STYLES
   ================================================ *//* Page Header *//* Hero sections with background-image: enforce gorsel_ayar aspect ratio *//* Destinations Grid */

.destination-grid-item {
    margin-bottom: 30px;
}/* Blog Grid */

/* Services Page */
.services-grid {
    padding: 80px 0;
    background: white;
}

.service-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    height: 100%;
    margin-bottom: 30px;
}

.service-card:hover {
    border-color: var(--brand-gold);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--turkuaz) 0%, var(--turkuaz-dark) 100%);
    border-radius: 50%;
    color: white;
    font-size: 36px;
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-dark) 100%);
    transform: scale(1.1) rotate(5deg);
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 15px;
}

.service-card p {
    font-size: 15px;
    color: var(--soft-text-color);
    line-height: 1.6;
}/* Contact Page */

.form-group {
    margin-bottom: 25px;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-text-color);
    margin-bottom: 8px;
    display: block;
}

.form-control {
    width: 100%;
    padding: 0 16px;
    height: 48px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font-size: 15px;
    color: var(--main-text-color);
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    outline: none;
}

textarea.form-control {
    height: 150px;
    padding: 12px 16px;
    resize: vertical;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--turkuaz) 0%, var(--turkuaz-dark) 100%);
    color: white;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background: linear-gradient(135deg, var(--turkuaz-dark) 0%, var(--turkuaz) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 150, 201, 0.4);
}/* Gallery Page *//* Tours */

.tour-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--brand-gold);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.tour-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 15px;
}

.tour-description {
    font-size: 15px;
    color: var(--soft-text-color);
    line-height: 1.6;
    margin: 0 0 20px;
}

.tour-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tour-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--soft-text-color);
}

.tour-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-primary);
}/* FAQ */

/* Responsive Content Pages */





form {
    margin-block-end: 0px !important;
}

/* === Consolidated external CSS: begin === */

/* --- css/ecevip-design.css --- */
/* ================================================================
   ECE VIP TRANSFER — Design System 3.0
   Palette : Deep Black #000000 | Gold var(--accent) | White #FFFFFF
   Style   : Corporate Clean / Bootstrap 4 native
   Updated : 2026
   ================================================================ */

/* Primary webfont is loaded in css/style.css */

/* DESIGN TOKENS — moved to the single :root block at the top of this file. */

/* ================================================================
   BASE
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base, 'Lato', 'Segoe UI', 'Roboto', sans-serif) !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    background: #fff;
    padding-top: 96px;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-display, 'Lato', 'Segoe UI', sans-serif);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    margin-top: 0;
    letter-spacing: 0;
}

a {
    text-decoration: none !important;
    color: inherit;
}

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

::selection {
    background: rgba(0, 0, 0, .2);
}/* ================================================================
   NAVBAR
   ================================================================ *//* Keep a single clean caret on language selector.
   Prevent overlap with generic .nav-link::after underline styles. */



/* ================================================================
   HERO
   ================================================================ */
.akdenora-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: visible;
    margin-top: 0 !important;
    background: var(--navy);
    padding-top: 76px;
    padding-bottom: 60px;
    box-sizing: border-box;
}

.hero-text {
    text-align: left;
    margin-bottom: 16px !important;
    /* style.css 40px override */
}

.hero-text--center {
    text-align: center;
}

.hero-subtitle {
    font-size: 15px;
    color: #ffffff;
    max-width: 600px;
    margin: 0 auto 10px;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: bounceY 2s ease infinite;
}

.hero-scroll-indicator i {
    font-size: 20px;
}

@keyframes bounceY {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }/* ================================================================
   SECTION COMMONS
   ================================================================ */}

.why-section {
    padding: 72px 0;
    background: #f8fafc;
}

.social-section {
    padding: 48px 0;
    background: var(--light);
}

.section-description {
    max-width: 720px;
    margin: 14px auto 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* matches the "Tümü" button on the home region strip */
.section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.section-link:hover {
    border-color: var(--turkuaz);
    background: var(--turkuaz);
    color: var(--accent-fg);
}

.section-link i {
    font-size: 18px;
}

/* ================================================================
   FEATURE CARDS
   ================================================================ */
.features-section {
    background: var(--light) !important;
    margin-top: 0 !important;
    /* style.css -50px overlay fix */
    padding: 64px 0 !important;
    position: relative;
    z-index: 1;
}

.feature-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    height: 100%;
    transition: box-shadow .22s ease, transform .22s ease;
    text-align: center;
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    transition: background .22s ease;
}

.feature-card:hover .feature-icon {
    background: var(--gold);
}

.feature-icon i {
    font-size: 26px;
    color: var(--gold-dark);
    transition: color .22s ease;
}

.feature-card:hover .feature-icon i {
    color: var(--navy);
}

.feature-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.6;
}/* ================================================================
   AVT ROUTES — Airport Transfer Route Grid (v2)
   ================================================================ */

@media (max-width: 575px) {
    .avt-routes {
        padding: 40px 0;
    }/* ================================================================
   DESTINATION CARDS
   ================================================================ */}

.destination-overlay {
    display: none;
}

.destination-excerpt {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}/* ================================================================
   WHY US SECTION
   ================================================================ */

.why-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    height: auto;
    position: relative;
    overflow: hidden;
    transition: background .22s ease, border-color .22s ease;
}

.why-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #d1d8e3;
}

.why-card:hover {
    background: #fff;
    border-color: var(--gold);
    box-shadow: var(--shadow-md);
}

.why-card:hover::after {
    background: rgba(0, 0, 0, .6);
}

.why-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, .15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.why-icon i {
    font-size: 26px;
    color: var(--gold);
}

.why-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.why-card p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.6;
}

.why-slider .swiper-pagination-bullet {
    background: var(--border);
    opacity: 1;
}

.why-slider .swiper-pagination-bullet-active {
    background: var(--gold);
}

/* ================================================================
   SOCIAL SECTION
   ================================================================ */
.social-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none !important;
    transition: border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.social-item:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
    box-shadow: var(--shadow-sm);
}

.social-item i {
    font-size: 18px;
}/* ================================================================
   BLOG SECTION
   ================================================================ *//* ================================================================
   FOOTER
   ================================================================ *//* ================================================================
   FLOATING BUTTONS
   ================================================================ */

/* ================================================================
   BOOTSTRAP OVERRIDES
   ================================================================ */
.btn-primary {
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-primary:hover {
    background-color: var(--navy-600) !important;
    border-color: var(--navy-600) !important;
}/* ================================================================
   DESTINATION INFO PAGE  (di-*)
   ================================================================ *//* Hero *//* Quick Book Bar */

.di-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--navy) !important;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    transition: background .2s ease, transform .2s ease;
    white-space: nowrap;
}

.di-book-btn:hover {
    background: var(--gold-dark);
    transform: translateY(-1px);
}/* Content section *//* Sidebar */

.di-book-btn-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gold);
    color: var(--navy) !important;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    transition: background .2s ease, transform .2s ease;
    letter-spacing: .3px;
}

.di-book-btn-lg:hover {
    background: var(--gold-dark);
    transform: translateY(-2px);
}

.di-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.di-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-2);
    font-weight: 500;
}

.di-feature-list li i {
    color: #22c55e;
    font-size: 18px;
    flex-shrink: 0;
}

/* Why section (dark bg) */
.di-why-section {
    background: #f8fafc;
    padding: 72px 0;
}

/* Responsive */




/* ================================================================
   GENERIC UTILITIES
   ================================================================ */
.section-gap {
    padding: 72px 0;
}

.panel-text {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.75;
}

.panel-text h1,
.panel-text h2,
.panel-text h3,
.panel-text h4,
.panel-text h5,
.panel-text h6 {
    margin-bottom: 10px;
}

.panel-text p {
    margin-bottom: 12px;
}

.panel-text ul {
    padding-left: 20px;
    list-style: disc;
}

.panel-text img,
.panel-text iframe,
.panel-text video {
    max-width: 100%;
}

.panel-text iframe {
    width: 100%;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* --- css/ecevip-ui-enhancements.css --- */
/* ================================================================
   ECE VIP UI Enhancements v3.0
   Minimal overrides — main design lives in ecevip-design.css
   ================================================================ */

/* Font face (local/CDN fallback) */
@font-face {
    font-family: "Material Design Icons";
    src: url("mdi/materialdesignicons-webfont.woff2?v=7.1.96") format("woff2"),
        url("mdi/materialdesignicons-webfont.woff?v=7.1.96") format("woff"),
        url("mdi/materialdesignicons-webfont.ttf?v=7.1.96") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Reservation step 2/3 preserve ── */
.f-white {
    color: #fff !important;
}

.semibold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

.dmb {
    display: block;
}

/* Select2 base override */
.select2-container--default .select2-selection--single {
    border: none;
    background: transparent;
    height: 26px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #1A202C);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    height: 26px;
}

/* Spinner / loader */
#loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loader.d-none {
    display: none !important;
}

.spinner {
    width: 42px;
    height: 42px;
    border: 4px solid var(--border, #DDE2EA);
    border-top-color: var(--gold, var(--accent));
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }/* Modal */}

/* Six-hour warning modal */
#modal-container {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .65);
}

#modal-container.six {
    display: flex;
}

.modall {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 420px;
    width: 90%;
    text-align: center;
}

/* intl-tel-input reset */
.iti {
    display: block !important;
    width: 100% !important;
}

.iti input[type=tel] {
    height: 26px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    padding: 0 !important;
}

.iti--separate-dial-code .iti__selected-flag {
    background: transparent !important;
    border-right: 1px solid #DDE2EA;
    padding-right: 8px;
    margin-right: 2px;
}/* ── Destination Hero Showcase Refresh ── *//* Destination detail hero split layout: title left, form right *//* Destination detail: home-style flatpickr time picker */

.page-destination-info .flatpickr-calendar.noCalendar.hasTime {
    background: #ffffff !important;
    border: 1px solid #d4d9e2 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

.page-destination-info .flatpickr-calendar.noCalendar.hasTime::before,
.page-destination-info .flatpickr-calendar.noCalendar.hasTime::after {
    display: none !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-innerContainer {
    overflow: visible !important;
    display: block !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time,
.page-destination-info .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    padding: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border-top: 0 !important;
    line-height: 1 !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper {
    display: block !important;
    width: 58px !important;
    height: 78px !important;
    flex: 0 0 58px !important;
    float: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp,
.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1 !important;
    overflow: visible !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp {
    top: 2px !important;
    bottom: auto !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    bottom: 2px !important;
    top: auto !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:hover,
.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:hover {
    background: transparent !important;
    opacity: 0.75 !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after,
.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    border: none !important;
    background: none !important;
    position: static !important;
    line-height: 1 !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after {
    content: "\25B4" !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    content: "\25BE" !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time input.numInput {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 46px !important;
    height: 40px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
}

.page-destination-info .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.di-hsf-field {
    min-width: 0;
    padding: 0 14px;
    border-right: 1px solid #e6ebf3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.di-hsf-field--time {
    border-right: 0;
}

.di-hsf-label {
    display: block;
    margin-bottom: 2px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6a7890;
}

.di-hsf-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    min-height: 24px;
    border-radius: 0;
    border: 0;
    background: transparent;
}

.di-hsf-input-wrap i {
    color: #214675;
    font-size: 18px;
}

.di-hsf-input-wrap input {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #10223d;
    font-size: 15px;
    font-weight: 700;
}

.di-hsf-input-wrap input[readonly] {
    cursor: default;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.di-hsf-submit {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 10px;
}

.di-hsf-btn {
    border: 0;
    min-height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--turkuaz);
    color: var(--turkuaz-fg);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    white-space: nowrap;
}

.di-hsf-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}/* Destination detail hero uses homepage form behavior (from inc/form.php) */







@keyframes diHeroFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }/* ── Blog Grid Fixes ── *//* ── Blog Detail Modernization ── *//* Preserve admin ratio/focal on all breakpoints (no extra outer padding/min-height distortion) */}

.blog-mobile-reserve-btn {
    display: none;
}

@keyframes blogCtaPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.45), 0 18px 34px rgba(12, 26, 48, 0.26);
    }

    100% {
        box-shadow: 0 0 0 22px rgba(0, 0, 0, 0), 0 18px 34px rgba(12, 26, 48, 0.26);
    }}





/* Blog detail reservation modal */
.blog-booking-modal .modal-dialog {
    max-width: 840px;
    margin: 1.4rem auto;
}

.blog-booking-modal__inner {
    padding: 0;
}

.blog-booking-modal__close,
.blog-booking-modal .close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(8, 20, 40, 0.86);
    color: #f6f8fc !important;
    opacity: 1;
    font-size: 24px;
    text-shadow: none;
    transition: background-color .2s ease, transform .2s ease;
    z-index: 50;
}

.blog-booking-modal__close:hover,
.blog-booking-modal__close:focus-visible,
.blog-booking-modal .close:hover,
.blog-booking-modal .close:focus-visible {
    background: rgba(8, 20, 40, 1);
    transform: scale(1.04);
}

.blog-booking-modal__close>span,
.blog-booking-modal .close>span {
    line-height: 1;
    transform: translateY(-1px);
}

.blog-booking-modal .blog-modal-lux-card {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    position: relative;
}/* ── Entity FAQ Accordion (Blog + Destination Detail) ── *//* ── Destination Hotels List (Left column) ── */



/* ── Social Section Modernization ── */
.social-section {
    padding: 70px 0;
    background: radial-gradient(1200px 400px at 20% -10%, rgba(163, 163, 163, 0.18), transparent 60%),
        radial-gradient(900px 300px at 90% 10%, rgba(42, 60, 90, 0.12), transparent 60%),
        #f8fafc;
}

.social-section .social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.social-section .social-item {
    background: #ffffff;
    border: 1px solid #e9eef6;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--brand-primary);
    box-shadow: 0 6px 18px rgba(20, 35, 70, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.social-section .social-item i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5fb;
    font-size: 20px;
    color: var(--brand-primary);
}

.social-section .social-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-color: rgba(163, 163, 163, 0.45);
}

/* Brand accents */
.social-item.social-instagram i {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
    color: #fff;
}

.social-item.social-facebook i {
    background: #1877f2;
    color: #fff;
}

.social-item.social-tripadvisor i {
    background: #34e0a1;
    color: #0b4a2f;
}

.social-item.social-google i {
    background: #ffffff;
    color: #1a73e8;
    border: 1px solid #e6edf6;
}

.social-item.social-tiktok i {
    background: #0f0f0f;
    color: #25f4ee;
    box-shadow: 2px 0 0 #fe2c55;
}

.social-item.social-google {
    color: #1a1a1a;
}

.social-item.social-tripadvisor {
    color: #0b4a2f;
}/* ── Gallery Bottom Spacing Fix ── *//* Gallery - force equal thumbs in swiper */


/* ── Force content-based height for non-hero Swipers ──
   swiper.min.css sets height:100% on wrapper/slide globally;
   hero needs it, other sliders must auto-size to content.  */
.why-slider,
.gallery-slider {
    height: auto !important;
}

.why-slider .swiper-wrapper,
.gallery-slider .swiper-wrapper,
.why-slider .swiper-slide,
.gallery-slider .swiper-slide {
    height: auto !important;
}

/* Homepage: hero extends under the fixed navbar — no body padding needed */
body.page-home {
    padding-top: 0 !important;
}/* Home destinations: make transfer price prominent at the right side *//* Gallery: reduce bottom padding so footer sits closer *//* Reduce visual gap before footer *//* Contact map fallback */

/* Why section premium motion */
.why-section .anim-card {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition: transform .6s ease, opacity .6s ease, box-shadow .6s ease;
    will-change: transform, opacity;
}

.why-section .anim-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.why-section .why-icon {
    transition: transform .45s ease, box-shadow .45s ease;
}

.why-section .anim-card:hover .why-icon {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}/* Booking lookup page */

@keyframes bookingFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }}/* Hotel directory refresh */





/* Destination detail premium refresh */
.page-destination-info {
    background: #f3f5f8;
}

.page-destination-info .di-book-btn-lg {
    min-height: 54px;
    border-radius: 12px;
    background: #000000;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.page-destination-info .di-book-btn-lg:hover {
    background: #1a1a1a;
    color: #ffffff !important;
}

.page-destination-info .di-book-btn-lg i {
    color: #ffffff;
}

.page-destination-info .di-why-section {
    padding: 72px 0;
    background: #ffffff;
}

.page-destination-info .di-why-section .why-card {
    border: 1px solid #e0e7ef;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}/* Global footer dark refresh *//* Hotel directory: efficient list cards *//* --- css/home-lux.css --- *//* ================================================================
   Homepage Lux Layout (Reference-driven)
   ================================================================ */

.page-home {
    overflow-x: clip;
}

body.page-home {
    min-height: 100%;
    overflow-y: visible !important;
}/* Fallback: if Swiper can't initialize, keep one-row horizontal flow */

.lux-pop-card {
    display: block;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.lux-pop-image {
    aspect-ratio: 16 / 8.5;
    overflow: hidden;
}

.lux-pop-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.lux-pop-card:hover .lux-pop-image img {
    transform: scale(1.05);
}

.lux-pop-body {
    padding: 10px 12px;
}

.lux-pop-route {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #111111;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lux-pop-route span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.lux-pop-route i {
    color: #7a7a7a;
    font-size: 16px;
    flex-shrink: 0;
}

.lux-pop-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lux-pop-meta strong {
    color: #212836;
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

.lux-pop-btn {
    padding: 4px 11px;
    border-radius: 7px;
    background: linear-gradient(180deg, #a3a3a3 0%, #7a7a7a 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.lux-pop-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lux-pop-nav-btn:hover {
    background: rgba(122, 122, 122, 0.92);
    border-color: rgba(122, 122, 122, 0.92);
}

.lux-review-strip {
    background: #f6f7fb;
    border-top: 1px solid #e5e8f0;
    border-bottom: 1px solid #e5e8f0;
    padding: 18px 0;
}

.lux-review-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.lux-review-summary {
    background: #ffffff;
    border: 1px solid #e3e7ef;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.lux-review-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111111;
    font-size: 23px;
    font-weight: 800;
}

.lux-review-brand i {
    color: #fbbc05;
    font-size: 21px;
}

.lux-review-score {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 10px;
}

.lux-review-score strong {
    color: #111111;
    font-size: 18px;
    font-weight: 800;
}

.lux-review-score span {
    color: #5b6477;
    font-size: 12px;
    font-weight: 600;
}

.lux-review-summary p {
    margin: 8px 0 14px;
    color: #3e4a64;
    font-size: 13px;
    line-height: 1.45;
}

.lux-review-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(180deg, #a3a3a3 0%, #7a7a7a 100%);
    font-size: 12px;
    font-weight: 700;
}

.lux-review-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lux-review-card {
    background: #ffffff;
    border: 1px solid #e3e7ef;
    border-radius: 10px;
    overflow: hidden;
    display: block;
}

.lux-review-card-image {
    aspect-ratio: 16 / 8;
}

.lux-review-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lux-review-card-body {
    padding: 10px 12px;
}

/* Why section: taller and aligned cards */
.page-home .why-slider .swiper-wrapper {
    align-items: stretch;
}

.page-home .why-slider .swiper-slide {
    height: auto;
    display: flex;
}

.page-home .why-card {
    min-height: 286px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 1080p + zoom (yaklaşık 1300x700) için kompakt masaüstü düzen */












/* Desktop horizontal form experiment */


/* Home Flatpickr tune-up (Passenger-style consistency) */
.page-home .flatpickr-calendar {
    z-index: 12000 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #d8deea !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24) !important;
    color: #111111 !important;
}

.page-home .flatpickr-calendar:not(.noCalendar) {
    width: 278px !important;
    min-width: 278px !important;
    max-width: 278px !important;
    padding: 8px !important;
}

.page-home .flatpickr-calendar:not(.noCalendar) .flatpickr-days,
.page-home .flatpickr-calendar:not(.noCalendar) .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.page-home .flatpickr-calendar::before,
.page-home .flatpickr-calendar::after {
    border-bottom-color: #ffffff !important;
}

.page-home .flatpickr-months .flatpickr-month,
.page-home .flatpickr-current-month,
.page-home .flatpickr-current-month .flatpickr-monthDropdown-months,
.page-home .flatpickr-current-month input.cur-year {
    color: #111111 !important;
    fill: #111111 !important;
    font-weight: 700 !important;
}

.page-home .flatpickr-months .flatpickr-prev-month:hover svg,
.page-home .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #000000 !important;
}

.page-home .flatpickr-weekday {
    color: #5e6880 !important;
    font-weight: 700 !important;
}

.page-home .flatpickr-day {
    color: #2a334a !important;
    border-radius: 8px !important;
    border-color: transparent !important;
}

.page-home .flatpickr-day.prevMonthDay,
.page-home .flatpickr-day.nextMonthDay {
    color: #6f7a91 !important;
}

.page-home .flatpickr-day.flatpickr-disabled,
.page-home .flatpickr-day.flatpickr-disabled:hover,
.page-home .flatpickr-day.prevMonthDay.flatpickr-disabled,
.page-home .flatpickr-day.nextMonthDay.flatpickr-disabled,
.page-home .flatpickr-day.notAllowed,
.page-home .flatpickr-day.notAllowed:hover {
    color: #a8b1c1 !important;
    opacity: 0.42 !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

.page-home .flatpickr-day:hover {
    background: #edf2fb !important;
    border-color: #edf2fb !important;
}

.page-home .flatpickr-day.today {
    border-color: var(--turkuaz) !important;
    color: #111111 !important;
}

.page-home .flatpickr-day.selected,
.page-home .flatpickr-day.startRange,
.page-home .flatpickr-day.endRange {
    background: var(--turkuaz) !important;
    border-color: var(--turkuaz) !important;
    color: #ffffff !important;
}

.page-home .flatpickr-calendar.noCalendar.hasTime {
    background: #ffffff !important;
    border: 1px solid #d4d9e2 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

.page-home .flatpickr-calendar.noCalendar.hasTime::before,
.page-home .flatpickr-calendar.noCalendar.hasTime::after {
    display: none !important;
}

.page-home .flatpickr-calendar .flatpickr-innerContainer {
    overflow: visible !important;
    display: block !important;
}

.page-home .flatpickr-calendar .flatpickr-time,
.page-home .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    padding: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border-top: 0 !important;
    line-height: 1 !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper {
    display: block !important;
    width: 58px !important;
    height: 78px !important;
    flex: 0 0 58px !important;
    float: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp,
.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1 !important;
    overflow: visible !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp {
    top: 2px !important;
    bottom: auto !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    bottom: 2px !important;
    top: auto !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:hover,
.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:hover {
    background: transparent !important;
    opacity: 0.75 !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after,
.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    border: none !important;
    background: none !important;
    position: static !important;
    line-height: 1 !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after {
    content: "\25B4" !important;
}

.page-home .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    content: "\25BE" !important;
}

.page-home .flatpickr-calendar .flatpickr-time input.numInput {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 46px !important;
    height: 40px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
}

.page-home .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.page-home .flatpickr-custom-confirm {
    display: none !important;
}

.page-home .flatpickr-custom-confirm:hover {
    background: transparent !important;
    opacity: 0.7 !important;
}

@media (max-width: 575px) {
    .page-home .gallery-section .gallery-static-grid {
        grid-template-columns: 1fr;
    }
}

.page-home .airport-pricing-section--timeline .container {
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(7, 8, 11, 0.1);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 22px 54px rgba(7, 8, 11, 0.09);
}

.page-home .airport-pricing-section--timeline .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-right: 0;
    margin-left: 0;
}

.page-home .airport-pricing-section--timeline .col-xl-4,
.page-home .airport-pricing-section--timeline .col-lg-4 {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0 !important;
}/* Homepage blog cards: compact single-image layout *//* Home hero passenger dropdown hardening */

/* --- css/reservation-steps.css --- */
/* Reservation flow UI refinements for step1-step2-step3.
   Scoped to .reservation-flow classes to avoid side effects. */

.reservation-flow.reservation-step-1,
.reservation-flow.reservation-step-2,
.reservation-flow.reservation-step-3 {
    background: var(--surface-2);
    background-image: none;
    color: var(--text);
    font-family: var(--font-family-base);
}

/* ── Step 2: Light / modern Bootstrap override ───────────────────────── */
.reservation-flow.reservation-step-2 {
    background: var(--surface-2) !important;
    background-image: none !important;
    color: var(--text) !important;
}

/* ──────────────────────────────────────────────────────────────────────── */

.reservation-flow .step-progress {
    background: #fff;
    border-bottom: 1px solid #e9edf5;
    padding: 28px 0 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.reservation-flow .step-breadcrumb {
    max-width: 780px;
    margin: 0 auto;
}

.reservation-flow .step-breadcrumb ul {
    align-items: flex-start;
    margin: 0;
    padding: 0 8px;
}

.reservation-flow .step-breadcrumb ul::before {
    display: none;
}

.reservation-flow .step-breadcrumb ul li {
    position: relative;
    text-align: center;
    min-width: 0;
}

.reservation-flow .step-breadcrumb ul li:not(:last-child)::after {
    top: 21px;
    left: calc(50% + 28px);
    width: calc(100% - 56px);
    height: 3px;
    background: #e5e7ef;
    border-radius: 999px;
}

.reservation-flow .step-breadcrumb ul li.completed:not(:last-child)::after {
    background: var(--turkuaz);
}

.reservation-flow .circle-group {
    width: 44px;
    height: 44px;
    border: 2px solid #e5e7ef;
    background: #fff;
    color: #94a3b8;
    box-shadow: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
}

.reservation-flow .circle-group i {
    font-size: 18px;
}

.reservation-flow .circle-group.active {
    background: var(--turkuaz);
    border-color: var(--turkuaz);
    color: #fff;
    box-shadow:
        0 0 0 5px rgba(40, 150, 201, 0.18),
        0 6px 16px rgba(40, 150, 201, 0.25);
}

.reservation-flow .circle-group.completed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: #fff;
}

.reservation-flow .step-name {
    display: block;
    margin-top: 12px;
}

.reservation-flow .step-name span {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: #94a3b8;
}

.reservation-flow .step-breadcrumb li.active .step-name span,
.reservation-flow .step-breadcrumb li.completed .step-name span {
    color: #1e293b;
}

/* Step 1 progress redesign */
.reservation-step-1 .step-progress {
    background: linear-gradient(180deg, #f8fafc 0%, #f4f6fb 100%);
    border-bottom: 0;
    padding: 24px 0 18px;
    box-shadow: none;
}

.reservation-step-1 .step-breadcrumb {
    max-width: 100%;
    width: 100%;
    padding: 12px 18px 14px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.reservation-step-1 .step-breadcrumb ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 6px;
    padding: 0;
}

.reservation-step-1 .step-breadcrumb ul li {
    position: relative;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reservation-step-1 .step-breadcrumb ul li:not(:last-child)::after {
    top: 25px;
    left: calc(50% + 34px);
    width: calc(100% - 68px);
    height: 4px;
    background: linear-gradient(90deg, #dbe5f3 0%, #e9edf5 100%);
    border-radius: 999px;
}

.reservation-step-1 .circle-group {
    width: 52px;
    height: 52px;
    border: 2px solid #d5dfed;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    color: #7a8aa2;
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 800;
    position: relative;
    z-index: 2;
}

.reservation-step-1 .circle-group.active {
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
    border-color: #000000;
    color: #ffffff;
    box-shadow:
        0 0 0 6px rgba(0, 0, 0, 0.12),
        0 10px 24px rgba(0, 0, 0, 0.24);
}

.reservation-step-1 .circle-group.completed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
}

.reservation-step-1 .step-number {
    font-weight: 800;
    line-height: 1;
}

.reservation-step-1 .step-name {
    margin-top: 10px;
}

.reservation-step-1 .step-name span {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: #7a879b;
    letter-spacing: 0.2px;
}

.reservation-step-1 .step-breadcrumb li.active .step-name span,
.reservation-step-1 .circle-group.active+.step-name span,
.reservation-step-1 .circle-group.completed+.step-name span {
    color: #111827;
}/* Route Info Box */

.reservation-step-1 .route-title h2 {
    margin-bottom: 18px;
    color: #fff;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

.reservation-step-1 .route-title h2 i {
    color: #ffffff;
    margin: 0 14px;
    font-size: 0.85em;
}

.reservation-step-1 .route-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.reservation-step-1 .route-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    text-align: left;
}

.reservation-step-1 .route-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reservation-step-1 .route-stat-icon i {
    color: #ffffff;
    font-size: 14px;
}

.reservation-step-1 .route-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #ffffff;
    font-weight: 700;
}

.reservation-step-1 .route-stat-value {
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
}

.reservation-step-1 .step1-route-form-head h3 {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Step1 Flatpickr: match homepage date/time look */
.reservation-step-1 .flatpickr-calendar {
    z-index: 12000 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #d8deea !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24) !important;
    color: #1f2937 !important;
}

.reservation-step-1 .flatpickr-calendar:not(.noCalendar) {
    width: 278px !important;
    min-width: 278px !important;
    max-width: 278px !important;
    padding: 8px !important;
}

.reservation-step-1 .flatpickr-calendar:not(.noCalendar) .flatpickr-days,
.reservation-step-1 .flatpickr-calendar:not(.noCalendar) .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.reservation-step-1 .flatpickr-calendar::before,
.reservation-step-1 .flatpickr-calendar::after {
    border-bottom-color: #ffffff !important;
}

.reservation-step-1 .flatpickr-months .flatpickr-month,
.reservation-step-1 .flatpickr-current-month,
.reservation-step-1 .flatpickr-current-month .flatpickr-monthDropdown-months,
.reservation-step-1 .flatpickr-current-month input.cur-year {
    color: #1f2937 !important;
    fill: #1f2937 !important;
    font-weight: 700 !important;
}

.reservation-step-1 .flatpickr-months .flatpickr-prev-month:hover svg,
.reservation-step-1 .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #000000 !important;
}

.reservation-step-1 .flatpickr-weekday {
    color: #5e6880 !important;
    font-weight: 700 !important;
}

.reservation-step-1 .flatpickr-day {
    color: #374151 !important;
    border-radius: 8px !important;
    border-color: transparent !important;
}

.reservation-step-1 .flatpickr-day.prevMonthDay,
.reservation-step-1 .flatpickr-day.nextMonthDay {
    color: #6f7a91 !important;
}

.reservation-step-1 .flatpickr-day.flatpickr-disabled,
.reservation-step-1 .flatpickr-day.flatpickr-disabled:hover,
.reservation-step-1 .flatpickr-day.prevMonthDay.flatpickr-disabled,
.reservation-step-1 .flatpickr-day.nextMonthDay.flatpickr-disabled,
.reservation-step-1 .flatpickr-day.notAllowed,
.reservation-step-1 .flatpickr-day.notAllowed:hover {
    color: #a8b1c1 !important;
    opacity: 0.42 !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

.reservation-step-1 .flatpickr-day:hover {
    background: #f3f4f6 !important;
    border-color: #f3f4f6 !important;
}

.reservation-step-1 .flatpickr-day.today {
    border-color: var(--turkuaz) !important;
    color: #111827 !important;
}

.reservation-step-1 .flatpickr-day.selected,
.reservation-step-1 .flatpickr-day.startRange,
.reservation-step-1 .flatpickr-day.endRange {
    background: var(--turkuaz) !important;
    border-color: var(--turkuaz) !important;
    color: #ffffff !important;
}

.reservation-step-1 .flatpickr-calendar.noCalendar.hasTime {
    background: #ffffff !important;
    border: 1px solid #d4d9e2 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

.reservation-step-1 .flatpickr-calendar.noCalendar.hasTime::before,
.reservation-step-1 .flatpickr-calendar.noCalendar.hasTime::after {
    display: none !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-innerContainer {
    overflow: visible !important;
    display: block !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time,
.reservation-step-1 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    padding: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border-top: 0 !important;
    line-height: 1 !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper {
    display: block !important;
    width: 58px !important;
    height: 78px !important;
    flex: 0 0 58px !important;
    float: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp,
.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1 !important;
    overflow: visible !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp {
    top: 2px !important;
    bottom: auto !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    bottom: 2px !important;
    top: auto !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:hover,
.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:hover {
    background: transparent !important;
    opacity: 0.75 !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after,
.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    border: none !important;
    background: none !important;
    position: static !important;
    line-height: 1 !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after {
    content: "\25B4" !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    content: "\25BE" !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time input.numInput {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 46px !important;
    height: 40px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1 !important;
}

.reservation-step-1 .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}/* Vehicle Selection Cards */

.reservation-step-1 .car-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.reservation-step-1 .car-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.reservation-step-1 .car-rating-stars i {
    color: var(--n-800);
    font-size: 16px;
}

.reservation-step-1 .car-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reservation-step-1 .car-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #e1e8f2;
    background: #f3f7fc;
    color: #394a65;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.reservation-step-1 .car-action-btn:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #111111;
}

.reservation-step-1 .car-action-btn i {
    font-size: 16px;
}

.reservation-step-1 .features-toggle-btn {
    border-radius: 999px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #4c5c73;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: 8px;
    width: fit-content;
}

.reservation-step-1 .features-toggle-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #1f2937;
}

.reservation-step-1 .features-content {
    margin-top: 0;
    margin-bottom: 4px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e6edf7;
}

.reservation-step-1 .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px 12px;
}

.reservation-step-1 .feature-item {
    color: #556378;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reservation-step-1 .feature-item i {
    color: #111111;
    font-size: 14px;
}

.reservation-step-1 .main-btn-2 {
    width: auto;
    min-width: 190px;
    min-height: 44px;
    background: var(--turkuaz);
    color: #ffffff;
    border-radius: 12px;
    font-weight: 800;
    font-size: 18px;
    border: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 8px 18px rgba(40, 150, 201, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.2px;
    text-decoration: none;
}

.reservation-step-1 .main-btn-2 i {
    font-size: 16px;
    color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reservation-step-1 .main-btn-2:hover {
    background: var(--turkuaz-hover);
    box-shadow: 0 10px 22px rgba(40, 150, 201, 0.38);
    color: #ffffff;
    text-decoration: none;
}



.reservation-step-1 .main-btn-2:hover i {
    transform: translateX(4px);
}






.reservation-step-3 .rez-complete-section {
    padding: 74px 0 96px;
}/* ---------------------------------------------------- *//* OVERRIDE FOR RESPONSIVE.CSS CONFLICT *//* ---------------------------------------------------- *//* was forcing all inputs to be small and cramped. *//* We override it here with MAXIMUM specificity for Step 2. *//* Force ALL input-groups to have proper height (fixes özel not and other inputs) *//* Specifically target the Return Transfer (Dönüş Bilgileri) inputs with horizontal flexbox design *//* Ensure the inputs inside return-transfer don't get double padding or wrong height *//* Fix return transfer toggle checkbox background - prevent any pattern background */

/* --- css/step2-flatpickr.css --- */
/**
 * Step2 Flatpickr Time Picker — tek yetkili kaynak
 * Yüklenme: flatpickr.min.css'ten sonra. body.reservation-step-2 ile sadece step2'de geçerli.
 */
body.reservation-step-2 .flatpickr-calendar {
    overflow: visible !important;
}

body.reservation-step-2 .flatpickr-calendar.noCalendar.hasTime {
    padding-bottom: 0 !important;
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-innerContainer {
    overflow: visible !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time,
body.reservation-step-2 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 8px 10px !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    background: #fff !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 44px !important;
    height: auto !important;
    min-height: auto !important;
    float: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
}

/* Reorder: ▲ (top) → sayı (middle) → ▼ (bottom) */
body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp {
    order: 1 !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper input.numInput {
    order: 2 !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    order: 3 !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp,
body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:hover,
body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:hover {
    background: #cbd5e1 !important;
    border-color: #94a3b8 !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after,
body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    font-size: 9px !important;
    color: #334155 !important;
    border: none !important;
    background: none !important;
    position: static !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after {
    content: "\25B2" !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    content: "\25BC" !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time input.numInput {
    width: 40px !important;
    height: 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

body.reservation-step-2 .flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

body.reservation-step-2 .flatpickr-custom-confirm {
    display: block !important;
    width: auto !important;
    min-width: 92px !important;
    margin: 8px auto 0 !important;
    padding: 8px 12px !important;
    background: #1a73e8 !important;
    color: #fff !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    border: none !important;
    box-sizing: border-box !important;
}

body.reservation-step-2 .flatpickr-custom-confirm:hover {
    background: #1557b0 !important;
}


/* === Step2 inline CSS: begin === */
/* --- step2.php inline block 1 --- */
/* ── Step-2 two-column layout ─── */
/* Override global `#phone-error { position:absolute; }` from style.css */
.reservation-step-2 #phone-error {
    position: static !important;
    display: block !important;
    margin-top: 6px !important;
    line-height: 1.2 !important;
}

.reservation-step-2 input.error-label,
.reservation-step-2 select.error-label,
.reservation-step-2 textarea.error-label {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35) !important;
    border-radius: 8px !important;
}

.reservation-step-2 input[type=number]::-webkit-outer-spin-button,
.reservation-step-2 input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.reservation-step-2 .extra-price-hint {
    display: none !important;
}/* step2 tokens (--brand-gold, --step2-navy) — moved to the single :root block at the top. *//* ============================================================
           STEP2 REDESIGN (UI ONLY) - override legacy styles
           ============================================================ *//* Extras - minimal *//* --- css/step2-oscar.css --- *//* --- step2.php inline block 2 --- *//* Final visual pass for Step-2 (aligned with Step-1 design language) *//* ============================================================
           FINAL COLOR BOOST + STEP2 VISUAL POLISH
           ============================================================ *//* Date/time wrappers: remove decorative icons and keep clean spacing *//* Remove date/time icons rendered inside input backgrounds *//* Return estimated pickup notice - like target reference *//* Extras cards and steppers - more lively brand colors */



/* === Step2 inline CSS: end === *//* === Static inline page CSS: begin === *//* --- index.php inline block 1 --- *//* --- step1.php inline block 1 --- */

@media (max-width: 575px) {
    .reservation-step-1 .step1-search-collapse-head {
        display: flex;
    }/* --- destination_info.php inline block 1 --- */}/* === Static inline page CSS: end === *//* === Additional static inline page CSS: begin === *//* --- kurumsal.php inline block 1 --- */

.about-image {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e6edf6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- view.php inline block 1 --- */
body.page-voucher-view {
    background: #f3f4f6;
    font-family: Arial, Helvetica, sans-serif;
}

.v-page {
    max-width: 900px;
    margin: 28px auto;
    padding: 0 12px 60px;
}

/* ---- action bar ---- */
.v-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.v-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity .2s;
}

.v-btn:hover {
    opacity: .85;
}

.v-btn-danger {
    background: #fee2e2;
    color: #dc2626;
}

.v-btn-wa {
    background: #dcfce7;
    color: #15803d;
    font-size: 22px;
    padding: 8px 13px;
}

.v-btn-print {
    background: #e5e7eb;
    color: #374151;
    font-size: 22px;
    padding: 8px 13px;
}

.v-btn-pdf {
    background: #e5e7eb;
    color: #374151;
    font-size: 22px;
    padding: 8px 13px;
}

.v-cancel-status {
    margin-bottom: 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.45;
}

.v-cancel-status strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.v-cancel-status.pending {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

.v-cancel-status.approved {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.v-cancel-status.rejected {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

/* ---- voucher card ---- */
#voucher {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .11);
}/* header band *//* sections *//* info grid *//* transfer card *//* return colors *//* table *//* price *//* note *//* footer *//* mobile *//* --- galeri.php inline block 1 --- *//* --- politika.php inline block 1 --- *//* --- sss.php inline block 1 --- */

/* --- sozluk.php standalone completion styles --- */
body.page-sozluk-complete {
    font-family: Arial, sans-serif;
    padding: 32px;
    background: #f6f8fb;
    color: #1d2b44;
}

.page-sozluk-complete .box {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #dde4f0;
    border-radius: 12px;
    padding: 24px;
}

.page-sozluk-complete h1 {
    margin-top: 0;
    font-size: 22px;
}

.page-sozluk-complete code {
    background: #eef3fa;
    padding: 2px 6px;
    border-radius: 6px;
}

.page-sozluk-complete ul {
    margin: 16px 0 0;
    padding-left: 18px;
}/* === Additional static inline page CSS: end === *//* Header contrast lock (post-consolidation fallback) */

/* === Consolidated external CSS: end === */

/* ================================================================
   SITE HEADER (inc/header.php) — monochrome, 2026-07-27 rebuild
   Base + desktop. Mobile lives in responsive.css under the same
   .sh-* names. Layout height is exposed as --sh-h so the scrim can
   line up with the bar.
   ================================================================ */

.sh {
    /* white brand row + turquoise nav row; --sh-h is the total, used by the
       mobile scrim and by inc/js.php for body padding */
    --sh-top-h: 64px;
    --sh-navrow-h: 44px;
    --sh-h: calc(var(--sh-top-h) + var(--sh-navrow-h));
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background: var(--surface);
    transition: box-shadow .22s ease;
}

.sh.scrolled {
    box-shadow: var(--shadow-sm);
}

/* --- row 1: white brand row --- */
.sh-top {
    background: var(--surface);
}

.sh-top-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--sh-top-h);
}

.sh-top-right {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.sh-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
    transition: color .16s ease;
}

.sh-phone i {
    font-size: 22px;
    color: var(--turkuaz);
}

.sh-phone:hover {
    color: var(--turkuaz-dark);
}

/* flags switch language directly — no dropdown */
.sh-flags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 2px;
    line-height: 0;
    opacity: .78;
    transition: opacity .16s ease, box-shadow .16s ease;
}

.sh-flag .flag-icon {
    width: 26px;
    height: 18px;
    border-radius: 2px;
}

.sh-flag:hover {
    opacity: 1;
}

.sh-flag.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--turkuaz);
}

/* --- row 2: turquoise nav row --- */
.sh-navbar {
    background: var(--turkuaz);
}

.sh-navbar-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--sh-navrow-h);
}

/* --- logo --- */
.sh-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    text-decoration: none !important;
}

.sh-logo-img {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

/* Text wordmark only steps in when the logo image cannot be loaded. */
.sh-logo-text {
    display: none;
    color: var(--accent);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-logo-img.img-error {
    display: none;
}

.sh-logo-img.img-error+.sh-logo-text {
    display: block;
}

/* --- desktop nav (inside the turquoise row, centred) --- */
.sh-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
}

.sh-nav-link {
    padding: 0 13px;
    height: var(--sh-navrow-h);
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .18s ease, color .18s ease;
}

.sh-nav-link:hover,
.sh-nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.sh-nav-link.is-active {
    background: rgba(0, 0, 0, 0.14);
    color: #ffffff;
    font-weight: 700;
}

/* --- booking-detail link, right edge of the turquoise row --- */
.sh-cta {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-pill);
    background: transparent;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease;
}

.sh-cta i {
    font-size: 16px;
}

.sh-cta:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #ffffff;
}

/* --- burger (mobile only, hidden here) --- */
.sh-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

.sh-burger-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 18px;
    height: 14px;
}

.sh-burger-box span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transition: transform .22s ease, opacity .18s ease;
}

.sh.is-open .sh-burger-box span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.sh.is-open .sh-burger-box span:nth-child(2) {
    opacity: 0;
}

.sh.is-open .sh-burger-box span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- mobile panel + scrim (markup exists on every breakpoint) --- */
.sh-panel,
.sh-scrim {
    display: none;
}

.sh-panel[hidden],
.sh-scrim[hidden] {
    display: none !important;
}

/* --- focus + scroll lock --- */
.sh a:focus-visible,
.sh button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body.sh-lock {
    overflow: hidden;
}

/* ================================================================
   HOME HERO + SEARCH FORM — monochrome rebuild, 2026-07-27
   Two form variants share one set of .hsf-* rules:
     .hero-search-form--lux  -> home: single-line bar (from/to/pax/currency)
     .hero-search-form       -> destination + step1: 2-row grid (adds date/time)
   ================================================================ */

/* ---------------- hero shell ---------------- */
/* overflow stays on the slider, not the section, so the search dropdowns
   can escape the hero instead of being clipped by it */
.uxforge-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(560px, 76vh, 780px);
    background: var(--n-1000);
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.uxforge-hero .swiper.main-hero-slider,
.uxforge-hero .swiper-wrapper,
.uxforge-hero .swiper-slide {
    height: 100%;
    width: 100%;
}

.hero-slide-bg {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero-slide-bg img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.26) 32%, rgba(0, 0, 0, 0.88) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 132px 0 56px;
}

/* ---------------- hero copy ---------------- */
.lux-hero-copy {
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

.hero-title {
    margin: 0 0 12px;
    color: #ffffff;
    font-family: var(--font-family-display);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.hero-title-sub {
    margin: 0 auto;
    max-width: 660px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    font-weight: 400;
    line-height: 1.6;
}

/* ---------------- search card ---------------- */
/* Shared card shell — also used by destination_info and step1. */
.hero-search-card {
    padding: 8px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

/* Hero-only sizing and depth. */
.uxforge-hero .hero-search-card {
    max-width: 1180px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.lux-booking-title {
    margin: 0 0 10px;
    padding: 4px 8px 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* The hero already carries the headline, so the card title is redundant there. */
.uxforge-hero .lux-booking-title {
    display: none;
}

/* ---------------- shared field styles ---------------- */
.hsf-field {
    position: relative;
    min-width: 0;
}

.hsf-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 68px;
    padding: 0 16px;
    border-radius: 14px;
    cursor: text;
    transition: background-color .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hsf-input-wrap:hover {
    background: var(--n-25);
}

.hsf-input-wrap:focus-within {
    background: var(--n-25);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.hsf-icon {
    flex: 0 0 auto;
    color: var(--n-500);
    font-size: 20px;
    line-height: 1;
}

.hsf-input-inner {
    flex: 1 1 auto;
    min-width: 0;
}

.hsf-label {
    display: block;
    margin: 0 0 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    cursor: inherit;
}

.hsf-input {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    outline: none !important;
    text-overflow: ellipsis;
}

.hsf-input::placeholder {
    color: var(--n-400);
    font-weight: 500;
}

span.hsf-input {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.hsf-field--passenger .hsf-input-wrap,
.hsf-field--currency .hsf-input-wrap {
    cursor: pointer;
}

/* swap button between from/to */
.hsf-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0 -19px;
    padding: 0;
    z-index: 3;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-2);
    font-size: 18px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, transform .28s ease;
}

.hsf-divider:hover {
    border-color: var(--turkuaz);
    color: var(--turkuaz-dark);
    transform: rotate(180deg);
}

/* submit */
.hsf-submit {
    display: flex;
    align-items: center;
}

.hsf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 60px;
    min-width: 168px;
    padding: 0 26px;
    border: 0;
    border-radius: 14px;
    background: var(--turkuaz);
    color: var(--turkuaz-fg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}

.hsf-btn:hover {
    background: var(--turkuaz-hover);
}

.hsf-btn i {
    font-size: 19px;
}

/* ---------------- variant A: home single-line bar ---------------- */
.hero-search-form--lux .hsf-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.hero-search-form--lux .hsf-field {
    flex: 1 1 0;
}

.hero-search-form--lux .hsf-field--sm {
    flex: 0 0 158px;
}

.hero-search-form--lux .hsf-field--to::before,
.hero-search-form--lux .hsf-field--sm::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 1px;
    background: var(--border);
}

/* make room for the swap button sitting on the from/to seam */
.hero-search-form--lux .hsf-field--to .hsf-input-wrap {
    padding-left: 36px;
}

.hero-search-form--lux .hsf-submit--cta {
    flex: 0 0 auto;
    padding-left: 8px;
}

/* ---------------- variant B: 2-row grid (date + time) ---------------- */
.hero-search-form:not(.hero-search-form--lux) .hsf-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
}

.hero-search-form:not(.hero-search-form--lux) .hsf-input-wrap {
    height: 62px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.hero-search-form:not(.hero-search-form--lux) .hsf-input-wrap:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}

.hero-search-form:not(.hero-search-form--lux) .hsf-field--from {
    grid-column: span 4;
}

.hero-search-form:not(.hero-search-form--lux) .hsf-field--to {
    grid-column: span 4;
}

.hero-search-form:not(.hero-search-form--lux) .hsf-field--date,
.hero-search-form:not(.hero-search-form--lux) .hsf-field--time {
    grid-column: span 2;
}

.hero-search-form:not(.hero-search-form--lux) .hsf-field--passenger,
.hero-search-form:not(.hero-search-form--lux) .hsf-field--currency {
    grid-column: span 4;
}

.hero-search-form:not(.hero-search-form--lux) .hsf-submit--cta {
    grid-column: span 4;
}

.hero-search-form:not(.hero-search-form--lux) .hsf-divider {
    display: none;
}

/* ---------------- passenger / currency dropdowns ---------------- */
.paxs {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 40;
    min-width: 288px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.paxs.pax-open,
.paxs.show {
    display: block;
}

.hsf-field--currency .paxs {
    right: 0;
    left: auto;
    min-width: 190px;
    padding: 6px;
}

.pax-row+.pax-row {
    margin-top: 12px;
}

.passenger-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.passenger-line label {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.passenger-line input[type="number"] {
    display: none;
}

.uxforge-passenger-spinner {
    display: flex;
    align-items: center;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.uxforge-passenger-spinner__btn {
    width: 38px;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease;
}

.uxforge-passenger-spinner__btn:hover {
    background: var(--n-50);
}

.uxforge-passenger-spinner__input {
    width: 46px;
    height: 100%;
    border: 0;
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    outline: none !important;
}

.kur-item {
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.kur-item:hover {
    background: var(--turkuaz-soft);
    color: var(--turkuaz-dark);
}

/* ---------------- location autocomplete ---------------- */
.live-result {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    z-index: 50;
    max-height: 330px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.live-result.live-result-floating {
    position: fixed;
}

.live-result .item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.live-result .item:hover,
.live-result .item.is-active {
    background: var(--turkuaz-soft);
    color: var(--turkuaz-dark);
}

.live-result-state {
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.live-result-state .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--n-400);
    animation: hsfPulse 1s ease-in-out infinite;
}

@keyframes hsfPulse {

    0%,
    100% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }
}

/* ---------------- mobile sticky CTA (home) ---------------- */
.lux-mobile-sticky-cta {
    display: none;
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 1020;
    align-items: center;
    gap: 8px;
}

.lux-mobile-cta-main {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: var(--radius-pill);
    background: var(--turkuaz);
    color: var(--turkuaz-fg) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: var(--shadow-lg);
}

.lux-mobile-cta-wa {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--n-1000) !important;
    color: #ffffff !important;
    font-size: 22px;
    text-decoration: none !important;
    box-shadow: var(--shadow-lg);
}

/* ================================================================
   TRANSFER REGION CARDS — monochrome rebuild, 2026-07-27
   Three shapes, one visual language:
     .avt-route          -> home: compact price rows
     .destination-card   -> destinations.php: image cards
     .di-related-card    -> destination_info.php: related regions
   ================================================================ */

/* ---------------- home: section head ---------------- */
.avt-routes {
    padding: 76px 0;
    background: var(--surface);
}

.avt-routes__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.avt-routes__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.avt-routes__eyebrow i {
    font-size: 14px;
}

.avt-routes__title {
    margin: 0;
    font-family: var(--font-family-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.avt-routes__title a {
    color: var(--text);
    transition: color .18s ease;
}

.avt-routes__title a:hover {
    color: var(--turkuaz-dark);
}

.avt-routes__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.avt-routes__more:hover {
    border-color: var(--turkuaz);
    background: var(--turkuaz);
    color: var(--accent-fg);
}

.avt-routes__more i {
    font-size: 18px;
}

/* ---------------- home: region grid ----------------
   Same photo cards as the destinations page. Fixed at three columns so the
   six-card shortlist always fills two clean rows. */
.avt-routes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* ---------------- destinations.php + related: shared card ---------------- */
.destinations-grid,
.destinations-section {
    padding: 64px 0;
}

.destination-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.destination-card:hover {
    border-color: var(--turkuaz);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.destination-image {
    position: relative;
    aspect-ratio: var(--transfer-media-ratio);
    overflow: hidden;
    background: var(--n-100);
}

.destination-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.destination-card:hover .destination-image img {
    transform: scale(1.04);
}

.destination-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
}

.destination-row-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.destination-row-copy {
    min-width: 0;
}

.destination-origin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.destination-origin i {
    font-size: 14px;
}

.destination-title {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.destination-meta-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.destination-meta-price i {
    color: var(--n-400);
    font-size: 16px;
}

.destination-meta {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--n-100);
}

.destination-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.destination-meta-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--n-50);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
}

.destination-meta-info i {
    color: var(--n-500);
    font-size: 14px;
}

/* ---------------- destination_info.php: related cards ----------------
   Same photo row card as the destinations page; only the strip spacing
   differs, so there is nothing extra to declare here. */

/* ================================================================
   HOME SECTIONS — monochrome rebuild, 2026-07-27
   Social showcase, blog cards, gallery grid, FAQ accordion and the
   shared section headers they all sit under.
   ================================================================ */

/* ---------------- shared section headers ---------------- */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.section-header-center {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.section-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.section-title {
    margin: 0;
    font-family: var(--font-family-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section-title-link {
    color: var(--text);
    transition: color .18s ease;
}

.section-title-link:hover {
    color: var(--turkuaz-dark);
}

.section-subtitle {
    margin: 12px auto 0;
    max-width: 620px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* ---------------- social showcase ---------------- */
.lux-social-showcase {
    padding: 0 0 76px;
    background: var(--surface);
}

.lux-social-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.lux-social-card {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lux-social-card:hover {
    border-color: var(--turkuaz);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.lux-social-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.lux-social-card-head {
    min-width: 0;
}

.lux-social-card-head strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.lux-social-card-inline-action {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.lux-social-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--turkuaz-soft);
    color: var(--turkuaz-dark);
    font-size: 21px;
    transition: background-color .18s ease, color .18s ease;
}

.lux-social-card:hover .lux-social-card-icon {
    background: var(--turkuaz);
    color: var(--turkuaz-fg);
}

/* ---------------- blog cards ---------------- */
.blog-section {
    padding: 76px 0;
    background: var(--n-25);
}

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.blog-card:hover {
    border-color: var(--turkuaz);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.blog-card-image {
    position: relative;
    aspect-ratio: var(--hero-ratio-blog, 16 / 9);
    overflow: hidden;
    background: var(--n-100);
}

.blog-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.04);
}

.blog-card-time-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.66);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.blog-card-time-badge i {
    font-size: 13px;
}

.blog-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

.blog-card-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-card-excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--n-100);
    color: var(--turkuaz-dark);
    font-size: 13.5px;
    font-weight: 700;
}

.blog-read-more i {
    font-size: 17px;
    transition: transform .2s ease;
}

.blog-card:hover .blog-read-more i {
    transform: translateX(3px);
}

/* ---------------- gallery ---------------- */
.gallery-section {
    padding: 76px 0;
    background: var(--surface);
}

/* the gallery page already has the dark hero above it, so it needs less
   top padding than the home page's gallery block (was inline in galeri.php) */
body.page-gallery .gallery-section {
    padding: 40px 0 70px;
}

.gallery-static-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.gallery-item,
.gallery-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: var(--n-100);
}

.gallery-item img,
.gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.gallery-item:hover img,
.gallery-card:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 26px;
    opacity: 0;
    transition: opacity .22s ease;
}

.gallery-item:hover .gallery-overlay,
.gallery-card:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay {
    opacity: 1;
}

/* ---------------- FAQ accordion ---------------- */
.lux-home-faq-section {
    padding: 76px 0;
    background: var(--n-25);
}

.entity-faq-wrap {
    max-width: 880px;
    margin: 0 auto;
}

.entity-faq-title {
    margin: 0 0 18px;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.entity-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.entity-faq-item {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.entity-faq-item:hover {
    border-color: var(--border-strong);
}

.entity-faq-item:has(.collapse.show) {
    border-color: var(--turkuaz);
    box-shadow: var(--shadow-sm);
}

.entity-faq-head {
    margin: 0;
}

.entity-faq-head h3 {
    margin: 0;
}

.entity-faq-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 17px 52px 17px 18px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

/* plus / minus marker drawn from the two pseudo elements */
.entity-faq-btn::before,
.entity-faq-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: translateY(-50%);
    transition: transform .22s ease, opacity .22s ease;
}

.entity-faq-btn::after {
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
}

.entity-faq-btn.collapsed::after {
    opacity: 1;
}

.entity-faq-question {
    display: block;
    min-width: 0;
}

.entity-faq-answer {
    padding: 0 18px 18px;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.75;
    /* .panel-text justifies by default, which shreds short answers */
    text-align: left;
}

.entity-faq-answer p:last-child {
    margin-bottom: 0;
}

/* ================================================================
   INNER PAGES — monochrome rebuild, 2026-07-27
   Shared dark page header + blog listing, gallery page, FAQ page.
   ================================================================ */

/* ---------------- shared page header ---------------- */
.page-header,
.gallery-hero,
.faq-hero {
    position: relative;
    padding: 56px 0 60px;
    background: var(--n-1000);
    color: #ffffff;
    overflow: hidden;
}/* variants that carry a background photo */

.page-header>.container,
.gallery-hero>.container,
.faq-hero>.container {
    position: relative;
    z-index: 1;
}

.page-header-content {
    max-width: 840px;
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 600;
}

.page-breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    transition: color .16s ease;
}

.page-breadcrumb a:hover {
    color: #ffffff;
}

.page-breadcrumb i {
    font-size: 15px;
    opacity: .6;
}

.page-breadcrumb span {
    color: #ffffff;
}

.page-title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-family-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.page-subtitle {
    margin: 14px 0 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    font-weight: 400;
    line-height: 1.65;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 600;
}

.page-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-meta i {
    font-size: 16px;
    opacity: .8;
}

/* ---------------- blog listing (blog.php) ---------------- */
.blog-grid {
    padding: 64px 0;
    background: var(--n-25);
}

.blog-grid-item {
    margin-bottom: 24px;
}

/* blog.php reuses the home card (.blog-card-image / .blog-card-body /
   .blog-card-title / .blog-card-excerpt). Only the two elements below are
   listing-only extras. */
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.blog-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.blog-card-meta i {
    color: var(--n-400);
    font-size: 14px;
}

.blog-card-category {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------- gallery page (galeri.php) ---------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* ---------------- FAQ page (sss.php) ---------------- */
.faq-section {
    padding: 64px 0;
    background: var(--surface);
}

.faq-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.faq-item:hover {
    border-color: var(--border-strong);
}

.faq-item.is-open {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    color: var(--text);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

/* the question text is an <h3> for document outline only - without this it
   picks up the global heading size (24.5px) and ignores .faq-question */
.faq-question h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--n-50);
    color: var(--accent);
    font-size: 17px;
    transition: background-color .18s ease, color .18s ease;
}

.faq-item.is-open .faq-icon {
    background: var(--accent);
    color: var(--accent-fg);
}

.faq-question>i:last-child {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--n-400);
    font-size: 20px;
    transition: transform .22s ease, color .18s ease;
}

.faq-item.is-open .faq-question>i:last-child {
    color: var(--accent);
    transform: rotate(180deg);
}

/* height is animated inline by the page script, so keep it collapsible */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

/* separate the answer from its question - without it the two run together */
.faq-item.is-open .faq-question {
    border-bottom: 1px solid var(--n-100);
}

.faq-answer .panel-text {
    padding: 15px 18px 18px 64px;
    margin: 0;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.75;
    text-align: left;
}

/* ---------------- shared empty state ---------------- */
.ui-empty-state {
    padding: 48px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
}

.ui-empty-state i {
    color: var(--n-400);
    font-size: 40px;
}

.ui-empty-state h3 {
    margin: 14px 0 6px;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.ui-empty-state p {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
}

/* .main-btn-2 is full width by default, which looks heavy inside an empty state */
.ui-empty-state .main-btn-2 {
    width: auto;
    min-width: 190px;
}

/* ================================================================
   CONTACT + ABOUT PAGES — monochrome rebuild, 2026-07-27
   ================================================================ */

/* ---------------- contact.php ---------------- */
.contact-section {
    padding: 64px 0;
    background: var(--n-25);
}

.contact-info-card {
    height: 100%;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.contact-card-title {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--n-100);
}

.contact-info-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--n-50);
    color: var(--accent);
    font-size: 20px;
}

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

.contact-info-content h4 {
    margin: 0 0 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-info-content p {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}

.contact-info-content a {
    color: var(--text);
    transition: color .16s ease;
}

.contact-info-content a:hover {
    color: var(--accent);
    text-decoration: underline !important;
}

.map-container {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.map-container .map-box,
.map-container iframe,
.map-container #map {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 0;
    filter: grayscale(1);
    transition: filter .3s ease;
}

.map-container:hover .map-box,
.map-container:hover iframe,
.map-container:hover #map {
    filter: grayscale(0);
}

/* ---------------- kurumsal.php ---------------- */
.about-hero {
    position: relative;
    padding: 56px 0 60px;
    background-color: var(--n-1000);
    background-image: var(--hero-bg, none);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    overflow: hidden;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* vertical veil plus a left-side wash, so left-aligned text stays legible
       over bright photos */
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0.85) 100%);
}

.about-hero>.container {
    position: relative;
    z-index: 1;
}

.about-hero ul {
    list-style: none;
}

.breadcrumb-item {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    font-weight: 600;
    transition: color .16s ease;
}

.about-hero a:hover .breadcrumb-item {
    color: #ffffff;
}

.about-hero li:last-child .breadcrumb-item {
    color: #ffffff;
}

.about-hero h1 {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-family-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 46px 0 56px;
    color: var(--text-2);
    font-size: 15.5px;
    line-height: 1.8;
}

.about-content h2,
.about-content h3,
.about-content h4 {
    margin: 30px 0 12px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.about-content h2 {
    font-size: 24px;
}

.about-content h3 {
    font-size: 20px;
}

.about-content h4 {
    font-size: 17px;
}

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

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

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

.about-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.about-content a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline !important;
}

.about-divider {
    height: 1px;
    margin: 34px 0;
    background: var(--n-200);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.about-stat {
    padding: 22px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
    transition: border-color .18s ease, transform .18s ease;
}

.about-stat:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.about-stat i {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 26px;
}

.about-stat .value {
    color: var(--text);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.about-stat .label {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* ================================================================
   FOOTER + FLOATING CONTACT BUTTONS — monochrome rebuild, 2026-07-27
   ================================================================ */

.akd-footer {
    position: relative;
    padding: 56px 0 0;
    background: var(--n-1000);
    color: rgba(255, 255, 255, 0.72);
}

.akd-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
}

/* ---------------- brand row ---------------- */
.akd-footer-brand-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.akd-footer-logo a {
    display: inline-block;
    max-width: 300px;
}

.akd-footer-logo img {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    /* the wordmark is black type on an opaque white plate, so inverting it
       turns the plate black (blends with the footer) and the type white */
    filter: invert(1);
}

.akd-footer-tursab {
    display: flex;
    justify-content: flex-end;
}

/* official verification badge — never recolour it */
.akd-footer-tursab img {
    max-height: 56px;
    width: auto;
    border-radius: 8px;
    opacity: .92;
    transition: opacity .2s ease;
}

.akd-footer-tursab:hover img {
    opacity: 1;
}

/* ---------------- columns ---------------- */
.akd-footer-tagline {
    max-width: 320px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    line-height: 1.7;
}

.akd-footer-heading {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.akd-footer-links {
    margin: 0;
    padding: 0;
}

.akd-footer-links li {
    margin-bottom: 11px;
}

.akd-footer-links li:last-child {
    margin-bottom: 0;
}

.akd-footer-links a {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
    transition: color .18s ease, transform .18s ease;
}

.akd-footer-links a:hover {
    color: #ffffff;
    transform: translateX(2px);
}

.akd-footer-links i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 16px;
    transition: color .18s ease;
}

.akd-footer-links a:hover i {
    color: #ffffff;
}

/* ---------------- socials ---------------- */
.akd-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.akd-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 19px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.akd-footer-social-link:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--n-1000);
    transform: translateY(-2px);
}

/* ---------------- reservation CTA (used inside footer columns) ---------------- */
.akd-footer-reservation-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #ffffff;
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--n-1000) !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}

.akd-footer-reservation-cta:hover {
    background: transparent;
    color: #ffffff !important;
}

/* ---------------- bottom bar ---------------- */
.akd-footer-bottom {
    margin-top: 40px;
    padding: 18px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.akd-footer-bottom small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12.5px;
}

.akd-footer-policies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.akd-footer-policies a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    transition: color .18s ease;
}

.akd-footer-policies a:hover {
    color: #ffffff;
    text-decoration: underline !important;
}

/* force any source colour to flat white, transparency preserved */
.akd-footer-powered img {
    max-height: 26px;
    width: auto;
    opacity: .5;
    filter: brightness(0) invert(1);
    transition: opacity .2s ease;
}

.akd-footer-powered:hover img {
    opacity: .9;
}

/* ---------------- floating contact buttons ---------------- */
.whatsapp-fixed,
.phone-fixed {
    position: fixed;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: var(--n-1000);
    color: #ffffff !important;
    font-size: 24px;
    box-shadow: var(--shadow-lg);
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.whatsapp-fixed {
    right: 20px;
    bottom: 20px;
}

.phone-fixed {
    right: 20px;
    bottom: 82px;
}

.whatsapp-fixed:hover,
.phone-fixed:hover {
    background: #ffffff;
    color: var(--n-1000) !important;
    transform: translateY(-2px);
}

/* ================================================================
   DESTINATION DETAIL (destination_info.php) — monochrome, 2026-07-27
   ================================================================ */

.di-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    padding: 96px 0 40px;
    background-color: var(--n-1000);
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
}

.di-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.32) 40%, rgba(0, 0, 0, 0.88) 100%);
}

.di-hero-container {
    max-width: 1370px;
    margin: 0 auto;
    padding-inline: 15px;
}

.di-hero-shell {
    margin-bottom: 22px;
}

.di-hero-card {
    max-width: 860px;
}

.di-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 600;
}

.di-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.6);
    transition: color .16s ease;
}

.di-breadcrumb a:hover {
    color: #ffffff;
}

.di-breadcrumb i {
    font-size: 15px;
    opacity: .7;
}

.di-breadcrumb span {
    color: #ffffff;
}

.di-hero-title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-family-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.di-hero .inline-form {
    position: relative;
    z-index: 2;
}

/* ---------------- content ---------------- */
.di-content-section {
    padding: 56px 0 64px;
    background: var(--n-25);
}

.di-content-card {
    margin-bottom: 20px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.di-content-card:last-child {
    margin-bottom: 0;
}

.di-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.di-section-title i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--n-50);
    color: var(--accent);
    font-size: 19px;
}

.di-content-media {
    margin: 0 0 20px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--n-100);
}

.di-content-media img {
    display: block;
    width: 100%;
    aspect-ratio: var(--transfer-media-ratio);
    object-fit: cover;
}

.di-content-lead {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.65;
}

.di-content-body {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
}

.di-content-body h2,
.di-content-body h3,
.di-content-body h4 {
    margin: 26px 0 10px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.di-content-body h2 {
    font-size: 21px;
}

.di-content-body h3 {
    font-size: 18px;
}

.di-content-body p {
    margin: 0 0 14px;
}

.di-content-body ul,
.di-content-body ol {
    margin: 0 0 16px;
    padding-left: 20px;
}

.di-content-body li {
    margin-bottom: 7px;
}

.di-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.di-content-body a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline !important;
}

/* ---------------- hotels list ---------------- */
.di-hotels-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.di-hotels-tab {
    min-width: 38px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.di-hotels-tab:hover {
    border-color: var(--border-strong);
    color: var(--accent);
}

.di-hotels-tab.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-fg);
}

.di-hotels-panel {
    display: none;
}

.di-hotels-panel.is-active {
    display: block;
}

.di-hotels-scroll {
    max-height: 420px;
    padding-right: 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--n-300) transparent;
}

.di-hotels-scroll::-webkit-scrollbar {
    width: 6px;
}

.di-hotels-scroll::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--n-300);
}

.di-hotels-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.di-hotels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.di-hotels-item {
    min-width: 0;
}

.di-hotels-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.di-hotels-link:hover {
    border-color: var(--border);
    background: var(--n-50);
    color: var(--accent);
}

.di-hotels-link i {
    flex: 0 0 auto;
    color: var(--n-400);
    font-size: 16px;
}

.di-hotels-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------- sidebar ---------------- */
.di-sidebar {
    position: sticky;
    top: 96px;
}

.di-map-wrap {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.di-map-wrap iframe,
.di-map-wrap .map-box,
.di-map-wrap #map {
    display: block;
    width: 100%;
    min-height: 300px;
    border: 0;
    filter: grayscale(1);
    transition: filter .3s ease;
}

.di-map-wrap:hover iframe,
.di-map-wrap:hover .map-box,
.di-map-wrap:hover #map {
    filter: grayscale(0);
}

.di-sidebar-faq-card .entity-faq-title {
    margin-bottom: 14px;
    font-size: 20px;
}

.di-sidebar-faq-card .entity-faq-btn {
    padding: 14px 44px 14px 14px;
    font-size: 14.5px;
}

.di-sidebar-faq-card .entity-faq-answer {
    padding: 0 14px 14px;
    font-size: 14px;
}

/* related regions strip */
.di-related-section {
    background: var(--surface);
}

/* ================================================================
   REMAINING PAGES — monochrome rebuild, 2026-07-27
   hotels.php, hotel_detail.php, blog_detail.php, services.php,
   tours.php, politika.php, booking_detail.php
   ================================================================ */

/* ---------------- article shell (blog_detail / hotel_detail / services) ---- */
.blog-detail-page,
.hotel-detail-page {
    background: var(--n-25);
}

.blog-detail-container {
    padding: 48px 0 64px;
}

.blog-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

/* the layout is a CSS grid but the markup still carries Bootstrap .row/.col-lg-*;
   their flex-basis / max-width percentages resolve against the grid track and
   shrink both columns (sidebar collapsed to ~1/3 of 340px). Neutralize them. */
.blog-detail-layout.row {
    margin-right: 0;
    margin-left: 0;
}

.blog-detail-layout > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.blog-detail-content {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.detail-image {
    margin: 0 0 24px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--n-100);
}

.detail-image img {
    display: block;
    width: 100%;
    height: auto;
}

.detail-body {
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.85;
    text-align: left;
}

.detail-body h2,
.detail-body h3,
.detail-body h4 {
    margin: 30px 0 12px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.detail-body h2 {
    font-size: 24px;
}

.detail-body h3 {
    font-size: 20px;
}

.detail-body h4 {
    font-size: 17px;
}

.detail-body p {
    margin: 0 0 16px;
}

.detail-body ul,
.detail-body ol {
    margin: 0 0 18px;
    padding-left: 20px;
}

.detail-body li {
    margin-bottom: 8px;
}

.detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.detail-body blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-size: 17px;
    font-style: italic;
}

.detail-body a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline !important;
}

.detail-body table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
}

.detail-body th,
.detail-body td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    font-size: 14.5px;
}

.detail-body th {
    background: var(--n-50);
    font-weight: 700;
}

/* ---------------- article sidebar ---------------- */
.blog-detail-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-detail-sidebar-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.blog-detail-sidebar-title {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.blog-detail-related-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-detail-related-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .18s ease;
}

.blog-detail-related-item:hover {
    border-color: var(--accent);
}

.blog-detail-related-thumb {
    overflow: hidden;
    background: var(--n-100);
}

.blog-detail-related-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 96px;
    object-fit: cover;
    transition: transform .4s ease;
}

.blog-detail-related-item:hover .blog-detail-related-thumb img {
    transform: scale(1.05);
}

.blog-detail-related-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px 10px 0;
}

.blog-detail-related-body strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-detail-related-date {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ---------------- article CTA ---------------- */
.blog-detail-cta-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--n-1000);
    color: #ffffff;
}

.blog-detail-cta-card--sidebar {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
}

.blog-detail-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 24px;
}

.blog-detail-cta-eyebrow {
    display: inline-flex;
    margin-bottom: 6px;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blog-detail-cta-copy h2 {
    margin: 0;
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.blog-detail-cta-copy p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.6;
}

.blog-detail-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 13px 22px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--n-1000) !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .18s ease;
}

.blog-detail-cta-card--sidebar .blog-detail-cta-btn {
    margin-left: 0;
    width: 100%;
}

.blog-detail-cta-btn:hover {
    transform: translateY(-1px);
}

/* ---------------- hotels directory (hotels.php) ---------------- */
.hotel-directory-page {
    background: var(--n-25);
}

.hotel-directory-section {
    padding: 48px 0 64px;
}

.hotel-directory-sidebar {
    position: sticky;
    top: 96px;
}

.hotel-directory-sidebar-card,
.hotel-directory-content {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.hotel-directory-kicker {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hotel-directory-region-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hotel-directory-region-link {
    display: block;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 600;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.hotel-directory-region-link:hover {
    background: var(--n-50);
    color: var(--accent);
}

.hotel-directory-region-link.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-fg);
}

.hotel-directory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--n-100);
}

.hotel-directory-toolbar h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hotel-directory-grid-col {
    margin-bottom: 12px;
}

.hotel-directory-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 116px;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hotel-directory-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.hotel-directory-card-image {
    overflow: hidden;
    background: var(--n-100);
}

.hotel-directory-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 116px;
    object-fit: cover;
    transition: transform .4s ease;
}

.hotel-directory-card:hover .hotel-directory-card-image img {
    transform: scale(1.05);
}

.hotel-directory-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
}

.hotel-directory-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.hotel-directory-card-region {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.hotel-directory-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.hotel-directory-card-cta i {
    transition: transform .2s ease;
}

.hotel-directory-card:hover .hotel-directory-card-cta i {
    transform: translateX(3px);
}

.hotel-directory-empty-card {
    padding: 40px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    color: var(--text-muted);
    text-align: center;
}

/* ---------------- pagination (hotels + tours + blog) ---------------- */
.hotel-directory-pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

.hotel-directory-pagination a,
.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.hotel-directory-pagination a:hover,
.pagination li a:hover {
    border-color: var(--border-strong);
    color: var(--accent);
}

.hotel-directory-pagination a.is-active,
.hotel-directory-pagination .is-active a,
.pagination li.active a {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-fg);
}

.hotel-directory-pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 38px;
    color: var(--text-muted);
    font-weight: 700;
}

/* ---------------- tours (tours.php) ---------------- */
.tour-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tour-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tour-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--n-100);
}

.tour-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.tour-card:hover .tour-image img {
    transform: scale(1.04);
}

.tour-content {
    padding: 16px 18px 18px;
}

.tour-content h3 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* ---------------- policy pages (politika.php) ---------------- */
.policy-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 46px 0 56px;
    color: var(--text-2);
    font-size: 15.5px;
    line-height: 1.85;
    text-align: left;
}

.policy-content h1,
.policy-content h2,
.policy-content h3 {
    margin: 28px 0 12px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.policy-content h1 {
    margin-top: 0;
    font-size: 26px;
}

.policy-content h2 {
    font-size: 21px;
}

.policy-content h3 {
    font-size: 18px;
}

.policy-content p {
    margin: 0 0 15px;
}

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

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

.policy-content a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline !important;
}

.main-title,
.title-main {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-family-display);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* ---------------- booking lookup (booking_detail.php) ---------------- */
.booking-lookup-section {
    padding: 56px 0 72px;
    background: var(--n-25);
}

.booking-lookup-wrap {
    max-width: 560px;
    margin: 0 auto;
}

.booking-lookup-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.booking-lookup-card .card-body {
    padding: 30px;
}

.booking-lookup-header {
    margin-bottom: 22px;
    text-align: center;
}

.booking-lookup-header h1,
.booking-lookup-header h2,
.booking-lookup-header .h4 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.booking-lookup-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.booking-lookup-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.booking-lookup-form .form-control,
.booking-lookup-form input[type="text"],
.booking-lookup-form input[type="email"] {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.booking-lookup-form .form-control:focus,
.booking-lookup-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    outline: none !important;
}

.required-mark {
    color: var(--danger);
    font-weight: 700;
}

.msg-box {
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--n-50);
    color: var(--text-2);
    font-size: 14px;
}

.msg-box.danger {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

/* ================================================================
   REGION CARDS — full-bleed photo, 2026-07-28
   The photo is the whole card; a bottom gradient carries the copy and
   the price rides in a white pill at the top right.
   Used by destinations.php and the related strip on destination_info.php.
   ================================================================ */

.destination-card--with-image {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--n-900);
    box-shadow: var(--shadow-sm);
}

.destination-card--with-image:hover {
    border: 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.destination-card--with-image .destination-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
}

.destination-card--with-image .destination-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* readability veil: light at the top so the photo breathes, heavy at the
   bottom where the copy sits */
.destination-card--with-image .destination-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.06) 32%, rgba(0, 0, 0, 0.58) 68%, rgba(0, 0, 0, 0.9) 100%);
    transition: opacity .3s ease;
}

.destination-card--with-image:hover .destination-image::after {
    opacity: .88;
}

/* --- copy sits on the photo --- */
.destination-card--with-image .destination-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    gap: 10px;
    padding: 18px;
}

.destination-card--with-image .destination-origin {
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    letter-spacing: 0.14em;
}

.destination-card--with-image .destination-origin i {
    color: rgba(255, 255, 255, 0.78);
}

.destination-card--with-image .destination-title {
    display: -webkit-box;
    margin-top: 7px;
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.destination-card--with-image .destination-meta {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.destination-card--with-image .destination-meta-info span {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.destination-card--with-image .destination-meta-info i {
    color: rgba(255, 255, 255, 0.8);
}

/* --- price pill, anchored to the card not the copy block --- */
.destination-card--with-image .destination-meta-price {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--n-1000);
    font-size: 15px;
    box-shadow: var(--shadow-sm);
}

.destination-card--with-image .destination-meta-price {
    font-size: 18px;
}

/* ================================================================
   STEP 1 (vehicle selection) — monochrome rebuild, 2026-07-28
   Black route summary bar with collapsible search / map, then
   horizontal vehicle cards (photo | details | price+CTA).
   ================================================================ */

/* ---------------- route bar ---------------- */
.step1-topbar {
    padding: 20px 0;
    background: var(--n-1000);
}

.step1-routebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

.step1-routebar-route {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.step1-routebar-point {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.step1-routebar-point i {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.6);
    font-size: 17px;
}

.step1-routebar-arrow {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
}

.step1-routebar-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 600;
}

.step1-routebar-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.step1-routebar-meta i {
    font-size: 16px;
    opacity: .8;
}

.step1-routebar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.step1-routebar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.step1-routebar-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.step1-routebar-btn i {
    font-size: 16px;
}

.step1-routebar-btn--edit {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--n-1000);
}

.step1-routebar-btn--edit:hover {
    background: var(--n-200);
    border-color: var(--n-200);
}

/* chevron flips when either collapse is open, driven by aria-expanded */
.step1-routebar-btn[aria-expanded="true"] i:first-child {
    color: inherit;
}

/* ---------------- collapsible search form ---------------- */
.step1-search-form-collapse {
    margin-top: 14px;
}

.step1-search-card {
    padding: 8px;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

/* ---------------- collapsible map ---------------- */
.step1-route-map-collapse {
    margin-top: 14px;
}

.step1-route-map-wrap {
    overflow: hidden;
    border-radius: 14px;
}

.step1-route-map-wrap iframe,
.step1-route-map-wrap .map-box,
.step1-route-map-wrap #map {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
}

/* ---------------- vehicle list ---------------- */
.car-selection-section {
    padding: 32px 0 64px;
    background: var(--n-25);
}

.car-selection {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.car-selection:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

/* --- photo --- */
.car-image-container {
    position: relative;
    flex: 0 0 260px;
    overflow: hidden;
    background: var(--n-100);
}

.car-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-image-container .swiper,
.car-image-container .swiper-wrapper,
.car-image-container .swiper-slide {
    height: 100%;
}

.car-swiper-pagination.swiper-pagination-bullets {
    bottom: 10px;
}

.car-swiper-pagination .swiper-pagination-bullet {
    background: #ffffff;
    opacity: .55;
}

.car-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* --- content --- */
.car-main-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
}

.car-info-block {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 22px;
}

.car-name {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.car-capacity-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}

.car-capacity-line span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.car-capacity-line svg {
    width: 16px;
    height: 16px;
    fill: var(--n-500);
}

.car-capacity-line>i {
    color: var(--n-300);
    font-size: 6px;
    font-style: normal;
}

.car-amenity-line {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.car-amenity-line i {
    margin: 0 6px;
    color: var(--n-300);
    font-size: 6px;
    font-style: normal;
}

.car-policy-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.car-policy-line {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
}

.car-policy-line i {
    font-size: 15px;
}

.car-policy-line-note {
    color: var(--text-muted);
    font-weight: 500;
}

.car-policy-line-note i {
    color: var(--n-400);
}

/* --- price + CTA --- */
.car-footer-row {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 200px;
    padding: 20px;
    border-left: 1px solid var(--n-100);
    text-align: center;
}

.car-price-block {
    text-align: center;
}

.car-price-block .price {
    color: var(--text);
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.car-footer-row .main-btn-2 {
    width: 100%;
}

/* ---------------- no-vehicle fallback ---------------- */
.reservation-help-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 24px;
    border: 1px dashed var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text-2);
}

.reservation-help-alert i {
    color: var(--n-400);
    font-size: 32px;
}

.reservation-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--success);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
}

/* ================================================================
   STEP 2 — checkout / rezervasyon detay, 2026-07-28
   ================================================================ */

/* --- route overview bar (fills previously-empty section) --- */
.step2-route-overview-section {
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.step2-route-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.step2-route-overview-route {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: var(--font-semibold);
    color: var(--text);
    flex-wrap: wrap;
}

.step2-route-overview-point {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.step2-route-overview-point i {
    color: var(--text-muted);
    font-size: 17px;
}

.step2-route-overview-arrow {
    color: var(--n-400);
    font-size: 15px;
}

.step2-route-overview-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-muted);
    padding-left: 16px;
    border-left: 1px solid var(--border);
    flex-wrap: wrap;
}

.step2-route-overview-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.step2-route-overview-meta i {
    font-size: 15px;
}

.step2-route-overview-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: var(--transition);
}

.step2-route-overview-edit:hover {
    background: var(--turkuaz);
    border-color: var(--turkuaz);
    color: var(--turkuaz-fg);
    text-decoration: none;
}

/* --- main layout --- */
.step2-main-section {
    padding: 32px 0 60px;
}

.step2-layout-row {
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

.step2-left-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* neutralise Bootstrap's leftover .col-12 (flex: 0 0 100%) on these cards -
   in a column-direction flex container that flex-basis is a HEIGHT, not a
   width, and forces every card to the same runaway height */
.step2-left-column > .col-12 {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
}

.step2-right-column {
    flex: 0 0 380px;
    width: 380px;
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
}

/* --- card shell --- */
.checkout-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
}

.checkout-title.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: var(--font-bold);
    color: var(--text);
    margin: 0 0 20px;
}

.checkout-title.section-heading.section-heading-muted {
    margin-bottom: 20px;
}

.section-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--radius-sm);
    background: var(--turkuaz);
    color: var(--turkuaz-fg);
    font-size: 18px;
}

/* --- form fields --- */
.input-groups {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

.contact-grid .input-groups,
.row.return-row .input-groups,
.row.outbound-flight-row .input-groups {
    margin-bottom: 0;
}

.checkout-label,
.trip-title {
    font-size: 12.5px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.checkout-input,
.hotel-address-select,
.hotel-address-manual-input {
    height: 46px;
    padding: 0 15px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
    font-family: var(--font-family-base);
    width: 100%;
    transition: var(--transition);
}

.checkout-input:focus,
.hotel-address-select:focus,
.hotel-address-manual-input:focus {
    outline: none;
    border-color: var(--turkuaz);
    box-shadow: 0 0 0 3px rgba(40, 150, 201, 0.16);
}

.checkout-input.error-label,
.hotel-address-value.error-label + .hotel-address-mode-row .checkout-input {
    border-color: var(--danger);
}

.reservation-step-2 .checkout-input.error-label {
    border-color: var(--danger);
}

.reservation-step-2 span.error-label {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--danger);
    font-weight: var(--font-medium);
}

/* --- contact card --- */
.contact-grid {
    margin-top: 4px;
}

.phone-composer {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}

.phone-composer:focus-within {
    border-color: var(--turkuaz);
    box-shadow: 0 0 0 3px rgba(40, 150, 201, 0.16);
}

.phone-code-select {
    flex: 0 0 92px;
    width: 92px;
    height: 46px;
    border: none;
    border-right: 1px solid var(--border);
    background: var(--surface-2);
    padding: 0 8px;
    font-size: 13.5px;
    color: var(--text);
}

.phone-composer input[type="tel"] {
    flex: 1 1 0;
    min-width: 0;
    height: 46px;
    border: none;
    padding: 0 15px;
    font-size: 14.5px;
    color: var(--text);
    background: transparent;
}

.phone-composer input[type="tel"]:focus {
    outline: none;
}

/* --- passenger card --- */
.psg-item .input-groups {
    margin-bottom: 16px;
}

/* --- outbound / return transfer cards --- */
.outbound-flight-row,
.return-row {
    margin-top: 2px;
}

.arrival-information .input-groups {
    margin-bottom: 0;
}

/* --- return toggle --- */
.return-toggle-box.checkout-box {
    padding: 18px 24px;
}

.return-toggle-header {
    display: flex;
}

.return-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    width: 100%;
}

.return-toggle-check {
    width: 20px;
    height: 20px;
    accent-color: var(--turkuaz);
    cursor: pointer;
    flex: 0 0 20px;
}

.return-toggle-copy {
    display: flex;
    flex-direction: column;
}

.return-toggle-text {
    font-size: 15px;
    font-weight: var(--font-semibold);
    color: var(--text);
}

.return-transfer-card {
    border-top: 3px solid var(--turkuaz);
}

.return-transfer-body {
    margin-top: 2px;
}

.pickup-time-alert:not(:empty) {
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 13px;
    font-weight: var(--font-medium);
}

/* --- hotel address field --- */
.hotel-address-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hotel-address-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hotel-address-select-wrap {
    flex: 1 1 0;
    min-width: 0;
}

.hotel-address-manual {
    flex: 1 1 0;
    min-width: 0;
}

.hotel-address-toggle-btn {
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: var(--font-semibold);
    color: var(--text);
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.hotel-address-toggle-btn:hover {
    color: var(--turkuaz-dark);
}

/* --- extras card --- */
.extras-unified-grid {
    margin-top: 4px;
}

.extra-card.extra-compact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    margin-bottom: 0;
    height: 100%;
}

.extra-card.extra-compact label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: default;
}

.extra-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 18px;
}

.extra-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.extra-title {
    font-size: 14.5px;
    font-weight: var(--font-semibold);
    color: var(--text);
}

.extra-unit-price {
    font-size: 12.5px;
    color: var(--text-muted);
}

.extra-route-controls {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.extra-stepper-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.extra-direction-label {
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.extra-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
    height: 40px;
}

.extra-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 100%;
    border: none;
    background: var(--surface-2);
    color: var(--text);
    font-size: 17px;
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1;
}

.extra-btn:hover {
    background: var(--turkuaz);
    color: var(--turkuaz-fg);
}

.extra-stepper-input {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
    font-size: 14.5px;
    font-weight: var(--font-semibold);
    color: var(--text);
    background: transparent;
    padding: 0;
    /* neutralised legacy fake-select arrow/theming that used to leak in via .extra-select */
    appearance: none;
    -webkit-appearance: none;
}

.extra-stepper-input:focus {
    outline: none;
}

/* --- right column: vehicle summary --- */
.step2-summary-card {
    padding: 0;
}

.step-2-car-name {
    margin: 0;
    padding: 18px 22px 14px;
    font-size: 17px;
    font-weight: var(--font-bold);
    color: var(--text);
}

.summary-car-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.summary-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.summary-specs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 22px 20px;
}

.summary-spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: var(--font-semibold);
    color: var(--text);
}

.summary-spec-chip i {
    font-size: 14px;
}

.summary-feature-inline {
    position: relative;
}

.summary-feature-inline > summary {
    list-style: none;
    cursor: pointer;
}

.summary-feature-inline > summary::-webkit-details-marker {
    display: none;
}

.summary-feature-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.summary-feature-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--turkuaz);
    color: var(--turkuaz-fg);
    font-size: 10px;
    font-weight: var(--font-bold);
}

.summary-feature-chevron {
    transition: transform var(--transition);
}

.summary-feature-inline[open] .summary-feature-chevron {
    transform: rotate(180deg);
}

.summary-feature-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    max-width: calc(100vw - 44px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
}

.summary-feature-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.summary-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
}

.summary-feature-item i {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 1px;
}

/* --- right column: trip summary cards --- */
.step2-trip-card .checkout-title.section-heading {
    margin-bottom: 16px;
}

.summary-route {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.summary-route-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-semibold);
    color: var(--text);
    min-width: 0;
}

.summary-route-item .csp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 92px;
}

.summary-route-divider-wrap {
    flex: 1 1 0;
    min-width: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dotted-gradient {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, var(--border-strong) 40%, transparent 0%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
}

.summary-route-inline-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.summary-route-inline-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.trip-summary-passengers {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.trip-passenger-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-size: 12px;
    font-weight: var(--font-semibold);
    color: var(--text-2);
}

.trip-summary-extras {
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    margin-bottom: 12px;
}

.trip-summary-extras-title {
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.trip-summary-extra-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trip-summary-extra-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--text-2);
}

.trip-summary-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: var(--font-semibold);
    color: var(--text);
}

.trip-summary-subtotal strong {
    font-size: 15px;
}

/* --- right column: price / payment / submit --- */
.step2-price-card {
    background: var(--turkuaz-dark);
    border-color: var(--turkuaz-dark);
}

.step2-price-primary {
    text-align: center;
    padding: 4px 0 6px;
}

.step2-price-value {
    font-size: 32px;
    font-weight: var(--font-extrabold);
    color: #fff;
    line-height: 1.15;
}

.step2-price-sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
}

.step2-price-sub:last-child {
    color: rgba(255, 255, 255, 0.65) !important;
}

.step2-payment-chooser {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.step2-payment-title {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    text-align: center;
}

.step2-payment-options {
    display: flex;
    gap: 8px;
}

.step2-payment-option {
    flex: 1 1 0;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition);
}

.step2-payment-option.active {
    background: #fff;
    border-color: #fff;
    color: var(--turkuaz-dark);
}

.step2-unified-submit {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step2-submit-policy {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

.step2-submit-policy input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: #fff;
}

.step2-submit-policy a {
    color: #fff;
    text-decoration: underline;
}

.step2-submit-policy a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.voucher-submit.btn.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--turkuaz-dark);
    font-size: 15px;
    font-weight: var(--font-bold);
    transition: var(--transition);
}

.voucher-submit.btn.btn-primary:hover {
    background: var(--turkuaz-soft);
    color: var(--turkuaz-dark);
}

.voucher-submit.btn.btn-primary i {
    font-size: 18px;
}

/* --- policy document modal --- */
.modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
}

.modal-content {
    position: relative;
    background: var(--surface);
    max-width: 720px;
    width: calc(100% - 40px);
    margin: 60px auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    padding: 34px 38px;
    box-shadow: var(--shadow-lg);
}

.modal-content .close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 26px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-content .close:hover {
    color: var(--text);
}

.modal-content h2 {
    font-size: 19px;
    font-weight: var(--font-bold);
    margin-bottom: 16px;
    padding-right: 30px;
}

/* --- card payment modal (separate from .modal above) --- */
.step2-payment-modal {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.55);
    padding: 20px;
}

.step2-payment-modal.open {
    display: flex;
}

.step2-payment-dialog {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 26px 28px;
}

.step2-payment-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.step2-payment-dialog-title {
    font-size: 17px;
    font-weight: var(--font-bold);
    color: var(--text);
    margin: 0;
}

.step2-payment-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.step2-payment-close:hover {
    color: var(--text);
}

.step2-payment-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.step2-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 8px;
}

.step2-payment-grid .full {
    grid-column: 1 / -1;
}

.step2-payment-grid label {
    display: block;
    font-size: 12px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.step2-payment-error:not(:empty) {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--danger);
}

.step2-payment-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.step2-payment-actions .btn {
    flex: 1 1 0;
    height: 46px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: var(--font-semibold);
}

.step2-payment-actions .btn-primary {
    background: var(--turkuaz);
    border-color: var(--turkuaz);
    color: var(--turkuaz-fg);
}

.step2-payment-actions .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
}

/* ================================================================
   STEP 2 — fixes: f-white contrast + Select2 (phone code / hotel
   address), 2026-07-28
   ================================================================ */

/* .f-white forces white text/icons (shared utility) - on these
   light-background chips/rows that makes the icon invisible */
.summary-spec-chip i.f-white,
.summary-route-item i.f-white {
    color: var(--text-muted) !important;
}

/* --- phone country code (Select2-enhanced <select>) --- */
.phone-composer .select2-container {
    flex: 0 0 92px;
    width: 92px !important;
    height: 46px;
}

.phone-composer .select2-selection--single {
    height: 46px;
    display: flex;
    align-items: center;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-2);
    padding: 0 8px;
}

.phone-composer .select2-selection__rendered {
    padding: 0;
    line-height: 1;
    color: var(--text);
    display: flex;
    align-items: center;
    width: 100%;
}

.phone-composer .select2-selection__arrow {
    display: none;
}

.phone-flag-option {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.phone-flag-option .flag-icon {
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.phone-flag-option .phone-flag-code {
    font-size: 13px;
    font-weight: var(--font-semibold);
    color: var(--text);
    white-space: nowrap;
}

.phone-flag-option .phone-flag-name {
    font-size: 13px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-country-dropdown {
    min-width: 240px !important;
    width: auto !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
}

.phone-country-dropdown .select2-search--dropdown {
    padding: 8px;
}

.phone-country-dropdown .select2-search__field {
    height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-size: 13.5px;
}

.phone-country-dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--turkuaz);
}

.phone-country-dropdown .select2-results__option {
    padding: 9px 12px;
    font-size: 13.5px;
}

.phone-country-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--turkuaz) !important;
    color: #fff !important;
}

.phone-country-dropdown .select2-results__option--highlighted[aria-selected] .phone-flag-name ,
.phone-country-dropdown .select2-results__option--highlighted[aria-selected] .phone-flag-code{
    color: rgba(255, 255, 255, 0.75);
}

/* --- hotel address (Select2-enhanced <select>) --- */
.hotel-address-select-wrap .select2-container {
    width: 100% !important;
}

.hotel-address-select-wrap .select2-selection--single {
    height: 46px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 0 15px;
}

.hotel-address-select-wrap .select2-selection--single:focus,
.hotel-address-select-wrap.select2-container--focus .select2-selection--single {
    border-color: var(--turkuaz);
    box-shadow: 0 0 0 3px rgba(40, 150, 201, 0.16);
}

.hotel-address-select-wrap .select2-selection__rendered {
    padding: 0;
    color: var(--text);
    font-size: 14.5px;
}

.hotel-address-select-wrap .select2-selection__arrow {
    height: 44px;
}

.hotel-address-dropdown {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
}

.hotel-address-dropdown .select2-search--dropdown {
    padding: 8px;
}

.hotel-address-dropdown .select2-search__field {
    height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-size: 13.5px;
}

.hotel-address-dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--turkuaz);
}

.hotel-address-dropdown .select2-results__option {
    padding: 9px 12px;
    font-size: 13.5px;
}

.hotel-address-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--turkuaz) !important;
    color: #fff !important;
}

/* ================================================================
   STEP 3 — rezervasyon tamamlandı, 2026-07-29
   ================================================================ */

.rez-complete-section {
    padding: 56px 0 80px;
}

/* --- result card (success / failure) --- */
.rez-complete-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 34px 30px;
    text-align: center;
}

.rez-complete-box .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.rez-complete-box .head i {
    font-size: 58px;
    line-height: 1;
    color: var(--success);
}

.rez-complete-box .head i.mdi-close-circle {
    color: var(--danger);
}

.rez-complete-box .message {
    font-size: 22px;
    font-weight: var(--font-bold);
    color: var(--text);
    line-height: 1.35;
}

.rez-complete-info {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.rez-complete-info .form-note {
    display: block;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-2);
}

/* --- reservation code --- */
.rez-number-box {
    margin-top: 20px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 34px;
    border-radius: var(--radius);
    background: var(--n-900);
}

.rez-number-box span:first-child {
    font-size: 11.5px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.65);
}

.rez-number-box span:last-child {
    font-size: 30px;
    font-weight: var(--font-extrabold);
    letter-spacing: 2px;
    line-height: 1.1;
    color: #fff;
}

/* --- trip summary card --- */
.rez-trip-card {
    margin-top: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
}

.rez-trip-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: var(--font-bold);
    color: var(--text);
}

.rez-trip-title img {
    width: 58px;
    height: 40px;
    flex: 0 0 58px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

/* step2 caps route labels at 92px for its narrow sidebar; this card is
   full-width, so let the names breathe */
.rez-trip-card .summary-route-item .csp {
    max-width: 240px;
}

/* --- CTA button --- */
.rez-complete-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    padding: 0 30px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 14.5px;
    font-weight: var(--font-bold);
    text-decoration: none;
    transition: var(--transition);
}

.rez-complete-cta:hover {
    background: var(--accent-hover);
    color: var(--accent-fg);
    text-decoration: none;
}

.rez-complete-cta i {
    font-size: 18px;
}