/* ============================================================
   HS GRUP DEPO - Tasarim Sistemi
   Tema: "modern stüdyo" - serin grafit/gece mavisi zemin, canlı
   zümrüt-teal birincil vurgu + menekşe ikincil vurgu. Onceki sicak
   kahve/amber paleti bogucu bulundugu icin TAMAMEN degistirildi.
   ============================================================ */

:root {
  /* ---- Koyu tema: serin grafit/gece mavisi zemin ---- */
  --bg: #14171f;
  --bg-elevated: #0d0f15;
  --bg-card: #1e222c;
  --bg-card-hover: #292e3b;
  --bg-input: #191c24;
  --border: rgba(226, 232, 240, 0.10);
  --border-light: rgba(226, 232, 240, 0.18);

  --text: #f1f4f9;
  --text-dim: #b4bcca;
  --text-faint: #7c8494;

  /* Birincil vurgu: canli zumrut-teal - butonlar, aktif durumlar, linkler */
  --accent: #2dd4bf;
  --accent-dim: #14b8a6;
  --accent-glow: rgba(45, 212, 191, 0.40);
  --accent-soft-bg: rgba(45, 212, 191, 0.16);
  --accent-ink: #042420; /* teal zemin uzerinde her zaman koyu yazi */

  /* Ikincil vurgu: canli menekse */
  --teal: #8b5cf6;
  --teal-dim: #7c3aed;
  --teal-soft-bg: rgba(139, 92, 246, 0.18);

  --danger: #fb5c6f;
  --danger-soft-bg: rgba(251, 92, 111, 0.18);

  --success: #34d399;
  --warn: #fbbf24;

  --favorite: #fbbf24;

  --radius-sm: 5px;
  --radius: 10px;
  --radius-lg: 10.8px;
  --radius-pill: 999px;
  --radius-icon: 9999px;

  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-card: inset 0 1px 1px rgba(226,232,240,0.08), inset 0 24px 48px rgba(226,232,240,0.03), 0 24px 32px rgba(3,4,8,0.55);
  --shadow-pop: inset 0 1px 1px rgba(226,232,240,0.14), inset 0 24px 48px rgba(226,232,240,0.04), 0 16px 40px rgba(3,4,8,0.55);
  --noise-opacity: 0.02;

  --sidebar-w: 264px;
  --topbar-h: 68px;
  /* Mobil alt navigasyon cubugunun GERCEK (safe-area haric) yuksekligi -
     hem .mobile-nav'in kendisi hem de onun UZERINDE duran her sey
     (yukleme butonu, secim cubugu, mini yukleme cubugu) bu TEK degeri
     referans alir, boylece hicbiri navigasyonun uzerine binmez. */
  --mobile-nav-h: 54px;

  color-scheme: dark;
}

/* ============================================================
   ACIK TEMA (LIGHT MODE) — temiz, ferah beyaz-gri zemin + koyu grafit
   yazi. Vurgu rengi acik temada da ayni teal ailesinden ama beyaz
   zeminde okunakli kalsin diye koyulastirilmis.
   Cihazin sistem tercihine gore VEYA kullanicinin elle sectigi
   tercihe gore <html data-theme="light"> eklenince devreye girer.
   ============================================================ */
[data-theme="light"] {
  --bg: #f3f5f9;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #eef1f7;
  --bg-input: #edf0f6;
  --border: rgba(15, 23, 42, 0.10);
  --border-light: rgba(15, 23, 42, 0.18);

  --text: #10141f;
  --text-dim: #454e60;
  --text-faint: #838da0;

  --accent: #0d9488;
  --accent-dim: #0f766e;
  --accent-ink: #ffffff;
  --accent-glow: rgba(13, 148, 136, 0.26);
  --accent-soft-bg: rgba(13, 148, 136, 0.10);

  --teal: #7c3aed;
  --teal-dim: #6d28d9;
  --teal-soft-bg: rgba(124, 58, 237, 0.10);

  --danger: #e11d48;
  --danger-soft-bg: rgba(225, 29, 72, 0.10);

  --success: #059669;
  --warn: #d97706;
  --favorite: #d97706;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px rgba(15,23,42,0.08);
  --shadow-pop: 0 20px 50px rgba(15,23,42,0.16);
  --noise-opacity: 0.015;

  color-scheme: light;
}


* { box-sizing: border-box; }
/* iOS Safari/Chrome (WebKit): butonlara/linklere dokununca beliren gri
   yaris kutusu efektini kaldirir - bu olmadan ozellikle koyu temada
   "bozuk/glitch" gibi gorunen bir gri flas olusuyordu. */
* { -webkit-tap-highlight-color: transparent; }

/* GUVENLIK AGI: HS.icon() ile eklenen SVG'ler icin ozel bir boyut kurali
   tanimlanmamis herhangi bir yerde, taraycinin varsayilan devasa boyutuna
   (300x150px) DUSMESIN diye genel bir varsayilan boyut. Daha spesifik
   secicilerle (orn. .fab-upload svg, .icon-btn svg) her zaman override
   edilebilir cunku onlar daha yuksek ozgullukte. */
svg { width: 16px; height: 16px; flex-shrink: 0; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Sicak baski dokusu: cok hafif bir kontakt-sheet izgarasi - renkli
   spot isik / glow yok, sadece kagit uzerinde zar zor secilen bir cizgi. */
body {
  background-image:
    linear-gradient(rgba(226,232,240,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,232,240,0.045) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-attachment: fixed;
}
[data-theme="light"] body { background-image: none; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent-glow); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

.mono { font-family: var(--font-mono); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }

/* ============ LOGIN SAYFASI ============ */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* iPhone'daki centik/Dynamic Island ve alt ev cubugu alanina icerigin
     yapismasini/gizlenmesini onler (viewport-fit=cover ile birlikte calisir). */
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  position: relative;
  background: var(--bg);
}
.auth-shell::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  /* Renkli spot isik yok - kagidin kenarlarina dogru cok hafif bir
     mürekkep vinyeti, tamamen notr. */
  background: radial-gradient(720px 520px at 50% 20%, rgba(226,232,240,0.05), transparent 70%);
}

.auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  background: rgba(13,15,20,0.97);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 40px 34px 32px;
  display: flex; flex-direction: column;
  animation: hsAuthIn .45s cubic-bezier(.2,.8,.3,1) backwards;
}
@keyframes hsAuthIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

.auth-logo {
  width: 132px; margin: 0 auto 18px; display: block;
  filter: drop-shadow(0 8px 24px rgba(226,232,240,0.35));
}

.auth-subtitle { color: var(--text-dim); font-size: 13.5px; margin-bottom: 24px; text-align: center; }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12.5px; color: var(--text-dim);
  margin-bottom: 7px; font-weight: 500;
}
.field input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  /* ONEMLI: 16px alti font-size'larda iOS Safari/Chrome, input'a
     dokunulunca sayfayi otomatik yakinlastirip "bozuk" gorunmesine sebep
     olur (maximum-scale=1 her iOS surumunde bunu tam engellemeyebiliyor).
     16px kullanarak bu riski tamamen ortadan kaldiriyoruz. */
  font-size: 16px;
  /* iOS'un input'lara uyguladigi varsayilan native gorunumu (yuvarlatilmis
     kenarlar, ic golge, gri arka plan) kaldirir - aksi halde ozel
     stilimizle carpisip tutarsiz/bozuk gorunuyordu. */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}
