/* ==========================================================================
   M2Y DECK — BAÜN Kurumsal Kimlik · Tek Tutarlı Tasarım Dili
   Ana renk paleti üniversitenin resmi kurumsal renklerine göre
   ========================================================================== */

:root {
  /* === BAÜN Resmi Kurumsal Renkler === */
  --c-turkuaz: #31B7BC;          /* Ana logo turkuazı */
  --c-turkuaz-deep: #008580;     /* Koyu teal (logo varyantı) */
  --c-lacivert: #302768;         /* Akademik lacivert */
  --c-lacivert-deep: #1A1340;    /* Daha koyu lacivert (zemin için) */
  --c-deep: #0A0824;             /* En koyu zemin (gradient base) */
  --c-yellow: #EAEA92;           /* Yeşilimsi sarı (vurgu) */
  --c-orange: #F28F25;           /* Turuncu (acil/uyarı vurgusu) */
  --c-mavi-gri: #A9B9C3;         /* Açık nötr */
  --c-cream: #F5F5F0;            /* Sadece kart yüzeyi için */

  /* Türevler */
  --c-turkuaz-soft: #4FCDD2;
  --c-turkuaz-glow: rgba(49, 183, 188, 0.55);
  --c-ink: #0E1718;
  --c-ink-2: #1F2A2C;

  --c-mist: rgba(255,255,255,0.86);
  --c-mist-2: rgba(255,255,255,0.62);
  --c-mist-3: rgba(255,255,255,0.32);

  --font-display: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-keynote: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   16:9 BOXED CENTER + ANIMATED GRADIENT
   body == .reveal-viewport (Reveal otomatik class ekliyor) → tam ekran tut
   .reveal → 16:9 oranını koru, ortala, animated gradient burada
   Kenarlardaki letterbox body bg'de (deep) → sinema deneyimi
   ========================================================================== */

html, body, body.reveal-viewport {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(48, 39, 104, 0.38) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(0, 133, 128, 0.30) 0%, transparent 60%),
    linear-gradient(135deg, #04010E 0%, #0A0824 40%, #04010E 100%) !important;
  background-size: 100% 100%, 100% 100%, 200% 200%;
  animation: bg-letterbox 30s ease-in-out infinite;
}

@keyframes bg-letterbox {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0% 0%; }
  50%      { background-position: 100% 100%, 0% 0%, 100% 100%; }
}

/* ========================================================================
   SUNUM PANELİ — 16:9 boxed center, 3D kabartılmış çıkıntılı görünüm
   Reveal element'inin kendisini ekran ortasına 16:9 olarak konumlandır.
   ======================================================================== */
html body.reveal-viewport > .reveal,
body.reveal-viewport > .reveal,
body > .reveal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(96vw, calc(96vh * 16 / 9)) !important;
  height: min(96vh, calc(96vw * 9 / 16)) !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  /* Tamamen yumuşak gradient — büyük (>130%) ellipsoid blob'lar
     %85+ feather ile keskin border yok, organik bulutsu geçiş */
  background:
    radial-gradient(ellipse 140% 120% at 75% 30%, rgba(0, 133, 128, 0.32) 0%, rgba(0, 133, 128, 0.08) 45%, transparent 90%),
    radial-gradient(ellipse 150% 130% at 25% 70%, rgba(48, 39, 104, 0.38) 0%, rgba(48, 39, 104, 0.10) 50%, transparent 92%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(13, 35, 60, 0.0) 0%, rgba(8, 14, 36, 0.30) 100%),
    linear-gradient(170deg, #0A1230 0%, #0F2042 35%, #0E2238 65%, #0A1A2C 100%) !important;
  background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
  background-blend-mode: screen, screen, multiply, normal;
  animation: m2y-gradient 32s ease-in-out infinite, panel-glow 6s ease-in-out infinite;
  overflow: hidden !important;
  border-radius: 14px;

  /* 3D kabartılmış çıkıntı efekti — çoklu shadow katmanları */
  box-shadow:
    /* Outer ambient glow — turkuaz halo */
    0 0 80px rgba(49, 183, 188, 0.22),
    0 0 160px rgba(48, 39, 104, 0.32),
    /* Drop shadow — derin gölge (panel altında) */
    0 30px 60px -15px rgba(0, 0, 0, 0.85),
    0 60px 120px -25px rgba(0, 0, 0, 0.65),
    /* Yumuşak ikincil gölge */
    0 18px 36px -6px rgba(0, 0, 0, 0.55),
    /* Inner top highlight (üst kenarda parlama — kabartı hissi) */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    /* Inner bottom shadow (alt kenarda gölge — kabartı hissi) */
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.5),
    /* Frame — ince rim ışık */
    0 0 0 1px rgba(79, 205, 210, 0.15);
}

