/* ==========================================================================
   REZERVASYON SAYFASI — bilgiler ve ozet
   ========================================================================== */

/* ==========================================================================
   IKI KOLONLU YERLESIM
   --------------------------------------------------------------------------
   ANA  uc adim alt alta (koltuk → iletisim → odeme)
   YAN  rezervasyon ozeti; sagda, yapiskan

   Odeme ucuncu ADIM olarak ana kolonda durur; yan sutunda degil. Boylece
   otobus icin genis alan kalir, odeme formu da dar bir kutuya sikismaz.

   IC SCROLL YOK: kutu icinde kaydirma cubugu sayfanin kendi kaydirmasiyla
   yarisir ve tekerlek nerede oldugunu sasirir. Ozet kisa tutuldugu icin
   ekrana sigar; sigmazsa sayfayla birlikte akar, kirpilmaz.

   Dikey ritim tek yerden: ogelere tek tek margin verilmez, hepsi ayni gap.
   ========================================================================== */
.rzv { display: grid; grid-template-columns: minmax(0,1fr) 320px;
       gap: var(--s5); align-items: stretch; }

.rzv__ana { min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }
.rzv__kat { display: flex; flex-direction: column; gap: var(--s5); }

/* YAN SUTUN GERCEKTEN YAPISIR.
   Izgara align-items: stretch oldugu icin bu sutun satir boyunca uzar;
   yapiskan ozetin yol alacak yeri olur. align-items: start ile sutun
   icerigi kadar kisa kaliyor ve position: sticky hicbir sey yapmiyordu. */
.rzv__yan { min-width: 0; display: flex; flex-direction: column; gap: var(--s4);
            align-self: stretch; }
.rzv__yan > .ozt { position: sticky; top: calc(var(--hd-h-s) + var(--s4)); }

@media (max-width: 1024px) {
  /* Tek sutun: ONCE ADIMLAR, sonra ozet.
     Ozet basta dururken ziyaretci sayfayi acar acmaz bir ozet duvarina
     carpiyor, doldurmasi gereken forma ulasmak icin kaydirmak zorunda
     kaliyordu. Ozet artik formun altinda — doldururken degil, gonderirken
     bakilan yer orasi. */
  .rzv { grid-template-columns: minmax(0,1fr); }
  .rzv__yan { align-self: auto; }
  .rzv__yan > .ozt { position: static; }
}

/* Adim gostergesi — sayfa icinde */
.adm--sayfa { padding: var(--s4) var(--s5);
              background: var(--white); border: 1px solid var(--line);
              border-radius: var(--r3); }
.adm--sayfa .adm__o--ok span svg { color: currentColor; }


/* ==========================================================================
   FORM
   ========================================================================== */
.rzv__frm { display: flex; flex-direction: column; gap: var(--s5); }

.rzv__blk { padding: var(--s6); background: var(--white);
            border: 1px solid var(--line); border-radius: var(--r3); }
.rzv__b { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4);
          font-size: var(--fs-h4); font-weight: var(--fw-800);
          letter-spacing: var(--ls-tt); color: var(--tx); }
.rzv__b svg { color: var(--brand); }
.rzv__b-alt { margin-top: calc(var(--s4) * -1 + 2px); margin-bottom: var(--s4);
              font-size: var(--fs-3xs); color: var(--tx-mute); }

/* Yolcu kutusu */
.ylc { padding: var(--s5); margin-bottom: var(--s4);
       background: var(--mist); border: 1px solid var(--line-soft); border-radius: var(--r2); }
.ylc:last-of-type { margin-bottom: 0; }

.ylc__bas { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
            width: 100%; margin-bottom: var(--s4); padding: 0; }
.ylc__no { font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--tx); }
.ylc__klt { display: inline-flex; align-items: center; gap: 5px;
            padding: 3px var(--s3); font-size: 10px; font-weight: var(--fw-700);
            border-radius: var(--rp); }
