/* ═══════════════════════════════════════════════════════════════
   RACOUN AGENCY PANEL — GOOGLE DRIVE DEPOSU

   Tüm sınıflar ".drv" önekiyle; renkler yalnızca mevcut var(--…)
   tokenlerinden gelir, yeni renk tanımlanmaz. Bu yüzden koyu tema
   ayrı bir blok gerektirmez: tokenler zaten temaya göre değişir.

   Vurgu rengi lime (--lime, --grad-lime) ve üzerine DAİMA siyah
   yazılır (--lime-ink) — panelin kuralı budur.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. FİRMA SEÇİCİ (sayfa başlığında) ─── */

.drv-pick{
  min-width:210px;
  max-width:100%;
}

/* ─── 2. SÜRÜKLE-BIRAK ALANI ─── */

.drv-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding:34px 18px;
  border:2px dashed var(--line-2);
  border-radius:var(--r-lg, 14px);
  background:var(--surface-3);
  cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.drv-drop:hover{ border-color:var(--lime-deep); }
.drv-drop:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:3px; }

/* Dosya sürüklenirken hedefin canlandığı belli olmalı: kullanıcı
   bırakmadan önce doğru yerde olduğunu görmelidir. */
.drv-drop.is-over{
  border-color:var(--lime-deep);
  border-style:solid;
  background:var(--lime-soft);
  transform:scale(1.005);
}
.drv-drop.is-over b,
.drv-drop.is-over .small{ color:var(--lime-ink); }

.drv-drop__ico{ font-size:30px; line-height:1; }
.drv-drop b{ font-size:15px; }
.drv-drop .small{ max-width:52ch; }

/* ─── 3. YÜKLEME ŞERİDİ ─── */

.drv-uphead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.drv-up{
  padding:10px 0;
  border-top:1px solid var(--line);
}
.drv-up:first-of-type{ border-top:0; }

.drv-up__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

.drv-up__name{
  font-weight:600;
  font-size:13.5px;
  /* Uzun dosya adı satırı taşırmasın; 390px telefonda da tek satır kalsın. */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.drv-up__pct{
  flex:none;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

.drv-up__bar{
  height:7px;
  border-radius:99px;
  background:var(--surface-3);
  overflow:hidden;
}
.drv-up__bar > i{
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--grad-lime);
  transition:width .22s var(--ease);
}

.drv-up.is-ok  .drv-up__pct{ color:var(--ok, #17a34a); }
.drv-up.is-err .drv-up__bar > i{ background:var(--err, #dc2626); }
.drv-up.is-err .drv-up__pct{ color:var(--err, #dc2626); }
.drv-up__err{ color:var(--err, #dc2626); }

/* ─── 4. DOSYA LİSTESİ ─── */

.drv-listhead{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.drv-listhead .drv-search{
  margin-left:auto;
  width:220px;
  max-width:100%;
}

.drv-file{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* Küçük resim SUNUCUDAN gelir (Drive'dan değil) — liste bu yüzden
   dosya sayısı ne olursa olsun anında açılır. */
.drv-file__th{
  width:38px;
  height:38px;
  flex:none;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface-3);
}

.drv-file__ico{
  width:38px;
  height:38px;
  flex:none;
  display:grid;
  place-items:center;
  font-size:18px;
  border-radius:8px;
  background:var(--surface-3);
  border:1px solid var(--line);
}

.drv-file__nm{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* ─── 5. AYAR EKRANI ─── */

.drv-acct{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  margin-bottom:16px;
  border:1px solid var(--line);
  border-radius:var(--r, 10px);
  background:var(--surface-3);
}
.drv-acct > span{ font-size:20px; line-height:1.2; }

.drv-steps{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13.5px;
  line-height:1.6;
}
.drv-steps li::marker{ color:var(--lime-deep); font-weight:800; }

/* ─── 6. BAĞLANTI SINAMA SONUCU ─── */

.drv-test{
  border:1px solid var(--line);
  border-radius:var(--r, 10px);
  overflow:hidden;
}
.drv-test.is-ok{  border-color:var(--lime-deep); }
.drv-test.is-err{ border-color:var(--err, #dc2626); }

.drv-test__head{
  padding:11px 14px;
  font-weight:700;
  font-size:13.5px;
  background:var(--surface-3);
  border-bottom:1px solid var(--line);
}
.drv-test.is-ok .drv-test__head{
  background:var(--grad-lime);
  color:var(--lime-ink);       /* lime üzerine daima siyah */
  border-bottom-color:var(--lime-deep);
}

.drv-test__list{
  list-style:none;
  margin:0;
  padding:6px 0;
}
.drv-test__list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:9px 14px;
  border-top:1px solid var(--line);
}
.drv-test__list li:first-child{ border-top:0; }
.drv-test__list li > span{
  flex:none;
  width:20px;
  text-align:center;
  font-weight:800;
}
.drv-test__list li.ok  > span{ color:var(--lime-deep); }
.drv-test__list li.err > span{ color:var(--err, #dc2626); }
.drv-test__list li.err{ background:color-mix(in srgb, var(--err, #dc2626) 7%, transparent); }

/* color-mix desteklemeyen eski tarayıcılarda satır yalnızca renksiz kalır;
   bilgi kaybı olmaz çünkü işaret (✗) ve renk zaten ayrı ayrı veriliyor. */

/* ─── 7. TELEFON (390px) ─── */

@media (max-width: 640px){
  .drv-drop{ padding:24px 14px; }
  .drv-drop__ico{ font-size:26px; }

  .drv-listhead .drv-search{
    margin-left:0;
    width:100%;
    order:3;
  }

  .drv-pick{ width:100%; min-width:0; }

  /* Dar ekranda dosya adı için yer açmak adına küçük resim ufalır. */
  .drv-file__th,
  .drv-file__ico{ width:32px; height:32px; font-size:16px; }

  .drv-uphead{ flex-wrap:wrap; gap:8px; }
  .drv-test__list li{ padding:9px 11px; }
}

/* Hareketi azalt tercihine saygı — ilerleme çubuğu yine de doğru genişlikte. */
@media (prefers-reduced-motion: reduce){
  .drv-drop,
  .drv-up__bar > i{ transition:none; }
  .drv-drop.is-over{ transform:none; }
}