/* iOS'ta kaydedilmis sifre/kullanici adi onerileri secildiginde
   (AutoFill) tarayici inputun arka planini SARI/GRI yapip yazi rengini
   siyaha cevirir - koyu temada bu cok bozuk/uyumsuz gorunuyordu. Bu hile
   ile arka plan rengini koyu temaya sabitliyoruz. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
  transition: background-color 5000s ease-in-out 0s;
}
/* ONEMLI: sol/sag ikonlar ARTIK position:absolute ile input'un UZERINE
   BINDIRILMIYOR - bu yontem bazi tarayicilarda (ozellikle Safari/WebKit,
   mobil Chrome-on-iOS dahil) "static position" hesaplamasinda tutarsizlik
   gosterip ikonun yana/yukari kaymis gorunmesine sebep oluyordu. Bunun
   yerine border/arka plan artik BU SARMALAYICIYA ait ve icindeki input
   ile butonlar SIRADAN (gercek) flex ogeleridir - align-items:center ile
   dikey ortalama, tum tarayicilarda %100 tutarli ve garantilidir. */
.field-icon .input-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.field-icon .input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field-icon .input-wrap svg:first-child {
  width: 16px; height: 16px; color: var(--text-faint); flex-shrink: 0;
  margin-left: 13px;
}
.field-icon .input-wrap input {
  flex: 1; min-width: 0;
  background: none; border: none; box-shadow: none;
  padding: 11px 8px;
}
.field-icon .input-wrap input:focus { box-shadow: none; border: none; }
.input-eye {
  flex-shrink: 0;
  background: none; border: none; color: var(--text-faint);
  cursor: pointer; padding: 8px; margin-right: 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  -webkit-appearance: none; appearance: none;
}
.input-eye:hover { color: var(--text); background: var(--bg-card-hover); }
.input-eye svg { width: 16px; height: 16px; }
.input-eye.active { color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-pill);
  padding: 11px 20px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: transform .1s, filter .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* .btn-locked: gorsel olarak "disabled" ama gercek disabled ATTRIBUTE'u
   DEGIL - cunku gercekten disabled olan native butonlar bazi tarayicilarda
   hover'da title tooltip'ini GOSTERMEZ. Bu sinif tikanmayi JS tarafinda
   (tiklama handler'i icinde) engeller, gorunumu soldurur, ama mouse
   olaylarini (ve dolayisiyla title ipucunu) engellemez. */
.btn.btn-locked { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: var(--accent-dim); }
.btn-ghost {
  background: rgba(226,232,240,0.06); color: var(--text);
  box-shadow: 0 0 0 1px var(--border) inset;
}
.btn-ghost:hover { background: rgba(226,232,240,0.12); }
.btn-danger { background: var(--danger-soft-bg); color: var(--danger); }
.btn-danger:hover { background: rgba(181,84,74,0.22); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }

.auth-error {
  background: var(--danger-soft-bg); color: var(--danger);
  border: 1px solid rgba(181,84,74,0.3);
  padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: 13px; margin-bottom: 16px; display: none;
}
.auth-error.show { display: block; }

.auth-foot { margin-top: 20px; text-align: center; font-size: 12px; color: var(--text-faint); }

/* Auth formundaki tek CTA: AuthKit spesifikasyonunda 6px radius'lu "Violet CTA" */
.auth-card .btn-primary { border-radius: var(--radius-sm); }

@media (max-width: 420px) {
  .auth-card { padding: 32px 22px 26px; }
  .auth-logo { width: 108px; }
}

/* ============ APP SHELL ============ */
/* ONEMLI: "dvh" (dynamic viewport height) yerine "svh" (small viewport
   height) kullaniliyor - dvh bazi iOS Safari surumlerinde arac cubugu
   HALA GORUNURKEN bile "arac cubugu gizliymis gibi" (daha buyuk) bir
   deger hesaplayabiliyor, bu da sayfanin altinda GERCEKTE OLMAYAN, bos
   ve tiklanamaz devasa bir alan olusmasina sebep oluyordu (kullanici
   sayfayi kaydirinca goruyordu). svh HER ZAMAN arac cubugu gorunurmus
   gibi (en guvenli/en kucuk) deger dondugu icin bu sorun olusmuyor. */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; min-height: 100svh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 20px 16px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: hidden;
}
/* Kutuphane / Favoriler / Organizasyon / Paylasim listeleri burada
   kaydiriliyor - boylece liste ne kadar uzasa da alttaki depolama
   gostergesi ve kullanici satiri HER ZAMAN gorunur kalir, sayfayi
   asagi kaydirmaya gerek kalmaz. */
.sidebar-scroll {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  /* Kaydirma cubugunu ince ve gorseli bozmayacak sekilde gizli tut */
  scrollbar-width: thin;
  margin-right: -6px; padding-right: 6px;
}
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 20px; }
.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 6px 22px;
}
.sidebar-brand .mark {
  width: 34px; height: 34px;
  object-fit: contain;
}
.sidebar-brand .name {
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
  text-transform: uppercase; letter-spacing: .13em; line-height: 1;
}
.sidebar-brand .name span { color: var(--text-faint); font-weight: 400; }

.nav-section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); font-weight: 600; padding: 14px 10px 6px;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  border: 1px solid transparent;
  position: relative;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; transition: opacity .15s, transform .15s; }
.nav-item:hover { background: var(--bg-card); color: var(--text); }
.nav-item:hover svg { transform: translateX(1px); }
.nav-item.active {
  background: var(--accent-soft-bg); color: var(--accent);
  border-color: rgba(226,232,240,0.25);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 3px; background: var(--accent);
}
.nav-item.active svg { opacity: 1; }
.nav-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-faint); background: var(--bg-card); padding: 1px 6px; border-radius: 20px;
}
.nav-item.active .nav-count { color: var(--accent); }

.sidebar-spacer { flex: 1; }

