/* ==========================================================================
   UYELIK EKRANLARI (.uy) — giris yap / uye ol
   --------------------------------------------------------------------------
   Iki kolon: solda koyu marka paneli, sagda beyaz form karti. Panel yalnizca
   sus degil — "neden uye olayim" sorusunu yanitlar; formun yaninda durdugu
   icin kullanici karar verirken sayfa degistirmez.
   ========================================================================== */
.uy { padding-block: var(--s8) var(--s9); background: var(--mist); }

.uy__kap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
           gap: var(--s7); align-items: stretch;
           max-width: 1060px; }


/* ==========================================================================
   1. MARKA PANELI
   ========================================================================== */
.uy__pnl { position: relative; display: flex; flex-direction: column;
           gap: var(--s5); padding: var(--s8) var(--s7);
           color: var(--tx-inv-mute); background: var(--g-koyu);
           border-radius: var(--r4); overflow: hidden; }

/* Kose isigi — duz koyu blok yerine derinlik */
.uy__pnl::before { content: ''; position: absolute; right: -90px; top: -90px;
                   width: 260px; height: 260px; border-radius: var(--rp);
                   background: radial-gradient(circle, rgba(244,125,24,.30), transparent 70%); }

.uy__lg { position: relative; align-self: flex-start; }
.uy__lg img { height: 44px; width: auto; filter: brightness(0) invert(1); }

.uy__pb { position: relative; font-size: var(--fs-h2); font-weight: var(--fw-800);
          line-height: 1.2; color: var(--white); }
.uy__pa { position: relative; font-size: var(--fs-2xs); line-height: 1.75; }

.uy__ls { position: relative; list-style: none;
          display: flex; flex-direction: column; gap: var(--s3); }
.uy__ls li { display: flex; align-items: flex-start; gap: var(--s3);
             font-size: var(--fs-2xs); line-height: 1.55; }
.uy__ls svg { flex: none; margin-top: 1px; color: var(--brand); }

.uy__dst { position: relative; display: flex; align-items: center; gap: var(--s3);
           margin-top: auto; padding-top: var(--s5);
           border-top: 1px solid rgba(255,255,255,.14); }
.uy__dst > svg { flex: none; color: var(--brand-200); }
.uy__dst span { display: block; font-size: 10px; color: rgba(255,255,255,.55); }
.uy__dst a { font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--white); }
.uy__dst a:hover { color: var(--brand-200); }


/* ==========================================================================
   2. FORM KARTI
   ========================================================================== */
.uy__kart { padding: var(--s7); background: var(--white);
            border: 1px solid var(--line); border-radius: var(--r4);
            box-shadow: var(--sh2); }

.uy__b { font-size: var(--fs-h3); font-weight: var(--fw-800);
         letter-spacing: var(--ls-tt); color: var(--tx); }
.uy__a { margin-top: 5px; font-size: var(--fs-3xs); color: var(--tx-mute); }

/* -- Sosyal baglanti -- */
.uy__sos { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); }
.uy__sb { display: inline-flex; align-items: center; justify-content: center;
          gap: var(--s3); min-height: 46px; padding: 0 var(--s5);
          font-family: var(--font); font-size: var(--fs-3xs); font-weight: var(--fw-700);
          color: var(--white); border-radius: var(--r2);
          transition: filter var(--t1), transform var(--t1); }
