/* Ana sayfa, tema, konu anlatımı ve sözlük sayfaları */
/* ---------- Ana sayfa ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;padding:18px 0 34px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:600;letter-spacing:-.025em;margin-bottom:.25em}
.hero h1 em{font-style:italic;font-weight:400;color:var(--accent)}
.hero .lead{font-size:1.12rem;color:var(--ink-2);max-width:56ch}
.hero-art{width:100%;max-width:460px;justify-self:center}
.hero-art .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-art .fade{opacity:0;animation:fade .6s ease forwards}
@keyframes fade{to{opacity:1}}
.stats{display:flex;flex-wrap:wrap;gap:22px;margin:20px 0 22px}
.stat b{display:block;font:600 1.9rem/1 var(--font-display)} .stat span{font-size:.8rem;color:var(--ink-3)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-art{max-width:340px;order:-1}}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 14px}
.section-h h2{margin:0}
.theme-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.theme-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--c)}
.theme-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.theme-card .tc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.theme-card .tc-no{font:500 2.6rem/1 var(--font-display);color:var(--c);font-style:italic}
.theme-card .tc-ico{width:46px;height:46px;color:var(--c);opacity:.9}
.theme-card h3{margin:0;font-size:1.22rem}
.theme-card ul{margin:0;padding:0;list-style:none;font-size:.86rem;color:var(--ink-2)}
.theme-card li{padding:3px 0;border-top:1px dashed var(--line);display:flex;gap:8px}
.theme-card li span{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);padding-top:2px;min-width:26px}
.tool-card{display:flex;gap:14px;align-items:center;padding:14px 16px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tool-card:hover{border-color:var(--c,var(--accent));transform:translateY(-1px)}
.tool-card .tc-ico{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--soft);color:var(--c,var(--accent))}
.tool-card .tc-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool-card b{display:block;font-size:.95rem} .tool-card small{color:var(--ink-3);font-size:.8rem;line-height:1.35;display:block}
.teacher{padding:22px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.teacher div b{display:block;margin-bottom:4px} .teacher div p{font-size:.86rem;color:var(--ink-2);margin:0}
@media (max-width:900px){.teacher{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.teacher{grid-template-columns:1fr}}


/* ---------- Tema & konu sayfası ---------- */
.theme-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;padding:8px 0 24px;border-bottom:1px solid var(--line);margin-bottom:26px}
.theme-head .big-no{font:400 clamp(4rem,10vw,7.5rem)/.8 var(--font-display);font-style:italic;color:var(--c)}
.theme-head .lead{font-size:1.08rem;color:var(--ink-2);max-width:70ch}
@media (max-width:640px){.theme-head{grid-template-columns:1fr;gap:6px}}
.outcomes{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.outcomes li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:.93rem}
.topic-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.topic-card{display:flex;flex-direction:column;gap:8px;padding:18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.topic-card:hover{border-color:var(--c);transform:translateY(-2px)}
.topic-card .no{font:500 .8rem var(--font-mono);color:var(--c)}
.topic-card h4{margin:0;font-size:1.08rem}
.topic-card p{font-size:.86rem;color:var(--ink-2);margin:0}
.topic-card .go{margin-top:auto;font-size:.8rem;font-weight:600;color:var(--c)}
.topic-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:6px}
.topic-no{flex:none;font:400 3.4rem/.9 var(--font-display);font-style:italic;color:var(--c)}
.topic-head h1{margin:2px 0 6px;font-size:clamp(1.6rem,3vw,2.3rem)}
.topic-head .lead{color:var(--ink-2);margin:0 0 8px;max-width:72ch}
@media (max-width:640px){.topic-no{font-size:2.4rem}}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:22px 0 24px;overflow-x:auto;scrollbar-width:none;position:sticky;top:62px;z-index:20;background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px)}
.tab{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:2.5px solid transparent;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap;margin-bottom:-1px}
.tab:hover{color:var(--ink)} .tab.on{color:var(--c);border-bottom-color:var(--c)}
.tab .ico{width:17px;height:17px}
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.pager a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-decoration:none;color:var(--ink);max-width:48%;font-weight:600;font-size:.94rem}
.pager a small{color:var(--ink-3);font-weight:500;font-size:.76rem}
.pager a:hover{border-color:var(--c)} .pager a.next{margin-left:auto;text-align:right}


