/* ═══════════════════════════════════════════════
   GTC DARK THEME — BINANCE STYLE
   Version 2 — full !important coverage,
   uniform dark palette, no mixed blue/white.
   ═══════════════════════════════════════════════ */

/* ─── 1. BINANCE-STYLE COLOR PALETTE ─── */
:root {
  /* Binance-inspired palette */
  --bnb-bg:      #0B0E11;
  --bnb-surface: #1E2026;
  --bnb-card:    #2B2F36;
  --bnb-hover:   #363B45;
  --bnb-border:  #2B2F36;
  --bnb-text:    #EAECEF;
  --bnb-muted:   #848E9C;
  --bnb-dim:     #5E6673;
  --bnb-gold:    #E6B44A;
  --bnb-gold2:   #C8961F;
  --bnb-gold-bg: rgba(230,180,74,0.10);
  --bnb-gold-glow: rgba(230,180,74,0.18);

  /* Override all site tokens */
  --navy:             var(--bnb-bg);
  --white:            var(--bnb-text);
  --light:            var(--bnb-bg);
  --text:             var(--bnb-text);
  --gold:             var(--bnb-gold);
  --accent:           var(--bnb-gold);
  --gray:             var(--bnb-muted);
  --border:           var(--bnb-border);

  --clr-bg:           var(--bnb-bg);
  --clr-bg-surface:   var(--bnb-surface);
  --clr-heading:      var(--bnb-text);
  --clr-text:         var(--bnb-text);
  --clr-text-muted:   var(--bnb-muted);
  --clr-border:       var(--bnb-border);
  --clr-label:        var(--bnb-gold);

  --badge-bg:          var(--bnb-gold-bg);
  --badge-color:       var(--bnb-gold);
  --badge-border:      rgba(230,180,74,0.25);

  --btn-fill-bg:            var(--bnb-gold);
  --btn-fill-color:         #0B0E11;
  --btn-fill-bg-hover:      #fff;
  --btn-fill-color-hover:   #0B0E11;
  --btn-ghost-border:       rgba(230,180,74,0.5);
  --btn-ghost-text:         var(--bnb-gold);
  --shadow-card:            0 4px 24px rgba(0,0,0,0.5);
}

/* ─── 2. BODY & BASE ─── */
body {
  background: var(--bnb-bg) !important;
  color: var(--bnb-text) !important;
}

/* ─── 3. FORCE ALL SECTIONS DARK — override inline styles ─── */
section,
div[data-theme],
section[data-theme],
[data-theme="light"],
[data-theme="dark"],
.sec-pad,
.sec-3cards,
.sec-2col,
.sec-services,
.sec-blog,
.sec-programs,
.cta-band,
.legal-banner,
.stats-strip,
.books-band,
.gallery-band {
  background-color: var(--bnb-surface) !important;
  color: var(--bnb-text) !important;
}

/* Subtle alternation for visual separation */
.page-hero,
.stats-strip,
.books-band,
.sec-blog,
section:nth-child(odd):not(.page-hero) {
  background-color: var(--bnb-bg) !important;
}

section:nth-child(even):not(.stats-strip):not(.page-hero) {
  background-color: var(--bnb-surface) !important;
}

/* Dark & Navy explicit sections */
section[style*="background:var(--navy)"],
section[style*="background: var(--navy)"],
div[style*="background:var(--navy)"],
div[style*="background: var(--navy)"] {
  background-color: var(--bnb-bg) !important;
}
section[style*="background:var(--white)"],
section[style*="background: var(--white)"],
section[style*="background:#fff"],
div[style*="background:var(--white)"],
div[style*="background: var(--white)"],
div[style*="background:#fff"],
div[style*="background: #fff"] {
  background-color: var(--bnb-surface) !important;
}

/* ─── 4. HEADER ─── */
.site-header {
  background: rgba(11,14,17,0.98) !important;
  border-bottom-color: rgba(230,180,74,0.15) !important;
}

/* ─── 5. NAVIGATION ─── */
.desktop-nav a {
  color: rgba(234,236,239,0.7) !important;
}
.desktop-nav a:hover,
.desktop-nav a.nav-active {
  color: var(--bnb-gold) !important;
}
/* CTA button: dark text on gold — must override the .desktop-nav a rule */
.desktop-nav .nav-cta,
.desktop-nav .nav-cta:hover {
  color: #0B0E11 !important;
  font-weight: 800 !important;
}
.nav-dropdown {
  background: var(--bnb-surface) !important;
  border-color: var(--bnb-border) !important;
}
.nav-dropdown a {
  color: var(--bnb-muted) !important;
}
.nav-dropdown a:hover {
  color: var(--bnb-gold) !important;
  background: var(--bnb-card) !important;
}

