/* ---------- KABİN BÖLÜMÜ (birebir ders kabini) ---------- */

.kabin {
  --ink: #1d2230;
  --ink-soft: #353b4c;
  --brand: #22392f;   /* kabin gövdesinin koyu yeşili */
  --lime: #c8d63a;    /* koltukların limon sarısı */
  height: 350vh; /* scroll uzunluğu: arttırırsan animasyon + kartlar yavaşlar (400→350 = 1.2x hız) */
}

/* Solda kart sütunu, sağda video çerçevesi */
.kabin-layout {
  display: grid;
  grid-template-columns: minmax(21.25rem, 0.8fr) 1.2fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  height: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: calc(6rem + env(safe-area-inset-top)) clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vh, 2.5rem);
}

/* ---------- Video alanı ----------
   Çerçeve yok: dört kenar maskeyle içe doğru erir, video sayfanın zeminine karışır.
   Arkadaki hale (::before) videonun mavi-gri tonunu zemine taşır, geçiş yumuşak olur. */

.kabin-frame {
  position: relative;
  z-index: 2; /* kartlar bunun arkasından çıkar */
  /* Alan hücresinden taşar: yukarıda menünün altına, aşağıda ekranın dibine, sağda ekran
     kenarına, solda kartlarla arasındaki boşluğa kadar. Geniş kenar erimesine yer açar. */
  margin: calc(-1 * (6rem + env(safe-area-inset-top))) calc(-1 * clamp(1.25rem, 3vw, 2.5rem))
          calc(-1 * clamp(1.25rem, 3vh, 2.5rem)) calc(-1 * clamp(1.5rem, 3vw, 3rem));
}

.kabin-frame::before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(170, 180, 198, 0.5), rgba(170, 180, 198, 0) 75%);
  filter: blur(1.875rem);
  pointer-events: none;
}

/* Kademeli kenar erimesi: doğrusal geçiş yerine yumuşak eğri (smootherstep) —
   en dışta neredeyse görünmez başlar, içe doğru yavaşça tam netliğe ulaşır.
   --fade-x / --fade-y: erimenin her kenarda kapladığı pay. */
.kabin-frame .seq-canvas {
  --fade-x: 24%;
  --fade-y: 20%;
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0.016) calc(var(--fade-x) * 0.125),
      rgba(0,0,0,0.104) calc(var(--fade-x) * 0.25),
      rgba(0,0,0,0.275) calc(var(--fade-x) * 0.375),
      rgba(0,0,0,0.5) calc(var(--fade-x) * 0.5),
      rgba(0,0,0,0.725) calc(var(--fade-x) * 0.625),
      rgba(0,0,0,0.896) calc(var(--fade-x) * 0.75),
      rgba(0,0,0,0.984) calc(var(--fade-x) * 0.875),
      rgba(0,0,0,1) var(--fade-x),
      rgba(0,0,0,1) calc(100% - var(--fade-x)),
      rgba(0,0,0,0.984) calc(100% - var(--fade-x) * 0.875),
      rgba(0,0,0,0.896) calc(100% - var(--fade-x) * 0.75),
      rgba(0,0,0,0.725) calc(100% - var(--fade-x) * 0.625),
      rgba(0,0,0,0.5) calc(100% - var(--fade-x) * 0.5),
      rgba(0,0,0,0.275) calc(100% - var(--fade-x) * 0.375),
      rgba(0,0,0,0.104) calc(100% - var(--fade-x) * 0.25),
      rgba(0,0,0,0.016) calc(100% - var(--fade-x) * 0.125),
      rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0.016) calc(var(--fade-y) * 0.125),
      rgba(0,0,0,0.104) calc(var(--fade-y) * 0.25),
      rgba(0,0,0,0.275) calc(var(--fade-y) * 0.375),
      rgba(0,0,0,0.5) calc(var(--fade-y) * 0.5),
      rgba(0,0,0,0.725) calc(var(--fade-y) * 0.625),
      rgba(0,0,0,0.896) calc(var(--fade-y) * 0.75),
      rgba(0,0,0,0.984) calc(var(--fade-y) * 0.875),
      rgba(0,0,0,1) var(--fade-y),
      rgba(0,0,0,1) calc(100% - var(--fade-y)),
      rgba(0,0,0,0.984) calc(100% - var(--fade-y) * 0.875),
      rgba(0,0,0,0.896) calc(100% - var(--fade-y) * 0.75),
      rgba(0,0,0,0.725) calc(100% - var(--fade-y) * 0.625),
      rgba(0,0,0,0.5) calc(100% - var(--fade-y) * 0.5),
      rgba(0,0,0,0.275) calc(100% - var(--fade-y) * 0.375),
      rgba(0,0,0,0.104) calc(100% - var(--fade-y) * 0.25),
      rgba(0,0,0,0.016) calc(100% - var(--fade-y) * 0.125),
      rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0.016) calc(var(--fade-x) * 0.125),
      rgba(0,0,0,0.104) calc(var(--fade-x) * 0.25),
      rgba(0,0,0,0.275) calc(var(--fade-x) * 0.375),
      rgba(0,0,0,0.5) calc(var(--fade-x) * 0.5),
      rgba(0,0,0,0.725) calc(var(--fade-x) * 0.625),
      rgba(0,0,0,0.896) calc(var(--fade-x) * 0.75),
      rgba(0,0,0,0.984) calc(var(--fade-x) * 0.875),
      rgba(0,0,0,1) var(--fade-x),
      rgba(0,0,0,1) calc(100% - var(--fade-x)),
      rgba(0,0,0,0.984) calc(100% - var(--fade-x) * 0.875),
      rgba(0,0,0,0.896) calc(100% - var(--fade-x) * 0.75),
      rgba(0,0,0,0.725) calc(100% - var(--fade-x) * 0.625),
      rgba(0,0,0,0.5) calc(100% - var(--fade-x) * 0.5),
      rgba(0,0,0,0.275) calc(100% - var(--fade-x) * 0.375),
      rgba(0,0,0,0.104) calc(100% - var(--fade-x) * 0.25),
      rgba(0,0,0,0.016) calc(100% - var(--fade-x) * 0.125),
      rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0.016) calc(var(--fade-y) * 0.125),
      rgba(0,0,0,0.104) calc(var(--fade-y) * 0.25),
      rgba(0,0,0,0.275) calc(var(--fade-y) * 0.375),
      rgba(0,0,0,0.5) calc(var(--fade-y) * 0.5),
      rgba(0,0,0,0.725) calc(var(--fade-y) * 0.625),
      rgba(0,0,0,0.896) calc(var(--fade-y) * 0.75),
      rgba(0,0,0,0.984) calc(var(--fade-y) * 0.875),
      rgba(0,0,0,1) var(--fade-y),
      rgba(0,0,0,1) calc(100% - var(--fade-y)),
      rgba(0,0,0,0.984) calc(100% - var(--fade-y) * 0.875),
      rgba(0,0,0,0.896) calc(100% - var(--fade-y) * 0.75),
      rgba(0,0,0,0.725) calc(100% - var(--fade-y) * 0.625),
      rgba(0,0,0,0.5) calc(100% - var(--fade-y) * 0.5),
      rgba(0,0,0,0.275) calc(100% - var(--fade-y) * 0.375),
      rgba(0,0,0,0.104) calc(100% - var(--fade-y) * 0.25),
      rgba(0,0,0,0.016) calc(100% - var(--fade-y) * 0.125),
      rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}

