/* =========================================
   KOMUT ROTASI - PROGRAMLAMA EGITIMI BASLANGIC
   F6-14-S031: baslangic.html icindeki <style> blogundan tasindi
   ========================================= */
* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
body {
  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% 6%, rgba(var(--primary-rgb),.14), transparent 24rem),
    radial-gradient(circle at 88% 4%, 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); }
.page-shell { width:min(1440px,calc(100vw - 48px)); margin:0 auto; padding:24px 0 72px; }

.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); }

.hero, .content-panel, .side-card {
  border:1px solid var(--border);
  border-radius:26px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  box-shadow:0 24px 54px rgba(0,0,0,.16);
}
.hero {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:center;
  min-height:260px;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 14%,rgba(var(--primary-rgb),.2),transparent 26%),
    color-mix(in srgb,var(--card) 88%,transparent);
}
.hero-copy, .hero-side { min-width:0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; width:fit-content; padding:7px 11px; border-radius:999px; border:1px solid rgba(var(--primary-rgb),.22); background:rgba(var(--primary-rgb),.1); color:var(--accent); font:800 .68rem/1 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
h1 { margin:14px 0 10px; color:var(--text1); font:900 clamp(2.35rem,5vw,4.2rem)/.96 'Sora',sans-serif; letter-spacing:-.07em; }
.hero-copy p { margin:0; max-width:68ch; color:var(--text2); line-height:1.65; font-size:.98rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.hero-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; max-width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border2); background:rgba(255,255,255,.04); color:var(--text2); font:900 .84rem/1.15 'Sora',sans-serif; }
.hero-btn.primary { color:var(--bg1); border-color:rgba(var(--primary-rgb),.38); background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 72%,#111827)); }
.hero-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hero-note { min-height:104px; padding:15px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.04); }
.hero-note i { color:var(--primary); margin-bottom:10px; }
.hero-note strong { display:block; margin-bottom:6px; color:var(--text1); font:900 .95rem/1.2 'Sora',sans-serif; }
.hero-note span { color:var(--text2); line-height:1.45; font-size:.82rem; }

.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.toolbar-pill { display:inline-flex; align-items:center; gap:8px; min-height:35px; padding:9px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.04); color:var(--text2); font:900 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.toolbar-pill.active { color:var(--bg1); border-color:rgba(var(--primary-rgb),.4); background:var(--primary); }

.content-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
.content-panel { padding:18px; }
.card-list { display:grid; gap:12px; }
.section-shell { display:grid; gap:12px; }
.section-title { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 2px; padding:12px 14px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.035); }
.section-title strong { color:var(--text1); font:900 1rem/1.1 'Sora',sans-serif; }
.section-title span { color:var(--accent); font:800 .66rem/1 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.info-card { min-width:0; border:1px solid var(--border); border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); overflow:hidden; padding:16px; }
.info-card.featured { min-height:136px; }
.info-card h3 { margin:0 0 8px; color:var(--text1); font:900 1rem/1.25 'Sora',sans-serif; letter-spacing:-.03em; }
.info-card p { margin:0; color:var(--text2); line-height:1.6; font-size:.92rem; }
.info-list { margin:12px 0 0; padding-left:18px; color:var(--text2); line-height:1.65; font-size:.88rem; }
.info-list li::marker { color:var(--primary); }
.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.tag-row span { display:inline-flex; padding:6px 8px; border-radius:999px; border:1px solid rgba(var(--primary-rgb),.22); background:rgba(var(--primary-rgb),.08); color:var(--accent); font:800 .62rem/1 'JetBrains Mono',monospace; text-transform:uppercase; }
.side-stack { display:grid; gap:12px; }
.side-card { min-height:0; padding:16px; }
.side-title { margin:0 0 10px; color:var(--text1); font:900 1.05rem/1.2 'Sora',sans-serif; }
.day-list { display:grid; gap:9px; }
.day-item { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:11px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.035); }
.day-no { width:32px; height:32px; display:grid; place-items:center; border-radius:11px; color:var(--bg1); background:var(--primary); font:900 .78rem/1 'Sora',sans-serif; }
.day-item strong { display:block; margin-bottom:4px; color:var(--text1); font:900 .88rem/1.2 'Sora',sans-serif; }
.day-item p { margin:0; color:var(--text2); line-height:1.45; font-size:.8rem; }

[data-theme="corporate"][data-module="pe"] .hero,
[data-theme="corporate"][data-module="pe"] .hero-note,
[data-theme="corporate"][data-module="pe"] .content-panel,
[data-theme="corporate"][data-module="pe"] .info-card,
[data-theme="corporate"][data-module="pe"] .side-card { background:rgba(255,255,255,.78); box-shadow:0 12px 30px rgba(15,23,42,.08); }

[data-theme="corporate"][data-module="pe"] h1,
[data-theme="corporate"][data-module="pe"] strong,
[data-theme="corporate"][data-module="pe"] h3 { color:#0f172a; }

[data-theme="corporate"][data-module="pe"] p,
[data-theme="corporate"][data-module="pe"] li,
[data-theme="corporate"][data-module="pe"] .hero-note span { color:#334155; }

@media (max-width:1120px) {
  .hero, .content-layout { grid-template-columns:1fr; }
}
@media (max-width:768px) {

  .page-shell { width:min(100vw - 20px,1440px); padding-top:18px; }
  .hero { padding:20px; }
  .hero-side { grid-template-columns:1fr; }
}