html { height: 100%; }
* { box-sizing:border-box; }
body {
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin:0;
  color:var(--text1,#f8fafc);
  font-family:'Inter',sans-serif;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(var(--primary-rgb),.14), transparent 24rem),
    radial-gradient(circle at 88% 2%, rgba(22,163,74,.12), transparent 22rem),
    linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
  background-size:32px 32px,32px 32px,auto,auto,auto;
}
a { color:inherit; text-decoration:none; }

.back-btn:hover { border-color:rgba(var(--primary-rgb),.35); color:var(--primary); }
.theme-fab { position:fixed; bottom:24px; right:24px; z-index:500; }
.theme-fab-btn { width:48px; height:48px; border-radius:50%; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.theme-fab-btn:hover { color:var(--primary); border-color:var(--primary); }
.theme-tray { position:absolute; bottom:58px; right:0; background:var(--bg3); border:1px solid var(--border2); border-radius:14px; padding:12px; width:220px; display:none; flex-direction:column; gap:4px; box-shadow:0 8px 32px rgba(0,0,0,.4); }
.theme-tray.open { display:flex; }
.tray-label { font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); padding:2px 6px 8px; }
.tray-opt { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; transition:background .15s; }
.tray-opt:hover { background:var(--bg4); }
.tray-opt.act { background:rgba(var(--primary-rgb),.1); }
.tray-swatches { display:flex; gap:3px; flex-shrink:0; }
.tray-swatch { width:10px; height:10px; border-radius:50%; }
.tray-name { font-size:.75rem; font-weight:700; color:var(--text1); }
.tray-sub { font-size:.62rem; color:var(--text3); }
.page-shell { width:min(1040px,calc(100vw - 32px)); margin:0 auto; padding:20px 0 clamp(96px,12vh,150px); }

.role-card, .track-card, .plan-panel, .lesson-card, .step-node {
  border:1px solid var(--border);
  border-radius:8px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  box-shadow:0 18px 42px rgba(0,0,0,.15);
}
.track-card p, .lesson-card p, .plan-note p { margin:0; color:var(--text2); line-height:1.6; font-size:.95rem; }

