/* ============================================================
   layout.css — 2 sütunlu düzen ve mobilde alt alta yığılma
   ============================================================ */

.app {
  display: grid;
  grid-template-columns:
    minmax(300px, 1.5fr)    /* sol : slot                            */
    minmax(230px, 1fr);     /* sağ : koleksiyon / kayıt / hakkında   */
  gap: var(--gap);
  align-items: start;

  min-height: 100dvh;
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--gap);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;    /* uzun kelimeler sütunu taşırmasın */
  min-height: 0;   /* grid içinde iç scroll'un çalışması için şart */
}

/* Sağ sütun ekran yüksekliğini aşmasın, kendi içinde kaysın.
   `stretch`: içerik kısa olsa bile sütun satırın tamamını kaplasın —
   yanındaki dikey ayraç yarıda kesilmesin. */
.panel--side {
  position: relative;
  align-self: stretch;
  max-height: calc(100dvh - var(--gap) * 2);
}

/* Slot ile sekmeler arasındaki dikey ayraç — slot çizgileriyle aynı ton.
   İki sütunun arasındaki boşluğun tam ortasına oturur. */
.panel--side::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gap) / -2);
  width: 1px;
  background: var(--line);
}

/* --- Sekmeli bölmeler (Koleksiyon / Kayıt / Hakkında) ---
   Masaüstünde aynı anda tek bölme görünür; başlık görevini sekmeler görür. */
.pane {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 1rem;
}
.pane--active { display: flex; }

.pane__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Masaüstünde bölme başlıkları gizli (sekmeler onların yerine geçiyor).
   Başlık satırı sadece koleksiyonda kalır: orada sayaç da var. */
.pane__head  { display: none; }
.pane__title { display: none; }
.pane--collection .pane__head { display: flex; }

.panel--main {
  min-height: calc(100dvh - var(--gap) * 2);
}

/* ============ MOBİL: tam ekran panel + mıknatıslı kaydırma ============
   Reels / Shorts mekaniği. İki önemli tercih:

   1) Kaydırılan şey sayfa gövdesi değil, .app'in kendisi. Gövde kaydırılsaydı
      tarayıcının adres çubuğu açılıp kapanır, 100dvh her seferinde değişir ve
      mıknatıs noktaları kayardı. Sabit yükseklikli bir kap bunu tamamen önler.

   2) display: flex (block değil) — çünkü panellerin mobil sırasını `order`
      ile değiştiriyoruz ve order yalnızca flex/grid içinde çalışır.
   ==================================================================== */
@media (max-width: 860px) {
  body { overflow: hidden; }        /* kaydırma .app'e ait */

  .app {
    display: flex;
    flex-direction: column;
    /* Masaüstündeki `align-items: start` dikey flex'e taşınırsa panelleri
       içerik genişliğine daraltır — tam ekran için stretch şart. */
    align-items: stretch;
    gap: 0;
    padding: 0;
    max-width: none;

    height: 100dvh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;  /* en alttan aşağı çekince sayfa yenilenmesin */

    /* Native çubuk gizli: yerine .scroll-rail kullanılıyor. Sebebi iOS'un
       dokunmatik kaydırma çubuklarını boyamaya izin vermemesi (scrollRail.js). */
    scrollbar-width: none;
  }
  .app::-webkit-scrollbar { display: none; }

  .panel {
    flex: 0 0 auto;
    height: 100dvh;
    max-height: none;
    padding: var(--gap);

    scroll-snap-align: start;
    scroll-snap-stop: always;        /* bir hamlede tek panel geçilsin */
  }

  /* Sarmalayıcı yok olur, üç bölme doğrudan .app'in çocuğu olur —
     böylece hem `order` hem de scroll-snap onlara uygulanabilir.
     Dikey ayraç da masaüstüne ait: burada sütun diye bir şey yok. */
  .panel--side { display: contents; }
  .panel--side::before { display: none; }
  /* .tabs'ı gizleyen kural tabs.css'te — bu dosyadan sonra yüklendiği için
     buraya yazılsa cascade'de eziliyor. */

  .pane {
    display: flex;              /* aktif olmayan bölme de görünsün */
    flex: 0 0 auto;
    height: 100dvh;
    padding: var(--gap);

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Mobilde sekme yok, o yüzden her bölme kendi başlığını gösterir */
  .pane__head  { display: flex; }
  .pane__title { display: block; }

  /* sıra: slot -> hakkında -> kayıt -> koleksiyon */
  .panel--main     { order: 1; min-height: 0; }
  .pane--about     { order: 2; justify-content: center; }
  .pane--log       { order: 3; }
  .pane--collection{ order: 4; }
}