.uy__sb:hover { filter: brightness(1.08); transform: translateY(-1px); }
.uy__sb--fb { background: #1877F2; }
.uy__sb--gg { background: #DB4437; }

/* -- Ayirac -- */
.uy__ayr { position: relative; margin: var(--s6) 0; text-align: center; }
.uy__ayr::before { content: ''; position: absolute; left: 0; right: 0; top: 50%;
                   height: 1px; background: var(--line); }
.uy__ayr span { position: relative; padding: 0 var(--s4);
                font-size: 10px; font-weight: var(--fw-700); letter-spacing: var(--ls-cap);
                text-transform: uppercase; color: var(--tx-faint); background: var(--white); }

/* -- Form -- */
.uy__frm { display: flex; flex-direction: column; gap: var(--s4); }
.uy__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 460px) { .uy__grid { grid-template-columns: minmax(0,1fr); } }

/* Alan olculeri site standardindan gelir (app.css) */

/* Sifre alani + goz dugmesi */
.uy__sif { position: relative; display: flex; align-items: center; }
.uy__sif .alan__g { padding-right: 46px; }
.uy__goz { position: absolute; right: var(--s3);
           display: inline-flex; align-items: center; justify-content: center;
           width: 32px; height: 32px; color: var(--tx-faint);
           border-radius: var(--r1); transition: all var(--t1); }
.uy__goz:hover { color: var(--brand); background: var(--mist); }
.uy__goz.on { color: var(--brand); }

/* Sifre gucu */
.uy__guc { display: flex; align-items: center; gap: var(--s3); margin-top: 6px; }
.uy__guc-c { flex: 1; height: 4px; background: var(--line);
             border-radius: var(--rp); overflow: hidden; }
.uy__guc-c i { display: block; width: 0; height: 100%;
               background: var(--no); border-radius: var(--rp);
               transition: width var(--t2), background var(--t2); }
.uy__guc span { flex: none; font-size: 10px; font-weight: var(--fw-700); color: var(--tx-mute); }

.uy__guc[data-guc="2"] .uy__guc-c i { background: var(--warn); }
.uy__guc[data-guc="3"] .uy__guc-c i,
.uy__guc[data-guc="4"] .uy__guc-c i { background: var(--ok); }
.uy__guc[data-guc="3"] span,
.uy__guc[data-guc="4"] span { color: var(--ok); }

/* Hatirla + sifremi unuttum satiri */
.uy__sat { display: flex; align-items: center; justify-content: space-between;
           gap: var(--s3); flex-wrap: wrap; }
.uy__sat .onk { margin-inline: 0; padding-inline: 0; }
.uy__lnk { font-size: var(--fs-3xs); font-weight: var(--fw-700); color: var(--brand-700);
           text-decoration: underline; text-underline-offset: 3px;
           transition: color var(--t1); }
.uy__lnk:hover { color: var(--brand); }

.uy__onay { margin-top: var(--s2); }

.uy__ikili { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s3); }

/* Sifremi unuttum kutusu */
.uy__unut-b { display: flex; align-items: flex-start; gap: var(--s3);
              padding: var(--s4); font-size: var(--fs-3xs); line-height: 1.6;
              color: var(--tx-soft); background: var(--brand-50);
              border: 1px solid var(--brand-200); border-radius: var(--r2); }
.uy__unut-b svg { flex: none; margin-top: 2px; color: var(--brand); }