.step-indicator { width:min(620px,100%); margin:0 auto 46px; display:grid; grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr 42px 1fr; align-items:start; }
.step-node { width:42px; height:42px; margin:0 auto 9px; display:grid; place-items:center; border-radius:999px; color:var(--text3); font:900 .88rem/1 'Sora',sans-serif; box-shadow:none; }
.step-label { text-align:center; color:var(--text3); font:800 .74rem/1 'JetBrains Mono',monospace; letter-spacing:.08em; }
.step-item.active .step-node { background:#7c3aed; color:#fff; border-color:#7c3aed; box-shadow:0 0 0 8px rgba(124,58,237,.12); }
.step-item.active .step-label { color:color-mix(in srgb, #7c3aed var(--rozet-yazi-orani, 100%), var(--text1)); }
.step-item.done .step-node { background:rgba(var(--primary-rgb),.16); color:var(--primary); }
.step-line { height:2px; margin-top:21px; background:var(--border2); }
.step-line.done { background:linear-gradient(90deg,#7c3aed,var(--primary)); }
.wizard-panel { display:none; }
.wizard-panel.active { display:block; }
.wizard-panel.locked { display:none; }

.section-title { text-align:center; margin:0 0 22px; }
.section-title h2 { margin:0; color:var(--text1); font:900 2.15rem/1.08 'Sora',sans-serif; letter-spacing:0; }
.section-title p { margin:10px auto 0; max-width:720px; color:var(--text2); line-height:1.5; font-size:.96rem; }
.role-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:10px; }
.role-card { min-height:156px; padding:15px 13px; cursor:pointer; text-align:center; color:inherit; transition:.2s ease; position:relative; overflow:hidden; }
.role-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at top,rgba(var(--role-rgb, var(--primary-rgb)),.14),transparent 68%); opacity:0; transition:.2s ease; }
.role-card:hover, .role-card.active { transform:translateY(-3px); border-color:var(--role-a, var(--primary)); background:rgba(var(--role-rgb, var(--primary-rgb)),.07); }
.role-card:hover::before, .role-card.active::before { opacity:1; }
.role-art { width:46px; height:46px; margin:0 auto 9px; display:grid; place-items:center; border-radius:14px; background:rgba(var(--role-rgb, var(--primary-rgb)),.14); color:var(--role-a, var(--primary)); border:1px solid rgba(var(--role-rgb, var(--primary-rgb)),.22); position:relative; }
.role-art i { font-size:1.2rem; }
.role-art span { display:none; }
.role-copy { position:relative; }
.role-copy strong { display:block; margin-bottom:6px; color:var(--text1); font:900 .94rem/1.16 'Sora',sans-serif; }
.role-copy p { margin:0; color:var(--text2); line-height:1.38; font-size:.77rem; }

.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:10px; }
.choice-card { min-height:154px; padding:18px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--card) 88%,transparent); color:inherit; text-align:left; cursor:pointer; transition:.2s ease; }
.choice-card:hover, .choice-card.active { border-color:rgba(var(--primary-rgb),.35); background:rgba(var(--primary-rgb),.08); transform:translateY(-2px); }
.choice-card i { width:44px; height:44px; display:grid; place-items:center; margin-bottom:12px; border-radius:12px; color:var(--primary); background:rgba(var(--primary-rgb),.1); border:1px solid rgba(var(--primary-rgb),.22); }
.choice-card strong { display:block; margin-bottom:7px; color:var(--text1); font:900 1rem/1.16 'Sora',sans-serif; }
.choice-card p { margin:0; color:var(--text2); line-height:1.5; font-size:.86rem; }
.choice-detail { display:block; margin-top:9px; color:var(--accent); font:800 .68rem/1.35 'JetBrains Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
#levelGrid {
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
}
#levelGrid .choice-card {
  min-height:176px;
  display:flex;
  flex-direction:column;
}
#levelGrid .choice-detail { margin-top:auto; padding-top:10px; }
.wizard-nav { display:flex; justify-content:space-between; gap:12px; margin:14px 0 0; }
.wizard-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:8px; border:1px solid var(--border2); background:rgba(255,255,255,.04); color:var(--text2); font:900 .9rem/1 'Sora',sans-serif; cursor:pointer; }
.wizard-btn.primary { border-color:rgba(124,58,237,.35); background:linear-gradient(135deg,#c4a5f7,#b089e8); color:#fff; }
.wizard-btn:disabled { opacity:.42; cursor:not-allowed; }
.track-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:10px; }
.track-card { width:100%; min-height:176px; padding:18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; cursor:pointer; text-align:left; color:inherit; box-shadow:none; transition:.2s ease; }
.track-card:hover, .track-card.active { border-color:rgba(var(--primary-rgb),.34); background:rgba(var(--primary-rgb),.08); }
.track-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; color:var(--primary); background:rgba(var(--primary-rgb),.1); border:1px solid rgba(var(--primary-rgb),.22); }
.track-card strong { display:block; margin-bottom:7px; color:var(--text1); font:900 1rem/1.16 'Sora',sans-serif; }
.track-card p { font-size:.86rem; line-height:1.5; }
.track-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.track-tags span { padding:5px 7px; border:1px solid rgba(var(--primary-rgb),.22); border-radius:999px; color:var(--accent); background:rgba(var(--primary-rgb),.08); font:800 .62rem/1 'JetBrains Mono',monospace; }

