/*
 * Senkron Müzik — Müşteri Portalı tasarım katmanı.
 * Kaynak: docs/av-theme/uye-portali.html (v2 mockup) — birebir taşındı.
 * theme-overrides/auxero/layouts/portal.blade.php içinde yüklenen bağımsız katman.
 * Kurumsal sitenin editoryal dilinin aksine bilinçli olarak işlevsel bir SaaS
 * paneli gibi tasarlandı (açık zemin, durum rozetleri).
 */
:root{
  --ink:#0E1116; --ink-soft:#171B22;
  --paper:#F7F6F2; --paper-alt:#EFECE4;
  --card:#FFFFFF; --line:#E6E3DA;
  --text:#15171C; --text-mute:#6B6E77;
  --accent:#98bc2a; --accent-dark:#50611d; --accent-soft:#EAF3D5;
  --ok:#1FA463; --ok-soft:#E9F7EF;
  --warn:#C98A0E; --warn-soft:#FBF1DD;
  --info:#3B63E0; --info-soft:#EAEEFC;
  --mute-soft:#EEECE5;
  --radius:12px; --shadow:0 10px 26px -14px rgba(14,17,22,.18);
  font-size:16px;

  /* DÜZELTME — "sabit koyu chrome" tokenları. --ink, açık/koyu site moduna göre
     BİLİNÇLİ olarak yer değiştiriyor (bkz. altındaki .is_dark bloğu) — bu, içeriği
     temayı takip etmesi gereken yüzeyler (ör. .tab pilleri) için doğru. Ama sidebar,
     "Merhaba" banner'ı gibi HER ZAMAN koyu kalması gereken chrome yüzeyleri --ink
     kullanınca koyu modda beyaza dönüp üstündeki beyaz metin/ikonla çakışıyordu.
     Bu tokenlar (.crew-sidebar'ın kendi #12141a'sıyla aynı aile) hiçbir zaman
     .is_dark bloğunda yeniden tanımlanmıyor — o yüzden mod ne olursa olsun sabit
     kalıyorlar. */
  --chrome-bg:#12141a;
  --chrome-line:rgba(255,255,255,.09);
  --chrome-text-mute:#8A8D97;

  /* DÜZELTME — ürün resmi kutusu (.eq-media/.mini-media) her modda sabit AÇIK
     kalmalı (çoğu ürün fotoğrafı koyu renkli, koyu zeminde net görünmüyordu).
     --chrome-* tokenlarıyla aynı mantık, ters yönde: bu da .is_dark bloğunda
     hiç yeniden tanımlanmıyor, o yüzden mod ne olursa olsun sabit kalıyor. */
  --media-bg:#F4F4F4;
}
/* Site genelinde koyu mod acikken (body.is_dark), portal renk degiskenlerini
   koyu paletle degistir. Auxero'nun kendi koyu tema rengiyle (#1c1c1c) tutarli.
   Onceki tasarim bilincli olarak hep acik zeminliydi ama koyu moddayken
   beyaz/parlak gorunmesi istenmedi. */