/* Uyari */
.uy__uyari { display: flex; align-items: flex-start; gap: var(--s3);
             padding: var(--s4); font-size: var(--fs-3xs); line-height: 1.55;
             font-weight: var(--fw-600); color: var(--no);
             background: #FCEDEC; border: 1px solid #F6C9C5; border-radius: var(--r2); }
.uy__uyari svg { flex: none; margin-top: 1px; }

/* Kart dibi */
.uy__dip { margin-top: var(--s5); padding-top: var(--s4);
           font-size: var(--fs-3xs); color: var(--tx-mute); text-align: center;
           border-top: 1px solid var(--line-soft); }
.uy__dip a { font-weight: var(--fw-800); color: var(--brand-700);
             text-decoration: underline; text-underline-offset: 3px; }
.uy__dip a:hover { color: var(--brand); }


/* ==========================================================================
   3. DAR EKRAN
   --------------------------------------------------------------------------
   Panel formun ARKASINA gecmez, ALTINA duser: telefonda once is yapilir,
   sonra "neden uye olayim" okunur.
   ========================================================================== */
@media (max-width: 900px) {
  .uy { padding-block: var(--s6) var(--s7); }
  .uy__kap { grid-template-columns: minmax(0,1fr); gap: var(--s5); }
  .uy__pnl { grid-row: 2; padding: var(--s6) var(--s5); }
  .uy__pb { font-size: var(--fs-h3); }
  .uy__kart { padding: var(--s5); }
}


/* ==========================================================================
   4. UYE ALANI (.uya) — giris sonrasi sayfalar
   --------------------------------------------------------------------------
   Solda uye menusu, sagda icerik. Kurumsal bolumle ayni iskelet; ayri sinif
   onekiyle cunku menunun basinda hesap kimligi, icerikte ise rezervasyon
   kartlari gibi kendine ozgu parcalar var.
   ========================================================================== */
.uya { display: grid; grid-template-columns: 256px minmax(0, 1fr);
       gap: var(--s5); align-items: start; }

.uya__yan { display: flex; flex-direction: column; gap: var(--s4);
            position: sticky; top: calc(var(--hd-h-s) + var(--s4)); }
.uya__ana { min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }


/* -- Hesap kimligi -- */
.uya__kim { display: flex; align-items: center; gap: var(--s3);
            padding: var(--s4); background: var(--g-koyu);
            border-radius: var(--r3); }
.uya__av { flex: none; display: inline-flex; align-items: center; justify-content: center;
           width: 42px; height: 42px;
           font-size: var(--fs-3xs); font-weight: var(--fw-800); letter-spacing: .02em;
           color: var(--koyu); background: var(--brand); border-radius: var(--rp); }
.uya__kim-i { min-width: 0; }
.uya__kim-i b { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-800);
                color: var(--white); overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.uya__kim-i i { display: block; margin-top: 1px; font-size: 10px; font-style: normal;
                color: rgba(255,255,255,.62); overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }

/* -- Menu -- */
.uya__mn { background: var(--white); border: 1px solid var(--line);
           border-radius: var(--r3); box-shadow: var(--sh1); overflow: hidden; }
.uya__mn ul { list-style: none; padding: var(--s2); }
.uya__mn a { display: flex; align-items: center; gap: var(--s3);
             padding: 10px var(--s3);
             font-size: var(--fs-3xs); font-weight: var(--fw-600); line-height: 1.4;
             color: var(--tx-soft); border-radius: var(--r2);
             border-left: 2px solid transparent; transition: all var(--t1); }
.uya__mn a svg { color: var(--tx-faint); transition: color var(--t1); }
.uya__mn a:hover { color: var(--brand-700); background: var(--mist); }
.uya__mn a:hover svg { color: var(--brand); }
.uya__mn a.on { font-weight: var(--fw-800); color: var(--brand-700);
                background: var(--brand-50); border-left-color: var(--brand); }
.uya__mn a.on svg { color: var(--brand); }
.uya__mn-ayrik { margin-top: var(--s2); padding-top: var(--s2);
                 border-top: 1px solid var(--line-soft); }
.uya__mn-ayrik a { color: var(--no); }
.uya__mn-ayrik a:hover { color: var(--no); background: #FCEDEC; }
.uya__mn-ayrik a:hover svg { color: var(--no); }

.uya__dst { padding: var(--s4); background: var(--mist);
            border: 1px solid var(--line); border-radius: var(--r3); }
.uya__dst span { display: flex; align-items: center; gap: var(--s2);
                 font-size: var(--fs-3xs); font-weight: var(--fw-800); color: var(--tx); }
.uya__dst span svg { color: var(--brand); }
.uya__dst p { margin: 6px 0 var(--s3); font-size: 10px; line-height: 1.6; color: var(--tx-mute); }
.uya__dst .bt + .bt { margin-top: var(--s2); }


/* ==========================================================================
   5. ICERIK PARCALARI
   ========================================================================== */
.uya__uyari { display: flex; align-items: flex-start; gap: var(--s3);
              padding: var(--s4) var(--s5);
              background: #FFF6EC; border: 1px solid var(--brand-200);
              border-radius: var(--r3); }
.uya__uyari svg { flex: none; margin-top: 2px; color: var(--brand); }
.uya__uyari b { font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--tx); }
.uya__uyari p { margin-top: 3px; font-size: var(--fs-3xs); line-height: 1.65; color: var(--tx-soft); }

/* -- Hesap ozeti kartlari -- */
.uya__ozt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
            gap: var(--s3); }
.uya__oz { display: flex; flex-direction: column; gap: 2px;
           padding: var(--s4); background: var(--white);
           border: 1px solid var(--line); border-radius: var(--r3);
           transition: all var(--t1); }
