/* ==========================================================================
   AYDER TURIZM — UYGULAMA KATMANI
   Reset, yerlesim, header, menu, bilesenler (kart/buton/rozet/arama), footer.
   Uc ana sayfa varyanti bu dosyayi paylasir; farklar css/v1-2-3.css icinde.
   ========================================================================== */

/* ==========================================================================
   1. RESET
   ========================================================================== */
*,*::before,*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth;
       scroll-padding-top: calc(var(--hd-h-s) + var(--s5)); }

body {
  /* Fixed headerin yerini tutar; --hd-yer JS ile gercek yukseklikten
     yazilir, JS yoksa token degeri kullanilir. */
  padding-top:var(--hd-yer, var(--hd-h));
  margin:0; font-family:var(--font); font-size:var(--fs-body); font-weight:var(--fw-400);
  line-height:1.55; color:var(--tx-soft); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.kilit { overflow:hidden; }

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd { margin:0; }
ul,ol { margin:0; padding:0; } li { list-style:none; }
img,picture,video,canvas { display:block; max-width:100%; height:auto; }
svg[aria-hidden="true"] { display:inline-block; vertical-align:middle; flex:none; }
svg.sprite { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; margin:0; }
button { background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
address { font-style:normal; }
::selection { background:var(--brand); color:var(--white); }

:focus { outline:none; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r1); }
.koyu :focus-visible, .hero :focus-visible { outline-color:var(--brand-200); }

h1,h2,h3,h4,h5,h6 { font-weight:var(--fw-700); line-height:1.2; letter-spacing:var(--ls-t); color:var(--tx); }
h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);} h4{font-size:var(--fs-h4);}
strong,b { font-weight:var(--fw-700); color:var(--tx); }

.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.atla { position:absolute; top:0; left:50%; transform:translate(-50%,-140%); z-index:var(--z-tp);
        background:var(--brand); color:var(--white); padding:var(--s3) var(--s6);
        border-radius:0 0 var(--r2) var(--r2); font-size:var(--fs-xs); font-weight:var(--fw-600);
        transition:transform var(--t2); }
.atla:focus-visible { transform:translate(-50%,0); }


/* ==========================================================================
   2. YERLESIM
   ========================================================================== */
.kap { width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--gut); }
.kap--w { max-width:var(--w-wide); }

.blk { position:relative; padding-block:var(--blk); }
.blk--s  { padding-block:var(--blk-sm); }
.blk--t0 { padding-top:0; }
.blk--b0 { padding-bottom:0; }
.z-mist { background:var(--bg-alt); }
.z-koyu { background:var(--koyu); color:var(--tx-inv); }
.z-koyu h1,.z-koyu h2,.z-koyu h3 { color:var(--tx-inv); }

.row { display:flex; align-items:center; }
.row--btw { justify-content:space-between; }
.row--ctr { justify-content:center; }
.row--wrap { flex-wrap:wrap; }
.row--top { align-items:flex-start; }
.g2{gap:var(--s2);} .g3{gap:var(--s3);} .g4{gap:var(--s4);} .g6{gap:var(--s6);} .g8{gap:var(--s8);}
.col { display:flex; flex-direction:column; }
.grow { flex:1 1 auto; min-width:0; }
.ctr { text-align:center; }

/* Izgara */
.gr { display:grid; gap:var(--s6); }
.gr2{grid-template-columns:repeat(2,minmax(0,1fr));}
.gr3{grid-template-columns:repeat(3,minmax(0,1fr));}
.gr4{grid-template-columns:repeat(4,minmax(0,1fr));}
.gr5{grid-template-columns:repeat(5,minmax(0,1fr));}
.gr6{grid-template-columns:repeat(6,minmax(0,1fr));}
@media (max-width:1200px){ .gr5,.gr6{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:1024px){ .gr4,.gr5,.gr6{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:860px) { .gr3,.gr4,.gr5,.gr6{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px) { .gr2,.gr3,.gr4,.gr5,.gr6{grid-template-columns:minmax(0,1fr);} .gr{gap:var(--s4);} }

/* Mobilde yatay kaydirma seridine donen izgara */
.kaydir-560 { }
@media (max-width:560px){
  .kaydir-560 { grid-auto-flow:column; grid-auto-columns:84%; grid-template-columns:none;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    padding-bottom:var(--s2); }
  .kaydir-560::-webkit-scrollbar{display:none;}
  .kaydir-560>*{scroll-snap-align:start;}
}

.oran { position:relative; overflow:hidden; background:var(--mist-2); }
.oran>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.oran--1x1{aspect-ratio:1/1;} .oran--4x3{aspect-ratio:4/3;} .oran--3x2{aspect-ratio:3/2;}
.oran--16x9{aspect-ratio:16/9;} .oran--3x4{aspect-ratio:3/4;} .oran--24x5{aspect-ratio:24/5;}

.kes1,.kes2,.kes3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.kes1{-webkit-line-clamp:1;line-clamp:1;} .kes2{-webkit-line-clamp:2;line-clamp:2;} .kes3{-webkit-line-clamp:3;line-clamp:3;}

@media (max-width:1180px){ .d-only{display:none !important;} }
@media (min-width:1181px){ .m-only{display:none !important;} }
@media (max-width:680px) { .s-hide{display:none !important;} }


/* ==========================================================================
   3. ETIKET / ROZET / PUAN / FIYAT
   ========================================================================== */
.etk { font-size:var(--fs-3xs); font-weight:var(--fw-700); letter-spacing:var(--ls-cap);
       text-transform:uppercase; color:var(--tx-mute); }

.rz { display:inline-flex; align-items:center; gap:var(--s1); padding:5px var(--s3);
      font-size:var(--fs-3xs); font-weight:var(--fw-700); letter-spacing:.03em;
      line-height:1.35; border-radius:var(--r1); white-space:nowrap; }
.rz--b  { background:var(--brand); color:var(--white); }
.rz--bs { background:var(--brand-50); color:var(--brand-700); }
.rz--n  { background:var(--koyu); color:var(--white); }
.rz--ok { background:var(--ok-bg); color:var(--ok); }
.rz--no { background:var(--no-bg); color:var(--no); }
.rz--w  { background:var(--warn-bg); color:var(--warn); }
.rz--cam{ background:rgba(16,30,54,.55); color:var(--white); border:1px solid rgba(255,255,255,.2);
          backdrop-filter:blur(8px); }

.yild { display:inline-flex; gap:2px; color:var(--star); line-height:1; }
.yild svg{width:13px;height:13px;} .yild .bos{color:var(--line);}
.puan-kutu { display:inline-flex; align-items:center; padding:3px var(--s2);
             font-size:var(--fs-3xs); font-weight:var(--fw-700);
             color:var(--white); background:var(--koyu); border-radius:var(--r1); }

.fiy { display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.fiy__on { font-size:var(--fs-3xs); color:var(--tx-mute); }
.fiy__esk { font-size:var(--fs-2xs); color:var(--tx-faint); text-decoration:line-through; }
.fiy__tut { display:inline-flex; align-items:baseline; gap:3px;
            font-size:var(--fs-h3); font-weight:var(--fw-800);
            letter-spacing:var(--ls-tt); color:var(--brand); }
.fiy__br  { font-size:var(--fs-2xs); font-weight:var(--fw-700); color:var(--brand); }
.fiy--sag { align-items:flex-end; text-align:right; }
.fiy--sor { font-size:var(--fs-2xs); font-weight:var(--fw-600); color:var(--tx-mute); line-height:1.3; }
/* Fiyati olmayan turda tutar satirinin yerini alir — ayni yukseklikte */
.fiy__sor { font-size:var(--fs-h4); font-weight:var(--fw-700); line-height:1.15;
            color:var(--tx-mute); }


/* ==========================================================================
   4. BUTONLAR
   ========================================================================== */
.bt { --h:48px; position:relative; display:inline-flex; align-items:center; justify-content:center;
      gap:var(--s2); min-height:var(--h); padding:0 var(--s6);
      font-size:var(--fs-xs); font-weight:var(--fw-700); letter-spacing:.02em; line-height:1;
      white-space:nowrap; border:1px solid transparent; border-radius:var(--r2);
      cursor:pointer; transition:background var(--t2),color var(--t2),border-color var(--t2),
      box-shadow var(--t2),transform var(--t1); }
.bt:active{transform:translateY(1px);}
.bt:disabled,.bt[aria-disabled="true"]{opacity:.5;pointer-events:none;}

.bt--b { background:var(--brand); color:var(--white); box-shadow:var(--sh-b); }
.bt--b:hover{background:var(--brand-600); transform:translateY(-2px);}
.bt--bg{ background:var(--g-brand); color:var(--white); box-shadow:var(--sh-b); }
.bt--bg:hover{transform:translateY(-2px);}
.bt--n { background:var(--koyu); color:var(--white); }
.bt--n:hover{background:var(--koyu-700); transform:translateY(-2px);}
.bt--o { background:transparent; color:var(--tx); border-color:var(--line); }
.bt--o:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-50);}
.bt--w { background:var(--white); color:var(--koyu); }
.bt--w:hover{background:var(--mist-2); transform:translateY(-2px);}
.bt--i { background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.bt--i:hover{background:rgba(255,255,255,.12); border-color:var(--white);}
.bt--wa{ background:#25D366; color:var(--white); }
.bt--wa:hover{background:#1EB558; transform:translateY(-2px);}

.bt--s{--h:38px; padding-inline:var(--s4); font-size:var(--fs-3xs);}
.bt--l{--h:56px; padding-inline:var(--s8); font-size:var(--fs-s);}
.bt--tam{width:100%;} .bt--p{border-radius:var(--rp);}

.lnk { display:inline-flex; align-items:center; gap:var(--s2);
       font-size:var(--fs-xs); font-weight:var(--fw-700); color:var(--brand); }
.lnk svg{transition:transform var(--t2);}
.lnk:hover svg{transform:translateX(4px);}
.lnk--i{color:var(--tx-inv);}


/* ==========================================================================
   5. BOLUM BASLIGI
   ========================================================================== */
.bb { display:flex; align-items:flex-end; justify-content:space-between;
      gap:var(--s7); margin-bottom:var(--s7); }
.bb__etk { display:inline-flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2);
           font-size:var(--fs-3xs); font-weight:var(--fw-700); letter-spacing:var(--ls-cap);
           text-transform:uppercase; color:var(--brand); }
.bb__etk::before{content:"";width:18px;height:2px;background:var(--brand);border-radius:var(--rp);}
.bb__alt { margin-top:var(--s2); color:var(--tx-mute); font-size:var(--fs-s); max-width:62ch; }
.bb__yan { flex:none; display:flex; align-items:center; gap:var(--s3); }
.bb--ctr { flex-direction:column; align-items:center; text-align:center; }
.bb--ctr .bb__etk::before{display:none;}
@media (max-width:768px){ .bb{flex-direction:column;align-items:flex-start;gap:var(--s4);} }


/* ==========================================================================
   6. TUR KARTI
   ========================================================================== */
/* Hover gecisi bilerek uzun ve yumusak tutuldu; gorsel "kut diye" degil,
   sakin bir sekilde yaklasir. Kartin kendisi daha kisa bir egriyle yukselir. */
/* width:100% ZORUNLU — .kt__izgara bir flex kapsayici oldugu icin, genislik
   verilmezse kart bir flex ogesi olarak ICERIGI KADAR genisler. Metni kisa
   olan kart daralir, kolonlar arasi bosluklar esitsizlesir ve gorsel
   boyutlari tutmaz. Ekran goruntusundeki esitsiz bosluklarin sebebi buydu. */
.kart { position:relative; width:100%; height:100%; display:flex; flex-direction:column; background:var(--white);
        border-radius:var(--r3); box-shadow:var(--sh1),var(--ring); overflow:hidden;
        transition:transform .45s var(--e), box-shadow .45s var(--e); }
.kart:hover{transform:translateY(-4px); box-shadow:var(--sh3);}

/* Gorsel ve uzerindeki rozetlerin ORTAK konumlandirma baglami.
   Bu sarmalayici olmadan rozetler .kart'a gore konumlanir ve kartin
   en altina duserek fiyatin uzerini orter. */
.kart__medya { position:relative; }
/* Kart gorseli SABIT YUKSEKLIKTE — aspect-ratio kolon genisligine bagli
   oldugu icin kolonlar arasindaki en kucuk fark bile gorsel yuksekligini
   degistiriyor ve altindaki butun satirlari kaydiriyordu. Sabit piksel +
   object-fit:cover ile her kartta birebir ayni gorsel kutusu olusur.
   GECIS TANIMI: transform ve filter BIRLIKTE yazilir. Aksi halde iskelet
   kuralindaki `transition:filter` kisayolu bu satiri ezip hover gecisini
   iptal ediyor, gorsel "kut diye" buyuyordu. */
.kart__medya { flex:none; }
.kart__gor { position:relative; display:block; height:206px; overflow:hidden;
             background:var(--mist-2); }
.kart__gor img { position:absolute; inset:0; width:100%; height:100%;
                 object-fit:cover; object-position:center;
                 transform:scale(1.001);   /* alt piksel titremesini onler */
                 transition:transform 1.15s cubic-bezier(.16,.68,.32,1),
                            filter .35s var(--e); }
.kart:hover .kart__gor img{ transform:scale(1.07); }
@media (max-width:1280px){ .kart__gor{height:196px;} }
@media (max-width:560px) { .kart__gor{height:210px;} }
.kart__perde { position:absolute; inset:0; background:var(--veil-card); pointer-events:none; }

.kart__rz { position:absolute; top:var(--s3); left:var(--s3); right:var(--s3); z-index:var(--z-2);
            display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2);
            pointer-events:none; }
.kart__rz>*{pointer-events:auto;}
.kart__rz-sol{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2);}

.fav { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
       color:var(--white); background:rgba(16,30,54,.45); border:1px solid rgba(255,255,255,.22);
       border-radius:var(--rp); backdrop-filter:blur(8px);
       transition:background var(--t1),color var(--t1),transform var(--t1); }
.fav:hover{background:var(--white); color:var(--brand); transform:scale(1.08);}
.fav.on{background:var(--brand); border-color:var(--brand); color:var(--white);}

/* Gorselin altinda tek rozet kaldigi icin serit kaldirildi; kontenjan
   rozeti liste satirindaki gibi dogrudan .kart__medya'ya gore konumlanir. */
.kart__medya > .acil { z-index:var(--z-2); }

.kart__gov { display:flex; flex-direction:column; flex:1; gap:var(--s3); padding:var(--s4); }
/* Sure ve ulasim — liste satirindaki meta satiriyla ayni dil */
.kart__meta { display:flex; align-items:center; gap:var(--s4); height:15px;
              font-size:var(--fs-3xs); font-weight:var(--fw-600); color:var(--tx-mute); }
.kart__meta span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.kart__meta svg { color:var(--brand); }
.kart__yer { display:inline-flex; align-items:center; gap:var(--s2);
             font-size:var(--fs-3xs); font-weight:var(--fw-600); letter-spacing:.04em;
             text-transform:uppercase; color:var(--tx-mute); }
.kart__yer svg{color:var(--brand);}
/* Her blok KESIN yukseklikte: baslik tam iki satir, alt satir tam bir satir.
   min-height degil height kullanilir; boylece hicbir kart otekinden uzun
   olamaz ve fiyat satirinin ustunde bosluk kalmaz. */
.kart__bas { height:calc(1.3em * 2); font-size:var(--fs-h4); font-weight:var(--fw-700);
             line-height:1.3; color:var(--tx); transition:color var(--t1); }
.kart:hover .kart__bas{color:var(--brand);}
.kart__slg { height:1.5em; font-size:var(--fs-2xs); color:var(--tx-mute); line-height:1.5; }

.kart__alt { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between;
             gap:var(--s3); padding-top:var(--s4); border-top:1px solid var(--line-soft); }

/* Tarih pill'leri */
.trh { padding-top:var(--s3); border-top:1px dashed var(--line); }
.trh__etk { display:inline-flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2);
            font-size:10px; font-weight:var(--fw-700); letter-spacing:var(--ls-cap);
            text-transform:uppercase; color:var(--tx-faint); }
.trh__ls { display:flex; flex-wrap:nowrap; gap:var(--s2); min-width:0; overflow:hidden; }
.pil { display:inline-flex; align-items:center; padding:4px var(--s3);
       font-size:var(--fs-3xs); font-weight:var(--fw-600); color:var(--tx-soft);
       background:var(--mist); border:1px solid var(--line-soft); border-radius:var(--r1);
       white-space:nowrap; transition:all var(--t1); }
a.pil:hover{color:var(--white); background:var(--brand); border-color:var(--brand);}
.pil--1{color:var(--brand-700); background:var(--brand-50); border-color:var(--brand-200);}
a.pil--1:hover{color:var(--white);}
.pil--d{color:var(--tx-faint); background:transparent; border-style:dashed;}


/* ==========================================================================
   7. OTEL KARTI — gorsel uzeri metin
   ========================================================================== */
.otel { position:relative; display:block; border-radius:var(--r3); overflow:hidden;
        box-shadow:var(--sh1); transition:transform var(--t2),box-shadow var(--t2); }
.otel:hover{transform:translateY(-5px); box-shadow:var(--sh3);}
.otel__gor{position:relative; aspect-ratio:4/3; overflow:hidden;}
.otel__gor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t4);}
.otel:hover .otel__gor img{transform:scale(1.06);}
.otel__perde{position:absolute;inset:0;background:var(--veil-card);}
.otel__ic{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:var(--z-2);color:var(--white);}
.otel__yer{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-3xs);
           font-weight:var(--fw-600);letter-spacing:.04em;text-transform:uppercase;
           color:rgba(255,255,255,.8);}