.ylc__klt--erkek { color: #1B5296; background: #D7E6F9; }
.ylc__klt--kadin { color: #9E2E6E; background: #F8DCEC; }
.ylc__klt--cocuk { color: #25714A; background: #D9F0E3; }

.ylc__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 620px) { .ylc__grid { grid-template-columns: minmax(0,1fr); } }

/* Onay satiri */
.onay--blk { align-items: flex-start; gap: var(--s3); padding: var(--s3) 0;
             margin-inline: 0; font-size: var(--fs-2xs); line-height: 1.6; }
.onay--blk input { margin-top: 2px; }
.onay--blk:hover { background: transparent; }
.onay--blk a { font-weight: var(--fw-700); color: var(--brand-700);
               text-decoration: underline; text-underline-offset: 3px; }
.onay--blk a:hover { color: var(--brand); }

.rzv__uyari { display: flex; align-items: center; gap: var(--s3);
              padding: var(--s4); font-size: var(--fs-2xs); font-weight: var(--fw-600);
              color: var(--no); background: #FCEDEC;
              border: 1px solid #F6C9C5; border-radius: var(--r2); }

.rzv__kvk { font-size: 10px; color: var(--tx-faint); text-align: center; }


/* ==========================================================================
   OZET KUTUSU
   ========================================================================== */
.ozt { background: var(--white); border: 1px solid var(--line);
       border-radius: var(--r3); overflow: hidden; box-shadow: var(--sh2); }
.ozt__bas { padding: var(--s3) var(--s5); color: var(--white); background: var(--g-koyu); }
.ozt__bas span { display: inline-flex; align-items: center; gap: var(--s2);
                 font-size: var(--fs-2xs); font-weight: var(--fw-700); letter-spacing: .03em; }
.ozt__bas svg { color: var(--brand-200); }


.ozt__gov { padding: var(--s5); }
.ozt__b { font-size: var(--fs-h4); font-weight: var(--fw-700); line-height: 1.35; color: var(--tx); }
.ozt__rota { margin-top: 4px; font-size: var(--fs-3xs); color: var(--tx-mute); }

.ozt__ls { display: flex; flex-direction: column; gap: var(--s3);
           margin: var(--s4) 0; padding: var(--s4) 0;
           border-block: 1px solid var(--line-soft); }
.ozt__ls > div { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.ozt__ls dt { display: inline-flex; align-items: center; gap: var(--s2);
              font-size: var(--fs-3xs); color: var(--tx-mute); }
.ozt__ls dt svg { color: var(--brand); }
.ozt__ls dd { font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx); text-align: right; }

.ozt__klt { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ozt__k { display: inline-flex; align-items: center; justify-content: center;
          min-width: 26px; height: 24px; padding: 0 5px;
          font-size: 11px; font-weight: var(--fw-800); border-radius: var(--r1); }
.ozt__k--erkek { color: #FFFFFF; background: #2F7BD6; }
.ozt__k--kadin { color: #FFFFFF; background: #D4569E; }
.ozt__k--cocuk { color: #FFFFFF; background: #3FA06B; }

/* Promosyon kodu — ozetin icinde, hesabin hemen ustunde.
   "Uygula" dugmesi alanin ICINDE durur: dar yan sutunda ayri bir dugme
   satiri fazladan yer yiyordu. */
.prm { margin-bottom: var(--s4); }
.prm__gir { position: relative; display: flex; align-items: center; }
.prm__gir .alan__g { padding-right: 74px; text-transform: uppercase;
                     letter-spacing: .06em; font-weight: var(--fw-700); }
.prm__gir .alan__g::placeholder { text-transform: none; letter-spacing: 0;
                                  font-weight: var(--fw-400); }
.prm .alan__e svg { color: var(--brand); vertical-align: -2px; }

.prm__bt { position: absolute; right: 5px;
           display: inline-flex; align-items: center; justify-content: center;
           height: 34px; padding: 0 var(--s3);
           font-size: 10px; font-weight: var(--fw-800);
           color: var(--white); background: var(--brand);
           border-radius: var(--r1); transition: background var(--t1); }
.prm__bt:hover { background: var(--brand-600); }

/* Sonuc: kenarlik rengi + alt satirdaki metin */
.prm__snc { margin-top: 5px; font-size: 10px; line-height: 1.5;
            font-weight: var(--fw-600); }
.prm__snc--ok  { color: var(--ok); }
.prm__snc--yok { color: var(--no); }
.prm--ok  .alan__g { border-color: var(--ok); }
.prm--yok .alan__g { border-color: var(--no); }

.ozt__hesap { display: flex; flex-direction: column; gap: var(--s2);
              padding: var(--s4); background: var(--mist); border-radius: var(--r2); }
.ozt__sat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
            font-size: var(--fs-3xs); color: var(--tx-mute); }
.ozt__sat b { font-weight: var(--fw-700); color: var(--tx); font-variant-numeric: tabular-nums; }
.ozt__sat--top { padding-top: var(--s2); border-top: 1px dashed var(--line);
                 font-size: var(--fs-2xs); color: var(--tx); }
.ozt__sat--top b { font-size: var(--fs-h4); font-weight: var(--fw-800); color: var(--brand); }
/* Kampanya indirimi satiri */
.ozt__sat--ind { color: var(--ok); }
.ozt__sat--ind b { color: var(--ok); }
.ozt__sat--ind svg { vertical-align: -2px; }

.ozt__sat--on { color: var(--ok); }
.ozt__sat--on b { color: var(--ok); font-size: var(--fs-xs); }
.ozt__sat--kalan { font-size: 10px; }

/* Kutunun en altinda ince bir ayak — govdenin dolgusunu tekrarlamaz */
.ozt__geri { display: flex; align-items: center; gap: var(--s2);
             padding: var(--s3) var(--s5);
             font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-mute);
             background: var(--mist); border-top: 1px solid var(--line-soft);
             transition: color var(--t1), background var(--t1); }
.ozt__geri:hover { color: var(--brand); background: var(--brand-50); }

/* Guven satiri — kutunun disinda, tek satir. Tur detayindaki .rez__guv
   listesiyle karistirmamak icin ayri ad: o dikey liste, bu tek satir. */
.rzv__guv { display: flex; align-items: center; gap: var(--s2);
            font-size: 10px; line-height: 1.5; color: var(--tx-faint); }
.rzv__guv svg { flex: none; color: var(--ok); }


/* ==========================================================================
   YERLESTIRILECEK YOLCULAR
   ========================================================================== */
.ykt { padding: var(--s4);
       background: var(--mist); border-radius: var(--r2); }
.ykt__e { display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--s3);
          font-size: 10px; font-weight: var(--fw-700); letter-spacing: var(--ls-cap);
          text-transform: uppercase; color: var(--tx-faint); }
.ykt__e svg { color: var(--brand); }
.ykt__ls { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ykt__bos { font-size: var(--fs-3xs); color: var(--tx-faint); }

.ykt__y { display: inline-flex; align-items: center; gap: 5px;
          padding: 4px 4px 4px 4px; font-size: var(--fs-3xs); font-weight: var(--fw-700);
          color: var(--tx-faint);
          background: #FFFFFF; border: 1px dashed var(--line); border-radius: var(--rp);
          transition: all var(--t1); }
.ykt__y i { font-style: normal; display: inline-flex; align-items: center; justify-content: center;
            width: 20px; height: 20px; font-size: 10px; font-weight: var(--fw-800);
            color: var(--tx-mute); background: var(--mist-2); border-radius: var(--rp); }
.ykt__y em { font-style: normal; font-weight: var(--fw-500); padding-right: var(--s2); }

/* Yolcu turune gore renk — koltuk seciminde kullanilan renklerin aynisi */
.ykt__y--e i { color: #1B5296; background: #D7E6F9; }
.ykt__y--k i { color: #9E2E6E; background: #F8DCEC; }
.ykt__y--c i { color: #25714A; background: #D9F0E3; }

/* Koltugu yerlesmis yolcu */
.ykt__y.dolu           { border-style: solid; }
.ykt__y--e.dolu        { color: #1B5296; background: #EEF5FD; border-color: #A8C8EE; }
.ykt__y--e.dolu i      { color: #FFFFFF; background: #2F7BD6; }
.ykt__y--k.dolu        { color: #9E2E6E; background: #FDEFF6; border-color: #EFB9D6; }
.ykt__y--k.dolu i      { color: #FFFFFF; background: #D4569E; }
.ykt__y--c.dolu        { color: #25714A; background: #EEF9F2; border-color: #A9DDBF; }
.ykt__y--c.dolu i      { color: #FFFFFF; background: #3FA06B; }

/* Rozetten koltugu birak */
.ykt__sil { display: inline-flex; align-items: center; justify-content: center;
            width: 18px; height: 18px; margin-left: 1px;
            font-size: 13px; line-height: 1; color: var(--tx-faint);
            background: transparent; border-radius: var(--rp);
            transition: all var(--t1); }
.ykt__sil:hover { color: #FFFFFF; background: var(--no); }

/* ==========================================================================
   ADIM 2 KILIDI
   ========================================================================== */
.rzv__blk--kilit { opacity: .62; }
.rzv__kilit-n { display: flex; align-items: center; gap: var(--s2);
                padding: var(--s5); font-size: var(--fs-2xs); color: var(--tx-mute);
                background: var(--mist); border-radius: var(--r2); }
.rzv__kilit-n svg { color: var(--tx-faint); }

.rzv__grup { padding-top: var(--s5); margin-top: var(--s5); border-top: 1px solid var(--line-soft); }
.rzv__b3 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
           font-size: var(--fs-s); font-weight: var(--fw-700); color: var(--tx); }
.rzv__b3 svg { color: var(--brand); }

.ozt__yok { font-size: var(--fs-3xs); font-weight: var(--fw-500); color: var(--tx-faint); }

.ozt__dlk { padding: var(--s4); background: #FFFFFF;
            border: 1px solid var(--line); border-radius: var(--r3); }
.ozt__dlk > span { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
                   font-size: var(--fs-3xs); color: var(--tx-mute); }
.ozt__dlk svg { color: var(--brand); }
.ozt__dlk b { font-weight: var(--fw-800); color: var(--tx); }


/* ==========================================================================
   ADIM 1: TARIH VE YOLCU DUZENLEME
   --------------------------------------------------------------------------
   Tur detayindaki kutuyla ayni model: oda oda yolcu, oda ekle/kaldir.
   ========================================================================== */
.dgs { display: flex; flex-direction: column; gap: var(--s4);
       padding: var(--s4);
       background: var(--mist); border: 1px solid var(--line-soft); border-radius: var(--r2); }

.dgs__ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: var(--s4); align-items: start; }
@media (max-width: 620px) { .dgs__ust { grid-template-columns: minmax(0,1fr); } }

.dgs__alan { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.dgs__e { display: inline-flex; align-items: center; gap: 5px;
          font-size: 10px; font-weight: var(--fw-700); letter-spacing: var(--ls-cap);
          text-transform: uppercase; color: var(--tx-faint); }
.dgs__e svg { color: var(--brand); }

/* Oda ve sayac stilleri css/tur.css icinde tanimlidir — iki sayfa da ayni
   bileseni kullanir. Burada tekrar tanimlamak kartlari esnetip bos alan
   yaratiyordu. */

/* Guncelleme seridi */
.dgs__alt { display: flex; align-items: center; justify-content: space-between;
            gap: var(--s4); flex-wrap: wrap;
            padding-top: var(--s3); border-top: 1px dashed var(--line); }
.dgs__not { display: flex; align-items: center; gap: var(--s2);
            font-size: var(--fs-3xs); color: var(--warn); }


/* ==========================================================================
   KOLTUK BOLUMU: KATLANMA
   ========================================================================== */
.rzv__bas { display: flex; align-items: center; justify-content: space-between;
            gap: var(--s4); margin-bottom: var(--s5); }
.rzv__bas .rzv__b { margin-bottom: 0; }
.rzv__degis { display: inline-flex; align-items: center; gap: 5px;
              padding: 7px var(--s4); font-size: var(--fs-3xs); font-weight: var(--fw-700);
              color: var(--brand-700); background: var(--brand-50);
              border: 1px solid var(--brand-200); border-radius: var(--rp);
              transition: all var(--t1); }
.rzv__degis:hover { color: #FFFFFF; background: var(--brand); border-color: var(--brand); }

/* Katli haldeki ozet serit */
.kzt { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
       padding: var(--s4); background: #F3FAF6;
       border: 1px solid #CDEBDB; border-radius: var(--r2);
       animation: kzt-gir .26s var(--e); }
@keyframes kzt-gir { from { opacity: 0; } to { opacity: 1; } }
.kzt__e { display: inline-flex; align-items: center; gap: 5px;
          font-size: var(--fs-3xs); font-weight: var(--fw-700); color: var(--ok); }
.kzt__ls { display: flex; flex-wrap: wrap; gap: 4px; }

/* Adim 1 icindeki ipucu metni butondan once nefes alsin, butona yapismasin */
#adim-koltuk .klt__ipucu { padding: var(--s3) 0; }

/* Renk anahtari gap ile ayrildigi icin kendi alt dolgusuna gerek yok */
#adim-koltuk .klt__anh { padding-bottom: 0; border-bottom: 0; }


/* ==========================================================================
   3. ADIM — MISAFIR BILGILERI
   ========================================================================== */
.mis__oda { padding: var(--s5); margin-bottom: var(--s5);
            background: var(--mist); border: 1px solid var(--line-soft);
            border-radius: var(--r3); }

.mis__ob { display: flex; align-items: baseline; gap: var(--s3);
           margin-bottom: var(--s4);
           font-size: var(--fs-s); font-weight: var(--fw-800); color: var(--tx); }
.mis__ob small { font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-mute); }

/* Yatak tipi */
.mis__yt { border: 0; padding: 0; margin-bottom: var(--s5); }
.mis__yt legend { padding: 0; margin-bottom: var(--s2); }
.mis__yt-ls { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
              padding: var(--s3) var(--s4); background: var(--white);
              border: 1px solid var(--line); border-radius: var(--r2); }

/* Misafir kutusu */
.mis { border: 0; padding: var(--s5); margin: 0 0 var(--s4);
       background: var(--white); border: 1px solid var(--line);
       border-radius: var(--r2); }
.mis:last-of-type { margin-bottom: 0; }

.mis__b { display: flex; align-items: center; gap: var(--s3); padding: 0;
          margin-bottom: var(--s4);
          font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--tx); }
.mis__n { display: inline-flex; align-items: center; justify-content: center;
          width: 22px; height: 22px; flex: none;
          font-size: 11px; font-weight: var(--fw-800);
          color: var(--white); background: var(--koyu); border-radius: var(--rp); }

/* Cinsiyet rozeti — koltuk renkleriyle ayni dil */
.mis__c { padding: 2px var(--s3); font-size: 10px; font-weight: var(--fw-700);
          font-style: normal; border-radius: var(--rp); }
.mis__c--erkek { color: #1B5296; background: #D7E6F9; }
.mis__c--kadin { color: #9E2E6E; background: #F8DCEC; }
.mis__c--cocuk { color: #25714A; background: #D9F0E3; }

.mis__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
             gap: var(--s4); }
@media (max-width: 900px) { .mis__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .mis__grid { grid-template-columns: minmax(0,1fr); } }

.mis__onay { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
             margin: var(--s3) 0; }

/* Pasaport alanlari — yurt disinda hep acik, yurt icinde yabanci uyrukluda */
.mis__pas { padding-top: var(--s4); border-top: 1px dashed var(--line); }


/* ==========================================================================
   FATURA BILGILERI — 2. adimin bir bolumu
   --------------------------------------------------------------------------
   Ayri bir adim degil; iletisim alanlarinin altinda, kendi cercevesinde
   durur. Sozlesme listesiyle ayni gorsel dil: acik zemin, ince cerceve.
   ========================================================================== */
.ftr { padding: var(--s3) var(--s4); margin-top: var(--s4);
       background: var(--mist); border: 1px solid var(--line-soft);
       border-radius: var(--r2); }
/* Bolumu acan tetik — kapaliyken TEK SATIR: ikon, metin ve aciklama
   yan yana. Onceki hâli uc satir yer kapliyordu. */
.ftr__ac { margin-inline: 0; padding: 0; align-items: center; gap: var(--s2); }
.ftr__ac:hover { background: transparent; }
.ftr__ac .onk__kutu { width: 17px; height: 17px; margin-top: 0; }
.ftr__ac .onk__m { font-size: var(--fs-3xs); font-weight: var(--fw-700); color: var(--tx); }
.ftr__ac .onk__m svg { color: var(--brand); vertical-align: -2px; margin-right: 1px; }
.ftr__ac small { font-weight: var(--fw-400); color: var(--tx-faint); }

/* Acilan govde */
.ftr__gov { display: flex; flex-direction: column; gap: var(--s4);
            padding-top: var(--s4); margin-top: var(--s4);
            border-top: 1px solid var(--line);
            animation: odm-gir .2s var(--e); }
@media (prefers-reduced-motion: reduce) { .ftr__gov { animation: none; } }

.ftr__n { display: flex; align-items: flex-start; gap: var(--s2);
          font-size: 10px; line-height: 1.6; color: var(--tx-mute); }
.ftr__n svg { flex: none; margin-top: 1px; color: var(--brand); }
.ftr .ylc__grid, .ftr .ftr__tip-ls { background: transparent; }

.ftr__tip { border: 0; padding: 0; margin-bottom: var(--s4); }
.ftr__tip legend { padding: 0; margin-bottom: var(--s2); }
.ftr__tip-ls { display: flex; gap: var(--s3); }
@media (max-width: 620px) { .ftr__tip-ls { flex-direction: column; } }

.js .ftr__p { display: none; }
.js .ftr__p.on { display: block; animation: odm-gir .2s var(--e); }

.ftr__adres { padding-top: var(--s4); margin-top: var(--s4);
              border-top: 1px solid var(--line-soft); }

/* Katlanmis adim ozetinde tek satirlik degerler */
.kzt__d { display: inline-flex; align-items: center; padding: 3px var(--s3);
          font-size: 10px; font-weight: var(--fw-700); color: var(--tx);
          background: var(--white); border: 1px solid var(--line);
          border-radius: var(--rp); }


/* ==========================================================================
   SAYFADAN AYRILMA ONAYI (.cko)  —  #cik-onay
   --------------------------------------------------------------------------
   Rezervasyon formu uzun; geri tusuna yanlislikla basmak her seyi siler.
   Pencere site geneli .mdl kalibini kullanir, yalnizca daraltilir ve
   uyari tonuna boyanir.
   ========================================================================== */
.mdl__kt--dar { max-width: 420px; }

#cik-onay .mdl__bas { background: var(--warn-bg);
                      border-bottom-color: rgba(178,106,0,.22); }
#cik-onay .mdl__b { display: inline-flex; align-items: center; gap: var(--s2);
                    color: var(--warn); }
#cik-onay .mdl__b svg { color: currentColor; }

.cko__m { font-size: var(--fs-2xs); line-height: 1.75; color: var(--tx-soft); }
.cko__m b { color: var(--tx); font-weight: var(--fw-800); }
.cko__s { margin-top: var(--s3); font-size: var(--fs-xs);
          font-weight: var(--fw-800); color: var(--tx); }


/* ==========================================================================
   DAR EKRAN — IC ICE KUTULARI DUZLESTIR
   --------------------------------------------------------------------------
   Misafir bilgileri ekraninda dort kutu ic ice giriyor ve her biri yandan
   bosluk ekliyor. 430 px'lik bir telefonda olculdu:

       .kap        32 px
       .rzv__blk   50 px
       .mis__oda   42 px
       .mis        42 px
       -----------------
       toplam     166 px   ->  alana yalnizca 264 px kaliyor

   Yolcu adi, dogum tarihi ve pasaport numarasi gibi uzun degerler bu
   genislikte sigmiyordu.

   COZUM: mobilde IC kutular duzlesir — cerceve, kose yuvarlakligi ve YAN
   bosluk kalkar; dikey bosluklar ve basliklar kalir, hiyerarsi onlarla
   korunur. Sayfa kenar boslugu (.kap) DOKUNULMAZ; metin ekran kenarina
   yapismamali.

   !! MASAUSTU HIC DEGISMEZ: butun kurallar bu medya sorgusunun icinde.
   ========================================================================== */
@media (max-width: 620px) {
  /* Adim kutusu: cerceve kalir, yan bosluk daralir */
  .rzv__blk { padding-inline: var(--s3); }

  /* Oda ve misafir kutulari: yalnizca dikey ayrim */
  .mis__oda, .mis {
    padding-inline: 0;
    border-left: 0; border-right: 0;
    border-radius: 0;
    background: transparent;
  }

  /* Ust kenarlik ayrimi tasir; ilk kutuda gereksiz */
  .mis { border-top: 1px solid var(--line-soft); padding-top: var(--s4); }
  .mis__oda > .mis:first-of-type { border-top: 0; padding-top: var(--s2); }

  /* Oda kutusu artik zeminsiz; basligi ayirt etmek icin ustune cizgi */
  .mis__oda { border-top: 1px solid var(--line);
              padding-top: var(--s4); margin-bottom: var(--s4); }
  .mis__oda:first-of-type { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   ADIMLAR ARASI GECIS (musteri revizesi; js/rzv-gecis.js)
   Ayni kaynakli sayfa gecisinde ust bant ve ozet kutusu yerinde kalir,
   icerik yumusakca degisir. Desteklemeyen tarayici normal gecer.
   ========================================================================== */
@view-transition { navigation: auto; }
.hd { view-transition-name: rzv-ust; }
.rzv__yan { view-transition-name: rzv-ozet; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(rzv-ozet) { animation-duration: .35s; }
.rzv__blk--ozet { transition: box-shadow var(--t2); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Misafir: uyruk secimi en basta (musteri revizesi) */
.mis__uyruk { display: flex; margin: 0 0 var(--s4); padding: 4px var(--s3);
              background: var(--mist); border: 1px solid var(--line); border-radius: var(--r2); }
.ozt__son { display: flex; align-items: center; gap: 6px; margin: var(--s2) 0 0; font-size: 11.5px; color: var(--tx-mute); }
.ozt__son b { color: var(--tx); }

/* Kayitli yolcularimdan sec (rezervasyon_bilgi.php [data-ky]) */
.ky { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
      background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--r2); }
.ky__e { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--fw-800);
         letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--brand-700); }
.ky__s { max-width: 460px; }
.ky__s .alan__g { background: var(--white); }
.ky__u { display: flex; gap: 6px; margin: 2px 0 0; font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--warn); }