a.uya__oz:hover { border-color: var(--brand-200); box-shadow: var(--sh1);
                  transform: translateY(-2px); }
.uya__oz-i { display: inline-flex; align-items: center; justify-content: center;
             width: 34px; height: 34px; margin-bottom: var(--s2);
             color: var(--brand); background: var(--brand-50); border-radius: var(--r2); }
.uya__oz b { font-size: var(--fs-h4); font-weight: var(--fw-800); line-height: 1; color: var(--tx);
             font-variant-numeric: tabular-nums; }
.uya__oz > span:not(.uya__oz-i) { font-size: 10px; line-height: 1.4; color: var(--tx-mute); }

/* -- Kart ve baslik -- */
.uya__krt { padding: var(--s6); background: var(--white);
            border: 1px solid var(--line); border-radius: var(--r3); }
.uya__krt--dar { max-width: 560px; }

.uya__krt-b { margin-bottom: var(--s4); }
.uya__krt-b--ic { margin-top: var(--s6); padding-top: var(--s5);
                  border-top: 1px solid var(--line-soft); }
.uya__krt-b--yalin { margin-bottom: 0; }
.uya__krt-b h2 { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
                 font-size: var(--fs-s); font-weight: var(--fw-800);
                 letter-spacing: var(--ls-tt); color: var(--tx); }
.uya__krt-b h2 svg { color: var(--brand); }
.uya__krt-b h2 em { padding: 2px var(--s2); font-size: 10px; font-style: normal;
                    font-weight: var(--fw-700); color: var(--brand-700);
                    background: var(--brand-50); border-radius: var(--rp); }
.uya__krt-b p { margin-top: 4px; font-size: var(--fs-3xs); line-height: 1.65; color: var(--tx-mute); }

.uya__frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.uya__frm--tek { grid-template-columns: minmax(0, 1fr); }
.uya__frm .alan--tam { grid-column: 1 / -1; }

.uya__ter { display: flex; flex-direction: column; gap: var(--s2); }
.uya__ter .onk { margin-inline: 0; }

.uya__eyl { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
            margin-top: var(--s5); padding-top: var(--s4);
            border-top: 1px solid var(--line-soft); }
.uya__nt { display: inline-flex; align-items: center; gap: 5px;
           font-size: 10px; color: var(--tx-mute); }
.uya__nt svg { color: #1C6340; }
.uya__nt a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }

.uya__tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
           grid-auto-rows: 1fr; gap: var(--s4); }

.uya__yok { display: flex; flex-direction: column; align-items: center; gap: var(--s2);
            padding: var(--s8) var(--s5); text-align: center;
            background: var(--white); border: 1px dashed var(--line);
            border-radius: var(--r3); }
.uya__yok-i { display: inline-flex; align-items: center; justify-content: center;
              width: 52px; height: 52px; margin-bottom: var(--s2);
              color: var(--brand); background: var(--brand-50); border-radius: var(--rp); }
.uya__yok h2 { font-size: var(--fs-s); font-weight: var(--fw-800); color: var(--tx); }
.uya__yok p { max-width: 46ch; font-size: var(--fs-3xs); line-height: 1.65; color: var(--tx-mute); }
.uya__yok .bt { margin-top: var(--s3); }


/* -- Sekmeler -- */
.uya__skm { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
            padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.uya__sb { display: inline-flex; align-items: center; gap: 6px;
           padding: 8px var(--s4); font-family: var(--font);
           font-size: var(--fs-3xs); font-weight: var(--fw-700);
           color: var(--tx-mute); background: var(--mist);
           border: 1px solid transparent; border-radius: var(--rp);
           transition: all var(--t1); }
.uya__sb svg { opacity: .6; }
.uya__sb:hover { color: var(--tx); background: var(--mist-2); }
.uya__sb.on { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }
.uya__sb.on svg { opacity: 1; color: var(--brand); }
.uya__sb em { padding: 1px 6px; font-size: 9px; font-style: normal; font-weight: var(--fw-800);
              color: var(--tx-faint); background: var(--white); border-radius: var(--rp); }
.uya__sb.on em { color: var(--brand); }

.js .uya__p { display: none; }
.js .uya__p.on { display: block; }


/* ==========================================================================
   6. REZERVASYON KARTI (.rzk)
   ========================================================================== */
.rzk__ls { display: flex; flex-direction: column; gap: var(--s3); }

.rzk { overflow: hidden; background: var(--white);
       border: 1px solid var(--line); border-radius: var(--r3);
       transition: border-color var(--t1), box-shadow var(--t1); }
.rzk:hover { box-shadow: var(--sh1); }

/* Sol kenarda durum rengi — listeyi goz hizlica tarasin */
.rzk__bas { position: relative; display: flex; align-items: center;
            justify-content: space-between; gap: var(--s4); width: 100%;
            padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 4px);
            text-align: left; font-family: var(--font);
            transition: background var(--t1); }