/* ---------- Konu anlatımı ---------- */
.prose{max-width:820px;font-size:1.02rem}
.prose h3{display:flex;align-items:center;gap:10px}
.prose h3::before{content:"";width:10px;height:10px;border:2px solid var(--c);transform:rotate(45deg);flex:none}
.prose ul,.prose ol{padding-left:1.3em} .prose li{margin:.25em 0}
.box{position:relative;border:1px solid var(--line);border-left:3px solid var(--bc,var(--accent));background:var(--paper);border-radius:4px 12px 12px 4px;padding:14px 18px 12px;margin:18px 0}
.box>:last-child{margin-bottom:0}
.box-h{font:700 .7rem/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--bc,var(--accent));margin-bottom:9px}
.box.def{--bc:var(--blue)} .box.thm{--bc:var(--green)} .box.note{--bc:var(--amber)} .box.ex{--bc:var(--violet)} .box.real{--bc:var(--teal)} .box.ask{--bc:var(--plum)}
.m,.mb,.fr,.sq{font-family:var(--font-math)}
.m{font-size:1.06em}.m .fr,.m .sq{white-space:nowrap}
.m i,.mb i,i.v{font-style:italic}
.mb{display:block;text-align:center;font-size:1.2em;padding:8px 6px;margin:8px 0;overflow-x:auto;line-height:2}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .1em;font-size:.88em;line-height:1.18}
.fr>span:first-child{border-bottom:.075em solid currentColor;padding:0 .2em .06em}
.fr>span:last-child{padding:.06em .2em 0}
.sq{white-space:nowrap}.sq>span{border-top:.075em solid currentColor;padding:0 .08em;margin-left:.02em}
.tbl{border-collapse:collapse;margin:12px 0;font-size:.93rem;background:var(--paper);border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:center}
.tbl th{background:var(--paper-2);font-weight:600;font-size:.84rem;color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.l,.tbl th.l{text-align:left}
.tbl-wrap{overflow-x:auto}
.fig{display:block;margin:14px auto;max-width:100%}
.fig text{font-family:var(--font-math);font-size:15px;fill:var(--ink)}
.fig .it{font-style:italic}
.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;margin-top:26px;border:1px dashed var(--c);border-radius:14px;background:var(--soft)}
.cta p{margin:0;flex:1;min-width:220px;font-size:.93rem}
.formula-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0}
.formula{padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.formula small{display:block;font-size:.74rem;color:var(--ink-3);font-weight:600;letter-spacing:.04em;margin-bottom:4px}
.formula .mb{font-size:1.08em;margin:0;padding:2px 0;text-align:left}
details.ex{border:1px solid var(--line);border-radius:14px;background:var(--paper);margin:0 0 14px;overflow:hidden}
details.ex summary{list-style:none;cursor:pointer;padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:14px}
details.ex summary::-webkit-details-marker{display:none}
details.ex .exn{font:600 .78rem var(--font-mono);color:var(--c);padding-top:3px}
details.ex .reveal{grid-column:2;font-size:.8rem;font-weight:600;color:var(--c)}
details.ex[open] .reveal{display:none}
details.ex .sol{padding:2px 18px 16px 58px;border-top:1px dashed var(--line);padding-top:14px;background:var(--paper-2)}
.asks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.asks li{padding:12px 14px 12px 44px;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:.95rem}
.asks li::before{content:"?";position:absolute;left:12px;top:11px;width:22px;height:22px;border-radius:50%;background:var(--plum);color:var(--bg);font:700 .8rem/22px var(--font-display);text-align:center}


/* ---------- Sözlük ---------- */
.gloss{columns:2 340px;column-gap:28px}
.gl-item{break-inside:avoid;padding:12px 0;border-bottom:1px dashed var(--line)}
.gl-item b{font-family:var(--font-display);font-size:1.08rem}
.gl-item p{margin:4px 0 6px;font-size:.92rem;color:var(--ink-2)}
.gl-letter{font:italic 500 2rem var(--font-display);color:var(--accent);margin:18px 0 0;break-after:avoid}
mark{background:color-mix(in srgb,var(--amber) 30%,transparent);color:inherit;border-radius:3px;padding:0 2px}