.storage-gauge {
  margin: 10px 4px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  flex-shrink: 0;
}
.gauge-top { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.storage-donut { width: 56px; height: 56px; flex-shrink: 0; }
.gauge-top-text { display: flex; flex-direction: column; }
.gauge-top-text span { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); }
.gauge-top-text small { font-size: 11px; color: var(--text-faint); }
.storage-gauge .figures { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.storage-gauge .figures b { color: var(--text); font-weight: 600; }
.storage-legend { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.legend-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-dim); }
.legend-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-row .lbl { flex: 1; }
.legend-row .val { font-family: var(--font-mono); color: var(--text-faint); }
.legend-row.trash-row { cursor: pointer; padding-top: 5px; margin-top: 3px; border-top: 1px dashed var(--border); }
.legend-row.trash-row:hover .lbl { color: var(--text); }

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-card);
  flex-shrink: 0;
}
.sidebar-user .avatar {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--teal), var(--teal-dim));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--accent-ink); font-family: var(--font-display);
}
.sidebar-user .who { flex: 1; min-width: 0; }
.sidebar-user .who .u { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who .r { font-size: 10.5px; color: var(--text-faint); }
.sidebar-user button {
  background: transparent; border: none; color: var(--text-faint); cursor: pointer;
  padding: 6px; border-radius: 6px; display:flex;
}
.sidebar-user button:hover { color: var(--danger); background: var(--danger-soft-bg); }
.sidebar-user button svg { width: 16px; height: 16px; }

/* ============ MAIN ============ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  z-index: 20;
}
.page-title {
  font-family: var(--font-display); font-size: 21px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em;
  margin-right: 6px; white-space: nowrap;
}

.search-box {
  flex: 1; max-width: 380px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.search-box svg { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.search-box input {
  background: transparent; border: none; outline: none; color: var(--text);
  font-size: 13.5px; width: 100%;
}
.search-box input::placeholder { color: var(--text-faint); }

.topbar-spacer { flex: 1; }

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 8px 30px 8px 12px;
  font-size: 13px; cursor: pointer;
}
.select-wrap::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-icon);
  background: rgba(226,232,240,0.06); box-shadow: 0 0 0 1px var(--border) inset; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: rgba(226,232,240,0.12); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.active { color: var(--accent); box-shadow: 0 0 0 1px rgba(226,232,240,.4) inset; }
#select-toggle-btn.active { background: var(--accent-soft-bg); color: var(--accent); }

/* ============ ACIK/KOYU TEMA DEGISTIRICI ============ */
.theme-toggle {
  width: 34px; height: 34px; border-radius: var(--radius-icon);
  background: rgba(226,232,240,0.06); box-shadow: 0 0 0 1px var(--border) inset; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.theme-toggle:hover { background: rgba(226,232,240,0.12); color: var(--text); }
.theme-toggle svg {
  width: 16px; height: 16px; position: absolute;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle.is-light .icon-sun { opacity: 1; transform: rotate(0) scale(1); color: var(--accent); }
.theme-toggle.is-light .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }

.filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 24px 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 5px 11px; border-radius: 20px; font-size: 12px; color: var(--text-dim);
  cursor: pointer; transition: all .12s;
}
.chip:hover { color: var(--text); border-color: var(--border-light); }
.chip.active { background: var(--accent-soft-bg); color: var(--accent); border-color: rgba(226,232,240,.35); }
.chip .x { opacity: .6; }

.content { padding: 20px 24px 60px; flex: 1; }

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.file-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  position: relative;
  box-shadow: var(--shadow-card);
  animation: hsCardIn .28s ease backwards;
}
.file-card:hover { transform: translateY(-3px); border-color: var(--border-light); box-shadow: 0 10px 26px rgba(63,73,89,0.38); }
.file-card:nth-child(n) { animation-delay: calc(var(--card-i, 0) * 12ms); }
@keyframes hsCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .file-card { animation: none; }
}

.file-thumb {
  aspect-ratio: 4/3; background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.file-thumb img, .file-thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb-video-fallback {
  display: none; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--text-faint);
  background: linear-gradient(145deg, #24262f, #191b22);
}
.thumb-video-fallback svg { width: 26px; height: 26px; }
.file-thumb.thumb-video-error img, .file-thumb.thumb-video-error video { display: none; }
.file-thumb.thumb-video-error .thumb-play-badge { display: none; }
.file-thumb.thumb-video-error .thumb-video-fallback { display: flex; }
.thumb-play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.thumb-play-badge svg {
  width: 34px; height: 34px; color: #fff; padding: 8px;
  background: rgba(13,15,20,0.55); border-radius: 50%; backdrop-filter: blur(2px);
}
.file-thumb .ext-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: .02em;
  color: #fff;
}

.fav-btn {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: var(--radius-icon);
  background: rgba(13,15,20,0.6); backdrop-filter: blur(4px);
  border: 1px solid rgba(226,232,240,0.14);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background .12s;
}
.fav-btn:hover { background: rgba(13,15,20,0.85); }
.fav-btn svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; transition: fill .12s, stroke .12s; }
.fav-btn.is-fav svg { fill: var(--favorite); stroke: var(--favorite); }

.category-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(13,15,20,0.65); backdrop-filter: blur(4px);
  color: var(--text-dim); border: 1px solid rgba(226,232,240,0.14);
}

.file-info { padding: 10px 12px 12px; }
.file-name {
  font-size: 12.5px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px;
}
.file-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
}
.file-owner { font-size: 10px; color: var(--text-faint); margin-top: 3px; }

/* ---- Dosya karti uzerindeki mini etiketler ---- */
.file-tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mini-tag {
  font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 22%, var(--bg-card));
  color: var(--text); border: 1px solid color-mix(in srgb, var(--tag-color, var(--accent)) 45%, transparent);
  white-space: nowrap;
}
.mini-tag-more { background: var(--bg-input); border-color: var(--border); color: var(--text-faint); }

/* ---- Dosya Detaylari modali: Etiketler / Yorumlar / Surum Gecmisi ---- */
.details-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.details-tab {
  background: none; border: none; color: var(--text-faint); font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 10px 4px 12px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.details-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.details-tab-panel { padding: 16px 20px 20px; max-height: 56vh; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

.tag-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; min-height: 20px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 6px 5px 11px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 20%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--tag-color, var(--accent)) 45%, transparent);
  color: var(--text);
}
.tag-chip button { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; display: flex; padding: 2px; }
.tag-chip button:hover { opacity: 1; }
.tag-chip button svg { width: 11px; height: 11px; }
.tag-add-row { display: flex; gap: 8px; }
.tag-add-row input {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-family: inherit;
}
.tag-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag-suggestion {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--bg-card); border: 1px dashed var(--border-light); color: var(--text-dim); cursor: pointer;
}
.tag-suggestion:hover { border-color: var(--accent); color: var(--text); }
.tag-suggestion.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.empty-hint { font-size: 12.5px; color: var(--text-faint); padding: 6px 2px; }

.comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.comment-row { display: flex; gap: 10px; }
.comment-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(145deg, var(--teal), var(--teal-dim));
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; color: var(--accent-ink); font-family: var(--font-display);
}
.comment-body-wrap { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 8px; }
.comment-author { font-size: 12.5px; font-weight: 700; }
.comment-time { font-size: 10.5px; color: var(--text-faint); }
.comment-text { font-size: 13px; color: var(--text-dim); margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.comment-del { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px; align-self: flex-start; }
.comment-del:hover { color: var(--danger); }
.comment-del svg { width: 13px; height: 13px; }
.comment-add-row { display: flex; gap: 8px; align-items: flex-end; }
.comment-add-row textarea {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 40px;
}

.version-upload-row { margin-bottom: 12px; }
.version-progress { margin-bottom: 12px; }
.version-list { display: flex; flex-direction: column; gap: 8px; }
.version-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.version-row.is-current { border-color: var(--accent); background: var(--accent-soft-bg); }
.version-row .v-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; width: 34px; flex-shrink: 0; }
.version-row .v-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--text-faint); }
.version-row .v-meta b { color: var(--text); font-weight: 600; }
.version-row .v-actions { display: flex; gap: 4px; flex-shrink: 0; }
.version-row .v-actions button, .version-row .v-actions a {
  background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 5px; border-radius: 6px; display: flex;
}
.version-row .v-actions button:hover, .version-row .v-actions a:hover { color: var(--text); background: var(--bg-card-hover); }
.version-row .v-actions svg { width: 15px; height: 15px; }
.version-row .v-actions .v-del:hover { color: var(--danger); }
.version-badge-current {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--accent); color: var(--accent-ink); padding: 2px 6px; border-radius: 4px; margin-left: 6px;
}