/* ─── 6. MOBILE NAV ─── */
.mobile-nav {
  background: var(--bnb-bg) !important;
  border-left: 1px solid var(--bnb-border) !important;
}
.mobile-nav a {
  color: var(--bnb-muted) !important;
  border-bottom-color: var(--bnb-border) !important;
}
.mobile-nav a:hover { color: var(--bnb-gold) !important; }

/* ─── 7. HERO ─── */
.page-hero {
  background: linear-gradient(135deg, #0B0E11 0%, #161B22 100%) !important;
}
@media (min-width: 769px) {
  .page-hero {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: 30px !important;
    padding-bottom: 0 !important;
  }
  .hero-inner {
    margin-bottom: 0 !important;
    align-items: stretch !important;
    min-height: 560px !important;
  }
  .hero-text {
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-bottom: 0 !important;
  }
  .photo-col {
    align-self: stretch !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
    justify-content: flex-end !important;
  }
  .photo-col img {
    width: var(--photo-w) !important;
    height: calc(100% + 50px) !important;
    margin-top: -50px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
  /* Desktop: show fitted desktop lines, hide mobile lines */
  .lead-line     { display: none !important; }
  .desk-lead-line { display: block; white-space: nowrap; line-height: 1.6; }
  /* Badge: поднять весь стек hero-text на 150px */
  .hero-text .badge {
    margin-top: -170px !important;
  }
  .stats-strip {
    margin-top: 0 !important;
  }
  /* Search bar: фиксированная ширина */
  .hero-search-wrap { width: 620px !important; max-width: none !important; }
  .hero-search-bar  { max-width: none !important; }
}
/* Desktop lines hidden by default (mobile shows them via mobile media query) */
.desk-lead-line { display: none; }
.hero-lead { color: rgba(234,236,239,0.88) !important; }

/* ─── 8. STATS STRIP ─── */
.stats-strip {
  background: #0B0E11 !important;
  border-top-color: rgba(230,180,74,0.12) !important;
  border-bottom-color: rgba(230,180,74,0.12) !important;
}
.stat-num { color: var(--bnb-gold) !important; }
.stat-label { color: var(--bnb-dim) !important; font-size: 0.63rem !important; }
.stat-div { background: rgba(230,180,74,0.12) !important; }

/* ─── 9. CARDS ─── */
.card {
  background: var(--bnb-card) !important;
  border-top-color: var(--bnb-border) !important;
  color: var(--bnb-text) !important;
}
.card:hover {
  background: var(--bnb-hover) !important;
  border-top-color: var(--bnb-gold) !important;
}
.card h3 { color: var(--bnb-text) !important; }
.card p { color: var(--bnb-muted) !important; }
.card-label { color: var(--bnb-gold) !important; }
.card-link { color: var(--bnb-text) !important; }
.card:hover .card-link { color: var(--bnb-gold) !important; }

/* Service cards */
.svc-card {
  background: var(--bnb-card) !important;
  border-color: var(--bnb-border) !important;
  color: var(--bnb-text) !important;
}
.svc-card:hover {
  background: var(--bnb-hover) !important;
  border-color: var(--bnb-gold) !important;
  box-shadow: 0 8px 32px rgba(230,180,74,0.1) !important;
}
.svc-card h4 { color: var(--bnb-text) !important; }
.svc-card p { color: var(--bnb-muted) !important; }
.svc-card-label { color: var(--bnb-gold) !important; }
.svc-card.active {
  border-top-color: var(--bnb-gold) !important;
  background: rgba(230,180,74,0.06) !important;
}

/* Blog cards */
.blog-card {
  background: var(--bnb-card) !important;
  border-color: var(--bnb-border) !important;
  color: var(--bnb-text) !important;
}
.blog-card:hover {
  background: var(--bnb-hover) !important;
  border-color: var(--bnb-gold) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.blog-card-title { color: var(--bnb-text) !important; }
.blog-card-excerpt { color: var(--bnb-muted) !important; }
.blog-card-cat { color: var(--bnb-gold) !important; }
.blog-card-read { color: var(--bnb-gold) !important; }
.blog-card-footer {
  border-top-color: var(--bnb-border) !important;
  color: var(--bnb-dim) !important;
}

/* ─── 10. BLOG GRID — responsive fix ─── */
.blog-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  .blog-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  .blog-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 11. SERVICES GRID — fix 6 items ─── */
.svc-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  .svc-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 12. FILTER BAR ─── */
.filter-bar {
  background: var(--bnb-surface) !important;
  border-bottom-color: var(--bnb-border) !important;
}
.filter-btn {
  color: var(--bnb-muted) !important;
  border-color: var(--bnb-border) !important;
  background: transparent !important;
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--bnb-gold-bg) !important;
  border-color: var(--bnb-gold) !important;
  color: var(--bnb-gold) !important;
}

/* ─── 13. HEADINGS ─── */
h1, h2, h3, h4, h5, h6,
.sec-h2, .hero-h1, .pg-h1 {
  color: var(--bnb-text) !important;
}
/* Hero H1: gold on ALL pages — matches book style */
.hero-h1, .hero-h1 em,
.pg-h1, .pg-h1 em {
  color: var(--bnb-gold) !important;
}
.sec-sub, p {
  color: var(--bnb-muted) !important;
}
.hero-lead {
  color: rgba(234,236,239,0.88) !important;
}

/* Don't override gold/accent headings */
.gold-text, [style*="color:var(--gold)"],
[style*="color: var(--gold)"],
[style*="color:var(--accent)"] {
  color: var(--bnb-gold) !important;
}

/* ─── 14. BADGE ─── */
.badge {
  background: var(--bnb-gold-bg) !important;
  color: var(--bnb-gold) !important;
  border-color: rgba(230,180,74,0.25) !important;
}
.badge.on-light {
  background: var(--bnb-gold-bg) !important;
  color: var(--bnb-gold) !important;
}

/* ─── 15. FOOTER ─── */
.site-footer {
  background: #0B0E11 !important;
  border-top: 1px solid var(--bnb-border) !important;
  color: var(--bnb-muted) !important;
}
.footer-inner { background: transparent !important; }
.footer-bottom {
  border-top-color: var(--bnb-border) !important;
}
.footer-bottom p { color: var(--bnb-dim) !important; }
.footer-link { color: var(--bnb-muted) !important; }
.footer-link:hover { color: var(--bnb-gold) !important; }
.footer-col-title { color: var(--bnb-gold) !important; }
.footer-desc { color: var(--bnb-dim) !important; }
.social-btn {
  background: var(--bnb-card) !important;
  border-color: var(--bnb-border) !important;
  color: var(--bnb-muted) !important;
}
.social-btn:hover {
  background: var(--bnb-gold-bg) !important;
  border-color: var(--bnb-gold) !important;
  color: var(--bnb-gold) !important;
}

/* ─── 16. FORMS ─── */
input, textarea, select,
.rev-field input, .rev-field select, .rev-field textarea,
.form-group input, .form-group select, .form-group textarea {
  background: var(--bnb-card) !important;
  border-color: var(--bnb-border) !important;
  color: var(--bnb-text) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--bnb-gold) !important;
  box-shadow: 0 0 0 3px var(--bnb-gold-glow) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--bnb-dim) !important;
}
label { color: var(--bnb-muted) !important; }

