/*
 * Rota Bizden Core - Tur Detay Modern Gorunum (V1)
 *
 * Kapsam: YALNIZCA tekil tur sayfalari. Her kural
 * "body.single-mec-events #main" altindadir ve dosya da yalnizca bu
 * sayfalarda yuklenir (modules/tour-detail-modern/tour-detail-modern.php).
 *
 * MEC'in tekil etkinlik sablonunu ve Core'un tur alanlarini (.rota-tour-tabs,
 * .rota-mec-content-tabs, .rota-price-sidebar) oldugu gibi kullanir. HTML
 * degismez; siralama CSS "order" ile yapilir. Rezervasyon formunun alanlarina
 * ve davranisina dokunulmaz, yalnizca cercevesi stillenir.
 */

/* Renkler Core'un marka dosyasindaki (rota-bizden-brand-refresh) degiskenlerden
   alinir; o dosya yuklu degilse yedek degerler kullanilir. Marka dosyasinin
   !important ile verdigi renkler (sekme dugmeleri, kutu basliklari, rezervasyon
   dugmesi) burada EZILMEZ; yalnizca bicim ve yerlesim tamamlanir. */
body.single-mec-events #main {
    --rtd-navy: var(--rota-brand-navy, #14195a);
    --rtd-blue: #004b93;
    --rtd-red: var(--rota-brand-red, #e3172b);
    --rtd-red-dark: #c21122;
    --rtd-ink: #1b2333;
    --rtd-muted: #5d6878;
    --rtd-line: #e6eaf0;
    --rtd-soft: #f4f6fb;
    --rtd-radius: 16px;
    --rtd-shadow: 0 10px 28px rgba(20, 25, 90, .09);
}

body.single-mec-events #main .mec-container {
    padding-top: 28px;
}

/* ------------------------------------------------------------------ */
/* 1) Baslik, gorsel, ozet bilgiler                                     */
/* ------------------------------------------------------------------ */

/* Baslik gorselin USTUNE alinir: .mec-event-content "contents" olur,
   boylece h1 ve aciklama sutunun dogrudan ogeleri gibi siralanabilir. */
body.single-mec-events #main .mec-single-event .col-md-8 {
    display: flex;
    flex-direction: column;
}

body.single-mec-events #main .mec-single-event .mec-event-content {
    display: contents;
}

body.single-mec-events #main .mec-single-event .mec-single-title {
    color: var(--rtd-navy);
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 18px;
    order: -3;
    padding: 0;
    text-transform: none;
}

body.single-mec-events #main .mec-single-event .mec-events-event-image {
    margin: 0 0 18px;
    order: -2;
}

body.single-mec-events #main .mec-single-event .mec-events-event-image img {
    border-radius: 12px;
}

body.single-mec-events #main .mec-single-event .rota-tour-tabs {
    order: -1;
}

/* Etkinlik ilerleme cubugu tur sayfasinda bilgi tasimiyor. */
body.single-mec-events #main .mec-single-event .mec-events-progress-bar {
    display: none;
}

/* Ozet bilgiler: esit kutular, etiket ustte, deger altta. */
body.single-mec-events #main .rota-tour-tabs {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin: 0 0 28px;
    padding: 0;
}

body.single-mec-events #main .rota-tour-tab {
    background: #fff;
    border: 1px solid var(--rtd-line);
    border-radius: 12px;
    box-shadow: none;
    float: none;
    margin: 0;
    min-height: 0;
    padding: 14px 16px;
    width: auto;
}

body.single-mec-events #main .rota-tour-tab-head {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0 0 6px;
}

body.single-mec-events #main .rota-tour-tab-label {
    color: var(--rtd-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.single-mec-events #main .rota-tour-tab-value {
    color: var(--rtd-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/* 2) Tur programi ve sekmeler                                          */
/* ------------------------------------------------------------------ */

body.single-mec-events #main .mec-single-event-description {
    margin: 0 0 28px;
    padding: 0;
}

body.single-mec-events #main .rota-mec-content-tabs {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

body.single-mec-events #main .rota-content-tab-buttons {
    border-bottom: 1px solid var(--rtd-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0 0 14px;
}

/* Renkleri marka dosyasi belirler (etkin sekme kirmizi, digerleri lacivert). */
body.single-mec-events #main .rota-content-tab-buttons button {
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    min-height: 42px;
    padding: 10px 18px;
}

body.single-mec-events #main .rota-content-tab-buttons button:focus-visible {
    outline: 3px solid var(--rtd-blue);
    outline-offset: 2px;
}

/* Gun gun program: her gun ayri, acilir bir kart. */
body.single-mec-events #main .rota-day-item {
    background: #fff;
    border: 1px solid var(--rtd-line);
    border-radius: 12px;
    margin: 0 0 10px;
    overflow: hidden;
}

body.single-mec-events #main .rota-day-item > summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    padding: 16px 48px 16px 18px;
}

/* Core'un +/- isareti summary'nin sag kenarina gore konumlanir. */
body.single-mec-events #main .rota-day-item > summary::after {
    right: 18px;
}

