/* ==========================================================================
   OTOBUS OTURMA DUZENI
   --------------------------------------------------------------------------
   Gercek otobus krokisi: on solda (direksiyon + on kapi), kolonlar yan yana,
   koridor ust ve alt bloklarin arasinda, orta kapida yalnizca alt koltuk.
   KOLTUK OLCUSU SABIT — plan kapsayiciya sigmazsa yatay kayar.
   ========================================================================== */

.klt { display: flex; flex-direction: column; gap: var(--s4); }

/* -- Renk anahtari ---------------------------------------------------------- */
.klt__anh { display: flex; flex-wrap: wrap; gap: var(--s4);
            padding-bottom: var(--s4); border-bottom: 1px solid var(--line-soft); }
.klt__anh span { display: inline-flex; align-items: center; gap: var(--s2);
                 font-size: var(--fs-3xs); color: var(--tx-mute); }
.ks { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid; }
.ks--bos       { background: #FFFFFF; border-color: #94A6C0; }
.ks--dolu      { background: #97A6BC; border-color: #6E7F98; }
.ks--onrez     { background: #3E8FD9; border-color: #2A6DAE; }
.ks--secilemez { background: #E4E8EE; border-color: #C9D0DA; }
/* Kendi seciminiz — cinsiyete gore */
.ks--sec-e     { background: #2F7BD6; border-color: #1B5296; }
.ks--sec-k     { background: #D4569E; border-color: #9E2E6E; }
.ks--sec-c     { background: #3FA06B; border-color: #25714A; }


/* ==========================================================================
   OTOBUS GOVDESI
   ========================================================================== */
.oto { --ko-b: 36px;      /* koltuk kenari — SABIT */
       --ko-a: 15px;      /* kolon icindeki koltuk araligi */
       --kol-a: 8px;      /* kolonlar arasi bosluk */
       position: relative; }

.oto__kaydir { width: 100%; overflow-x: auto; padding-block: 4px 6px;
               scrollbar-width: thin; }

.oto__govde { display: flex; flex-direction: row; align-items: flex-start; gap: 0;
              width: fit-content; margin-inline: auto;
              padding: var(--s4) var(--s5);
              background: #F0F4FD; border: 2px solid #C8D6F0; border-radius: 16px; }

.oto__alan { display: flex; flex-direction: row; align-items: flex-start; gap: var(--kol-a); }

/* Bir kolon = bir sira */
.oto__kol { position: relative; display: flex; flex-direction: column; gap: var(--ko-a); }
.oto__kol--on { justify-content: flex-end; align-items: center;
                padding-right: 12px; margin-right: 10px;
                border-right: 2px dashed #C8D6F0; }
.oto__kol--kapi { margin-inline: 2px; }

/* 2+2 duzeninde kolonda bir koltuk daha var — arayi daralt */
.oto[data-tip="2+2"] { --ko-a: 6px; }

.oto__koridor { height: 14px; width: var(--ko-b); flex: none; }
.oto__bos     { height: var(--ko-b); width: var(--ko-b); flex: none; }
.oto__kol--on .oto__bos { height: 30px; width: 48px; }

.oto__direksiyon { display: inline-flex; align-items: center; justify-content: center;
                   width: 48px; height: 48px; flex: none; color: #D2DCEE; }
.oto__direksiyon svg { width: 100%; height: 100%; }

/* Orta kapi etiketi */
.oto__kapi-e { position: absolute; left: 50%; top: -13px; transform: translateX(-50%);
               font-size: 8px; font-weight: var(--fw-700); letter-spacing: var(--ls-cap);
               text-transform: uppercase; color: #8C9AB8; white-space: nowrap; }


/* ==========================================================================
   KOLTUK
   --------------------------------------------------------------------------
   Govde tek bir SVG; renkler CSS degiskenleriyle verilir, durum degisince
   yalnizca sinif degisir — SVG yeniden uretilmez.
   ========================================================================== */
.ko { --kd: #F2F6FF;      /* dolgu */
      --kk: #C8CEE2;      /* kenar */
      --kn: #5A6880;      /* numara */
      position: relative; flex: none;
      width: var(--ko-b); height: var(--ko-b);
      padding: 0; background: none; border: 0;
      transition: transform .12s var(--e); }

.ko__g { display: block; width: 100%; height: 100%; }
.ko__g rect { fill: var(--kd); stroke: var(--kk); stroke-width: 1; }

.ko__n { position: absolute; top: 50%; left: 46%; transform: translate(-50%, -55%);
         font-size: 10px; font-weight: var(--fw-800); line-height: 1;
         color: var(--kn); pointer-events: none; }

/* -- Durumlar --------------------------------------------------------------
   BOS koltuk one cikar: beyaz zemin, belirgin kenar, hafif golge — gozun
   ilk yakaladigi sey "nereye oturabilirim" olmali.
   DOLU koltuk geri cekilir: koyu gri-mavi, beyaz numara.
   Dolu koltuklarda CINSIYET AYRIMI YOK; otobusteki cinsiyet yogunlugu
   disariya sizmasin diye hepsi tek renk. Cinsiyet yalnizca KENDI
   seciminizde gorunur — zaten sizin bildiginiz bilgi. */
.ko--bos       { --kd: #FFFFFF; --kk: #94A6C0; --kn: #2F3B4F; }
.ko--bos .ko__g { filter: drop-shadow(0 1px 1.5px rgba(31,45,68,.14)); }
.ko--dolu      { --kd: #97A6BC; --kk: #6E7F98; --kn: #FFFFFF; }
.ko--onrez     { --kd: #3E8FD9; --kk: #2A6DAE; --kn: #FFFFFF; }
.ko--secilemez { --kd: #E4E8EE; --kk: #C9D0DA; --kn: #A2AAB8; }

/* Yan yana oturma kurali geregi bu yolcuya kapali — taramali */
.ko--engel { --kd: #E4E8EE; --kk: #C9D0DA; --kn: #A2AAB8; }
.ko--engel .ko__g rect:first-child { fill: url(#ko-tarama); }

/* Kendi seciminiz — cinsiyete gore renklenir */
.ko--secili        { --kd: #2F7BD6; --kk: #1B5296; --kn: #FFFFFF; transform: scale(1.06); }
.ko--secili.ko--sk { --kd: #D4569E; --kk: #9E2E6E; }
.ko--secili.ko--sc { --kd: #3FA06B; --kk: #25714A; }
.ko--secili .ko__g { filter: drop-shadow(0 3px 7px rgba(31,45,68,.28)); }
/* Etkilesim */
.ko--bos:not(:disabled) { cursor: pointer; }
.ko--bos:not(:disabled):hover { --kd: #FFF4E9; --kk: #F47D18; --kn: #B85708;
                                transform: scale(1.08); }
.ko:disabled { cursor: not-allowed; }
.ko:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* Salt gorunum: tiklama ve hover yok */
.oto--salt .ko { pointer-events: none; }


/* ==========================================================================
   CINSIYET SECIM BALONU
   --------------------------------------------------------------------------
   Yalnizca KOTASI KALAN turler gosterilir: 3 erkek + 1 kadin secildiyse ve
   kadin yerlestirilmisse, sonraki koltuklarda yalnizca "Erkek" cikar.
   ========================================================================== */
.cns { position: absolute; z-index: var(--z-ov);
       display: flex; flex-direction: column; gap: var(--s2);
       width: 232px; padding: var(--s3);
       background: #FFFFFF; border: 1px solid var(--line);
       border-radius: 20px; box-shadow: var(--sh4);
       transform: translate(-50%, -50%);
       animation: cns-gir .16s var(--e); }
@keyframes cns-gir { from { opacity: 0; transform: translate(-50%, -42%) scale(.94); } }
/* Koltuk yeri uyarisi — kullanicinin mutlaka gormesi gereken bilgi */
.cns__uyari { font-size: 10px; line-height: 1.5; color: var(--tx-mute); text-align: center; }
.cns__uyari b { color: var(--tx); }
.cns__ls { display: flex; gap: 5px; justify-content: center; }
.cns__b { flex: 1; display: inline-flex; align-items: center; justify-content: center;
          gap: 4px; padding: 7px var(--s2);
          font-size: var(--fs-3xs); font-weight: var(--fw-700); border-radius: var(--rp);
          white-space: nowrap; transition: all var(--t1); }
.cns__b i { font-style: normal; display: inline-flex; align-items: center;
            justify-content: center; min-width: 15px; height: 15px; padding: 0 3px;
            font-size: 9px; font-weight: var(--fw-800);
            background: rgba(255,255,255,.7); border-radius: var(--rp); }
.cns__b--e { color: #10305A; background: #CFE3FA; }
.cns__b--e:hover { color: #FFFFFF; background: #3E7BC4; }
.cns__b--k { color: #5A1044; background: #F7D8EE; }
.cns__b--k:hover { color: #FFFFFF; background: #C2569F; }
.cns__b--c { color: #1C6340; background: #D6F3E1; }
.cns__b--c:hover { color: #FFFFFF; background: #3E9A65; }
.cns__b[hidden] { display: none !important; }


/* ==========================================================================
   DOLULUK OZETI (detay sayfasindaki salt gorunum)
   ========================================================================== */
.klt__ozt { padding: var(--s4); background: var(--mist);
            border: 1px solid var(--line-soft); border-radius: var(--r2); }
.klt__cbk { height: 8px; background: var(--mist-2); border-radius: var(--rp); overflow: hidden; }
.klt__cbk span { display: block; height: 100%; background: var(--g-brand); border-radius: var(--rp); }
.klt__say { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between;
            gap: var(--s3); margin-top: var(--s3); }
.klt__say li { font-size: 10px; color: var(--tx-mute); }
.klt__say b { display: block; font-size: var(--fs-s); font-weight: var(--fw-800); color: var(--tx); }

.klt__ipucu { display: flex; align-items: flex-start; gap: var(--s2);
              font-size: var(--fs-3xs); line-height: 1.6; color: var(--tx-mute); }
.klt__ipucu svg { flex: none; margin-top: 2px; color: var(--brand); }
.klt__ipucu b { color: var(--tx); }


/* ==========================================================================
   ADIM GOSTERGESI (rezervasyon sayfasinda kullanilir)
   ========================================================================== */
.adm { display: flex; list-style: none; gap: var(--s2);
       overflow-x: auto; scrollbar-width: none; }
.adm::-webkit-scrollbar { display: none; }
.adm__o { flex: none; display: inline-flex; align-items: center; gap: var(--s2);
          font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-faint); }
.adm__o + .adm__o::before { content: ""; width: 22px; height: 1px;
                            background: var(--line); margin-right: var(--s2); }
.adm__o span { display: inline-flex; align-items: center; justify-content: center;
               width: 22px; height: 22px; font-size: 10px; font-weight: var(--fw-800);
               color: var(--tx-faint); background: #FFFFFF;
               border: 1px solid var(--line); border-radius: var(--rp); }
.adm__o--ok { color: var(--ok); }
.adm__o--ok span { color: #FFFFFF; background: var(--ok); border-color: var(--ok); }
.adm__o--on { color: var(--brand-700); font-weight: var(--fw-700); }
.adm__o--on span { color: #FFFFFF; background: var(--brand); border-color: var(--brand); }

/* Koltuk yeri uyarisi — plan altinda, atlanmamasi gereken bilgi */
.klt__uyari { display: flex; align-items: flex-start; gap: var(--s2);
              padding: var(--s3) var(--s4);
              font-size: var(--fs-3xs); line-height: 1.6; color: var(--warn);
              background: #FFF8EC; border: 1px solid #F5DFB6; border-radius: var(--r2); }
.klt__uyari svg { flex: none; margin-top: 2px; }
.klt__uyari b { color: #8A5A00; }

/* Renk anahtarinda "Seçiminiz" grubu — uc cinsiyet rengi tek etiket altinda */
.klt__anh-s { display: inline-flex; align-items: center; gap: 5px;
              padding-left: var(--s3); border-left: 1px solid var(--line); }
.klt__anh-s .ks { margin-left: var(--s2); }
.klt__anh-s .ks:first-of-type { margin-left: 4px; }

/* -- Otomatik yolcu turu bildirimi (.klt__oto) --
   Ikisi de ayni kutu bicimini kullanir ama tonlari farklidir:
     kalici aciklama  notr mavi-gri — "boyle calisiyor"
     canli satir      yesil        — "az once oldu, sorun yok"
   Uyari (.klt__uyari) sari kalir; bu ikisi uyari degil bilgilendirmedir,
   ayni renge boyanirsa gercek uyari siliklesir. */
/* Punto olceginin altinda: bu iki satir bilgilendirme, sayfanin ana
   metni degil. 11 px'de okunur kalirken plani ve fiyati golgelemiyor. */
.klt__oto { display: flex; align-items: flex-start; gap: 7px;
            padding: var(--s2) var(--s3);
            font-size: 11px; line-height: 1.55; color: var(--tx-mute);
            background: var(--mist); border: 1px solid var(--line);
            border-radius: var(--r2); }
.klt__oto svg { flex: none; margin-top: 1px; color: var(--tx-faint); }
.klt__oto b { font-weight: var(--fw-800); color: var(--tx); }

.klt__oto--canli { color: #12654A; background: var(--ok-bg); border-color: #BFE6D4;
                   animation: klt-oto .28s var(--e); }
.klt__oto--canli svg { color: var(--ok); }

@keyframes klt-oto {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .klt__oto--canli { animation: none; }
}