/* Panelin etrafında pulse halo animasyonu */
@keyframes panel-glow {
  0%, 100% { box-shadow:
    0 0 80px rgba(49, 183, 188, 0.22),
    0 0 160px rgba(48, 39, 104, 0.32),
    0 30px 60px -15px rgba(0, 0, 0, 0.85),
    0 60px 120px -25px rgba(0, 0, 0, 0.65),
    0 18px 36px -6px rgba(0, 0, 0, 0.55),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(79, 205, 210, 0.15);
  }
  50%  { box-shadow:
    0 0 110px rgba(49, 183, 188, 0.32),
    0 0 200px rgba(48, 39, 104, 0.42),
    0 35px 70px -15px rgba(0, 0, 0, 0.85),
    0 65px 140px -25px rgba(0, 0, 0, 0.65),
    0 20px 40px -6px rgba(0, 0, 0, 0.55),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(79, 205, 210, 0.25);
  }
}
html body .reveal {
  animation: m2y-gradient 22s ease-in-out infinite, panel-glow 6s ease-in-out infinite;
}

@keyframes m2y-gradient {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 50% 50%, 100% 100%;
  }
}

/* Ek glow / radial accent katmanı (slaytın üstünde) */
.reveal::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 12%, rgba(49,183,188,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(48,39,104,0.32) 0%, transparent 60%);
  animation: m2y-glow-shift 30s ease-in-out infinite;
}

@keyframes m2y-glow-shift {
  0%, 100% { opacity: 0.85; transform: translate(0,0); }
  50%      { opacity: 1.0;  transform: translate(2vw, 1vh); }
}

/* Vignette + subtle grain */
.reveal::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 200px 50px rgba(0,0,0,0.55);
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}

/* ==========================================================================
   REVEAL.JS BASE
   ========================================================================== */

.reveal {
  font-family: var(--font-display);
  font-weight: 400;
  font-feature-settings: "kern", "liga", "tnum";
  letter-spacing: -0.01em;
  color: var(--c-cream);
  background: transparent !important;
}

.reveal .slides { text-align: left; }

.reveal .slides section {
  /* Tek tip: tüm slaytlar şeffaf, animated gradient zemin üstünde
     POSITION'a dokunma — Reveal.js absolute positioning yönetiyor */
  background: transparent !important;
  padding: 80px 110px;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: left;
  isolation: isolate; /* ::before stack context için yeterli */
  overflow: hidden;   /* Decorative drop'lar/absolute öğeler taşmasın */
  box-sizing: border-box;
}

/* Reveal'ın otomatik eklediği has-light-background class'ını nötralize et */
.reveal .slides section.has-light-background,
.reveal .slides section.has-dark-background {
  background: transparent !important;
}

/* ==========================================================================
   TYPOGRAFİ — büyük, Apple Keynote ruhu
   ========================================================================== */

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5 {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0 0 0.4em 0;
  text-transform: none;
}
.reveal h1 { font-size: clamp(3.6rem, 8.2vw, 8.8rem); font-weight: 700; }
.reveal h2 { font-size: clamp(2.6rem, 5.4vw, 5.4rem); }
.reveal h3 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
.reveal h4 { font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 500; }

.reveal p, .reveal li {
  font-size: clamp(1.15rem, 1.7vw, 1.85rem);
  line-height: 1.5;
  color: var(--c-mist);
  margin: 0 0 0.6em 0;
  font-weight: 400;
}

.reveal .lead {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  color: var(--c-mist);
  font-weight: 400;
  line-height: 1.4;
  max-width: 60ch;
}

.reveal .eyebrow {
  font-size: clamp(0.85rem, 1.0vw, 1.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--c-turkuaz-soft);
  margin-bottom: 1em;
}

