/* ============================================================================
   xbodrum Reels Studio — TEK stil kaynağı.
   ----------------------------------------------------------------------------
   Kurallar (yeni sayfa/bileşen eklerken):
     1. Şablonlara inline `style="..."` YAZMA. Buraya sınıf ekle.
     2. Sabit renk/boşluk/yarıçap yazma; aşağıdaki token'ları (--sp-3, --r-md,
        --sea ...) kullan. Tema değişimi tek yerden yapılabilsin.
     3. Mobil öncelikli: temel kurallar TELEFON içindir. Masaüstü farkları
        dosyanın sonundaki `@media (min-width:860px)` katmanında toplanır.
     4. Dokunma hedefi min --tap (44px). Buton/link küçültme.
   Marka: Fiko Mio paleti (ink / bone / sun / ember / sea).
   ========================================================================== */

/* ---------- 1. Token'lar ---------------------------------------------------
   (Koyu tema ileride: aynı isimleri `@media (prefers-color-scheme:dark)`
   içinde yeniden tanımlamak yeterli — bileşen CSS'ine dokunulmaz.) */
:root {
  /* Marka */
  --ink:#0A2540;  --bone:#F5F1E8;  --sun:#F4C430;  --ember:#D9531E;  --sea:#2D7D8E;

  /* Yüzey / metin */
  --bg:var(--bone);
  --surface:#fff;
  --surface-2:#FAF8F3;
  --line:#E8EEF5;
  --line-strong:#BFCBDC;
  --text:var(--ink);
  --text-muted:#7B8FA8;

  /* Durum renkleri (pill + hint ortak) */
  --ok-bg:#DCF1E4;    --ok-fg:#1d7a45;
  --warn-bg:#FBF1D6;  --warn-fg:#8a6d00;
  --err-bg:#F8DAD0;   --err-fg:#9c3415;
  --info-bg:#E8EEF5;  --info-fg:#3A5673;
  --wait-bg:#EFE7F7;  --wait-fg:#5b3d84;

  /* Boşluk ölçeği */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:28px; --sp-7:40px;

  /* Yarıçap */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* Tipografi */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px;
  --fs-md:17px; --fs-lg:20px; --fs-xl:24px;

  /* Gölge + ölçüler */
  --shadow-1:0 1px 2px rgba(10,37,64,.05);
  --shadow-2:0 -2px 14px rgba(10,37,64,.10);
  --tap:44px;                 /* min dokunma hedefi */
  --header-h:56px;
  --tabbar-h:60px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --content-max:920px;
}

/* ---------- 2. Temel ------------------------------------------------------ */
* { box-sizing:border-box; }

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

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.5;
  /* Alt sekme çubuğunun altında içerik kalmasın (mobil) */
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b));
  -webkit-tap-highlight-color:rgba(45,125,142,.15);
}
body.no-nav { padding-bottom:0; }   /* giriş sayfası: alt sekme çubuğu yok */

img, video { max-width:100%; }