.otel__yer svg{color:var(--brand-200);}
.otel__ad{margin-top:var(--s2);font-size:var(--fs-h4);font-weight:var(--fw-700);
          line-height:1.28;color:var(--white);}


/* ==========================================================================
   8. YORUM KARTI
   ========================================================================== */
.yrm { display:flex; flex-direction:column; gap:var(--s4); height:100%; padding:var(--s5);
       background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r3);
       box-shadow:var(--sh1); transition:transform var(--t2),box-shadow var(--t2); }
.yrm:hover{transform:translateY(-4px); box-shadow:var(--sh2);}
.yrm__mtn{flex:1;font-size:var(--fs-s);line-height:1.65;color:var(--tx-soft);margin:0;}
.yrm__alt{display:flex;align-items:center;gap:var(--s3);padding-top:var(--s4);
          border-top:1px solid var(--line-soft);}
.avtr{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
      font-size:var(--fs-2xs);font-weight:var(--fw-700);color:var(--white);
      background:var(--g-brand);border-radius:var(--rp);flex:none;}
.yrm__ad{font-size:var(--fs-xs);font-weight:var(--fw-700);color:var(--tx);}


/* ==========================================================================
   9. ARAMA KUTUSU
   ========================================================================== */
/* ARAMA KUTUSU TEK BIR KART.
   Sekme seridi, alanlar ve populer cipler ayri kutular gibi duruyordu.
   Uc bolum de ayni cercevenin icinde: ust kosede sekmeler, ortada alanlar,
   altta cip seridi. Kose yuvarlakligi yalnizca kartin DIS koselerinde;
   ic bolumler duz kenarlarla birbirine yapisir.

   Oneri listesi ve tarih secici kutunun disina tastigi icin overflow
   gizlenemez — dis koseler bolumlerin kendi border-radius'uyla veriliyor. */
.ara { --ara-r:var(--r4);
       position:relative; background:var(--white);
       border:1px solid var(--line); border-radius:var(--ara-r);
       box-shadow:var(--sh3); }

/* -- Sekmeler: TUR / OTEL --
   Klasor sekmesi: serit tonlu bir zemin uzerinde, SECILI sekme beyaza
   donup alt cizgiyi keserek formla birlesir. Boylece sekme ile alanlar
   tek grup okunur. */
.ara__sek{display:flex;gap:var(--s1);padding:var(--s3) var(--s4) 0;
          background:var(--mist);
          border-bottom:1px solid var(--line);
          border-radius:var(--ara-r) var(--ara-r) 0 0;}
.ara__sk{position:relative;display:inline-flex;align-items:center;gap:var(--s2);
         margin-bottom:-1px;
         padding:var(--s3) var(--s5);font-family:var(--font);
         font-size:var(--fs-2xs);font-weight:var(--fw-700);
         letter-spacing:var(--ls-cap);text-transform:uppercase;
         color:var(--tx-mute);background:transparent;
         border:1px solid transparent;border-bottom:0;
         border-radius:var(--r2) var(--r2) 0 0;cursor:pointer;
         transition:color var(--t1),background var(--t1),border-color var(--t1);}
.ara__sk svg{color:var(--tx-faint);transition:color var(--t1);}
.ara__sk:hover{color:var(--tx);background:rgba(255,255,255,.6);}
.ara__sk.on{color:var(--brand-700);background:var(--white);border-color:var(--line);}
.ara__sk.on svg{color:var(--brand);}
/* Secili sekmenin alt cizgiyi kestigi yer — formla birlesme noktasi */
.ara__sk.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
                   height:2px;background:var(--white);}
/* Ustte ince turuncu vurgu: hangi sekmede oldugu uzaktan okunsun */
.ara__sk.on::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
                    height:3px;background:var(--brand);
                    border-radius:var(--r2) var(--r2) 0 0;}

/* -- Alanlar --
   Butun denetimler ayni yukseklikte (--ara-y) ve ayni yuvarlaklikta;
   dugme de dahil. Sutunlar arasi bosluk tek degerden gelir. */
.ara__form { --ara-y:52px;
             display:grid; grid-template-columns:2.2fr 1fr auto; gap:var(--s4);
             align-items:end; padding:var(--s5); }
.ara__form--otel{grid-template-columns:2fr 1fr 1fr 1.2fr auto;}
.ara__alan{position:relative;min-width:0;}

/* -- Oneri listesi --
   Gorunum .sec acilir listesiyle ayni dilde: beyaz kart, ince cizgi,
   yumusak golge, secili satir turuncu zeminli. */
.ara__on{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:var(--z-ov);
         max-height:340px;overflow-y:auto;overscroll-behavior:contain;padding:var(--s2);
         background:var(--white);border:1px solid var(--line);border-radius:var(--r3);
         box-shadow:0 18px 44px rgba(16,30,54,.18);
         scrollbar-width:thin;scrollbar-color:var(--line) transparent;
         animation:ara-on .18s var(--e) both;}
@keyframes ara-on{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.ara__on::-webkit-scrollbar{width:6px;}
.ara__on::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--rp);}

.ara__on-s{display:flex;align-items:center;gap:var(--s3);width:100%;
           padding:var(--s3) var(--s3);font-family:var(--font);text-align:left;
           background:transparent;border-radius:var(--r2);cursor:pointer;
           transition:background var(--t1);}
.ara__on-s:hover{background:var(--mist);}
.ara__on-s.on{background:var(--brand-50);}

/* Tip rozeti: her oneri tipinin kendi ikonu — goz listeyi tarayabilsin */
.ara__on-i{flex:none;display:inline-flex;align-items:center;justify-content:center;
           width:30px;height:30px;border-radius:var(--r2);
           background:var(--mist-2);background-repeat:no-repeat;background-position:center;}
