/* =========================================
   KUTUM STUDIO — Tasarım Sistemi
   Palet: "Karton & Mürekkep"
   ========================================= */

:root {
  --ink: #141210;
  --ink-soft: #2A2622;
  --kutu: #E2582E;
  --kutu-dark: #C4471F;
  --kraft: #F3EBDF;
  --kraft-2: #E7DACA;
  --yesil: #1F5F52;
  --white: #FFFFFF;

  --shell: 1240px;
  --r: 2px;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--kraft);
  color: var(--ink);
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Bricolage Grotesque', sans-serif; }
.font-mono { font-family: 'Space Mono', monospace; }

/* ---------- Tipografi ölçekleri ---------- */
.t-hero {
  font-size: clamp(3.4rem, 13vw, 10.5rem);
  line-height: .86;
  letter-spacing: -.045em;
  font-weight: 800;
}
/* Satır yükseklikleri, Bricolage'in Türkçe iniş/çıkışları (ş ğ ı İ ö ç ü)
   alttaki satırla çakışmasın diye geniş tutuldu. */
.t-1 { font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
.t-2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.16; letter-spacing: -.028em; font-weight: 700; }
.t-3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.32; letter-spacing: -.02em; font-weight: 700; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; }

.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Yerleşim ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 22px; }
.rule { height: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.rule-light { height: 1px; background: color-mix(in srgb, var(--white) 18%, transparent); }

/* ---------- Kağıt dokusu ---------- */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Izgara / nokta deseni ---------- */
.dots {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dots-light {
  background-image: radial-gradient(color-mix(in srgb, var(--white) 26%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .95rem;
  padding: 15px 26px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.btn-solid { background: var(--kutu); color: var(--white); border-color: var(--kutu); }
.btn-solid:hover { background: var(--kutu-dark); border-color: var(--kutu-dark); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--kraft); transform: translateY(-2px); }
.btn-light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-light:hover { background: var(--kutu); color: var(--white); border-color: var(--kutu); transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: var(--white); border-color: color-mix(in srgb, var(--white) 45%, transparent); }
.btn-outline-light:hover { background: var(--white); color: var(--ink); transform: translateY(-2px); }

.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Kutu / kart ---------- */
.card {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--r);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--kutu);
  box-shadow: 8px 8px 0 var(--kutu);
}

/* Etiket gibi duran küçük kutu */
.tagbox {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .8rem; font-weight: 600;
  background: var(--kraft);
}

/* ---------- İzometrik kutu görseli ---------- */
.iso-wrap {
  perspective: 900px;
  display: grid; place-items: center;
  height: 100%; min-height: 340px;
}
.iso {
  width: 150px; height: 150px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
  animation: float 6s ease-in-out infinite;
}
.iso .face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.iso .f-top  { background: var(--kraft-2); transform: translateZ(75px); }
.iso .f-back { background: #C9B69C; transform: rotateX(-90deg) translateZ(75px); }
.iso .f-left { background: #B99B77; transform: rotateY(-90deg) translateZ(75px); }
.iso .mark {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 44px; letter-spacing: -.05em;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
@keyframes float {
  0%,100% { transform: rotateX(58deg) rotateZ(-42deg) translateY(0); }
  50%     { transform: rotateX(58deg) rotateZ(-42deg) translateY(-16px); }
}

/* Kutu etiketi (hero süsü) */
.label-stamp {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  padding: 10px 14px;
  box-shadow: 4px 4px 0 var(--ink);
}
.label-stamp.one { top: 8%; left: 0; transform: rotate(-5deg); }
.label-stamp.two { bottom: 10%; right: 0; transform: rotate(4deg); }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; }
.rv.d2 { transition-delay: .16s; }
.rv.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .iso { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Form ---------- */
.field {
  width: 100%;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field::placeholder { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.field:focus {
  outline: none;
  border-color: var(--kutu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kutu) 20%, transparent);
}

/* ---------- Sekme / tab ---------- */
.tab-btn {
  border-bottom: 2px solid transparent;
  padding-bottom: 14px;
  font-weight: 700;
  color: color-mix(in srgb, var(--white) 60%, transparent);
  transition: color .18s ease, border-color .18s ease;
}
.tab-btn[aria-selected="true"] { color: var(--white); border-color: var(--kutu); }

/* =========================================
   "KUTU" GÖRSELİ — Kendi Kutun Paketi
   ========================================= */

/* Kutu üstü açık kapağı (trapez) */
.crate-lid {
  height: 42px;
  background: linear-gradient(180deg, #DCCDB6, #CFBCA1);
  border-top: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  clip-path: polygon(0 100%, 5% 0, 95% 0, 100% 100%);
}
.crate-lid-fold {
  height: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  margin: 0 8px;
}

/* Kutu gövdesi */
.crate {
  position: relative;
  background: var(--kraft-2);
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-top: none;
}

/* Köşe katlama işaretleri */
.crate::before,
.crate::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  pointer-events: none;
}
.crate::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.crate::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* Kutu rafı */
.crate-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 18px;
  padding: 22px 26px;
  border-top: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background .2s ease;
}
.crate-row:first-of-type { border-top: none; }
.crate-row:hover { background: color-mix(in srgb, var(--white) 55%, transparent); }
.crate-row .no {
  font-family: 'Space Mono', monospace;
  font-size: .72rem; font-weight: 700;
  color: var(--kutu);
  padding-top: 5px;
}
.crate-row h3 { line-height: 1.32; }

/* Kutu üstü bant (paket bandı) */
.crate-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 11px 26px;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  color: var(--kraft);
  font-family: 'Space Mono', monospace;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
}

/* Damga (kutu üstü baskı) */
.stamp {
  display: inline-block;
  border: 2px solid var(--kutu);
  color: var(--kutu);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Space Mono', monospace;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  transform: rotate(-7deg);
  opacity: .85;
}

/* Dikey raf listesi (dar ekran) */
.shelf { display: grid; gap: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.shelf-item { background: var(--kraft-2); padding: 26px; }

/* Modül sayacı */
.mod-num {
  font-family: 'Space Mono', monospace;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--kutu);
}

/* "Tek yol" vurgu bloğu */
.path-rule {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid color-mix(in srgb, var(--white) 15%, transparent);
}
.path-rule:last-child { border-bottom: 1px solid color-mix(in srgb, var(--white) 15%, transparent); }

/* Üst üste binen iki kart (kurulum / bakım) */
.track {
  border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: var(--white);
  border-radius: var(--r);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.track:hover { transform: translateY(-5px); box-shadow: 7px 7px 0 var(--kutu); }
.track-head { padding: 22px 26px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }

/* Aşama (teslim adımı) */
.phase { position: relative; padding-left: 46px; }
.phase::before {
  content: attr(data-n);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--kutu); color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: .7rem; font-weight: 700;
  border-radius: var(--r);
}
.phase-rail { position: relative; }
.phase-rail::before {
  content: "";
  position: absolute; left: 15px; top: 34px; bottom: -22px;
  width: 1.5px; background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.phase-rail:last-child::before { display: none; }

/* =========================================
   SABİT WHATSAPP DESTEK DÜĞMESİ
   ------------------------------------------------------------
   !  TELEFON NUMARASI: HTML'deki  href="https://wa.me/905433411557?text=..."
      Numara 905XXXXXXXXX biçiminde (ülke kodu + rakam, + ve boşluk YOK).
   ========================================= */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(145deg, #2AE07C, #17B854);
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(23, 184, 84, .65), 0 2px 6px rgba(20, 18, 16, .2);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}
.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px -8px rgba(23, 184, 84, .75), 0 3px 10px rgba(20, 18, 16, .24);
}
.wa-float svg { width: 30px; height: 30px; display: block; }

/* Yanındaki etiket — masaüstünde hover'da belirir */
.wa-float::after {
  content: "WhatsApp'tan yaz";
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--ink);
  color: var(--kraft);
  font-size: .8rem;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: var(--r);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-float:hover::after,
.wa-float:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Nabız halkası */
.wa-float .halka {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #17B854;
  animation: wa-pulse 2.8s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

@media (max-width: 640px) {
  .wa-float { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .wa-float svg { width: 27px; height: 27px; }
  .wa-float::after { display: none; }
}

/* --- DÜĞME HİÇBİR İÇERİĞİ ÖRTMESİN ---
   Düğme 60px yüksekliğinde ve 24px alttan yukarı çıkıyor;
   sayfanın en altındaki içerik (telif + imza) kalıcı olarak
   altında kalmasın diye footera ek yer bırakılıyor. */
footer > .shell { padding-bottom: 7.5rem; }

/* Sayfa en altına gelindiğinde de son içerik altta kalsın */
@media (max-width: 640px) {
  footer > .shell { padding-bottom: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float::after { transition: none; }
  .wa-float .halka { animation: none; }
  .wa-float:hover { transform: none; }
}


/* =========================================
   KARTON ÜZERİNE BASKILI ARAYÜZ
   ------------------------------------------------------------
   GEOMETRİ KURALI (önemli):
     üst yüzeyin kayması  = E · tan(θ)
     yan yüzün genişliği  = D
     Köşelerin TAM buluşması için:  D = E  ve  θ = 45°
     Aksi halde üst yüzey ile yan yüz arasında boşluk kalır.

   NOT: skewX'in işareti EKSİ olmalı (+ yüzey sola kaçar).

   YERLEŞİM KURALI (önemli):
     Kenar boşluğu .kap'in KENDİSİNE konursa yan yüzey yanlış yerden
     başlar. position:absolute + "left:100%" PADDING kutusuna göre
     çözülür, yani sütunun sağ kenarından. Boşluk WRAPPER üzerinde
     olmalı ki .kap saf ön yüz kalsın ve yan yüzey ön yüzün sağ
     kenarından başlasın. Aynı şekilde üst yüzey .kap'in 92px ÜSTÜNE
     çıktığı için wrapper'da üst boşluk şart.
   ========================================= */
.kutu-cevre {
  padding-top: 7rem;
  padding-right: 7rem;
}
@media (max-width: 1023px) {
  .kutu-cevre { padding-top: 4rem; padding-right: 0; }
}

.kap-geometri {
  --D: 92px;
  --E: 92px;
  --aci: 45deg;
}
@media (max-width: 1023px) {
  .kap-geometri { --E: 44px; }
  .kap-geometri .kutu-yan { display: none; }
}
.kap {
  --k1: #D9C8AD;
  --k2: #C6B28F;
  --k3: #AC9673;
  --k4: #E6D8C0;
  --baski: 20, 18, 16;

  position: relative;
  background-color: var(--k1);
  background-image:
    /* karton lif dokusu — iki yönde ince çizgiler */
    repeating-linear-gradient(92deg, rgba(122, 98, 62, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(3deg,  rgba(122, 98, 62, .038) 0 1px, transparent 1px 5px),
    linear-gradient(158deg, var(--k4) 0%, var(--k1) 52%, var(--k2) 100%);
  border: 1px solid rgba(var(--baski), .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -14px 26px -18px rgba(var(--baski), .35);
}

/* Basılı arayüz ızgarası — kolon + satır kılavuz çizgileri */
.kap-izgara {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,  rgba(var(--baski), .06) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(180deg, rgba(var(--baski), .06) 0 1px, transparent 1px 72px);
}

/* Kenar boşluk kılavuzları — ızgaradan bir ton koyu */
.kap-kenar {
  position: absolute;
  inset: 20px;
  pointer-events: none;
  border-left: 1px solid rgba(var(--baski), .11);
  border-right: 1px solid rgba(var(--baski), .11);
}

/* Skorlanmış katlama çizgisi — tek başına ayraç olarak kullanılır.
   DİKKAT: height:0 içerir, bu yüzden İÇERİK OLAN satırlarda
   kullanılmamalı — orada .kap-cizgi kullan. */
.kap-ayrac {
  height: 0;
  border-top: 1px dashed rgba(var(--baski), .26);
}

/* Satır sonu kılavuz çizgisi — içerikli satırlarda güvenli.
   Kutu içinde okunabilirlik için koyulaştırıldı (0.26 -> 0.32). */
.kap-cizgi {
  border-bottom: 1px dashed rgba(var(--baski), .32);
  transition: background .18s ease;
}
.kap-cizgi:hover { background: rgba(255, 255, 255, .45); }

/* Kutu üst yüzeyi — ortografik.
   Kapalı kutu, üstten aydınlatılmış: üst yüzey EN AÇIK olmalı.
   DİKKAT: skewX işareti EKSİ olmalı. Pozitif olursa üst kenar
   sola kaçar ve kutu yanlış yöne bakıyor gibi durur. */
.kap .kutu-ust {
  position: absolute;
  left: 0; bottom: 100%;
  width: 100%; height: var(--E);
  transform: skewX(calc(-1 * var(--aci)));
  transform-origin: bottom left;
  background:
    repeating-linear-gradient(92deg, rgba(122, 98, 62, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #E5D5B8 0%, #CFBB97 100%);
  border: 1px solid rgba(var(--baski), .2);
  border-bottom: none;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .45);
}

/* Kutu SOL yan yüzü.
   Üst yüzey sağa kaydığı için kutuya soldan bakıyoruz:
   görünen yan yüz sol tarafta olmalı.
   Geometri: sol kenar panelin sol kenarına, dış kenar yukarı-aşağı
   E kadar kayar (yukarıdan bakınca arka kenar yükselir). */
.kap .kutu-yan-sol {
  position: absolute;
  right: 100%; top: 0;
  width: var(--D); height: 100%;
  transform: skewY(var(--aci));
  transform-origin: top right;
  background:
    repeating-linear-gradient(92deg, rgba(80, 62, 34, .08) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #AE9875 0%, #82704F 100%);
  box-shadow: inset -2px 0 0 rgba(var(--baski), .3);
}
/* Ön yüz ile sol yüz arasındaki dikey kıvrım */
.kap .kutu-yan-sol::after {
  content: "";
  position: absolute;
  right: 6px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(20, 18, 16, .22), transparent 70%);
}

/* Simetrik derin kapak — yan yüz yok, kutu düzden ve üstten görülüyor.
   clip-path ile trapez: alt kenar geniş, üst kenar dar (kutuya doğru geriye). */
.kap .kutu-ust-simetrik {
  position: absolute;
  left: 0; bottom: 100%;
  width: 100%; height: 96px;
  clip-path: polygon(0 100%, 22% 0, 78% 0, 100% 100%);
  background:
    repeating-linear-gradient(92deg, rgba(122, 98, 62, .05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #E7D8BC 0%, #C7B294 100%);
  border-top: 1.5px solid rgba(var(--baski), .2);
}
/* Üst kenarda ince ışık şeridi — kutu kenarı ışığı alıyor */
.kap .kutu-ust-simetrik::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; top: 0;
  height: 2px;
  background: rgba(255, 255, 255, .6);
}

/* Kutu yan yüzü — ortografik. En koyu yüzey. */
.kap .kutu-yan {
  position: absolute;
  left: 100%; top: 0;
  width: var(--D); height: 100%;
  transform: skewY(calc(-1 * var(--aci)));
  transform-origin: top left;
  background:
    repeating-linear-gradient(92deg, rgba(80, 62, 34, .08) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #AE9875 0%, #82704F 100%);
  box-shadow: inset 2px 0 0 rgba(var(--baski), .3);
}

/* Ön yüz ile yan yüz arasındaki dikey kıvrım çizgisi */
.kap .kutu-yan::after {
  content: "";
  position: absolute;
  left: 6px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(20, 18, 16, .22), transparent 70%);
}

/* Baskılı metin — hafifçe kazınmış hissi */
.kap-baski { color: rgba(var(--baski), .86); }
.kap-baski .vurgu { color: #B23A17; }

/* Stüdyo gölgesi — kutu havada duruyor */
.studyo {
  filter: drop-shadow(0 1px 1px rgba(20, 18, 16, .10))
          drop-shadow(0 18px 26px rgba(20, 18, 16, .16));
}

.zemin {
  background: #F2EDE4;
  background-image: radial-gradient(120% 90% at 50% 0%, #F7F3EC 0%, #EDE6DA 100%);
}

/* =========================================
   3B KUTU (kaplama öncesi yöntem)
   ========================================= */
.kutu3d {
  --D: 100px;
  --E: 48px;
  --aci: 25.6deg;
  position: relative;
  filter: drop-shadow(8px 16px 20px rgba(20, 18, 16, .2));
}

/* Üst yüzey — tepeden aydınlanan üst düzlem.
   Ön yüzden biraz koyu, yan yüzden açık: ön > üst > yan sıralaması
   hacmi okutuyor (her yüzey kendi gölgesinde). */
.kutu3d .kutu-ust {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: var(--E);
  transform: skewX(var(--aci));
  transform-origin: bottom left;
  background: linear-gradient(180deg, #D6C3A2 0%, #C4AF8C 100%);
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-bottom: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5);
}

/* Sağ yan yüz — en koyu yüzey */
.kutu3d .kutu-yan {
  position: absolute;
  left: 100%;
  top: 0;
  width: var(--D);
  height: 100%;
  transform: skewY(calc(-1 * var(--aci)));
  transform-origin: top left;
  background: linear-gradient(180deg, #B39770 0%, #8C7150 100%);
  box-shadow: inset 2px 0 0 rgba(20, 18, 16, .32);
}

/* Ön yüz ile üst yüzey arasındaki katlama çizgisi görünsün */
.kutu3d .crate { border-top: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent); }

/* Üst yüzeyden düşen iç gölge */
.kutu3d .icgolge {
  position: absolute;
  inset: 0 0 auto 0;
  height: 88px;
  background: linear-gradient(180deg, rgba(20, 18, 16, .20), transparent);
  pointer-events: none;
  z-index: 3;
}

/* Dar ekranda yan yüz için yer yok -> kapat.
   100px'lik yan yüz ancak lg (1024px) üstünde sığıyor. */
@media (max-width: 1023px) {
  .kutu3d { --E: 30px; --aci: 16.7deg; }
  .kutu3d .kutu-yan { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kutu3d .kutu-ust,
  .kutu3d .kutu-yan { transition: none; }
}

/* =========================================
   KUTU + İÇERİK LİSTESİ — birleşik tasarım
   ========================================= */

/* Sahnenin genel çerçevesi */
.kutu-scene {
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px 0 30px;
}

/* Ön yüz = içerik listesi.
   NOT: "yan yüz" (sağa doğru kayan 3B derinlik) denenmiş ve BAŞARISIZ oldu —
   düz ön yüzle yan yüzü perspektif tutturamıyorsun, yüzeye yapışık kâğıt gibi
   duruyor. Bunun yerine kutu, ön yüzün ÜSTÜNDEki kapakla ve alt gölgeyle
   okunuyor. Yan yüz kodu bilerek buraya yazılmadı. */
.kutu-panel {
  position: relative;
  z-index: 2;
  background: var(--kraft-2);
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  box-shadow: 0 24px 60px -24px rgba(20, 18, 16, .45);
}

/* Kutu içi gölge — kapağın gölgesi, derinlik hissi verir */
.kutu-panel .icgolge {
  position: absolute;
  inset: 0 0 auto 0;
  height: 84px;
  background: linear-gradient(180deg, rgba(20,18,16,.14), transparent);
  pointer-events: none;
  z-index: 3;
}

/* Varyant B: 3B kutudan çıkan panel.
   Kutu panelin ALTINDA kalmalı (z-index 1) — üstte olursa metni kapatıyor. */
.isle-panel {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  background: var(--kraft-2);
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  box-shadow: 0 30px 70px -30px rgba(20, 18, 16, .55);
}

.kutu-taban {
  position: relative;
  z-index: 1;
  margin-top: -112px;
  pointer-events: none;
}

/* Varyant C: kutu + panel yan yana (1. ve 2. görselin birleşimi) */
.kutu-yan-yana {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.kutu-yan-yana .iso-slot {
  width: 150px;
  height: 210px;
  display: grid;
  place-items: center;
  margin-left: -34px;
}
@media (max-width: 900px) {
  .kutu-yan-yana { grid-template-columns: 1fr; }
  .kutu-yan-yana .iso-slot { display: none; }
}

/* Küçük ekranlarda derinliği kapat */
@media (max-width: 767px) {
  .kutu-panel .yan,
  .kutu-panel .dip { display: none; }
}