/* ---------- Bilgi kartları ---------- */

.kabin-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
}

/* Kart: kabinin iç dünyası. Koyu yeşil ikon karosu (kabin gövdesi), limon sarısı çizgi ikon
   (koltuklar), tepede tavan lambası gibi bir ışık şeridi: kart yerine oturunca yanar. */
.kabin-card {
  --light: #ffc56e;           /* kabin tavan LED'inin sıcak tonu */
  --light-rgb: 255, 197, 110;
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1.25rem;
  padding: 1.375rem 1.5rem 1.375rem;
  border-radius: 1.25rem;
  background: #f3f5f8; /* ışığı yanmamış hâl; opak: telefonda üst üste binince alttaki yazı görünmesin */
  color: var(--ink);
  border: 1px solid rgba(27, 31, 39, 0.07);
  transition: background-color 0.6s ease, border-color 0.6s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 0.125rem rgba(40, 50, 70, 0.06),
    0 0.75rem 1.5rem -0.75rem rgba(40, 50, 70, 0.14),
    0 2rem 3.5rem -2rem rgba(40, 50, 70, 0.22);
  overflow: hidden;
}

/* Lambadan aşağı düşen ışık konisi */
.kabin-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 20rem 12rem at 3rem 0, rgba(var(--light-rgb), 0.34), rgba(var(--light-rgb), 0.08) 55%, rgba(var(--light-rgb), 0) 80%);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

/* Tavan lambası: ikonun tam üstünde, kartın üst kenarına yapışık kısa bir şerit */
.kabin-card-light {
  position: absolute;
  top: 0;
  left: 1rem; /* ikonun (1.5rem + 3rem/2) tam üstünde ortalı */
  width: 4rem;
  height: 0.25rem;
  border-radius: 0 0 0.3rem 0.3rem;
  background: #cfd4dc;
  transition: background-color 0.5s ease, box-shadow 0.7s ease;
}

.kabin-card.is-lit {
  background: #fdfdfc;
  border-color: rgba(var(--light-rgb), 0.45);
}
.kabin-card.is-lit::before { opacity: 1; }
.kabin-card.is-lit .kabin-card-light {
  background: var(--light);
  box-shadow:
    0 0 0.5rem 0.0625rem rgba(var(--light-rgb), 0.9),
    0 0 1.75rem 0.25rem rgba(var(--light-rgb), 0.45);
}