.ara__on-s.on .ara__on-i{background-color:var(--white);}
.ara__on-i[data-t="yer"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23F47D18' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");}
.ara__on-i[data-t="kategori"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23F47D18' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E");}
.ara__on-i[data-t="tur"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23F47D18' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='11' rx='3'/%3E%3Cpath d='M3 12h18M7 20v-3M17 20v-3'/%3E%3C/svg%3E");}
.ara__on-i[data-t="bolge"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23F47D18' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z'/%3E%3C/svg%3E");}
.ara__on-i[data-t="otel"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23F47D18' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-9a2 2 0 0 1 2-2h4v11'/%3E%3Cpath d='M9 11h10a2 2 0 0 1 2 2v5'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E");}

.ara__on-m{flex:1;min-width:0;}
.ara__on-a{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-500);color:var(--tx);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ara__on-a b{font-weight:var(--fw-800);color:var(--brand-700);}
.ara__on-m small{display:block;margin-top:1px;font-size:var(--fs-3xs);color:var(--tx-faint);
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ara__on-t{flex:none;font-size:10px;font-weight:var(--fw-700);letter-spacing:var(--ls-cap);
           text-transform:uppercase;color:var(--tx-faint);}
.ara__on-s.on .ara__on-t{color:var(--brand);}

/* -- Tarih secici (.trh) --
   Yerlesik <input type="date"> her tarayicida baska turlu goruntuleniyordu;
   bu bilesen her yerde ayni. Dugme .ara__in gorunumunu paylasir, acilir
   kutu ise oneri listesiyle ayni dilde. */
.trh{position:relative;}
.trh__b{display:flex;align-items:center;gap:var(--s2);text-align:left;cursor:pointer;}
.trh__b-i{flex:none;color:var(--brand);}
.trh__b > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trh__b-o{flex:none;color:var(--tx-faint);transition:transform var(--t2);}
.trh__bos{color:var(--tx-faint);font-weight:var(--fw-400);}
/* Secim temizlenince geri yazilacak metni tasir; hicbir zaman gorunmez */
.trh__bos-m{display:none;}
.trh.acik .trh__b{background:var(--white);border-color:var(--brand);
                  box-shadow:0 0 0 3px rgba(244,125,24,.14);}
.trh.acik .trh__b-o{transform:rotate(180deg);}

.trh__p{position:absolute;left:0;top:calc(100% + 6px);z-index:var(--z-ov);
        width:286px;max-width:calc(100vw - var(--s7));padding:var(--s3);
        background:var(--white);border:1px solid var(--line);border-radius:var(--r3);
        box-shadow:0 18px 44px rgba(16,30,54,.18);
        animation:ara-on .18s var(--e) both;}

.trh__bas{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
          margin-bottom:var(--s3);}
.trh__ay-a{flex:1;text-align:center;font-size:var(--fs-2xs);font-weight:var(--fw-800);color:var(--tx);}
.trh__ok{display:inline-flex;align-items:center;justify-content:center;
         width:30px;height:30px;color:var(--brand-700);background:var(--brand-50);
         border:1px solid var(--brand-200);border-radius:var(--rp);
         cursor:pointer;transition:all var(--t1);}
.trh__ok:hover{color:var(--white);background:var(--brand);border-color:var(--brand);}

.trh__hf{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--s1);}
.trh__hf span{padding:4px 0;font-size:10px;font-weight:var(--fw-700);
              letter-spacing:var(--ls-cap);text-transform:uppercase;
              text-align:center;color:var(--tx-faint);}

.trh__iz{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.trh__iz--ay{grid-template-columns:repeat(3,1fr);gap:var(--s2);}

.trh__g{display:flex;align-items:center;justify-content:center;
        height:34px;font-family:var(--font);font-size:var(--fs-3xs);
        font-weight:var(--fw-600);color:var(--tx);background:transparent;
        border:1px solid transparent;border-radius:var(--r2);
        cursor:pointer;transition:all var(--t1);}
.trh__g--bos{pointer-events:none;}
.trh__g:hover:not(:disabled){color:var(--brand-700);background:var(--brand-50);}
.trh__g:disabled{color:var(--line);cursor:not-allowed;}
.trh__g.bugun{border-color:var(--brand-200);}
.trh__g.on{color:var(--white);background:var(--brand);border-color:var(--brand);
           font-weight:var(--fw-800);}

.trh__a{display:flex;align-items:center;justify-content:center;
        height:42px;font-family:var(--font);font-size:var(--fs-3xs);
        font-weight:var(--fw-700);color:var(--tx);background:var(--mist);
        border:1px solid transparent;border-radius:var(--r2);
        cursor:pointer;transition:all var(--t1);}
.trh__a:hover:not(:disabled){color:var(--brand-700);background:var(--brand-50);
                             border-color:var(--brand-200);}
.trh__a:disabled{color:var(--line);background:transparent;cursor:not-allowed;}
.trh__a.bugun{border-color:var(--brand-200);}
.trh__a.on{color:var(--white);background:var(--brand);border-color:var(--brand);}

/* Sag kenara tasan secici sola acilir */
.ara__form > .ara__alan:last-of-type .trh__p,
.oar__a:last-of-type .trh__p{left:auto;right:0;}

/* -- Oda ve kisi acilir kutusu -- */
.ara__ksb{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
          text-align:left;cursor:pointer;}
.ara__ksb svg{flex:none;color:var(--brand);transition:transform var(--t2);}
.ara__alan--ks.acik .ara__ksb{background:var(--white);border-color:var(--brand);
                              box-shadow:0 0 0 3px rgba(244,125,24,.14);}
.ara__alan--ks.acik .ara__ksb svg{transform:rotate(180deg);}
.ara__ksp{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-ov);
          min-width:250px;padding:var(--s3);
          background:var(--white);border:1px solid var(--line);border-radius:var(--r3);
          box-shadow:0 18px 44px rgba(16,30,54,.18);
          animation:ara-on .18s var(--e) both;}
.ara__sy{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
         padding:var(--s2) var(--s2);font-size:var(--fs-2xs);font-weight:var(--fw-600);color:var(--tx);}
.ara__sy-d{display:inline-flex;align-items:center;gap:var(--s2);}
.ara__sy-d button{display:inline-flex;align-items:center;justify-content:center;
                  width:30px;height:30px;color:var(--brand-700);background:var(--brand-50);
                  border:1px solid var(--brand-200);border-radius:var(--rp);
                  cursor:pointer;transition:all var(--t1);}
.ara__sy-d button:hover{color:var(--white);background:var(--brand);border-color:var(--brand);}
.ara__sy-d input{width:38px;padding:4px;font-family:var(--font);font-size:var(--fs-2xs);
                 font-weight:var(--fw-700);text-align:center;color:var(--tx);
                 background:transparent;border:0;appearance:textfield;}
.ara__sy-d input::-webkit-outer-spin-button,
.ara__sy-d input::-webkit-inner-spin-button{appearance:none;margin:0;}
.ara__lbl{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);
          font-size:var(--fs-3xs);font-weight:var(--fw-700);letter-spacing:var(--ls-cap);
          text-transform:uppercase;color:var(--tx-mute);}
.ara__lbl svg{color:var(--brand);}
.ara__in{display:block;width:100%;min-height:var(--ara-y,52px);padding:var(--s3) var(--s4);
         font-size:var(--fs-s);font-weight:var(--fw-500);color:var(--tx);
         background:var(--mist);border:1px solid transparent;border-radius:var(--r2);
         appearance:none;transition:background var(--t1),border-color var(--t1),box-shadow var(--t1);}
.ara__in::placeholder{color:var(--tx-faint);font-weight:var(--fw-400);}
.ara__in:hover{background:var(--mist-2);}
.ara__in:focus{background:var(--white);border-color:var(--brand);
               box-shadow:0 0 0 3px rgba(244,125,24,.14);outline:none;}
select.ara__in{padding-right:var(--s8);cursor:pointer;background-repeat:no-repeat;
  background-position:right var(--s4) center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23F47D18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");}
/* Dugme alanlarla ayni yukseklik ve yuvarlaklikta */
.ara__bt{min-height:var(--ara-y,52px);padding-inline:var(--s7);border-radius:var(--r2);}

.ara__hizli{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);
            padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--mist);
            border-radius:0 0 var(--ara-r,var(--r4)) var(--ara-r,var(--r4));}
.ara__hizli-e{font-size:var(--fs-3xs);font-weight:var(--fw-700);letter-spacing:var(--ls-cap);
              text-transform:uppercase;color:var(--tx-faint);margin-right:var(--s1);}
.cip{display:inline-flex;align-items:center;gap:var(--s2);padding:6px var(--s4);
     font-size:var(--fs-3xs);font-weight:var(--fw-600);color:var(--tx-soft);
     background:var(--white);border:1px solid var(--line);border-radius:var(--rp);
     transition:all var(--t1);}
.cip svg{color:var(--brand);}
.cip:hover{color:var(--white);background:var(--koyu);border-color:var(--koyu);transform:translateY(-2px);}
.cip:hover svg{color:var(--brand-200);}
.cip.on{color:var(--white);background:var(--brand);border-color:var(--brand);}
.cip.on svg{color:var(--white);}

@media (max-width:1100px){
  .ara__form,.ara__form--otel{grid-template-columns:1fr 1fr;}
  .ara__form--otel .ara__alan--on{grid-column:1/-1;}
  .ara__bt{grid-column:1/-1;}
}
@media (max-width:560px) {
  /* Dar ekranda kart daralir: ic bosluklar ve kose yuvarlakligi kucultulur,
     sekmeler tam satiri paylasir. */
  .ara{--ara-r:var(--r3);}
  .ara__form{padding:var(--s4);gap:var(--s3);}
  .ara__form,.ara__form--otel{grid-template-columns:minmax(0,1fr);}
  .ara__sek{padding:var(--s2) var(--s2) 0;gap:2px;}
  .ara__sk{flex:1;justify-content:center;padding-inline:var(--s3);}
  .ara__hizli{padding:var(--s3) var(--s4);}
  .ara__ksp{left:0;right:0;min-width:0;}
}


/* ==========================================================================
   10. SEKMELER
   ========================================================================== */
.sk { display:flex; gap:var(--s1); padding:var(--s1); background:var(--mist);
      border-radius:var(--rp); overflow-x:auto; scrollbar-width:none; }
.sk::-webkit-scrollbar{display:none;}
.sk__b { flex:none; padding:var(--s3) var(--s6); font-size:var(--fs-xs); font-weight:var(--fw-600);
         color:var(--tx-mute); border-radius:var(--rp); white-space:nowrap;
         transition:background var(--t2),color var(--t2),box-shadow var(--t2); }
.sk__b:hover{color:var(--tx);}
.sk__b.on{color:var(--white); background:var(--koyu); box-shadow:var(--sh1);}

/* Cizgili varyant */
.sk--c{background:transparent;padding:0;border-radius:0;border-bottom:1px solid var(--line);gap:var(--s6);}
.sk--c .sk__b{position:relative;padding:var(--s4) 0;border-radius:0;}
.sk--c .sk__b.on{background:transparent;color:var(--brand);box-shadow:none;}
.sk--c .sk__b.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--brand);border-radius:var(--rp) var(--rp) 0 0;}


/* ==========================================================================
   11. GUVEN SERIDI
   ========================================================================== */
.gvn { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
.gvn__o { display:flex; align-items:center; gap:var(--s4); }
.ikn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
       color:var(--brand); background:var(--brand-50); border-radius:var(--r2); flex:none; }
.ikn svg{width:21px;height:21px;}
.ikn--n{color:var(--white);background:var(--koyu);}
.gvn__b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-700);color:var(--tx);line-height:1.3;}
.gvn__a{display:block;font-size:var(--fs-3xs);color:var(--tx-mute);margin-top:2px;}
@media (max-width:860px){ .gvn{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);} }
@media (max-width:460px){ .gvn{grid-template-columns:minmax(0,1fr);} }


/* ==========================================================================
   12. BANNER SERIDI
   ========================================================================== */
.bnr { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(min(340px, 100%),1fr); gap:var(--s4);
       overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
       padding-bottom:var(--s2); }
.bnr::-webkit-scrollbar{display:none;}
.bnr__o { position:relative; display:block; scroll-snap-align:start; aspect-ratio:24/5;
          border-radius:var(--r3); overflow:hidden; box-shadow:var(--sh1);
          transition:transform var(--t2),box-shadow var(--t2); }
.bnr__o:hover{transform:translateY(-4px);box-shadow:var(--sh3);}
.bnr__o img{width:100%;height:100%;object-fit:cover;transition:transform var(--t4);}
.bnr__o:hover img{transform:scale(1.04);}


/* ==========================================================================
   13. DESTINASYON KUTUSU
   ========================================================================== */
.dst { position:relative; display:flex; flex-direction:column; justify-content:flex-end;
       aspect-ratio:4/3; padding:var(--s4); color:var(--white); border-radius:var(--r3);
       overflow:hidden; box-shadow:var(--sh1); transition:transform var(--t2),box-shadow var(--t2); }
