/* ============================================================
   PANEL SOL MENÜSÜ — alıcı + satıcı ORTAK bileşen
   Claude Design handoff "Oyuneks Panel Sol Menu" (18.09.2026).

   Önceden aynı görünüm iki ayrı yerde yaşıyordu: alıcı ap* (panel-yan-css
   blade içi <style>), satıcı vp* (vendor-panel.css + vendor-leftbar içi
   <style>). Tek sınıf seti (pm*) ikisini birleştirir; fark yalnız
   gruplardadır (blade: _shared/panel-menu.blade.php).

   Onaylanan kararlar: yalın bölüm (kart içinde kart yok), gruplar bağımsız
   akordiyon, aktif öğede sol çubuk YOK (tint zemin + accent metin), ikonlar
   SVG, dar ekranda (≤991) açılır çekmece.
   ============================================================ */

.pmYan{
    --pm-kart:#20212B;
    --pm-ust:#1B1C26;          /* rol anahtarı kabı */
    --pm-bakiye:#14151C;       /* bakiye kartı */
    --pm-bakiye-cerceve:#2A2B38;
    --pm-ikon:#272834;         /* öğe ikon kutusu, hover zemini */
    --pm-cizgi:#333444;
    --pm-ghost:#4E4F5C;
    --pm-ink:#C8C9D8;
    --pm-ink-2:#abacb5;
    --pm-muted:#8B8C99;
    --pm-accent:#80F1B1;
    --pm-accent-ink:#0A2416;
    --pm-accent-10:rgba(128,241,177,.10);
    --pm-accent-12:rgba(128,241,177,.12);
    --pm-accent-16:rgba(128,241,177,.16);
    --pm-accent-golge:rgba(128,241,177,.34);
    --pm-ipucu-bg:#0E0F15;
    --pm-ipucu-ink:#E7E8F2;
    --pm-ipucu-cerceve:#3A3B4B;
    --pm-sayac:#E8C268;
    --pm-sayac-bg:rgba(232,194,104,.16);
    --pm-sayac-cerceve:rgba(232,194,104,.40);
    --pm-cikis:#E8635A;
    --pm-cikis-bg:rgba(232,99,90,.06);
    --pm-cikis-cerceve:rgba(232,99,90,.45);
    --pm-golge:none;

    display:flex;flex-direction:column;
    background:var(--pm-kart);border:1px solid var(--pm-cizgi);border-radius:12px;
    box-shadow:var(--pm-golge);overflow:hidden;
    color:var(--pm-ink);font-size:14px;line-height:1.4;
}
body.light .pmYan{
    --pm-kart:#FFFFFF;
    --pm-ust:#F5F4EE;
    --pm-bakiye:#F0EEE6;
    --pm-bakiye-cerceve:#E8E6DF;
    --pm-ikon:#F0EEE6;
    --pm-cizgi:#E3E1D9;
    --pm-ghost:#C7C5BC;
    --pm-ink:#1F1E1D;
    --pm-ink-2:#6B6A65;
    --pm-muted:#5F5E58;
    --pm-accent:#137E4C;
    --pm-accent-ink:#FFFFFF;
    --pm-accent-10:rgba(19,126,76,.08);
    --pm-accent-12:rgba(19,126,76,.09);
    --pm-accent-16:rgba(19,126,76,.13);
    --pm-accent-golge:rgba(19,126,76,.30);
    --pm-ipucu-bg:#1F1E1D;
    --pm-ipucu-ink:#FFFFFF;
    --pm-ipucu-cerceve:#1F1E1D;
    --pm-sayac:#8A6410;
    --pm-sayac-bg:rgba(138,100,16,.12);
    --pm-sayac-cerceve:rgba(138,100,16,.34);
    --pm-cikis:#C4442F;
    --pm-cikis-bg:rgba(196,68,47,.06);
    --pm-cikis-cerceve:rgba(196,68,47,.40);
    --pm-golge:0 1px 2px rgba(31,30,29,.05);
}
.pmYan *,.pmYan *::before,.pmYan *::after{box-sizing:border-box}
.pmYan a{color:inherit;text-decoration:none}
.pmYan svg{display:block;flex:none}
.pmYan [hidden]{display:none!important}

/* ---- kimlik kartı ---- */
.pmKim{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--pm-cizgi)}
.pmKimGorsel{flex:none;width:40px;height:40px;border-radius:11px;overflow:hidden;
    background:var(--pm-ikon);border:1px solid var(--pm-cizgi);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:var(--pm-ink-2);text-transform:uppercase}