.rzk__bas::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
                    background: var(--line); }
.rzk--ok    .rzk__bas::before { background: #2FA36B; }
.rzk--bekle .rzk__bas::before { background: var(--brand); }
.rzk--bitti .rzk__bas::before { background: var(--tx-faint); }
.rzk--iptal .rzk__bas::before { background: var(--no); }
.rzk__bas:hover { background: var(--mist); }

.rzk__bas-i { min-width: 0; }
.rzk__ad { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-800);
           line-height: 1.35; color: var(--tx); }
.rzk__mt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
           margin-top: 5px; font-size: 10px; color: var(--tx-mute); }
.rzk__mt > span { display: inline-flex; align-items: center; gap: 4px; }
.rzk__mt svg { color: var(--tx-faint); }

.rzk__drm { padding: 2px var(--s2); font-size: 9px; font-style: normal;
            font-weight: var(--fw-800); letter-spacing: var(--ls-cap);
            text-transform: uppercase; border-radius: var(--rp); }
.rzk__drm--ok    { color: #1C6340; background: #DEF3E7; }
.rzk__drm--bekle { color: var(--brand-700); background: var(--brand-50); }
.rzk__drm--bitti { color: var(--tx-mute); background: var(--mist-2); }
.rzk__drm--iptal { color: var(--no); background: #FCEDEC; }

.rzk__bas-s { flex: none; display: flex; align-items: center; gap: var(--s3);
              text-align: right; }
.rzk__bas-s b { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-800);
                font-variant-numeric: tabular-nums; }
.rzk__kalan  { color: var(--brand); }
.rzk__odendi { color: var(--tx-soft); }
.rzk__bas-s i { display: block; font-size: 9px; font-style: normal; color: var(--tx-faint); }
.rzk__ok { color: var(--tx-mute); transition: transform var(--t2); }
.rzk__bas[aria-expanded="true"] .rzk__ok { transform: rotate(180deg); }

.rzk__gov { padding: var(--s5); border-top: 1px solid var(--line-soft);
            background: var(--mist); }

.rzk__ist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
            gap: 1px; overflow: hidden; margin-bottom: var(--s4);
            background: var(--line); border: 1px solid var(--line);
            border-radius: var(--r2); }
.rzk__is { padding: var(--s3) var(--s4); background: var(--white); }
.rzk__is span { display: block; font-size: 9px; letter-spacing: var(--ls-cap);
                text-transform: uppercase; color: var(--tx-faint); }
.rzk__is b { display: block; margin-top: 2px; font-size: var(--fs-3xs);
             font-weight: var(--fw-700); line-height: 1.4; color: var(--tx); }

.rzk__ucr { display: flex; flex-wrap: wrap; gap: var(--s5);
            padding: var(--s4) var(--s5); margin-bottom: var(--s4);
            background: var(--white); border: 1px solid var(--line);
            border-radius: var(--r2); }
.rzk__u span { display: block; font-size: 9px; letter-spacing: var(--ls-cap);
               text-transform: uppercase; color: var(--tx-faint); }
.rzk__u b { display: block; margin-top: 2px; font-size: var(--fs-2xs);
            font-weight: var(--fw-800); color: var(--tx);
            font-variant-numeric: tabular-nums; }
.rzk__u--kalan { margin-left: auto; text-align: right; }
.rzk__u--kalan b { color: var(--brand); }

.rzk__blk-b { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
              font-size: 10px; font-weight: var(--fw-800); letter-spacing: var(--ls-cap);
              text-transform: uppercase; color: var(--tx-faint); }