/* ---------- 3. Kabuk: header ---------------------------------------------- */
.app-header {
  position:sticky; top:0; z-index:20;
  flex-wrap:wrap; row-gap:var(--sp-2);
  background:var(--ink); color:var(--bone);
  padding:calc(var(--sp-3) + var(--safe-t)) var(--sp-4) var(--sp-3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.brand {
  font-size:var(--fs-md); font-weight:700; letter-spacing:.3px;
  text-decoration:none; color:inherit; white-space:nowrap;
}
.brand span { color:var(--sun); }

/* Masaüstü menüsü — mobilde gizli (yerini .tabbar alır) */
.nav-desktop { display:none; }

/* Sağ üst: kullanıcı + çıkış */
.header-user { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-sm); }
.header-user .who {
  opacity:.7; max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.header-user a {
  color:var(--bone); text-decoration:none; opacity:.85;
  min-height:var(--tap); display:inline-flex; align-items:center;
}

/* ---------- 4. Kabuk: alt sekme çubuğu (mobil) ---------------------------- */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex;
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:var(--shadow-2);
  padding-bottom:var(--safe-b);
}
.tabbar a {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  height:var(--tabbar-h);
  text-decoration:none; color:var(--text-muted);
  font-size:11px; font-weight:600;
}
.tabbar .ic { font-size:19px; line-height:1; }
.tabbar .lb { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Aktif sekme: üstte sarı çizgi (inset gölge — konumlandırma hilesi yok) */
.tabbar a.is-active { color:var(--ink); box-shadow:inset 0 3px 0 var(--sun); }

/* ---------- 5. Yerleşim --------------------------------------------------- */
main { max-width:var(--content-max); margin:0 auto; padding:var(--sp-4) var(--sp-3); }

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-4);
  margin-bottom:var(--sp-4); box-shadow:var(--shadow-1);
}
.card--narrow { max-width:400px; margin-left:auto; margin-right:auto; }

/* Yan yana duran kutular (dashboard, form kolonları) */
.cols { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.cols > * { flex:1 1 220px; min-width:0; }
.cols > .card { margin-bottom:0; }        /* aralığı gap verir, çift boşluk olmasın */

/* Dikey aralık + buton grubu */
.toolbar { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); align-items:center; }

/* ---------- 6. Tipografi -------------------------------------------------- */
h1 { font-size:var(--fs-lg); margin:0 0 var(--sp-1); line-height:1.25; }
.card-title { font-size:var(--fs-md); margin:0 0 var(--sp-1); line-height:1.3; }
.muted { color:var(--text-muted); font-size:var(--fs-sm); }
.fine { font-size:var(--fs-xs); }
code {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:1px 5px; font-size:.92em;
}
a.link {
  color:var(--sea); font-weight:600; text-decoration:none;
  display:inline-block; padding:var(--sp-1) 0;
}
a.link:hover { text-decoration:underline; }

/* ---------- 7. Form ------------------------------------------------------- */
label { display:block; font-weight:600; margin:var(--sp-4) 0 var(--sp-2); font-size:var(--fs-sm); }

input[type=text], input[type=password], input[type=file], textarea, select {
  width:100%; padding:12px 13px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-family:inherit; background:var(--surface); color:var(--text);
  /* 16px: iOS odakta otomatik zoom yapmasın */
  font-size:16px;
  min-height:var(--tap);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--sea); outline-offset:1px; border-color:var(--sea);
}
textarea { min-height:110px; resize:vertical; line-height:1.5; }

/* Onay kutusu satırı — etiketin tamamı dokunulabilir */
.check {
  display:flex; align-items:center; gap:var(--sp-3);
  font-weight:600; margin:var(--sp-3) 0; min-height:var(--tap);
}
.check input[type=checkbox] { width:22px; height:22px; min-height:0; flex:0 0 auto; accent-color:var(--sea); }

/* Kaydırıcı — parmakla tutulabilir kalınlık */
input[type=range] {
  width:100%; margin:var(--sp-2) 0; accent-color:var(--sun);
  height:var(--tap); background:transparent;
}

/* ---------- 8. Buton ------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  background:var(--sun); color:var(--ink);
  border:none; border-radius:var(--r-sm);
  padding:13px 20px; min-height:var(--tap);
  font-family:inherit; font-size:var(--fs-base); font-weight:700;
  text-decoration:none; cursor:pointer;
}
.btn:hover { filter:brightness(.96); }
.btn:active { transform:translateY(1px); }
.btn-ghost  { background:var(--info-bg); color:var(--ink); }
.btn-danger { background:var(--err-bg);  color:var(--err-fg); }
.btn-sm     { padding:8px 14px; min-height:36px; font-size:var(--fs-sm); border-radius:var(--r-sm); }
/* Mobilde ana aksiyon tam genişlik; .btn-sm ve .toolbar içindekiler hariç */
.btn-block { width:100%; }

