/* =====================================================================
   FileUSB — BİLEŞEN KATMANI
   Sürüm: 1.0.0 · 10 Eylül 2026
   Gereksinim: fileusb-tokens.css ÖNCE yüklenmeli.
   Bu dosyada ham renk yoktur; yalnız var(--fu-*) kullanılır.
   ===================================================================== */

/* ---------- TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fu-font);
  font-size: var(--fu-fs-base);
  line-height: var(--fu-lh-body);
  color: var(--fu-text);
  background: var(--fu-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;              /* yatay taşma güvencesi */
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--fu-text-strong);
  font-weight: var(--fu-fw-bold);
  line-height: var(--fu-lh-heading);
  letter-spacing: var(--fu-ls-heading);
  margin: 0 0 var(--fu-sp-4);
  text-wrap: balance;              /* başlık satırlarını dengeler */
}
h1 { font-size: var(--fu-fs-h1); }
h2 { font-size: var(--fu-fs-h2); }
h3 { font-size: var(--fu-fs-h3); font-weight: var(--fu-fw-semi); }
p  { margin: 0 0 var(--fu-sp-4); max-width: var(--fu-w-text); }
a  { color: var(--fu-brand); text-underline-offset: 3px; }

/* Klavye odağı — HER etkileşimli öğede görünür olmalı */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--fu-focus);
  outline-offset: 2px;
  border-radius: var(--fu-r-sm);
}

.fu-skip {                          /* içeriğe atla */
  position: absolute; left: -9999px; top: 0;
  background: var(--fu-brand); color: var(--fu-text-on-brand);
  padding: var(--fu-sp-3) var(--fu-sp-5); border-radius: 0 0 var(--fu-r-sm) 0;
  z-index: var(--fu-z-toast); font-weight: var(--fu-fw-semi);
}
.fu-skip:focus { left: 0; }

.fu-sr {                            /* yalnız ekran okuyucu */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- YERLEŞİM ---------- */
.fu-wrap    { width: 100%; max-width: var(--fu-w-wide); margin-inline: auto; padding-inline: var(--fu-gutter); }
.fu-wrap-md { max-width: var(--fu-w-content); }
.fu-wrap-sm { max-width: var(--fu-w-narrow); }

.fu-section    { padding-block: var(--fu-section-md); }
.fu-section-lg { padding-block: var(--fu-section-lg); }
.fu-section-sm { padding-block: var(--fu-section-sm); }
.fu-section-soft { background: var(--fu-bg-soft); }
.fu-section-surface { background: var(--fu-bg-elevated); }

.fu-grid { display: grid; gap: var(--fu-sp-6); }
.fu-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fu-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fu-grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.fu-stack   { display: flex; flex-direction: column; gap: var(--fu-sp-4); }
.fu-row     { display: flex; align-items: center; gap: var(--fu-sp-3); flex-wrap: wrap; }
.fu-between { display: flex; align-items: center; justify-content: space-between; gap: var(--fu-sp-4); flex-wrap: wrap; }

/* ---------- ETİKET (bölüm üstü) ----------
   Canlıda "DOSYALARINIZ, SADE BİÇİMDE ELİNİZİN ALTINDA" gibi uzun
   büyük-harf diziler vardı. Burada etiket KISA tutulur (≤ 2 kelime). */
.fu-eyebrow {
  display: inline-flex; align-items: center; gap: var(--fu-sp-2);
  font-size: var(--fu-fs-xs); font-weight: var(--fu-fw-semi);
  letter-spacing: var(--fu-ls-label); text-transform: uppercase;
  color: var(--fu-brand); margin-bottom: var(--fu-sp-3);
}

.fu-lead { font-size: var(--fu-fs-lg); color: var(--fu-text); max-width: 60ch; }
.fu-muted { color: var(--fu-text-muted); }
.fu-small { font-size: var(--fu-fs-sm); }

/* ---------- DÜĞMELER ---------- */
.fu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--fu-sp-2);
  min-height: var(--fu-tap-min);
  padding: var(--fu-sp-3) var(--fu-sp-6);
  font: inherit; font-weight: var(--fu-fw-semi); font-size: var(--fu-fs-base);
  border: 1px solid transparent; border-radius: var(--fu-r-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--fu-dur-base) var(--fu-ease),
              border-color var(--fu-dur-base) var(--fu-ease),
              transform var(--fu-dur-fast) var(--fu-ease);
}
.fu-btn:active { transform: translateY(1px); }

.fu-btn-primary { background: var(--fu-brand); color: var(--fu-text-on-brand); }
.fu-btn-primary:hover { background: var(--fu-brand-hover); }

