:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: sticky brand bar → three hash views (giris / katalog / listelerim); catalog = filter rail + cover grid; lists = list rail + contents */
:root{
  --bg:#fbf8fa; --surface:#ffffff; --sunk:#f4eef2; --line:#eadfe6; --fg:#2a1d29; --muted:#6f5e6c;
  --coral:#ec3f63; --orange:#ff7a2e; --plum:#7b2d9b; --accent:#d8325a; --accent-ink:#fff; --accent-soft:#fde7ec;
  --ok:#1f8a5b; --shadow:0 1px 2px rgb(60 20 50/.06),0 8px 24px -12px rgb(60 20 50/.18);
  --grad:linear-gradient(100deg,var(--orange),var(--coral) 55%,var(--plum));
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
}
:root,:root[data-theme]{color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tabnum{font-variant-numeric:tabular-nums}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;padding-block:10px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:42px;width:auto}
.brand .logo-dark{display:none}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a{text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;color:var(--muted);display:flex;align-items:center;gap:8px}
nav.main a:hover{color:var(--fg);background:var(--sunk)}
nav.main a[aria-current="page"]{color:var(--fg);background:var(--accent-soft)}
.count-badge{background:var(--accent);color:var(--accent-ink);font-size:12px;min-width:22px;height:22px;border-radius:11px;display:inline-grid;place-items:center;padding:0 6px}
.active-list{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.active-list select{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 10px;font-weight:700;color:var(--fg);max-width:190px}
@media (max-width:860px){.active-list label span{display:none}.brand img{height:34px}}
@media (max-width:620px){.top .wrap{flex-wrap:wrap;gap:8px}nav.main{order:3;width:100%;margin:0;justify-content:space-between}nav.main a{padding:7px 10px;font-size:14px}.active-list{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:10px 18px;font-weight:800;text-decoration:none;line-height:1.1;transition:transform .12s ease,background .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--surface);border-color:var(--line)}
.btn-ghost:hover{background:var(--sunk)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon{width:18px;height:18px;flex:none}

/* HOME */
.hero{padding-block:48px 28px}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;letter-spacing:-.01em}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:var(--muted);max-width:56ch;margin:18px 0 26px}
.claims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 28px;padding:0;list-style:none}
.claims li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;min-width:0}
.claims li b{display:block;font-family:var(--display);font-size:19px;line-height:1.15}
.claims li span{font-size:13px;color:var(--muted)}
.claims .dot{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;color:#fff}
.claims li.first{grid-column:1/-1;background:var(--grad);border:0;color:#fff}
.claims li.first span{color:rgb(255 255 255/.88)}
.claims li.first b{font-size:24px}
.claims li.first .dot{background:rgb(255 255 255/.2)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-art{position:relative}
.hero-art img{width:100%;max-width:520px;border-radius:24px;display:block;margin-left:auto}
.stack{position:absolute;left:-6%;bottom:-6%;display:flex}
.stack img{width:86px;border-radius:6px;box-shadow:var(--shadow);border:3px solid var(--surface);margin-left:-26px;transform:rotate(var(--r,0deg))}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px}
.stats div{font-family:var(--display);font-size:30px;font-weight:800;line-height:1}
.stats small{display:block;font:600 13px var(--body);color:var(--muted);margin-top:4px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:420px}.stack{left:0}}
@media (max-width:520px){.claims{grid-template-columns:1fr}}

section.band{padding-block:34px}
.band h2{font-size:clamp(26px,3vw,36px);margin-bottom:6px}
.band .sub{color:var(--muted);margin:0 0 20px}
.grades{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.grade-tile{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 12px;text-align:left;display:flex;flex-direction:column;gap:2px;transition:border-color .15s,transform .15s}
.grade-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.grade-tile b{font-family:var(--display);font-size:34px;line-height:1}
.grade-tile span{font-size:13px;color:var(--muted)}
@media (max-width:900px){.grades{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pubs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pub-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);height:96px;display:grid;place-items:center;padding:12px;position:relative}
.pub-tile img{max-height:62px;max-width:100%;width:auto}
.pub-tile small{position:absolute;right:8px;bottom:6px;font-size:11px;font-weight:800;color:#6f5e6c}
.pub-tile:hover{border-color:var(--accent)}
@media (max-width:900px){.pubs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pub-more{margin-top:10px;font-size:13px;color:var(--muted)}
.pub-more button{background:none;border:0;padding:0;text-decoration:underline;color:var(--fg);font-weight:700}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;counter-increment:s;min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:10px}
.steps b{font-family:var(--display);font-size:20px;display:block}
.steps p{margin:4px 0 0;color:var(--muted);font-size:14px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);margin-top:30px;padding-block:20px;color:var(--muted);font-size:13px}

/* CATALOG */
.cat{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;padding-block:24px 40px;align-items:start}
.filters{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);max-height:calc(100vh - 96px);overflow:auto;padding-right:6px;display:flex;flex-direction:column;gap:18px}
.fgroup h3{font:800 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.fgroup h3 button{font:700 12px var(--body);letter-spacing:0;text-transform:none;background:none;border:0;color:var(--accent);padding:0}
.search{position:relative}
.search input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px 11px 38px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
.chip small{color:var(--muted);font-weight:600}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip[aria-pressed="true"] small{color:inherit;opacity:.7}
.gchip{width:40px;height:40px;justify-content:center;padding:0;font-family:var(--display);font-size:18px}
.checks{display:flex;flex-direction:column;gap:2px}
.checks label{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:8px;font-size:14px;cursor:pointer}
.checks label:hover{background:var(--sunk)}
.checks input{accent-color:var(--accent);width:16px;height:16px}
.checks small{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.mini-input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;font-size:13px;margin-bottom:8px}
.scroll-chips{max-height:180px;overflow:auto;padding:2px}
.results-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.results-head h2{font-size:28px}
.results-head .n{color:var(--muted);font-weight:700}
.results-head select{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-weight:700}
.active-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.active-filters .chip{background:var(--accent-soft);border-color:transparent}
.active-filters .chip button{background:none;border:0;padding:0;line-height:1;font-size:16px;color:var(--accent)}
.filter-toggle{display:none}
@media (max-width:900px){
  .cat{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 auto 0 0;width:min(340px,88vw);max-height:none;background:var(--bg);z-index:40;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px));transform:translateX(-105%);transition:transform .25s ease;box-shadow:var(--shadow)}
  .filters.open{transform:none}
  .filter-toggle{display:inline-flex}
}
.drawer-close{display:none}
@media (max-width:900px){.drawer-close{display:inline-flex;align-self:flex-end}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s,transform .15s;min-width:0}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card .cov{background:var(--sunk);aspect-ratio:3/4;display:grid;place-items:center;padding:14px;border:0;width:100%;cursor:zoom-in}
.card .cov img{max-height:100%;max-width:100%;width:auto;object-fit:contain;border-radius:3px;box-shadow:0 6px 16px -6px rgb(0 0 0/.35)}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .pub{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.card h3{font-family:var(--body);font-weight:800;font-size:16px;line-height:1.25}
.card h3 button{all:unset;cursor:pointer}
.card h3 button:hover{text-decoration:underline}
.card .au{font-size:13px;color:var(--muted)}
.meta-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.gbadge{font-family:var(--display);font-weight:700;font-size:12px;background:var(--sunk);border-radius:6px;padding:1px 7px}
.pages{font-size:12px;color:var(--muted);font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:11.5px;background:var(--sunk);color:var(--fg);border-radius:6px;padding:2px 7px}
.tag.pyp{background:transparent;border:1px dashed var(--plum);color:var(--plum)}
.card .foot{margin-top:auto;padding-top:8px;display:flex;gap:6px}
.card .foot .btn{flex:1;white-space:nowrap}
.card .foot .btn[data-lists]{flex:none;width:40px;padding-inline:0}
.in-list{background:var(--ok)!important;color:#fff!important}
.more{display:flex;justify-content:center;margin-top:22px}
.empty{padding:40px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted)}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.scrim{position:absolute;inset:0;background:rgb(20 8 18/.55)}
.sheet{position:relative;background:var(--surface);border-radius:20px;max-width:900px;width:100%;max-height:100%;overflow:auto;box-shadow:var(--shadow)}
.detail{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:28px}
.detail .dcov{background:var(--sunk);border-radius:var(--r);padding:20px;display:grid;place-items:center;align-self:start}
.detail .dcov img{width:100%;border-radius:4px;box-shadow:0 10px 26px -10px rgb(0 0 0/.45)}
.detail h2{font-size:34px;margin:4px 0}
.detail .au{color:var(--muted);font-size:16px}
.detail p.sum{font-size:16px;max-width:62ch}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:16px 0;font-size:14px}
dl.facts dt{font-weight:800;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
dl.facts dd{margin:0;min-width:0}
.close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;z-index:2}
.dactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
@media (max-width:720px){.detail{grid-template-columns:1fr;padding:22px 18px}.detail .dcov{max-width:220px}.detail h2{font-size:28px}}