.pmKimGorsel img{width:100%;height:100%;object-fit:cover}
.pmKimAd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pmKimAd b{font-size:13.5px;font-weight:700;color:var(--pm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmKimAd small{font-size:11px;color:var(--pm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmKimDuzen{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;border:1px solid var(--pm-cizgi);color:var(--pm-muted);transition:color .14s,border-color .14s}
.pmKimDuzen:hover{color:var(--pm-ink);border-color:var(--pm-ghost)}

/* ---- rol anahtarı ---- */
.pmRolKap{padding:10px 14px 0}
.pmRol{display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--pm-ust);border:1px solid var(--pm-cizgi)}
.pmRolOge{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:32px;
    border-radius:7px;background:transparent;color:var(--pm-muted);transition:background .14s,color .14s}
.pmRolOge span{min-width:0;font-size:12px;font-weight:600;color:var(--pm-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.pmRolOge:hover{background:var(--pm-accent-12);color:var(--pm-accent)}
a.pmRolOge:hover span{color:var(--pm-accent)}
.pmRolOge.aktif{background:var(--pm-accent);color:var(--pm-accent-ink)}
.pmRolOge.aktif span{font-weight:800;color:var(--pm-accent-ink)}
/* Üç rol (bayi üyesi): 248px'te ikon + üç kelime sığmaz, ikon düşer. */
.pmRol.uclu .pmRolOge{gap:0}
.pmRol.uclu .pmRolOge svg{display:none}
.pmRol.uclu .pmRolOge span{font-size:11px}

/* ---- bakiye kartı ---- */
.pmBakiyeKap{flex:none;padding:10px 12px 12px}
/* Ölçüler tasarımda 248px menü için verilmişti; sütun (col-md-2, 1550
   kapsayıcı) 234px geliyor. İkon/düğme 32→30, boşluk 10→9 ve tutar 15→14px:
   "990.800,00 TL" gibi geniş rakamlar kırpılmadan sığsın. */
.pmBakiye{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:11px;
    background:var(--pm-bakiye);border:1px solid var(--pm-bakiye-cerceve);transition:border-color .14s}
.pmBakiye:hover{border-color:var(--pm-ghost)}
.pmBakiyeIkon{flex:none;width:30px;height:30px;border-radius:9px;background:var(--pm-accent-10);
    display:flex;align-items:center;justify-content:center;color:var(--pm-accent)}
.pmBakiyeMetin{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pmBakiyeMetin span{font-size:10.5px;font-weight:700;color:var(--pm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmBakiyeMetin b{font-size:14px;font-weight:800;color:var(--pm-accent);font-variant-numeric:tabular-nums;
    letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmBakiyeBtn{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    border-radius:9px;background:var(--pm-accent);color:var(--pm-accent-ink);cursor:pointer;
    transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
/* Kartin tamami link; asil eylem dugmesi. Imlec dugmenin UZERINE gelince
   belirgin degissin (kalkma + halka + golge) ki tiklanir oldugu anlasilsin
   -- karta gelindiginde yalnizca hafif bir parlama var (Ozgur 18.09). */
.pmBakiye:hover .pmBakiyeBtn{filter:brightness(1.06)}
.pmBakiyeBtn:hover{filter:brightness(1.12);transform:translateY(-1px);
    box-shadow:0 3px 10px var(--pm-accent-golge),0 0 0 3px var(--pm-accent-16)}
.pmBakiyeBtn:active{transform:translateY(0);filter:brightness(.95);
    box-shadow:0 0 0 3px var(--pm-accent-16)}
.pmBakiye:focus-visible .pmBakiyeBtn{box-shadow:0 0 0 3px var(--pm-accent-16)}

/* İpucu balonu: tarayıcının kendi title kutusu geç açılıyor ve panelin
   diliyle alakası yok (Özgür 18.09) -- data-ipucu ile kendi balonumuzu
   çiziyoruz. .pmYan overflow:hidden olduğu için balon menünün DIŞINA
   taşamaz: düğmenin ÜSTÜNDE açılır ve sağ kenarı düğmeye hizalanır,
   böylece sağdan kırpılmaz. Düğmenin hover transform değerinde scale YOK,
   yoksa balonun yazısı da ölçekleniyordu. */
.pmBakiyeBtn{position:relative}
.pmBakiyeBtn::after,.pmBakiyeBtn::before{opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .13s ease,transform .13s ease,visibility .13s}
.pmBakiyeBtn::after{content:attr(data-ipucu);position:absolute;bottom:calc(100% + 9px);right:-3px;
    transform:translateY(3px);padding:5px 9px;border-radius:8px;white-space:nowrap;
    background:var(--pm-ipucu-bg);border:1px solid var(--pm-ipucu-cerceve);color:var(--pm-ipucu-ink);
    font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:-.1px;
    box-shadow:0 4px 14px rgba(0,0,0,.28);z-index:5}
.pmBakiyeBtn::before{content:"";position:absolute;bottom:calc(100% + 4px);right:11px;
    width:8px;height:8px;transform:translateY(3px) rotate(45deg);
    background:var(--pm-ipucu-bg);border-right:1px solid var(--pm-ipucu-cerceve);
    border-bottom:1px solid var(--pm-ipucu-cerceve);z-index:6}
.pmBakiyeBtn:hover::after,.pmBakiye:focus-visible .pmBakiyeBtn::after{
    opacity:1;visibility:visible;transform:translateY(0)}
.pmBakiyeBtn:hover::before,.pmBakiye:focus-visible .pmBakiyeBtn::before{
    opacity:1;visibility:visible;transform:translateY(0) rotate(45deg)}
@media (prefers-reduced-motion:reduce){
    .pmBakiyeBtn,.pmBakiyeBtn:hover,.pmBakiyeBtn:active{transition:none;transform:none}
    .pmBakiyeBtn::after,.pmBakiyeBtn::before{transition:none}
}
/* Yeni kazanç geldiğinde bir kez parlar (satıcı; vendor-master JS ekler). */
@keyframes pmParla{0%{box-shadow:0 0 0 0 rgba(128,241,177,.55)}70%{box-shadow:0 0 0 10px rgba(128,241,177,0)}100%{box-shadow:0 0 0 0 rgba(128,241,177,0)}}
.pmBakiye.vpParaYeni{animation:pmParla 1.4s ease-out 2}

/* ---- gruplar ---- */
.pmGruplar{display:flex;flex-direction:column;gap:10px;padding:2px 12px 12px}
.pmGrup{display:flex;flex-direction:column}
/* Yalın bölüm: kart yok, ayırıcı ince çizgi (2. bölümden itibaren). */
.pmGrup + .pmGrup{padding-top:12px;border-top:1px solid var(--pm-cizgi)}
.pmGrupBas{display:flex;align-items:center;gap:8px;padding:0 10px 6px;cursor:pointer;
    background:none;border:0;width:100%;font:inherit;text-align:left}
.pmGrupAd{flex:1;min-width:0;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--pm-ink-2);transition:color .14s}
.pmGrupBas.acik .pmGrupAd{color:var(--pm-muted)}
.pmGrupBas:hover .pmGrupAd{color:var(--pm-ink)}
.pmGrupSayi{flex:none;font-size:11px;font-weight:700;color:var(--pm-muted);font-variant-numeric:tabular-nums}
.pmGrupBas.acik .pmGrupSayi{display:none}
.pmGrupOk{flex:none;color:var(--pm-muted);display:flex}
.pmGrupBas .pmOkAcik{display:none}
.pmGrupBas.acik .pmOkKapali{display:none}
.pmGrupBas.acik .pmOkAcik{display:flex}
.pmListe{display:none;flex-direction:column;gap:1px}
.pmGrup.acik .pmListe{display:flex}

/* ---- öğe ---- */
.pmOge{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:9px;background:transparent;
    color:var(--pm-ink);cursor:pointer;transition:background .14s}
.pmOge:hover{background:var(--pm-ikon);color:var(--pm-ink)}
.pmOgeIkon{flex:none;width:28px;height:28px;border-radius:8px;background:var(--pm-ikon);
    display:flex;align-items:center;justify-content:center;color:var(--pm-muted);transition:background .14s,color .14s}
.pmOgeAd{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--pm-ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmOge.active{background:var(--pm-accent-12)}
.pmOge.active .pmOgeIkon{background:var(--pm-accent-16);color:var(--pm-accent)}
.pmOge.active .pmOgeAd{font-weight:700;color:var(--pm-accent)}
.pmSayac{flex:none;min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center;
    border-radius:99px;background:var(--pm-sayac-bg);border:1px solid var(--pm-sayac-cerceve);
    font-size:10.5px;font-weight:800;color:var(--pm-sayac);font-variant-numeric:tabular-nums}
.pmOgeOk{flex:none;color:var(--pm-muted);display:flex;transition:transform .18s}
.pmOge.acik .pmOgeOk{transform:rotate(180deg)}

/* ---- alt liste (ikon yok, girinti hiyerarşiyi kurar) ---- */
.pmAlt{display:none;flex-direction:column;gap:1px}
.pmAlt.acik{display:flex}
.pmAlt a{display:block;padding:5px 8px 5px 44px;border-radius:8px;font-size:12.5px;font-weight:500;
    color:var(--pm-ink);transition:background .14s}
.pmAlt a:hover{background:var(--pm-ikon);color:var(--pm-ink)}
.pmAlt a.active{background:var(--pm-accent-12);font-weight:700;color:var(--pm-accent)}

/* ---- çıkış ---- */
.pmCikisKap{padding:10px 14px 14px;border-top:1px solid var(--pm-cizgi)}
.pmCikis{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:9px;
    border:1px solid var(--pm-cikis-cerceve);background:var(--pm-cikis-bg);
    font-size:12.5px;font-weight:700;color:var(--pm-cikis);transition:.15s}
.pmCikis:hover{color:var(--pm-cikis);border-color:var(--pm-cikis);background:var(--pm-cikis-bg);filter:brightness(1.1)}

/* ============================================================
   KABUK: sütun (≥992) ve açılır çekmece (≤991)
   ============================================================ */
/* .pmSutun Bootstrap col-md-2 ile AYNI elemanda: burada width verilmez,
   yoksa (aynı özgüllük, sonra yüklenen dosya) kolon genişliğini ezer ve
   menü tüm satırı kaplar. Genişlik yalnız çekmece kipinde verilir. */
@media(min-width:992px){
    /* Menü yapışkan; kap sütunu BOYDAN BOYA DOLDURMAZ — menü bitince biter
       (tasarım kararı; eski apYanKap/vpSidebarKap height:100% kuralı kalktı). */
    .pmSutun{position:sticky;top:16px;align-self:flex-start}
    .pmTetik{display:none}
    .pmPerde{display:none}
}
@media(max-width:991px){
    /* Sol sütun akıştan çıkınca (position:fixed) içerik kolonu 10/12'de
       kalıyor ve sağda boşluk oluyordu: tam genişliğe çıkar. */
    .pmIcerik{flex:0 0 100%;max-width:100%;width:100%}
    /* Çekmece: menü TEK kopya, sütun kabuğu çekmeceye dönüşür (ikinci kopya
       id çakışması yaratırdı). Kapalıyken ekran dışında. */
    .pmSutun{position:fixed;top:0;bottom:0;left:0;z-index:1045;width:248px;max-width:88vw;
        transform:translateX(-100%);transition:transform .22s ease;
        overflow-y:auto;-webkit-overflow-scrolling:touch}
    .pmSutun.acik{transform:translateX(0)}
    .pmSutun .pmYan{min-height:100%;border-radius:0;border-top:0;border-bottom:0;border-left:0}
    .pmPerde{position:fixed;inset:0;z-index:1044;background:rgba(12,12,16,.62);
        opacity:0;pointer-events:none;transition:opacity .22s ease}
    .pmPerde.acik{opacity:1;pointer-events:auto}
    /* Tetikleyici bar: içerik sütununun tepesinde. */
    .pmTetik{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px 12px;
        border-radius:11px;background:var(--po-kart,#20212B);border:1px solid var(--po-cerceve,#333444)}
    body.light .pmTetik{background:#FFFFFF;border-color:#E3E1D9}
    .pmTetikBtn{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
        border-radius:9px;border:1px solid #4E4F5C;background:transparent;color:#C8C9D8;cursor:pointer}
    body.light .pmTetikBtn{border-color:#C7C5BC;color:#1F1E1D}
    .pmTetikBaslik{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#C8C9D8;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    body.light .pmTetikBaslik{color:#1F1E1D}
    .pmTetikSayfa{flex:none;font-size:12px;color:#8B8C99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
    body.light .pmTetikSayfa{color:#5F5E58}
    /* Dokunma hedefi 44px (tasarım notu 4). */
    .pmOge{padding:8px}
    .pmAlt a{padding:8px 8px 8px 44px}
}
@media(prefers-reduced-motion:reduce){
    .pmSutun,.pmPerde,.pmOgeOk,.pmGrupAd{transition:none}
    .pmBakiye.vpParaYeni{animation:none}
}

/* GENİŞ EKRAN KADEMESİ YOK (eski menüde vardı, kaldırıldı): site kapsayıcısı
   1550px'te durduğu için sütun 1600px üstünde de ~234px kalıyor. Yazıları
   büyütmek yalnız taşma üretiyordu (bakiye tutarı kırpılıyordu). Tasarım
   tek ölçü veriyor. */