/* ==========================================================================
   MEL VARGAS — RESPONSIVE
   Kural: masaüstü tasarımı küçültülmez. Her kırılımda layout gerçekten dönüşür
   (kolon → yığın, çok sütun → tek sütun, nav → drawer, yatay → dikey).
   Referans: docs/06-RESPONSIVE-IMAGE-MOTION-A11Y.md

   Kırılımlar (mobile-last: masaüstü temel, aşağı doğru override)
   1280 · 1100 · 1024 · 768 · 560 · 479
   ========================================================================== */

/* ==========================================================================
   ≤1439 — container kenar boşluğu
   ========================================================================== */
@media (max-width: 1439px) {
  :root { --container-pad: 32px; }
}

/* ==========================================================================
   ≤1279 — laptop: tipografi ve section ritmi bir kademe iner
   ========================================================================== */
@media (max-width: 1279px) {
  :root {
    --section-pad: 64px;
    --section-pad-hero-top: 56px;
    --section-pad-hero-bottom: 48px;
    --section-title-gap: 28px;
    --container-pad: 32px;
  }

  .display-xl { font-size: 60px; }
  .display-l  { font-size: 52px; }
  .h1 { font-size: 48px; }
  .h2 { font-size: 36px; }
  .h3 { font-size: 30px; }
  .product-title-l { font-size: 40px; }
  .price-hero { font-size: 30px; }

  .main-nav { gap: var(--space-6); }
  .main-nav a { font-size: 12px; }
  .header-actions { gap: var(--space-5); }

  /* Sabit piksel kolonlar oransal hale gelir, yoksa taşma olur */
  .layout-sidebar { grid-template-columns: 1fr 380px; gap: 48px; }
  .layout-split-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .grid-3 { gap: 40px 32px; }

  .carousel-nav-prev { left: 0; }
  .carousel-nav-next { right: 0; }
}

/* ==========================================================================
   ≤1099 — nav yatayda sığmıyor: drawer'a geçilir
   Kırılım noktası menü genişliğine göre seçildi, cihaza göre değil.
   ========================================================================== */
@media (max-width: 1099px) {
  .main-nav,
  .header-actions .dropdown,
  .header-actions .btn { display: none; }

  .site-header .nav-toggle { display: inline-flex; order: -1; margin-left: -12px; }

  .site-header .header-inner {
    justify-content: space-between;
    gap: var(--space-4);
    height: 72px;
  }
  .site-header.is-scrolled .header-inner { height: 64px; }

  /* Logo ortalanır, iki yanda hamburger ve sepet kalır */
  .site-header .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
  }
  .header-actions { gap: var(--space-3); }
}

/* ==========================================================================
   ≤1023 — tablet yatay: iki kolonlu ana layoutlar yığılır
   ========================================================================== */
@media (max-width: 1023px) {
  :root {
    --section-pad: 56px;
    --section-pad-hero-top: 48px;
    --section-pad-hero-bottom: 40px;
    --section-title-gap: 24px;
  }

  /* Sticky panel artık sticky değil: içeriğin altına iner */
  .layout-sidebar {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }
  .summary-panel { position: static; }

  .layout-split-media { grid-template-columns: 1fr; gap: var(--space-8); }
  .layout-split-form { grid-template-columns: 1fr; gap: var(--space-9); }
  .layout-profile { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Profil yan navigasyonu yatay sekmeye dönüşür */
  .profile-nav ul { display: flex; gap: var(--space-6); overflow-x: auto; }
  .profile-nav a { border-bottom: 0; white-space: nowrap; }

  /* Ürün grid'i 2 sütun */
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

  /* Öne çıkan blog kartı tek kolona iner */
  .blog-card-featured { grid-template-columns: 1fr; }
  .blog-card-featured .blog-card-media { aspect-ratio: 16 / 9; }
  .blog-card-featured .blog-card-body { padding: var(--space-6); }

  /* Full-bleed görseller normal akışa döner */
  .full-bleed-right,
  .full-bleed-left { margin-right: 0; margin-left: 0; }

  /* Hero: görsel üstte, metin altta. Asimetrik düzen tabletde çalışmıyor. */
  .hero-home {
    grid-template-columns: 1fr;
    gap: var(--space-9);
    padding-block: var(--section-pad);
  }
  .hero-home-media {
    order: -1;
    margin-right: 0;
    margin-left: 0;
    aspect-ratio: 16 / 9;
  }
  .hero-home-media.is-portrait {
    width: 100%;
    max-width: none;
    max-height: 420px;
    justify-self: stretch;
  }
  .hero-home.is-about {
    grid-template-columns: 1fr;
  }
  .hero-home.is-about .hero-home-media.is-portrait {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-height: 480px;
  }
  .hero-home-text h1,
  .hero-home-text p { max-width: none; }

  .offer-grid { grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-8); }

  /* Editoryal hero: dekoratif görsel tabletde gizlenir.
     Alta taşımak hero'yu gereksiz uzatıyor ve görsel yalnızca dekoratif. */
  .hero-editorial { grid-template-columns: 1fr; gap: 0; }
  .hero-editorial-media { display: none; }
  .hero-editorial-text h1 { max-width: none; }

  body[data-page="work"] .hero-editorial { gap: var(--space-7); }
  body[data-page="work"] .hero-editorial-media {
    display: block;
    order: -1;
    aspect-ratio: 16 / 10;
  }

  .featured-band { grid-template-columns: 1fr; gap: var(--space-8); }
  .featured-band-text .label { margin-bottom: var(--space-5); }

  .cta-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .cta-split-media {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  .featured-campaign { grid-template-columns: 1fr; gap: 0; }
  .featured-campaign .campaign-card-media { aspect-ratio: 16 / 9; }
  .featured-campaign-body { padding: var(--space-7); }

  .past-row { grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); }
  .past-row .past-title { grid-column: 1 / -1; font-size: 20px; }

  .compare-col { padding: var(--space-6); }
  .manifesto p { font-size: 32px; }
  .article-body { font-size: 16px; }
  .article-body blockquote { font-size: 22px; }
}