body.is_dark.av-portal, body.is_dark .av-portal{
  --ink:#F5F5F5; --ink-soft:#E3E3E3;
  --paper:#1c1c1c; --paper-alt:#232323;
  --card:#242424; --line:#333333;
  --text:#F5F5F5; --text-mute:#9fa1a4;
  --accent-soft:#2a3a12;
  --ok-soft:#123322; --warn-soft:#332a12; --info-soft:#12203a;
  --mute-soft:#2a2a2a;
  --shadow:0 10px 26px -14px rgba(0,0,0,.6);
}
.av-portal .sb-logo.sb-logo--img{background:none;width:auto;height:40px;border-radius:0;padding:0}
.av-portal .sb-logo.sb-logo--img img{height:100%;width:auto;display:block;object-fit:contain}
.av-portal *{box-sizing:border-box;margin:0;padding:0}
.av-portal{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}
.av-portal h1,.av-portal h2,.av-portal h3,.av-portal h4{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
.av-portal a{color:inherit;text-decoration:none}
.av-portal ul{list-style:none}
.av-portal img{max-width:100%;display:block}
.av-portal .icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.av-portal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:9px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.av-portal .btn-accent{background:var(--accent);color:#fff}
.av-portal .btn-accent:hover{background:var(--accent-dark)}
.av-portal .btn-dark{background:var(--chrome-bg);color:#fff}
.av-portal .btn-outline{border-color:var(--line);background:var(--card);color:var(--text)}
.av-portal .btn-outline:hover{border-color:var(--ink)}
.av-portal .btn-sm{padding:8px 12px;font-size:12.5px;border-radius:7px}
.av-portal .btn-xs{padding:6px 10px;font-size:11.5px;border-radius:6px}
.av-portal .btn-block{width:100%}
.av-portal .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px}
.av-portal .badge.ok{background:var(--ok-soft);color:var(--ok)}
.av-portal .badge.warn{background:var(--warn-soft);color:var(--warn)}
.av-portal .badge.info{background:var(--info-soft);color:var(--info)}
.av-portal .badge.mute{background:var(--mute-soft);color:var(--text-mute)}

/* ===== APP SHELL =====
   DÜZELTME — sidebar artık 78px'lik hover-tooltipli bir ikon rayı değil, admin
   panelindeki gibi ikon+etiketin SÜREKLİ yan yana göründüğü 220px'lik sabit bir
   sütun (bkz. .crew-sidebar/.crew-nav-link — aynı desen burada da uygulandı).
   Arka plan --ink değil --chrome-bg (bkz. :root'taki not) — bu yüzden koyu modda
   beyaza dönüp üstündeki beyaz ikon/etiketle çakışmıyor. */
.av-portal .app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.av-portal .sidebar{background:var(--chrome-bg);display:flex;flex-direction:column;padding:22px 14px;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.av-portal .sb-logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#6C5CE7);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:14px;margin:0 4px 26px}
.av-portal .sb-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--chrome-text-mute);position:relative}
.av-portal .sb-link:hover{background:rgba(255,255,255,.06);color:#fff}
.av-portal .sb-link.active{background:var(--accent);color:#fff}
.av-portal .sb-link .tip{font-size:13.5px;font-weight:600;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "Ürünler" açılır menüsü — buton olarak render edilen sb-link, altında
   kategorilere giden alt link listesini aç/kapatıyor (bkz. portal.blade.php
   sonundaki script). Sunucu tarafında kataloğa aitken varsayılan olarak açık
   render edilir (.sb-submenu.open), böylece aktif dal yüklemede zaten görünür. */
.av-portal .sb-link-toggle{width:100%;background:none;border:none;font:inherit;cursor:pointer;text-align:left}
.av-portal .sb-chevron{margin-left:auto;width:14px;height:14px;flex:none;transition:transform .15s}
.av-portal .sb-link-toggle[aria-expanded="true"] .sb-chevron{transform:rotate(180deg)}
.av-portal .sb-submenu{display:none;flex-direction:column;gap:1px;padding:2px 0 6px 40px}
.av-portal .sb-submenu.open{display:flex}
.av-portal .sb-sublink{display:block;padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--chrome-text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-portal .sb-sublink:hover{background:rgba(255,255,255,.06);color:#fff}
.av-portal .sb-sublink.active{color:var(--accent)}
.av-portal .sb-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--chrome-line);display:flex;flex-direction:column;gap:2px}

.av-portal .main{display:flex;flex-direction:column;min-width:0}

/* ===== TOPBAR ===== */
.av-portal .topbar{height:76px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.av-portal .search-box{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px;width:340px;color:var(--text-mute)}
.av-portal .search-box input{border:none;background:transparent;outline:none;font-size:13.5px;flex:1;color:var(--text)}
.av-portal .top-actions{display:flex;align-items:center;gap:10px}
.av-portal .icon-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;position:relative}
.av-portal .icon-btn .dot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.av-portal .user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.av-portal .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#6C5CE7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:'Space Grotesk'}
.av-portal .user-chip .uname{font-size:13px;font-weight:700;line-height:1.2}
.av-portal .user-chip .ucomp{font-size:11px;color:var(--text-mute)}

/* DÜZELTME — koyu/açık mod düğmesi, ana temanın header-top.blade.php'sinden
   BİREBİR aynı HTML/JS mekanizmasıyla (switcher.js'teki global .change-mode/
   .btn-mode click delegasyonu + theme-dark.scss'teki .is_dark .light-mode/
   .dark-mode görünürlük kuralları — ikisi de sayfaya zaten Theme::header()/
   Theme::footer() üzerinden yükleniyor, portal.blade.php'ye özel bir şey
   eklemeye gerek yok) müşteri panelinin topbar'ına da taşındı. Tek fark: o
   context'te SVG'ler sabit stroke="white" kullanıyordu (koyu header-top-bar
   zemininde doğruydu) — burada .icon-btn'in var(--card) zeminine oturduğu için
   currentColor'a çeviriyoruz, böylece .icon-btn'in zaten var(--text)'ten
   miras aldığı renge otomatik uyuyor. */
.av-portal .btn-mode svg *{stroke:currentColor}

/* ===== CONTENT ===== */
.av-portal .content{padding:32px 32px 60px;display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.av-portal .content-main{min-width:0;display:flex;flex-direction:column;gap:32px}

/* welcome — DÜZELTME: eskiden background'ı var(--ink) kullanıyordu, koyu modda
   --ink beyaza dönünce üstündeki sabit #fff yazı/başlıkla çakışıyordu (beyaz
   üstüne beyaz). Artık moddan bağımsız sabit koyu bir gradyan + backdrop-filter
   ile hafif saydam bir "cam" yüzey — açık modun kendi (biraz daha soluk/yumuşak)
   versiyonu, koyu modun ise biraz daha opak/derin versiyonu var. */
.av-portal .welcome{
  background:linear-gradient(120deg, rgba(14,17,22,.82) 0%, rgba(34,23,8,.72) 130%);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:34px 36px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;position:relative;overflow:hidden;
}
body.is_dark .av-portal .welcome, body.is_dark.av-portal .welcome{
  background:linear-gradient(120deg, rgba(8,9,12,.94) 0%, rgba(28,18,6,.90) 130%);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-color:rgba(255,255,255,.06);
}
.av-portal .welcome::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 240px at 90% 0%, rgba(255,106,26,.28), transparent 60%)}
.av-portal .welcome > *{position:relative;z-index:1}
.av-portal .welcome h2{font-size:26px;color:#fff}
.av-portal .welcome p{color:#B9BCC4;margin-top:8px;font-size:14px;max-width:460px}

/* stat cards */
.av-portal .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.av-portal .stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.av-portal .stat-card .si{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.av-portal .stat-card .n{font-family:'Space Grotesk';font-size:26px;font-weight:700}
.av-portal .stat-card .l{font-size:12.5px;color:var(--text-mute);margin-top:2px}

/* section head */
.av-portal .sec-head{display:flex;justify-content:space-between;align-items:center}
.av-portal .sec-head h3{font-size:18px}
.av-portal .sec-head a{font-size:13px;font-weight:700;color:var(--accent-dark)}

/* horizontal scroll row */
.av-portal .hscroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px;margin-top:16px}
.av-portal .mini-card{flex:0 0 200px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* DÜZELTME — resim kutusu artık sabit açık (--media-bg), koyu gradyan değil —
   çoğu ürün fotoğrafı koyu renkli, koyu zeminde net görünmüyordu. Kartın geri
   kalanı (başlık/fiyat/buton) hâlâ var(--card)/var(--text) kullanmaya devam
   ediyor, bu sadece resim kutusuna özel. Padding, ileride gerçek ürün
   fotoğrafı eklendiğinde kutunun kenarına yapışmaması için. */
.av-portal .mini-media{position:relative;aspect-ratio:4/3;background:var(--media-bg);padding:10px;display:flex;align-items:center;justify-content:center}
.av-portal .mini-media .icon{width:26px;height:26px;color:rgba(0,0,0,.18)}
.av-portal .mini-body{padding:12px}
.av-portal .mini-body .b{font-size:10.5px;font-weight:700;color:var(--text-mute);text-transform:uppercase}
.av-portal .mini-body h5{font-size:13.5px;margin-top:3px;line-height:1.3}
.av-portal .mini-body .p{font-family:'Space Grotesk';font-weight:700;font-size:14px;margin-top:8px}
.av-portal .mini-body .p small{font-family:'Inter';font-weight:500;color:var(--text-mute);font-size:11px}
.av-portal .mini-add{margin:0 12px 12px}

/* catalog */
.av-portal .tabbar{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 20px}
.av-portal .tab{padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:12.5px;font-weight:700;color:var(--text-mute);background:var(--card)}
.av-portal .tab.active{background:var(--chrome-bg);border-color:var(--chrome-bg);color:#fff}
/* alt kategori çipleri — .tab ile aynı aile, ikincil/daha küçük (bkz. catalog.blade.php .subcat-chips) */
.av-portal .subcat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.av-portal .subcat-chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--text-mute);background:var(--card)}
.av-portal .subcat-chip.active{background:var(--chrome-bg);border-color:var(--chrome-bg);color:#fff}
/* marka filtresi — arama kutulu açılır liste (bkz. catalog.blade.php .brand-filter).
   .search-box'la aynı input stili, dropdown .tab ailesinden AYRI bir kart yüzeyi
   (mevcut .mini-card/.eq-card gibi var(--card)+var(--line)) üzerine oturuyor. */
.av-portal .brand-filter{position:relative}
.av-portal .brand-filter input{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--text);outline:none}
.av-portal .brand-filter input:focus{border-color:var(--accent)}
.av-portal .brand-filter-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:6px;max-height:260px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:var(--shadow);z-index:20}
.av-portal .brand-filter-row{display:flex;align-items:center;justify-content:space-between;gap:4px}
.av-portal .brand-filter-item{display:block;flex:1;padding:7px 8px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text);text-decoration:none}
.av-portal .brand-filter-item:hover{background:var(--paper)}
.av-portal .brand-filter-item.active{background:var(--accent-soft);color:var(--accent-dark)}
/* kalp butonu, favori ürün kalbiyle (.fav-btn) AYNI vurgu rengini (var(--accent)) kullanır */
.av-portal .brand-favorite-toggle{width:26px;height:26px;flex:none;border:none;background:transparent;color:var(--text-mute);display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer}
.av-portal .brand-favorite-toggle:hover{background:var(--paper)}
.av-portal .brand-favorite-toggle.active{color:var(--accent)}
.av-portal .brand-favorite-toggle .icon{width:15px;height:15px}
.av-portal .brand-favorite-toggle.active .icon{fill:currentColor}
/* .brand-filter-dropdown'un "her zaman görünür yan panel" varyantı — bkz.
   favorite-brands.blade.php: burada marka SEÇİMİ equipment'ı filtrelemiyor,
   sadece favorileme amaçlı olduğu için dropdown gibi mutlak konumlanıp
   kartın üstüne binmek yerine normal akışta, panelin içinde duruyor. */
.av-portal .brand-filter-dropdown.is-static{position:static;box-shadow:none;margin-top:10px;max-height:none;padding:0}
/* Favori Markalarım — solda favori marka ürünleri, sağda (sabit panel)
   sitedeki tüm markaların arama kutulu listesi (bkz. favorite-brands.blade.php). */
.av-portal .favbrands-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.av-portal .favbrands-sidebar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:sticky;top:104px}
.av-portal .favbrands-layout .eq-grid{grid-template-columns:repeat(2,1fr)}
.av-portal .eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.av-portal .eq-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.av-portal .eq-media{position:relative;aspect-ratio:16/10;background:var(--media-bg);padding:14px;display:flex;align-items:center;justify-content:center}
.av-portal .eq-media .icon{width:30px;height:30px;color:rgba(0,0,0,.18)}
.av-portal .eq-media .eq-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
    z-index:0;
}
.av-portal .eq-media .tag{position:absolute;top:10px;left:10px;z-index:1}
/* favoriye ekle/çıkar butonu — .eq-media/.mini-media (her ikisi de sabit koyu
   bir gradyan üzerine oturuyor, site moduna bağlı değil) üzerinde konumlanan
   yarı saydam daire. .active durumu (favorideyken) accent rengiyle dolduruluyor. */
.av-portal .fav-form{position:absolute;top:10px;right:10px;z-index:2}
.av-portal .fav-btn{width:30px;height:30px;border-radius:50%;border:none;background:rgba(14,17,22,.55);backdrop-filter:blur(3px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.av-portal .fav-btn:hover{background:rgba(14,17,22,.8)}
.av-portal .fav-btn .icon{width:15px;height:15px}
.av-portal .fav-btn.active{background:var(--accent)}
.av-portal .fav-btn.active .icon{fill:currentColor}
.av-portal .mini-card .fav-btn{width:24px;height:24px}
.av-portal .mini-card .fav-btn .icon{width:12px;height:12px}
.av-portal .eq-body{padding:14px;display:flex;flex-direction:column;gap:6px}
.av-portal .eq-brand{font-size:10.5px;font-weight:700;color:var(--text-mute);text-transform:uppercase}
.av-portal .eq-body h5{font-size:14px;line-height:1.3}
.av-portal .eq-price{font-family:'Space Grotesk';font-weight:700;font-size:15px;margin-top:2px}
.av-portal .eq-price small{font-family:'Inter';font-weight:500;color:var(--text-mute);font-size:11px}
.av-portal .eq-resform{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.av-portal .eq-add{margin-top:10px}

/* DÜZELTME — native <input type="date"> takvim ikonu küçük/belirsizdi ve
   currentColor'a uymuyordu (tarayıcı varsayılan SVG'sini çiziyordu). Native
   ikon artık tamamen görünmez (opacity:0) ama input'un tamamını kaplayıp
   tıklamayı hâlâ native picker'a iletiyor — GÖRÜNEN ikon, wrapper'a (.date-field)
   bindirilmiş kendi SVG'imiz (sitenin diğer ikonlarıyla aynı stil: class="icon",
   stroke="currentColor" — bkz. eq-card.blade.php). currentColor kullandığı için
   invert filtresine gerek kalmadan otomatik açık/koyu moda uyuyor.
   color-scheme:dark AYRI bir amaç için kalıyor — native gün/ay/yıl segmentlerinin
   ve açılan takvim panelinin kendisinin koyu modda doğru render edilmesi için
   (bu, personel portalındaki (/ekip/) tarih inputlarını da etkiliyor — o yüzden
   global bırakıldı). Görünmez-ikon kuralı ise SADECE .date-field içindeki
   inputlara uygulanıyor — personel portalının kendi tarih formlarına dokunmuyor. */
body.is_dark .av-portal input[type="date"], body.is_dark.av-portal input[type="date"]{color-scheme:dark}
.av-portal .date-field{position:relative}
.av-portal .date-field input{border:1px solid var(--line);border-radius:7px;padding:7px 30px 7px 8px;font-size:11.5px;font-family:inherit;width:100%;color:var(--text);background:var(--card)}
.av-portal .date-field .icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:16px;height:16px;color:var(--text-mute);pointer-events:none}
.av-portal .date-field input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;top:0;right:0;width:100%;height:100%;margin:0;cursor:pointer}

/* reservations table */
.av-portal .res-table{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.av-portal .res-row{display:grid;grid-template-columns:1fr 1.3fr 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.av-portal .res-row:last-child{border-bottom:none}
.av-portal .res-row .code{font-family:'Space Grotesk';font-weight:700;font-size:13.5px}
.av-portal .res-row .items{font-size:12.5px;color:var(--text-mute)}
.av-portal .res-row .dates{font-size:12.5px;color:var(--text-mute)}

/* ===== SIDE CART ===== */
.av-portal .cart-panel{position:sticky;top:104px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}
.av-portal .cart-panel h4{font-size:15px;display:flex;align-items:center;justify-content:space-between}
.av-portal .cart-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.av-portal .cart-item .ci-media{width:52px;height:52px;border-radius:8px;background:linear-gradient(150deg,var(--m1,#232732),var(--m2,#12141a));flex:none;display:flex;align-items:center;justify-content:center}
.av-portal .cart-item .ci-media .icon{width:18px;height:18px;color:rgba(255,255,255,.55)}
.av-portal .cart-item .ci-info{flex:1;min-width:0}
.av-portal .cart-item .ci-info h6{font-size:12.5px;font-weight:700;line-height:1.3}
.av-portal .cart-item .ci-info span{font-size:11px;color:var(--text-mute);display:block;margin-top:2px}
.av-portal .cart-item .ci-price{font-family:'Space Grotesk';font-weight:700;font-size:12.5px;white-space:nowrap}
.av-portal .cart-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:6px}
.av-portal .cart-total .l{font-size:12.5px;color:var(--text-mute)}
.av-portal .cart-total .v{font-family:'Space Grotesk';font-weight:700;font-size:19px}
.av-portal .cart-dates{background:var(--paper);border-radius:9px;padding:12px;font-size:12px;color:var(--text-mute);display:flex;justify-content:space-between}
.av-portal .cart-dates strong{color:var(--text);display:block;font-size:12.5px;margin-top:2px}

/* helper */
.av-portal .section-block{display:flex;flex-direction:column}

/* ===== AUTH (giriş/kayıt) — mockup'ta ayrı bir sayfa yok, portal token'larından
   türetilen ek bir bileşen. Mockup'lar hiçbir auth ekranı içermiyor. ===== */
.av-portal .auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.av-portal .auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 32px}
.av-portal .auth-card .sb-logo{margin-bottom:20px}
.av-portal .auth-card h2{font-size:22px;margin-bottom:6px}
.av-portal .auth-card p.lead{font-size:13.5px;color:var(--text-mute);margin-bottom:24px}
.av-portal .field{margin-bottom:16px}
.av-portal .field label{display:block;font-size:12.5px;font-weight:700;color:var(--text-mute);margin-bottom:6px}
.av-portal .field input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:13.5px;font-family:inherit;color:var(--text)}
.av-portal .field input:focus{outline:2px solid var(--accent);outline-offset:1px}
.av-portal .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.av-portal .auth-foot{text-align:center;margin-top:18px;font-size:13px;color:var(--text-mute)}
.av-portal .alert{padding:11px 14px;border-radius:9px;font-size:13px;margin-bottom:16px}
.av-portal .alert-danger{background:var(--warn-soft);color:var(--warn)}
.av-portal .alert-success{background:var(--ok-soft);color:var(--ok)}

/* DÜZELTME — giriş/kayıt sayfalarının alt linkleri (Üye ol / Personel Girişi /
   Müşteri Girişi) --accent-dark kullanıyordu, koyu zeytin yeşili bu sayfaların
   koyu arka planında yeterli kontrast vermiyordu. Koyu modda beyaz, açık modda
   siyah — sadece bu 4 auth sayfasındaki alt linkler için (portal içindeki
   diğer --accent-dark kullanımlarına DOKUNULMADI, bkz. dashboard "Tüm projeler →"). */
.av-portal .auth-link-accent{font-weight:700;color:#ffffff}
@media (prefers-color-scheme: light){
  .av-portal .auth-link-accent{color:#111111}
}

/* ===== PERSONEL PORTALI ("/ekip/") — SOL SABİT SIDEBAR ===== */
/* DÜZELTME (yerleşim baştan tasarımı) — eskiden üstte 4 satıra taşan yatay
   menü vardı, artık admin panelindeki gibi sol sabit sidebar + sağda içerik.
   Sidebar arka planı BİLEREK var(--ink) DEĞİL, sabit koyu bir renk (--chrome-bg
   ile aynı #12141a) — çünkü --ink, site geneli koyu mod açıkken (üstteki
   .is_dark bloğu) AÇIK renge dönüyor. Personel portalının sidebar'ı, admin
   panelindekiler gibi site temasından bağımsız hep koyu kalmalı — içerik alanı
   (.crew-main) ise var(--paper) kullandığı için site'nin açık/koyu modunu doğru
   şekilde takip ediyor. (Müşteri portalının .sidebar'ı da artık aynı deseni
   kullanıyor — bkz. yukarıdaki APP SHELL bölümü ve :root'taki --chrome-* notu;
   eskiden burada anlatılan "müşteri portalının ikon-rayı --ink kullanıyor"
   istisnası artık geçerli değil.) */
.av-portal .crew-shell{display:flex;min-height:100vh}
.av-portal .crew-sidebar{width:260px;flex:none;background:#12141a;color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30}
.av-portal .crew-sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px}
.av-portal .crew-sidebar-brand strong{font-family:'Space Grotesk';font-size:15px;color:#fff}
.av-portal .crew-sidebar-brand .sb-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#6C5CE7);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:13px;flex:none;color:#fff}
.av-portal .crew-sidebar-brand .sb-logo--img{background:none;width:auto;height:30px}
.av-portal .crew-sidebar-brand .sb-logo--img img{height:100%;width:auto;object-fit:contain;display:block}
.av-portal .crew-nav{flex:1;overflow-y:auto;padding:6px 12px 16px}
.av-portal .crew-nav-group{margin-top:16px}
.av-portal .crew-nav-group:first-child{margin-top:2px}
.av-portal .crew-nav-group-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#767b87;padding:0 10px 6px}
.av-portal .crew-nav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#c3c6cc;font-size:13.5px;font-weight:600;margin-bottom:2px}
.av-portal .crew-nav-link .icon{color:#8a8d97;width:17px;height:17px}
.av-portal .crew-nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.av-portal .crew-nav-link:hover .icon{color:#fff}
.av-portal .crew-nav-link.active{background:var(--accent);color:#fff}
.av-portal .crew-nav-link.active .icon{color:#fff}
.av-portal .crew-sidebar-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.09)}
.av-portal .crew-user{display:flex;align-items:center;gap:10px}
.av-portal .crew-user .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#6C5CE7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;font-family:'Space Grotesk';flex:none}
.av-portal .crew-user-info{flex:1;min-width:0}
.av-portal .crew-user-name{display:block;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-portal .crew-user-role{display:block;font-size:11px;color:#8a8d97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-portal .crew-logout-btn{background:none;border:none;color:#8a8d97;cursor:pointer;padding:4px;flex:none;display:flex}
.av-portal .crew-logout-btn:hover{color:#fff}
.av-portal .crew-logout-btn .icon{width:16px;height:16px}

.av-portal .crew-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper)}
.av-portal .crew-topbar{display:none;align-items:center;gap:12px;height:56px;flex:none;background:var(--card);border-bottom:1px solid var(--line);padding:0 16px;position:sticky;top:0;z-index:20}
.av-portal .crew-menu-btn{background:none;border:none;color:var(--text);cursor:pointer;padding:6px;display:flex}
.av-portal .crew-topbar-home{font-size:12.5px;font-weight:700;color:var(--text-mute)}
.av-portal .crew-content{padding:28px 32px 60px;max-width:1180px;width:100%}
.av-portal .crew-guest-content{min-height:100vh}
.av-portal .crew-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}

/* dashboard widget'ları — mevcut .stat-card/.stat-row/.badge/.sec-head
   sınıfları (üstteki müşteri portalı için tanımlı) zaten tema-bağımsız,
   burada da tekrar kullanılıyor. Sadece 2 sütunlu geniş kart ızgarası eksikti. */
.av-portal .widget-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.av-portal .widget-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.av-portal .widget-card h3{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.av-portal .widget-list{display:flex;flex-direction:column;gap:10px}
.av-portal .widget-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.av-portal .widget-row:last-child{border-bottom:none}
.av-portal .widget-row .t{font-weight:600}
.av-portal .widget-row .s{color:var(--text-mute);font-size:12px}
.av-portal .widget-empty{color:var(--text-mute);font-size:13px;padding:8px 0}

@media (max-width: 980px) {
  .av-portal .crew-topbar{display:flex}
  .av-portal .crew-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease;z-index:35}
  .av-portal .crew-sidebar.open{transform:translateX(0)}
  .av-portal .crew-sidebar-backdrop.open{display:block}
  .av-portal .crew-content{padding:20px 16px 40px}
}
@media (max-width: 700px) {
  .av-portal .widget-grid{grid-template-columns:1fr}
}

@media (max-width:1180px){
  .av-portal .content{grid-template-columns:1fr}
  .av-portal .cart-panel{position:static}
  .av-portal .eq-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .av-portal .search-box{width:200px}
  .av-portal .topbar{padding:0 16px;gap:10px}
  .av-portal .top-actions a{display:none}
  .av-portal .favbrands-layout{grid-template-columns:1fr}
  .av-portal .favbrands-sidebar{position:static}
  .av-portal .favbrands-layout .eq-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .av-portal .app{grid-template-columns:1fr}
  .av-portal .sidebar{display:none}
  .av-portal .content{padding:20px 16px 40px}
  .av-portal .search-box{display:none}
  .av-portal .user-chip .ucomp{display:none}
  .av-portal .welcome{flex-direction:column;align-items:flex-start}
  .av-portal .welcome .btn{width:100%}
  .av-portal .stat-row{grid-template-columns:1fr 1fr}
  .av-portal .eq-grid{grid-template-columns:1fr}
  .av-portal .favbrands-layout .eq-grid{grid-template-columns:1fr}
  .av-portal .res-row{grid-template-columns:1fr;gap:6px}
}