.fu-btn-secondary {
  background: var(--fu-bg-elevated); color: var(--fu-text-strong);
  border-color: var(--fu-border-strong);
}
.fu-btn-secondary:hover { border-color: var(--fu-brand); color: var(--fu-brand); }

.fu-btn-ghost { background: transparent; color: var(--fu-brand); padding-inline: var(--fu-sp-3); }
.fu-btn-ghost:hover { background: var(--fu-brand-soft); }

.fu-btn-danger { background: var(--fu-danger-700); color: #fff; }

.fu-btn-lg { min-height: 52px; padding-inline: var(--fu-sp-8); font-size: var(--fu-fs-lg); }
.fu-btn-sm { min-height: 36px; padding: var(--fu-sp-2) var(--fu-sp-4); font-size: var(--fu-fs-sm); }
.fu-btn-block { width: 100%; }
.fu-btn[disabled], .fu-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- ROZETLER ---------- */
.fu-badge {
  display: inline-flex; align-items: center; gap: var(--fu-sp-1);
  padding: 3px var(--fu-sp-3);
  font-size: var(--fu-fs-xs); font-weight: var(--fu-fw-semi);
  border-radius: var(--fu-r-pill); white-space: nowrap;
  background: var(--fu-canvas-soft); color: var(--fu-text-muted);
}
.fu-badge-active  { background: var(--fu-success-100); color: var(--fu-success-700); }
.fu-badge-soon    { background: var(--fu-canvas-soft); color: var(--fu-text-muted); }
.fu-badge-beta    { background: var(--fu-amber-100);  color: var(--fu-amber-700); }
.fu-badge-brand   { background: var(--fu-brand-soft); color: var(--fu-brand); }
.fu-badge-warning { background: var(--fu-warning-100); color: var(--fu-warning-700); }
.fu-badge-danger  { background: var(--fu-danger-100);  color: var(--fu-danger-700); }
.fu-badge-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ---------- KARTLAR ---------- */
.fu-card {
  background: var(--fu-bg-elevated);
  border: 1px solid var(--fu-border);
  border-radius: var(--fu-r-lg);
  padding: var(--fu-sp-6);
  box-shadow: var(--fu-shadow-sm);
}
.fu-card-lift { transition: box-shadow var(--fu-dur-base) var(--fu-ease), transform var(--fu-dur-base) var(--fu-ease); }
.fu-card-lift:hover { box-shadow: var(--fu-shadow-md); transform: translateY(-2px); }

.fu-card-icon {
  width: 44px; height: 44px; border-radius: var(--fu-r-md);
  display: grid; place-items: center; margin-bottom: var(--fu-sp-4);
  background: var(--fu-brand-soft); color: var(--fu-brand);
}
.fu-card h3 { margin-bottom: var(--fu-sp-2); }
.fu-card p:last-child { margin-bottom: 0; }

/* ---------- PAKET KARTI ---------- */
.fu-plan { display: flex; flex-direction: column; gap: var(--fu-sp-4); position: relative; }
.fu-plan-featured { border-color: var(--fu-brand); box-shadow: var(--fu-shadow-md); }
.fu-plan-flag {
  position: absolute; top: calc(var(--fu-sp-4) * -1); left: 50%; transform: translateX(-50%);
  background: var(--fu-brand); color: var(--fu-text-on-brand);
  font-size: var(--fu-fs-xs); font-weight: var(--fu-fw-semi);
  padding: 4px var(--fu-sp-4); border-radius: var(--fu-r-pill); white-space: nowrap;
}
.fu-plan-quota { font-size: var(--fu-fs-h2); font-weight: var(--fu-fw-bold); color: var(--fu-text-strong); line-height: 1.1; }
.fu-plan-price { font-size: var(--fu-fs-h3); font-weight: var(--fu-fw-semi); color: var(--fu-brand); }
.fu-plan-price small { font-size: var(--fu-fs-sm); font-weight: var(--fu-fw-regular); color: var(--fu-text-muted); }
.fu-plan-for { font-size: var(--fu-fs-sm); color: var(--fu-text-muted); min-height: 2.6em; }
.fu-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fu-sp-2); font-size: var(--fu-fs-sm); }
.fu-plan ul li { display: flex; gap: var(--fu-sp-2); align-items: flex-start; }
.fu-plan ul li svg { flex: none; margin-top: 3px; color: var(--fu-success-700); }
.fu-plan .fu-btn { margin-top: auto; }