.plan-panel { min-height:560px; overflow:hidden; }
.plan-head { padding:18px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(22,163,74,.07)),color-mix(in srgb,var(--bg3) 62%,transparent); }
.plan-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.plan-kicker { color:var(--accent); font:700 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.plan-head h2 { margin:8px 0; color:var(--text1); font:900 1.8rem/1.08 'Sora',sans-serif; letter-spacing:0; }
.reset-route { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:10px; border:1px solid rgba(var(--primary-rgb),.34); background:rgba(var(--primary-rgb),.1); color:var(--primary); font:900 .78rem/1 'Sora',sans-serif; cursor:pointer; }
.plan-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.plan-stat { padding:10px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.035); }
.plan-stat span { display:block; margin-bottom:4px; color:var(--text3); font:800 .6rem/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.plan-stat strong { color:var(--text1); font:900 .82rem/1.16 'Sora',sans-serif; }
.plan-body { display:grid; grid-template-columns:1.35fr .65fr; gap:14px; padding:14px; }
.lesson-card { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:12px; box-shadow:none; }
.lesson-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:8px; color:var(--primary); background:rgba(var(--primary-rgb),.1); border:1px solid rgba(var(--primary-rgb),.22); }
.lesson-card strong { display:block; margin-bottom:4px; color:var(--text1); font:900 .95rem/1.18 'Sora',sans-serif; }
.lesson-card p { font-size:.86rem; }
.lesson-meta { display:grid; gap:6px; justify-items:end; }
.lesson-meta span { padding:6px 8px; border:1px solid var(--border); border-radius:8px; color:var(--text3); font:700 .62rem/1 'JetBrains Mono',monospace; white-space:nowrap; }
.side-notes { display:grid; gap:10px; align-content:start; }
.plan-note { padding:14px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.035); }
.plan-note strong { display:block; margin-bottom:8px; color:var(--text1); font:900 .92rem/1.2 'Sora',sans-serif; }
.plan-note ul { margin:0; padding-left:18px; color:var(--text2); line-height:1.58; font-size:.88rem; }
.plan-note li::marker { color:var(--primary); }
.plan-onay { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 10px; }
.plan-onay-card { min-height:126px; padding:16px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb,var(--card) 88%,transparent); }
.plan-onay-card span { display:block; margin-bottom:8px; color:var(--accent); font:800 .66rem/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.plan-onay-card strong { display:block; margin-bottom:8px; color:var(--text1); font:900 .96rem/1.18 'Sora',sans-serif; }
.plan-onay-card p { margin:0; color:var(--text2); line-height:1.48; font-size:.84rem; }
.empty-plan { padding:24px; color:var(--text2); }
.flow-list { display:grid; gap:0; }
.flow-item { display:grid; grid-template-columns:58px 1fr; gap:0; }
.flow-rail { display:flex; flex-direction:column; align-items:center; padding-top:16px; }
.flow-dot { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:rgba(var(--primary-rgb),.14); color:var(--primary); font:900 .78rem/1 'Sora',sans-serif; border:1px solid rgba(var(--primary-rgb),.24); }
.flow-line { width:2px; flex:1; min-height:28px; background:linear-gradient(var(--primary),rgba(255,255,255,.06)); }
.flow-item:last-child .flow-line { display:none; }
.lesson-card { margin-bottom:10px; border-left:4px solid var(--primary); }
.lesson-card details { grid-column:1 / -1; margin-top:8px; }
.lesson-card summary { cursor:pointer; color:var(--accent); font:800 .76rem/1 'Sora',sans-serif; }
.lesson-detail { margin-top:8px; display:grid; gap:8px; color:var(--text2); font-size:.84rem; line-height:1.5; }

[data-theme="corporate"][data-module="pe"] .role-card,
[data-theme="corporate"][data-module="pe"] .track-card,
[data-theme="corporate"][data-module="pe"] .choice-card,
[data-theme="corporate"][data-module="pe"] .plan-panel,
[data-theme="corporate"][data-module="pe"] .lesson-card,
[data-theme="corporate"][data-module="pe"] .step-node { background:rgba(255,255,255,.78); box-shadow:0 10px 28px rgba(15,23,42,.08); }

[data-theme="corporate"][data-module="pe"] .step-node { color:#64748b; border-color:rgba(15,23,42,.18); background:#fff; }

[data-theme="corporate"][data-module="pe"] .step-label { color:#64748b; text-shadow:0 1px 0 rgba(255,255,255,.7); }

[data-theme="corporate"][data-module="pe"] .step-item.active .step-node { background:#7c3aed; color:#fff; border-color:#7c3aed; }

[data-theme="corporate"][data-module="pe"] .step-item.active .step-label { color:#6d28d9; }

[data-theme="corporate"][data-module="pe"] .step-item.done .step-node { background:rgba(var(--primary-rgb),.16); color:var(--primary); border-color:rgba(var(--primary-rgb),.35); }

[data-theme="corporate"][data-module="pe"] .step-line { background:rgba(15,23,42,.22); }

[data-theme="corporate"][data-module="pe"] .step-line.done { background:linear-gradient(90deg,#7c3aed,var(--primary)); }

[data-theme="corporate"][data-module="pe"] .section-title h2,
[data-theme="corporate"][data-module="pe"] .role-copy strong,
[data-theme="corporate"][data-module="pe"] .track-card strong,
[data-theme="corporate"][data-module="pe"] .choice-card strong,
[data-theme="corporate"][data-module="pe"] .plan-head h2,
[data-theme="corporate"][data-module="pe"] .plan-stat strong,
[data-theme="corporate"][data-module="pe"] .lesson-card strong,
[data-theme="corporate"][data-module="pe"] .plan-note strong { color:#0f172a; }

[data-theme="corporate"][data-module="pe"] .role-copy p,
[data-theme="corporate"][data-module="pe"] .track-card p,
[data-theme="corporate"][data-module="pe"] .choice-card p,
[data-theme="corporate"][data-module="pe"] .lesson-card p,
[data-theme="corporate"][data-module="pe"] .plan-note p,
[data-theme="corporate"][data-module="pe"] .plan-note ul { color:#334155; }

@media (max-width:1180px) {
  .plan-body { grid-template-columns:1fr; }
  .role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #levelGrid {
    grid-template-columns:repeat(5,minmax(180px,1fr));
    overflow-x:auto;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  #levelGrid::-webkit-scrollbar { display:none; }
}
@media (max-width:768px) {

  .page-shell { width:min(100vw - 20px,1440px); padding-top:14px; }
  .step-indicator {
    width:100%;
    grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
    gap:0;
    margin-bottom:32px;
    align-items:start;
  }
  .step-node {
    width:34px;
    height:34px;
    margin-bottom:7px;
    font-size:.76rem;
  }
  .step-line {
    display:block;
    height:2px;
    margin-top:17px;
  }
  .step-label {
    font-size:clamp(.48rem,1.7vw,.58rem);
    line-height:1.15;
    letter-spacing:.03em;
    overflow-wrap:anywhere;
  }
  .role-grid, .choice-grid, .track-panel { grid-template-columns:1fr; }
  .plan-onay { grid-template-columns:1fr; }
  #levelGrid {
    grid-template-columns:repeat(5,minmax(178px,1fr));
    overflow-x:auto;
    scroll-snap-type:x proximity;
  }
  #levelGrid .choice-card { scroll-snap-align:start; }
  .section-title h2 { font-size:2rem; }
  .lesson-card { grid-template-columns:auto 1fr; }
  .lesson-meta { grid-column:2; justify-items:start; grid-template-columns:repeat(2,max-content); }
}

/* Footer — sayfanın en alt tarafında */

/* Sayfa başlığı: sihirbazın görünür bir başlığı yok; ekran okuyucu ve
   başlık gezinmesi için h1 yalnız görsel olarak gizlenir. */
.oy-sayfa-basligi{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}