.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; text-align: center; color: var(--text-faint);
}
.empty-state svg { width: 52px; height: 52px; margin-bottom: 16px; opacity: .5; }
.empty-state h3 { font-size: 15px; color: var(--text-dim); margin-bottom: 6px; }
.empty-state p { font-size: 13px; max-width: 320px; }

/* ============ UPLOAD FAB & MODAL ============ */
.fab-upload {
  position: fixed; bottom: 28px; right: 28px; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--accent-dim));
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 10px 28px var(--accent-glow), 0 2px 6px rgba(63,73,89,0.2);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.fab-upload::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0; pointer-events: none;
  animation: hsFabPulse 2.6s ease-out infinite;
}
@keyframes hsFabPulse {
  0% { transform: scale(0.82); opacity: .55; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { opacity: 0; }
}
.fab-upload:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 34px var(--accent-glow), 0 4px 10px rgba(63,73,89,0.22); }
.fab-upload:active { transform: scale(.94); }
.fab-upload svg { width: 24px; height: 24px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .fab-upload::before { animation: none; } }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(13,15,20,0.72); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 160; padding: 20px;
  opacity: 0;
}
.modal-overlay.open { display: flex; animation: hsOverlayFade .2s ease forwards; }
@keyframes hsOverlayFade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: 100%; max-width: 520px; max-height: 86vh; max-height: 86dvh; overflow-y: auto;
  box-shadow: var(--shadow-pop);
  animation: hsModalIn .25s cubic-bezier(.2,.9,.3,1.1) both;
  /* Modal acikken arka plan kilitleniyor (bkz. HS.lockScroll, body'ye
     touch-action:none uygular) - bu, modalin KENDI icindeki kaydirmayi da
     mobilde engelliyordu, bu yuzden burada acikca geri veriliyor. */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
@keyframes hsModalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open, .modal { animation: none; }
}
.modal.modal-wide { max-width: 760px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-card); z-index: 2;
}
.modal-head h3 { font-size: 16px; }
.modal-close { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 4px; }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: 22px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ============ OZEL ONAY PENCERESI (native confirm/alert yerine) ============ */
.hs-confirm-overlay {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(13,15,20,0); pointer-events: none;
  transition: background .18s ease;
}
.hs-confirm-overlay.open { background: rgba(13,15,20,0.75); backdrop-filter: blur(3px); pointer-events: all; }
.hs-confirm-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: 100%; max-width: 380px; padding: 26px 24px 22px; text-align: center;
  box-shadow: var(--shadow-pop);
  transform: translateY(14px) scale(.97); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.hs-confirm-overlay.open .hs-confirm-box { transform: translateY(0) scale(1); opacity: 1; }
.hs-confirm-icon {
  width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft-bg); color: var(--accent);
}
.hs-confirm-icon.danger { background: var(--danger-soft-bg); color: var(--danger); }
.hs-confirm-icon svg { width: 22px; height: 22px; }
.hs-confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.hs-confirm-msg { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 22px; white-space: pre-line; }
.hs-confirm-actions { display: flex; gap: 10px; }
.hs-confirm-actions .btn { flex: 1; justify-content: center; }
.hs-confirm-input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border-light); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; margin-bottom: 18px; text-align: left;
}
.hs-confirm-input:focus { outline: none; border-color: var(--accent); }
.hs-confirm-link-row { display: flex; gap: 8px; margin-bottom: 18px; }
.hs-confirm-link-row .hs-confirm-input { margin-bottom: 0; }
.hs-confirm-link-row .btn { flex-shrink: 0; }
@media (max-width: 480px) {
  .hs-confirm-box { max-width: 100%; }
}

.dropzone {
  border: 1.5px dashed var(--border-light); border-radius: var(--radius);
  padding: 34px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft-bg); }
.dropzone svg { width: 34px; height: 34px; color: var(--text-faint); margin-bottom: 10px; }
.dropzone p { font-size: 13.5px; color: var(--text-dim); }
.dropzone span { color: var(--accent); font-weight: 600; }
.dropzone small { display:block; margin-top: 6px; color: var(--text-faint); font-size: 11.5px; }