.rev-form-wrap,
.reg-form-inner {
  background: var(--bnb-surface) !important;
  border-color: var(--bnb-border) !important;
  color: var(--bnb-text) !important;
}

/* ─── 17. PROGRAM CARDS / PRICE CARDS ─── */
.price-card,
.prog-block,
.prog-item {
  background: var(--bnb-card) !important;
  border-color: var(--bnb-border) !important;
  color: var(--bnb-text) !important;
}
.price-card.featured {
  background: rgba(230,180,74,0.08) !important;
  border-color: var(--bnb-gold) !important;
}
#programs {
  background: var(--bnb-bg) !important;
}

/* ─── 18. REVIEWS / TESTIMONIALS ─── */
.review-card {
  background: var(--bnb-card) !important;
  border-color: var(--bnb-border) !important;
  color: var(--bnb-text) !important;
}
.rev-text { color: var(--bnb-muted) !important; }
.rev-author { color: var(--bnb-text) !important; }

/* ─── 19. TIMELINE ─── */
.timeline-list::before { background: rgba(230,180,74,0.2) !important; }
.timeline-list li { color: var(--bnb-muted) !important; }
.timeline-list li::before {
  background: var(--bnb-gold) !important;
  box-shadow: 0 0 0 4px var(--bnb-surface) !important;
}
.timeline-list strong { color: var(--bnb-gold) !important; }
.timeline-list span { color: var(--bnb-muted) !important; }
.timeline-list li:hover span { color: var(--bnb-text) !important; }

