.peek { display: none; }

/* ==========================================================================
   Uyarlanabilir düzen
   Geniş ekranda üç sütun. Daraldıkça yan paneller çekmeceye dönüşür;
   küre plakası her zaman görünür kalır çünkü sayfanın işi odur.
   ========================================================================== */

@media (max-width: 1400px) {
  :root { --rail-w: 252px; --rank-w: 336px; }
}

/* --- Tablet ve altı: yan paneller üste binen çekmece olur --- */
@media (max-width: 1024px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr auto;
    grid-template-areas:
      "topbar"
      "globe"
      "timeline";
    gap: var(--s3);
    padding: 0 var(--s3) var(--s3);
  }

  .rail, .rank {
    position: fixed;
    top: calc(var(--topbar-h) + var(--s2));
    bottom: var(--s3);
    width: min(324px, 86vw);
    z-index: 50;
    background: var(--card);
    box-shadow: var(--lift-3);
    transition: transform var(--t-base) var(--ease-out), visibility var(--t-base);
    visibility: hidden;
  }
  .rail { left: var(--s3);  transform: translate3d(calc(-100% - var(--s5)), 0, 0); }
  .rank { right: var(--s3); transform: translate3d(calc(100% + var(--s5)), 0, 0); }

  .rail[data-open="true"], .rank[data-open="true"] {
    visibility: visible;
    transform: none;
    transition: transform var(--spring-snap), visibility 0s;
  }

  /* Çekmece kapalıyken giriş animasyonu devreye girmesin */
  .rail[data-enter], .rank[data-enter] { animation: none; opacity: 1; }

  .panel-toggle {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    color: var(--ink-3);
    border: 1px solid var(--rule);
    background: var(--card);
    transition: background var(--t-fast), color var(--t-fast);
  }
  .panel-toggle:hover { background: var(--paper-2); color: var(--ink-1); }
  .panel-toggle[aria-expanded="true"] { background: var(--ink-1); color: var(--card); border-color: var(--ink-1); }

  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(27, 33, 25, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
  }
  .scrim[data-open="true"] { opacity: 1; visibility: visible; }

  /* Seçili ülkenin özeti — kürenin alt kenarına yaslanır, plakayı kapatmaz */
  .peek {
    grid-area: globe;
    align-self: end;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--lift-3);
    text-align: left;
    animation: rise var(--t-base) var(--ease-out);
    transition: background var(--t-fast);
  }
  .peek[hidden] { display: none; }
  .peek:active { background: var(--paper-2); }
  .peek-flag {
    width: 26px; height: 18px;
    object-fit: cover;
    border: 1px solid var(--rule);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .peek-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .peek-name {
    font-weight: 600;
    font-size: var(--step-0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Karşılaştırma açıkken bu satır fark bilgisini de taşıyor; taşmasın */
  .peek-value {
    font-size: var(--step--2);
    color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .peek-chevron { flex-shrink: 0; color: var(--ink-3); }
}

/* --- Telefon --- */
@media (max-width: 720px) {
  :root { --topbar-h: 52px; }

  .shell { gap: var(--s2); padding: 0 var(--s2) var(--s2); }
  .topbar { gap: var(--s2); padding: 0; }

  .wordmark-text { display: none; }

  .search { max-width: none; }
  .search-field { height: 34px; }

  .timeline {
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    padding: var(--s3) var(--s4);
  }
  .scrub { order: 3; flex-basis: 100%; height: 38px; }
  .scrub-ticks { display: none; }
  #year-range { height: 38px; }
  #year-range::-webkit-slider-runnable-track { height: 38px; }
  #year-range::-webkit-slider-thumb { margin-top: 10px; width: 22px; height: 22px; }
  #year-range::-moz-range-thumb { width: 22px; height: 22px; }
  .play-btn { width: 38px; height: 38px; }
  .year-value { font-size: var(--step-2); }
  .coverage { flex: 1; min-width: 0; }

  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .stat { padding: var(--s3); }
  .stat-value { font-size: var(--step-1); }
  .series-chart { height: 160px; }

  /* Telefonda yandan gelen çekmece kürenin tamamını kapatıyordu; alttan gelen
     bir tabaka olarak açılıyor, üstte küre görünür kalıyor. */
  .rail, .rank {
    top: auto;
    left: var(--s2); right: var(--s2);
    bottom: var(--s2);
    width: auto;
    height: min(56vh, 500px);
    border-radius: var(--r-xl);
    transform: translate3d(0, calc(100% + var(--s5)), 0);
  }

  .geo-tip { display: none; }   /* dokunmatikte üzerine gelme yok */
  .toasts { left: var(--s3); right: var(--s3); bottom: var(--s3); transform: none; }
  .toast { width: 100%; justify-content: center; }
}

/* --- Alçak ekran --- */
@media (max-height: 640px) {
  .timeline { padding-block: var(--s2); }
}

/* --- Kaba işaretçi: dokunma hedefleri büyür --- */
@media (pointer: coarse) {
  .rank-row { padding-block: var(--s3); }
  .indicator { padding-block: var(--s4); }
  .icon-btn, .panel-toggle { width: 40px; height: 40px; }
}

/* --- Yazdırma: zaten kağıt; küre yerine veriyi bas --- */
@media print {
  body { overflow: visible; background: #fff; }
  #globe, .timeline, .rail, .toasts, .boot, .topbar-actions, .scrim { display: none !important; }
  /* Kağıtta denetim yok; karşılaştırılan ülkenin künyesi kalsın */
  .compare-toggle, .compare-hint, .compare-chip-x, .peek { display: none !important; }
  .shell { position: static; display: block; padding: 0; }
  .rank {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: none;
    box-shadow: none;
  }
}