.upload-queue { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

/* ============ ALT INCE YUKLEME CUBUGU (minimize edilmis yukleme) ============ */
.upload-mini-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 120%);
  width: min(420px, calc(100% - 32px)); z-index: 250;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 10px 14px 12px; opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
  cursor: pointer;
  /* ONEMLI: Bu eleman gizliyken (opacity:0, ekranin altina kaydirilmis)
     bile GERCEKTE hala kismen ekranin gorunur alaninda duruyordu
     (transform:120% kendi yuksekliginin sadece %120'si kadar kaydiriyor,
     tamamen ekran disina cikarmiyor) VE z-index:250 (mobil alt
     navigasyonun z-index:40'indan COK daha yuksek) sayesinde navigasyonun
     UZERINDE, gorunmez ama TIKLANABILIR halde kaliyordu. Bu, "alt barda
     herhangi bir yere dokununca yukleme penceresi aciliyor" seklinde
     rapor edilen sorunun KESIN nedeniydi. pointer-events:none ile,
     gizliyken artik hicbir tiklamayi yakalamiyor - sadece .show sinifi
     eklendiginde (gercekten gorunur oldugunda) tekrar tiklanabilir hale
     geliyor. */
  pointer-events: none;
}
.upload-mini-bar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: all; }
.upload-mini-bar.done .upload-mini-fill { background: var(--success); }
.upload-mini-track { height: 5px; border-radius: 4px; background: var(--bg-input); overflow: hidden; margin-bottom: 8px; }
.upload-mini-fill {
  height: 100%; width: 0%; border-radius: 4px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  background-size: 200% 100%;
  transition: width .3s cubic-bezier(.4,0,.2,1), background .2s ease;
  animation: hsFillShine 1.8s linear infinite;
}
@keyframes hsFillShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.upload-mini-bar.done .upload-mini-fill { animation: none; }
.upload-mini-row { display: flex; align-items: center; gap: 10px; }
.upload-mini-text { flex: 1; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-mini-pct { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.upload-mini-bar.done .upload-mini-pct { color: var(--success); }
.upload-mini-expand { flex-shrink: 0; background: transparent; border: none; color: var(--text-faint); padding: 2px; display: flex; cursor: pointer; }
.upload-mini-expand svg { width: 15px; height: 15px; transform: rotate(-90deg); }
@media (max-width: 640px) {
  .upload-mini-bar { bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 14px); }
}

.upload-summary {
  background: var(--accent-soft-bg); border: 1px solid rgba(226,232,240,0.25);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 4px;
}
.upload-summary-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.upload-summary-track { height: 6px; border-radius: 10px; background: var(--bg); overflow: hidden; }
.upload-summary .fill {
  height: 100%; width: 0%; border-radius: 10px; transition: width .25s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  background-size: 200% 100%; animation: hsFillShine 1.8s linear infinite;
}

.upload-row {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.upload-row .top { display: flex; align-items:center; gap: 10px; margin-bottom: 7px; }
.upload-row-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; color: #fff;
}
.upload-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upload-row .fname { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-row .fsize { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; }
.upload-row-cancel {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: transparent; border: none; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.upload-row-cancel:hover { background: var(--bg-card-hover); color: var(--danger); }
.upload-row .track { height: 5px; border-radius: 10px; background: var(--bg); overflow: hidden; }
.upload-row .fill {
  height: 100%; width: 0%; border-radius: 10px; transition: width .25s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  background-size: 200% 100%; animation: hsFillShine 1.8s linear infinite;
}
.upload-row.done .fill { background: var(--teal); animation: none; }
.upload-row.error .fill { background: var(--danger); animation: none; }
.upload-row .status { font-size: 10.5px; margin-top: 5px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.upload-row.error .status { color: var(--danger); }
.upload-retry-btn {
  background: var(--danger-soft-bg); color: var(--danger); border: none; border-radius: 6px;
  padding: 3px 8px; font-size: 10px; font-weight: 600; cursor: pointer;
}
.upload-retry-btn:hover { background: rgba(181,84,74,0.25); }

/* ============ ADMIN ============ */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-bottom: 22px;
}
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-card .label { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; }
.stat-card .value { font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.stat-card .sub { font-size: 11px; color: var(--text-faint); margin-top: 4px; font-family: var(--font-mono); }

.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.panel-head {
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-head h3 { font-size: 14.5px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 16px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
th { color: var(--text-faint); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: var(--bg-card-hover); }
tbody tr:last-child td { border-bottom: none; }
td.mono { font-family: var(--font-mono); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.badge-ok { background: var(--teal-soft-bg); color: var(--teal); }
.badge-off { background: var(--danger-soft-bg); color: var(--danger); }
.badge-admin { background: var(--accent-soft-bg); color: var(--accent); }

.mini-bar-track { width: 90px; height: 6px; background: var(--bg-input); border-radius: 10px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; border: 1px solid var(--border); }
.mini-bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--accent)); }
.mini-bar-fill.warn { background: linear-gradient(90deg, var(--accent), var(--warn)); }
.mini-bar-fill.danger { background: linear-gradient(90deg, var(--warn), var(--danger)); }

.stat-card-trash { border-color: rgba(153,153,153,0.35); }
.stat-card-warn { border-color: rgba(181,84,74,0.4); }
.stat-card-warn .value { color: var(--danger); }

/* ---- Yukleme trendi cubuk grafigi ---- */
.trend-chart-wrap { padding: 18px; }
.trend-chart-wrap svg rect { transition: opacity .15s; }
.trend-chart-wrap svg rect:hover { opacity: .75 !important; }
.trend-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.trend-labels .dim { opacity: 0; } /* alternate labels hidden to reduce clutter on narrow screens */
@media (min-width: 700px) { .trend-labels .dim { opacity: 1; } }

/* ---- Kategori donut + tablo yan yana panel ---- */
.panel-split { display: grid; grid-template-columns: 1fr 1fr; }
.panel-split-left, .panel-split-right { min-width: 0; }
.panel-split-left { border-right: 1px solid var(--border); }
.panel-split-left .panel-head, .panel-split-right .panel-head { border-bottom: 1px solid var(--border); }
.donut-row { display: flex; align-items: center; gap: 22px; padding: 20px 18px; }
.donut-row svg { width: 110px; height: 110px; flex-shrink: 0; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.donut-legend .legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.donut-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .lbl { flex: 1; }
.donut-legend .val { font-family: var(--font-mono); color: var(--text-faint); font-size: 11.5px; }
@media (max-width: 860px) {
  .panel-split { grid-template-columns: 1fr; }
  .panel-split-left { border-right: none; border-bottom: 1px solid var(--border); }
}

.actions-cell { display: flex; gap: 6px; }
.tab-row { display:flex; gap:6px; padding: 4px; background: var(--bg-input); border-radius: var(--radius-sm); border: 1px solid var(--border); width:fit-content; margin-bottom: 18px; }
.tab-btn { padding: 7px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-dim); cursor: pointer; background: none; border: none; }
.tab-btn.active { background: var(--bg-card); color: var(--text); }

.log-row { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 12.5px; align-items: baseline; }
.log-row:last-child { border-bottom: none; }
.log-row .time { font-family: var(--font-mono); color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.log-row .who { font-weight: 600; color: var(--text); white-space: nowrap; }
.log-row .action-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 10px; background: var(--bg-input); color: var(--text-dim); white-space: nowrap; }
.log-row .detail { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast-stack { position: fixed; bottom: 24px; left: 24px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--bg-card); border: 1px solid var(--border-light); color: var(--text);
  padding: 11px 16px; border-radius: var(--radius-sm); font-size: 13px; box-shadow: var(--shadow-pop);
  display: flex; align-items: center; gap: 9px; min-width: 240px;
  animation: toast-in .18s ease;
}
.toast.error { border-color: rgba(181,84,74,0.4); }
.toast.success { border-color: rgba(179,154,104,0.4); }
@keyframes toast-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(226,232,240,0.28); border-top-color: currentColor;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ MOBIL ALT NAVIGASYON (temel) ============ */
.mobile-topbar { display: none; }
.mobile-nav { display: none; }

@media (max-width: 880px) {
  .sidebar { display: none; }
  .storage-gauge, .sidebar-user { display: none; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); z-index: 30;
  }
  .mobile-topbar .brand { display:flex; align-items:center; gap:9px; font-family: var(--font-display); font-weight: 600; }
  .mobile-topbar .brand .mark { width: 30px; height:30px; object-fit: contain; }
  .topbar { padding: 0 14px; }
  .page-title { display: none; }
  .content { padding: 14px 14px 90px; }
  .filter-row { padding: 12px 14px 0; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; }
  .fab-upload { display: none; } /* mobilde artik alt navigasyonun icinde (bkz. .mobile-nav-upload) */
  .mobile-nav {
    display: flex; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--bg-elevated); border-top: 1px solid var(--border);
    min-height: var(--mobile-nav-h);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; color: var(--text-faint); font-size: 9.5px; border-radius: 8px;
  }
  .mobile-nav a svg { width: 19px; height: 19px; }
  .mobile-nav a.active { color: var(--accent); }
  /* Yukleme butonu alt navigasyonun KENDI satirinda, sıradan bir oge -
     ayri/yuzen bir eleman degil, boylece navigasyon dokunuslariyla
     ÇAKIŞMASI YAPISAL OLARAK IMKANSIZ. ONEMLI: navigasyon kutusunun
     DISINA taşan (negatif margin ile "yukari kaydirilmis") bir tasarim
     BILEREK KULLANILMIYOR - boyle bir tasma, komut/tiklama alaninin
     komsu ogelerle CAKISMASINA yol acabiliyordu. Bunun yerine diger
     sekmelerle AYNI KUTU icinde kalip sadece renk/sekil ile ayrisiyor. */
  .mobile-nav-upload {
    flex: 1 !important;
    background: none; color: var(--accent) !important;
  }
  .mobile-nav-upload .hs-mobile-upload-circle {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-nav-upload svg { width: 17px; height: 17px; }
  .mobile-nav-upload .hs-mobile-upload-circle svg { width: 17px; height: 17px; }
  .modal { max-height: 92vh; max-height: 92dvh; }
  .search-box { max-width: none; }
  table { font-size: 12px; }
  th, td { padding: 9px 10px; }
}

/* ============================================================
   COKLU SECIM MODU (dosya karti uzerinde onay kutusu)
   ============================================================ */
.file-card.selectable .fav-btn { display: none; }
.select-check {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(13,15,20,0.65); border: 1.5px solid rgba(226,232,240,0.4);
  display: none; align-items: center; justify-content: center;
}
.file-card.selectable .select-check { display: flex; }
.file-card.selected .select-check { background: var(--accent); border-color: var(--accent); }
.select-check svg { width: 13px; height: 13px; stroke: var(--accent-ink); stroke-width: 3; opacity: 0; }
.file-card.selected .select-check svg { opacity: 1; }
.file-card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }

.selection-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: none; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border-light);
  padding: 10px 14px; border-radius: 14px; box-shadow: var(--shadow-pop);
}
.selection-bar.open { display: flex; }
.selection-bar .count { font-size: 13px; color: var(--text-dim); padding: 0 4px; white-space: nowrap; }