/* ---------- BAŞLIK / GEZİNME ---------- */
.fu-header {
  position: sticky; top: 0; z-index: var(--fu-z-header);
  background: color-mix(in srgb, var(--fu-bg-elevated) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fu-border);
}
.fu-header-inner { display: flex; align-items: center; gap: var(--fu-sp-6); min-height: 68px; }
.fu-logo { display: inline-flex; align-items: center; gap: var(--fu-sp-2); text-decoration: none; flex: none; }
.fu-nav { display: flex; gap: var(--fu-sp-5); margin-left: auto; }
.fu-nav a {
  color: var(--fu-text); text-decoration: none; font-size: var(--fu-fs-sm);
  font-weight: var(--fu-fw-medium); padding: var(--fu-sp-2) 0;
  border-bottom: 2px solid transparent;
}
.fu-nav a:hover, .fu-nav a[aria-current="page"] { color: var(--fu-brand); border-bottom-color: var(--fu-brand); }
.fu-header-actions { display: flex; align-items: center; gap: var(--fu-sp-3); }

.fu-lang { display: inline-flex; border: 1px solid var(--fu-border-strong); border-radius: var(--fu-r-pill); overflow: hidden; }
.fu-lang a { padding: 6px var(--fu-sp-3); font-size: var(--fu-fs-xs); font-weight: var(--fu-fw-semi); text-decoration: none; color: var(--fu-text-muted); }
.fu-lang a[aria-current="true"] { background: var(--fu-brand); color: var(--fu-text-on-brand); }

.fu-burger { display: none; background: none; border: 1px solid var(--fu-border-strong); border-radius: var(--fu-r-sm); width: 44px; height: 44px; cursor: pointer; color: var(--fu-text-strong); }

@media (max-width: 900px) {
  .fu-nav { display: none; }
  .fu-burger { display: grid; place-items: center; margin-left: auto; }
  .fu-header-actions .fu-btn span { display: none; }   /* dar ekranda etiket kısalır */
}

/* ---------- HERO ---------- */
.fu-hero { padding-block: var(--fu-section-lg); }
.fu-hero-grid { display: grid; gap: var(--fu-sp-10); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fu-hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--fu-sp-12); } }
.fu-hero h1 { font-size: var(--fu-fs-display); letter-spacing: var(--fu-ls-display); line-height: var(--fu-lh-display); }
.fu-hero-cta { display: flex; gap: var(--fu-sp-3); flex-wrap: wrap; margin-top: var(--fu-sp-6); }
@media (max-width: 560px) { .fu-hero-cta .fu-btn { flex: 1 1 100%; } }

/* ---------- GÜVEN ŞERİDİ ---------- */
.fu-trust { border-block: 1px solid var(--fu-border); background: var(--fu-bg-elevated); }
.fu-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fu-sp-6); justify-content: center; }
.fu-trust li { display: inline-flex; align-items: center; gap: var(--fu-sp-2); font-size: var(--fu-fs-sm); color: var(--fu-text-muted); }
.fu-trust svg { color: var(--fu-brand); flex: none; }