/* ─── 20. LIST BULLETS — unified gold ─── */
ul li::marker { color: var(--bnb-gold); }
ul li::before { background-color: var(--bnb-gold) !important; }

/* ─── 21. DIPLOMA / GALLERY BAND ─── */
.gallery-band {
  background: var(--bnb-surface) !important;
}
.diploma-gallery { background: transparent !important; }

/* ─── 22. BOOKS BAND ─── */
.books-band {
  background: var(--bnb-bg) !important;
  border-color: rgba(230,180,74,0.12) !important;
}
.book-card-row { background: var(--bnb-card) !important; }
.book-spine { background: var(--bnb-gold) !important; }
.book-card-tag {
  background: var(--bnb-gold-bg) !important;
  color: var(--bnb-gold) !important;
  border-color: rgba(230,180,74,0.2) !important;
}

/* ─── 23. CTA BAND / LEGAL BANNER ─── */
.cta-band, .legal-banner {
  background: var(--bnb-bg) !important;
  border-color: var(--bnb-border) !important;
}
.cta-band h2, .legal-banner h2 { color: var(--bnb-text) !important; }
.cta-band p, .legal-banner p { color: var(--bnb-muted) !important; }

/* ─── 24. PAGE-SPECIFIC: TEHSIL / PROGRAMS ─── */
section#diplomas,
section#students,
section#reviewFormSection,
section#programs,
section#reviews,
section#registration {
  background: var(--bnb-bg) !important;
}
section#diplomas *,
section#students * {
  color: inherit;
}

.reg-discount {
  background: var(--bnb-gold-bg) !important;
  border-color: rgba(230,180,74,0.3) !important;
}
.rev-success {
  background: rgba(14,203,129,0.1) !important;
  border-color: rgba(14,203,129,0.3) !important;
  color: #0ECB81 !important;
}

/* ─── 25. SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bnb-bg); }
::-webkit-scrollbar-thumb { background: var(--bnb-card); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bnb-gold2); }

/* ─── 26. HR / DIVIDERS ─── */
hr {
  border-color: var(--bnb-border) !important;
  background: var(--bnb-border) !important;
}

/* ─── 27. SITE SEARCH WIDGET (in header) ─── */
.site-search-wrap { position: relative; margin-left: 12px; }
#site-si {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bnb-border) !important;
  border-radius: 4px;
  color: var(--bnb-text) !important;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 34px 6px 12px;
  width: 180px;
  outline: none;
  transition: border-color .2s, width .3s, background .2s;
}
#site-si:focus {
  border-color: var(--bnb-gold) !important;
  background: rgba(255,255,255,0.1) !important;
  width: 240px;
}
#site-si::placeholder { color: var(--bnb-dim) !important; }
.site-search-ico { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--bnb-dim); font-size: 14px; pointer-events: none; }
#site-sd {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 360px;
  background: var(--bnb-surface) !important;
  border: 1px solid var(--bnb-border) !important;
  border-radius: 6px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 2000;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