.dst:hover{transform:translateY(-5px);box-shadow:var(--sh3);}
.dst img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t4);}
.dst:hover img{transform:scale(1.07);}
.dst::after{content:"";position:absolute;inset:0;background:var(--veil-card);}
.dst__ic{position:relative;z-index:var(--z-2);}
.dst__ad{display:block;font-size:var(--fs-h4);font-weight:var(--fw-700);line-height:1.2;}
.dst__ad-a{display:block;font-size:var(--fs-3xs);color:rgba(255,255,255,.75);margin-top:3px;}
.dst__cz{display:block;width:0;height:2px;margin-top:var(--s3);background:var(--brand);
         border-radius:var(--rp);transition:width var(--t3);}
.dst:hover .dst__cz{width:38px;}


/* ==========================================================================
   14. HEADER — iki satir (9 baslik tek satira sigmaz)
   ========================================================================== */
/* HEADER AKISTA YER KAPLAMAZ.
   Sticky iken kuculdugunde (180 -> 156) akistaki yer tutucusu da
   kuculuyor, altindaki her sey gecis suresince 24px yukari kayiyordu —
   kaydirirken titreme olarak gorunen sey buydu. Fixed olunca akisi hic
   etkilemez; yerini govdenin ust dolgusu tutar ve o dolgu sabit kalir. */
.hd { position:fixed; inset:0 0 auto 0; z-index:var(--z-hd); background:var(--white);
      transition:box-shadow var(--t2); }

/* Olcum sirasinda gecisler kapatilir — header bir an icin tam yuksekligine
   donduruluyor, bu gidis gelis ekranda gorunmemeli. */
.hd--olcum, .hd--olcum * { transition:none !important; }
.hd.sbt{box-shadow:var(--sh2);}

.hd__top { background:var(--koyu); color:var(--tx-inv-mute); font-size:var(--fs-3xs);
           border-bottom:1px solid rgba(255,255,255,.1); }
.hd__top-ic{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);min-height:38px;}
.hd__top-l,.hd__top-r{display:flex;align-items:center;gap:var(--s5);}
.hd__top-o{display:inline-flex;align-items:center;gap:var(--s2);transition:color var(--t1);}
.hd__top-o svg{width:13px;height:13px;color:var(--brand-200);}
a.hd__top-o:hover{color:var(--white);}
.hd__top-ay{width:1px;height:12px;background:rgba(255,255,255,.2);}
@media (max-width:1024px){ .hd__top{display:none;} }

.hd__ust{border-bottom:1px solid var(--line-soft);}
/* Logo 68px; satir yuksekligi logonun ustunde ve altinda nefes birakir.
   Kaydirinca logo 48px'e, satir 68px'e iner — ikisi de AYNI sure ve egriyle
   hareket eder ki gecis sirasinda kayma hissi olusmasin. */
.hd__ust-ic{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
            min-height:92px;transition:min-height .28s var(--e);}
.hd.sbt .hd__ust-ic{min-height:68px;}

.lg{flex:none;display:inline-flex;align-items:center;}
.lg img{height:68px;width:auto;transition:height .28s var(--e);}
.hd.sbt .lg img{height:48px;}
@media (max-width:900px){ .lg img{height:52px;} }
@media (max-width:560px){ .lg img{height:42px;} }

.hd__eyl{flex:none;display:flex;align-items:center;gap:var(--s2);}
.hd__tel{display:inline-flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);
         border-radius:var(--r2);transition:background var(--t1);}
.hd__tel:hover{background:var(--brand-50);}
.hd__tel-i{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
           color:var(--brand);background:var(--brand-50);border-radius:var(--rp);flex:none;
           transition:background var(--t1),color var(--t1);}
.hd__tel:hover .hd__tel-i{background:var(--brand);color:var(--white);}
.hd__tel-m{display:flex;flex-direction:column;line-height:1.2;}
.hd__tel-m small{font-size:10px;letter-spacing:.04em;color:var(--tx-mute);}
.hd__tel-m strong{font-size:var(--fs-s);font-weight:var(--fw-800);color:var(--tx);letter-spacing:var(--ls-t);}
@media (max-width:720px){ .hd__tel-m{display:none;} .hd__tel{padding:0;} }

.hd__ib{position:relative;display:inline-flex;align-items:center;justify-content:center;
        width:40px;height:40px;color:var(--tx-soft);border-radius:var(--rp);
        transition:background var(--t1),color var(--t1);}
.hd__ib:hover{background:var(--mist);color:var(--brand);}
.hd__ib svg{width:19px;height:19px;}
/* Giris yapmis uye: kisi ikonu yerine bas harfli yuvarlak.
   Oturumun acik oldugu bir bakista anlasilsin. */
.hd__av span{display:inline-flex;align-items:center;justify-content:center;
             width:34px;height:34px;font-size:var(--fs-3xs);font-weight:var(--fw-800);
             letter-spacing:.2px;color:var(--white);background:var(--g-brand);
             border-radius:var(--rp);box-shadow:0 2px 8px rgba(244,125,24,.35);}
.hd__av:hover{background:transparent;}
.hd__av:hover span{transform:scale(1.06);}
.hd__av span{transition:transform var(--t1);}

.hd__sy{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;
        font-size:10px;font-weight:var(--fw-700);line-height:16px;text-align:center;
        color:var(--white);background:var(--brand);border:2px solid var(--white);border-radius:var(--rp);}

.hmb{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;
     margin-left:var(--s1);border-radius:var(--rp);transition:background var(--t1);}
.hmb:hover{background:var(--mist);}
.hmb span{display:block;height:2px;background:var(--ink);border-radius:var(--rp);transition:width var(--t2);}
.hmb span:nth-child(1){width:20px;margin-inline:auto;}
.hmb span:nth-child(2){width:14px;margin-left:auto;margin-right:10px;}
.hmb span:nth-child(3){width:20px;margin-inline:auto;}
@media (max-width:1180px){ .hmb{display:flex;} }


/* ==========================================================================
   15. ANA MENU (alt satir) + MEGA PANEL
   ========================================================================== */
.mn{position:relative;background:var(--white);border-bottom:1px solid var(--line-soft);}
.mn__ls{display:flex;align-items:stretch;justify-content:space-between;gap:var(--s1);}
.mn__o{position:relative;display:flex;}
.mn__b{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s3);
       font-size:var(--fs-3xs);font-weight:var(--fw-700);letter-spacing:.05em;
       text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:color var(--t1);}
.mn__b svg{opacity:.5;transition:transform var(--t2),opacity var(--t1);}
.mn__b:hover{color:var(--brand);}
.mn__o--dd:hover>.mn__b svg{transform:rotate(180deg);opacity:1;}
.mn__b::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:0;height:2px;
  background:var(--g-brand);border-radius:var(--rp) var(--rp) 0 0;
  transform:scaleX(0);transition:transform var(--t2);}
.mn__o:hover>.mn__b::after,.mn__b.on::after{transform:scaleX(1);}
.mn__b.on{color:var(--brand);}
.mn__b--v{color:var(--brand);}
@media (max-width:1180px){ .mn{display:none;} }

.mg{position:absolute;top:100%;left:0;z-index:var(--z-dd);padding:var(--s5);margin-top:0;
    background:var(--white);border:1px solid var(--line-soft);border-radius:0 0 var(--r3) var(--r3);
    box-shadow:var(--sh4);opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--t2),transform var(--t2),visibility var(--t2);}
.mg::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;}
.mn__o--dd:hover>.mg,.mn__o--dd:focus-within>.mg{opacity:1;visibility:visible;transform:translateY(0);}
.mg--dar{min-width:290px;}
/* GENIS MEGA PANEL — tasma cozumu
   Panel artik menu OGESINE degil, menu CUBUGUNA (.mn) gore konumlanir.
   Oge merkezine hizalanan 1120px'lik panel dar ekranlarda kacinilmaz olarak
   sagdan/soldan tasiyordu. Simdi sol/sag 0 ile serit boyunca yayilir; icerik
   .mg__ic ile kapsayici genisligine oturur. Hicbir genislikte tasmaz. */
.mn__o--gen{position:static;}
.mg--gen{left:0;right:0;width:auto;padding:0;border-radius:0 0 var(--r3) var(--r3);}
.mg--gen>.mg__ic{position:relative;max-width:var(--w);margin-inline:auto;
  padding:var(--s5) var(--gut) var(--s4);}

/* Dar acilir listeler oge hizasinda kalir; yalnizca sag uctakiler saga yaslanir */
.mg--dar.mg--sag{left:auto;right:0;}

.mg__gr{display:grid;gap:var(--s7);}
.mg__gr--g{grid-template-columns:minmax(0,1fr) 250px;}
/* SUTUN AKISI (izgara degil): izgarada satirlar esit yukseklik aliyor,
   iki ogeli grup alti ogeli grubun yuksekligini kapliyordu. Akisla her
   grup kendi boyu kadar yer kaplar; panel yaklasik uctebir kisalir. */
.mg__kol{column-count:3;column-gap:var(--s6);}
.mg__kol>div{break-inside:avoid;margin-bottom:var(--s5);}
.mg__gb{padding-bottom:var(--s2);margin-bottom:var(--s3);border-bottom:1px solid var(--line-soft);
        font-size:var(--fs-3xs);font-weight:var(--fw-700);letter-spacing:var(--ls-cap);
        text-transform:uppercase;color:var(--brand);}
.mg__b{display:flex;align-items:center;gap:var(--s3);padding:4px var(--s3);
       margin-inline:calc(var(--s3)*-1);font-size:var(--fs-3xs);font-weight:var(--fw-500);
       line-height:1.35;color:var(--tx-soft);border-radius:var(--r1);
       transition:background var(--t1),color var(--t1),padding-left var(--t1);}
.mg__b:hover{background:var(--brand-50);color:var(--brand-700);padding-left:var(--s4);}
.mg__bi{flex:none;width:4px;height:4px;background:var(--line);border-radius:var(--rp);
        transition:background var(--t1),transform var(--t1);}
.mg__b:hover .mg__bi{background:var(--brand);transform:scale(1.6);}

.mg__tan{position:relative;display:flex;align-items:flex-end;
  aspect-ratio:3/4;max-height:400px;align-self:start;
         border-radius:var(--r2);overflow:hidden;background:var(--g-koyu);}
.mg__tan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;
             transition:transform var(--t4),opacity var(--t2);}
.mg__tan:hover img{transform:scale(1.06);opacity:.7;}
.mg__tan::after{content:"";position:absolute;inset:0;background:var(--veil-card);}
.mg__tan-ic{position:relative;z-index:var(--z-2);display:flex;flex-direction:column;
            align-items:flex-start;gap:var(--s2);padding:var(--s4);color:var(--white);}
.mg__tan-b{font-size:var(--fs-h4);font-weight:var(--fw-700);line-height:1.25;color:var(--white);}
.mg__tan-a{font-size:var(--fs-3xs);color:rgba(255,255,255,.78);}
.mg__alt{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
         margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-soft);
         font-size:var(--fs-3xs);color:var(--tx-mute);}
.mg__alt>span{display:inline-flex;align-items:center;gap:var(--s2);}
@media (max-width:1280px){ .mg--gen>.mg__ic{padding:var(--s5) var(--gut);}
  .mg__gr--g{grid-template-columns:minmax(0,1fr);} .mg__tan{display:none;} }


/* ==========================================================================
   16. MOBIL CEKMECE
   ========================================================================== */
.prd{position:fixed;inset:0;z-index:calc(var(--z-tp) - 1);background:rgba(16,30,54,.55);
     backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity var(--t2),visibility var(--t2);}
.prd.on{opacity:1;visibility:visible;}

.ckm{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-tp);display:flex;flex-direction:column;
     width:min(400px,88vw);background:var(--white);box-shadow:var(--sh4);
     transform:translateX(101%);transition:transform var(--t3);}
.ckm.on{transform:translateX(0);}
.ckm__bas{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
          padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);flex:none;}
