/* Fallbacks measured against each web font (Playwright canvas, 100px sample): while the real font loads,
   the page is laid out on a local font sized to the same width and line box, so nothing reflows when it lands. */
@font-face{font-family:"Instrument Serif Fallback";src:local("Georgia");size-adjust:76.73%;ascent-override:129.03%;descent-override:40.4%;line-gap-override:0%}
@font-face{font-family:"Instrument Serif Fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia");size-adjust:76.73%;ascent-override:129.03%;descent-override:40.4%;line-gap-override:0%}
/* Undustit shared sheet: tokens, nav, buttons, the idea form, idea cards, the process animation.
   Pages that predate it (index.html, vaka-01/) keep their own inline copy of the same tokens. */
:root{
  color-scheme:light;
  /* White theme: warm paper, idea blue only for what you act on (fields, buttons, votes, focus),
     growth green for progress, Thursday orange only for the logo and the live signal.
     Headlines and their italics stay in ink. All text pairs pass WCAG AA on --bg. */
  --bg:#FAF9F6; --bg-2:#FFFFFF; --bg-3:#F2F0EB; --line:#E6E3DC; --line-2:#D3CFC6;
  --ink:#16181D; --ink-2:#464A52; --muted:#6B6F76; --hint:#767A81;
  --accent:#2337C6; --accent-hover:#1C2DA8; --accent-active:#172489; --accent-ink:#FFFFFF;
  --accent-soft:rgba(35,55,198,.07); --accent-line:rgba(35,55,198,.35);
  --brand:#C2410C;
  --ok:#147A4E; --ok-soft:rgba(20,122,78,.08); --warn:#8A5A00; --err:#B42318;
  --shadow:0 24px 50px -28px rgba(22,24,29,.28);
  --f-serif:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --dur-fast:100ms; --dur-base:200ms; --dur-mod:300ms; --dur-slow:500ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --gut:clamp(16px,4vw,56px); --max:1280px;
}
*{box-sizing:border-box}
/* the hidden attribute always wins, even over components that set their own display (a .btn is inline-flex) */
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;font-family:var(--f-serif);font-weight:400;line-height:1;letter-spacing:-.02em;text-wrap:balance}
h3{font-family:var(--f-body);font-weight:500;letter-spacing:-.01em;line-height:1.25}
p{margin:0} em{font-style:italic} a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* controls get an ink ring with a gap, so focus shows on any fill, including accent buttons */
.btn:focus-visible,.chip:focus-visible,.vote:focus-visible,.seg button:focus-visible,.nav-links a:focus-visible,.link:focus-visible,.pc-replay:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--bg)}
main:focus{outline:none}
/* short pages still fill the screen, so the footer never starts in view and gets pushed when fonts land */
main{min-height:calc(100svh - 64px)}
.wrap{width:min(100% - 2*var(--gut), var(--max));margin-inline:auto}
.eyebrow{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow.k{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lead{color:var(--ink-2);font-size:clamp(17px,1.4vw,19px);font-weight:300;max-width:52ch}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:60;min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;transition:top var(--dur-base) var(--ease-out)}
.skip:focus{top:12px}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover{background:#000;border-color:#000}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn.sig{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.sig:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 0 0 4px rgba(35,55,198,.16)}
.btn.sig:active{background:var(--accent-active)}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.alt:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn.sm{min-height:38px;padding:0 16px;font-size:14px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{background:var(--accent);border-color:var(--accent)}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:4px;transition:color var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out)}
.link:hover{color:var(--accent);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
/* a button that reads as a link: no frame of its own */
button.link{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
/* standalone links get a 24px tap height */
a.link:hover{transform:translateY(-1px)}
a.link{display:inline-block;padding-block:3px;line-height:1.3;transition:color var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out),text-underline-offset var(--dur-base) var(--ease-out)}

/* ---------- nav (injected by ud.js) */
.nav{position:sticky;top:0;z-index:30;background:rgba(250,249,246,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:calc(env(safe-area-inset-top,0px) + 12px) 12px}
.brand{display:inline-flex;align-items:baseline;text-decoration:none;}
.brand b{font-family:var(--f-serif);font-weight:400;font-size:25px;line-height:1}
.brand b i{color:var(--brand);display:inline-block;transition:transform var(--dur-base) var(--ease-out)}
.brand:hover b i{transform:translateX(2px) rotate(-6deg)}
.nav-r{display:flex;align-items:center;gap:8px}
.nav-links{display:flex;gap:2px}
/* TR / EN: two short links, the current one filled */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em}
.lang a{min-width:32px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;color:var(--muted);transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.lang a:hover{color:var(--ink);background:var(--bg-3)}
.lang a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.lang a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lang a[aria-current="true"]:hover{background:var(--ink);color:var(--bg)}
/* on phones the bar keeps logo, CTA and menu; the language switch moves into the menu panel */
.lang-m{display:none}
@media (max-width:560px){.nav-r > .lang{display:none}.nav.open .lang-m{display:inline-flex;align-self:flex-start;margin-top:14px}.nav-links .lang-m a{font-size:13px;padding:0;border-bottom:0;border-radius:999px;min-width:44px;min-height:40px;color:var(--muted)}.nav-links .lang-m a[aria-current="true"]{color:var(--bg)}}
.nav-links a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.nav-links a:hover{color:var(--ink);background:var(--bg-3)}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--bg-3)}
.menu-t{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:999px;background:transparent}
.menu-t svg{width:20px;height:20px}
/* "Benim": the person's own page, one icon in the bar */
.ben{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ben svg{width:18px;height:18px}
.ben:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ben[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ben:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.menu-t .i-close,.nav.open .menu-t .i-open{display:none}
.nav.open .menu-t .i-close{display:block}
@media (max-width:900px){
  .menu-t{display:inline-flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;padding:8px var(--gut) 20px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(22,24,29,.25)}
  .nav.open .nav-links{display:flex}
  .nav-links a{font-size:18px;padding:14px 0;border-radius:0;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav-links a:hover,.nav-links a[aria-current="page"]{background:transparent;color:var(--accent)}
}
.foot{border-top:1px solid var(--line);margin-top:clamp(64px,8vw,120px)}
.foot .wrap.foot-sig{display:none}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color var(--dur-fast) var(--ease-out)}
.foot a:hover{color:var(--accent)}
.foot .wrap.stil-bar{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:0 18px;padding-block:0 18px;font-size:13px;color:var(--muted)}
.stil-bar a{color:var(--ink-2);text-decoration:none;min-height:36px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.stil-bar a:hover{color:var(--accent)}
.stil-bar a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
/* a field that still needs something (temel.js alanUyar): marked in the accent, a quiet note under it */
:is(input,textarea,select)[aria-invalid="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chip[aria-invalid="true"]{box-shadow:0 0 0 3px var(--accent-soft)}
.alan-not{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.alan-not::before{content:"↑ ";color:var(--accent);font-weight:600}
.mode-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.mode-badge i{width:6px;height:6px;border-radius:50%;background:var(--warn)}
.mode-badge.live i{background:var(--ok)}

/* ---------- page head (inner pages) */
.phead{padding-block:clamp(56px,8vw,112px) clamp(32px,4vw,56px);display:grid;gap:20px}
.phead h1{font-size:clamp(48px,7vw,104px);line-height:.95;letter-spacing:-.03em;max-width:14ch}
.phead h1 em{color:var(--ink)}
.sec{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line)}
/* inner pages draw something on the right of their title, in the same hand as the case drawings */
.phead.has-art{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,5vw,80px);align-items:center}
.phead.has-art > :not(.ph-art){grid-column:1}
.phead.has-art > .ph-art{grid-column:2;grid-row:1 / span 6;align-self:center}
.ph-art{padding:18px}
.ph-art figcaption{font-size:clamp(24px,2.4vw,32px)}
@media (max-width:900px){.phead.has-art{grid-template-columns:minmax(0,1fr)}.phead.has-art > .ph-art{grid-column:1;grid-row:auto;max-width:420px}}
.sec h2{font-size:clamp(36px,4.6vw,64px);line-height:1}
.sec h2 em{color:var(--ink)}

/* ---------- idea form: one line first, the rest unfolds in place */
.iform{display:grid;gap:0;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);overflow:clip;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.iform:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 6px rgba(35,55,198,.08)}
.if-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;padding:18px 18px 16px 22px}
.if-top label{grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px}
.if-pitch{width:100%;border:0;background:transparent;resize:none;font-family:var(--f-serif);font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);padding:4px 0;min-height:1.3em;field-sizing:content;max-height:5.2em}
.if-pitch::placeholder{color:var(--hint)}
.if-pitch:focus:not(:focus-visible){outline:none}
.if-pitch:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:8px}
.if-count{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.if-count.near{color:var(--warn)} .if-count.over{color:var(--err)}
.if-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.iform.open .if-more{grid-template-rows:1fr}
.if-more > div{min-height:0;overflow:hidden}
.if-body{display:grid;gap:18px;padding:4px 22px 22px;border-top:1px solid var(--line)}
.iform.open .if-body{padding-top:20px}
.if-field{display:grid;gap:8px}
.if-field > span{font-size:13.5px;font-weight:500;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}
.if-field > span small{font-weight:300;color:var(--muted)}
.if-field textarea,.if-field input{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);padding:11px 13px;font-size:15px;line-height:1.45;transition:border-color var(--dur-fast) var(--ease-out)}
.if-field textarea{resize:vertical;min-height:72px}
.if-field textarea:focus,.if-field input:focus{outline:none;border-color:var(--accent)}
.if-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* problem, solution and features are optional: folded away under "Detay ekle" */
.if-detay{border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.if-detay summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:44px;padding:12px 14px;font-size:14px;font-weight:500;color:var(--ink-2)}
.if-detay summary::-webkit-details-marker{display:none}
.if-detay summary::before{content:"+";font-family:var(--f-mono);color:var(--accent)}
.if-detay[open] summary::before{content:"–"}
.if-detay summary small{font-weight:300;color:var(--muted)}
.if-detay summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.if-detay-in{display:grid;gap:14px;padding:0 14px 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:transparent;font-size:14px;color:var(--ink-2);transition:all var(--dur-fast) var(--ease-out)}
.chip:hover{border-color:var(--ink-2);color:var(--ink);transform:translateY(-1px)}
.chip[aria-pressed="true"]:hover{background:#000;border-color:#000;color:#fff}
.seg button[aria-pressed="true"]:hover{background:#000;color:#fff;transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip.case[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.feats{display:grid;gap:8px}
@media (max-width:640px){
  .if-cats,.cat-f{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .if-cats::-webkit-scrollbar,.cat-f::-webkit-scrollbar{display:none}
  .if-cats .chip,.cat-f .chip{flex:none}
}
.feats input{counter-increment:f}
.if-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding-top:6px}
.if-fee{font-size:13px;color:var(--muted);max-width:46ch}
.if-fee b{color:var(--ink-2);font-weight:500}
.if-status{font-size:14px;color:var(--ink-2)}
.if-status.bad{color:var(--err)}
.if-done{display:none;padding:26px 22px;gap:14px;border-top:1px solid var(--line)}
.iform.done .if-done{display:grid}
.iform.done .if-more,.iform.done .if-top,.iform.open .if-next{display:none}
.iform.done .if-done{border-top:0}
.iform.open .if-top{grid-template-columns:minmax(0,1fr)}
.if-done h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.05}
.if-done dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:4px 0 0;border-top:1px solid var(--line)}
.if-done dl div{padding:12px 12px 0 0;display:grid;gap:2px}
.if-done dl div + div{padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.if-done dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.if-done dd{margin:0;font-weight:500}
.if-done .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (max-width:640px){
  .if-two,.if-done dl{grid-template-columns:minmax(0,1fr)}
  .if-done dl div + div{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line)}
  .if-top{grid-template-columns:minmax(0,1fr)}
  .if-top .btn{justify-self:start}
}