body.single-mec-events #main .rota-day-item[open] > summary {
    background: var(--rtd-soft);
    border-bottom: 1px solid var(--rtd-line);
}

body.single-mec-events #main .rota-day-content {
    color: #3b4658;
    font-size: 15px;
    line-height: 1.7;
    padding: 16px 18px 6px;
}

body.single-mec-events #main .rota-day-content p {
    margin: 0 0 12px;
}

/* ------------------------------------------------------------------ */
/* 3) Yan sutun: fiyat, tarih, dahil / haric                            */
/* ------------------------------------------------------------------ */

/* Fiyat karti en uste alinir; Core'un sarmalayicisi "contents" olur,
   boylece fiyat karti ile dahil/haric kutulari ayri ayri siralanabilir. */
body.single-mec-events #main .mec-single-event .col-md-4 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.single-mec-events #main .mec-single-event .col-md-4 > *,
body.single-mec-events #main .mec-single-event .rota-price-sidebar > * {
    margin-bottom: 0;
    margin-top: 0;
    order: 5;
}

body.single-mec-events #main .mec-single-event .rota-price-sidebar {
    display: contents;
}

body.single-mec-events #main .mec-single-event .rota-tour-price-card {
    order: 1;
}

body.single-mec-events #main .mec-single-event .mec-event-info-desktop {
    order: 2;
}

body.single-mec-events #main .mec-single-event .rota-price-box {
    order: 3;
}

body.single-mec-events #main .mec-single-event .mec-qrcode-details {
    display: none;
}

/* Fiyat karti */
body.single-mec-events #main .rota-tour-price-card {
    background: #fff;
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-radius);
    box-shadow: var(--rtd-shadow);
    overflow: hidden;
    padding: 0 0 20px;
}

body.single-mec-events #main .rota-tour-price-card h3 {
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    margin: 0 0 16px;
    padding: 14px 20px;
    text-transform: uppercase;
}

body.single-mec-events #main .rota-tour-price-card .rota-tour-old-price {
    color: #8a93a2;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    padding: 0 20px;
    text-decoration: line-through;
}

body.single-mec-events #main .rota-tour-price-card .rota-tour-current-price {
    color: var(--rtd-red);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    margin: 2px 0 16px;
    padding: 0 20px;
}

body.single-mec-events #main .rota-tour-price-card .rota-tour-reserve-button {
    align-items: center;
    background: var(--rtd-red);
    border: 1px solid var(--rtd-red);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(227, 23, 43, .26);
    box-sizing: border-box;
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    margin: 0 20px;
    min-height: 52px;
    padding: 12px 16px;
    text-decoration: none;
    width: auto;
}

body.single-mec-events #main .rota-tour-price-card .rota-tour-reserve-button:hover,
body.single-mec-events #main .rota-tour-price-card .rota-tour-reserve-button:focus {
    background: var(--rtd-red-dark);
    border-color: var(--rtd-red-dark);
    color: #fff;
}

/* MEC bilgi kutusu: tarih ve saat on planda; ucret ve "Kayit Ol" fiyat
   kartinda zaten var, burada tekrar edilmez. */
body.single-mec-events #main .mec-event-info-desktop {
    background: #fff;
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-radius);
    box-shadow: none;
    padding: 10px 20px;
}

body.single-mec-events #main .mec-event-info-desktop .mec-event-cost,
body.single-mec-events #main .mec-event-info-desktop .mec-booking-button-register {
    display: none;
}

body.single-mec-events #main .mec-event-info-desktop > div {
    border-bottom: 1px solid var(--rtd-line);
    margin: 0;
    padding: 14px 0;
}

body.single-mec-events #main .mec-event-info-desktop > div:last-of-type {
    border-bottom: 0;
}

/* Dahil / haric kutulari */
body.single-mec-events #main .rota-price-box {
    background: #fff;
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-radius);
    box-shadow: none;
    overflow: hidden;
    padding: 0;
}

body.single-mec-events #main .rota-price-box h3 {
    border-radius: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    padding: 14px 20px;
    text-transform: none;
}

/* Dahil ve haric kutulari ust serit rengiyle ayrisir (baslik rengi markada
   sabit oldugu icin serit kullanilir): dahil yesil, haric kirmizi. */
body.single-mec-events #main .rota-price-box:has(.rota-price-included-list) {
    border-top: 4px solid #1d8f5a;
}

body.single-mec-events #main .rota-price-box:has(.rota-price-excluded-list) {
    border-top: 4px solid var(--rtd-red);
}

body.single-mec-events #main .rota-price-box ul {
    margin: 0;
    padding: 6px 20px 10px;
}

body.single-mec-events #main .rota-price-box li {
    font-size: 14.5px;
    line-height: 1.45;
    margin: 0;
    padding-bottom: 9px;
    padding-top: 9px;
}

body.single-mec-events #main .rota-price-box li:last-child {
    border-bottom: 0;
}