#site-sd.on { display: block; }
.ssr { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background .15s; }
.ssr:last-child { border-bottom: none; }
.ssr:hover { background: var(--bnb-card) !important; }
.ssr-title { font-size: 13px; font-weight: 600; color: var(--bnb-text); margin-bottom: 2px; }
.ssr-snip { font-size: 11px; color: var(--bnb-muted); line-height: 1.5; }
.ssr-sub { font-size: 10px; color: var(--bnb-gold); margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
.ssr mark { background: rgba(230,180,74,0.25); color: #fff; border-radius: 2px; }
@media (max-width: 900px) { .site-search-wrap { display: none; } }

/* ─── 28. HERO SEARCH BAR ─── */
.hero-search-bar {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bnb-border);
  border-radius: 6px;
  max-width: 560px;
  margin: 28px 0 0;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.hero-search-bar:focus-within {
  border-color: var(--bnb-gold);
  box-shadow: 0 0 0 3px var(--bnb-gold-glow);
}
#hero-si {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: var(--bnb-text) !important;
  font-size: 15px;
  font-family: inherit;
  padding: 12px 16px;
  outline: none !important;
  box-shadow: none !important;
}
#hero-si::placeholder { color: var(--bnb-dim) !important; }
.hero-search-btn {
  background: var(--bnb-gold) !important;
  border: none;
  color: #0B0E11 !important;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.hero-search-btn:hover { background: #fff !important; }
#hero-sd {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bnb-surface) !important;
  border: 1px solid var(--bnb-border) !important;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 500;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
#hero-sd.on { display: block; }
.hero-search-wrap { position: relative; max-width: 560px; }
@media (max-width: 600px) {
  .hero-search-bar { max-width: 100%; }
  .hero-search-btn span { display: none; }
  .hero-search-btn::after { content: none; }
  .search-icon { display: block; }
}
/* Desktop: hide SVG icon, show text only */
@media (min-width: 601px) {
  .search-icon { display: none; }
}
/* ─── Hero H1: two-line fit on mobile ─── */
@media (max-width: 768px) {
  /* h1 font-size 20px → PSİXOLOGİYA MƏKTƏBİ fits on one line */
  .hero-h1 { font-size: 20px !important; line-height: 1.15 !important; }
  .h1-w1 {
    display: block;
    white-space: nowrap;
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .h1-w2 { display: block; line-height: 1.15; }
}

/* ─── Responsive line breaks: br-mob / br-desk ─── */
.br-mob { display: none; }
.br-desk { display: inline; }
@media (max-width: 768px) {
  .br-mob { display: inline; }
  .br-desk { display: none; }
}

/* ─── diploma-label: line-height fix (--type-label-line:1 causes overlap) ─── */
.diploma-label {
  line-height: 1.5 !important;
  font-size: 1rem !important;
}

/* ─── 29. MOBILE RESPONSIVE ADJUSTMENTS ─── */
@media (max-width: 768px) {
  /* Hero photo: cover mode — face fills the column, crop sides */
  .photo-col {
    padding: 0 !important;
    margin-left: -24px !important;
    width: calc(100% + 48px) !important;
  }
  .photo-col img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
    transform: translateY(-40px) scale(1.3) !important;
    transform-origin: top center !important;
  }

  /* About section portrait: limit to match hero face size */
  .about-img {
    max-height: 240px !important;
    overflow: hidden !important;
  }
  .about-img img {
    object-fit: cover !important;
    object-position: top center !important;
    width: 100% !important;
    height: 240px !important;
  }

  /* Badge positioning */
  .hero-text .badge {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }
  /* Extra gap between badge and H1 — done on H1 side, not badge side,
     so it doesn't affect layout during JS measurement */
  .hero-h1 { margin-top: 15px !important; }

  /* Section headings on mobile */
  .sec-h2 { font-size: 1.6rem !important; }
  /* hero-lead: each .lead-line sized by JS to match H1 width */
  .hero-lead { line-height: 1.6 !important; margin-top: 20px !important; }
  .lead-line { display: block; text-align: center; }
  .eco-h2-w1, .eco-h2-w2 { display: block; text-align: center; white-space: nowrap; line-height: 1.1; }
  .eco-lead-line { display: block; text-align: center; }
  .page-hero { padding-bottom: 65px !important; }
  .stats-strip { margin-top: 0 !important; }

  /* Stacked layout for cards */
  .grid-3 { grid-template-columns: 1fr !important; }

  /* Force about section dark */
  .sec-2col { background: var(--bnb-surface) !important; }

  /* Timeline on mobile */
  .about-content { padding-left: 0 !important; }
}

/* ─── 30. PAGE SECTION BACKGROUNDS — OVERRIDE ALL INLINE COLORS ─── */

/* Matching sections that have inline background via var tokens */
[style*="--navy"] { --navy: var(--bnb-bg) !important; }
[style*="--white"] { --white: var(--bnb-text) !important; }
[style*="--light"] { --light: var(--bnb-bg) !important; }

/* Any section with explicit inline white/light overrides */
section[style], div[style] {
  --navy:  var(--bnb-bg);
  --white: var(--bnb-text);
  --light: var(--bnb-bg);
}

/* ─── Footer address ─── */
.footer-address {
  font-size: 0.75rem;
  color: var(--bnb-dim);
  margin: 8px 0 0;
  line-height: 1.5;
}