/* ==========================================================================
   ≤767 — mobil: tek kolon, yatay yapılar dikeye döner
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --section-pad: 48px;
    --section-pad-hero-top: 40px;
    --section-pad-hero-bottom: 32px;
    --section-title-gap: 24px;
    --container-pad: 24px;
  }

  .display-xl { font-size: 48px; }
  .display-l  { font-size: 42px; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 32px; }
  .h2.home-start-title { max-width: none; }
  .h3 { font-size: 28px; }
  .h4 { font-size: 22px; }
  .product-title-l { font-size: 34px; }
  .price-hero { font-size: 28px; }
  .body-l { font-size: 16px; }

  /* iOS'ta odaklanınca otomatik zoom'u engellemek için 16px altına inilmez */
  .input, .select, .textarea { font-size: 16px; }

  /* Menü–ilk içerik: sobre-mí standardı (16px). Tüm sayfalar. */
  :root { --section-pad-hero-top: 16px; }

  .page-head,
  .page-head-compact { padding-top: 16px; }

  main > .container > .breadcrumb:first-child,
  main > article .container > .breadcrumb:first-child {
    padding-top: 16px;
  }
  .page-head .breadcrumb { padding-top: 0; }

  .breadcrumb + .page-block,
  .breadcrumb + .layout-split-media { padding-top: 16px; }

  .campaign-detail-banner { padding-top: 16px; }

  .hero-home { padding-block: 16px var(--section-pad); }
  body[data-page="about"] .hero-home.is-about { padding-block: 16px 0; }

  .article-head { padding-block: 16px var(--space-6); }

  .layout-centered-card { padding-block: 16px 56px; }

  .layout-status { padding-block: 16px var(--space-10); }

  .grid-3,
  .grid-2 { grid-template-columns: 1fr; gap: var(--space-8); }

  .field-row { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Sepet satırı: tablo düzeni kart düzenine dönüşür */
  .cart-head { display: none; }
  .cart-item {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-block: var(--space-6);
  }
  .cart-item-product {
    grid-template-columns: 100px 1fr;
    gap: var(--space-4);
    align-items: start;
  }
  .cart-item-product img { width: 100px; height: 100px; }
  .cart-item-price { display: none; } /* tekil üründe fiyat = toplam, tekrar gösterilmez */
  .cart-item-total {
    text-align: left;
    font-size: 16px;
    font-weight: 500;
  }
  .cart-item-total::before {
    content: attr(data-label) " ";
    font-size: 13px;
    font-weight: 300;
    color: var(--color-text-muted);
  }

  /* Checkout alt aksiyonları: buton üstte ve tam genişlik */
  .checkout-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-5);
  }
  .checkout-actions .btn { min-width: 0; width: 100%; }
  .checkout-actions .link-back { text-align: center; justify-content: center; }

  /* Kart alanlarındaki sol label hücresi kalkar, label input'un üstüne çıkar */
  .card-fields { padding: var(--space-4); }

  .summary-panel { padding: var(--space-6); }

  /* Carousel: tek tam kart, oklarla geçiş (ana sayfa vitrin ile aynı) */
  .carousel-nav { display: inline-flex; }
  .carousel-nav-prev { left: 0; }
  .carousel-nav-next { right: 0; }
  .carousel-viewport {
    overflow: hidden;
    margin-inline: 0;
    padding-inline: 0;
  }
  .carousel-track {
    width: 100%;
    gap: 0;
  }
  .carousel-track > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .carousel-track > .anim,
  .carousel-track > .anim-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Breadcrumb: tam zincir yerine yalnızca geri bağlantısı */
  .breadcrumb ol { display: none; }
  .breadcrumb-mobile { display: inline-flex; align-items: center; gap: var(--space-2); }

  /* Instagram bandı 6 → 3 sütun (2 satır) */
  .ig-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .toast-wrap {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }
  .toast { width: 100%; }

  .cookie-banner {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    width: auto;
  }

  .layout-centered-card { padding-block: 16px 56px; }
  .auth-card { padding: var(--space-6); border: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-newsletter { grid-column: 1 / -1; }

  .prose h2 { font-size: 26px; margin-top: var(--space-9); }
  .prose h3 { font-size: 20px; }

  .info-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  .order-card {
    grid-template-columns: 72px 1fr;
    gap: var(--space-4);
  }
  .order-card img { width: 72px; height: 72px; }
  .order-card .order-card-price,
  .order-card .btn { grid-column: 2; justify-self: start; }

  .slot-grid { grid-template-columns: repeat(2, 1fr); }

  .featured-band .carousel-nav-prev { left: 0; }
  .featured-band .carousel-nav-next { right: 0; }

  .step-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .step-num { font-size: 20px; }

  .shop-toolbar { min-height: 56px; padding-block: var(--space-3); }
  .shop-toolbar .results { font-size: 13px; }
  .shop-toolbar .select { width: 150px; }

  .pd-info .pd-desc { max-width: none; }
  .article-hero { margin-bottom: var(--space-9); }
  .campaign-book {
    grid-template-columns: 48px minmax(0, 1fr);
    max-width: none;
  }
  .campaign-book img { width: 48px; height: 48px; object-fit: cover; }
}