/* ============================================================
   BEKLEYEN (DIS YUKLEME) DOSYA KARTI UYARISI
   ============================================================ */
.file-card.is-pending { border-color: rgba(226,232,240,0.45); }
.file-card.is-trash { border-color: rgba(153,153,153,0.35); opacity: .88; }
.pending-banner {
  display: flex; align-items: center; gap: 6px;
  background: var(--accent-soft-bg); color: var(--accent);
  font-size: 10.5px; font-weight: 600; padding: 6px 10px;
  border-bottom: 1px solid rgba(226,232,240,0.25);
}
.pending-banner svg { width: 13px; height: 13px; flex-shrink: 0; }
.pending-banner.trash-banner { background: rgba(153,153,153,0.14); color: var(--text-dim); border-bottom-color: var(--border); }
.pending-actions { display: flex; gap: 6px; padding: 8px 10px 10px; }
.pending-actions .btn { flex: 1; padding: 7px 8px; font-size: 11.5px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.pending-actions .btn svg { width: 13px; height: 13px; }

/* ============ IZGARA / LISTE GORUNUM DEGISTIRICI ============ */
.view-mode-toggle {
  display: flex; gap: 2px; padding: 3px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 8px; flex-shrink: 0;
}
.view-mode-toggle button {
  background: none; border: none; color: var(--text-faint); padding: 5px 7px;
  border-radius: 6px; display: flex; cursor: pointer;
}
.view-mode-toggle button svg { width: 15px; height: 15px; }
.view-mode-toggle button.active { background: var(--bg-card); color: var(--accent); }
#empty-trash-btn { display: flex; align-items: center; gap: 6px; color: var(--danger); }
#empty-trash-btn svg { width: 14px; height: 14px; }

/* ============ LISTE GORUNUMU (file-grid.list-mode) ============ */
.file-grid.list-mode {
  display: flex; flex-direction: column; gap: 6px;
}
.file-grid.list-mode .file-card {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center;
  gap: 12px; padding: 8px 12px;
}
.file-grid.list-mode .file-thumb {
  width: 52px; height: 40px; aspect-ratio: unset; border-radius: 8px;
}
.file-grid.list-mode .file-thumb .category-tag { display: none; }
.file-grid.list-mode .file-thumb .fav-btn { width: 20px; height: 20px; top: 4px; right: 4px; }
.file-grid.list-mode .file-info { padding: 0; }
.file-grid.list-mode .file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-grid.list-mode .file-meta { margin-top: 2px; }
.file-grid.list-mode .pending-banner,
.file-grid.list-mode .pending-actions { grid-column: 1 / -1; }
.file-grid.list-mode .ext-icon { font-size: 9px; }

/* ============ SAYFAYA SURUKLE-BIRAK KATMANI ============ */
.page-drop-overlay {
  position: fixed; inset: 0; z-index: 260; display: none;
  align-items: center; justify-content: center;
  background: rgba(13,15,20,0.78); backdrop-filter: blur(2px);
  pointer-events: none;
}
.page-drop-overlay.show { display: flex; pointer-events: all; }
.page-drop-box {
  border: 2px dashed var(--accent); border-radius: var(--radius-lg);
  padding: 50px 70px; text-align: center; color: var(--accent);
  background: rgba(226,232,240,0.08);
}
.page-drop-box svg { width: 40px; height: 40px; margin-bottom: 12px; }
.page-drop-box p { font-size: 15px; font-weight: 600; }

/* ============================================================
   PAYLASIM / YUKLEME LINKI PANELLERI
   ============================================================ */
.link-row {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.link-row .top-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.link-row .link-title { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 120px; }
.link-row .link-url {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--teal);
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 7px;
  padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0; cursor: pointer;
}
.link-row .meta-line { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-faint); margin-bottom: 8px; }
.link-row .meta-line b { color: var(--text-dim); font-weight: 600; }
.link-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.link-row .quota-bar { margin-top: 8px; }

.badge-pw { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--accent); }
.badge-pw svg { width: 11px; height: 11px; }
.badge-expiry { background: var(--teal-soft-bg); color: var(--teal); }
.badge-expired { background: var(--danger-soft-bg); color: var(--danger); }
.link-row.link-expired { opacity: .62; }

.empty-inline { padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* Dosya secim listesi (paylasim modalinde) */
.pick-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.pick-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12.5px;
}
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--bg-card-hover); }
.pick-row input { accent-color: var(--accent); width: 15px; height: 15px; }
.pick-row .pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .psize { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; margin-bottom: 8px; }
.toggle-row .label { font-size: 13px; color: var(--text-dim); }
.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer; transition: background .15s;
}
.switch .track::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
  background: var(--text-faint); border-radius: 50%; transition: transform .15s, background .15s;
}
.switch input:checked + .track { background: var(--accent-soft-bg); border-color: rgba(226,232,240,.4); }
.switch input:checked + .track::before { transform: translateX(18px); background: var(--accent); }

/* ============================================================
   MISAFIR SAYFALARI (paylasim goruntuleme / dis yukleme)
   ============================================================ */
.guest-shell {
  min-height: 100vh; min-height: 100dvh; min-height: 100svh; display: flex; flex-direction: column;
}
.guest-topbar {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); z-index: 10;
}
.guest-topbar .mark { width: 32px; height: 32px; object-fit: contain; }
.guest-topbar .name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.guest-topbar .name span { color: var(--accent); }
.guest-topbar .sub { font-size: 11.5px; color: var(--text-faint); margin-left: auto; }