/* ---------- 9. Rozet + bildirim kutusu ------------------------------------ */
.pill {
  display:inline-block; padding:3px 10px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; white-space:nowrap;
  background:var(--info-bg); color:var(--info-fg);
}
.queued          { background:var(--info-bg); color:var(--info-fg); }
.processing      { background:var(--warn-bg); color:var(--warn-fg); }
.metin_bekliyor  { background:var(--wait-bg); color:var(--wait-fg); }
.done            { background:var(--ok-bg);   color:var(--ok-fg); }
.error           { background:var(--err-bg);  color:var(--err-fg); }

.hint {
  background:#FBF7E8; border:1px solid var(--sun); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-3); font-size:var(--fs-sm); margin:var(--sp-3) 0;
}
.hint--ok  { background:var(--ok-bg);  border-color:var(--ok-fg); }
.hint--err { background:var(--err-bg); border-color:var(--ember); }

/* Satır içi durum metni (JS ile basılan sonuç mesajları) */
.ok-text  { color:var(--ok-fg); }
.err-text { color:var(--err-fg); }

/* ---------- 10. Tablo → mobilde kart -------------------------------------- */
.tbl { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.tbl th, .tbl td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); }
.tbl th { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); }

/* MOBİL: her satır bağımsız bir kart; başlıklar td::before ile etikete döner */
@media (max-width:859px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display:block; width:100%; }
  .tbl thead { display:none; }
  .tbl tr {
    border:1px solid var(--line); border-radius:var(--r-md);
    padding:var(--sp-3); margin-bottom:var(--sp-3); background:var(--surface);
  }
  .tbl td {
    border:0; padding:var(--sp-1) 0;
    display:flex; gap:var(--sp-3); align-items:baseline; justify-content:space-between;
  }
  .tbl td::before {
    content:attr(data-label);
    flex:0 0 auto; color:var(--text-muted);
    font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  }
  /* Etiketsiz/tam genişlik hücre (ör. aksiyon satırı, uzun detay) */
  .tbl td.td-full { display:block; }
  .tbl td.td-full::before { display:none; }
  .tbl td.td-lead { font-weight:600; font-size:var(--fs-base); }
  .tbl td.td-lead::before { display:none; }
  /* Aksiyon hücresi: etiket yok, butonlar sarmalı satır olur */
  .tbl td.row-actions { display:flex; margin-top:var(--sp-2); }
  .tbl td.row-actions::before { display:none; }
}

/* Satır içi aksiyonlar (aç / düzenle / sil) */
.row-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.row-actions form { display:inline; margin:0; }

/* ---------- 11. Sayfaya özel ---------------------------------------------- */
/* İş sayfası: video + paylaşım metni */
.job-view { display:flex; flex-direction:column; gap:var(--sp-4); }
.job-video {
  /* 9:16 dikey — yüksekliği ekranın yarısıyla sınırla ki "İndir" görünür kalsın.
     0.5625 = 9/16; genişliği kısıtlamak yüksekliği kısıtlar (siyah bant oluşmaz). */
  width:100%; max-width:calc(54vh * 0.5625); margin-inline:auto;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:#000; display:block;
}
/* 16:9 yatay (YouTube çıktısı): yukarıdaki dikey kısıtı BURADA GEÇERSİZ.
   Aynı formül yatayda videoyu pul boyutuna düşürüyordu (54vh*0.5625 genişlik →
   16:9'da çeyreği kadar yükseklik). Yatay zaten kısa; tam genişlik sığar. */
.job-video--yatay { max-width:100%; }
.job-text { flex:1 1 260px; min-width:0; }
.job-text textarea { background:var(--surface-2); }

