@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@300;400;500;600;700;800&display=swap');

.landing-page {
  --ink: #10131d;
  --muted: #697184;
  --paper: #f5f5f2;
  --line: rgba(16, 19, 29, .14);
  --violet: var(--primary);
  --page-gutter: 26px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', Arial, sans-serif;
}

html[data-theme='dark'] .landing-page { --ink: #edf7ff; --muted: #9eb3c8; --paper: #0b1220; --line: rgba(190,220,240,.18); background: #0b1220; color: #edf7ff; }
html[data-theme='dark'] .landing-page .intro-section, html[data-theme='dark'] .landing-page .cta-section { background: #0b1220; }
html[data-theme='dark'] .landing-page .flow-section { background: #101b2d; }
html[data-theme='dark'] .landing-page .principle-card { background: #121d2d; color: #edf7ff; }
html[data-theme='dark'] .landing-page .principle-card-dark { background: #07101f; }
html[data-theme='dark'] .landing-page .principle-card-accent { background: #123b72; }
html[data-theme='dark'] .landing-page .site-header.on-light .brand, html[data-theme='dark'] .landing-page .site-header.on-light .site-nav a, html[data-theme='dark'] .landing-page .site-header.on-light .text-link { color: #edf7ff; }

.landing-page [id] { scroll-margin-top: 0; }

.site-header { align-items: center; background: transparent; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); min-height: 84px; padding: 26px; position: fixed; top: 0; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .2s ease; width: 100%; z-index: 10; }
.brand { align-items: center; color: #fff; display: inline-flex; font-size: 20px; font-weight: 800; gap: 10px; grid-column: 1; justify-self: start; letter-spacing: -1px; }
.brand:hover { color: #fff; }
.brand-logo { display: block; height: 30px; object-fit: contain; width: 30px; }
.site-nav { display: flex; gap: 34px; left: 50%; margin: 0; position: absolute; transform: translateX(-50%); }
.site-nav a, .text-link { color: #fff; font-size: 13px; font-weight: 700; }
.site-nav a:hover, .text-link:hover { color: #62d9ed; }
.site-header.on-light .brand, .site-header.on-light .site-nav a, .site-header.on-light .text-link { color: var(--ink); }
.site-header.on-light .brand:hover, .site-header.on-light .site-nav a:hover, .site-header.on-light .text-link:hover { color: var(--violet); }
.landing-page .site-header .brand,
.landing-page .site-header .site-nav a {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.landing-page .site-header .brand:hover,
.landing-page .site-header .site-nav a:hover { color: #fff; opacity: .75; }
.landing-page .site-header.on-light .brand:hover,
.landing-page .site-header.on-light .site-nav a:hover { color: var(--ink); }
html[data-theme='dark'] .landing-page .site-header.on-light .brand:hover,
html[data-theme='dark'] .landing-page .site-header.on-light .site-nav a:hover { color: #edf7ff; }
.site-header.on-light, .site-header.on-dark { background: transparent; border-bottom: 0; box-shadow: none; }
.site-header.on-light .theme-switch-icon { color: var(--ink); }
.site-header.on-dark .theme-switch-icon { color: #fff; }
.site-header.on-light .theme-switch { border-color: var(--ink); color: var(--ink); }
.site-header.on-dark .theme-switch { border-color: #fff; color: #fff; }
.site-header.on-light .preference-controls { border-right-color: rgba(16,19,29,.2); }
.site-header.on-dark .preference-controls { border-right-color: rgba(255,255,255,.2); }
.header-right { align-items: center; display: flex; gap: 18px; grid-column: 3; justify-self: end; }
.header-socials { align-items: center; display: flex; gap: 14px; height: 24px; }
.header-socials a { align-items: center; color: #fff; display: inline-flex; height: 24px; justify-content: center; transition: color .2s ease, transform .2s ease; width: 24px; }
.header-socials a:hover { color: #62d9ed; transform: translateY(-1px); }
.header-socials img { display: block; flex: 0 0 21px; height: 21px; width: 21px; filter: brightness(0) invert(1); }
.site-header.on-light .header-socials img { filter: none; }
html[data-theme='dark'] .landing-page .site-header .header-socials img { filter: brightness(0) invert(1); }
.header-social-divider { background: rgba(255,255,255,.22); display: block; height: 36px; width: 1px; }
.site-header.on-light .header-socials a { color: var(--ink); }
.site-header.on-light .header-socials a:hover { color: var(--violet); }
.site-header.on-light .header-social-divider { background: rgba(16,19,29,.2); }
.header-actions { align-items: center; display: flex; gap: 18px; }
.site-header .preference-controls { align-items: center; border: 0; display: inline-flex; height: 36px; margin: 0; order: 0; padding: 0; }
.site-header .preference-button { min-height: 36px; }
.site-header .theme-switch { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.header-actions .button-small { min-height: 42px; padding-inline: 20px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 3px; display: inline-flex; font-size: 13px; font-weight: 800; justify-content: center; min-height: 50px; padding: 0 22px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.landing-page a.button { background-image: none; background-clip: border-box; -webkit-background-clip: border-box; -webkit-text-fill-color: currentColor; }
.button:hover { transform: none; }
.button-small { min-height: 38px; padding: 0 16px; }
.button-light { background: var(--ink); color: #fff; }
.button-light:hover { background: var(--violet); color: #fff; }
html[data-theme='dark'] .landing-page .button-light { color: #07101f; }
html[data-theme='dark'] .landing-page .button-light:hover { color: #fff; }
.button-primary { background: var(--violet); color: #fff; }
.button-primary:hover { background: #5747eb; color: #fff; }
.button-ghost { border-color: #fff; color: #fff; }
.button-ghost:hover { background: transparent; color: var(--ink); }
.button-ghost-dark { border-color: var(--line); color: var(--ink); }
.button-ghost-dark:hover { background: var(--ink); color: #fff; }

.hero { background: #111527; color: #fff; display: grid; height: 100svh; max-height: 100svh; min-height: 100svh; overflow: hidden; position: relative; }
.hero::before { background: linear-gradient(90deg, #101321 0%, rgba(16,19,33,.89) 33%, rgba(16,19,33,.25) 72%, rgba(16,19,33,.35) 100%); content: ''; inset: 0; position: absolute; z-index: 1; }
html[data-theme='light'] .landing-page .hero { background: #eaf5fc; color: #10131d; }
html[data-theme='light'] .landing-page .hero::before { background: linear-gradient(90deg, rgba(234,245,252,.94) 0%, rgba(234,245,252,.76) 33%, rgba(234,245,252,.18) 72%, rgba(234,245,252,.28) 100%); }
html[data-theme='light'] .landing-page .eyebrow { color: #2869df; }
html[data-theme='light'] .landing-page .hero-description { color: #304c6b; }
html[data-theme='light'] .landing-page .hero-description-arrow { color: #304c6b; }
html[data-theme='light'] .landing-page .button-ghost { border-color: rgba(16,19,29,.28); color: #10131d; }
html[data-theme='light'] .landing-page .button-ghost:hover { background: transparent; color: #10131d; }
.hero-inner { align-items: center; display: flex; height: 100%; padding: 26px; position: relative; width: 100%; z-index: 2; }
.hero-copy { align-self: center; display: flex; flex-direction: column; min-width: 0; width: min(820px, calc(100vw - 52px)); }
.eyebrow, .section-kicker { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: #62d9ed; margin: 0 0 0; order: 2; }
.hero h1 { font-feature-settings: 'kern'; font-size: clamp(56px,6.8vw,112px); font-kerning: normal; font-weight: 500; letter-spacing: -.02em; line-height: 1.06; max-width: 100%; order: 1; padding-top: .06em; text-transform: uppercase; word-spacing: .06em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-description { align-items: center; color: #cbd0dc; display: grid; font-size: 14px; font-weight: 500; gap: 14px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); line-height: 1.35; margin: 8px 0 0; max-width: 720px; order: 3; }
.hero-description p { margin: 0; text-align: left; }.hero-description-arrow { color: inherit; font-size: 25px; font-weight: 500; line-height: 1; transform: translateX(-8px); }
.hero-actions { bottom: 26px; display: flex; flex-direction: column; gap: 12px; left: 26px; max-width: calc(100vw - 52px); position: absolute; width: 292px; }
.hero-actions-copy { color: #cbd0dc; font-size: 13px; line-height: 1.45; margin: 0; max-width: 292px; }
.hero-action-buttons { display: flex; gap: 12px; max-width: 100%; width: max-content; }
html[data-theme='light'] .landing-page .hero-actions-copy { color: #304c6b; }
.hero-signature { bottom: 26px; color: #fff; position: absolute; right: 26px; text-align: right; z-index: 2; }
.hero-signature p { color: #62d9ed; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .12em; margin: 0 0 4px; text-transform: uppercase; }
.hero-signature strong { display: block; font-size: clamp(26px,2.8vw,44px); font-weight: 500; letter-spacing: -.055em; line-height: .9; }
html[data-theme='light'] .landing-page .hero-signature { color: #10131d; }
html[data-theme='light'] .landing-page .hero-signature p { color: #2869df; }
.hero-art { background: url('../../images/landing-study-planner-ultra.png') center / cover no-repeat; inset: 0; position: absolute; }
html[data-theme='light'] .landing-page .hero-art { background-image: url('../../images/landing-study-planner-light.png'); }

.intro-section { display: flex; flex-direction: column; height: 100svh; justify-content: center; min-height: 100svh; padding: 140px clamp(24px,9vw,144px); }
.section-kicker { color: var(--violet); margin-bottom: 24px; }
.section-heading { align-items: end; display: grid; gap: 70px; grid-template-columns: 1.4fr .8fr; }
.section-heading h2, .flow-sticky-heading h2, .institution-section h2, .cta-section h2 { font-size: clamp(38px,5vw,70px); font-weight: 500; letter-spacing: -.065em; line-height: 1; }
.section-heading p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 5px; max-width: 430px; }
.principles-grid { display: grid; gap: 1px; grid-template-columns: repeat(3,1fr); margin-top: 92px; }
.principle-card { background: #fff; display: flex; flex-direction: column; min-height: 320px; padding: 31px; }
.card-index { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; }
.principle-card h3 { font-size: 25px; font-weight: 600; letter-spacing: -.04em; margin-top: auto; }
.principle-card p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 12px; max-width: 260px; }
.principle-card-dark { background: var(--ink); color: #fff; }.principle-card-dark .card-index,.principle-card-dark p { color: #aab1c0; }.principle-card-accent { background: #dcd7ff; }

.flow-section { align-items: center; background: #eaeae6; display: grid; height: 100svh; gap: 10vw; grid-template-columns: .9fr 1.1fr; min-height: 100svh; padding: 140px clamp(24px,9vw,144px); }
.flow-sticky-heading { align-self: start; position: sticky; top: 105px; }.flow-list { border-top: 1px solid var(--line); }
.flow-item { border-bottom: 1px solid var(--line); display: grid; gap: 24px; grid-template-columns: 70px 1fr; padding: 34px 0 39px; }.flow-item > span { color: var(--violet); font-family: 'DM Mono', monospace; font-size: 12px; }.flow-item h3 { font-size: 27px; font-weight: 600; letter-spacing: -.045em; }.flow-item p { color: var(--muted); font-size: 14px; line-height: 1.75; margin-top: 11px; max-width: 420px; }

.institution-section { background: #161729; color: #f6f5f4; display: grid; gap: 10vw; grid-template-columns: 1.2fr .8fr; height: 100svh; min-height: 100svh; padding: 140px clamp(24px,9vw,144px); }.institution-section .section-kicker { color: #aca3ff; }.institution-content { align-self: end; }.institution-content p { color: #b7bbca; font-size: 16px; line-height: 1.8; max-width: 380px; }.inline-arrow-link { border-bottom: 1px solid #aaa4ff; color: #fff; display: inline-flex; font-size: 14px; font-weight: 800; gap: 22px; margin-top: 36px; padding-bottom: 9px; }.inline-arrow-link span { color: #aaa4ff; }.inline-arrow-link:hover { color: #aaa4ff; }

.cta-section { align-items: center; background: #f8f8f6; display: flex; flex-direction: column; height: 100svh; justify-content: center; min-height: 100svh; padding: 160px 24px; text-align: center; }.cta-section h2 { max-width: 860px; }.cta-section > p:not(.section-kicker) { color: var(--muted); font-size: 16px; margin-top: 24px; }.cta-actions { display: flex; gap: 12px; margin-top: 39px; }

.site-footer { background: #10131d; color: #fff; padding: 54px clamp(24px,5vw,76px) 26px; }.footer-main { display: grid; gap: 40px; grid-template-columns: 1.8fr repeat(3,1fr); padding-bottom: 48px; }.brand-footer { color: #fff; }.brand-footer:hover { color: #fff; }.footer-brand-block p { color: #a6adbd; font-size: 14px; line-height: 1.7; margin-top: 20px; max-width: 270px; }.footer-contact { color: #9cdff1; display: inline-block; font-size: 12px; margin-top: 20px; }.footer-contact:hover { color: #fff; }.footer-column { display: flex; flex-direction: column; gap: 11px; }.footer-column h2 { color: #7f87a0; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .12em; margin-bottom: 9px; text-transform: uppercase; }.footer-column a { color: #d4d8e2; font-size: 13px; }.footer-column a:hover { color: #62d9ed; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); color: #8c94a6; display: flex; font-family: 'DM Mono', monospace; font-size: 10px; justify-content: space-between; letter-spacing: .05em; padding-top: 22px; text-transform: uppercase; }.footer-bottom div { display: flex; gap: 22px; }.footer-bottom a { color: #c5cad5; }.footer-bottom a:hover { color: #fff; }

@media (max-width: 1200px) { .hero-copy { width: min(760px, calc(100vw - 52px)); }.hero h1 { font-size: clamp(54px,7vw,100px); } }
@media (max-width: 800px) { .site-header { padding: 26px; }.site-nav { display: none; }.header-right { gap: 13px; }.header-socials { gap: 10px; }.header-socials a { height: 22px; width: 22px; }.header-socials img { flex-basis: 20px; height: 20px; width: 20px; }.header-social-divider { height: 32px; }.site-header .theme-switch { height: 36px; min-width: 36px; width: 36px; border-radius: 50%; }.hero h1 { font-size: clamp(46px,12vw,86px); }.hero h1 span { white-space: normal; }.hero::before { background: linear-gradient(180deg,rgba(16,19,33,.82),rgba(16,19,33,.7) 60%,rgba(16,19,33,.9)); }.hero-art { background-position: 61% center; opacity: .72; }.hero-inner { align-items: center; }.hero-copy { width: calc(100vw - 36px); }.hero-description { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }.hero-actions { bottom: 18px; left: 18px; max-width: calc(100vw - 36px); right: auto; width: 292px; }.hero-actions-copy { max-width: 292px; }.hero-action-buttons { flex-wrap: wrap; }.hero-signature { bottom: 18px; right: 18px; }.hero-signature strong { font-size: clamp(24px,6vw,36px); }.hero-signature p { font-size: 7px; }.intro-section,.flow-section,.institution-section { height: auto; min-height: 100svh; padding: 90px 24px; }.section-heading,.flow-section,.institution-section { grid-template-columns: 1fr; gap: 42px; }.principles-grid { grid-template-columns: 1fr; margin-top: 58px; }.principle-card { min-height: 230px; }.flow-sticky-heading { position: static; }.cta-section { height: auto; min-height: 100svh; padding: 100px 24px; }.footer-main { grid-template-columns: 1fr 1fr; gap: 38px 24px; }.footer-brand-block { grid-column: 1 / -1; }.footer-bottom { align-items: start; flex-direction: column; gap: 18px; }.footer-bottom div { flex-wrap: wrap; }.button { min-height: 48px; }.header-actions .text-link { display: none; } }


/* ── AUTH MODALS ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.modal-card-auth {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(20px);
  transition: transform 0.25s ease;
  color: #10131d;
  box-sizing: border-box;
}
html[data-theme='dark'] .modal-card-auth {
  background: #111b2b;
  color: #edf7ff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.modal-backdrop.open .modal-card-auth {
  transform: translateY(0);
}
.modal-card-register {
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-header-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
html[data-theme='dark'] .modal-header-logo {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.modal-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.modal-icon-login {
  background: linear-gradient(135deg, #1a41fe, #33b1fb);
  color: #fff;
}
.modal-icon-register {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
}
.modal-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.modal-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}
.modal-close-btn {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s ease;
}
.modal-close-btn:hover {
  color: var(--ink);
}
.role-tabs-wrap {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 14px;
}
html[data-theme='dark'] .role-tabs-wrap {
  background: #0b1424;
}
.role-tab-btn {
  flex: 1;
  border: none;
  padding: 9px 6px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}
html[data-theme='dark'] .role-tab-btn {
  color: #94a3b8;
}
.role-tab-btn.active {
  background: #ffffff;
  color: #1a41fe;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}
html[data-theme='dark'] .role-tab-btn.active {
  background: #1e293b;
  color: #33b1fb;
}
.modal-card-auth .form-group {
  margin-bottom: 12px;
}
.modal-card-auth .form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.modal-card-auth .label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.modal-card-auth .forgot-link {
  font-size: 11px;
  font-weight: 600;
  color: #1a41fe;
  text-decoration: none;
}
.modal-card-auth .forgot-link:hover {
  text-decoration: underline;
}
html[data-theme='dark'] .modal-card-auth .forgot-link {
  color: #33b1fb;
}
.modal-card-auth .label-hint {
  font-weight: normal;
  font-size: 11px;
  color: var(--muted);
}
.modal-card-auth .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.modal-card-auth .input-wrapper .input-icon {
  position: absolute;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  color: #94a3b8;
  transition: color 0.2s ease;
}
.modal-card-auth .input-wrapper .input-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
.modal-card-auth .input-wrapper:focus-within .input-icon {
  color: #1a41fe;
}
html[data-theme='dark'] .modal-card-auth .input-wrapper:focus-within .input-icon {
  color: #33b1fb;
}
.modal-card-auth .input-wrapper .form-input.has-left-icon {
  padding-left: 44px;
}
.modal-card-auth .form-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
html[data-theme='dark'] .modal-card-auth .form-input {
  background: #0b1424;
  color: #edf7ff;
  border-color: rgba(255, 255, 255, 0.15);
}
.modal-card-auth .form-input:focus {
  outline: none;
  border-color: #1a41fe;
  box-shadow: 0 0 0 3px rgba(26, 65, 254, 0.15);
}
html[data-theme='dark'] .modal-card-auth .form-input:focus {
  border-color: #33b1fb;
  box-shadow: 0 0 0 3px rgba(51, 177, 251, 0.2);
}
.modal-card-auth .password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: color 0.2s ease, transform 0.15s ease;
}
.modal-card-auth .password-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.modal-card-auth .password-toggle:hover {
  color: #1a41fe;
  transform: scale(1.1);
}
html[data-theme='dark'] .modal-card-auth .password-toggle:hover {
  color: #33b1fb;
}
.modal-password-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.btn-modal-submit {
  width: 100%;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, #1a41fe 0%, #33b1fb 100%);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26, 65, 254, 0.3);
  transition: all 0.2s ease;
  margin-top: 4px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-modal-submit:hover {
  box-shadow: 0 6px 18px rgba(26, 65, 254, 0.45);
  transform: translateY(-1px);
}

.modal-switch-footer {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.modal-switch-footer a {
  font-weight: 700;
  color: #1a41fe;
  text-decoration: none;
}
.modal-switch-footer a:hover {
  text-decoration: underline;
}
html[data-theme='dark'] .modal-switch-footer a {
  color: #33b1fb;
}
@media (max-width: 500px) {
  .modal-password-grid { grid-template-columns: 1fr; }
  .modal-card-auth { padding: 22px 18px; }
}


/* ── KARMEDU BRAND & HEADER BUTTONS ── */
.brand-name {
  display: inline-flex;
  align-items: center;
}
.brand-karm {
  color: #1a41fe !important;
  -webkit-text-fill-color: #1a41fe !important;
  background: none !important;
  font-weight: 800;
}
.brand-edu {
  color: #33b1fb !important;
  -webkit-text-fill-color: #33b1fb !important;
  background: none !important;
  font-weight: 800;
}

.site-nav a, .text-link {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  transition: color .2s ease, opacity .2s ease;
}
.site-nav a:hover, .text-link:hover {
  color: #1a41fe;
  opacity: 0.85;
}
.site-header.on-dark .site-nav a, .site-header.on-dark .text-link { color: #fff; }
.site-header.on-dark .site-nav a:hover, .site-header.on-dark .text-link:hover { color: #33b1fb; }
.site-header.on-light .brand, .site-header.on-light .site-nav a, .site-header.on-light .text-link { color: var(--ink); }
.site-header.on-light .brand:hover, .site-header.on-light .site-nav a:hover, .site-header.on-light .text-link:hover { color: #1a41fe; }

.site-header,
.site-header.on-light,
.site-header.on-dark,
.site-header.scrolled,
html[data-theme='dark'] .site-header.scrolled {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header-auth-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Giriş yap: Karm koyu mavisi (#1a41fe) */
.button-header-ghost {
  align-items: center;
  background: #1a41fe !important;
  background-color: #1a41fe !important;
  border: 1.5px solid #1a41fe !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(26, 65, 254, 0.25);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  text-decoration: none !important;
  transition: all .2s ease;
}
.button-header-ghost:hover {
  background: #1230c7 !important;
  background-color: #1230c7 !important;
  border-color: #1230c7 !important;
  box-shadow: 0 4px 12px rgba(26, 65, 254, 0.38);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px);
}

/* Hesap oluştur: Edu açık mavisi (#33b1fb) */
.button-header-primary {
  align-items: center;
  background: #33b1fb !important;
  background-color: #33b1fb !important;
  border: 1.5px solid #33b1fb !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(51, 177, 251, 0.28);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  text-decoration: none !important;
  transition: all .2s ease;
}
.button-header-primary:hover {
  background: #1ea2ea !important;
  background-color: #1ea2ea !important;
  border-color: #1ea2ea !important;
  box-shadow: 0 4px 12px rgba(51, 177, 251, 0.42);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px);
}

/* ── HEADER AUTH BUTTONS (Karmedu Modern) ── */
.button-header-ghost {
  align-items: center;
  background: #ffffff !important;
  border: 1.5px solid #1a41fe !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(26, 65, 254, 0.08);
  color: #1a41fe !important;
  -webkit-text-fill-color: #1a41fe !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  text-decoration: none !important;
  transition: all .2s ease;
}
.button-header-ghost:hover {
  background: #eef2ff !important;
  border-color: #1230c7 !important;
  box-shadow: 0 4px 10px rgba(26, 65, 254, 0.16);
  color: #1230c7 !important;
  -webkit-text-fill-color: #1230c7 !important;
  transform: translateY(-1px);
}
.site-header.on-dark .button-header-ghost,
html[data-theme='dark'] .button-header-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.site-header.on-dark .button-header-ghost:hover,
html[data-theme='dark'] .button-header-ghost:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: #33b1fb !important;
  box-shadow: 0 4px 12px rgba(51, 177, 251, 0.25);
  color: #33b1fb !important;
  -webkit-text-fill-color: #33b1fb !important;
}

.button-header-primary {
  align-items: center;
  background: #1a41fe !important;
  background-color: #1a41fe !important;
  border: 1.5px solid #1a41fe !important;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(26, 65, 254, 0.35);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  text-decoration: none !important;
  transition: all .2s ease;
}
.button-header-primary:hover {
  background: #1230c7 !important;
  background-color: #1230c7 !important;
  border-color: #1230c7 !important;
  box-shadow: 0 5px 16px rgba(26, 65, 254, 0.48);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px);
}
.site-header.on-dark .button-header-primary,
html[data-theme='dark'] .button-header-primary {
  background: #33b1fb !important;
  background-color: #33b1fb !important;
  border: 1.5px solid #33b1fb !important;
  box-shadow: 0 3px 12px rgba(51, 177, 251, 0.32);
  color: #07101f !important;
  -webkit-text-fill-color: #07101f !important;
}
.site-header.on-dark .button-header-primary:hover,
html[data-theme='dark'] .button-header-primary:hover {
  background: #5dc3ff !important;
  background-color: #5dc3ff !important;
  border-color: #5dc3ff !important;
  box-shadow: 0 5px 16px rgba(51, 177, 251, 0.48);
  color: #07101f !important;
  -webkit-text-fill-color: #07101f !important;
}

.cta-actions .button,
.cta-section .button-primary {
  background: #1a41fe !important;
  color: #ffffff !important;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(26, 65, 254, 0.3);
  transition: all 0.2s ease;
}
.cta-actions .button:hover,
.cta-section .button-primary:hover {
  background: #1230c7 !important;
  box-shadow: 0 6px 18px rgba(26, 65, 254, 0.45);
  transform: translateY(-1px);
}
html[data-theme='dark'] .cta-actions .button,
html[data-theme='dark'] .cta-section .button-primary {
  background: #33b1fb !important;
  color: #07101f !important;
  box-shadow: 0 4px 14px rgba(51, 177, 251, 0.3);
}
html[data-theme='dark'] .cta-actions .button:hover,
html[data-theme='dark'] .cta-section .button-primary:hover {
  background: #5dc3ff !important;
}


/* ── FOOTER SOCIALS & THEME SWITCH FIXES ── */
.footer-socials {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}
.footer-socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.footer-socials a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}
.footer-socials img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

.site-header .preference-controls {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.site-header .theme-switch {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1.5px solid rgba(16, 19, 29, 0.2) !important;
  background: transparent !important;
  cursor: pointer !important;
  color: var(--ink) !important;
  transition: all 0.2s ease !important;
}
.site-header .theme-switch:hover {
  background: rgba(16, 19, 29, 0.08) !important;
  transform: scale(1.05) !important;
}
html[data-theme='dark'] .site-header .theme-switch {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
html[data-theme='dark'] .site-header .theme-switch:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #33b1fb !important;
}
.theme-switch-moon, .theme-switch-sun {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: transform .25s ease !important;
}
.theme-switch-moon svg, .theme-switch-sun svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}
.theme-switch-moon { display: inline-flex !important; }
.theme-switch-sun { display: none !important; }
.theme-switch.is-dark .theme-switch-moon,
html[data-theme='dark'] .theme-switch .theme-switch-moon {
  display: none !important;
}
.theme-switch.is-dark .theme-switch-sun,
html[data-theme='dark'] .theme-switch .theme-switch-sun {
  display: inline-flex !important;
}