/* ---------- idea cards (arena + home boards) */
.ideas{display:grid;gap:12px}
.icard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);transition:border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}
.icard:hover{border-color:var(--line-2);background:var(--bg-3)}
.icard .rank{font-family:var(--f-serif);font-size:34px;line-height:1;color:var(--muted);width:1.4ch;text-align:center}
.icard.top .rank{color:var(--ink)}
.icard .t{font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.005em}
.icard .t a{text-decoration:none}
.icard .t a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.icard .t a:focus-visible{outline:none}
.icard:has(.t a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.icard .m{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.icard .m .c{color:var(--ink-2)}
/* the case an idea answers: a small outlined tag, so it never reads as just another category */
.icard .m .vk{color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:0 7px;line-height:17px}
.icard .m .ex{color:var(--warn)}
.icard .body{display:grid;gap:6px;min-width:0}
.icard .days{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:4px;max-width:260px}
.icard .days i{display:block;height:100%;background:var(--ink-2);border-radius:inherit}
.vote{position:relative;z-index:2;display:grid;justify-items:center;gap:0;min-width:64px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);transition:all var(--dur-fast) var(--ease-out)}
.vote svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-out)}
.vote b{font-family:var(--f-mono);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.vote span{font-size:10.5px;font-family:var(--f-mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.vote:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.vote[aria-pressed="true"]:hover{background:var(--accent-hover)}
.vote:hover svg{transform:translateY(-2px)}
.vote[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.vote[aria-pressed="true"] span{color:var(--accent-ink)}
.vote:disabled{opacity:.5;cursor:default}
.buy{position:relative;z-index:2;display:grid;justify-items:center;gap:4px}
.buy-mine{font-family:var(--f-mono);font-size:11px;color:var(--accent);white-space:nowrap}
/* live numbers on the home page */
.sayilar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sayilar > div{display:grid;gap:4px;padding:18px 18px 18px 0}
.sayilar > div + div{padding-inline-start:18px;border-inline-start:1px solid var(--line)}
.sayilar b{font-family:var(--f-serif);font-size:clamp(32px,3.6vw,52px);line-height:1;font-variant-numeric:tabular-nums}
.sayilar span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){.sayilar{grid-template-columns:repeat(2,minmax(0,1fr))}.sayilar > div:nth-child(3){padding-inline-start:0;border-inline-start:0}.sayilar > div:nth-child(n+3){border-top:1px solid var(--line)}}
/* "Bildir": a quiet link under an idea, a short form when opened */
.bildir{padding-top:14px;border-top:1px dashed var(--line-2)}
.bildir-ac{font-size:13px;color:var(--muted)}
.bildir-f{display:grid;gap:10px}
.bildir-f fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.bildir-f legend{font-size:14px;font-weight:500;padding:0;margin-bottom:8px}
.bildir-n{position:relative;cursor:pointer}
.bildir-n input{position:absolute;opacity:0;pointer-events:none}
.bildir-n:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bildir-n:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.bildir-f textarea{width:100%;min-height:60px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 12px;background:var(--bg);font-size:14px}
.bildir-f .row{display:flex;gap:14px;align-items:center}
.bildir-d{font-size:13px;color:var(--err)}
.bildir-tamam{font-size:13.5px;color:var(--ok)}
/* how close to Thursday */
.hedef{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-2)}
.hedef::before{content:"→ ";color:var(--accent)}
.hedef.aday{color:var(--ok)}
.hedef.aday::before{content:"★ ";color:var(--ok)}
/* something went wrong: a brief notice, or a strip with a retry while the data cannot load */
.ud-toast,.veri-uyari{position:fixed;left:50%;bottom:16px;z-index:60;max-width:min(92vw,520px);display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r-md);background:var(--ink);color:var(--bg);font-size:14px;box-shadow:var(--shadow);transform:translateX(-50%)}
.ud-toast{opacity:0;transform:translate(-50%,12px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.ud-toast.in{opacity:1;transform:translateX(-50%)}
.veri-uyari button{flex:none;min-height:34px;padding:0 14px;border:1px solid var(--bg);border-radius:999px;background:transparent;color:var(--bg);font:inherit;cursor:pointer}
.veri-uyari button:hover{background:var(--bg);color:var(--ink)}
.veri-uyari button:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
.buy-ex{max-width:16ch;font-size:11.5px;line-height:1.3;color:var(--ink-2);text-align:center}
.buy-f{display:flex;gap:6px;align-items:center}
.buy-f input{width:104px;min-height:38px;border:1px solid var(--accent);border-radius:var(--r-sm);padding:0 10px;background:var(--bg-2);font-family:var(--f-mono);font-size:14px}
.buy-f input:focus{outline:none;box-shadow:0 0 0 4px rgba(35,55,198,.14)}
.buy-f input[aria-invalid="true"]{border-color:var(--err)}
.buy-x{border:0;background:none;min-height:38px;padding:0 4px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.buy-x:hover{color:var(--ink)}
.icard .m .p{color:var(--ok)}
/* while a price is being picked the control takes its own row under the title */
.icard:has(.buy-f){grid-template-columns:auto minmax(0,1fr)}.icard:has(.buy-f) .buy{grid-column:2;justify-items:start;gap:8px}
.buy-q{display:flex;flex-wrap:wrap;gap:6px}
/* "haber ver": one optional e-mail field under a sent idea or a backed one */
.haber{display:grid;gap:8px;padding-top:14px;border-top:1px dashed var(--line-2)}
.haber p{font-size:14px;color:var(--ink-2)}
.haber-r{display:flex;flex-wrap:wrap;gap:8px}
.haber input{flex:1 1 200px;min-width:0;min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 12px;background:var(--bg);font-size:15px}
.haber input:focus{outline:none;border-color:var(--accent)}
.haber input[aria-invalid="true"]{border-color:var(--err)}
.haber-d{font-size:13px;color:var(--err);min-height:1em}
.haber-tamam{font-size:14px;color:var(--ok)}
.buy-q .chip{min-height:38px;font-family:var(--f-mono);font-size:14px}
.vote.pop svg{animation:pop .4s var(--ease-out)}
@keyframes pop{40%{transform:translateY(-5px) scale(1.2)}}
.empty{padding:28px;border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--ink-2);display:grid;gap:6px}
.empty b{color:var(--ink);font-weight:500}
.ex-note{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- Thursday countdown */
.thu{display:inline-flex;align-items:center;gap:12px;padding:8px 14px 8px 10px;border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;color:var(--ink-2);background:var(--bg-2)}
.thu .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(194,65,12,.5);animation:pulse 2.4s infinite}
.thu b{font-family:var(--f-mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
a.thu{text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
a.thu:hover{border-color:var(--accent);background:var(--accent-soft)}
a.thu:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.thu.on{border-color:var(--brand);color:var(--brand)}
.thu.on b{color:var(--brand)}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(194,65,12,0)}100%{box-shadow:0 0 0 0 rgba(194,65,12,0)}}

/* ---------- the process: sketch to shelf. One drawing goes rough → demanded → co-designed (the wobbly
   pencil lines straighten into clean ones) → prototype → boxed and pre-sold → on the shelf. */
.proc{position:relative;display:grid;gap:14px;min-width:0}
.pc-stage{position:relative;aspect-ratio:5/4;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(60% 60% at 60% 60%,rgba(35,55,198,.05),transparent 70%),var(--bg);overflow:hidden;isolation:isolate}
.pc-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.45;mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent)}
.pc-card,.pc-pre,.pc-pay{position:absolute;left:5%;top:6%;width:50%;z-index:2}
/* the idea card stays small in its corner and steps back once written, so the drawing carries the story */
.pc-card{width:42%;transform-origin:0 0}
.proc.s2 .pc-card{transform:scale(.84)}
.pc-card{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);box-shadow:var(--shadow);transition:opacity var(--dur-mod) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.pc-card .h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.pc-card .tag{padding:2px 8px;border:1px solid var(--line-2);border-radius:999px}
.pc-txt{font-family:var(--f-serif);font-size:clamp(16px,1.6vw,21px);line-height:1.15;min-height:2.3em;color:var(--ink)}
.pc-txt::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:2px;vertical-align:-.1em;background:var(--accent);animation:blink 1s steps(1) infinite}
.proc.s2 .pc-txt::after{display:none}
@keyframes blink{50%{opacity:0}}
.pc-buy{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-2);opacity:.3;transition:opacity var(--dur-mod) var(--ease-out)}
.pc-buy{flex-direction:column;align-items:flex-start;gap:6px}
/* demand without figures: a row of people filling in as they say "alırdım" */
.pc-meter{display:flex;flex-wrap:wrap;gap:4px}
.pc-meter i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-2);transition:background-color 200ms var(--ease-out) calc(var(--i) * 70ms),border-color 200ms var(--ease-out) calc(var(--i) * 70ms)}
.proc.s2 .pc-meter i{background:var(--accent);border-color:var(--accent)}
.proc.s2 .pc-buy{opacity:1}
.proc.s5 .pc-card{opacity:0;transform:translateY(-10px)}
.pc-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.pc-bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.pc-bar i{display:block;height:100%;width:0;background:var(--ok);transition:width 1100ms var(--ease-io)}
.pc-pre{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);opacity:0;transform:translateY(10px);transition:opacity var(--dur-mod) var(--ease-out) 150ms,transform var(--dur-mod) var(--ease-out) 150ms}
.pc-pre .pc-row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.proc.s5 .pc-pre{opacity:1;transform:none}
.proc.s5 .pc-pre .pc-bar i{width:100%}
.pc-pre .ok{font-family:var(--f-mono);font-size:11px;color:var(--ok);opacity:0;transition:opacity var(--dur-base) linear 1100ms}
.proc.s5 .pc-pre .ok{opacity:1}
.proc.s6 .pc-pre{opacity:0;transform:translateY(-10px);transition-delay:0ms}
.pc-pay{display:grid;justify-items:start;gap:6px;padding:14px 16px;border:1px solid rgba(20,122,78,.3);border-radius:var(--r-md);background:linear-gradient(160deg,var(--ok-soft),var(--bg-2) 70%);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:opacity var(--dur-mod) var(--ease-out) 200ms,transform var(--dur-slow) var(--ease-out) 200ms}
.pc-pay .eb{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.pc-pay b{font-family:var(--f-serif);font-weight:400;font-size:clamp(30px,3.2vw,44px);line-height:.95;color:var(--ink)}
.pc-pay b em{color:var(--ink)}
.pc-pay span{font-size:12px;line-height:1.4;color:var(--ink-2)}
.proc.s6 .pc-pay{opacity:1;transform:none}

/* the drawing */
.pc-draw{position:absolute;right:0;bottom:5%;width:76%}
.pc-draw svg{display:block;width:100%;height:auto;overflow:visible}
.pc-draw text{font-family:var(--f-mono);font-size:9.5px}
.dw-sk{fill:none;stroke:var(--ink-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1100ms var(--ease-io),opacity 500ms var(--ease-out)}
/* the clean drawing is its own path, faded in over the sketch (a CSS d: morph is not supported everywhere, Safari) */
.dw-tm{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 600ms var(--ease-out) 150ms,fill 600ms ease}
.proc.s1 .dw-sk{stroke-dashoffset:0}
.proc.s1 .m2{transition-delay:120ms}.proc.s1 .m3,.proc.s1 .m4{transition-delay:200ms}
.proc.s1 .m5{transition-delay:300ms}.proc.s1 .m6{transition-delay:520ms}.proc.s1 .m7{transition-delay:640ms}
.dw-hatch path{fill:none;stroke:var(--muted);stroke-width:.9;stroke-linecap:round;opacity:0;transition:opacity 400ms ease}
.proc.s1 .dw-hatch path{opacity:.7;transition-delay:900ms}
/* co-design: the same strokes straighten (CSS d), the pencil hatching lifts away */
.proc.s3 .dw-sk{opacity:0}
.proc.s3 .dw-tm{opacity:1}
.proc.s3 .dw-hatch path{opacity:0;transition-delay:300ms}
/* prototype: wood, grain, hinges, dimensions, and the fold it makes */
.proc.s4 .dw-board{fill:#BFE3DA}
.proc.s4 .dw-edge{fill:#9CCFC1}
.proc.s4 .dw-slot{fill:var(--bg-2)}
.dw-grain path{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-linecap:round;opacity:0;transition:opacity 500ms ease 250ms}
.proc.s4 .dw-grain path{opacity:1}
.dw-hinge rect{fill:var(--ink-2);opacity:0;transition:opacity 400ms ease 300ms}
.proc.s4 .dw-hinge rect{opacity:1}
.dw-dims path{fill:none;stroke:var(--muted);stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 700ms var(--ease-io) 200ms,opacity 300ms ease}
.dw-dims text{fill:var(--muted);opacity:0;transition:opacity 400ms ease 700ms}
.proc.s4 .dw-dims path{stroke-dashoffset:0}
.proc.s4 .dw-dims text{opacity:1}
/* demand: price bubbles pop around the sketch */
.dw-bub rect{fill:var(--bg-2);stroke:var(--accent);stroke-width:1}
.dw-bub text{fill:var(--accent);font-weight:500}
.dw-bub{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity 250ms ease calc(var(--i) * 130ms),transform 450ms cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 130ms)}
.proc.s2 .dw-bub{opacity:1;transform:none}
.proc.s3 .dw-bub{opacity:0;transform:translateY(-8px);transition-delay:0ms}
/* co-design: the community's notes are pinned onto the drawing */
.dw-tag rect{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1}
.dw-tag text{fill:var(--muted)}
.dw-tag tspan{fill:var(--ink);font-weight:500}
.dw-lead{fill:none;stroke:var(--accent);stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 450ms ease calc(200ms + var(--i) * 180ms)}
.dw-pin{fill:var(--accent);opacity:0;transition:opacity 200ms ease calc(500ms + var(--i) * 180ms)}
.dw-tag{opacity:0;transform:translateY(6px);transition:opacity 300ms ease calc(var(--i) * 180ms),transform 400ms var(--ease-out) calc(var(--i) * 180ms)}
.proc.s3 .dw-tag{opacity:1;transform:none}
.proc.s3 .dw-lead{stroke-dashoffset:0}
.proc.s3 .dw-pin{opacity:1}
.proc.s5 .dw-tag,.proc.s5 .dw-dims{opacity:0;transition-delay:0ms}
/* pre-sale: the product drops into its box, more boxes join */
.dw-product{transition:transform 600ms var(--ease-io),opacity 300ms ease 380ms}
.proc.s5 .dw-product{transform:translateY(26px);opacity:0}
.dw-box .front{fill:#D8B98C;stroke:var(--ink-2);stroke-width:1}
.dw-box .lid{fill:#E5CBA2;stroke:var(--ink-2);stroke-width:1}
.dw-box .side{fill:#C9A777;stroke:var(--ink-2);stroke-width:1}
.dw-box{opacity:0;transition:opacity 350ms ease,transform 500ms var(--ease-out)}
.dw-box.b1{transform:translateY(-22px)}
.dw-box.b2{transform:translateX(-26px)}
.dw-box.b3{transform:translateX(26px)}
.proc.s5 .dw-box.b1{opacity:1;transform:none;transition-delay:250ms}
.proc.s5b .dw-box.b2{opacity:1;transform:none}
.proc.s5b .dw-box.b3{opacity:1;transform:none;transition-delay:140ms}
.dw-label{opacity:0;transition:opacity 400ms ease 300ms}
.dw-label rect{fill:var(--ink)}
.dw-label .nm{font-family:var(--f-serif);font-size:15px;fill:var(--bg-2)}
.dw-label .by{font-size:6.5px;letter-spacing:.1em;fill:var(--bg-2)}
.proc.s6 .dw-label{opacity:1}
/* shelf: the counter gives way to a shelf */
.dw-counter{transition:opacity 400ms ease}
.proc.s6 .dw-counter{opacity:0}
.dw-shelf path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity 400ms ease 150ms}
.dw-shelf path + path{stroke-width:2}
.proc.s6 .dw-shelf path{opacity:1}

.pc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--adim,6),minmax(0,1fr));gap:8px}
.pc-steps li{display:grid;gap:6px;font-size:12.5px;color:var(--muted);line-height:1.25;transition:color var(--dur-base) var(--ease-out)}
.pc-steps li::before{content:"";height:2px;border-radius:2px;background:var(--line-2);transition:background-color var(--dur-base) var(--ease-out)}
.pc-steps li.on{color:var(--ink)}
.pc-steps li.on::before{background:var(--accent)}
.pc-steps li.past::before{background:var(--ink-2)}
.pc-steps li.past{color:var(--ink-2)}
.pc-replay{position:absolute;right:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);font-size:12.5px;color:var(--ink-2);opacity:0;pointer-events:none;transition:opacity var(--dur-mod) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.pc-replay svg{width:14px;height:14px;transition:transform 500ms var(--ease-out)}
.pc-replay:hover svg{transform:rotate(-300deg)}
.pc-replay:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.proc.end .pc-replay{opacity:1;pointer-events:auto}
.pc-ex{position:absolute;left:12px;bottom:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
@media (max-width:640px){
  .pc-stage{aspect-ratio:4/5}
  .pc-card,.pc-pre,.pc-pay{left:5%;top:5%;width:90%}
  .pc-draw{width:94%;right:3%;bottom:4%}
  .pc-ex{display:none}
  .pc-replay{top:auto;bottom:10px;right:auto;left:10px}
  .pc-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
}

/* ---------- open case band (home pages) */
.case-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3.4vw,48px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
.cb-txt{display:grid;gap:18px;justify-items:start}
.cb-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);padding:4px 10px;border:1px solid rgba(20,122,78,.3);border-radius:999px}
.cb-tag i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.cb-h{font-size:clamp(34px,4vw,58px);line-height:1}
.cb-h em{color:var(--ink)}
.cb-txt p{color:var(--ink-2);font-weight:300;max-width:56ch}
.cb-txt dl{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:0;margin:0;border-top:1px solid var(--line);width:100%}
.cb-txt dl div{padding:12px 20px 0 0;display:grid;gap:2px}
.cb-txt dl div + div{padding-inline-start:20px;border-inline-start:1px solid var(--line)}
.cb-txt dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cb-txt dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.cb-acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.cb-art{margin:0;display:grid;gap:8px;justify-items:center;padding:24px;border-radius:var(--r-md);background:var(--bg);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px}
.cb-art svg{width:100%;max-width:340px;height:auto;overflow:visible}
.cb-l path{fill:var(--bg-2);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.cb-l path.th{fill:none;stroke:var(--muted);stroke-width:.8}
.cb-c{fill:none;stroke:var(--muted);stroke-width:.7;stroke-dasharray:10 3 2 3}
.cb-d path{fill:none;stroke:var(--ink-2);stroke-width:.8}
.cb-d text{font-family:var(--f-mono);font-size:10px;fill:var(--ink-2)}
.cb-art figcaption{font-family:var(--f-serif);font-size:clamp(28px,3vw,40px);line-height:1;color:var(--ink)}
/* labels sit on a patch of the drawing's own paper, so the grid never runs through the letters */
.cb-art{--art-bg:var(--bg)}
.cb-art svg text{paint-order:stroke;stroke:var(--art-bg);stroke-width:5px;stroke-linejoin:round}
.cb-art figcaption{background:var(--art-bg);padding:2px 10px;border-radius:8px}
@media (max-width:900px){.case-band{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.cb-txt dl{grid-template-columns:minmax(0,1fr)}.cb-txt dl div + div{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line)}}

/* ---------- discover strip: the deeper pages, one line each */
.disc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.disc a{display:grid;gap:10px;align-content:start;padding:28px 24px 32px 0;text-decoration:none;border-bottom:1px solid var(--line);transition:color var(--dur-fast) var(--ease-out)}
.disc a + a{padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.disc b{font-family:var(--f-serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.05}
.disc p{color:var(--muted);font-size:14.5px;font-weight:300}
.disc .go{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);transition:color var(--dur-fast) var(--ease-out)}
.disc .go svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-out)}
.disc a:hover b,.disc a:hover .go{color:var(--accent)}
.disc a:hover .go svg{transform:translateX(4px)}
@media (max-width:900px){.disc{grid-template-columns:repeat(2,minmax(0,1fr))}.disc a:nth-child(3){padding-inline-start:0;border-inline-start:0}}
@media (max-width:560px){.disc{grid-template-columns:minmax(0,1fr)}.disc a + a{padding-inline-start:0;border-inline-start:0}}
/* phones: the rank leaves its column and sits on the card's top edge, so titles keep the width */
@media (max-width:560px){
  .icard{grid-template-columns:minmax(0,1fr) auto}
  .icard .rank:not(:empty){position:absolute;top:-10px;left:14px;width:auto;padding:1px 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);font:500 11.5px/1.4 var(--f-mono);color:var(--ink-2)}
  .icard .rank:not(:empty)::before{content:"#"}
  .icard .rank:empty{display:none}
  .icard:has(.buy-f){grid-template-columns:minmax(0,1fr)}.icard:has(.buy-f) .buy{grid-column:1}
}