.rzk__blk-b svg { color: var(--brand); }

.rzk__mis { margin-bottom: var(--s4); }
.rzk__tbl { width: 100%; border-collapse: collapse;
            background: var(--white); border: 1px solid var(--line);
            border-radius: var(--r2); overflow: hidden; }
.rzk__tbl th, .rzk__tbl td { padding: var(--s2) var(--s3); font-size: var(--fs-3xs);
                             text-align: left; border-bottom: 1px solid var(--line-soft); }
.rzk__tbl th { font-size: 9px; font-weight: var(--fw-800); letter-spacing: var(--ls-cap);
               text-transform: uppercase; color: var(--tx-faint); background: var(--mist); }
.rzk__tbl tr:last-child td { border-bottom: 0; }
.rzk__tbl td:first-child { width: 34px; color: var(--tx-faint); }

.rzk__eyl { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rzk__ipt { display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
            font-size: 10px; font-weight: var(--fw-600); color: var(--tx-mute);
            transition: color var(--t1); }
.rzk__ipt:hover { color: #128C7E; }


/* ==========================================================================
   7. KART ICI ODEME BLOGU (.uodm)
   --------------------------------------------------------------------------
   Gorunum tur rezervasyon sayfasindaki odeme bolumunun aynisi (css/odeme.css);
   burada yalnizca kart icine oturmasi icin gereken cerceve tanimlanir.
   ========================================================================== */
.uodm { margin-top: var(--s4); padding: var(--s5);
        background: var(--white); border: 2px solid var(--brand-200);
        border-radius: var(--r3); box-shadow: var(--sh2);
        animation: uodm-ac .22s var(--e); }
@keyframes uodm-ac { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .uodm { animation: none; } }

.uodm__bas { display: flex; align-items: center; justify-content: space-between;
             gap: var(--s3); padding-bottom: var(--s3); margin-bottom: var(--s4);
             border-bottom: 1px solid var(--line-soft); }
.uodm__bas > span { display: inline-flex; align-items: center; gap: var(--s2);
                    font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--tx); }
.uodm__bas svg { color: var(--brand); }
.uodm__kapa { display: inline-flex; align-items: center; justify-content: center;
              width: 30px; height: 30px; color: var(--tx-mute);
              background: var(--mist); border-radius: var(--rp);
              transition: all var(--t1); }
.uodm__kapa:hover { color: var(--white); background: var(--no); }


/* ==========================================================================
   8. YORUMLAR
   ========================================================================== */
.ybk__ls { display: flex; flex-direction: column; gap: var(--s2); }
.ybk { display: flex; align-items: center; justify-content: space-between;
       gap: var(--s4); flex-wrap: wrap; padding: var(--s4) var(--s5);
       background: var(--brand-50); border: 1px solid var(--brand-200);
       border-radius: var(--r2); }
.ybk b { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-800); color: var(--tx); }
.ybk span { display: block; margin-top: 2px; font-size: 10px; color: var(--tx-mute); }

.yrm__ls { display: flex; flex-direction: column; gap: var(--s3); }
.yrm { padding: var(--s5); background: var(--white);
       border: 1px solid var(--line); border-radius: var(--r3); }