/* ---------- ADIMLAR ---------- */
.fu-steps { counter-reset: fustep; display: grid; gap: var(--fu-sp-6); }
.fu-step { display: flex; gap: var(--fu-sp-4); align-items: flex-start; }
.fu-step::before {
  counter-increment: fustep; content: counter(fustep, decimal-leading-zero);
  flex: none; width: 40px; height: 40px; border-radius: var(--fu-r-md);
  display: grid; place-items: center;
  background: var(--fu-brand-soft); color: var(--fu-brand);
  font-weight: var(--fu-fw-bold); font-size: var(--fu-fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ---------- CİHAZ DURUMU ---------- */
.fu-devices { display: grid; gap: var(--fu-sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fu-device {
  display: flex; align-items: center; gap: var(--fu-sp-3);
  padding: var(--fu-sp-4); border: 1px solid var(--fu-border);
  border-radius: var(--fu-r-md); background: var(--fu-bg-elevated);
}
.fu-device-name { font-weight: var(--fu-fw-semi); color: var(--fu-text-strong); font-size: var(--fu-fs-sm); }

/* ---------- FORMLAR ---------- */
.fu-field { display: grid; gap: var(--fu-sp-2); margin-bottom: var(--fu-sp-5); }
.fu-label { font-size: var(--fu-fs-sm); font-weight: var(--fu-fw-semi); color: var(--fu-text-strong); }
.fu-input, .fu-select, .fu-textarea {
  width: 100%; min-height: var(--fu-tap-min);
  padding: var(--fu-sp-3) var(--fu-sp-4);
  font: inherit; font-size: var(--fu-fs-base);   /* 16px — iOS'ta yakınlaştırmayı önler */
  color: var(--fu-text-strong); background: var(--fu-bg-elevated);
  border: 1px solid var(--fu-border-strong); border-radius: var(--fu-r-md);
  transition: border-color var(--fu-dur-fast) var(--fu-ease);
}
.fu-input:hover, .fu-select:hover { border-color: var(--fu-ink-400); }
.fu-input:focus, .fu-select:focus, .fu-textarea:focus { border-color: var(--fu-brand); }
.fu-hint  { font-size: var(--fu-fs-sm); color: var(--fu-text-muted); }
.fu-error { font-size: var(--fu-fs-sm); color: var(--fu-danger-700); display: flex; gap: var(--fu-sp-2); align-items: flex-start; }
.fu-input[aria-invalid="true"] { border-color: var(--fu-danger-700); }

/* ---------- UYARI KUTULARI ---------- */
.fu-note {
  display: flex; gap: var(--fu-sp-3); align-items: flex-start;
  padding: var(--fu-sp-4) var(--fu-sp-5);
  border-radius: var(--fu-r-md); border: 1px solid var(--fu-border);
  background: var(--fu-bg-elevated); font-size: var(--fu-fs-sm);
}
.fu-note svg { flex: none; margin-top: 2px; }
.fu-note p { margin: 0; }
.fu-note-info  { background: var(--fu-brand-soft);   border-color: var(--fu-blue-200);   color: var(--fu-blue-900); }
.fu-note-warn  { background: var(--fu-warning-100);  border-color: var(--fu-amber-200);  color: var(--fu-amber-700); }
.fu-note-ok    { background: var(--fu-success-100);  border-color: transparent;          color: var(--fu-success-700); }
.fu-note-danger{ background: var(--fu-danger-100);   border-color: transparent;          color: var(--fu-danger-700); }

/* ---------- KOTA ÖLÇER ---------- */
.fu-quota { display: grid; gap: var(--fu-sp-2); }
.fu-quota-bar { height: 10px; border-radius: var(--fu-r-pill); background: var(--fu-canvas-soft); overflow: hidden; }
.fu-quota-fill { height: 100%; border-radius: inherit; background: var(--fu-brand); transition: width var(--fu-dur-slow) var(--fu-ease); }
.fu-quota-fill[data-level="warn"] { background: var(--fu-amber-500); }
.fu-quota-fill[data-level="crit"] { background: var(--fu-danger-500); }
.fu-quota-text { display: flex; justify-content: space-between; font-size: var(--fu-fs-sm); }

/* ---------- DOSYA LİSTESİ ---------- */
.fu-files { border: 1px solid var(--fu-border); border-radius: var(--fu-r-lg); background: var(--fu-bg-elevated); overflow: hidden; }
.fu-file {
  display: grid; align-items: center; gap: var(--fu-sp-4);
  grid-template-columns: 32px 1fr auto auto;
  padding: var(--fu-sp-3) var(--fu-sp-5);
  border-bottom: 1px solid var(--fu-border);
}
.fu-file:last-child { border-bottom: 0; }
.fu-file:hover { background: var(--fu-bg-soft); }
.fu-file-name { font-weight: var(--fu-fw-medium); color: var(--fu-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-file-meta { font-size: var(--fu-fs-sm); color: var(--fu-text-muted); font-variant-numeric: tabular-nums; }
.fu-file-icon { color: var(--fu-text-muted); }
@media (max-width: 640px) {
  .fu-file { grid-template-columns: 28px 1fr auto; }
  .fu-file .fu-file-meta.fu-file-date { display: none; }   /* dar ekranda tarih gizlenir */
}

/* ---------- TABLO (yönetim) ---------- */
.fu-table-wrap { overflow-x: auto; border: 1px solid var(--fu-border); border-radius: var(--fu-r-lg); background: var(--fu-bg-elevated); }
.fu-table { width: 100%; border-collapse: collapse; font-size: var(--fu-fs-sm); min-width: 640px; }
.fu-table th, .fu-table td { padding: var(--fu-sp-3) var(--fu-sp-4); text-align: left; border-bottom: 1px solid var(--fu-border); }
.fu-table th { font-weight: var(--fu-fw-semi); color: var(--fu-text-muted); background: var(--fu-canvas); white-space: nowrap; }
.fu-table tr:last-child td { border-bottom: 0; }
.fu-table td.fu-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- SSS ---------- */
.fu-faq { border: 1px solid var(--fu-border); border-radius: var(--fu-r-lg); background: var(--fu-bg-elevated); overflow: hidden; }
.fu-faq details { border-bottom: 1px solid var(--fu-border); }
.fu-faq details:last-child { border-bottom: 0; }
.fu-faq summary {
  cursor: pointer; list-style: none; padding: var(--fu-sp-4) var(--fu-sp-5);
  font-weight: var(--fu-fw-semi); color: var(--fu-text-strong);
  min-height: var(--fu-tap-min); display: flex; align-items: center;
  justify-content: space-between; gap: var(--fu-sp-4);
}
.fu-faq summary::-webkit-details-marker { display: none; }
.fu-faq summary::after { content: "+"; font-size: 1.35em; color: var(--fu-brand); flex: none; line-height: 1; }
.fu-faq details[open] summary::after { content: "\2212"; }
.fu-faq .fu-faq-body { padding: 0 var(--fu-sp-5) var(--fu-sp-5); }
.fu-faq .fu-faq-body p { margin: 0; }

/* ---------- ALT BİLGİ ---------- */
.fu-footer { background: var(--fu-bg-elevated); border-top: 1px solid var(--fu-border); padding-block: var(--fu-section-md) var(--fu-section-sm); }
.fu-footer-grid { display: grid; gap: var(--fu-sp-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fu-footer h4 { font-size: var(--fu-fs-sm); color: var(--fu-text-strong); margin-bottom: var(--fu-sp-3); }
.fu-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fu-sp-2); }
.fu-footer a { color: var(--fu-text-muted); text-decoration: none; font-size: var(--fu-fs-sm); }
.fu-footer a:hover { color: var(--fu-brand); }
.fu-footer-bottom { margin-top: var(--fu-sp-8); padding-top: var(--fu-sp-5); border-top: 1px solid var(--fu-border); font-size: var(--fu-fs-sm); color: var(--fu-text-muted); }

/* ---------- PANEL KABUĞU ---------- */
.fu-app { display: grid; min-height: 100vh; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .fu-app { grid-template-columns: 248px 1fr; } }
.fu-side { background: var(--fu-bg-elevated); border-right: 1px solid var(--fu-border); padding: var(--fu-sp-5); display: none; }
@media (min-width: 1000px) { .fu-side { display: block; } }
.fu-side nav { display: grid; gap: 2px; margin-top: var(--fu-sp-5); }
.fu-side a {
  display: flex; align-items: center; gap: var(--fu-sp-3);
  padding: var(--fu-sp-3) var(--fu-sp-4); border-radius: var(--fu-r-md);
  color: var(--fu-text); text-decoration: none; font-size: var(--fu-fs-sm); font-weight: var(--fu-fw-medium);
  min-height: var(--fu-tap-min);
}
.fu-side a:hover { background: var(--fu-bg-soft); }
.fu-side a[aria-current="page"] { background: var(--fu-brand-soft); color: var(--fu-brand); font-weight: var(--fu-fw-semi); }
.fu-main { padding: var(--fu-sp-6) var(--fu-gutter) var(--fu-sp-16); }

/* Mobil alt gezinme — panelde 1000px altında */
.fu-tabbar {
  position: sticky; bottom: 0; z-index: var(--fu-z-header);
  display: grid; grid-auto-flow: column;
  background: var(--fu-bg-elevated); border-top: 1px solid var(--fu-border);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1000px) { .fu-tabbar { display: none; } }
.fu-tabbar a {
  display: grid; place-items: center; gap: 2px;
  padding: var(--fu-sp-2); min-height: 56px;
  color: var(--fu-text-muted); text-decoration: none;
  font-size: 11px; font-weight: var(--fu-fw-medium);
}
.fu-tabbar a[aria-current="page"] { color: var(--fu-brand); }

/* ---------- BOŞ DURUM ---------- */
.fu-empty { text-align: center; padding: var(--fu-sp-16) var(--fu-sp-6); }
.fu-empty svg { color: var(--fu-ink-400); margin-inline: auto; margin-bottom: var(--fu-sp-4); }
.fu-empty h3 { margin-bottom: var(--fu-sp-2); }
.fu-empty p { margin-inline: auto; }

/* ---------- YÜKLEME ALANI ---------- */
.fu-drop {
  border: 2px dashed var(--fu-border-strong); border-radius: var(--fu-r-lg);
  padding: var(--fu-sp-12) var(--fu-sp-6); text-align: center;
  background: var(--fu-bg-elevated);
  transition: border-color var(--fu-dur-base) var(--fu-ease), background var(--fu-dur-base) var(--fu-ease);
}
.fu-drop:hover, .fu-drop[data-active="true"] { border-color: var(--fu-brand); background: var(--fu-bg-soft); }

/* ---------- YAZDIRMA ---------- */
@media print {
  .fu-header, .fu-tabbar, .fu-side, .fu-footer { display: none !important; }
  body { background: #fff; }
}