/* ---------- idea detail dialog */
dialog.idlg{width:min(720px,100% - 24px);max-height:min(88vh,920px);padding:0;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);color:var(--ink);box-shadow:0 40px 120px -30px rgba(22,24,29,.3)}
dialog.idlg::backdrop{background:rgba(22,24,29,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog.idlg[open]{animation:dlg var(--dur-mod) var(--ease-out)}
@keyframes dlg{from{opacity:0;transform:translateY(12px) scale(.98)}}
.idlg header{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px 14px 24px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.idlg .x{width:40px;height:40px;border-radius:999px;border:1px solid var(--line-2);background:transparent;display:inline-flex;align-items:center;justify-content:center}
.idlg .x:hover{border-color:var(--ink-2)}
.idlg .hd-r{display:flex;align-items:center;gap:8px;flex:none}
.idlg .own{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-md);font-size:14px;color:var(--ink-2)}
.idlg .own .link{background:none;border:0;padding:0;font:inherit;color:var(--err);text-decoration-color:currentColor;cursor:pointer}
.idlg .x svg{width:18px;height:18px}
.idlg .in{display:grid;gap:26px;padding:24px}
.idlg h2{font-size:clamp(30px,3.6vw,44px);line-height:1.05}
.idlg dl{margin:0;display:grid;gap:16px}
.idlg dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.idlg dd{margin:0;color:var(--ink-2)}
.idlg dd ul{margin:0;padding-inline-start:18px}
.crit{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.crit-row{display:grid;grid-template-columns:13ch minmax(0,1fr) 5ch;gap:12px;align-items:center;font-size:14px}
.crit-row output{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);text-align:end}
.stars{display:flex;gap:4px}
.stars button{width:34px;height:30px;border-radius:6px;border:1px solid var(--line-2);background:transparent;font-family:var(--f-mono);font-size:12px;color:var(--muted);transition:all var(--dur-fast) var(--ease-out)}
.stars button:hover{border-color:var(--ink-2);color:var(--ink)}
.stars button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.notes{display:grid;gap:10px}
.note{display:grid;gap:4px;padding:12px 14px;border-left:2px solid var(--line-2);background:var(--bg);border-radius:0 var(--r-sm) var(--r-sm) 0}
.note.oneri{border-left-color:var(--ok)} .note.endise{border-left-color:var(--warn)}
.note small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.note-form{display:grid;gap:10px}
.note-form .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.note-form textarea{width:100%;min-height:72px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);padding:11px 13px;resize:vertical}
.note-form textarea:focus{outline:none;border-color:var(--accent)}
@media (max-width:560px){.crit-row{grid-template-columns:minmax(0,1fr) auto}.crit-row .stars{grid-column:1 / -1;grid-row:2}}


/* ---------- motion: entrance, scroll reveal, drawings. Styles tune it with these properties. */
:root{--in-y:22px;--in-x:0px;--in-scale:1;--in-rot:0deg;--in-blur:0px;--in-dur:800ms;--in-ease:cubic-bezier(.22,1,.36,1);--in-step:80ms;--draw-dur:1400ms}
@keyframes ud-in-h{from{transform:translate(var(--in-x),var(--in-y)) scale(var(--in-scale)) rotate(var(--in-rot))}}
@keyframes ud-in{from{clip-path:inset(0 0 100% 0);transform:translate(var(--in-x),var(--in-y)) scale(var(--in-scale)) rotate(var(--in-rot));filter:blur(var(--in-blur))}to{clip-path:inset(-20% -20% -20% -20%)}}
@media (prefers-reduced-motion:no-preference){
  .hero-l > *,.phead > *,.case-head .txt > *,.compose-l > *,.mast > *,.show > *{animation:ud-in var(--in-dur) var(--in-ease) both}
  .hero-l > :nth-child(2),.phead > :nth-child(2),.case-head .txt > :nth-child(2),.compose-l > :nth-child(2),.mast > :nth-child(2){animation-delay:calc(var(--in-step) * 1)}
  .hero-l > :nth-child(3),.phead > :nth-child(3),.case-head .txt > :nth-child(3),.compose-l > :nth-child(3),.mast > :nth-child(3){animation-delay:calc(var(--in-step) * 2)}
  .hero-l > :nth-child(4),.phead > :nth-child(4),.case-head .txt > :nth-child(4),.compose-l > :nth-child(4),.mast > :nth-child(4){animation-delay:calc(var(--in-step) * 3)}
  .hero-l > :nth-child(n+5),.phead > :nth-child(n+5),.case-head .txt > :nth-child(n+5),.compose-l > :nth-child(n+5){animation-delay:calc(var(--in-step) * 4)}
  .hero #proc,.intro #proc,.case-head .cb-art,.compose .after{animation:ud-in calc(var(--in-dur) * 1.2) var(--in-ease) calc(var(--in-step) * 3) both}
  /* the page title only rises in: a clipped start would hide it from the browser's first paint (LCP) */
  :is(.hero-l,.phead,.case-head .txt,.compose-l,.mast) > :is(h1,:has(h1)){animation-name:ud-in-h}
  .rv{clip-path:inset(0 0 100% 0);transform:translate(var(--in-x),var(--in-y)) scale(var(--in-scale)) rotate(var(--in-rot));filter:blur(var(--in-blur));transition:clip-path var(--in-dur) var(--in-ease) var(--d,0ms),transform var(--in-dur) var(--in-ease) var(--d,0ms),filter var(--in-dur) var(--in-ease) var(--d,0ms)}
  .rv.in{clip-path:inset(-20% -20% -20% -20%);transform:none;filter:none}
  .rv-jump .rv{transition:none!important}
  .cb-art.will-draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--draw-dur) cubic-bezier(.65,0,.35,1)}
  .cb-art.will-draw .cb-l path:nth-child(2){transition-delay:120ms}.cb-art.will-draw .cb-l path:nth-child(3){transition-delay:220ms}
  .cb-art.will-draw .cb-l path.th{transition-delay:520ms;transition-duration:600ms}
  .cb-art.will-draw .cb-d path,.cb-art.will-draw .cb-c{transition-delay:700ms}
  .cb-art.will-draw .cb-d text,.cb-art.will-draw figcaption{opacity:0;transition:opacity 500ms ease 900ms}
  .cb-art.will-draw.drawn path{stroke-dashoffset:0}
  .cb-art.will-draw.drawn .cb-d text,.cb-art.will-draw.drawn figcaption{opacity:1}
  .cb-art.will-draw .cb-c{stroke-dasharray:1;stroke-dashoffset:1}
  .cb-art.will-draw.drawn .cb-c{stroke-dasharray:10 3 2 3;stroke-dashoffset:0;transition-delay:1000ms}
}