/* Dashboard sayaç bloğu */
.stat-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* Filtre çipleri (iş listesi) — mobilde yatay kaydırılır, sarmaz */
.chips {
  display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:var(--sp-1); scrollbar-width:none;
}
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; min-height:38px;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:var(--surface); color:var(--text);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap;
}
.chip b { font-variant-numeric:tabular-nums; opacity:.6; font-weight:700; }
.chip:hover { border-color:var(--sea); }
.chip.is-active { background:var(--ink); color:var(--bone); border-color:var(--ink); }
.chip.is-active b { opacity:.75; }

/* Seçilen dosya listesi (index.html — JS ile doldurulur) */
.file-list { list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.file-list:empty { display:none; }
.file-list li {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-2);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
}
.file-list .fl-no {
  flex:0 0 auto; min-width:22px; height:22px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--bone);
  font-size:var(--fs-xs); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.file-list .fl-name {
  flex:1 1 auto; min-width:0; font-size:var(--fs-sm); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-list .fl-size { flex:0 0 auto; font-size:var(--fs-xs); color:var(--text-muted); }
/* Sıra + silme düğmeleri — parmakla basılabilir boyut */
.file-list button {
  flex:0 0 auto; width:34px; height:34px; padding:0;
  border:none; border-radius:var(--r-sm); cursor:pointer;
  font-size:15px; line-height:1; font-weight:700;
  background:var(--info-bg); color:var(--ink);
}
.file-list .fl-del { background:var(--err-bg); color:var(--err-fg); font-size:18px; }
.file-list button[disabled] { opacity:.3; cursor:default; }
.file-list .fl-move { display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }
.file-list .fl-move button { height:17px; border-radius:4px; font-size:10px; }
/* Masaüstünde sürükle-bırak */
.file-list li[draggable=true] { cursor:grab; }
.file-list li.is-dragging { opacity:.4; }
.file-list li.is-over { border-color:var(--sea); box-shadow:inset 0 2px 0 var(--sea); }
/* Boyut sınırını aşan dosya: kırmızı — gönderimi engeller */
.file-list li.is-bad { border-color:var(--ember); background:var(--err-bg); }
.file-list li.is-bad .fl-size { color:var(--err-fg); font-weight:700; }
/* Süre sınırının dışında kalan klip: sarı — engellemez, sunucu kırpar (uyarı) */
.file-list li.is-cut { border-color:var(--sun); background:var(--warn-bg); }
.file-list li.is-cut .fl-size { color:var(--warn-fg); font-weight:700; }
.file-summary.is-cut { color:var(--warn-fg); font-weight:600; }

/* Yükleme ilerlemesi (index.html — JS ile açılır) */
.file-summary { margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--text-muted); }
.file-summary.is-bad { color:var(--err-fg); font-weight:600; }

.upload-panel { display:none; margin-top:var(--sp-4); }
.upload-panel.is-on { display:block; }

.progress {
  height:10px; background:var(--info-bg); border-radius:var(--r-pill);
  overflow:hidden;
}
.progress > i {
  display:block; height:100%; width:0; border-radius:inherit;
  background:var(--sun); transition:width .2s ease;
}
/* Yükleme bitti, sunucu işliyor — süre bilinmiyor, akan çubuk */
.progress.is-waiting > i { width:40%; background:var(--sea); animation:prog-slide 1.1s ease-in-out infinite; }
@keyframes prog-slide { from { margin-left:-40%; } to { margin-left:100%; } }

.upload-line {
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3);
  margin-top:var(--sp-2); font-size:var(--fs-sm);
}
.upload-line b { font-variant-numeric:tabular-nums; font-size:var(--fs-md); }
.upload-line .muted { text-align:right; }

@media (prefers-reduced-motion:reduce) {
  .progress > i { transition:none; }
  .progress.is-waiting > i { animation:none; width:100%; }
}

/* ---------- 12. Masaüstü katmanı (≥860px) ---------------------------------
   Buradan sonrası SADECE geniş ekran. Mobil davranış yukarıda tanımlı. */
