/* ==================================================================
   ANA SAYFA  -  2026-08-21
   ==================================================================
   Eski style.css'teki .hero / .split-hero / .section duzenleri yerine
   MOBIL ONCELIKLI yeni bir duzen. Kendi sinif adlarini (ct-) kullanir;
   boylece sitedeki 15 eski stil dosyasiyla catismaz.

   Kural: taban kurallar TELEFON icindir, genis ekran duzenleri
   min-width sorgulariyla EKLENIR.
   ================================================================== */

:root {
    --ct-lacivert: #071429;
    --ct-lacivert2: #0d1f3d;
    --ct-turuncu: #ff6a21;
    --ct-altin: #f5b642;
    --ct-cizgi: #e7eaf0;
    --ct-gri: #64748b;
}

/* ---------- HERO ---------- */
.ct-hero {
    position: relative;
    color: #fff;
    padding: 26px 0 44px;
    background: var(--ct-lacivert);
    overflow: hidden;
}
/* Arka plan gorseli ayri katmanda: uzerine gradyan bindirip
   yaziyi her ekranda okunur tutuyoruz. */
.ct-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/hero/hero-dikey.jpg');
    background-size: cover;
    background-position: center 34%;
}
.ct-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7,20,41,.86) 0%, rgba(7,20,41,.62) 30%,
                                 rgba(7,20,41,.55) 46%, rgba(7,20,41,.95) 82%);
}
.ct-hero > .container { position: relative; z-index: 1; }

.ct-hero-grid { display: grid; gap: 20px; }

.ct-eyebrow {
    color: var(--ct-altin);
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1.5;
}
.ct-hero h1 {
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.08;
    margin: 12px 0 10px;
    letter-spacing: -.5px;
}
.ct-hero-lead {
    margin: 0;
    color: #dbe3f0;
    font-size: 15px;
    line-height: 1.65;
    max-width: 620px;
}

.ct-guven { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.ct-guven span {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
}

.ct-hesap { margin-top: 14px; font-size: 13.5px; color: #cbd5e1; }
.ct-hesap a { color: #ffb774; font-weight: 700; }
.ct-hesap a:hover { text-decoration: underline; }

/* Formun oturdugu beyaz kart.
   Sarmalayici (#booking) eski "tam ekran" kurallarini uzerine alir;
   kart kendi olculerini korur, boylece tema gorseli kartin cevresinde
   gorunmeye devam eder. */
.ct-form-sar { width: 100%; }
.ct-form-kart {
    background: #fff;
    color: #0b1628;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 26px 60px rgba(3,10,25,.45);
}
.ct-form-kart > h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--ct-lacivert);
}

/* ---------- BOLUMLER ---------- */
.ct-bolum { padding: 42px 0; }
.ct-bolum.gri { background: #f5f7fb; }
.ct-bolum-baslik { max-width: 720px; margin: 0 auto 22px; text-align: center; }
.ct-bolum-baslik h2 {
    font-size: clamp(22px, 5vw, 34px);
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--ct-lacivert);
}
.ct-bolum-baslik p { margin: 0; color: var(--ct-gri); font-size: 15px; line-height: 1.6; }

.ct-kartlar { display: grid; gap: 12px; }
.ct-kart {
    background: #fff;
    border: 1px solid var(--ct-cizgi);
    border-radius: 16px;
    padding: 17px;
}
.ct-kart .ikon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: #fff3e9;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    margin-bottom: 11px;
}
.ct-kart h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--ct-lacivert); }
.ct-kart p { margin: 0; color: var(--ct-gri); font-size: 14px; line-height: 1.6; }

/* ---------- NASIL CALISIR ---------- */
.ct-adimlar { counter-reset: ctadim; display: grid; gap: 12px; }
.ct-adim {
    position: relative;
    background: #fff;
    border: 1px solid var(--ct-cizgi);
    border-radius: 16px;
    padding: 17px 17px 17px 60px;
}
.ct-adim::before {
    counter-increment: ctadim;
    content: counter(ctadim);
    position: absolute;
    left: 16px; top: 16px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ct-turuncu), var(--ct-altin));
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.ct-adim h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--ct-lacivert); }
.ct-adim p { margin: 0; color: var(--ct-gri); font-size: 14px; line-height: 1.6; }

