:root{--cream:#fdf6ec;--lavender:#f3effc;--ink:#3b3355;--muted:#7a728f;--uyku:#6ab7ff;--uyku-bg:#e8f4ff;--turk:#ff6b6b;--turk-bg:#ffe9e9;--klasik:#f5b642;--klasik-bg:#fff5e0;--hayvan:#5ec98a;--hayvan-bg:#e6f7ec;--kisa:#a875e8;--kisa-bg:#f2e9ff;--card:#fff;--shadow:0 8px 24px rgba(90,70,140,.12);--shadow-lg:0 16px 44px rgba(90,70,140,.20)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);line-height:1.7;background:linear-gradient(180deg,var(--cream),var(--lavender));min-height:100vh}
h1,h2,h3,.logo{font-family:'Baloo 2',cursive}img,svg{max-width:100%}a{color:inherit}
header.site{position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);background:rgba(253,246,236,.9);border-bottom:2px solid rgba(168,117,232,.15)}
nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px;flex-wrap:wrap}
.logo{font-size:1.5rem;font-weight:800;color:var(--kisa);display:flex;align-items:center;gap:8px;text-decoration:none}.logo span{font-size:1.7rem}
.nav-links{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;list-style:none}
.nav-links a{padding:7px 13px;border-radius:14px;text-decoration:none;font-weight:700;font-size:.9rem;color:var(--muted);transition:.2s}
.nav-links a:hover{background:#fff;color:var(--ink)}.nav-links a.active{background:var(--kisa);color:#fff;box-shadow:0 4px 12px rgba(168,117,232,.4)}
.search-box{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:8px 14px;box-shadow:var(--shadow);border:2px solid transparent;transition:.2s}
.search-box:focus-within{border-color:var(--kisa)}.search-box input{border:none;outline:none;font-family:inherit;font-size:.95rem;width:140px;background:none;color:var(--ink)}
.hero{max-width:1180px;margin:0 auto;padding:44px 18px 10px;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;background:linear-gradient(90deg,var(--kisa),var(--turk),var(--klasik));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--kisa)}
.hero p{font-size:1.15rem;color:var(--muted);max-width:640px;margin:14px auto 0;font-weight:600}
.hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.hero-badges span{background:#fff;padding:8px 16px;border-radius:20px;font-weight:700;font-size:.9rem;box-shadow:var(--shadow)}
main{max-width:1180px;margin:0 auto;padding:10px 18px 60px}
.crumb{font-size:.9rem;font-weight:700;color:var(--muted);padding:16px 0 4px}.crumb a{color:var(--kisa);text-decoration:none}.crumb a:hover{text-decoration:underline}
.cat-section{margin-top:40px;scroll-margin-top:80px}
.cat-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:12px 20px;border-radius:20px;box-shadow:var(--shadow)}
.cat-head h2,.cat-head h1{font-size:1.5rem}.cat-head a{text-decoration:none}.cat-emoji{font-size:1.8rem}
.cat-count{margin-left:auto;font-size:.85rem;font-weight:800;background:rgba(255,255,255,.6);padding:4px 12px;border-radius:14px;color:var(--ink)}
.cat-intro{color:var(--muted);font-weight:600;margin:-6px 4px 18px}
.sec-uyku .cat-head{background:var(--uyku-bg)}.sec-uyku h2,.sec-uyku h1,.sec-uyku a{color:var(--uyku)}
.sec-turk .cat-head{background:var(--turk-bg)}.sec-turk h2,.sec-turk h1,.sec-turk a{color:var(--turk)}
.sec-klasik .cat-head{background:var(--klasik-bg)}.sec-klasik h2,.sec-klasik h1,.sec-klasik a{color:#d9941a}
.sec-hayvan .cat-head{background:var(--hayvan-bg)}.sec-hayvan h2,.sec-hayvan h1,.sec-hayvan a{color:var(--hayvan)}
.sec-kisa .cat-head{background:var(--kisa-bg)}.sec-kisa h2,.sec-kisa h1,.sec-kisa a{color:var(--kisa)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.card{background:var(--card);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s;border:2px solid transparent}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.card:focus-within{outline:3px solid var(--kisa);outline-offset:2px}.card .art{height:200px;width:100%;display:block}
.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{align-self:flex-start;font-size:.72rem;font-weight:800;padding:4px 11px;border-radius:12px;text-transform:uppercase;letter-spacing:.4px}
.tag.uyku{background:var(--uyku-bg);color:var(--uyku)}.tag.turk{background:var(--turk-bg);color:var(--turk)}.tag.klasik{background:var(--klasik-bg);color:#d9941a}.tag.hayvan{background:var(--hayvan-bg);color:var(--hayvan)}.tag.kisa{background:var(--kisa-bg);color:var(--kisa)}
.card h3{font-size:1.25rem;font-weight:700}.card .excerpt{color:var(--muted);font-size:.94rem;font-weight:600;flex:1}
.meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);font-weight:700;margin-top:4px}.meta b{color:var(--ink)}
.ad-slot{max-width:1180px;margin:28px auto;min-height:100px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#f4eefe,#f4eefe 12px,#efe7fb 12px,#efe7fb 24px);border:2px dashed rgba(168,117,232,.35);border-radius:16px;color:#b9a9d9;font-weight:800;font-size:.85rem;letter-spacing:.5px}
.story-page{max-width:820px}.story{background:#fff;border-radius:26px;box-shadow:var(--shadow);overflow:hidden;padding:0 0 30px;margin-top:10px}
.story-art{height:240px}.story-art svg{width:100%;height:100%;display:block}
.story .tag{margin:22px 0 0 30px}.story h1{font-size:2rem;padding:6px 30px 0}.story .meta{padding:8px 30px}
.story-text{padding:6px 30px}.story-text p{margin-bottom:15px;font-size:1.08rem}
.listen-btn{display:inline-flex;align-items:center;gap:9px;background:var(--kisa);color:#fff;border:none;font-family:inherit;font-weight:800;font-size:1rem;padding:12px 22px;border-radius:16px;cursor:pointer;margin:8px 30px;box-shadow:0 6px 16px rgba(168,117,232,.4);transition:.2s}
.listen-btn:hover{transform:translateY(-2px)}.listen-btn.playing{background:var(--turk);box-shadow:0 6px 16px rgba(255,107,107,.4)}
.summary-box{background:var(--kisa-bg);border-left:5px solid var(--kisa);padding:14px 18px;border-radius:12px;margin:14px 30px 4px;font-weight:600;color:var(--ink)}
.lesson{background:var(--klasik-bg);border-left:5px solid var(--klasik);padding:14px 18px;border-radius:12px;margin:18px 30px 0;font-weight:600}
.related{margin-top:40px}.related h2{font-size:1.4rem;margin-bottom:16px;color:var(--kisa)}
.story-faq{max-width:820px;margin:40px auto 0}.story-faq h2{font-size:1.4rem;text-align:left;margin-bottom:16px}.story-faq .faq-q{font-size:1rem}
.doc{max-width:820px}.doc-body{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:30px 34px;margin-top:10px}
.doc-body h1{font-size:2rem;margin-bottom:16px;color:var(--kisa)}.doc-body h2{font-size:1.3rem;margin:22px 0 8px;color:var(--ink)}
.doc-body p,.doc-body li{color:var(--ink);margin-bottom:12px}.doc-body ul{padding-left:20px}.doc-body a{color:var(--kisa)}
.doc-body .contact{list-style:none;padding:0}.doc-body .note{color:var(--muted);font-size:.85rem;font-style:italic}
.see-all{display:inline-block;margin-top:18px;padding:10px 20px;background:#fff;border-radius:16px;box-shadow:var(--shadow);font-weight:800;text-decoration:none;color:var(--kisa);transition:.2s}
.see-all:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.results{margin-top:20px}.results-title{font-size:1.3rem;margin-bottom:16px;color:var(--kisa)}
.result-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'tag title' 'tag ex' 'tag meta';gap:2px 14px;align-items:center;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:10px;text-decoration:none;transition:.2s}
.result-item:hover{transform:translateX(4px);box-shadow:var(--shadow-lg)}
.result-item .tag{grid-area:tag;align-self:center}.result-item .r-t{grid-area:title;font-family:'Baloo 2',cursive;font-weight:700;font-size:1.15rem}
.result-item .r-e{grid-area:ex;color:var(--muted);font-weight:600;font-size:.9rem}.result-item .r-m{grid-area:meta;color:var(--muted);font-weight:700;font-size:.8rem}
.no-res{text-align:center;padding:40px;color:var(--muted);font-weight:700;font-size:1.1rem;display:none}
.faq{margin-top:56px;scroll-margin-top:80px}.faq h2{font-size:1.8rem;text-align:center;color:var(--kisa);margin-bottom:8px}.faq .sub{text-align:center;color:var(--muted);font-weight:600;margin-bottom:24px}
.faq-item{background:#fff;border-radius:18px;margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.faq-q{width:100%;text-align:left;border:none;background:none;font-family:'Baloo 2',cursive;font-weight:600;font-size:1.1rem;color:var(--ink);padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q .chev{transition:.3s;color:var(--kisa);font-size:1.3rem;flex-shrink:0}.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-a p{padding:0 22px 20px;color:var(--muted);font-weight:600}
footer{background:#3b3355;color:#e8e2f5;text-align:center;padding:40px 18px;margin-top:40px}
footer .logo{justify-content:center;color:#fff;margin-bottom:10px}footer p{max-width:600px;margin:0 auto 6px;font-size:.92rem;opacity:.85}
.foot-cats,.foot-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 0}
.foot-cats a,.foot-links a{background:rgba(255,255,255,.12);padding:6px 14px;border-radius:14px;text-decoration:none;font-weight:700;font-size:.85rem}
.foot-links a{background:none;text-decoration:underline;opacity:.8}
footer small{opacity:.6;display:block;margin-top:16px}
.to-top{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;border:none;background:var(--kisa);color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.3s;z-index:90}
.to-top.show{opacity:1;pointer-events:auto}.to-top:hover{transform:translateY(-4px)}
@media(max-width:600px){.nav-links{order:3;width:100%;margin-left:0;justify-content:center}.search-box{margin-left:auto}.story h1,.story .tag,.story .meta,.story-text,.listen-btn,.lesson{padding-left:20px;padding-right:20px;margin-left:0;margin-right:0}.story .tag,.listen-btn{margin-left:20px}}