.guest-body { flex: 1; padding: 28px 24px 60px; max-width: 1100px; margin: 0 auto; width: 100%; }
.guest-lock {
  max-width: 380px; margin: 60px auto; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 28px;
}
.guest-lock svg { width: 40px; height: 40px; color: var(--accent); margin-bottom: 14px; }
.guest-lock h2 { font-size: 18px; margin-bottom: 6px; }
.guest-lock p { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }

.guest-title { font-size: 20px; margin-bottom: 4px; }
.guest-sub { color: var(--text-faint); font-size: 13px; margin-bottom: 22px; }

.guest-dropzone {
  border: 1.5px dashed var(--border-light); border-radius: var(--radius-lg);
  padding: 50px 24px; text-align: center; cursor: pointer; transition: all .15s;
  max-width: 520px; margin: 20px auto;
}
.guest-dropzone:hover, .guest-dropzone.dragover { border-color: var(--accent); background: var(--accent-soft-bg); }
.guest-dropzone svg { width: 40px; height: 40px; color: var(--text-faint); margin-bottom: 14px; }
.guest-dropzone p { font-size: 14px; color: var(--text-dim); }
.guest-dropzone span { color: var(--accent); font-weight: 600; }
.guest-quota-note { text-align: center; font-size: 12px; color: var(--text-faint); margin-top: 10px; }

.guest-footer { text-align: center; padding: 24px; font-size: 11.5px; color: var(--text-faint); }
.guest-footer a { color: var(--accent); }

/* ============================================================
   GENIS MOBIL UYUMLULUK GELISTIRMELERI
   ============================================================ */
@media (max-width: 880px) {
  .link-row .top-line { flex-direction: column; align-items: stretch; }
  .link-row .link-url { width: 100%; }
  .guest-body { padding: 20px 14px 50px; }
  .guest-topbar { padding: 12px 14px; }
  .selection-bar { width: calc(100% - 24px); justify-content: space-between; bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 14px); }
  .modal { width: calc(100% - 20px); }
}

@media (max-width: 420px) {
  .auth-card { padding: 28px 20px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(122px,1fr)); gap: 8px; }
  .modal-body { padding: 16px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .tab-row { overflow-x: auto; max-width: 100%; }
  .link-row .actions .btn { flex: 1; }
  .guest-dropzone { padding: 34px 16px; }
  #select-toggle-btn { padding: 8px; }
  #select-toggle-btn span { display: none; }
}

/* Cok kucuk ekranlarda topbar elemanlarinin taskmasini engelle */
@media (max-width: 360px) {
  .search-box { display: none; }
  .icon-btn.search-mobile-toggle { display: flex; }
}

/* ============================================================
   DOSYA GORUNTULEYICI (LIGHTBOX) - resim/video icin buyuk on izleme
   ============================================================ */
.viewer-overlay {
  position: fixed; inset: 0; background: rgba(13,15,20,0.9); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; z-index: 150; padding: 20px;
  opacity: 0;
}
.viewer-overlay.open { display: flex; animation: hsViewerFadeIn .18s ease forwards; }
.viewer-overlay.closing { display: flex; animation: hsViewerFadeOut .16s ease forwards; }
.viewer-overlay.closing .viewer-box { animation: hsViewerBoxOut .16s ease forwards; }
@keyframes hsViewerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hsViewerFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes hsViewerBoxIn {
  from { opacity: 0; transform: scale(.97) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes hsViewerBoxOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(.97) translateY(6px); }
}
/* Bilgi paneli ARTIK HER ZAMAN SAGDA - medyanin dikey/yatay olmasi fark
   etmez (onceki surumde yatay medyada panel alta gecıyordu, bu tutarsizdi). */
.viewer-box {
  width: 100%; max-width: 1100px;
  /* max-height DEGIL, height: ic ogelerin (ozellikle kaydirilan bilgi
     panelinin) BELIRLI bir yuksekligi olmasi icin sart - aksi halde
     "flex:1; overflow-y:auto" hicbir seye gore kisitlanmadigindan
     kaymaz, sadece icerik kadar uzar (kaydirma sorununun asil sebebi buydu). */
  height: 88vh; height: 88dvh; max-height: 720px;
  display: flex; flex-direction: row; align-items: stretch; gap: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  animation: hsViewerBoxIn .2s cubic-bezier(.2,.8,.3,1) forwards;
}

.viewer-close {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(30,33,41,0.75); border: 1px solid rgba(226,232,240,0.22);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
}
.viewer-close svg { width: 18px; height: 18px; }

.viewer-media {
  flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); overflow: hidden; position: relative;
}
.viewer-media img, .viewer-media video { max-width: 100%; max-height: 100%; display: block; }
.video-unplayable, .video-converting {
  max-width: 380px; padding: 34px 24px; text-align: center; margin: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.video-unplayable svg { width: 34px; height: 34px; color: var(--text-faint); margin-bottom: 12px; }
.video-unplayable p, .video-converting p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin-bottom: 10px; }
.video-unplayable p:last-child, .video-converting p:last-child { margin-bottom: 0; }
.video-unplayable b, .video-converting b { color: var(--text); }
.video-unplayable .hint { color: var(--accent); }
.video-converting .spinner { margin: 0 auto 14px; }
.viewer-media .ext-icon-lg {
  width: 140px; height: 140px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: #fff;
}

/* ---- Sag bilgi paneli - ARTIK TUM DURUMLARDA sabit genislikli bir
   sutun (yatay/dikey medya farki yok), TAM YUKSEKLIKTE ve kendi icinde
   bagimsiz kayabiliyor. ---- */
.viewer-panel {
  flex-shrink: 0; width: 340px; height: 100%;
  background: var(--bg-card); display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
}
.viewer-panel-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px;
  /* Dokunmatik cihazlarda arka plan kilitlenirken (bkz. HS.lockScroll,
     body'ye touch-action:none uygular) bu panelin KENDISI hala parmakla
     kaydirilabilsin diye - aksi halde mobilde onizleme bilgileri hic
     kaydirilamiyordu. */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.viewer-warning {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--accent-soft-bg); border: 1px solid rgba(226,232,240,0.25);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5;
  margin-bottom: 16px;
}
.viewer-warning svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

.vname-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
.vname-text { font-size: 15px; font-weight: 700; word-break: break-word; flex: 1; line-height: 1.35; }
.vname-edit-btn {
  flex-shrink: 0; background: none; border: none; color: var(--text-faint); cursor: pointer;
  padding: 4px; border-radius: 6px; display: flex; position: relative; margin-top: 1px;
}
.vname-edit-btn:hover { color: var(--accent); background: var(--bg-card-hover); }
.vname-edit-btn svg { width: 15px; height: 15px; }
.vname-edit-btn::after {
  content: "Düzenle"; position: absolute; top: 130%; right: 0; white-space: nowrap;
  background: var(--bg-elevated); border: 1px solid var(--border-light); color: var(--text);
  font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 3;
}
.vname-edit-btn:hover::after { opacity: 1; }