@view-transition{navigation:auto}
/* page change: the header stays put, the old page lifts away, the new one rises in */
.nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vt-out 220ms var(--ease-io) both}
::view-transition-new(root){animation:vt-in 420ms var(--ease-out) 80ms both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(28px)}}
/* space for parts the script fills in, so nothing below them jumps */
#form:empty{min-height:120px}
#proc:empty{aspect-ratio:25/22}
.thu:empty{min-height:38px;min-width:240px}
@media (max-width:640px){#form:empty{min-height:170px}#proc:empty{aspect-ratio:375/560}}
/* phones: the drawing's labels stay readable (at least ~11px on screen at 390px; measured) */
@media (max-width:640px){.pc-draw text{font-size:10.5px}.dw-label .by{font-size:8px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important;animation-iteration-count:1!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- Kâğıt, premium pass (owner's pick, 24 Oct 2026)
   Same paper and same rule (blue only for what you act on), set quieter and richer: ivory paper with a
   faint grain, a deep midnight blue instead of the default-looking one, tighter radii, hairlines in
   place of soft shadows, bigger and tighter headlines, more air between sections.
   Scoped to Kâğıt so Oyuncu keeps its own tokens. Contrast on --bg: ink 16.9, ink-2 8.6, muted 5.1, accent 10.4. */
:root[data-stil="kagit"]{
  --bg:#F8F6F1; --bg-2:#FDFCF9; --bg-3:#F0EDE5; --line:#E4DFD4; --line-2:#CFC8BA;
  --ink:#141519; --ink-2:#43464D; --muted:#686B71; --hint:#74777D;
  --accent:#1F2F86; --accent-hover:#18256E; --accent-active:#121C55;
  --accent-soft:rgba(31,47,134,.06); --accent-line:rgba(31,47,134,.3);
  --shadow:0 1px 0 rgba(20,21,25,.04),0 30px 60px -40px rgba(20,21,25,.22);
  --r-sm:6px; --r-md:10px; --r-lg:14px;
}
[data-stil="kagit"] body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-stil="kagit"] .nav{background:rgba(248,246,241,.82)}
[data-stil="kagit"] .btn.sig:hover{box-shadow:0 0 0 4px rgba(31,47,134,.14)}
[data-stil="kagit"] .iform:focus-within{box-shadow:0 0 0 6px rgba(31,47,134,.07)}
[data-stil="kagit"] .buy-f input:focus{box-shadow:0 0 0 4px rgba(31,47,134,.12)}
[data-stil="kagit"] .pc-stage{background:radial-gradient(60% 60% at 60% 60%,rgba(31,47,134,.04),transparent 70%),var(--bg)}
/* type: headlines a size up and set tighter; eyebrows get a hairline lead-in like a printed catalogue */
[data-stil="kagit"] h1{letter-spacing:-.035em}
[data-stil="kagit"] .phead h1{font-size:clamp(52px,7.6vw,120px);line-height:.92}
[data-stil="kagit"] .sec h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.03em;line-height:.98}
[data-stil="kagit"] .phead > .eyebrow,[data-stil="kagit"] .hero-l > .eyebrow,[data-stil="kagit"] .sec .wrap > .eyebrow{display:inline-flex;align-items:center;gap:12px}
[data-stil="kagit"] .phead > .eyebrow::before,[data-stil="kagit"] .hero-l > .eyebrow::before,[data-stil="kagit"] .sec .wrap > .eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
[data-stil="kagit"] .eyebrow{letter-spacing:.16em}
/* surfaces: hairline, no float; cards lift by their border, not a shadow */
[data-stil="kagit"] .sec{padding-block:clamp(72px,9vw,136px)}
[data-stil="kagit"] .case-band,[data-stil="kagit"] .iform,[data-stil="kagit"] .pc-stage{box-shadow:var(--shadow)}
[data-stil="kagit"] .icard:hover{border-color:var(--ink-2);background:var(--bg-2)}
[data-stil="kagit"] .btn{letter-spacing:.005em}
[data-stil="kagit"] .foot{border-top-color:var(--line-2)}
/* second pass: fewer boxes, fewer colours, slower settle. Lists and side notes become ruled columns
   like a printed catalogue; figures go to ink; the footer signs off with the wordmark. */
[data-stil="kagit"]{--in-y:16px;--in-blur:6px;--in-dur:1000ms;--in-step:110ms}
[data-stil="kagit"] .how3,[data-stil="kagit"] .open3{gap:clamp(20px,3vw,44px)}
[data-stil="kagit"] .how3 li,[data-stil="kagit"] .open3 div,[data-stil="kagit"] .arena aside div{padding:20px 0 0;border:0;border-top:1px solid var(--ink);border-radius:0;background:transparent}
[data-stil="kagit"] .how3 li::before{color:var(--ink)}
[data-stil="kagit"] .big2{border:0;border-block:1px solid var(--ink);border-radius:0}
[data-stil="kagit"] .big2 div{padding:28px 24px 28px 0}
[data-stil="kagit"] .big2 div + div{padding-inline-start:24px;border-inline-start:1px solid var(--line-2)}
[data-stil="kagit"] .big2 b{color:var(--ink)}
[data-stil="kagit"] .cb-tag{color:var(--ink-2);border-color:var(--line-2);background:transparent}
/* ideas read as ruled rows, not stacked cards */
[data-stil="kagit"] .ideas{gap:0;border-top:1px solid var(--ink)}
[data-stil="kagit"] .icard{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding-inline:4px}
[data-stil="kagit"] .icard:hover{background:var(--bg-2);border-color:var(--line-2)}
[data-stil="kagit"] .icard .rank{color:var(--hint)}
/* the sign-off */
[data-stil="kagit"] .foot .wrap.foot-sig{display:block;overflow:hidden;padding-block:clamp(40px,6vw,88px) 0;font-family:var(--f-serif);font-size:min(24vw,360px);line-height:.78;letter-spacing:-.045em;color:var(--ink);white-space:nowrap;user-select:none}
[data-stil="kagit"] .foot-sig i{color:var(--brand)}
[data-stil="kagit"] .foot{margin-top:clamp(80px,10vw,160px)}
[data-stil="kagit"] .slot,[data-stil="kagit"] .empty{border-radius:0;background:transparent}

/* ---------- type that fits two languages (24 Oct 2026)
   <html lang> follows ?dil, so uppercase labels get the right dotted İ in Turkish and plain I in English,
   and hyphenation uses the right dictionary. None of the faces ship a real italic for body text or bold
   for the serif, so the browser is never allowed to fake one: emphasis inside running text is set in the
   serif italic (Kâğıt) or as weight (Oyuncu) instead of a slanted sans. */
body{font-synthesis:none}
p,li,dd,figcaption,.lead{text-wrap:pretty}
@media (max-width:600px){p,li,dd{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 3}}
p em,li em,dd em,.lead em{font-family:var(--f-serif);font-style:italic;font-size:1.1em;line-height:1;letter-spacing:0}
dd,td,.cb-n,.icard .m,.buy-mine,output{font-variant-numeric:tabular-nums}
q:lang(en){quotes:"“" "”"}

/* the product photo in a case's technical sheet; a dashed empty frame until the admin adds one */
.foy-gorsel{margin:0;display:grid;place-items:center;aspect-ratio:4/3;width:100%;max-width:460px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-2);overflow:hidden}
.foy-gorsel img{display:block;width:100%;height:100%;object-fit:contain}
.foy-gorsel.yok{border:1.5px dashed var(--line-2);background:transparent;color:var(--muted);align-content:center;gap:10px;padding:16px;text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.foy-gorsel.yok svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* "Google ile devam et": Google's neutral button (white, grey outline, its own mark) */
.btn.google{background:#fff;color:#1f1f1f;border:1px solid #747775;gap:10px}
.btn.google svg{width:18px;height:18px;flex:none}

/* share panel: the image card on the left, the ways to send it on the right */
dialog.paylas-dlg{width:min(860px,100% - 24px)}
.paylas-dlg header h2{font-size:clamp(20px,2.2vw,26px)}
.pl-ic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;padding:20px 24px 26px;align-items:start}
.pl-kart{margin:0;aspect-ratio:4/5;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg);overflow:hidden;color:var(--muted);font-size:14px}
.pl-kart img{display:block;width:100%;height:100%;object-fit:cover}
.pl-yan{display:grid;gap:16px;align-content:start}
.pl-yan p{margin:0;color:var(--ink-2);font-size:15px}
.pl-dugme,.pl-agi{display:flex;flex-wrap:wrap;gap:8px}
.pl-link{display:flex;gap:8px}
.pl-link input{flex:1;min-width:0;min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 10px;background:var(--bg);font:400 13px/1 var(--f-mono);color:var(--ink-2)}
@media (max-width:640px){.pl-ic{grid-template-columns:minmax(0,1fr);padding:16px}.pl-kart{max-width:300px;justify-self:center;width:100%}}

/* quick sign-up in front of the idea form (arayuz.js kayitAdimi) */
.kayit{display:grid;gap:12px;justify-items:start;margin-top:16px;padding:clamp(20px,3vw,28px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2)}
.kayit h2{font-size:clamp(20px,2.2vw,26px)}
.kayit p{color:var(--ink-2);margin:0}
.kayit form{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.kayit input{flex:1 1 240px;min-width:0;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 12px;background:var(--bg);font-size:15px}
.kayit input:focus{outline:none;border-color:var(--accent)}
.kayit .durum{font-size:14px;min-height:1.3em}
.kayit .durum.bad{color:var(--err)}
.kayit .durum.ok{color:var(--ok)}

/* long words and addresses break instead of pushing out of their box (English words run longer) */
code{overflow-wrap:anywhere}
.pc-steps li{min-width:0;overflow-wrap:break-word;hyphens:auto}

/* Turnstile: invisible unless Cloudflare wants a click, then a small box at the bottom of the screen */
.ts-kutu{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000}
.ts-kutu:empty{display:none}

/* top bar: the page links sit next to the logo, the actions (write, account, language) stay on the right */
@media (min-width:901px){
  .nav .wrap{justify-content:flex-start}
  .nav-r{flex:1;min-width:0}
  .nav-links{margin-inline:16px auto}
}

/* what a case offers: sales partnership, idea prize, or both (supabase/12-vaka-modeli.sql) */
.model-etiket{display:flex;flex-wrap:wrap;gap:6px}
.model-etiket span{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);color:var(--ink)}