:root{
color-scheme:light;
--bg:#f6faf9;--surface:#fff;--surface-soft:rgba(255,255,255,.86);--surface-2:#fbfbfd;
--line:#eceef4;--line-strong:#e0e2ec;--ink:#141b2d;--body:#667085;--muted:#687180;--faint:#c0c4d0;
--accent:#0e9384;--accent-soft:#e2f6f4;--accent-border:#b6ece3;--accent-tint:rgba(242,251,249,.86);
--primary:#4f46e5;--primary-hover:#4338ca;--primary-shadow:0 12px 26px -8px rgba(79,70,229,.6);
--link:#4f46e5;--link-hover:#4338ca;--cta-bg:#141b2d;--cta-fg:#fff;
--info:#1570ef;--info-soft:#e8f1fe;--info-border:#cfe1fd;--warm:#b54708;--warm-soft:#fdf1d8;
--chip-bg:rgba(255,255,255,.86);--chip-active-bg:#141b2d;--chip-active-fg:#fff;
--footer-bg:rgba(255,255,255,.6);--hairline:rgba(14,147,132,.14);
--shadow-card:0 1px 2px rgba(20,27,45,.04);--shadow-lift:0 26px 48px -26px rgba(20,27,45,.34);
--shadow-media:0 26px 54px -30px rgba(20,27,45,.34);--hex-op:.9;--glow-op:1}
html[data-theme="dark"]{
color-scheme:dark;
--bg:#0b1a1d;--surface:#10262a;--surface-soft:rgba(16,38,42,.82);--surface-2:#0e2125;
--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.20);--ink:#eef6f5;--body:rgba(226,240,238,.72);
--muted:rgba(226,240,238,.60);--faint:rgba(226,240,238,.34);
--accent:#2dd4bf;--accent-soft:rgba(45,212,191,.14);--accent-border:rgba(45,212,191,.34);--accent-tint:rgba(45,212,191,.09);
--primary:#6366f1;--primary-hover:#4f46e5;--primary-shadow:0 14px 30px -12px rgba(99,102,241,.68);
--link:#2dd4bf;--link-hover:#7ee8d8;--cta-bg:rgba(255,255,255,.10);--cta-fg:#eef6f5;
--info:#8cc6ff;--info-soft:rgba(21,112,239,.20);--info-border:rgba(140,198,255,.32);--warm:#f0c793;--warm-soft:rgba(181,71,8,.3);
--chip-bg:rgba(255,255,255,.07);--chip-active-bg:#2dd4bf;--chip-active-fg:#062522;
--footer-bg:rgba(255,255,255,.04);--hairline:rgba(45,212,191,.18);
--shadow-card:0 1px 2px rgba(0,0,0,.32);--shadow-lift:0 26px 48px -26px rgba(0,0,0,.78);
--shadow-media:0 26px 54px -30px rgba(0,0,0,.82);--hex-op:1;--glow-op:.8}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color 240ms ease,color 240ms ease;overflow-x:hidden}
a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}
button,input,textarea,select{font-family:inherit}
img{display:block;max-width:100%}
::selection{background:var(--accent-soft)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.25}}
@keyframes float-a{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(18px,-22px,0) rotate(8deg)}}
@keyframes float-b{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-22px,16px,0) rotate(-10deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.pulse{animation:pulse 2s ease-in-out infinite}
/* motif scene */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene .hex{position:absolute;inset:0;opacity:var(--hex-op);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'><path d='M30 2 56 17v35L30 67 4 52V17z' fill='none' stroke='rgba(45,212,191,0.16)' stroke-width='1'/><path d='M30 54 56 69v35L30 119 4 104V69z' fill='none' stroke='rgba(45,212,191,0.16)' stroke-width='1'/></svg>");background-size:60px 104px}
.scene .glow{position:absolute;inset:0;opacity:var(--glow-op);background:radial-gradient(900px 520px at 82% 4%,rgba(45,212,191,.20),transparent 62%),radial-gradient(760px 520px at 6% 34%,rgba(99,102,241,.16),transparent 60%),radial-gradient(700px 460px at 70% 78%,rgba(45,212,191,.14),transparent 62%)}
.cell{position:absolute;border-radius:999px}
.cell-1{left:-70px;top:90px;width:300px;height:300px;background:radial-gradient(circle at 38% 34%,rgba(45,212,191,.32),rgba(45,212,191,.06) 56%,transparent 70%);animation:float-a 21s ease-in-out infinite alternate}
.cell-2{right:4%;top:180px;width:168px;height:168px;border:1.5px solid rgba(45,212,191,.26);display:grid;place-items:center;animation:float-b 27s ease-in-out infinite alternate}
.cell-2 i{width:52px;height:52px;border-radius:999px;background:rgba(45,212,191,.14)}
.cell-3{left:12%;top:62%;width:210px;height:210px;border:1.5px dashed rgba(99,102,241,.26);display:grid;place-items:center}
.cell-3 i{width:74px;height:74px;border-radius:999px;background:rgba(99,102,241,.14)}
.cell-4{right:-60px;top:48%;width:260px;height:260px;background:radial-gradient(circle at 58% 42%,rgba(99,102,241,.24),rgba(99,102,241,.05) 58%,transparent 72%);animation:float-a 24s ease-in-out infinite alternate}
.cell-5{left:46%;top:26%;width:96px;height:96px;border:1.5px solid rgba(45,212,191,.3);animation:float-b 19s ease-in-out infinite alternate}
.rungs{position:absolute;display:grid;gap:14px}
.rungs.left{left:max(-200px,calc((100vw - 1240px)/2 - 78px));top:34%}
.rungs.right{right:max(-200px,calc((100vw - 1240px)/2 - 78px));top:70%}
.rungs span{display:block;height:3px;border-radius:999px}
.rungs span:nth-child(odd){background:rgba(45,212,191,.34)}
.rungs span:nth-child(even){background:rgba(99,102,241,.34)}
.rungs span:nth-child(1){width:56px}.rungs span:nth-child(2){width:73px}.rungs span:nth-child(3){width:76px}
.rungs span:nth-child(4){width:60px}.rungs span:nth-child(5){width:39px}.rungs span:nth-child(6){width:35px}
.rungs span:nth-child(7){width:47px}
.progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#2dd4bf,#6366f1);z-index:60;transition:width 90ms linear}
/* min-height+flex: kısa sayfalarda footer ekranın ortasında kalmasın (Kaan bildirimi, 2026-09-03) */
.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.page>main{flex:1 1 auto;width:100%}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 520ms ease,transform 520ms cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
/* header */
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.header-in{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.brand{display:flex;align-items:center;gap:11px;color:inherit;flex-shrink:0}
.brand-mark{position:relative;width:42px;height:42px;border-radius:14px;background:var(--accent-soft);border:1px solid var(--accent-border);display:grid;place-items:center}
.brand-mark .ring{width:22px;height:22px;border-radius:999px;border:1.5px solid var(--accent-border)}
.brand-mark .dot{position:absolute;width:9px;height:9px;border-radius:999px;background:var(--accent)}
.brand-name{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.brand-sub{display:block;font-size:10.5px;font-weight:800;letter-spacing:.11em;color:var(--accent);text-transform:uppercase}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;order:3}
.theme-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--surface-soft);color:var(--ink);cursor:pointer;font-size:13px;font-weight:700;padding:8px 14px;border-radius:11px;white-space:nowrap;transition:all 150ms}
.theme-btn:hover{border-color:var(--accent-border);color:var(--accent)}
.theme-btn:active{transform:scale(.97)}
.theme-btn .glyph{width:14px;height:14px;border-radius:999px;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
html[data-theme="dark"] .theme-btn .glyph{background:currentColor}
.yt-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cta-bg);color:var(--cta-fg);font-size:13px;font-weight:700;padding:8px 14px;border-radius:11px;white-space:nowrap;transition:all 150ms}
.yt-cta:hover{opacity:.88;color:var(--cta-fg)}.yt-cta:active{transform:scale(.97)}
.yt-cta i{width:7px;height:7px;border-radius:999px;background:#e31b54}
.site-nav{order:4;width:100%;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.site-nav::-webkit-scrollbar{height:0}
.site-nav a{flex-shrink:0;white-space:nowrap;font-size:13.5px;font-weight:700;color:var(--body);padding:9px 13px;border-radius:10px;transition:all 140ms}
.site-nav a:hover{color:var(--ink)}
.site-nav a.active{background:var(--accent-soft);color:var(--accent)}
/* type */
h1{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.032em;line-height:1.1;color:var(--ink)}
h2{font-size:clamp(21px,4.5vw,28px);font-weight:800;letter-spacing:-.025em;color:var(--ink)}
h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.lead{margin-top:10px;max-width:580px;font-size:16px;line-height:1.6;color:var(--body);text-wrap:pretty}
.kicker{display:flex;align-items:center;gap:9px}
.kicker i{width:22px;height:2px;background:var(--accent)}
.kicker span{font-size:11.5px;font-weight:800;letter-spacing:.13em;color:var(--accent);text-transform:uppercase}
.kicker.info i{background:var(--info)}.kicker.info span{color:var(--info)}
.kicker.indigo i{background:var(--primary)}.kicker.indigo span{color:var(--link)}
.page-head{padding:36px 0 6px}
.section{padding:42px 0}
.section-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between}
/* buttons (DS spec) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-weight:700;transition:all 150ms}
.btn:active{transform:scale(.97)}
.btn-sm{font-size:13px;padding:8px 14px;border-radius:11px}
.btn-md{font-size:14px;padding:10px 20px;border-radius:13px}
.btn-lg{font-size:16px;padding:14px 28px;border-radius:14px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--primary-shadow)}
.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.btn-secondary:hover{border-color:var(--muted);color:var(--ink)}
/* chips */
.chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 10px;border-radius:999px;white-space:nowrap}
.chip-teal{background:var(--accent-soft);color:var(--accent)}
.chip-indigo{background:var(--accent-soft);color:var(--link)}
.chip-info{background:var(--info-soft);color:var(--info)}
.chip-warm{background:var(--warm-soft);color:var(--warm)}
.tabs{margin-top:24px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.tabs::-webkit-scrollbar{height:0}
.tab{flex-shrink:0;border:0;cursor:pointer;white-space:nowrap;font-size:13.5px;font-weight:800;padding:10px 16px;border-radius:999px;background:var(--chip-bg);color:var(--muted);box-shadow:var(--shadow-card);transition:all 140ms}
.tab.active{background:var(--chip-active-bg);color:var(--chip-active-fg)}
/* grid + cards */
.grid{display:grid;gap:16px}
.g-tracks{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.g-videos{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.g-sheets{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.row{display:flex;flex-wrap:wrap;gap:20px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:20px;box-shadow:var(--shadow-card)}
.card-soft{border:1px solid var(--line);background:var(--surface-soft);border-radius:20px;box-shadow:var(--shadow-card)}
/* hero */
.hero{max-width:1200px;margin:0 auto;padding:54px 16px 46px;display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.hero-col{flex:1 1 350px;min-width:0}
.hero-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:800}
.hero-badge i{width:7px;height:7px;border-radius:999px;background:var(--accent)}
.taxon{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.hero h1{margin-top:22px;font-size:clamp(36px,8.4vw,64px);line-height:1.02;letter-spacing:-.038em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin-top:20px;max-width:490px;font-size:clamp(16px,4vw,19px);line-height:1.62;color:var(--body);text-wrap:pretty}
.hero-ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:11px}
.stats{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.stat{min-width:116px;border:1px solid var(--line);background:var(--surface-soft);border-radius:15px;padding:13px 16px;box-shadow:var(--shadow-card)}
.stat b{display:block;font-size:23px;font-weight:800;letter-spacing:-.03em}
.stat span{display:block;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--muted)}
.slide{flex:1 1 330px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:var(--shadow-media)}
.slide-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 9px 10px}
.slide-top .l{display:flex;align-items:center;gap:8px}
.slide-top .l i{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.slide-top span{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.ratio{position:relative;aspect-ratio:16/9;border-radius:15px;overflow:hidden;background:#07130f}
.ratio iframe,.ratio img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.slide-foot{padding:13px 9px 5px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.slide-foot b{font-size:14.5px;font-weight:800}
.slide-foot span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.fact{margin-top:14px;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--accent-border);background:var(--accent-tint);border-radius:16px;padding:15px 17px}
.fact .orb{position:relative;width:34px;height:34px;flex-shrink:0;border-radius:999px;border:1.5px dashed var(--accent-border);display:grid;place-items:center;animation:spin 14s linear infinite}
.fact .orb i{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.fact .t{font-size:10.5px;font-weight:800;letter-spacing:.13em;color:var(--accent);text-transform:uppercase}
.fact p{margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--ink);transition:opacity 260ms}
.ideogram{display:flex;gap:3px;height:6px}
.ideogram span{border-radius:999px}
/* track cards */
.track{position:relative;overflow:hidden;display:block;text-align:left;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:22px;box-shadow:var(--shadow-card);transition:transform 180ms,box-shadow 180ms,border-color 180ms}
.track:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--accent-border);color:inherit}
.track .ring{position:absolute;right:-46px;top:-46px;width:132px;height:132px;border-radius:999px;pointer-events:none}
.track .top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
.track .top em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted)}
.track .name{position:relative;margin-top:18px;display:flex;align-items:center;gap:11px}
.track .name i{width:9px;height:9px;flex-shrink:0;border-radius:999px}
.track p{position:relative;margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--body)}
.track .go{position:relative;margin-top:18px;font-size:12.5px;font-weight:800;color:var(--link)}
/* pillars */
.pillar{border:1px solid var(--line);background:var(--surface-soft);border-radius:20px;padding:24px;box-shadow:var(--shadow-card)}
.pillar .ico{width:42px;height:42px;border-radius:999px;display:grid;place-items:center}
.pillar .ico i{width:14px;height:14px;border-radius:999px}
.pillar b{display:block;margin-top:16px;font-size:16.5px;font-weight:800;letter-spacing:-.015em}
.pillar p{margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--body)}
/* video cards */
.vcard{display:block;color:inherit;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card);transition:transform 180ms,box-shadow 180ms}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);color:inherit}
.vcard .thumb{position:relative;aspect-ratio:16/9;background:#07130f;overflow:hidden}
.vcard .thumb img{width:100%;height:100%;object-fit:cover}
.vcard .meta{padding:15px 17px 17px}
.vcard .meta b{display:block;font-size:15.5px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.vcard .meta span{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.badge-dur{position:absolute;right:9px;bottom:9px;background:rgba(7,19,15,.85);color:#fff;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:7px}
.badge-exam{position:absolute;left:9px;top:9px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 9px;border-radius:7px}
/* dersler split */
.split{margin-top:26px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.side{flex:1 1 240px;min-width:0;max-width:300px;border:1px solid var(--line);border-radius:20px;background:var(--surface-soft);padding:16px;box-shadow:var(--shadow-card)}
.side-title{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.units{margin-top:12px;display:grid;gap:4px}
.units a{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--body);padding:11px 12px;border-radius:11px;transition:all 140ms}
.units a i{width:7px;height:7px;flex-shrink:0;border-radius:999px;background:var(--faint)}
.units a:hover{color:var(--ink)}
.units a.active{background:var(--accent-soft);color:var(--accent)}
.units a.active i{background:var(--accent)}
.units a em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;opacity:.65}
.main-col{flex:1 1 420px;min-width:0}
.player{margin-top:16px;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-card);background:var(--surface)}
.player-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;background:var(--accent-soft);border-bottom:1px solid var(--accent-border)}
.player-top .l{display:flex;align-items:center;gap:9px}
.player-top .l i{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.player-top .l span{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.player-top em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--accent)}
.player .ratio{border-radius:0}
.player-body{padding:20px}
.player-body h3{font-size:clamp(18px,3.5vw,22px)}
.player-body p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--body)}
.player-body .acts{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}
.lesson{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-card);padding:14px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;transition:border-color 160ms,transform 160ms}
.lesson:hover{border-color:var(--accent-border);transform:translateY(-2px)}
.lesson-thumb{position:relative;flex:0 0 168px;max-width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#07130f}
.lesson-thumb img{width:100%;height:100%;object-fit:cover}
.lesson-thumb .badge-dur{right:7px;bottom:7px;font-size:11px;padding:3px 7px;border-radius:6px}
.lesson-body{flex:1 1 220px;min-width:0}
.lesson-body .tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lesson-body .tags em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.lesson-body h3{margin-top:9px;font-size:16.5px;letter-spacing:-.016em;line-height:1.35}
.lesson-body p{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--body)}
.lesson-acts{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px}
.notice{margin-top:22px;border:1px dashed var(--accent-border);background:var(--accent-tint);border-radius:18px;padding:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.notice b{font-size:15px;font-weight:800}
.notice p{margin-top:4px;font-size:13.5px;color:var(--body)}
/* föy cards */
.sheet{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:20px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:14px;transition:transform 180ms,box-shadow 180ms,border-color 180ms}
.sheet:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--info-border)}
.sheet-top{display:flex;gap:14px;align-items:flex-start}
.file-ico{position:relative;width:46px;height:58px;flex-shrink:0;border-radius:8px;background:var(--info-soft);border:1px solid var(--info-border)}
.file-ico i{position:absolute;left:9px;height:2px;border-radius:999px;background:var(--info);opacity:.4}
.file-ico i:nth-child(1){right:9px;top:14px;opacity:.6}
.file-ico i:nth-child(2){right:17px;top:23px}
.file-ico i:nth-child(3){right:13px;top:32px}
.file-ico i:nth-child(4){right:21px;top:41px}
.sheet b{display:block;margin-top:9px;font-size:16px;font-weight:800;line-height:1.35}
.sheet .meta{margin-top:5px;font-size:12.5px;font-weight:600;color:var(--muted)}
.sheet .lesson-ref{display:flex;gap:7px;align-items:center;font-size:12.5px;font-weight:700;color:var(--muted)}
.sheet .lesson-ref i{width:6px;height:6px;border-radius:999px;background:var(--accent)}
.sheet .acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.steps{margin-top:14px;display:grid;gap:14px}
.step{display:flex;gap:12px;align-items:flex-start}
.step .no{width:24px;height:24px;flex-shrink:0;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800;display:grid;place-items:center}
.step b{font-size:14px;font-weight:800}
.step p{margin-top:3px;font-size:13px;line-height:1.55;color:var(--body)}
/* books */
.book{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:24px;box-shadow:var(--shadow-card);display:flex;flex-wrap:wrap;gap:26px}
.book-cover{flex:0 0 180px;width:180px;min-width:0;align-self:start;border-radius:14px;box-shadow:var(--shadow-media)}
.book-main{flex:1 1 300px;min-width:0}
.book-main h2{margin-top:12px;font-size:clamp(22px,4.5vw,27px);line-height:1.2}
.book-main p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--body);max-width:460px}
.feats{margin-top:18px;display:grid;gap:9px;list-style:none;padding:0}
.feats li{display:flex;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.feats i{width:18px;height:18px;margin-top:1px;flex-shrink:0;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800;display:grid;place-items:center;font-style:normal}
.buybox{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--surface-2);padding:20px;align-self:start}
.buybox .t{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.sellers{margin-top:14px;display:grid;gap:9px}
.sellers a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:10px 20px;border-radius:13px;transition:all 150ms}
.sellers a:active{transform:scale(.97)}
.sellers a.primary{background:var(--primary);color:#fff;box-shadow:var(--primary-shadow)}
.sellers a.primary:hover{background:var(--primary-hover);color:#fff}
.sellers a.alt{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
.sellers a.alt:hover{border-color:var(--muted);color:var(--ink)}
.buybox dl{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}
.buybox dl div{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.buybox dt{color:var(--muted);font-weight:600}.buybox dd{margin:0;font-weight:800;color:var(--ink)}
.cta{margin-top:28px;border:1px solid var(--accent-border);border-radius:26px;padding:32px 28px;background:var(--accent-tint);display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.cta h3{font-size:clamp(21px,4.5vw,26px);letter-spacing:-.028em}
.cta p{margin-top:10px;font-size:15px;color:var(--body);max-width:520px;line-height:1.6}
/* about */
.about{padding:40px 0;display:flex;flex-wrap:wrap;gap:38px;align-items:flex-start}
.about-side{flex:1 1 280px;min-width:0;max-width:340px}
.portrait{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--accent-soft);border:1px solid var(--accent-border);display:grid;place-items:center}
.portrait .hexfill{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'><path d='M30 2 56 17v35L30 67 4 52V17z' fill='none' stroke='rgba(45,212,191,0.26)' stroke-width='1'/></svg>");background-size:60px 104px}
.portrait span{position:relative;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.1em;text-align:center;line-height:1.9}
.stat-list{margin-top:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft);padding:18px;display:grid;gap:12px}
.stat-list div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.stat-list span{font-size:13px;font-weight:600;color:var(--muted)}
.stat-list b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.about-main{flex:1 1 380px;min-width:0}
.about-main .big{margin-top:18px;font-size:clamp(16px,3.6vw,18px);line-height:1.7;max-width:620px;text-wrap:pretty}
.about-main .sub{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--body);max-width:620px;text-wrap:pretty}
.tl div{display:flex;flex-wrap:wrap;gap:8px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.tl .y{flex:0 0 68px;font-size:14px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.tl .c{flex:1 1 240px;min-width:0}
.tl .c b{font-size:16px;font-weight:800}
.tl .c p{margin-top:5px;font-size:14px;line-height:1.6;color:var(--body)}
.principles{margin-top:32px;border:1px solid var(--line);background:var(--surface-soft);border-radius:20px;padding:24px}
.principles .no{width:36px;height:36px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:14px;font-weight:800}
.principles b{display:block;margin-top:12px;font-size:15px}
.principles p{margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--body)}
/* contact */
.contact{padding:40px 0;display:flex;flex-wrap:wrap;gap:38px;align-items:flex-start}
.contact-links{margin-top:24px;display:grid;gap:10px;max-width:480px}
.contact-links a{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);padding:15px;color:inherit}
.contact-links a:hover{border-color:var(--accent-border);background:var(--accent-tint);color:inherit}
.contact-links .ico{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:14px;font-weight:800}
.contact-links .txt{flex:1;min-width:0}
.contact-links .txt span{display:block;font-size:12.5px;font-weight:700;color:var(--muted)}
.contact-links .txt b{display:block;margin-top:2px;font-size:15px;font-weight:800}
.contact-links .arrow{font-size:13px;font-weight:800;color:var(--accent)}
form.card{flex:1 1 340px;min-width:0;max-width:460px;padding:24px;display:grid;gap:15px}
label{font-size:13px;font-weight:700;color:var(--ink)}
input,textarea,select{margin-top:7px;width:100%;font-size:14.5px;padding:13px 14px;border:1px solid var(--line-strong);border-radius:12px;outline:none;background:var(--surface-2);color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
.topics{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px}
.topics span{font-size:13px;font-weight:700;color:var(--body);border:1px solid var(--line-strong);padding:8px 13px;border-radius:999px;cursor:pointer}
.topics span:hover{border-color:var(--accent);color:var(--accent)}
/* footer */
.site-footer{margin-top:52px;border-top:1px solid var(--hairline);background:var(--footer-bg)}
.site-footer .wrap{padding:30px 16px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.site-footer .brandline{display:flex;align-items:center;gap:11px}
.site-footer .mini{width:30px;height:30px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-border);display:grid;place-items:center}
.site-footer .mini i{width:7px;height:7px;border-radius:999px;background:var(--accent)}
.site-footer .copy{font-size:13px;font-weight:600;color:var(--muted)}
.site-footer .links{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px;font-weight:700}
.site-footer .links button{border:0;background:transparent;cursor:pointer;font-size:13px;font-weight:700;color:var(--link);padding:0}
.site-footer .links button:hover{color:var(--link-hover)}