/* Diger yan kutular ayni cerceve dilinde. */
body.single-mec-events #main .mec-single-event .col-md-4 .mec-frontbox {
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-radius);
    box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 4) Rezervasyon alani: yalnizca cerceve ve baslik                     */
/* ------------------------------------------------------------------ */

body.single-mec-events #main .mec-events-meta-group-booking {
    background: #fff;
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-radius);
    box-shadow: var(--rtd-shadow);
    margin: 0 0 28px;
    overflow: hidden;
    padding: 0;
    scroll-margin-top: 130px;
}

body.single-mec-events #main .mec-events-meta-group-booking::before {
    background: var(--rtd-navy);
    color: #fff;
    content: "Rezervasyon";
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    padding: 16px 24px;
}

body.single-mec-events #main .mec-events-meta-group-booking > .mec-booking {
    padding: 24px;
}

/* Takvime ekle kutusu: sade, cercevesiz. */
body.single-mec-events #main .mec-event-export-module {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0 0 28px;
    padding: 0;
}

body.single-mec-events #main .mec-related-events-wrap .mec-rec-events-title {
    color: var(--rtd-navy);
    font-weight: 800;
    text-transform: none;
}

/* ------------------------------------------------------------------ */
/* 5) Mobil ve tablet: tek sutun, fiyat ve dahil/haric formdan ONCE      */
/* ------------------------------------------------------------------ */

@media (max-width: 960px) {
    /* Iki sutun da "contents" olur; tum bloklar tek akista siralanir. */
    body.single-mec-events #main .mec-single-event {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-left: 0;
        margin-right: 0;
    }

    body.single-mec-events #main .mec-single-event::before,
    body.single-mec-events #main .mec-single-event::after {
        content: none;
    }

    /* Core, dar ekranda fiyat alanini (.rota-price-sidebar) tur programinin
       icine, aciklama kutusunun sonuna tasir. Aciklama kutusu da "contents"
       yapilir ki fiyat karti programin USTUNE siralanabilsin. */
    body.single-mec-events #main .mec-single-event .col-md-8,
    body.single-mec-events #main .mec-single-event .col-md-4,
    body.single-mec-events #main .mec-single-event .mec-single-event-description {
        display: contents;
    }

    body.single-mec-events #main .mec-single-event .col-md-8 > *,
    body.single-mec-events #main .mec-single-event .col-md-4 > *,
    body.single-mec-events #main .mec-single-event .mec-event-content > *,
    body.single-mec-events #main .mec-single-event .mec-single-event-description > *,
    body.single-mec-events #main .mec-single-event .rota-price-sidebar > * {
        margin-bottom: 0;
        margin-top: 0;
        order: 12;
    }

    body.single-mec-events #main .mec-single-event .mec-single-title {
        order: 1;
    }

    body.single-mec-events #main .mec-single-event .mec-events-event-image {
        order: 2;
    }

    body.single-mec-events #main .mec-single-event .rota-tour-tabs {
        order: 3;
    }

    body.single-mec-events #main .mec-single-event .rota-tour-price-card {
        order: 4;
    }

    /* MEC, dar ekranda tarih kutusunu .mec-event-info-mobile icine tasir. */
    body.single-mec-events #main .mec-single-event .mec-event-info-desktop,
    body.single-mec-events #main .mec-single-event .mec-event-info-mobile {
        order: 5;
    }

    body.single-mec-events #main .mec-single-event .rota-mec-content-tabs {
        order: 6;
    }

    body.single-mec-events #main .mec-single-event .rota-price-box {
        order: 7;
    }

    body.single-mec-events #main .mec-single-event .mec-events-meta-group-booking {
        order: 9;
    }

    body.single-mec-events #main .mec-single-event .mec-event-export-module {
        order: 10;
    }

    body.single-mec-events #main .rota-tour-tabs {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.single-mec-events #main .mec-events-meta-group-booking > .mec-booking {
        padding: 16px;
    }
}

@media (max-width: 767px) {
    /* MEC dar ekranda kapsayiciya sabit genislik verir (479px altinda 300px);
       icerik 280px'e sikisir. Sabit genislik yerine 16px kenar boslugu. */
    body.single-mec-events #main .mec-container {
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 18px;
        width: auto;
    }

    body.single-mec-events #main .rota-tour-tab {
        padding: 12px 14px;
    }

    body.single-mec-events #main .rota-tour-tab-value {
        font-size: 15px;
    }

    /* Dar ekranda program kartlari sekme panelinin ic boslugunu kullanmasin. */
    body.single-mec-events #main .rota-mec-content-tabs .rota-content-tab-panel {
        padding-left: 0;
        padding-right: 0;
    }

    body.single-mec-events #main .rota-day-item > summary {
        font-size: 15px;
        padding: 14px 44px 14px 16px;
    }

    body.single-mec-events #main .rota-day-item > summary::after {
        right: 14px;
    }

    body.single-mec-events #main .rota-day-content {
        padding: 14px 16px 4px;
    }
}