.reveal .eyebrow.warm { color: var(--c-orange); }
.reveal .eyebrow.leaf { color: var(--c-yellow); }

.reveal strong { color: #ffffff; font-weight: 600; }
.reveal em {
  color: var(--c-turkuaz-soft);
  font-style: normal;
  font-weight: 500;
}

/* ==========================================================================
   LİSTE
   ========================================================================== */

.reveal ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.reveal ul li {
  position: relative;
  padding-left: 2.2em;
  margin-bottom: 0.8em;
}
.reveal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 1.3em;
  height: 2px;
  background: var(--c-turkuaz);
  border-radius: 2px;
}

.reveal ol {
  list-style: none;
  counter-reset: m2y;
  padding-left: 0;
}
.reveal ol li {
  counter-increment: m2y;
  position: relative;
  padding-left: 3em;
  margin-bottom: 0.9em;
}
.reveal ol li::before {
  content: counter(m2y, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--c-turkuaz);
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.row { display: flex; gap: 4vw; align-items: center; }
.row.between { justify-content: space-between; }
.col { flex: 1; }
.col-narrow { flex: 0 0 38%; }

.stack-tight > * + * { margin-top: 0.6em; }
.stack > * + * { margin-top: 1.2em; }
.stack-loose > * + * { margin-top: 2.4em; }

.center { text-align: center; }
.center-x { display: flex; justify-content: center; }
.middle { align-items: center; }
.measure { max-width: 64ch; }
.measure-tight { max-width: 48ch; }

/* ==========================================================================
   BIG NUMBER
   ========================================================================== */

.bignum {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 14vw, 14rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  background: linear-gradient(135deg, #ffffff 0%, var(--c-turkuaz-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 0.1em -0.04em;
}
.bignum.warm {
  background: linear-gradient(135deg, #fff 0%, var(--c-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.bignum.leaf {
  background: linear-gradient(135deg, #fff 0%, var(--c-yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ==========================================================================
   QUOTE
   ========================================================================== */

.quote {
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.25;
  color: #ffffff !important;
  letter-spacing: -0.018em;
  max-width: 22ch;
}
.quote::before {
  content: "“";
  display: block;
  font-size: 1.4em;
  line-height: 0.5;
  color: var(--c-turkuaz);
  margin-bottom: 0.2em;
  font-weight: 700;
}
.quote-source {
  margin-top: 1.2em;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  color: var(--c-mist-2);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ==========================================================================
   PILL / CHIP — kapakta belirgin "Konferans" pill için animated glow
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.2em;
  border: 1px solid rgba(49,183,188,0.45);
  background: rgba(49,183,188,0.10);
  border-radius: 999px;
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  font-weight: 600;
  color: var(--c-turkuaz-soft);
  letter-spacing: 0.04em;
}

.pill.hero {
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  padding: 0.85em 1.8em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(49,183,188,0.32) 0%, rgba(48,39,104,0.32) 100%);
  border: 1.5px solid rgba(79,205,210,0.55);
  box-shadow:
    0 0 30px rgba(49,183,188,0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
  animation: pill-hero-pulse 3.2s ease-in-out infinite;
}
.pill.hero::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-turkuaz-soft);
  box-shadow: 0 0 12px var(--c-turkuaz-glow);
  animation: pill-dot-blink 1.6s ease-in-out infinite;
}

@keyframes pill-hero-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(49,183,188,0.32), inset 0 1px 0 rgba(255,255,255,0.18); transform: scale(1); }
  50%      { box-shadow: 0 0 50px rgba(49,183,188,0.55), inset 0 1px 0 rgba(255,255,255,0.25); transform: scale(1.02); }
}
@keyframes pill-dot-blink {
  0%, 100% { opacity: 1.0; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

/* ==========================================================================
   SURFACE / KART
   ========================================================================== */

.surface {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 2.2em 2.4em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.surface.glow {
  box-shadow: 0 30px 80px -30px rgba(49,183,188,0.45);
  border-color: rgba(49,183,188,0.32);
}

/* ==========================================================================
   CHAPTER DIVIDER
   ========================================================================== */

.chapter {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chapter .number {
  font-size: clamp(1.0rem, 1.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--c-turkuaz);
  margin-bottom: 1.4em;
}
.chapter .title {
  font-size: clamp(4.0rem, 9vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #ffffff;
}

/* ==========================================================================
   DECORATIVE DROPS / BLOBS — animated parallax
   ========================================================================== */

.drop {
  position: absolute;
  width: 36vw;
  height: 36vw;
  border-radius: 60% 60% 60% 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(79,205,210,0.28) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.drop.tr { top: -10%; right: -8%; transform: rotate(-30deg); }
.drop.bl { bottom: -15%; left: -10%; transform: rotate(180deg); }
.drop.cl { top: 50%; left: -15%; transform: translateY(-50%); }

.drop.warm  { background: radial-gradient(ellipse at 30% 30%, rgba(242,143,37,0.22) 0%, transparent 60%); }
.drop.leaf  { background: radial-gradient(ellipse at 30% 30%, rgba(234,234,146,0.20) 0%, transparent 60%); }
.drop.purple { background: radial-gradient(ellipse at 30% 30%, rgba(48,39,104,0.40) 0%, transparent 60%); }

/* ==========================================================================
   COVER LOGOS
   ========================================================================== */

.cover-logos {
  position: absolute;
  top: 4%;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 4%;
  z-index: 5;
}
.cover-logos img {
  /* Önceki ~90px (8.4vh) → +%35 büyütme = ~122px (11.3% slayt yüksekliği) */
  height: 11.3%;
  max-height: 122px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}

.watermark-logo {
  position: absolute;
  bottom: 3vh;
  right: 4vw;
  height: 4vh;
  opacity: 0.42;
  z-index: 3;
}

/* ==========================================================================
   REVEAL PROGRESS / CONTROLS
   ========================================================================== */

.reveal .slide-number {
  background: rgba(10, 8, 36, 0.55) !important;
  color: var(--c-mist) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 6px;
  /* Sol alta taşı — sağ alttaki nav controls ile çakışmasın */
  left: 18px !important;
  right: auto !important;
  bottom: 14px !important;
  z-index: 30;
  display: block !important;
}

.reveal .progress {
  color: var(--c-turkuaz);
  height: 3px;
  display: block !important;
}
.reveal .controls {
  color: var(--c-turkuaz) !important;
  bottom: 14px !important;
  right: 18px !important;
  z-index: 30;
  display: block !important;
}
.reveal .controls button {
  color: var(--c-turkuaz) !important;
  opacity: 0.85;
}
.reveal .controls button:hover {
  opacity: 1;
}

/* ==========================================================================
   SHIMMER LINE
   ========================================================================== */

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.shimmer-line {
  background: linear-gradient(90deg, transparent 0%, var(--c-turkuaz-soft) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
  height: 2px;
  border: none;
  margin: 1.4em 0;
  width: 30%;
}

/* ==========================================================================
   MOBİL — Portrait orientation overlay
   16:9 sunum portrait modda 360x202px'a sıkışıyor → metin okunamıyor.
   Çözüm: portrait + dar ekranda overlay göster, kullanıcıyı yatay tutmaya yönlendir.
   Landscape'te overlay gizli, sunum normal çalışır.
   ========================================================================== */
@media (orientation: portrait) and (max-width: 900px) {
  html body.reveal-viewport > .reveal {
    visibility: hidden !important;
  }
  html body::before {
    content: "";
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background:
      radial-gradient(ellipse 90% 60% at 78% 12%, rgba(49,183,188,0.30) 0%, transparent 60%),
      radial-gradient(ellipse 90% 70% at 18% 88%, rgba(48,39,104,0.42) 0%, transparent 65%),
      linear-gradient(170deg, #0A1230 0%, #0F2042 35%, #0E2238 65%, #0A1A2C 100%) !important;
    pointer-events: auto !important;
    display: block !important;
  }
  html body::after {
    content: "Telefonu yatay konuma çevirin\A\A Sunum yatay 16:9 ekrana göre tasarlanmıştır.\A Daha iyi deneyim için tabletten veya bilgisayardan da açabilirsiniz.";
    white-space: pre-wrap;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 28px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-family: "Inter", -apple-system, sans-serif !important;
    font-size: clamp(15px, 4.5vw, 19px) !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    pointer-events: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  }
}