.yrm__bas { display: flex; align-items: flex-start; justify-content: space-between;
            gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.yrm__tur { font-size: var(--fs-3xs); font-weight: var(--fw-800); color: var(--brand-700); }
a.yrm__tur:hover { text-decoration: underline; text-underline-offset: 3px; }
.yrm__mt { display: flex; align-items: center; gap: var(--s3); margin-top: 4px;
           font-size: 10px; color: var(--tx-mute); }
.yrm__mt svg { color: var(--tx-faint); }
.yrm__drm { padding: 2px var(--s2); font-size: 9px; font-style: normal;
            font-weight: var(--fw-800); letter-spacing: var(--ls-cap);
            text-transform: uppercase; border-radius: var(--rp); }
.yrm__drm--ok    { color: #1C6340; background: #DEF3E7; }
.yrm__drm--bekle { color: var(--brand-700); background: var(--brand-50); }
.yrm__pn { display: flex; gap: 2px; color: var(--brand); }
.yrm__b { font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--tx); }
.yrm__m { margin-top: 5px; font-size: var(--fs-3xs); line-height: 1.75; color: var(--tx-soft); }


/* ==========================================================================
   9. DAR EKRAN
   ========================================================================== */
@media (max-width: 940px) {
  .uya { grid-template-columns: minmax(0, 1fr); }
  .uya__yan { position: static; }
  .uya__mn-ayrik { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 620px) {
  .uya__krt { padding: var(--s4); }
  .uya__frm { grid-template-columns: minmax(0, 1fr); }
  .uodm { padding: var(--s3); }
  .rzk__bas { padding-inline: var(--s4); }
  .rzk__gov { padding: var(--s4); }
  .rzk__ucr { gap: var(--s4); }
  .rzk__u--kalan { margin-left: 0; text-align: left; }
  .rzk__ipt { margin-left: 0; }
  .rzk__tbl { display: block; overflow-x: auto; }
}

/* Odeme blogu uyarisi — rezervasyon.css bu sayfada yuklenmiyor, kendi kurali */
.uodm__uyari { display: flex; align-items: flex-start; gap: var(--s2);
               padding: var(--s3) var(--s4); margin-bottom: var(--s3);
               font-size: var(--fs-3xs); line-height: 1.6; color: var(--no);
               background: #FCEDEC; border: 1px solid #F6C9C4;
               border-radius: var(--r2); }
.uodm__uyari svg { flex: none; margin-top: 1px; }


/* ==========================================================================
   10. YORUM YAZMA (.yzr) — iki adim
   --------------------------------------------------------------------------
   Once tur secilir, sonra degerlendirme alanlari acilir. Ikinci adim secim
   yapilana kadar KILITLI durur; kullanici hangi tura yazdigini bilmeden
   puan vermeye baslamasin.
   ========================================================================== */
.yzr__adim { display: grid; grid-template-columns: 34px minmax(0, 1fr);
             gap: var(--s4); }
.yzr__adim + .yzr__adim { margin-top: var(--s5); padding-top: var(--s5);
                          border-top: 1px solid var(--line-soft); }

.yzr__no { display: inline-flex; align-items: center; justify-content: center;
           width: 30px; height: 30px;
           font-size: var(--fs-3xs); font-weight: var(--fw-800);
           color: var(--white); background: var(--brand); border-radius: var(--rp); }
.yzr__adim--kilit .yzr__no { color: var(--tx-mute); background: var(--line); }
.yzr__adim--acik .yzr__no { color: var(--white); background: var(--brand); }

.yzr__ic { min-width: 0; }
.yzr__b { display: block; margin-bottom: var(--s3);
          font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--tx); }

.yzr__kilit-n { display: flex; align-items: center; gap: var(--s2);
                padding: var(--s3) var(--s4);
                font-size: var(--fs-3xs); color: var(--tx-mute);
                background: var(--mist); border: 1px dashed var(--line);
                border-radius: var(--r2); }
.yzr__kilit-n svg { color: var(--brand); }

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


/* -- Tur secimi -- */
.yzr__sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
            gap: var(--s3); }

.yzr__t { position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr) auto;
          align-items: center; gap: var(--s3);
          padding: var(--s2) var(--s3) var(--s2) var(--s2);
          background: var(--white); border: 1.5px solid var(--line);
          border-radius: var(--r2); cursor: pointer;
          transition: border-color var(--t1), box-shadow var(--t1), background var(--t1); }
.yzr__t:hover { border-color: var(--brand-200); background: var(--mist); }
.yzr__t input { position: absolute; width: 1px; height: 1px; opacity: 0;
                margin: 0; pointer-events: none; }
.yzr__t:has(input:checked) { border-color: var(--brand); background: var(--brand-50);
                             box-shadow: 0 0 0 3px var(--brand-50); }
.yzr__t:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.yzr__t-g { display: block; aspect-ratio: 4 / 3; overflow: hidden;
            background: var(--mist-2); border-radius: var(--r1); }
.yzr__t-g img { width: 100%; height: 100%; object-fit: cover; }