.vname-edit-row { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.vname-input-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px;
  background: var(--bg-input); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0 4px 0 10px;
}
.vname-input-wrap input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text); font-size: 13px;
  padding: 8px 0; font-family: inherit;
}
.vname-ext { font-size: 12px; color: var(--text-faint); flex-shrink: 0; padding-right: 6px; font-family: var(--font-mono); }
.vname-icon-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vname-icon-btn svg { width: 14px; height: 14px; }
.vname-icon-btn.ok { background: var(--accent); color: var(--accent-ink); }
.vname-icon-btn.cancel { background: var(--bg-input); color: var(--text-faint); border: 1px solid var(--border); }
.vname-icon-btn.cancel:hover { color: var(--danger); }

.vinfo-list { margin-bottom: 18px; }
.vinfo-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.vinfo-row:last-child { border-bottom: none; }
.vinfo-row .vlabel { color: var(--text-faint); flex-shrink: 0; }
.vinfo-row .vvalue { color: var(--text); text-align: right; word-break: break-word; font-family: var(--font-mono); font-size: 12px; }
.vinfo-row .vvalue.muted { color: var(--text-faint); font-family: inherit; }
.vinfo-section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin: 16px 0 4px;
}
.vinfo-section-title:first-child { margin-top: 0; }

.viewer-panel-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.viewer-panel-actions .btn { flex: 1; padding-left: 6px; padding-right: 6px; font-size: 12.5px; }
.viewer-download-full { display: block; width: 100%; text-align: center; margin-bottom: 14px; }
.viewer-details-link {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--text-faint); font-size: 11.5px; font-family: inherit; cursor: pointer; padding: 6px 0;
  text-decoration: underline; text-decoration-color: var(--border-light); text-underline-offset: 3px;
}
.viewer-details-link:hover { color: var(--accent); }

.viewer-subpanel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.viewer-subpanel-title { font-size: 12.5px; font-weight: 700; margin-bottom: 10px; }
.viewer-subpanel-actions { display: flex; gap: 8px; margin-top: 12px; }
.viewer-subpanel-actions .btn { flex: 1; }
.viewer-folder-tree { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.folder-tree-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px;
  cursor: pointer; font-size: 12.5px; color: var(--text-dim);
}
.folder-tree-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-faint); }
.folder-tree-item:hover { background: var(--bg-card-hover); color: var(--text); }
.folder-tree-item.selected { background: var(--accent-soft-bg); color: var(--accent); font-weight: 600; }
.folder-tree-item.selected svg { color: var(--accent); }

@media (max-width: 760px) {
  .viewer-overlay { padding: 0; }
  .viewer-box {
    max-width: 100%; width: 100%;
    height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; flex-direction: column;
  }
  .viewer-media { width: 100%; height: 46vh; height: 46dvh; flex: 0 0 auto; }
  .viewer-panel { width: 100%; height: auto; flex: 1; min-height: 0; border-left: none; border-top: 1px solid var(--border); }
  .viewer-close { top: 10px; right: 10px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-overlay.open, .viewer-box { animation: none; }
}


/* ============================================================
   MOBIL "DAHA FAZLA" PANELI (alt navigasyona sigmayan secenekler)
   ============================================================ */
.more-sheet-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13,15,20,0.65);
}
.more-sheet-overlay.open { display: block; }
.more-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-elevated); border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  max-height: 70vh; max-height: 70dvh; overflow-y: auto;
  touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.more-sheet-handle {
  width: 40px; height: 4px; border-radius: 4px; background: var(--border-light);
  margin: 6px auto 14px;
}
.more-sheet .nav-item { padding: 13px 12px; font-size: 14px; }
.more-sheet .nav-item svg { width: 19px; height: 19px; }

@media (min-width: 881px) {
  .more-sheet-overlay { display: none !important; }
}

/* ============================================================
   KLASORLER
   ============================================================ */
.folder-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 14px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s;
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.folder-card:hover { transform: translateY(-2px); border-color: var(--border-light); box-shadow: 0 8px 20px rgba(63,73,89,0.3); }
.folder-card .folder-icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft-bg); display: flex; align-items: center; justify-content: center;
}
.folder-card .folder-icon-wrap svg { width: 22px; height: 22px; color: var(--accent); }
.folder-card .folder-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.folder-card .folder-name svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.folder-card .folder-meta { font-size: 11px; color: var(--text-faint); }
.folder-card .folder-menu-btn {
  position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: none; color: var(--text-faint); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; touch-action: manipulation;
}
.folder-card .folder-menu-btn:hover, .folder-card .folder-menu-btn:active { background: var(--bg-card-hover); color: var(--text); }

.breadcrumb-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 14px 24px 0; font-size: 13px; color: var(--text-dim);
}
.breadcrumb-row .crumb { cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.breadcrumb-row .crumb:hover { background: var(--bg-card); color: var(--text); }
.breadcrumb-row .crumb.current { color: var(--text); font-weight: 600; cursor: default; }
.breadcrumb-row .crumb.current:hover { background: none; }
.breadcrumb-row .sep { color: var(--text-faint); }

.new-folder-btn {
  display: inline-flex; align-items: center; gap: 6px;
}

.folder-picker-list { max-height: 320px; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.folder-picker-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
}
.folder-picker-row:hover { background: var(--bg-card-hover); }
.folder-picker-row svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.folder-picker-crumbs { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.folder-picker-crumbs span { cursor: pointer; }
.folder-picker-crumbs span:hover { color: var(--text); }

@media (max-width: 880px) {
  .breadcrumb-row { padding: 12px 14px 0; }
}

/* ============================================================
   AYARLAR PANELI (Profil + Guvenlik)
   ============================================================ */
.avatar-upload-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.avatar-preview {
  width: 68px; height: 68px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--teal), var(--teal-dim));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent-ink);
  border: 1px solid var(--border);
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview { position: relative; }
.avatar-preview.uploading img { filter: blur(2px) brightness(.6); }
.avatar-preview-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,15,20,0.4); border-radius: inherit;
}
.avatar-preview-loading .spinner { width: 18px; height: 18px; border-width: 2px; }
.avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.settings-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.settings-info-row:last-child { border-bottom: none; }
.settings-info-row span { color: var(--text-faint); }
.settings-info-row b { color: var(--text); font-weight: 600; }

/* Sidebar avatar - profil fotografi varsa gorseli, yoksa bas harfleri gosterir */
.sidebar-user .avatar { overflow: hidden; }
.sidebar-user .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ============================================================
   GIRIS / CIKIS SPLASH EKRANI (logo aninasyonu)
   ============================================================ */
.hs-splash-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.hs-splash-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px 460px at 50% 40%, rgba(226,232,240,0.08), transparent 65%);
}
.hs-splash-overlay.show { opacity: 1; pointer-events: all; }
.hs-splash-overlay.fade-out { opacity: 0; }
.hs-splash-img {
  position: relative;
  width: min(300px, 62vw);
  filter: drop-shadow(0 20px 60px rgba(226,232,240,0.3));
}