/* Depo sunucusu gezgini — sunucu.js ile birlikte (src/gorunum/sunucu/gezgin.php). */

/* JS yoksa yalnız JS ile çalışan denetimler görünmesin (çalışmayan düğme olmasın). */
body:not(.sunucu-js) .js-yalniz { display: none !important; }

.sunucu { position: relative; }
.sunucu-ust { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.sunucu-konum { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .95rem; }
.sunucu-konum a { padding: .2rem .5rem; border-radius: 8px; color: var(--ikincil); text-decoration: none; }
.sunucu-konum a:last-child { color: var(--metin); font-weight: 600; }
.sunucu-konum a:hover { background: var(--kart-2, #f4f1ec); }
.sunucu-konum span { color: var(--soluk); }
.sunucu-gorunum { display: flex; gap: .25rem; }
.sunucu-gorunum [aria-pressed="true"] { background: var(--marka-yumusak); color: var(--marka-koyu); }

/* Seçim çubuğu */
.sunucu-secim {
  position: sticky; top: calc(var(--serit-y, 56px) + .5rem); z-index: 5;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .75rem; margin-bottom: .75rem;
  background: var(--marka-yumusak); border: 1px solid var(--marka); border-radius: var(--r);
}
.sunucu-secim[hidden] { display: none; }
.sunucu-secim strong { margin-right: .5rem; color: var(--marka-koyu); }

/* Satırlar */
.sunucu-tablo .sunucu-sec { width: 2.25rem; text-align: center; }
.sunucu-tablo .sunucu-sec input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.sunucu-oge { cursor: default; user-select: none; -webkit-user-select: none; }
.sunucu-oge input, .sunucu-oge details { user-select: text; }
.sunucu-oge--secili td { background: var(--marka-yumusak) !important; }
.sunucu-ad { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: inherit; }
.sunucu-ad:hover { color: var(--marka-koyu); text-decoration: underline; }
.sunucu-ikon { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; flex: none; }
.sunucu-islem { text-align: right; }
.sunucu-islem details.acilir { display: inline-block; vertical-align: middle; }
.sunucu--js .sunucu-oge[draggable="true"] { cursor: grab; }
.sunucu--suruklemede .sunucu-oge { opacity: .75; }
.sunucu--suruklemede .sunucu-oge--secili { opacity: .45; }
.sunucu-hedef--ustunde,
tr.sunucu-hedef--ustunde td { background: var(--iyi-yumusak) !important; outline: 2px dashed var(--iyi); outline-offset: -2px; opacity: 1 !important; }
.sunucu-surukle-rozet {
  position: fixed; top: -100px; left: -100px; padding: .4rem .75rem;
  background: var(--marka); color: #fff; border-radius: var(--r-tam); font-weight: 600; box-shadow: var(--golge-kalk);
}

/* Dışarıdan bırakma katmanı — yalnız görsel; olayları altındaki hedefler alıyor. */
.sunucu-birak {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  border: 3px dashed var(--marka); border-radius: var(--r); background: rgba(63, 143, 208, .06);
  display: flex; align-items: flex-end; justify-content: center; padding: 1rem;
}
.sunucu-birak[hidden] { display: none; }
.sunucu-birak__kutu { background: var(--marka); color: #fff; padding: .55rem 1rem; border-radius: var(--r-tam); font-weight: 600; box-shadow: var(--golge-kalk); }
.sunucu-bos { min-height: 12rem; }

/* ───────────── Izgara görünümü ───────────── */
.sunucu--izgara .sunucu-tablo thead { display: none; }
.sunucu--izgara .sunucu-tablo,
.sunucu--izgara .sunucu-tablo tbody { display: block; width: 100%; }
.sunucu--izgara .sunucu-tablo tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.sunucu--izgara .sunucu-tablo tr {
  display: flex; flex-direction: column; position: relative;
  border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kart); padding: .5rem; overflow: hidden;
}
.sunucu--izgara .sunucu-tablo td { display: block; border: 0; padding: 0; background: none; text-align: left; }
.sunucu--izgara .sunucu-tablo td::before { display: none !important; }
.sunucu--izgara .sunucu-tablo td[data-etiket="Boyut"],
.sunucu--izgara .sunucu-tablo td[data-etiket="Son değişiklik"],
.sunucu--izgara .sunucu-tablo td[data-etiket="Oluşturma"] { display: none; }
.sunucu--izgara .sunucu-sec { position: absolute; top: .45rem; left: .45rem; z-index: 2; width: auto; }
.sunucu--izgara .sunucu-islem { position: absolute; top: .35rem; right: .35rem; z-index: 2; }
.sunucu--izgara .sunucu-islem .dugme:not(summary) { display: none; }
.sunucu--izgara .sunucu-ad { flex-direction: column; align-items: stretch; width: 100%; gap: .4rem; word-break: break-word; font-size: .9rem; }
.sunucu--izgara .sunucu-ikon {
  width: 100%; height: 7.5rem; font-size: 3rem; border-radius: 10px; background: var(--zemin); overflow: hidden;
}
.sunucu-kucuk { width: 100%; height: 100%; object-fit: cover; display: block; }
.sunucu--izgara .sunucu-oge--secili { border-color: var(--marka); box-shadow: 0 0 0 2px var(--marka); }
.sunucu--izgara .sunucu-oge--secili td { background: none !important; }
.sunucu--izgara tr.sunucu-hedef--ustunde { background: var(--iyi-yumusak); outline: 2px dashed var(--iyi); }
.sunucu--izgara tr.sunucu-hedef--ustunde td { outline: 0; background: none !important; }

/* ───────────── Pencereler (önizleme, taşı) ───────────── */
.sunucu-pencere { border: 0; border-radius: var(--r-buyuk); padding: 0; box-shadow: var(--golge-kalk); background: var(--kart); color: var(--metin); }
.sunucu-pencere::backdrop { background: rgba(6, 2, 29, .55); }
.sunucu-pencere--onizle { width: min(1200px, 96vw); height: min(92vh, 1000px); max-width: none; max-height: none; overflow: hidden; }
.sunucu-pencere--onizle[open] { display: flex; flex-direction: column; }
.sunucu-pencere__bas { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .9rem; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.sunucu-pencere__ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 14rem; }
.sunucu-pencere__eylem { display: flex; gap: .35rem; flex-wrap: wrap; }
.sunucu-pencere__eylem [hidden] { display: none; }
.sunucu-pencere__govde { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #2b2b30; position: relative; }
.sunucu-pencere__govde img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sunucu-pencere__govde video { max-width: 100%; max-height: 100%; background: #000; }
.sunucu-pencere__govde--pdf iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.sunucu-pencere__govde--ses { background: var(--zemin); }
.sunucu-pencere__govde--metin, .sunucu-pencere__govde--yok { background: var(--zemin); }
.sunucu-metin { width: 100%; height: 100%; display: flex; flex-direction: column; }
.sunucu-metin iframe { flex: 1; border: 0; background: #fff; }
.sunucu-metin p { margin: 0; padding: .4rem .9rem; }
.sunucu-pencere__ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--metin); font-size: 1.6rem; line-height: 1; box-shadow: var(--golge);
}
.sunucu-pencere__ok:disabled { opacity: 0; pointer-events: none; }
.sunucu-pencere__ok--onceki { left: .6rem; }
.sunucu-pencere__ok--sonraki { right: .6rem; }

.sunucu-pencere--tasi { width: min(34rem, 94vw); }
.sunucu-tasi { padding: 1rem 1.1rem; }
.sunucu-tasi h2 { margin: 0 0 .25rem; }
.sunucu-tasi__agac { max-height: 55vh; overflow: auto; border: 1px solid var(--cizgi); border-radius: var(--r); margin: .75rem 0; padding: .25rem; }
.sunucu-tasi__satir { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .75rem; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.sunucu-tasi__satir:hover:not(:disabled) { background: var(--kart-2, #f4f1ec); }
.sunucu-tasi__satir[aria-selected="true"] { background: var(--marka-yumusak); color: var(--marka-koyu); font-weight: 600; }
.sunucu-tasi__satir:disabled { color: var(--soluk); cursor: not-allowed; opacity: .6; }
.sunucu-tasi__eylem { display: flex; justify-content: flex-end; gap: .5rem; }

/* ───────────── Yükleme paneli ───────────── */
.sunucu-yukleme {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: min(26rem, calc(100vw - 2rem));
  max-height: 50vh; display: flex; flex-direction: column;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-kalk);
}
.sunucu-yukleme[hidden] { display: none; }
.sunucu-yukleme__bas { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--cizgi); }
.sunucu-yukleme__liste { list-style: none; margin: 0; padding: .35rem .8rem .6rem; overflow: auto; }
.sunucu-yukleme__oge { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; padding: .35rem 0; border-bottom: 1px solid var(--cizgi); font-size: .85rem; }
.sunucu-yukleme__oge:last-child { border-bottom: 0; }
.sunucu-yukleme__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sunucu-yukleme__durum { color: var(--ikincil); white-space: nowrap; }
.sunucu-yukleme__oge progress { grid-column: 1 / -1; width: 100%; height: .35rem; }
.sunucu-yukleme__oge--iyi .sunucu-yukleme__durum { color: var(--iyi); }
.sunucu-yukleme__oge--kotu .sunucu-yukleme__durum { color: var(--kotu); white-space: normal; }

/* Dosya sayfasındaki gömülü önizleme */
.sunucu-gomulu { display: flex; align-items: center; justify-content: center; background: #2b2b30; border-radius: var(--r); overflow: hidden; min-height: 12rem; }
.sunucu-gomulu img, .sunucu-gomulu video { max-width: 100%; max-height: 75vh; object-fit: contain; display: block; }
.sunucu-gomulu iframe { width: 100%; height: 75vh; border: 0; background: #fff; }
.sunucu-gomulu--ses { background: var(--zemin); padding: 1.5rem; }

@media (max-width: 700px) {
  .sunucu-pencere--onizle { width: 100vw; height: 100dvh; border-radius: 0; }
  .sunucu-pencere__ok { width: 2.25rem; height: 2.25rem; font-size: 1.3rem; }
  .sunucu--izgara .sunucu-tablo tbody { grid-template-columns: repeat(2, 1fr); }
  .sunucu--izgara .sunucu-ikon { height: 6rem; }
}