@media (min-width:860px) {
  body { padding-bottom:0; }              /* tabbar yok */
  .tabbar { display:none; }

  .app-header { padding:var(--sp-4) var(--sp-6); }
  .brand { font-size:var(--fs-lg); }
  .nav-desktop { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); }
  .nav-desktop a {
    color:var(--bone); text-decoration:none; opacity:.85;
    padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm);
  }
  .nav-desktop a:hover { opacity:1; background:rgba(245,241,232,.10); }
  .nav-desktop a.is-active { opacity:1; background:rgba(244,196,48,.18); color:var(--sun); }
  .nav-desktop .sep { opacity:.3; }

  main { padding:var(--sp-6); }
  .card { padding:var(--sp-5); border-radius:var(--r-lg); margin-bottom:var(--sp-5); }
  h1 { font-size:var(--fs-xl); }
  .card-title { font-size:var(--fs-md); }

  input[type=text], input[type=password], input[type=file], textarea, select { font-size:var(--fs-base); }

  .btn-block { width:auto; }              /* masaüstünde buton içeriği kadar */

  .job-view { flex-direction:row; align-items:flex-start; gap:var(--sp-5); }
  .job-video { width:300px; max-width:300px; flex:0 0 auto; margin-inline:0; }
}

/* YouTube kapak önizlemesi (iş sayfası) — 16:9, tam genişlik */
.kapak {
  display:block; width:100%; height:auto; margin-top:var(--sp-2);
  border-radius:var(--r-sm); border:1px solid var(--line); background:#000;
}

/* İş listesi: üretim zamanı hücresi — rakamlar hizalı, satır kırılmasın */
.td-zaman { white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---------- Yönetici defteri (iş sayfası, açılır kapanır) ------------------
   Kapalı halde tek satır; açılınca kaynak künyesi + olay akışı. */
.detay {
  margin-top:var(--sp-4); border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface-2);
}
.detay > summary {
  cursor:pointer; list-style:none; padding:var(--sp-3);
  min-height:var(--tap); display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); font-weight:600; color:var(--text);
}
.detay > summary::-webkit-details-marker { display:none; }
.detay > summary::after {
  content:'▾'; margin-left:auto; color:var(--text-muted); transition:transform .15s ease;
}
.detay[open] > summary::after { transform:rotate(180deg); }
.detay[open] > summary { border-bottom:1px solid var(--line); }

.detay-liste { margin:0; padding:var(--sp-3); font-size:var(--fs-sm); }
.detay-liste > div {
  display:flex; flex-direction:column; gap:2px;
  padding:var(--sp-2) 0; border-bottom:1px solid var(--line);
}
.detay-liste > div:last-child { border-bottom:0; }
.detay-liste dt {
  color:var(--text-muted); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.4px; font-weight:700;
}
.detay-liste dd { margin:0; }

.detay-baslik {
  margin:0; padding:var(--sp-3) var(--sp-3) var(--sp-2);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-muted); border-top:1px solid var(--line);
}
.detay > p { padding:0 var(--sp-3) var(--sp-3); font-size:var(--fs-sm); }

.olay-akisi { list-style:none; margin:0; padding:0 var(--sp-3) var(--sp-3); }
.olay-akisi li {
  display:flex; flex-direction:column; gap:1px;
  padding:var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-left:2px solid var(--line-strong); font-size:var(--fs-sm);
}
.olay-saat { font-size:var(--fs-xs); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.olay-ad { font-weight:600; }
.olay-akisi .muted { font-size:var(--fs-xs); word-break:break-word; }

@media (min-width:860px) {
  /* Geniş ekranda künye iki sütun: etiket solda, değer sağda */
  .detay-liste > div { flex-direction:row; gap:var(--sp-4); align-items:baseline; }
  .detay-liste dt { flex:0 0 150px; }
  .detay-liste dd { flex:1 1 auto; min-width:0; }
}