.kabin-card-icon {
  position: relative;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: #c3c9d2; /* ışık yanınca kabinin yeşiline döner */
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0.5rem 1rem -0.5rem rgba(34, 57, 47, 0.6);
  transition: background-color 0.6s ease, color 0.6s ease;
}

.kabin-card.is-lit .kabin-card-icon {
  background: var(--brand);
  color: var(--lime);
}

.kabin-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kabin-card-body { position: relative; min-width: 0; }

.kabin-card-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3d6b52; /* marka yeşilinin bir ton açığı: etiket başlığı ezmesin */
}

.kabin-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.3vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.kabin-card p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .kabin-card::before,
  .kabin-card-light,
  .kabin-card,
  .kabin-card-icon { transition: none; }
}

/* Alçak ekranlarda (ör. 1366x768 dizüstü) kartlar sütuna sığsın */
@media (max-height: 820px) and (min-width: 768px) {
  .kabin-card { padding: 1.25rem 1.375rem 1.25rem; column-gap: 1rem; }
  .kabin-card-light { left: 1rem; width: 3.25rem; }
  .kabin-card { grid-template-columns: 2.5rem 1fr; }
  .kabin-card-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
  .kabin-card-icon svg { width: 1.25rem; height: 1.25rem; }
  .kabin-card p { font-size: 0.93rem; }
}

/* ---------- Telefon: video üstte (menünün arkasına hafifçe girer), altında üç kompakt kart ----------
   Kartlar sırayla sağdan gelir ve üçü de tam açık kalır. İlk kart videonun eriyen alt kenarına
   hafifçe biner; kartlar buzlu cam olduğu için arkadaki zemin bulanık görünür. */

@media (max-width: 767px) {
  .kabin { height: 183vh; } /* daha kısa = her kaydırmada kart+animasyon DAHA ÇOK ilerler.
                               350→260→200→183 (1.2x) denendi; fazla hızlıysa 200. */

  .kabin-layout {
    display: flex;
    flex-direction: column-reverse; /* video üstte */
    gap: 0;
    /* Videonun üstü boş duvar: menünün arkasına girmesinde sakınca yok, kartlara yer açar */
    padding: calc(2.75rem + env(safe-area-inset-top)) 1rem calc(0.875rem + env(safe-area-inset-bottom));
  }

  .kabin-frame {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 -1rem; /* kenardan kenara, maske kenarları eritir */
  }
  .kabin-frame .seq-canvas { --fade-x: 16%; --fade-y: 14%; }

  /* Henüz gelmemiş kartlar da yerini korur (sadece görünmez): video alanı zıplamaz */
  .kabin-cards {
    flex: 0 0 auto;
    z-index: 3;             /* videonun önünde */
    margin-top: -1.5rem;    /* videonun eriyen alt kenarına hafifçe biner */
    gap: 0.5rem;
  }

  .kabin-card {
    grid-template-columns: 2rem 1fr;
    column-gap: 0.875rem;
    padding: 0.875rem 1rem 0.9375rem;
    border-radius: 1rem;
    background: rgba(243, 245, 248, 0.8);
    -webkit-backdrop-filter: blur(0.875rem) saturate(1.2);
    backdrop-filter: blur(0.875rem) saturate(1.2);
  }
  .kabin-card.is-lit { background: rgba(253, 253, 252, 0.9); }
  .kabin-card::before {
    background: radial-gradient(ellipse 12rem 6rem at 2rem 0, rgba(var(--light-rgb), 0.32), rgba(var(--light-rgb), 0.06) 60%, rgba(var(--light-rgb), 0) 85%);
  }

  .kabin-card-light { left: 0.75rem; width: 2.5rem; height: 0.1875rem; }
  .kabin-card-icon { width: 2rem; height: 2rem; border-radius: 0.625rem; }
  .kabin-card-icon svg { width: 1.0625rem; height: 1.0625rem; }

  .kabin-card-label { font-size: 0.66rem; margin-bottom: 0.1875rem; letter-spacing: 0.14em; }
  .kabin-card h3 { font-size: 1.05rem; letter-spacing: -0.02em; }
  .kabin-card p { font-size: 0.875rem; line-height: 1.45; margin-top: 0.25rem; }
}

/* Kısa telefonlar (ör. iPhone SE): etiket gizlenir (ikon aynı bilgiyi verir), kartlar sıkışır */
@media (max-width: 767px) and (max-height: 700px) {
  .kabin-layout { padding-top: calc(2.25rem + env(safe-area-inset-top)); }
  .kabin-cards { margin-top: -2rem; gap: 0.375rem; }
  .kabin-card { padding: 0.6875rem 0.875rem 0.75rem; }
  .kabin-card-label { display: none; }
  .kabin-card h3 { font-size: 0.98rem; }
  .kabin-card p { font-size: 0.8125rem; line-height: 1.4; }
}