/* Programlama Egitimi - ortak responsive katmani
   Telefon: hamburgerli tek kolon.
   Tablet: hamburger yok, icerik akiskan kalir.
*/

.pe-mobile-nav-link {
  display: none !important;
}

body.pe-panel-open {
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.pe-panel-open .hero-section {
  display: none !important;
}

body.pe-panel-open .scroll-down-btn {
  display: none !important;
}

body.pe-panel-open .theme-fab {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.pe-panel-open #peMainWrap {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.pe-panel-open #programlama-shell,
body.pe-panel-open #peLegacyMount {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.pe-hero-locked .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(.65rem, 1vw, 1rem) !important;
}

body.pe-hero-locked .hero-left,
body.pe-hero-locked .hero-right {
  min-width: 0 !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  html[data-module="pe"] .menu-toggle {
    display: none !important;
  }

  body,
  body.pe-hero-locked,
  body.pe-panel-open {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .header-search {
    display: none !important;
  }

  .hero,
  .hero-section,
  .page-shell,
  .pe-wrap {
    height: auto !important;
    min-height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .hero-inner,
  .pe-hero,
  .hero-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.pe-hero-locked .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 2.6vw, 2rem) !important;
    padding: .8rem clamp(1rem, 3vw, 2rem) !important;
  }

  body.pe-hero-locked .hero-desc {
    min-height: clamp(132px, 18vw, 210px) !important;
    max-height: none !important;
    overflow: hidden !important;
    font-size: clamp(.82rem, 1.45vw, .98rem) !important;
    line-height: 1.58 !important;
  }

  body.pe-hero-locked .hero-terminal {
    width: min(100%, 560px) !important;
    height: clamp(340px, 42vw, 455px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.pe-hero-locked .terminal-body {
    height: calc(100% - 46px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    font-size: clamp(.58rem, 1.05vw, .76rem) !important;
    line-height: 1.45 !important;
  }

  body.pe-hero-locked .ticker-wrap {
    display: none !important;
  }

  .pe-shell {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
  }

  body.pe-panel-open .main-wrap {
    position: static !important;
    width: min(96vw, 1520px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    overflow: visible !important;
    padding-bottom: clamp(2rem, 4vw, 4rem) !important;
  }
}

@media (max-width: 767px) {
  html,
  body,
  body.pe-hero-locked,
  body.pe-panel-open {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .header-search,
  .back-btn {
    display: none !important;
  }

  .pe-mobile-nav-link {
    display: flex !important;
  }

  .hero,
  .hero-section,
  .page-shell,
  .pe-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .hero-inner,
  .pe-hero,
  .hero-layout,
  .ph-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
  }

  .hero-right,
  .pe-hero-panel {
    display: none !important;
  }

  body.pe-hero-locked .hero-right {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  body.pe-hero-locked .hero-terminal {
    width: 100% !important;
    height: auto !important;
    min-height: clamp(260px, 72vw, 360px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.pe-hero-locked .terminal-body {
    height: auto !important;
    min-height: clamp(214px, 58vw, 300px) !important;
    max-height: clamp(260px, 70vw, 330px) !important;
    overflow: hidden !important;
    font-size: clamp(.58rem, 2.55vw, .72rem) !important;
    line-height: 1.45 !important;
  }

  .hero-left,
  .hero-copy,
  .pe-hero-copy {
    min-width: 0 !important;
  }

  .hero-h1,
  .pe-hero h1,
  .hero-copy h1 {
    font-size: clamp(1.7rem, 8vw, 2.35rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .hero-desc,
  .pe-hero p,
  .hero-copy p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  body.pe-hero-locked .hero-top {
    gap: .55rem !important;
    justify-content: flex-start !important;
  }

  body.pe-hero-locked .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: .55rem !important;
    padding-top: 0 !important;
  }

  body.pe-hero-locked .hero-cta,
  body.pe-hero-locked .hero-cta-outline {
    width: 100% !important;
    justify-content: center !important;
  }

  body.pe-hero-locked .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: .55rem !important;
  }

  body.pe-hero-locked .hero-stat {
    min-width: 0 !important;
    padding: .55rem .45rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.035) !important;
  }

  body.pe-hero-locked .hero-stat-val {
    font-size: clamp(1rem, 5.2vw, 1.35rem) !important;
  }

  body.pe-hero-locked .hero-stat-lbl {
    font-size: .54rem !important;
    letter-spacing: .06em !important;
    line-height: 1.25 !important;
  }

  body.pe-hero-locked .hero-stat-sep {
    display: none !important;
  }

  body.pe-hero-locked .scroll-down-btn {
    display: none !important;
  }

  body.pe-hero-locked .ticker-wrap {
    display: flex !important;
    min-height: 42px !important;
    overflow: hidden !important;
  }

  body.pe-hero-locked .ticker-label {
    flex: 0 0 auto !important;
  }

  body.pe-hero-locked .ticker-track {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  body.pe-hero-locked .ticker-item {
    max-width: calc(100vw - 118px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.pe-panel-open .main-wrap {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .75rem .85rem clamp(4rem, 8vh, 5rem) !important;
    overflow: visible !important;
  }

  body.pe-panel-open .pe-panel-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .75rem !important;
    margin-top: .25rem !important;
  }

  body.pe-panel-open .kapat-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  body.pe-panel-open .pe-panel-guide {
    grid-template-columns: 1fr !important;
  }

  .pe-shell,
  .layout,
  .grid,
  .content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .pe-side {
    position: static !important;
  }

  .pe-card-grid,
  .cards-grid,
  .resource-grid,
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) {
  html[data-module="pe"] #menuToggle,
  html[data-module="pe"] .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) {
  html[data-module="pe"] #menuToggle,
  html[data-module="pe"] .menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 1199px) {
  html[data-module="pe"] .ticker-wrap {
    display: none !important;
  }
}