/* ==========================================================================
   ≤559 — küçük mobil
   ========================================================================== */
@media (max-width: 559px) {
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }

  .status-actions { flex-direction: column; align-items: stretch; }
  .status-actions .btn { width: 100%; }

  /* Yatay bitişik lead-magnet formu dikeye döner */
  .inline-form { flex-direction: column; }
  .inline-form .input,
  .inline-form .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ≤479 — 320-414px bandı
   ========================================================================== */
@media (max-width: 479px) {
  :root {
    --section-pad: 40px;
    --section-pad-hero-top: 16px;
    --section-pad-hero-bottom: 28px;
    --container-pad: 20px;
  }

  .display-xl { font-size: 38px; }
  .display-l  { font-size: 34px; }
  .h1 { font-size: 32px; }
  .h2 { font-size: 27px; }
  .h3 { font-size: 24px; }
  .h4 { font-size: 20px; }
  .product-title-l { font-size: 28px; }
  .price-hero { font-size: 26px; }
  .body { font-size: 15px; }
  .body-s { font-size: 13px; }
  .label { font-size: 10px; }
  .eyebrow { font-size: 11px; }

  /* Ürün grid'i tek sütun: 2 sütunda görsel 320px'te okunmaz hale geliyor */
  .grid-3 { grid-template-columns: 1fr; gap: 28px; }

  .cart-item-product { grid-template-columns: 80px 1fr; }
  .cart-item-product img { width: 80px; height: 80px; }

  .ig-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .carousel-track > * { flex: 0 0 100%; width: 100%; max-width: 100%; }

  .calendar-grid { gap: 2px; }
  .cal-day { height: 40px; font-size: 13px; }

  .btn { padding: 0 24px; }
}

/* ==========================================================================
   Yazdırma
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .nav-drawer,
  .nav-overlay,
  .toast-wrap,
  .cookie-banner,
  .btn { display: none !important; }

  body { background: #FFFFFF; color: #000000; }
  .container, .container-wide, .container-narrow { max-width: none; padding: 0; }
}