/* add-to-list popover */
.pop{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:270px;padding:10px}
.pop h4{margin:2px 6px 8px;font:800 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pop label{display:flex;gap:9px;align-items:center;padding:7px 8px;border-radius:8px;cursor:pointer;font-weight:700;font-size:14px}
.pop label:hover{background:var(--sunk)}
.pop label small{margin-left:auto;color:var(--muted);font-weight:600}
.pop input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.pop form{display:flex;gap:6px;margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.pop form input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px 10px;font-size:13px}

/* LISTS */
.lists{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;padding-block:24px 40px;align-items:start}
@media (max-width:900px){.lists{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.newlist{display:flex;flex-direction:column;gap:8px}
.newlist .row{display:flex;gap:8px}
.newlist input,.newlist select{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 10px;width:100%;min-width:0}
.seg{display:flex;background:var(--sunk);border-radius:999px;padding:3px}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:7px 10px;font-weight:800;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgb(0 0 0/.12)}
.listnav{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.listnav button.li{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.listnav button.li:hover{border-color:var(--accent)}
.listnav button.li[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
.listnav b{font-size:15px}
.listnav small{color:var(--muted);font-size:12.5px}
.scope{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:5px;background:var(--sunk);margin-right:6px}
.lhead{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.lhead h2{font-size:32px}
.lhead input.rename{font:800 30px var(--display);border:1px solid var(--line);border-radius:10px;padding:2px 10px;background:var(--bg);width:100%;max-width:420px}
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.summary div{background:var(--sunk);border-radius:12px;padding:12px}
.summary b{font-family:var(--display);font-size:26px;display:block;line-height:1}
.summary small{color:var(--muted);font-size:12.5px;font-weight:700}
@media (max-width:620px){.summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lfilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lfilters select{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px;max-width:100%}
.ltable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.lt{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.lt th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sunk)}
table.lt td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.lt tr:last-child td{border-bottom:0}
table.lt img{width:38px;border-radius:3px;display:block}
table.lt .t{font-weight:800}
table.lt .t button{all:unset;cursor:pointer}
table.lt .t button:hover{text-decoration:underline}
.x{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:30px;height:30px;display:grid;place-items:center;color:var(--muted)}
.x:hover{color:var(--accent);border-color:var(--accent)}
.confirm{display:flex;gap:8px;align-items:center;background:var(--accent-soft);padding:8px 12px;border-radius:12px;font-size:14px;font-weight:700;flex-wrap:wrap}
.storage-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%) translateY(20px);opacity:0;background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:70;transition:all .2s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}