.ckm__bas img{height:32px;width:auto;}
.ckm__kp{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
         color:var(--tx-soft);background:var(--mist);border-radius:var(--rp);
         transition:all var(--t1);}
.ckm__kp:hover{background:var(--brand);color:var(--white);transform:rotate(90deg);}
.ckm__gov{flex:1;overflow-y:auto;padding:var(--s3) var(--s5) var(--s7);}

.cm{border-bottom:1px solid var(--line-soft);}
/* Dar ekranda cekmece basliklari 15 px, buyuk harf ve harf araligiyla
   iri ve kaba duruyordu; bes baslik ekranin yarisini kapliyordu.
   13 px ayni okunakliligi koruyor, menu bir bakista taraniyor. */
.cm__b{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);width:100%;
       padding:var(--s3) 0;font-size:var(--fs-2xs);font-weight:var(--fw-700);letter-spacing:.02em;
       text-transform:uppercase;color:var(--ink);text-align:left;transition:color var(--t1);}
.cm__b:hover{color:var(--brand);}
.cm__ok{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
        color:var(--brand);background:var(--brand-50);border-radius:var(--rp);transition:transform var(--t2);}
.cm.on .cm__b{color:var(--brand);} .cm.on .cm__ok{transform:rotate(180deg);}
.cm__gov{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t2);}
.cm.on .cm__gov{grid-template-rows:1fr;}
.cm__gov-ic{overflow:hidden;}
.cm__ls{padding:0 0 var(--s4) var(--s4);border-left:1px solid var(--line);margin-left:2px;}
.cm__gb{margin:var(--s4) 0 var(--s2);font-size:10px;font-weight:var(--fw-700);
        letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--brand);}
.cm__gb:first-child{margin-top:var(--s2);}
.cm__a{display:flex;align-items:center;gap:var(--s2);padding:5px 0;font-size:12px;
       color:var(--tx-mute);transition:color var(--t1),transform var(--t1);}
.cm__a:hover{color:var(--brand);transform:translateX(4px);}
.cm__a--t{margin-top:var(--s2);font-weight:var(--fw-700);color:var(--brand);}

.ckm__alt{flex:none;padding:var(--s5);background:var(--koyu);color:var(--tx-inv-mute);}
.ckm__alt-a{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;
            font-size:var(--fs-xs);transition:color var(--t1);}
.ckm__alt-a svg{color:var(--brand-200);flex:none;}
.ckm__alt-a:hover{color:var(--white);}

/* Telefon + WhatsApp: yan yana iki ince dugme.
   Koyu zemin uzerinde saydam yesil cirkin ve okunmasi zor duruyordu;
   ikisi de DOLU renk: telefon marka turuncusu, WhatsApp kendi yesili.
   Numara yazilmiyor — dokununca zaten aramayi baslatiyor. */
.ckm__ara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);}
.ckm__ara-b{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
            min-height:44px;padding:0 var(--s3);
            font-size:var(--fs-3xs);font-weight:var(--fw-700);white-space:nowrap;
            color:var(--white);background:var(--brand);
            border-radius:var(--r2);transition:background var(--t1),transform var(--t1);}
.ckm__ara-b svg{flex:none;color:currentColor;}
.ckm__ara-b:hover{background:var(--brand-600);color:var(--white);transform:translateY(-1px);}
.ckm__ara-b--wa{background:#25D366;}
.ckm__ara-b--wa:hover{background:#1FBF5B;}


/* ==========================================================================
   17. SOSYAL
   ========================================================================== */
.sos{display:flex;align-items:center;gap:var(--s2);}
.sos__a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
        color:var(--tx-inv-mute);border:1px solid rgba(255,255,255,.22);border-radius:var(--rp);
        transition:all var(--t2);}
.sos__a svg{width:16px;height:16px;}
.sos__a:hover{color:var(--white);background:var(--brand);border-color:var(--brand);transform:translateY(-3px);}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.ft{position:relative;background:var(--koyu);color:var(--tx-inv-mute);font-size:var(--fs-xs);overflow:hidden;}
.ft::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--g-brand);}
.ft__ust{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:var(--s8) var(--s7);
         padding-block:var(--s10) var(--s8);}
.ft__lg{height:36px;width:auto;margin-bottom:var(--s4);}
.ft__ac{line-height:1.7;max-width:40ch;margin-bottom:var(--s5);}
.ft__kb{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
        font-size:var(--fs-3xs);font-weight:var(--fw-700);letter-spacing:var(--ls-cap);
        text-transform:uppercase;color:var(--white);}
.ft__kb::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16);}
.ft__ls{display:flex;flex-direction:column;gap:var(--s1);}
.ft__a{display:inline-flex;align-items:center;gap:var(--s2);padding:3px 0;transition:color var(--t1);}
.ft__a::before{content:"";width:0;height:1px;background:var(--brand);transition:width var(--t2);flex:none;}
.ft__a:hover{color:var(--white);} .ft__a:hover::before{width:10px;}
.ft__il{display:flex;flex-direction:column;gap:var(--s4);}
.ft__il-o{display:flex;align-items:flex-start;gap:var(--s3);}
.ft__il-o svg{width:16px;height:16px;color:var(--brand-200);flex:none;margin-top:2px;}
/* Iki numara yan yana. Alt alta iki blok halindeyken alt bilgiyi
   gereksiz uzatiyorlardi; punto da h4 idi, sutunun yarisini kapliyordu. */
.ft__num{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);}
.ft__num-k{display:flex;align-items:center;gap:var(--s2);min-width:0;
           padding:var(--s2) var(--s3);color:var(--white);
           background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
           border-radius:var(--r2);transition:all var(--t1);}
.ft__num-k svg{flex:none;color:var(--brand-200);}
.ft__num-k span{min-width:0;}
.ft__num-k small{display:block;font-size:10px;color:rgba(255,255,255,.5);}
.ft__num-k b{display:block;color:var(--white);font-size:var(--fs-3xs);font-weight:var(--fw-800);
             letter-spacing:var(--ls-t);
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ft__num-k:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);}
.ft__num-k--wa svg{color:#3DDC7F;}
.ft__blg{display:flex;align-items:center;justify-content:space-between;gap:var(--s7);flex-wrap:wrap;
         padding-block:var(--s6);border-top:1px solid rgba(255,255,255,.14);}
.ft__blg-g{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;}
.ft__blg-g img{height:30px;width:auto;opacity:.62;filter:grayscale(1) brightness(2.2);
               transition:opacity var(--t2),filter var(--t2);}
.ft__blg-g img:hover{opacity:1;filter:none;}
.ft__alt{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
         padding-block:var(--s5);border-top:1px solid rgba(255,255,255,.14);
         font-size:var(--fs-3xs);color:rgba(255,255,255,.5);}
.ft__alt-a{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;}
.ft__alt-a a:hover{color:var(--white);}
@media (max-width:1024px){ .ft__ust{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:var(--s9) var(--s7);} }
/* Tek sutunda alt bilgi ekranlar dolusu uzuyordu: iki sutun kalir,
   yalnizca en dar ekranda ilk sutun (logo + aciklama) tam satir olur. */
@media (max-width:620px) {
  .ft__ust{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5);}
  /* Marka blogu (logo + aciklama) ve musteri hizmetleri TAM SATIR.
     Musteri hizmetleri yarim sutunda kalinca icindeki iki numara karti
     %25 genislige dusuyor ve numaralar okunamiyordu. Ortadaki iki menu
     yan yana kalir — asil kisalmayi onlar sagliyor. */
  .ft__ust > :first-child,
  .ft__ust > :last-child{grid-column:1/-1;}
  .ft__ac{max-width:none;}
}


/* ==========================================================================
   19. SABIT OGELER
   ========================================================================== */
/* Yuzen WhatsApp dugmesi kaldirildi — yerini AyderAI maskotu aldi
   (css/ai.css). WhatsApp baglantisi sohbet panelinin altinda duruyor. */

/* Basa don SOLA alindi: sag alt kose artik AyderAI maskotunun.
   Ikisi ayni kosede ust uste biniyordu. */
.up{position:fixed;left:var(--s5);bottom:var(--s5);z-index:var(--z-hd);
    display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    color:var(--white);background:var(--koyu);border-radius:var(--rp);box-shadow:var(--sh3);
    opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--t2);}
.up.on{opacity:1;visibility:visible;transform:none;}
.up:hover{background:var(--brand);}
@media (max-width:560px){
  .wa{width:44px;height:44px;right:var(--s4);bottom:calc(var(--s4) + 50px);}
  .wa svg{width:22px;height:22px;}
  .up{right:var(--s4);bottom:var(--s4);width:40px;height:40px;}
}

.crz{position:fixed;bottom:var(--s5);left:50%;transform:translate(-50%,calc(100% + var(--s8)));
     z-index:var(--z-tp);display:flex;align-items:center;gap:var(--s5);
     width:min(880px,calc(100% - var(--s7)));padding:var(--s4) var(--s5);
     background:var(--koyu);color:var(--tx-inv-mute);border-radius:var(--r3);box-shadow:var(--sh4);
     opacity:0;visibility:hidden;transition:transform var(--t3),opacity var(--t3),visibility var(--t3);}
.crz.on{transform:translate(-50%,0);opacity:1;visibility:visible;}
.crz__m{flex:1;font-size:var(--fs-2xs);line-height:1.55;}
.crz__m a{color:var(--brand-200);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:768px){ .crz{flex-direction:column;align-items:stretch;text-align:center;} }


/* ==========================================================================
   20. HAREKET — sakin scroll-reveal
   ========================================================================== */
.js [data-gel]{opacity:0;transform:translateY(20px);
  transition:opacity var(--t4),transform var(--t4);}
[data-gel].gor{opacity:1;transform:none;}
[data-g="1"]{transition-delay:.06s;} [data-g="2"]{transition-delay:.12s;}
[data-g="3"]{transition-delay:.18s;} [data-g="4"]{transition-delay:.24s;}
[data-g="5"]{transition-delay:.3s;}  [data-g="6"]{transition-delay:.36s;}

@keyframes nbz{0%{transform:scale(1);opacity:.85;}70%,100%{transform:scale(1.5);opacity:0;}}
@keyframes kb{from{transform:scale(1.04);}to{transform:scale(1.14);}}
@keyframes ilr{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion: reduce){
  .js [data-gel]{opacity:1 !important;transform:none !important;}
}


/* ==========================================================================
   21. KAMPANYA SLIDER — reklam alani (duz banner gorselleri)
   ========================================================================== */
.kmp {
  position: relative;
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--mist-2);
  box-shadow: var(--sh1);
}
.kmp__ray { position: relative; aspect-ratio: 24/5; }
.kmp__s {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--e), visibility .7s var(--e);
}
.kmp__s.on { opacity: 1; visibility: visible; }
.kmp__s img { width: 100%; height: 100%; object-fit: cover; }

.kmp__ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: var(--z-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--white); background: rgba(16,30,54,.5);
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--rp);
  backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--t2), background var(--t2);
}
.kmp:hover .kmp__ok { opacity: 1; }
.kmp__ok:hover { background: var(--brand); border-color: var(--brand); }
.kmp__ok--s { left: var(--s4); }
.kmp__ok--g { right: var(--s4); }

.kmp__nk {
  position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%);
  z-index: var(--z-2); display: flex; gap: var(--s2);
}
.kmp__n {
  position: relative; width: 26px; height: 3px;
  background: rgba(255,255,255,.45); border-radius: var(--rp);
  overflow: hidden; transition: width var(--t2);
  box-shadow: 0 1px 3px rgba(16,30,54,.3);
}
.kmp__n.on { width: 46px; }
.kmp__n .dlg {
  position: absolute; inset: 0; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
}
.kmp__n.on .dlg { animation: ilr var(--sure, 5.5s) linear both; }
.kmp.durdu .kmp__n.on .dlg { animation-play-state: paused; }

@media (max-width: 900px) {
  .kmp__ray { aspect-ratio: 16/7; }
  .kmp__ok { display: none; }
}


/* ==========================================================================
   22. INDIRIM ROZETI
   ========================================================================== */
.rz--ind {
  background: var(--no); color: var(--white);
  font-weight: var(--fw-800); letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(200,50,42,.3);
}


