/* Yapay Zeka alt sayfalari - responsive mimari katmani
   0-767px: tek sutun, serbest scroll.
   768-1199px: kontrollu tablet gridleri, serbest scroll.
   1200px+: mevcut PC tasarimina minimum dokunus.
*/

#app,
.page-shell,
.page-wrap,
.content-wrap,
.ek-body,
.kay-body,
.al-body,
.ara-body,
.sss-body,
.sozluk-body,
.page-content,
.panel-content,
.main-wrap {
  min-width: 0;
  max-width: 100%;
}

.mobile-module-extras {
  display: none;
}

.hnav .mobile-return-link,
.header-nav .mobile-return-link {
  display: none;
}

.mod-subnav-inner,
.subnav-inner {
  min-width: 0;
}

@media (max-width: 1199px) {
  #app {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #app {
    display: block !important;
    padding-bottom: 0 !important;
  }

  .page-hero,
  .mod-hero,
  .sozluk-hero,
  .ek-hero,
  .kay-hero,
  .al-hero,
  .ara-hero,
  .sss-hero {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .scroll-down-btn,
  .ticker-wrap {
    display: none !important;
  }

  .mufredat-panel,
  .projeler-panel,
  .sss-panel {
    display: block !important;
  }

  .ph-inner,
  .page-hero-inner,
  .hero-content,
  .toolbar,
  .tb-inner,
  .main,
  .main-wrap,
  .page-content,
  .panel-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .page-hero,
  .sozluk-hero,
  .ek-hero,
  .kay-hero,
  .al-hero,
  .ara-hero,
  .sss-hero {
    padding-inline: clamp(1.25rem, 3vw, 2rem) !important;
  }

  .ph-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr) !important;
    align-items: start !important;
    gap: clamp(1rem, 2vw, 1.4rem) !important;
    padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.25rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem) !important;
  }

  .ph-left,
  .ph-right {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ph-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  .ph-stat {
    min-width: 0 !important;
    width: 100% !important;
  }

  .mod-hero {
    display: grid !important;
    grid-template-columns: minmax(300px, .9fr) minmax(320px, 1fr) !important;
    align-items: center !important;
  }

  .mod-hero .hero-left,
  .mod-hero .hero-right {
    min-width: 0 !important;
  }

  .mod-hero .hero-left {
    padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2.5vw, 2rem) !important;
  }

  .mod-hero .hero-right {
    width: auto !important;
    padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2.5vw, 2rem) !important;
  }

  .konu-grid,
  .proje-grid,
  .term-grid,
  .kay-grid,
  .kg-grid,
  .lk-grid,
  .gh-grid,
  .ara-konu-grid,
  .sss-body {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .al-card-grid,
  .al-list,
  .profil-grid,
  .hedef-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .modul-blok,
  .proje-card,
  .konu-card,
  .gh-kart,
  .term-card,
  .kay-card,
  .al-card,
  .faq-card,
  .tl-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  #app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
  }

  .logo-text,
  .logo-m,
  .logo-s {
    min-width: 0 !important;
  }

  .hright {
    gap: .4rem !important;
    min-width: 0 !important;
  }

  .sb-wrap input {
    display: none !important;
  }

  .btn-bk,
  .back-btn {
    padding-inline: .65rem !important;
    font-size: .68rem !important;
  }

  .hright .back-btn,
  .hright .btn-bk,
  .header-right .btn-ghost {
    display: none !important;
  }

  .hnav .mobile-return-link,
  .header-nav .mobile-return-link {
    display: flex !important;
  }

  .subnav,
  .mod-subnav {
    position: sticky !important;
    top: 60px !important;
  }

  .mod-subnav {
    display: none !important;
  }

  .subnav-inner,
  .mod-subnav-inner {
    padding-inline: .85rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-hero,
  .sozluk-hero,
  .ek-hero,
  .kay-hero,
  .al-hero,
  .ara-hero,
  .sss-hero {
    padding: 1.35rem .95rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .mobile-module-extras {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: .2rem .95rem 1rem !important;
    overflow-x: hidden !important;
  }

  .mme-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    margin-bottom: .75rem !important;
    padding: .45rem .7rem !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    color: var(--primary) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .mme-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .65rem !important;
    width: 100% !important;
  }

  .mme-card {
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    min-width: 0 !important;
    padding: .85rem .75rem !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.045) !important;
    color: var(--text1) !important;
    text-decoration: none !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
  }

  .mme-card i {
    color: var(--primary) !important;
    flex: 0 0 auto !important;
  }

  .mme-card span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .mme-active {
    border-color: rgba(var(--primary-rgb), .35) !important;
    background: rgba(var(--primary-rgb), .12) !important;
  }

  .ph-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.25rem .95rem 1.4rem !important;
    gap: 1rem !important;
    align-items: start !important;
  }

  .ph-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 1rem !important;
  }

  .ph-left,
  .ph-right,
  .ph-desc,
  .genel-ilerleme,
  .gi-body,
  .toolbar,
  .tb-inner,
  .main,
  .main-wrap,
  .page-content,
  .panel-content,
  .content-wrap,
  .page-wrap,
  .page-shell {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .ph-modul-tags {
    display: none !important;
  }

  .ph-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ph-stat,
  .donut-kart {
    min-width: 0 !important;
    width: 100% !important;
    padding: .85rem .55rem !important;
  }

  .donut-wrap {
    width: 54px !important;
    height: 54px !important;
  }

  .ph-chips {
    display: none !important;
  }

  .ph-stat-n {
    font-size: 1.35rem !important;
  }

  .ph-stat-l {
    font-size: .52rem !important;
    letter-spacing: .05em !important;
  }

  .genel-ilerleme {
    padding: .85rem !important;
    gap: .75rem !important;
  }

  .page-hero h1,
  .sozluk-hero h1,
  .ek-hero h1,
  .kay-hero h1,
  .al-hero h1,
  .ara-hero h1,
  .sss-hero h1,
  .mod-hero-h1 {
    font-size: clamp(1.5rem, 8vw, 2.15rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .page-hero p,
  .sozluk-hero p,
  .ek-hero-desc,
  .kay-hero p,
  .al-hero p,
  .ara-hero p,
  .sss-hero p,
  .mod-hero-desc {
    width: 100% !important;
    max-width: 100% !important;
    font-size: .86rem !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .mod-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .mod-hero .hero-left,
  .mod-hero .hero-right {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 1rem .95rem !important;
    overflow-x: hidden !important;
  }

  .mod-timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 1rem !important;
  }

  .mod-step {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: .7rem !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.035) !important;
  }

  .mod-visual {
    width: 64px !important;
    height: 64px !important;
    min-width: 0 !important;
  }

  .mod-circle {
    width: 54px !important;
    height: 54px !important;
  }

  .mod-arc,
  .mod-line {
    display: none !important;
  }

  .mod-label {
    margin-top: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mod-title,
  .mod-desc,
  .mod-label a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .konu-grid,
  .proje-grid,
  .term-grid,
  .kay-grid,
  .kg-grid,
  .lk-grid,
  .gh-grid,
  .ara-konu-grid,
  .sss-body,
  .al-body,
  .va-grid,
  .profil-grid,
  .hedef-grid,
  .sh-sonuc-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .alphabet-grid,
  .harf-grid,
  .filter-row,
  .sozluk-filtre,
  .kay-filtre-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .ek-body,
  .kay-body,
  .al-body,
  .ara-body,
  .sozluk-body,
  .sss-body,
  .page-content,
  .panel-content {
    padding-inline: .95rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .card,
  .modul-blok,
  .konu-card,
  .gh-kart,
  .term-card,
  .proje-card,
  .kay-card,
  .al-card,
  .faq-card,
  .tl-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .modul-kart,
  .modul-card,
  .mb-head,
  .mb-header,
  .mb-body,
  .mb-konu-list,
  .proje-meta,
  .proje-tags,
  .filter-tabs,
  .kategori-tabs,
  .chips,
  .tag-list {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .ph-stats,
  .ph-top,
  .gi-body {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .modul-blok {
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
  }

  .mb-header {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 32px !important;
    grid-template-areas:
      "icon no chev"
      "icon title chev"
      "desc desc desc"
      "tag tag tag"
      "progress progress progress" !important;
    gap: .5rem .8rem !important;
    align-items: center !important;
    padding: 1rem !important;
    min-height: auto !important;
  }

  .mb-icon {
    grid-area: icon !important;
    width: 54px !important;
    height: 54px !important;
    font-size: 1.15rem !important;
  }

  .mb-no {
    grid-area: no !important;
    font-size: .68rem !important;
  }

  .mb-ad {
    grid-area: title !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .mb-desc {
    grid-area: desc !important;
    display: block !important;
    font-size: .82rem !important;
    line-height: 1.5 !important;
    color: var(--text2) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .mb-tag {
    grid-area: tag !important;
    justify-self: start !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .mb-il {
    grid-area: progress !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .6rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mb-il-bar {
    display: block !important;
    height: 9px !important;
    width: 100% !important;
  }

  .mb-chevron {
    grid-area: chev !important;
    justify-self: end !important;
  }

  .mb-body-inner {
    padding: .85rem !important;
  }
}

@media (max-width: 900px) {
  .ph-inner,
  .ph-top,
  .ph-left,
  .ph-right,
  .ph-desc,
  .mod-hero,
  .mod-hero .hero-left,
  .mod-hero .hero-right,
  .mod-timeline {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .ph-desc,
  .mod-hero-desc {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .ph-stats {
    grid-template-columns: 1fr !important;
  }

  .mod-timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    margin-top: 1rem !important;
  }

  .mod-step {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: .7rem !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.035) !important;
  }

  .mod-visual {
    width: 64px !important;
    height: 64px !important;
  }

  .mod-circle {
    width: 54px !important;
    height: 54px !important;
  }

  .mod-arc,
  .mod-line {
    display: none !important;
  }

  .mod-label {
    margin-top: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1199px) {
  .page-title,
  .pt-desc,
  .sec,
  .sec-body,
  .content,
  .lesson-content,
  .page-main,
  .sev-blok,
  .hikaye,
  .gh-grid,
  .gh-kart,
  .lv-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .sec {
    opacity: 1 !important;
    animation: none !important;
  }

  .page-title {
    padding-inline: clamp(.95rem, 3vw, 1.5rem) !important;
  }

  .pt-h1,
  .pt-desc {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .pt-h1 {
    font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .pt-desc,
  .hikaye,
  .gh-baslik,
  .gh-acik {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .gh-grid {
    grid-template-columns: 1fr !important;
  }

  .lv-tabs {
    flex-wrap: wrap !important;
  }

  .mod-timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .mod-step {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: .7rem !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.035) !important;
  }

  .mod-visual {
    width: 64px !important;
    height: 64px !important;
  }

  .mod-circle {
    width: 54px !important;
    height: 54px !important;
  }

  .mod-arc,
  .mod-line {
    display: none !important;
  }

  .mod-label {
    margin-top: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mod-title,
  .mod-desc,
  .mod-label a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .subnav,
  .mod-subnav {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .subnav-inner,
  .mod-subnav-inner {
    max-width: 100vw !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-inline: .75rem !important;
  }

  .sn-bc-current,
  .sn-bc-link {
    min-width: 0 !important;
    max-width: min(62vw, 240px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sn-bc-current {
    flex-shrink: 1 !important;
  }

  .mod-crumb,
  .mod-hero-label,
  .mod-hero-h1,
  .mod-hero-h1 span,
  .mod-hero-desc {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .mod-hero-label {
    letter-spacing: .18em !important;
    line-height: 1.45 !important;
  }

  .mod-hero-h1 {
    font-size: clamp(1.45rem, 7.6vw, 2rem) !important;
    line-height: 1.08 !important;
  }

  .pt-h1 {
    font-size: clamp(1.35rem, 7vw, 1.95rem) !important;
    line-height: 1.12 !important;
  }

  body .mod-hero .mod-timeline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: .7rem !important;
  }

  body .mod-hero .mod-timeline .mod-step {
    flex: none !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 76px !important;
    opacity: 1 !important;
    animation: none !important;
  }

  body .mod-hero .mod-timeline .mod-visual {
    width: 54px !important;
    height: 54px !important;
  }

  body .mod-hero .mod-timeline .mod-circle {
    width: 46px !important;
    height: 46px !important;
  }

  body .mod-hero .mod-timeline .mod-letter {
    display: none !important;
  }

  body .mod-hero .mod-timeline .mod-label {
    display: block !important;
    text-align: left !important;
  }

  body .mod-hero .mod-timeline .mod-title {
    font-size: .88rem !important;
    line-height: 1.25 !important;
  }

  body .mod-hero .mod-timeline .mod-desc {
    font-size: .72rem !important;
  }

  .mod-mobile-topic {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: .75rem !important;
    width: 100% !important;
    padding: .85rem !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-left: 4px solid var(--mtc, var(--primary)) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.72) !important;
    color: var(--text1) !important;
    text-decoration: none !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.08) !important;
  }

  html[data-theme="obsidian"] .mod-mobile-topic,
  html[data-theme="siber"] .mod-mobile-topic,
  html[data-theme="crimson"] .mod-mobile-topic {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.1) !important;
  }

  .mmt-icon {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--mtc, var(--primary)) 18%, transparent) !important;
    color: var(--mtc, var(--primary)) !important;
  }

  .mmt-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: .16rem !important;
  }

  .mmt-no {
    font-size: .58rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: var(--mtc, var(--primary)) !important;
  }

  .mmt-title {
    font-size: .9rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  .mmt-time {
    font-size: .68rem !important;
    color: var(--text3) !important;
    font-weight: 700 !important;
  }

  .mmt-ok {
    color: var(--mtc, var(--primary)) !important;
    justify-self: end !important;
  }
}

/* YZ / RK / MP ortak alt sayfa akisi
   Programlama Egitimi iskeletindeki gibi sayfa ilk acilista tam yuklenir;
   hero veya panel ekrani kilitlemez, normal sayfa scroll'u kullanilir. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.sss-acik,
body.mufredat-acik,
body.panel-acik {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.page-shell,
.page-wrap,
#app,
main,
.mufredat-shell,
.path-shell,
.sozluk-shell,
.sss-shell,
.projeler-shell {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

.page-hero,
.mufredat-hero,
.ogrenme-hero,
.path-hero,
.sozluk-hero,
.sss-hero,
.hero,
.projeler-hero {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

.mufredat-panel,
.path-panel,
.ogrenme-panel,
.sozluk-body,
.sss-body,
.sss-panel,
.projeler-body,
.filter-panel,
.roadmap-body,
.learn-body {
  display: grid !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.sss-panel {
  display: block !important;
}

.scroll-down-btn {
  display: none !important;
}

@media (min-width: 768px) {
  .mufredat-panel,
  .path-panel,
  .ogrenme-panel,
  .sozluk-body,
  .sss-body,
  .projeler-body,
  .roadmap-body,
  .learn-body {
    width: min(1180px, calc(100% - 2rem)) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 767px) {
  .mufredat-panel,
  .path-panel,
  .ogrenme-panel,
  .sozluk-body,
  .sss-body,
  .projeler-body,
  .roadmap-body,
  .learn-body {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding-inline: 1rem !important;
  }

  .page-hero,
  .mufredat-hero,
  .ogrenme-hero,
  .path-hero,
  .sozluk-hero,
  .sss-hero,
  .hero,
  .projeler-hero {
    padding-inline: 1rem !important;
  }
}

/* Yapay Zeka alt sayfalari: mufredat iskeletine yakin kompakt akis */
@media (min-width: 901px) {
  header .header-inner,
  header .h-in {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) !important;
    align-items: center !important;
    gap: clamp(12px, 2vw, 28px) !important;
  }

  header .header-logo-link,
  header .logo-link,
  header .logo {
    justify-self: start !important;
    margin-right: 0 !important;
  }

  header .header-nav,
  header .hnav {
    justify-self: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    margin-inline: auto !important;
  }

  header .header-right,
  header .hright,
  header .header-actions {
    justify-self: end !important;
    margin-left: 0 !important;
  }
}

.page-hero,
.sozluk-hero {
  min-height: 0 !important;
  height: auto !important;
  width: min(1440px, calc(100vw - 32px)) !important;
  margin: 24px auto 14px !important;
  padding: 22px !important;
  border: 2px solid rgba(93, 173, 111, .34) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(8, 15, 32, .12) !important;
}

.page-hero-inner,
.sozluk-hero {
  gap: 18px !important;
}

.page-hero h1,
.sozluk-hero h1 {
  margin-bottom: 10px !important;
}

.page-hero p,
.sozluk-hero p {
  margin-bottom: 14px !important;
}

.mufredat-panel,
.projeler-panel,
.sss-panel,
.sozluk-body {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  width: min(1440px, calc(100vw - 32px)) !important;
  max-width: 1440px !important;
  margin: 0 auto 72px !important;
  border: 2px solid rgba(61, 170, 160, .28) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 18px 44px rgba(8, 15, 32, .1) !important;
  overflow: hidden !important;
}

.toolbar,
.sozluk-filters {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  width: min(1440px, calc(100vw - 32px)) !important;
  max-width: 1440px !important;
  margin: 0 auto 14px !important;
  border: 2px solid rgba(91, 173, 111, .24) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 10px 28px rgba(8, 15, 32, .08) !important;
}

.mufredat-panel > .toolbar,
.projeler-panel > .toolbar,
.sss-panel > .toolbar {
  width: 100% !important;
  margin: 0 !important;
  border-width: 0 0 2px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.main,
.sss-panel .main,
.sozluk-body {
  padding: 18px !important;
}

.modul-kart,
.proje-kart,
.term-card,
.sss-kategori,
.sss-item,
.sss-soru {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(15, 23, 42, .12) !important;
  border-left-width: 6px !important;
  box-shadow: 0 10px 24px rgba(8, 15, 32, .08) !important;
}

.modul-kart,
.proje-kart {
  border-left-color: var(--mc, var(--fm-renk, #3daaa0)) !important;
}

.term-card {
  border-left-color: #5bad6f !important;
}

.sss-kategori,
.sss-item,
.sss-soru {
  border-left-color: var(--kc, #3daaa0) !important;
}

.proje-kart:hover,
.term-card:hover,
.modul-kart:hover,
.sss-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(61, 170, 160, .42) !important;
}

@media (max-width: 720px) {
  .page-hero,
  .sozluk-hero,
  .mufredat-panel,
  .projeler-panel,
  .sss-panel,
  .sozluk-body,
  .toolbar,
  .sozluk-filters {
    width: min(100% - 20px, 720px) !important;
    border-radius: 18px !important;
  }

  .main,
  .sss-panel .main,
  .sozluk-body {
    padding: 12px !important;
  }
}