/* ==========================================================================
   Ana sayfa açılış sahnesi: kaydırdıkça açılan 3B kutu ve Deneyim Kartları
   JS yoksa ya da "hareketi azalt" açıksa: kutu açık, son sahne sabit görünür.
   ========================================================================== */

.acilis {
  position: relative; background: radial-gradient(120% 80% at 70% 40%, #1b160f 0%, #0b0b0b 55%, #070707 100%);
  color: #fff; overflow: clip;
}
.acilis__yapiskan {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: calc(var(--header-h) + 20px) 0 40px;
}
.acilis.is-canli { height: 420vh; }
.acilis.is-canli .acilis__yapiskan { position: sticky; top: 0; height: 100vh; min-height: 0; }

.acilis__izgara {
  position: relative; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; align-items: center;
}

/* --- Metin aşamaları --- */
.acilis__metin { position: relative; }
.acilis.is-canli .acilis__metin { min-height: min(520px, 68vh); }
.asama { max-width: 600px; }
.acilis.is-canli .asama {
  position: absolute; left: 0; right: 0; top: 50%;
  opacity: 0; transform: translateY(calc(-50% + 24px)); pointer-events: none;
  will-change: opacity, transform;
}
.acilis:not(.is-canli) .asama:not(.asama--d) { display: none; }

.asama .eyebrow { margin-bottom: 18px; }
.asama__baslik { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
.asama__yazi { margin-top: 18px; font-size: 1.05rem; line-height: 1.75; color: var(--muted-dark); max-width: 480px; }
.asama--d .h-display { margin: 0 0 18px; font-size: clamp(2.1rem, 3.7vw, 3.3rem); }
.asama--d .lead { color: var(--muted-dark); max-width: 500px; }
.asama--d .hero-features { margin-top: 30px; }
.asama--d .btn-row { margin-top: 30px; }
/* Son sahnede üç buton tek satırda kalsın */
@media (min-width: 901px) {
  .asama--d .btn-row { flex-wrap: nowrap; gap: 10px; }
  .asama--d .btn { padding: 14px 18px; }
  .asama--d .hero-features li { padding: 0 16px; }
  .asama--d .hero-features b { white-space: nowrap; }
}

.asama__teknikler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.asama__teknikler span {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light);
  border: 1px solid var(--gold-dim); border-radius: 999px; padding: 6px 12px;
}

/* --- Kaydırma ipucu --- */
.acilis__ipucu {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 10px;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.acilis.is-canli .acilis__ipucu { display: flex; }
.acilis__ipucu span { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: ipucu 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes ipucu { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* --- İlerleme çizgisi --- */
.acilis__ilerleme {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 140px; background: rgba(255, 255, 255, .1); border-radius: 2px; display: none;
}
.acilis.is-canli .acilis__ilerleme { display: block; }
.acilis__ilerleme i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--gold); transform-origin: top; transform: scaleY(0); border-radius: 2px; }

/* ==========================================================================
   3B sahne
   ========================================================================== */
.acilis__sahne { position: relative; height: min(620px, 74vh); perspective: 1500px; perspective-origin: 50% 18%; }
.acilis__isik {
  position: absolute; left: 50%; top: 58%; width: 620px; height: 620px; margin: -310px 0 0 -310px;
  background: radial-gradient(circle, rgba(212, 170, 100, .30) 0%, rgba(212, 170, 100, .08) 38%, transparent 68%);
  pointer-events: none; opacity: .9;
}
.kutu-tutucu {
  position: absolute; left: 50%; top: 66%; width: 0; height: 0;
  transform-style: preserve-3d; transform: scale(var(--s, 1));
}
.kutu { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(-16deg); }
.kutu, .kapak, .kart { will-change: transform; }

/* Ortak yüz */
.y { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Siyah mat karton dokusu */
.acilis {
  --doku: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* --- Kutu gövdesi: G=360, D=250, Y=150 --- */
.y-alt { width: 360px; height: 250px; margin: -125px 0 0 -180px; transform: translateY(75px) rotateX(90deg);
  background: var(--doku), radial-gradient(ellipse at 50% 60%, #1a1712, #0c0b09 75%); }
.y-on, .y-arka { width: 360px; height: 150px; margin: -75px 0 0 -180px; }
.y-sol, .y-sag { width: 250px; height: 150px; margin: -75px 0 0 -125px; }
.y-on { transform: translateZ(125px);
  background: var(--doku),
    linear-gradient(to top, #b8894a 0, #e6c485 7px, #a57a3f 14px, transparent 14px),
    linear-gradient(180deg, #202020, #0f0f0f); }
.y-arka { transform: translateZ(-125px) rotateY(180deg); background: var(--doku), #141414; }
.y-sol  { transform: translateX(-180px) rotateY(-90deg); background: var(--doku), linear-gradient(180deg, #191919, #0c0c0c); }
.y-sag  { transform: translateX(180px) rotateY(90deg);
  background: var(--doku),
    linear-gradient(to top, #8a6534 0, #b8914f 7px, #7a582b 14px, transparent 14px),
    linear-gradient(180deg, #121212, #080808); }
/* İç duvarlar */
.i-on   { width: 360px; height: 150px; margin: -75px 0 0 -180px; transform: translateZ(124px) rotateY(180deg); background: linear-gradient(180deg, #16130e, #0d0c0a); }
.i-arka { width: 360px; height: 150px; margin: -75px 0 0 -180px; transform: translateZ(-124px);
  background: linear-gradient(180deg, #221d15, #0e0d0b); }
.i-sol  { width: 250px; height: 150px; margin: -75px 0 0 -125px; transform: translateX(-179px) rotateY(90deg); background: linear-gradient(180deg, #1d1912, #0d0c0a); }
.i-sag  { width: 250px; height: 150px; margin: -75px 0 0 -125px; transform: translateX(179px) rotateY(-90deg); background: linear-gradient(180deg, #17140f, #0b0a08); }
/* Yer gölgesi */
.golge { position: absolute; left: 0; top: 0; width: 520px; height: 380px; margin: -190px 0 0 -260px;
  transform: translateY(77px) rotateX(90deg); background: radial-gradient(ellipse at center, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 45%, transparent 70%); }

/* --- Kapak: menteşe arka üst kenarda --- */
.kapak { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translate3d(0, -75px, -125px) rotateX(0deg); }
.k-ust, .k-ic { width: 372px; height: 262px; margin: -131px 0 0 -186px; }
.k-ust { transform: translate3d(0, -3px, 125px) rotateX(90deg);
  background: var(--doku), radial-gradient(ellipse at 40% 30%, #262626, #101010 70%);
  display: grid; place-items: center; }
.k-ust::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(214, 176, 110, .45); border-radius: 2px; }
.k-ust img { width: 58%; height: auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.k-ic { transform: translate3d(0, -2px, 125px) rotateX(-90deg);
  background: var(--doku), linear-gradient(180deg, #17140f, #0c0b09);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.k-ic b { font-size: 15px; letter-spacing: .34em; color: #e2c287; font-weight: 600; }
.k-ic span { font-size: 12px; letter-spacing: .2em; color: rgba(226, 194, 135, .75); text-transform: uppercase; }
.k-ic::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(214, 176, 110, .3); }
.k-on, .k-arka { width: 372px; height: 40px; margin: -20px 0 0 -186px; backface-visibility: visible; -webkit-backface-visibility: visible; }
.k-sol, .k-sag { width: 262px; height: 40px; margin: -20px 0 0 -131px; backface-visibility: visible; -webkit-backface-visibility: visible; }
.k-on   { transform: translate3d(0, 17px, 256px); background: var(--doku), linear-gradient(180deg, #232323, #121212); }
.k-arka { transform: translate3d(0, 17px, -6px) rotateY(180deg); background: #111; }
.k-sol  { transform: translate3d(-186px, 17px, 125px) rotateY(-90deg); background: var(--doku), linear-gradient(180deg, #1a1a1a, #0e0e0e); }
.k-sag  { transform: translate3d(186px, 17px, 125px) rotateY(90deg); background: var(--doku), linear-gradient(180deg, #141414, #0a0a0a); }

/* --- Deneyim kartları --- */
.kart {
  position: absolute; left: 0; top: 0; width: 112px; height: 148px; margin: -74px 0 0 -56px;
  transform-origin: 50% 100%; border-radius: 7px; padding: 11px 11px 10px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.kart b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #c9a15c; position: relative; z-index: 1; }
.kart span { margin-top: auto; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; position: relative; z-index: 1; }
.kart i { font-style: normal; font-size: 6.5px; letter-spacing: .32em; opacity: .55; margin-top: 5px; position: relative; z-index: 1; }
.kart svg { position: absolute; right: -8px; top: 26px; width: 74px; height: 74px; opacity: .32; fill: none; stroke: currentColor; stroke-width: 2; }
.kart--mat    { background: #151515; color: #eee; }
.kart--parlak { background: linear-gradient(135deg, #fff 0%, #ecebe8 45%, #fff 52%, #e7e5e1 100%); color: #1c1c1c; }
.kart--parlak b, .kart--kabart b { color: #a67b36; }
.kart--lak    { background: #17281e; color: #e8f0e9; }
.kart--kabart { background: #efe8dc; color: #2a241b; }
.kart--kabart span, .kart--kabart svg { text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0,0,0,.15); }
.kart--altin  { background: #111; color: #e3c283; }
.kart--gumus  { background: #161616; color: #d9dcdf; }
.kart--gumus b { color: #c9ccd1; }
.kart--bordo  { background: #4b1321; color: #f1d9c7; }
.kart--kraft  { background: repeating-linear-gradient(90deg, #c08a4e 0 5px, #b57f44 5px 7px); color: #2b1c0c; }
.kart--kraft b { color: #3a2308; }

/* --- Duyarlı --- */
@media (max-width: 1080px) {
  .acilis__izgara { grid-template-columns: 1fr 1fr; }
  .kutu-tutucu { --s: .8; }
}
@media (max-width: 900px) {
  .acilis__izgara { grid-template-columns: 1fr; gap: 0; }
  .acilis__sahne { order: -1; height: 40vh; min-height: 280px; perspective-origin: 50% 10%; }
  .kutu-tutucu { --s: .62; top: 70%; }
  .acilis__isik { transform: scale(.7); }
  /* Mobil: sahne üstte sabit yükseklikte, yazılar kalan alanın ÜSTÜNE yaslı */
  .acilis { --asama-kay: 0%; }
  .acilis.is-canli .acilis__yapiskan { align-items: stretch; padding-bottom: 16px; }
  .acilis.is-canli .acilis__izgara { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
  .acilis.is-canli .acilis__sahne { flex: none; height: 38vh; }
  .acilis.is-canli .acilis__metin { flex: 1; min-height: 0; }
  .acilis.is-canli .asama { top: 8px; }
  .asama { max-width: none; }
  .asama__baslik { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .asama__yazi { font-size: .95rem; margin-top: 12px; }
  .asama--d .h-display { font-size: clamp(1.8rem, 7.4vw, 2.4rem); margin-bottom: 12px; }
  .asama--d .lead { font-size: .95rem; }
  .asama--d .hero-features { display: none; }
  .asama--d .btn-row { margin-top: 20px; }
  .asama--d .btn-row .btn:nth-child(3) { display: none; }
  .acilis__ilerleme { display: none !important; }
  .acilis__ipucu { bottom: 16px; }
  .wa-float { transition: opacity .3s var(--ease); }
  body.acilis-icinde .wa-float { opacity: 0; pointer-events: none; }
}
@media (max-width: 480px) {
  .kutu-tutucu { --s: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .acilis.is-canli { height: auto; }
  .acilis__ipucu span { animation: none; }
}

/* Açılışın altındaki istatistik şeridi */
.acilis-istatistik { background: #070707; padding: 8px 0 96px; }

/* --- Kısa ekranlar (dizüstü, tarayıcı yakınlaştırması) --- */
@media (min-width: 901px) and (max-height: 860px) {
  .acilis__yapiskan { padding-top: calc(var(--header-h) + 8px); padding-bottom: 24px; }
  .acilis__sahne { height: 78vh; }
  .kutu-tutucu { --s: .82; }
  .asama .eyebrow { margin-bottom: 12px; }
  .asama__baslik { font-size: clamp(1.9rem, 5.6vh, 3.2rem); }
  .asama__yazi { margin-top: 12px; }
  .asama--d .h-display { font-size: clamp(1.85rem, 5.4vh, 3rem); margin-bottom: 12px; }
  .asama--d .lead { font-size: .95rem; line-height: 1.6; }
  .asama--d .hero-features { margin-top: 18px; }
  .asama--d .btn-row { margin-top: 20px; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .kutu-tutucu { --s: .7; }
  .asama--d .hero-features { display: none; }
  .asama--d .btn { padding: 12px 16px; }
}
@media (min-width: 901px) and (max-height: 600px) {
  .kutu-tutucu { --s: .58; }
  .asama--d .lead { display: none; }
}

@media (max-width: 900px) and (max-height: 760px) {
  .asama--d .lead { display: none; }
  .asama--d .h-display { font-size: clamp(1.6rem, 6.6vw, 2.1rem); }
}