/* ==========================================================================
   23. MEGA PANEL — kisa ekranlarda tasma cozumu
   --------------------------------------------------------------------------
   Yurt Disi menusunde 8 grup var; 800px yuksekligindeki laptop ekranlarinda
   panel ekrani asiyordu. Panel yuksekligi gorunur alana sinirlanir ve
   gerektiginde kendi icinde kayar.
   ========================================================================== */
.mg {
  max-height: calc(100vh - var(--hd-h) - var(--s5));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.mg::-webkit-scrollbar { width: 6px; }
.mg::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--rp); }
.mg::-webkit-scrollbar-track { background: transparent; }

/* Kisa ekran: kolon sayisi artar, satir yuksekligi ve bosluklar daralir */
@media (max-height: 860px) {
  .mg--gen>.mg__ic { padding-block: var(--s5); }
  .mg__kol { column-count: 4; column-gap: var(--s5); }
  .mg__kol > div { margin-bottom: var(--s4); }
  .mg__gb  { margin-bottom: var(--s2); padding-bottom: var(--s1); }
  .mg__b   { padding-block: 3px; }
  .mg__tan { display: none; }
  .mg__gr--g { grid-template-columns: minmax(0,1fr); }
  .mg__alt { margin-top: var(--s4); padding-top: var(--s3); }
}
@media (max-height: 720px) {
  .mg__kol { column-count: 5; }
  .mg__alt { display: none; }
}


/* ==========================================================================
   24. FOOTER — TURSAB rozeti adres kolonunun altinda
   ========================================================================== */
.ft__tursab {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding: var(--s3) var(--s4);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r2);
  transition: background var(--t2), border-color var(--t2);
}
.ft__tursab:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); }
.ft__tursab img { height: 34px; width: auto; opacity: .95; }
.ft__tursab-m { display: flex; flex-direction: column; line-height: 1.3; }
.ft__tursab-m strong {
  font-size: var(--fs-3xs); font-weight: var(--fw-700);
  letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--white);
}
.ft__tursab-m small { font-size: 10px; color: rgba(255,255,255,.55); }


/* ==========================================================================
   25. TAMAMLAYICI KARO
   Kategorideki gercek tur sayisi izgarayi tam doldurmadiginda satiri
   tamamlar; boylece hicbir sekmede kayik/eksik satir olusmaz.
   ========================================================================== */
.karo {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--s3); min-height: 240px; padding: var(--s6);
  background: var(--mist);
  border: 1px dashed var(--line);
  border-radius: var(--r3);
  transition: background var(--t2), border-color var(--t2), transform var(--t2);
}
.karo:hover {
  background: var(--brand-50); border-color: var(--brand-200);
  transform: translateY(-5px);
}
.karo__ik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  color: var(--brand); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--rp);
  transition: background var(--t2), color var(--t2), transform var(--t2);
}
.karo:hover .karo__ik { background: var(--brand); color: var(--white); transform: translateX(4px); }
.karo__b { font-size: var(--fs-h4); font-weight: var(--fw-700); color: var(--tx); line-height: 1.3; }
.karo__a { font-size: var(--fs-2xs); color: var(--tx-mute); }


/* ==========================================================================
   PAYLASILAN KART BILESENLERI
   --------------------------------------------------------------------------
   Kalan kontenjan rozeti ve gezilecek yerler seridi; hem izgara kartinda
   (ana sayfa, kategori) hem liste satirinda kullanilir. Bu yuzden sayfaya
   ozel kategori.css'te degil, ortak app.css'te durur.
   ========================================================================== */
/* -- KALAN KONTENJAN — satisin en degerli sinyali --------------------------
   Sayi, rozetin arka planindan TASAN beyaz bir madalyonun icinde durur.
   Boylece goz once sayiya, sonra metne gider. Rozet 4 kisi ve altinda
   kirmiziya doner ve nabiz atar.
   -------------------------------------------------------------------------- */