/* ---------- FILO ---------- */
.ct-filo { display: grid; gap: 12px; }
.ct-arac {
    background: #fff;
    border: 1px solid var(--ct-cizgi);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ct-arac img {
    width: 100%;
    /* height:auto SART: <img height="..."> sunum ipucu sabit yukseklik
       veriyor ve aspect-ratio'yu etkisiz birakiyordu. */
    height: auto;
    /* Markali filo kartlari 900x1125 (4:5 dikey) ve uzerlerinde yazi
       var; ayni orani verip kirpmayi tamamen engelliyoruz. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background: #f4f5f7;
}
.ct-arac-govde { padding: 14px 15px 15px; }
.ct-arac-govde h3 { margin: 0 0 5px; font-size: 15.5px; color: var(--ct-lacivert); }
.ct-arac-ozet { display: flex; gap: 13px; color: var(--ct-gri); font-size: 13px; margin-bottom: 5px; }
.ct-arac-ozet span { display: inline-flex; align-items: center; gap: 5px; }
.ct-arac-ozet img { width: 15px; height: 15px; aspect-ratio: auto; opacity: .75; background: none; }
.ct-arac-govde p { margin: 0; color: var(--ct-gri); font-size: 13.5px; line-height: 1.55; }

.ct-alt-link { text-align: center; margin-top: 18px; }
.ct-alt-link a {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--ct-lacivert);
    font-weight: 800;
    font-size: 14px;
    border-bottom: 2px solid var(--ct-turuncu);
    padding-bottom: 3px;
}

/* ---------- ROTALAR ---------- */
.ct-rotalar { display: grid; gap: 10px; }
.ct-rota {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ct-cizgi);
    border-radius: 14px;
    padding: 14px 15px;
    color: inherit;
}
.ct-rota:hover { border-color: #ffc79a; box-shadow: 0 8px 22px rgba(7,20,41,.07); }
.ct-rota b { display: block; font-size: 14.5px; color: var(--ct-lacivert); line-height: 1.35; }
.ct-rota small { display: block; color: var(--ct-gri); font-size: 12.5px; margin-top: 3px; }
.ct-rota .ok { flex: 0 0 auto; color: var(--ct-turuncu); font-size: 18px; font-weight: 800; }

/* ---------- SIK SORULAN SORULAR ---------- */
.ct-sss { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.ct-sss-oge {
    background: #fff;
    border: 1px solid var(--ct-cizgi);
    border-radius: 14px;
    overflow: hidden;
}
.ct-sss-oge summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 46px 15px 16px;
    font-weight: 800;
    font-size: 15px;
    color: var(--ct-lacivert);
    line-height: 1.45;
    position: relative;
}
.ct-sss-oge summary::-webkit-details-marker { display: none; }
/* Kendi ok isaretimiz: acikken 45 derece donup arti/carpi hissi verir */
.ct-sss-oge summary::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 21px;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ct-turuncu);
    border-bottom: 2px solid var(--ct-turuncu);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.ct-sss-oge[open] summary::after { transform: rotate(-135deg); top: 25px; }
.ct-sss-oge summary:hover { background: #fff9f4; }
.ct-sss-cevap {
    padding: 0 16px 16px;
    color: var(--ct-gri);
    font-size: 14.5px;
    line-height: 1.65;
}
html[dir="rtl"] .ct-sss-oge summary { padding: 15px 16px 15px 46px; }
html[dir="rtl"] .ct-sss-oge summary::after { right: auto; left: 18px; }

/* ---------- WHATSAPP SERIDI ---------- */
.ct-wa {
    background: linear-gradient(135deg, var(--ct-lacivert), var(--ct-lacivert2));
    color: #fff;
    border-radius: 20px;
    padding: 24px 20px;
    text-align: center;
}
.ct-wa h2 { margin: 0 0 8px; font-size: clamp(20px, 4.5vw, 28px); line-height: 1.2; }
.ct-wa p { margin: 0 auto 16px; color: #cbd5e1; font-size: 14.5px; line-height: 1.6; max-width: 560px; }
.ct-wa-butonlar { display: flex; flex-direction: column; gap: 10px; }
.ct-wa-butonlar a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 13px;
    padding: 14px 18px;
    font-weight: 800;
    font-size: 15px;
}
.ct-wa-yesil { background: #25d366; color: #06301a; }
.ct-wa-beyaz { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; }

/* ==================================================================
   GENIS EKRAN
   ================================================================== */
@media (min-width: 640px) {
    .ct-kartlar { grid-template-columns: repeat(2, 1fr); }
    .ct-filo { grid-template-columns: repeat(2, 1fr); }
    .ct-rotalar { grid-template-columns: repeat(2, 1fr); }
    .ct-wa-butonlar { flex-direction: row; justify-content: center; }
    .ct-wa-butonlar a { min-width: 210px; }
}

@media (min-width: 768px) {
    .ct-hero { padding: 40px 0 46px; }
    .ct-hero::before {
        background-image: url('/assets/img/hero/hero-orta.jpg');
        background-position: center 58%;
    }
    .ct-hero::after {
        /* Sol tarafta yazi var - orayi koyu tutuyoruz; sag tarafta arac
           var - orayi aciyoruz ki gorsel kaybolmasin. */
        background:
            linear-gradient(100deg, rgba(7,20,41,.93) 0%, rgba(7,20,41,.74) 30%,
                                     rgba(7,20,41,.30) 58%, rgba(7,20,41,.10) 100%),
            linear-gradient(180deg, rgba(7,20,41,.40) 0%, rgba(7,20,41,0) 26%, rgba(7,20,41,.35) 100%);
    }
    .ct-hero-lead { font-size: 16.5px; }
    .ct-form-kart { padding: 20px; }
    .ct-bolum { padding: 58px 0; }
    .ct-adimlar { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
    .ct-hero { padding: 56px 0 64px; min-height: 660px; display: flex; align-items: center; }
    .ct-hero > .container { width: min(1180px, 92%); }
    .ct-hero-grid {
        /* Kart daralttik: gorseldeki aracin on kismi kartin soluna
           dusuyor ve gorsel kartin arkasinda kaybolmuyor. */
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 44px;
        align-items: center;
    }
    .ct-hero h1 { font-size: clamp(38px, 4.2vw, 56px); margin: 16px 0 14px; }
    .ct-kartlar { grid-template-columns: repeat(4, 1fr); }
    .ct-kartlar.uc { grid-template-columns: repeat(3, 1fr); }
    .ct-filo { grid-template-columns: repeat(3, 1fr); }
    .ct-rotalar { grid-template-columns: repeat(4, 1fr); }
    .ct-bolum { padding: 72px 0; }
    .ct-form-kart { padding: 24px; }
}

@media (min-width: 1200px) {
    .ct-hero::before { background-image: url('/assets/img/hero/hero-genis.jpg'); }
}

/* Arapca (rtl): ok yonu ve adim numarasi konumu */
html[dir="rtl"] .ct-adim { padding: 17px 60px 17px 17px; }
html[dir="rtl"] .ct-adim::before { left: auto; right: 16px; }
html[dir="rtl"] .ct-rota .ok { transform: scaleX(-1); }