.yzr__t-i { min-width: 0; }
.yzr__t-i b { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-700);
              line-height: 1.35; color: var(--tx); }
.yzr__t-i i { display: block; margin-top: 2px; font-size: 9px; font-style: normal;
              color: var(--tx-faint); }

.yzr__t-o { display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; color: transparent;
            background: var(--white); border: 1.5px solid var(--line);
            border-radius: var(--rp); transition: all var(--t1); }
.yzr__t:has(input:checked) .yzr__t-o { color: var(--white);
                                       background: var(--brand); border-color: var(--brand); }


/* -- Puan yildizlari --
   Yildizlar SAGDAN SOLA dizilir (5→1). Boylece "~ + *" ile secilenin
   solundaki (yani daha dusuk puanli) yildizlar da dolar; ekstra JS gerekmez. */
.yzr__pn { display: flex; flex-direction: row-reverse; align-items: center;
           justify-content: flex-end; gap: 2px; }
.yzr__pn input { position: absolute; width: 1px; height: 1px; opacity: 0;
                 margin: 0; pointer-events: none; }
.yzr__pn label { display: inline-flex; color: var(--line); cursor: pointer;
                 transition: color var(--t1), transform var(--t1); }
.yzr__pn label:hover { transform: scale(1.12); }
.yzr__pn input:checked ~ label,
.yzr__pn label:hover,
.yzr__pn label:hover ~ label { color: var(--brand); }
.yzr__pn input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 3px;
                                       border-radius: var(--r1); }
.yzr__pn em { order: 1; margin-left: var(--s3); font-size: var(--fs-3xs);
              font-style: normal; font-weight: var(--fw-700); color: var(--tx-mute); }

.yzr__say { display: block; margin-top: 4px; font-size: 9px; color: var(--tx-faint);
            text-align: right; }
.yzr__say b { font-weight: var(--fw-700); color: var(--tx-mute); }

.yzr__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(--no);
              background: #FCEDEC; border: 1px solid #F6C9C4; border-radius: var(--r2); }
.yzr__uyari svg { flex: none; margin-top: 1px; }

.yzr__tamam { display: flex; align-items: center; gap: var(--s2);
              padding: var(--s4) var(--s5);
              font-size: var(--fs-3xs); color: #1C6340;
              background: #DEF3E7; border: 1px solid #B9E3CC; border-radius: var(--r3); }

@media (max-width: 620px) {
  .yzr__adim { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .yzr__sec { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   KAYITLI YOLCULARIM (uye_yolcularim.php) — musteri revizesi
   ========================================================================== */
.ylc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.ylc__k { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5);
          background: var(--white); border: 1px solid var(--line); border-radius: var(--r3); }
.ylc__bas { display: flex; align-items: center; gap: var(--s3); }
.ylc__av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
           font-size: 13px; font-weight: var(--fw-800); color: var(--white); background: #3E7BD6; }
.ylc__av--k { background: #D6488E; }
.ylc__ad { display: block; font-size: var(--fs-s); font-weight: var(--fw-800); color: var(--tx); }
.ylc__alt { display: block; font-size: var(--fs-3xs); color: var(--tx-mute); }
.ylc__ls { display: grid; gap: 6px; margin: 0; padding: var(--s3) 0 0; border-top: 1px dashed var(--line); }
.ylc__ls div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--s2); font-size: var(--fs-3xs); }
.ylc__ls dt { color: var(--tx-mute); }
.ylc__ls dd { margin: 0; font-weight: var(--fw-600); color: var(--tx); overflow-wrap: anywhere; }
.ylc__ls dd small { font-weight: var(--fw-500); color: var(--tx-mute); }
.ylc__alt-f { margin-top: auto; }
.ylc__kaldir { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0;
               font-size: var(--fs-3xs); font-weight: var(--fw-700); color: var(--no); background: none; border: 0; cursor: pointer; }
.ylc__kaldir:hover { text-decoration: underline; text-underline-offset: 3px; }
.ylc__bld { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
            font-size: var(--fs-xs); font-weight: var(--fw-600); color: var(--ok); background: var(--ok-bg); border-radius: var(--r2); }
@media (max-width: 760px) { .ylc { grid-template-columns: minmax(0, 1fr); } }