.acil {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: var(--z-2);
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 32px;
  padding: 0 var(--s4) 0 26px;   /* solda madalyonun tasan yarisi kadar bosluk */
  margin-left: 12px;             /* madalyon sol kenardan disari cikabilsin */
  font-size: var(--fs-3xs); font-weight: var(--fw-700); letter-spacing: .01em;
  color: var(--white); white-space: nowrap;
  background: linear-gradient(135deg, #F0910E, #D2760A);
  border-radius: var(--rp);
  box-shadow: 0 6px 18px rgba(200,110,10,.42);
}

/* Tasan madalyon */
.acil__n {
  position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  font-size: 15px; font-weight: var(--fw-800); font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -.02em;
  color: #C06A05;
  background: var(--white);
  border-radius: var(--rp);
  box-shadow: 0 3px 10px rgba(16,30,54,.24);
}

/* Madalyonun cevresinde genisleyen halka — dikkat cekicidir, yer kaplamaz */
.acil__n::after {
  content: ""; position: absolute; inset: -3px;
  border: 2px solid currentColor; border-radius: var(--rp);
  opacity: 0; animation: acil-halka 2.2s var(--e) infinite;
}

/* 4 kisi ve alti: kritik */
.acil--kritik {
  background: linear-gradient(135deg, #E5473C, #BC271E);
  box-shadow: 0 6px 20px rgba(200,50,42,.5);
  animation: acil-nb 2.6s var(--e) infinite;
}
.acil--kritik .acil__n { color: #BC271E; }

.acil--dolu {
  height: 30px; padding: 0 var(--s3); margin-left: 0;
  gap: 6px; font-weight: var(--fw-600);
  color: rgba(255,255,255,.9); background: var(--ink);
  box-shadow: none; animation: none;
}

@keyframes acil-nb {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes acil-halka {
  0%   { transform: scale(.82); opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .acil--kritik { animation: none; }
  .acil__n::after { animation: none; }
}


/* ==========================================================================
   9. GEZILECEK YERLER — TEK SATIR
   --------------------------------------------------------------------------
   Rozetler asla ikinci satira inmez. Sigmayan kisim saga dogru soluklasir,
   "+n" rozeti her zaman gorunur kalir.
   ========================================================================== */
.lok { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lok__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); }
.lok__e svg { color: var(--brand); }

.lok__sar { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lok__ls {
  display: flex; flex-wrap: nowrap; gap: 5px;
  min-width: 0; overflow: hidden;
  /* Tasan rozetler kesik gorunmesin, yumusak sonlansin */
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
}
.lok__p {
  display: inline-flex; align-items: center; flex: none;
  padding: 4px var(--s3);
  font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--koyu);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--rp);
  white-space: nowrap; transition: all var(--t1);
}
.lok__p:hover { color: var(--white); background: var(--koyu); border-color: var(--koyu); }
.lok__p--d { flex: none; color: var(--brand); background: var(--brand-50);
             border-color: var(--brand-200); font-weight: var(--fw-700); }
.lok__p--d:hover { color: var(--white); background: var(--brand); border-color: var(--brand); }

/* Izgara kartinda — daha dar, yine tek satir */
.kart .lok { padding-top: var(--s3); border-top: 1px dashed var(--line); }
.kart .lok__ls { flex-wrap: nowrap; overflow: hidden; }
.kart .lok__p { font-size: 10px; padding: 3px var(--s2); }




/* ==========================================================================
   ISKELET (SKELETON) — PARLAYAN YER TUTUCU
   --------------------------------------------------------------------------
   Iki yerde kullanilir:
   1) GORSELLER: her lazy gorselin arkasinda, pikseller gelene kadar parlar.
      Bunun icin isaretlemede degisiklik gerekmez — dogrudan <img> arka plani
      olarak calisir, gorsel yuklenince .hz sinifiyla kalkar.
   2) YER TUTUCU BLOKLAR: "Daha fazla göster" ile gelen partinin ve filtre
      gecislerinin yerine oturmasi sirasinda gercek olculerde iskelet basilir.
   ========================================================================== */
:root {
  --isk-1: var(--mist-2);
  --isk-2: #F7F9FC;
  --isk-g: linear-gradient(100deg, var(--isk-1) 20%, var(--isk-2) 40%, var(--isk-1) 60%);
}

@keyframes isk-kay {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.isk {
  display: block;
  background: var(--isk-g);
  background-size: 220% 100%;
  border-radius: var(--r1);
  animation: isk-kay 1.5s linear infinite;
}

/* -- 1) Gorsel iskeleti -- */
/* JS calismiyorsa gorsel dogrudan gorunur; bu yuzden .js ile kapili. */
.js img[data-yedek]:not(.hz) {
  background: var(--isk-g);
  background-size: 220% 100%;
  animation: isk-kay 1.5s linear infinite;
  color: transparent;      /* yuklenmemis gorselin alt metni okunmasin */
}
/* Kisayol yerine iki ozellik birlikte yazilir; yoksa bu kural, kart ve
   satir gorsellerindeki transform gecisini silip hover'i ani yapiyor. */
.js img[data-yedek] { transition: filter .35s var(--e),
                                  transform 1.15s cubic-bezier(.16,.68,.32,1); }
.js img[data-yedek]:not(.hz) { filter: blur(6px); }
.js img[data-yedek].hz { filter: none; animation: none; background: none; }

@media (prefers-reduced-motion: reduce) {
  .isk, .js img[data-yedek]:not(.hz) { animation: none; }
  .js img[data-yedek]:not(.hz) { filter: none; }
}

/* -- 2) Iskelet parcalari -- */
.isk--gor { width: 100%; height: 100%; border-radius: 0; }
.isk--bas { height: 17px; width: 72%; }
.isk--sat { height: 12px; width: 46%; }
.isk--kisa{ width: 30%; }
.isk--mt  { height: 10px; width: 74px; }
.isk--pil { height: 22px; width: 68px; border-radius: var(--rp); }
.isk--fiy { height: 26px; width: 104px; }
.isk--bt  { height: 34px; width: 100%; border-radius: var(--r2); }

/* Iskelet ogeleri yalnizca JS gosterdiginde gorunur */
.isk__oge { display: none; }
.isk__oge.on { display: block; }
.kt__sonuc--izgara .isk__oge.on { display: flex; }


/* ==========================================================================
   MODERN SECIM KUTUSU (.sec)
   --------------------------------------------------------------------------
   Yerli <select> yerine kullanilir: her tarayicida ayni gorunur, secenek
   satirinda ek bilgi (rozet, adet) tasiyabilir ve klavye ile calisir.
   Hem tur detay hem kategori sayfasi paylasir.
   ========================================================================== */
/* ==========================================================================
   13. MODERN SECIM KUTUSU (yerli select yerine)
   ========================================================================== */
.sec { position: relative; }
.sec__b { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
          width: 100%; min-height: 46px; padding: 0 var(--s4);
          font-size: var(--fs-2xs); font-weight: var(--fw-600); color: var(--tx); text-align: left;
          background: var(--white); border: 1px solid var(--line); border-radius: var(--r2);
          transition: border-color var(--t1), box-shadow var(--t1); }
.sec__b:hover { border-color: var(--brand-200); }
.sec__b svg { flex: none; color: var(--brand); transition: transform var(--t2); }
.sec.acik .sec__b { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.sec.acik .sec__b svg { transform: rotate(180deg); }

.sec__ls { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-ov);
           max-height: 280px; overflow-y: auto; list-style: none;
           padding: var(--s2); background: var(--white);
           border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--sh4);
           animation: sec-gir .18s var(--e); }
@keyframes sec-gir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.sec__o { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
          width: 100%; padding: var(--s3); text-align: left; border-radius: var(--r1);
          transition: background var(--t1); }
.sec__o:hover { background: var(--mist); }
.sec__o.on { background: var(--brand-50); }
.sec__o-a { font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx); }
.sec__o.on .sec__o-a { color: var(--brand-700); font-weight: var(--fw-700); }
.sec__o-e { display: inline-flex; gap: 5px; flex: none; }
.sec__o-e i { font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: var(--rp);
              color: var(--tx-mute); background: var(--mist-2); }
.sec__kk { color: var(--ok) !important; background: #EAF7F0 !important; font-weight: var(--fw-700); }



/* Arac cubugundaki siralama kutusu — kompakt, aciklamali secenekler */
.sec--sira { min-width: 210px; }
.sec--sira .sec__b { min-height: 42px; gap: var(--s2); font-size: var(--fs-2xs); }
.sec--sira .sec__b > svg:first-child { color: var(--tx-faint); }
.sec--sira .sec__b > span { flex: 1; }
.sec--sira .sec__ls { min-width: 240px; }
.sec__o-a small { display: block; margin-top: 2px; font-size: 10px;
                  font-weight: var(--fw-500); color: var(--tx-faint); }
.sec__o > svg { flex: none; opacity: 0; color: var(--brand); }
.sec__o.on > svg { opacity: 1; }


/* ==========================================================================
   SAYFA BASLIGI (.kb)
   --------------------------------------------------------------------------
   Kategori, lokasyon ve rezervasyon sayfalarinin ortak ust bandi.
   ========================================================================== */
.kb { padding-block: var(--s6) var(--s7); background: var(--mist); border-bottom: 1px solid var(--line); }

.kb__yol { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
           font-size: var(--fs-3xs); color: var(--tx-mute); margin-bottom: var(--s4); }
.kb__yol a { transition: color var(--t1); }
.kb__yol a:hover { color: var(--brand); }
.kb__yol svg { opacity: .5; }
.kb__yol [aria-current] { color: var(--tx); font-weight: var(--fw-600); }

/* Sag ustteki tur sayaci kaldirildi (adet zaten arac cubugunda yaziyor);
   bosalan yer giris metnine verildi. */
/* Sayfa icindeki tum icerik sarmalayicilari ayni genislikte:
   tur listesiyle birebir hizali, kap genisligini tam kullanir. */
.kb__ic { max-width: 100%; }
.kb__b  { font-size: var(--fs-h1); }
.kb__a  { margin-top: var(--s3); font-size: var(--fs-s);
          line-height: 1.7; color: var(--tx-mute); }

/* Dar surum: form/akis sayfalarinda band bunaltmasin */
.kb--dar { padding-block: var(--s5); }
.kb--dar .kb__yol { margin-bottom: var(--s3); }
.kb--dar .kb__b { font-size: var(--fs-h3); }


/* ==========================================================================
   MODAL (.mdl) — site geneli standart
   --------------------------------------------------------------------------
   Taksit tablosu, sozlesme metni, uyari… acilir pencere gereken her yer bunu
   kullanir. Yerli <dialog> yerine kendi kutusu: konumlandirmasi ve animasyonu
   tarayicilar arasinda ayni davransin diye.

   JS yalnizca [hidden] ozniteligini kaldirir; gerisini CSS yapar.
   ========================================================================== */
.mdl { position: fixed; inset: 0; z-index: var(--z-dr);
       display: flex; align-items: center; justify-content: center;
       padding: var(--s5); }

.mdl__ort { position: absolute; inset: 0; background: rgba(16,30,54,.62);
            backdrop-filter: blur(2px); animation: mdl-ort .2s var(--e); }

.mdl__kt { position: relative; z-index: 1;
           display: flex; flex-direction: column;
           width: 100%; max-width: 520px; max-height: calc(100vh - var(--s8));
           background: var(--white); border-radius: var(--r3);
           box-shadow: 0 24px 64px rgba(16,30,54,.28);
           overflow: hidden; animation: mdl-gir .24s var(--e); }
.mdl__kt--genis { max-width: 1080px; }

@keyframes mdl-ort { from { opacity: 0; } to { opacity: 1; } }
@keyframes mdl-gir { from { opacity: 0; transform: translateY(14px) scale(.985); }
                     to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mdl__ort, .mdl__kt { animation: none; }
}

.mdl__bas { flex: none; display: flex; align-items: center; justify-content: space-between;
            gap: var(--s4); padding: var(--s4) var(--s5);
            border-bottom: 1px solid var(--line); }
.mdl__b { font-size: var(--fs-s); font-weight: var(--fw-800); color: var(--tx); }
.mdl__kp { display: inline-flex; align-items: center; justify-content: center;
           width: 34px; height: 34px; flex: none; color: var(--tx-mute);
           border-radius: var(--rp); transition: all var(--t1); }
.mdl__kp:hover { color: var(--tx); background: var(--mist-2); transform: rotate(90deg); }

/* Govde uzun icerikte kendi icinde kayar — sayfa arkada sabit kalir */
.mdl__gov { flex: 1; min-height: 0; overflow-y: auto;
            padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }

.mdl__alt { flex: none; padding: var(--s4) var(--s5);
            background: var(--mist); border-top: 1px solid var(--line); }

/* Modal acikken arka plan kaymasin */
.mdl-acik { overflow: hidden; }

@media (max-width: 620px) {
  .mdl { padding: 0; align-items: flex-end; }
  .mdl__kt { max-width: none; max-height: 92vh;
             border-radius: var(--r3) var(--r3) 0 0; }
}


/* ==========================================================================
   FORM STANDARDI — .alan · .onk · .rdo · .slc
   --------------------------------------------------------------------------
   Sitenin HER form alani bunu kullanir: rezervasyon, uyelik, iletisim,
   filtre kutulari… Daha once rezervasyon.css ve odeme.css icinde duruyordu;
   o dosyalari yuklemeyen sayfalarda (giris, uye ol, takvim) girisler
   bicimsiz kaliyordu. Standart burada, tek yerde.

   Olculer odeme ekranindaki surumden alindi: 48px yukseklik, 1.5px kenarlik,
   okunakli punto. Silik gorunen ince kenarlikli surum birakildi.
   ========================================================================== */

/* -- Alan (etiket + giris) -- */
.alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.alan--tam { grid-column: 1 / -1; }

.alan__e { font-size: 11px; font-weight: var(--fw-700); letter-spacing: .02em;
           color: var(--tx-mute); }
.alan__e small { font-weight: var(--fw-400); color: var(--tx-faint); }
.alan__e svg { vertical-align: -2px; }

.alan__g { width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
           font-family: var(--font); font-size: var(--fs-xs); font-weight: var(--fw-600);
           color: var(--tx); background: var(--white);
           border: 1.5px solid #CBD5E3; border-radius: var(--r2);
           transition: border-color var(--t1), box-shadow var(--t1); }
.alan__g:hover  { border-color: var(--brand-200); }
.alan__g:focus  { border-color: var(--brand); outline: none;
                  box-shadow: 0 0 0 3px var(--brand-50); }
.alan__g::placeholder { font-weight: var(--fw-400); color: var(--tx-faint); }
.alan__g:disabled { color: var(--tx-faint); background: var(--mist); cursor: not-allowed; }

/* Tarayicinin kendi dogrulamasi — yalnizca kullanici alandan ciktiktan sonra */
.alan__g:user-invalid { border-color: var(--no); box-shadow: 0 0 0 3px var(--no-bg); }

textarea.alan__g { min-height: 88px; resize: vertical; line-height: 1.6;
                   font-weight: var(--fw-400); }


/* -- Acilir liste --
   Yerli ok tarayicidan tarayiciya degisir; gizlenip kendi okumuz konur. */
.slc { position: relative; display: flex; align-items: center; }
.slc select { appearance: none; padding-right: 40px; cursor: pointer; }
.slc__ok { position: absolute; right: var(--s3); color: var(--tx-mute);
           pointer-events: none; }


/* -- Onay kutusu --
   Yerli kutu gizlenir, gorunumu tam denetlenen bir kutu cizilir; klavye ve
   ekran okuyucu icin gercek input yerinde kalir. */
.onk { display: flex; align-items: flex-start; gap: var(--s3);
       padding: var(--s3); margin-inline: calc(var(--s3) * -1);
       border-radius: var(--r2); cursor: pointer;
       transition: background var(--t1); }
.onk:hover { background: var(--mist); }

.onk input { position: absolute; width: 1px; height: 1px; opacity: 0;
             margin: 0; pointer-events: none; }

.onk__kutu { flex: none; display: inline-flex; align-items: center; justify-content: center;
             width: 20px; height: 20px; margin-top: 1px; color: transparent;
             background: var(--white); border: 1.5px solid var(--line);
             border-radius: 6px; transition: all var(--t1); }
.onk__kutu svg { width: 12px; height: 12px; }

.onk:hover .onk__kutu            { border-color: var(--brand-200); }
.onk input:checked + .onk__kutu  { color: var(--white); background: var(--brand);
                                   border-color: var(--brand); }
.onk input:focus-visible + .onk__kutu { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Dogrulama basarisiz — JS .onk--hata ekler */
.onk--hata .onk__kutu { border-color: var(--no); box-shadow: 0 0 0 3px rgba(200,50,42,.12); }
.onk--hata .onk__m    { color: var(--no); }

.onk__m { font-size: var(--fs-3xs); line-height: 1.65; color: var(--tx-soft); }
.onk__d { vertical-align: -1px; margin-left: 2px; opacity: .6; }
.onk__z { color: var(--no); }

/* Sozlesme adi — baglanti degil, metni acan dugme */
.onk__a { font-weight: var(--fw-700); color: var(--brand-700);
          text-decoration: underline; text-underline-offset: 3px;
          transition: color var(--t1); }
.onk__a:hover { color: var(--brand); }

.onk--kucuk { padding: var(--s2) var(--s3); }
.onk--kucuk .onk__kutu { width: 18px; height: 18px; }
.onk--kucuk .onk__m { font-size: var(--fs-3xs); color: var(--tx); }

/* Onay listesi — birden fazla sozlesme bir arada */
.onk__ls { display: flex; flex-direction: column;
           padding: var(--s4) var(--s5); margin-top: var(--s5);
           background: var(--mist); border: 1px solid var(--line-soft);
           border-radius: var(--r2); }
.onk__ls-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); }
.onk__ls-b svg { color: var(--brand); }
.onk__ls .onk { margin-inline: 0; padding-inline: var(--s2); }
.onk__ls .onk__m { font-size: var(--fs-2xs); }


/* -- Radyo -- */
.rdo { display: inline-flex; align-items: flex-start; gap: var(--s3);
       padding: var(--s2) var(--s3); margin-inline: calc(var(--s3) * -1);
       border-radius: var(--r2); cursor: pointer;
       transition: background var(--t1); }
.rdo:hover { background: var(--mist); }
.rdo input { position: absolute; width: 1px; height: 1px; opacity: 0;
             margin: 0; pointer-events: none; }

.rdo__im { flex: none; width: 18px; height: 18px; margin-top: 1px;
           background: var(--white); border: 1.5px solid var(--line);
           border-radius: var(--rp); transition: all var(--t1); }
.rdo:hover .rdo__im { border-color: var(--brand-200); }
.rdo input:checked + .rdo__im { border-width: 5px; border-color: var(--brand); }
.rdo input:focus-visible + .rdo__im { outline: 2px solid var(--brand); outline-offset: 2px; }

.rdo__m { font-size: var(--fs-3xs); line-height: 1.5; color: var(--tx-soft); }

/* Kart bicimli radyo — secenekler yan yana kutu olarak durur */
.rdo--kart { flex: 1; align-items: center; padding: var(--s4);
             margin-inline: 0; background: var(--white);
             border: 1.5px solid var(--line); border-radius: var(--r2); }
.rdo--kart:hover { background: var(--white); border-color: var(--brand-200); }
.rdo--kart:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.rdo--kart .rdo__m { display: flex; flex-direction: column; gap: 2px; }
.rdo--kart b { display: inline-flex; align-items: center; gap: var(--s2);
               font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--tx); }
.rdo--kart b svg { color: var(--brand); }
.rdo--kart small { font-size: 10px; color: var(--tx-mute); }


/* ==========================================================================
   YAPISKAN YAN SUTUNLAR — dipten yapisma
   --------------------------------------------------------------------------
   SORUN: ekrandan uzun bir sutun USTTEN yapisirsa alt ucu hicbir zaman
   gorunmez; kullanicinin menunun dibini gorebilmesi icin sagdaki icerigi
   sonuna kadar kaydirmasi gerekiyordu.

   DENENIP VAZGECILEN: sutunu kendi icinde kaydirmak. Sayfa icinde ikinci
   bir kaydirma alani, tekerlegin nereye etki edecegini belirsizlestiriyor
   ve menuyu bir kutuya hapsediyordu.

   COZUM: ekrana SIGMAYAN sutuna NEGATIF bir ust kisit verilir —
   top = ekran yuksekligi - sutun yuksekligi - 10px. Sutun sayfayla
   birlikte yukari kayar; alt ucu ekranin 10px uzerine geldiginde
   kilitlenir, yukari donuldugunde ayni noktada birakir.
   Ekrana SIGAN sutun eskisi gibi ustten yapisir.

   NEDEN "bottom: 10px" DEGIL: sutun kapsayici blogunun en ustunde
   duruyor; alt kisit onu yukari itmek ister, tarayici ise sutunu
   kapsayicinin disina tasirmamak icin bu kaydirmayi sifira kirpar.
   Denendi, hicbir sey yapismadi.

   Hangi sutunun sigmadigini JS olcer (js/app.js -> yapiskanSutunlar) ve
   .yks--dip sinifini ekler. JS yoksa her sey eski davranista kalir.

   Secicilerde sinif iki kez yazili: temel kurallar bolum dosyalarinda ve
   app.css'ten SONRA yuklendigi icin ozgullugun onlari gecmesi gerekiyor.
   ========================================================================== */
.tkv__yan.yks--dip,  .otl__yan.yks--dip,  .krm__yan.yks--dip,
.blg__yan.yks--dip,  .kt__yan.yks--dip,   .szf__yan.yks--dip,
.otd__rz.yks--dip,   .lkm.yks--dip,
.rzv__yan > .ozt.yks--dip,
.td__yan .rez.yks--dip {
  /* Yedek deger: sinif bir sekilde ozellik olmadan uygulanirsa
     sutun eski ustten yapisma davranisina duser. */
  top: var(--yks-ust, calc(var(--hd-h-s) + var(--s4)));
}

/* Mobil cekmecede uye karti — avatar + ad + hesabima gecis */
.ckm__uye{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);
          padding:var(--s3) var(--s4);background:var(--mist);
          border:1px solid var(--line);border-radius:var(--r3);
          transition:border-color var(--t1),background var(--t1);}
.ckm__uye:hover{background:var(--brand-50);border-color:var(--brand-200);}
.ckm__uye-av{flex:none;display:inline-flex;align-items:center;justify-content:center;
             width:42px;height:42px;font-size:var(--fs-2xs);font-weight:var(--fw-800);
             color:var(--white);background:var(--g-brand);border-radius:var(--rp);}
.ckm__uye-i{flex:1;min-width:0;}
.ckm__uye-i b{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-700);color:var(--tx);
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ckm__uye-i i{display:block;font-size:var(--fs-3xs);font-style:normal;color:var(--tx-mute);}
.ckm__uye > svg{flex:none;color:var(--brand);}


/* ==========================================================================
   12. SIKCA SORULAN SORULAR
   --------------------------------------------------------------------------
   <details>/<summary> uzerine kuruludur — JS calismasa da acilir kapanir,
   arama motoru ve yapay zeka araclari icerigi her durumda okur.
   ========================================================================== */
.sss { background: var(--white); }
.sss__ic { max-width: 100%; }

.sss__bas { margin-bottom: var(--s5); font-size: var(--fs-h2);
            font-weight: var(--fw-800); letter-spacing: var(--ls-tt); color: var(--tx); }

.sss__ls { display: flex; flex-direction: column; gap: var(--s3); }

.sss__o {
  background: var(--mist);
  border: 1px solid transparent;
  border-radius: var(--r3);
  transition: background var(--t2), border-color var(--t2), box-shadow var(--t2);
}
.sss__o:hover { border-color: var(--line); }
.sss__o[open] { background: var(--white); border-color: var(--brand-200); box-shadow: var(--sh2); }

.sss__s {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5);
  font-size: var(--fs-s); font-weight: var(--fw-700); line-height: 1.45;
  color: var(--tx); cursor: pointer; list-style: none;
  transition: color var(--t1);
}
.sss__s::-webkit-details-marker { display: none; }
.sss__s:hover { color: var(--brand); }
.sss__o[open] .sss__s { color: var(--brand-700); }

.sss__ik {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: var(--brand);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--rp); transition: transform var(--t2), background var(--t2);
}
.sss__o[open] .sss__ik { transform: rotate(180deg); color: var(--white);
                         background: var(--brand); border-color: var(--brand); }

.sss__c { padding: 0 var(--s5) var(--s5); }
.sss__c p { font-size: var(--fs-s); line-height: 1.75; color: var(--tx-soft); }

/* Acilirken kisa bir yumusama */
.sss__o[open] .sss__c { animation: sss-ac .28s var(--e); }
@keyframes sss-ac {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sss__o[open] .sss__c { animation: none; } }

.sss__yardim { margin-top: var(--s5); font-size: var(--fs-2xs); color: var(--tx-mute); }
.sss__yardim a { font-weight: var(--fw-700); color: var(--brand);
                 text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .sss__s { padding: var(--s4); font-size: var(--fs-xs); }
  .sss__c { padding: 0 var(--s4) var(--s4); }
}

/* -- Iki sutunlu varyant (ana sayfa) --
   Solda baslik, kisa aciklama ve iletisim; sagda akordeon. Tek sutunda
   baslik ile ilk sorunun arasi bos kaliyordu; yan yana durunca bolum
   hem daha derli hem daha kisa. */
.sss__ic--yan { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
                gap: var(--s7) var(--s8); align-items: start; }
.sss__ic--yan .sss__sol { position: sticky; top: calc(var(--hd-h-s) + var(--s5)); }
.sss__ic--yan .sss__bas { margin-bottom: var(--s4); }
.sss__alt { margin-bottom: var(--s5); font-size: var(--fs-s); line-height: 1.7;
            color: var(--tx-mute); }
.sss__eyl { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.sss__ic--yan .sss__yardim { margin-top: 0; }

@media (max-width: 900px) {
  .sss__ic--yan { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .sss__ic--yan .sss__sol { position: static; }
}

/* ==========================================================================
   GOMULU HARITA YER TUTUCUSU (.hrt-y / .hrt-n)
   --------------------------------------------------------------------------
   Lokasyon, otel ve iletisim sayfalarindaki Google haritalari KENDILIGINDEN
   acilir; "Haritayı Göster" dugmesi yok. iframe, harita goruse yaklasinca
   JS tarafindan ekleniyor (js/lokasyon.js, js/otel.js, js/iletisim.js).

   Uc sayfada da ayni oldugu icin stil burada, tek yerde duruyor — onceden
   ucu de kendi dosyasinda ayri ayri tanimliyordu.

   .hrt-y  yuklenene kadar parlayan yer tutucu; bos kutu "bozuk" duruyordu
   .hrt-n  JS calismayan tarayicida Google Haritalar baglantisi
   ========================================================================== */
.hrt-y { position: absolute; inset: 0;
         background: var(--isk-g); background-size: 200% 100%;
         animation: isk-kay 1.4s linear infinite; }
.yuklu > .hrt-y { display: none; }

.hrt-n { position: absolute; inset: 0; display: flex;
         align-items: center; justify-content: center; gap: var(--s2);
         font-size: var(--fs-3xs); font-weight: var(--fw-700);
         color: var(--tx); background: var(--mist-2); }
.hrt-n svg { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .hrt-y { animation: none; }
}

/* ==========================================================================
   YAN MENULERIN DAR EKRAN BICIMI (.ymn-serit)
   --------------------------------------------------------------------------
   Kurumsal (.krm__mn) ve uye (.uya__mn) sayfalarinda sol sutundaki menu,
   dar ekranda iki sutunlu bir izgaraya doniyordu. Dokuz baslikla bu, ekranin
   ustunde bes sira yer kapliyor ve asil icerigi asagi itiyordu.

   Yeni bicim: TEK SATIR. Solda sabit bir etiket, sagda yatay kayan
   baglantilar. Sayfa acilir acilmaz icerik gorunur hâle geliyor ve menu
   yine tam erisilebilir kaliyor.

   Sag ucta maske: seridin devam ettigini gosterir. Kaydirma cubugu
   gizlenir — dokunmatikte zaten gorunmuyor, masaustunde de gurultu.

   Iki menu de ayni bicimi kullaniyor; kurallar tek yerde tutulur ki biri
   degisip digeri unutulmasin.
   ========================================================================== */
@media (max-width: 940px) {
  .krm__mn, .uya__mn { display: flex; align-items: center; gap: var(--s2);
                       padding: 6px 0 6px var(--s3); overflow: visible; }

  /* Etiket solda sabit kalir, kaymaz */
  .krm__mn-b { flex: none; padding: 0 var(--s2) 0 0; margin-right: var(--s2);
               border-right: 1px solid var(--line); }

  .krm__mn ul, .uya__mn ul {
    display: flex; gap: 4px; flex: 1; min-width: 0; padding: 0 var(--s3) 0 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .krm__mn ul::-webkit-scrollbar, .uya__mn ul::-webkit-scrollbar { display: none; }

  .krm__mn li, .uya__mn li { flex: none; }

  .krm__mn a, .uya__mn a {
    white-space: nowrap; padding: 8px var(--s4);
    border-radius: var(--rp); background: var(--mist); }
  .krm__mn a.on, .uya__mn a.on {
    color: var(--white); background: var(--brand); box-shadow: none; }
  .krm__mn a.on svg, .uya__mn a.on svg { color: var(--white); }

  /* Satir ici baglantida sag ok yer kaplamasin */
  .krm__mn a > svg:last-child { display: none; }

  /* "Cikis" grubu ayri satira inmesin; seritte akmaya devam etsin */
  .uya__mn-ayrik { display: contents; }
}

/* ==========================================================================
   HESAP ACILIR MENUSU (.hsp)
   --------------------------------------------------------------------------
   Basliktaki bas harfli avatara basilinca acilir. Onceden avatar dogrudan
   uye.php'ye gidiyordu; rezervasyonlarina bakmak isteyen ziyaretci once o
   sayfaya giriyor, sonra yan menuden geciyordu.

   Kutu SAGA HIZALI: avatar sag ust kosede duruyor, sola dogru acilmazsa
   ekranin disina tasar.
   ========================================================================== */
.hd__hsp { position: relative; display: inline-flex; }

.hsp { position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-dd);
       width: 244px; padding: var(--s2);
       background: var(--white); border: 1px solid var(--line);
       border-radius: var(--r3); box-shadow: 0 14px 38px rgba(16,30,54,.18);
       animation: hsp-ac .16s var(--e); }
@keyframes hsp-ac { from { opacity: 0; transform: translateY(-6px); }
                    to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hsp { animation: none; } }

.hsp__kim { display: flex; align-items: center; gap: var(--s3);
            padding: var(--s3); margin-bottom: var(--s2);
            background: var(--mist); border-radius: var(--r2); }
.hsp__av { flex: none; display: inline-flex; align-items: center; justify-content: center;
           width: 34px; height: 34px;
           font-size: var(--fs-3xs); font-weight: var(--fw-800);
           color: var(--white); background: var(--g-brand); border-radius: var(--rp); }
.hsp__kim-i { min-width: 0; }
.hsp__kim-i b { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-800);
                color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsp__kim-i i { display: block; margin-top: 1px; font-size: 10px; font-style: normal;
                color: var(--tx-faint); overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }

.hsp ul { list-style: none; }
.hsp a { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s3);
         font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-soft);
         border-radius: var(--r2); transition: all var(--t1); }
.hsp a svg { color: var(--tx-faint); transition: color var(--t1); }
.hsp a:hover { color: var(--brand-700); background: var(--mist); }
.hsp a:hover svg { color: var(--brand); }

.hsp__ayrik { margin-top: var(--s2); padding-top: var(--s2);
              border-top: 1px solid var(--line-soft); }
.hsp__ayrik a { color: var(--no); }
.hsp__ayrik a:hover { color: var(--no); background: #FCEDEC; }
.hsp__ayrik a:hover svg { color: var(--no); }

/* Dar ekranda kutu ekrandan tasmasin */
@media (max-width: 420px) {
  .hsp { width: min(244px, calc(100vw - var(--s6))); }
}