@font-face{font-family:"Sora";font-weight:600;font-display:swap;src:url(/fonts/sora-600.woff2) format("woff2")}
:root{
  --bg:#0e1628;--bg2:#121b31;--panel:#16213b;--panel2:#1c2947;--line:#2a3a5f;--line2:#36497a;--fg:#eef2fa;--mute:#9aa7c4;
  --ac:#5b8cf0;--ac2:#1f45a8;--ac-ink:#ffffff;--ok:#4cc38a;--warn:#e7b04f;--bad:#ef6a5e;--r:16px;
  --glow:rgba(77,127,224,.32);--ring:0 0 0 3px rgba(77,127,224,.22);--ease:cubic-bezier(.2,.7,.2,1);
  --grad:linear-gradient(135deg,#3563d6 0%,#5b8cf0 55%,#82a9ff 100%);
  font-family:Inter,"Segoe UI Variable Text","Segoe UI",-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:14px;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg)}
body{display:grid;grid-template-columns:200px 1fr;min-height:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1{font-size:22px;letter-spacing:-.02em}
h2{font-size:15px}
h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:700}
.mute{color:var(--mute)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:14px}

aside{border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.logo{font-weight:800;font-size:18px;letter-spacing:-.03em;padding:0 8px}
.logo span{display:block;font-size:11px;font-weight:500;color:var(--mute);letter-spacing:0}
nav{display:flex;flex-direction:column;gap:2px}
nav a{padding:8px 10px;border-radius:8px;color:var(--mute);font-weight:600}
nav a:hover{color:var(--fg);background:var(--panel)}
nav a.on{color:var(--ac-ink);background:var(--ac)}
#jobs{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-size:12px}
.job{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px}
.job b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job small{color:var(--mute);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job.running{border-color:var(--ac)}
.job.failed{border-color:var(--bad)}
.job.failed small{color:var(--bad);white-space:normal}
.spin{display:inline-block;width:9px;height:9px;border:2px solid var(--ac);border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

main{padding:26px 30px 80px;max-width:1280px;width:100%;min-width:0}
.head{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.head p{color:var(--mute);margin-top:4px;max-width:70ch;line-height:1.45}

button,.btn{font:inherit;font-weight:600;color:var(--fg);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap}
button:hover,.btn:hover{border-color:#4a5058}
button.pri{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}
button.ghost{background:none}
button.bad:hover{border-color:var(--bad);color:var(--bad)}
button.done{color:var(--ok);border-color:var(--ok)}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
textarea{width:100%;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)}
label.chk{display:flex;gap:6px;align-items:center;color:var(--mute)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pack{display:flex;flex-direction:column;gap:10px;padding:0;overflow:hidden}
.pack:hover{border-color:#4a5058}
.pack .thumb{aspect-ratio:4/3;background:var(--panel2) center/cover;border-bottom:1px solid var(--line)}
.pack .in{padding:0 14px 14px;display:flex;flex-direction:column;gap:6px}
.pack h2{line-height:1.3}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--panel2);color:var(--mute);border:1px solid var(--line)}
.tag.done{color:var(--ok);border-color:var(--ok)}
.tag.warn{color:var(--warn);border-color:var(--warn)}
.bar{height:4px;border-radius:9px;background:var(--panel2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac)}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:34px;text-align:center;color:var(--mute);line-height:1.6}
.day{margin:22px 0 10px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0}
.tabs a{padding:9px 14px;font-weight:700;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--fg);border-color:var(--ac)}

.share{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.plist{display:flex;flex-direction:column;gap:2px}
.plist a{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;font-weight:600}
.plist a:hover{background:var(--panel)}
.plist a.on{background:var(--panel2)}
.plist small{margin-left:auto;color:var(--mute);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.dot.posted{background:var(--ok)}
.dot.skipped{background:var(--mute)}
.dot.warn{background:var(--warn)}
.assets{display:flex;gap:8px;flex-wrap:wrap}
.assets a{display:block;width:92px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2)}
.assets img{display:block;width:100%}
.assets a.file{padding:12px 6px;text-align:center;font-weight:700;font-size:12px}
video{max-width:100%;max-height:440px;border-radius:8px;background:#000;display:block}
.count.over{color:var(--bad);font-weight:700}

.group{padding:0;overflow:hidden}
.group>header{padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.group>header p{color:var(--mute);line-height:1.45;flex-basis:100%;font-size:13px}
.tool{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-ink);background:var(--ac);padding:3px 8px;border-radius:6px}
.cmd{padding:14px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 190px;gap:14px}
.cmd:last-child{border-bottom:0}
.cmd.solo{grid-template-columns:1fr}
.cmd.copied .n{background:var(--ok);color:#06140c}
.cmd .n{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:var(--panel2);font-size:12px;font-weight:800;padding:0 5px}
.cmd pre{margin:8px 0 0;white-space:pre-wrap;word-break:break-word;font:12.5px/1.5 ui-monospace,"SF Mono",Menlo,monospace;color:#c9ced6;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;max-height:150px;overflow:auto}
.cmd pre.open{max-height:none}
.drop{border:1px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;padding:10px;color:var(--mute);font-size:12px;min-height:96px;cursor:pointer;position:relative;overflow:hidden}
.drop.over{border-color:var(--ac);color:var(--fg)}
#vbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:1px solid var(--ac);border-radius:10px;background:color-mix(in srgb,var(--ac) 10%,transparent);font-size:14px}
#vbar button{white-space:nowrap}
#legal{font-size:11px;line-height:1.6;color:var(--mute);padding:8px 12px 4px}
#legal a,.authlegal a{color:inherit}
.authlegal{font-size:12px;text-align:center;margin:6px 0 0}
.pcred>small{display:block;margin-top:6px}
.prow{margin:2px 0}.prow>b{font-size:17px}
.vtip{position:relative;display:inline-flex;vertical-align:middle;cursor:help;outline:none}
.vtip>i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);font-size:12px;font-style:normal;font-weight:700;color:var(--mute)}
.vtip:hover>i,.vtip:focus>i{border-color:var(--ac);color:var(--ac)}
.vtipbox{display:none;position:absolute;z-index:30;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:240px;max-width:78vw;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);box-shadow:0 8px 28px rgba(0,0,0,.25);font-size:13px;font-weight:400;line-height:1.45;text-align:left;color:var(--fg)}
.vtipbox .row{display:flex;gap:8px;margin:4px 0}
.vtipbox small{display:block;margin-top:6px;color:var(--mute)}
.vtip:hover .vtipbox,.vtip:focus .vtipbox,.vtip:focus-within .vtipbox{display:block}
.vlock{display:block;flex-basis:100%;font-size:12px;color:var(--mute);margin-top:4px}
.vlock.on{color:var(--ac)}
.vwarn{color:#d97706;font-weight:600}
.bvoice{margin-bottom:14px}
.fmtpick{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.whyhk{margin:18px auto 6px;max-width:980px;padding:22px 24px}
.whyhk h2{margin:0 0 8px;font-size:22px}
.whyhk>p{margin:0 0 16px;line-height:1.6;max-width:72ch}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.whyitem{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:10px}
.whyitem>span{flex:0 0 28px;font-size:22px;line-height:1;text-align:center}.whyitem b{display:block;margin-bottom:2px}.whyitem p{margin:0;font-size:13px;line-height:1.5}
@media (max-width:640px){.whyhk{padding:16px}.whyhk h2{font-size:19px}}
.cvreport{font-size:13px;color:var(--mute)}
.reports{padding:4px 14px}.rrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}.rrow:last-child{border:0}.rrow .grow{min-width:220px}.rrow small{display:block}
.gamesec{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}.gamesec>small{display:block;margin:4px 0 0}
.gtgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-top:10px}
.gtpick{display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:left;padding:6px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;cursor:pointer;min-width:0}
.gtpick{position:relative}.gtno{position:absolute;top:10px;left:10px;z-index:1;min-width:22px;height:22px;border-radius:11px;background:var(--ac);color:#fff;font:700 12px/22px system-ui;text-align:center;font-style:normal}
.gtpick.on{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 35%,transparent)}
.gtpick video,.gtpick .gti{width:100%;aspect-ratio:9/8;object-fit:cover;border-radius:6px;background:#0b1020;display:grid;place-items:center;font-size:30px;font-style:normal}
.gtpick b{display:block;font-size:12px;line-height:1.3;overflow-wrap:anywhere;white-space:normal}.gtpick small{display:block;white-space:normal}.gtpick small{font-size:11px;color:var(--mute);line-height:1.3}
.cryptolink{display:block;text-align:center;font-size:13px;margin-top:8px}
.uphelp{margin-top:8px;font-size:13px}
.uphelp summary{cursor:pointer;color:var(--ac);font-weight:600;padding:4px 0}
.uphelp ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:10px}
.uphelp li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px}
.uphelp li>span{font-size:20px;line-height:1}
.uphelp li p{margin:2px 0 4px}
.uphelp>p{margin:6px 0}
.drop.full{border-style:solid;border-color:var(--ok);color:var(--fg)}
.drop img,.drop video{max-height:90px;max-width:100%;border-radius:6px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop button{position:relative;z-index:1;padding:3px 8px;font-size:11px}
.notice{border:1px solid var(--warn);color:var(--warn);border-radius:8px;padding:10px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.shots a{border:1px solid var(--line);border-radius:8px;overflow:hidden;display:block;background:var(--panel2)}
.shots img{display:block;width:100%}
.vids{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.vids figure{margin:0;display:flex;flex-direction:column;gap:6px}
.vids video{max-height:360px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg a{padding:6px 11px;font-weight:700;color:var(--mute)}
.seg a.on{background:var(--panel2);color:var(--fg)}

.sw{display:inline-block;width:18px;height:18px;border-radius:5px;border:1px solid var(--line);vertical-align:middle}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;line-height:1.45}
.kv dt{color:var(--mute)}
.kv dd{margin:0}
.kv dt{display:flex;align-items:flex-start}
.kv dt .ic{margin-top:2px}
.ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:6px}
.tag .ic{width:11px;height:11px;margin-right:4px;vertical-align:-1.5px}
.tag.on{color:var(--ac);border-color:var(--ac)}
.sortbar{margin-bottom:14px}
.sortbar+.day{margin-top:6px}
.proj{display:flex;flex-direction:column;gap:12px}
.phead{display:flex;gap:14px;align-items:flex-start}
.phead p{margin-top:3px;line-height:1.4}
.phead h2 .mute{font-weight:500;font-size:12px;margin-left:4px}
.avatar{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:19px;background:var(--panel2);color:var(--mute);border:1px solid var(--line);flex:none}
.avatar.logo{overflow:hidden;padding:6px}
.avatar img{width:100%;height:100%;object-fit:contain;display:block}
.pmeta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px}
.hist{flex:none;display:flex;flex-direction:column;gap:6px}
.strip{display:flex;gap:6px}
.strip a{position:relative;width:52px;aspect-ratio:4/5;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel2) center/cover;display:grid;place-items:center;color:var(--mute)}
.strip a:hover{border-color:var(--ac)}
.strip a .ic{margin:0}
.strip small{position:absolute;left:0;right:0;bottom:0;padding:6px 2px 2px;font-size:9px;font-weight:700;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.strip a.more{font-weight:700;font-size:12px}
.hist .none{border:1px dashed var(--line);border-radius:6px;padding:9px 12px;color:var(--mute);font-size:12px}
button.open .ic{transform:rotate(180deg)}
.guide{max-width:78ch;line-height:1.6}
.guide h2{margin:22px 0 6px;font-size:16px}
.guide li{margin:4px 0}
.guide code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12.5px}
.tabs{overflow-x:auto}
.tabs a{white-space:nowrap}
.tabs a small{margin-left:6px;color:var(--mute);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 9px 4px 4px;font-size:12px;font-weight:500}
.chip i{width:22px;height:22px;border-radius:5px;border:1px solid var(--line);flex:none}
.chip b{font-weight:700}
.chip span{color:var(--mute);font-family:ui-monospace,"SF Mono",Menlo,monospace}
.marks{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mark{display:grid;place-items:center;width:64px;height:64px;padding:9px;border:1px solid var(--line);border-radius:8px;background:repeating-conic-gradient(#33373d 0 25%,#4b5059 0 50%) 0 0/16px 16px}
.mark img{max-width:100%;max-height:100%;display:block}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;min-width:0}
.tile .mark{width:100%;height:110px;padding:18px;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.tile .pic{display:block;height:110px;background:var(--panel2);border-bottom:1px solid var(--line)}
.tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.tile .cap{padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fontrow{display:flex;gap:10px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fontrow:last-child{border-bottom:0}
.fontrow .sample{font-size:26px;line-height:1.25;flex:1;min-width:240px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lib{padding:0;overflow:hidden;display:flex;flex-direction:column}
.lib:hover{border-color:#4a5058}
.pal{display:flex;height:34px;border-bottom:1px solid var(--line)}
.pal i{flex:1}
.lib .in{padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;font-size:13px}
details.group>summary{padding:14px 16px;cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;gap:8px;align-items:center}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary .ic{margin:0;transform:rotate(-90deg)}
details.group[open]>summary{border-bottom:1px solid var(--line)}
details.group[open]>summary .ic{transform:none}
.ref{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 16px;border-bottom:1px solid var(--line)}
.ref:last-child{border-bottom:0}
.ref:hover{background:var(--panel2)}
.ref small{grid-column:1;color:var(--mute);line-height:1.4}
.ref .tag{grid-row:1/3;grid-column:2;align-self:center}
.doc{max-width:96ch}
.doc h2.t1{font-size:20px}
.doc h4{margin:16px 0 4px;font-size:14px}
.doc p{margin:8px 0}
.doc pre{white-space:pre-wrap;word-break:break-word;font:12.5px/1.5 ui-monospace,"SF Mono",Menlo,monospace;color:#c9ced6;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;cursor:copy}
.doc table{border-collapse:collapse;margin:10px 0;font-size:13px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top}
.doc th{background:var(--panel)}
.doc blockquote{margin:8px 0;padding:2px 12px;border-left:3px solid var(--line);color:var(--mute)}
.doc hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.doc a{color:var(--ac)}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);font-weight:700;padding:9px 16px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}

@media (max-width:820px){
  body{grid-template-columns:1fr}
  aside{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:12px}
  nav{flex-direction:row;overflow-x:auto}
  nav a{white-space:nowrap}
  #jobs{margin-top:0}
  main{padding:18px 16px 60px}
  .share,.cmd{grid-template-columns:1fr}
  .phead{flex-wrap:wrap}
  .hist{flex-basis:100%}
  .plist{flex-direction:row;overflow-x:auto}
  .plist a{white-space:nowrap}
  .plist small{display:none}
}

/* style form colour pickers: the swatch, not an empty text box */
input[type=color]{width:44px;min-width:44px;height:38px;padding:3px;border-radius:8px;background:transparent;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}

/* style lab specimens on a library card: the carousel slide and three reel frames */
.card.lib .specimens{display:flex;gap:6px;padding:10px 10px 0;align-items:flex-start}
.card.lib .specimens img{display:block;width:96px;aspect-ratio:4/5;object-fit:cover;border-radius:6px;border:1px solid var(--line, #2a2d33)}
.card.lib .specimens img.tall{width:54px;aspect-ratio:9/16}

/* ---------- idea: the concept, its rivals, the critic ---------- */
.tag.fmt{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 45%,transparent)}
.idea{display:flex;flex-direction:column;gap:16px}
.concept blockquote{margin:14px 0 8px;font-size:clamp(24px,3.2vw,38px);line-height:1.08;font-weight:800;letter-spacing:-.02em;max-width:24ch}
.concept>p{color:var(--mute);line-height:1.55;max-width:75ch}
.concept dl{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:8px 18px;margin:16px 0}
.concept dt{color:var(--mute);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.concept dd{margin:0;line-height:1.5}
.meters{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 22px;margin-top:6px}
.meters div{display:grid;grid-template-columns:96px 1fr 22px;align-items:center;gap:8px;font-size:12px}
.meters span{color:var(--mute)}
.meters i{height:6px;border-radius:9px;background:var(--panel2);overflow:hidden}
.meters b{display:block;height:100%;background:var(--warn);border-radius:9px}
.meters b.hi{background:var(--ok)}.meters b.lo{background:var(--bad)}
.meters em{font-style:normal;font-weight:700;text-align:right}
.rounds{display:flex;gap:6px;align-items:center}.rounds i{color:var(--mute);font-style:normal}
.fixes{margin:8px 0 0;padding-left:20px;line-height:1.5}.fixes li{margin-bottom:6px}
.rivals{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rival{display:flex;flex-direction:column;gap:8px}
.rival b{font-size:17px;line-height:1.25}
.rival p{margin:0;font-size:13px;line-height:1.45}
.rival .verdict{color:var(--fg);opacity:.75;font-style:italic}
.rival button{margin-top:auto;align-self:flex-start}
.insights{margin:10px 0 0;padding-left:18px;line-height:1.55;color:var(--mute)}.insights li{margin-bottom:6px}
@media (max-width:640px){.concept dl{grid-template-columns:1fr}.concept dt{padding-top:6px}}

/* ---------- feed preview: a phone, as the post will be seen ---------- */
.feed{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.feed figure{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.feed figcaption{font-size:12px;color:var(--mute)}
.phone .screen{width:320px;border-radius:34px;border:9px solid #000;outline:1px solid var(--line);background:#000;overflow:hidden;color:#f5f5f5;font:13px/1.35 Inter,system-ui,sans-serif;position:relative}
.ig-top{display:flex;align-items:center;gap:8px;padding:10px 12px}
.ig-top .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);font-style:normal;font-weight:800;font-size:12px;outline:2px solid #e1306c;outline-offset:1px}
.ig-car{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ig-car::-webkit-scrollbar{display:none}
.ig-car img{flex:0 0 100%;width:100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:start}
.ig-dots{display:flex;gap:4px;justify-content:center;padding:8px}
.ig-dots i{width:6px;height:6px;border-radius:50%;background:#555}.ig-dots i.on{background:#3897f0}
.ig-cap{padding:0 12px 16px}
.screen.reel{aspect-ratio:9/16}
.screen.reel video{width:100%;height:100%;object-fit:cover;display:block}
.ig-reel{position:absolute;left:12px;right:60px;bottom:16px;text-shadow:0 1px 3px #000}.ig-reel p{margin:4px 0 0}
.thumbs .grid3{display:grid;grid-template-columns:repeat(3,96px);gap:2px}
.thumbs .grid3 img,.thumbs .grid3 span{width:96px;aspect-ratio:4/5;object-fit:cover;background:var(--panel2);display:block}
.rival p.mute{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.rival p.mute.open{-webkit-line-clamp:unset}

/* ---------- knowledge ---------- */
.know{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.know label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mute);font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.drop.big{min-height:120px;padding:18px;text-align:center;line-height:1.5;position:relative}
.drop.big b{color:var(--fg)}
.help{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;margin:10px 0 0;font-size:13px;line-height:1.5}
.help dt{font-weight:700}.help dd{margin:0;color:var(--mute)}
.srcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px}
.src{display:flex;flex-direction:column;gap:6px;padding:12px}
.src b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hstats{display:flex;gap:10px;flex-wrap:wrap}
.hstats .card{display:flex;flex-direction:column;gap:3px;padding:12px 14px;min-width:150px}
.hstats span{font-size:13px;color:var(--mute)}.hstats em{font-style:normal;color:var(--fg);font-weight:700}
.hlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-height:640px;overflow-y:auto}
.hrow{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.hrow p{grid-column:1/-1;margin:0;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.hrow.mine{border-left:3px solid var(--ac)}
a.tag{text-decoration:none}
.know label.chk{flex-direction:row;align-items:center;font-size:13px}

/* ---------- style bank ---------- */
.bank{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.bstyle{display:flex;flex-direction:column;gap:6px;padding:12px}
.bstyle .pal{display:flex;height:34px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.bstyle .pal i{flex:1}
.bstyle .spec{font-size:26px;line-height:1.1}
.bstyle .spec small{font-size:14px;display:block;margin-top:4px;color:var(--mute)}
.bstyle p{margin:0;font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- archive: every pack in full ---------- */
.arch{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.arch .ahook{font-size:19px;line-height:1.25}
.astrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.astrip a{flex:0 0 auto}
.astrip img{height:260px;width:auto;border-radius:8px;border:1px solid var(--line);display:block;background:var(--panel2)}
.astrip .areel{height:260px;border-radius:8px;flex:0 0 auto;background:#000}
.astrip.small img{height:150px}
.around{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:6px}
.arch details summary{cursor:pointer;color:var(--mute);font-weight:600}
@media (max-width:640px){.astrip img,.astrip .areel{height:200px}.astrip.small img{height:120px}}

/* ---------- the owner's rating ---------- */
.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:18px}
.rate{display:flex;flex-direction:column;gap:10px}
.rate .scores{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.rate .scores button{padding:8px 0;font-size:15px}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tagrow small{width:58px}
.chip{padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600}
.chip.on.good{background:color-mix(in srgb,var(--ok) 22%,transparent);border-color:var(--ok);color:var(--fg)}
.chip.on.bad{background:color-mix(in srgb,var(--bad) 22%,transparent);border-color:var(--bad);color:var(--fg)}
.screen.reel .playbtn{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:#000a;color:#fff;display:grid;place-items:center;font-style:normal;font-size:30px;cursor:pointer;border:2px solid #fff8}

/* ---------- viewer ---------- */
.viewer{position:fixed;inset:0;z-index:100;background:#000e;display:flex;flex-direction:column}
.viewer .vbar{display:flex;align-items:center;gap:14px;padding:10px 14px;color:#ddd;font-size:13px}
.viewer .vbar a{color:#ddd}
.viewer .vbar button{background:none;border:0;color:#fff;font-size:20px;padding:4px 10px}
.viewer .vstage{flex:1;position:relative;min-height:0;margin:0 56px 18px}
.viewer .vstage img,.viewer .vstage video{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.viewer .vstage iframe{position:absolute;inset:0;margin:auto;width:100%;height:100%;border:0;border-radius:6px;background:#000}
.viewer .vstage iframe.tall{width:auto;aspect-ratio:9/16;max-width:100%}
.viewer:fullscreen .vstage,.viewer:-webkit-full-screen .vstage{margin:0 0 6px}
.mbtns{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:6px}
.mwrap{position:relative;display:inline-block}
.zoombtn{position:relative;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid #fff4;background:#000a;color:#fff;font-size:18px;line-height:32px;opacity:.75;cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.zoombtn:hover{opacity:1;background:#000d}
.viewer .vnav{position:absolute;top:50%;transform:translateY(-50%);background:#0008;border:1px solid #fff3;color:#fff;font-size:34px;width:46px;height:64px;border-radius:10px;z-index:1}
.viewer .vnav.prev{left:6px}.viewer .vnav.next{right:6px}
@media (max-width:640px){.viewer .vstage{margin:0 6px 10px}.viewer .vnav{width:38px;height:54px;font-size:28px}}
@media (max-width:640px){
  .tabs{gap:0;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{padding:8px 9px;font-size:14px}
}

#linkbar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:200;background:#7a2a12;color:#fff;border:1px solid #ffffff33;border-radius:10px;padding:8px 14px;font-size:13px;box-shadow:0 6px 24px #0008;max-width:calc(100vw - 24px)}
body.offline main{opacity:.6}

/* Üret */
.drop{display:block;border:1.5px dashed var(--line);border-radius:12px;padding:18px;text-align:center;cursor:pointer;line-height:1.6}
.drop.over,.drop:hover{border-color:var(--accent, #4d7fe0);background:#ffffff08}
.upfiles{display:flex;flex-direction:column;gap:8px}
.upfile{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);border-radius:10px}
.upfile.error{border-color:#b4442a}
.upfile .grow{display:flex;flex-direction:column;min-width:0}
.upfile .grow b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upthumb{width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.upthumb img,.upthumb video{width:100%;height:100%;object-fit:cover}
.limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.lim{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:4px}
.lim input{width:64px;margin-left:6px}
@media (hover:hover){.mbtns{opacity:0;transition:opacity .15s}*:hover>.mbtns,.mbtns:focus-within{opacity:1}}

/* Takvim */
.calbar{flex-wrap:wrap;gap:10px}
.calwrap{display:grid;grid-template-columns:260px 1fr;gap:14px;margin-top:14px;align-items:start}
.calside{position:sticky;top:10px;max-height:calc(100vh - 40px);overflow:auto;display:flex;flex-direction:column;gap:8px}
.calpack{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:10px;cursor:grab;background:var(--panel)}
.calpack.on{outline:2px solid #4d7fe0}
.calpack img,.calpack i{width:40px;height:70px;object-fit:cover;border-radius:6px;flex:none;background:var(--panel2)}
.calpack b{display:block;font-size:13px;line-height:1.3}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calhead{font-size:12px;color:var(--mute,#999);padding:2px 6px}
.calday{min-height:110px;border:1px solid var(--line);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:4px;background:var(--panel)}
.calday.out{opacity:.45}.calday.today{border-color:#4d7fe0}.calday.over{background:rgba(77,127,224,.16)}
.calday .dn{font-size:12px;opacity:.7}
.calitem{font-size:12px;line-height:1.25;padding:4px 6px;border-radius:6px;background:#4d7fe033;border-left:3px solid #4d7fe0;cursor:grab;overflow:hidden}
.calitem small{display:block;opacity:.7}
.calitem.posted{background:#2e7d3233;border-color:#4caf50}.calitem.failed{background:#b4442a33;border-color:#e0603e}.calitem.partial{border-color:#e0b03e}
.modal{position:fixed;inset:0;z-index:150;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
.modal>.card{width:min(620px,100%);max-height:90vh;overflow:auto}
.nets{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:8px}
.net{border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.net small{width:100%;opacity:.7}.net.ok{border-color:#4caf50}
.conns{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.conn{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}
.conn.ok{border-color:#4caf50}.conn.manual{opacity:.75}
.conn label{display:flex;flex-direction:column;gap:3px;font-size:12px}
@media (max-width:900px){.calwrap{grid-template-columns:1fr}.calside{position:static;max-height:none;flex-direction:row;overflow-x:auto}.calpack{min-width:220px}.calday{min-height:80px}}

.more{display:none}
/* ---------- phone and small tablet ---------- */
@media (max-width:820px){
  html,body{overflow-x:hidden}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  aside{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px}
  .logo span{display:none}
  #jobs{flex:1;min-width:0;margin:0;max-width:60%}
  nav{position:fixed;left:0;right:0;bottom:0;z-index:60;flex-direction:row;justify-content:space-around;gap:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));overflow:visible}
  nav a{flex:1;text-align:center;padding:12px 4px;min-height:44px;font-size:13px;border-radius:10px}
  nav .sec{display:none}
  .more{display:block;flex:1;text-align:center;padding:12px 4px;color:var(--mute);font-weight:600;font-size:13px;border-radius:10px}
  body.more nav .sec{display:block;position:absolute;right:8px;width:160px;background:var(--panel2);border:1px solid var(--line);text-align:left;padding:12px 14px}
  body.more nav .sec:nth-of-type(5){bottom:calc(60px + 3*46px + env(safe-area-inset-bottom))}
  body.more nav .sec:nth-of-type(6){bottom:calc(60px + 2*46px + env(safe-area-inset-bottom))}
  body.more nav .sec:nth-of-type(7){bottom:calc(60px + 46px + env(safe-area-inset-bottom))}
  body.more nav .sec:nth-of-type(8){bottom:calc(60px + env(safe-area-inset-bottom))}
  main{padding:16px 14px 24px;overflow-wrap:anywhere}
  main *{min-width:0}
  main img,main video,main iframe{max-width:100%}
  h1{font-size:20px}
  .head{align-items:flex-start;margin-bottom:14px}
  .head>*{max-width:100%}
  .card.row,form.row,.row{gap:8px}
  .card{padding:12px}
  button,.btn,select,input,textarea{min-height:40px;font-size:16px}
  input[type=checkbox],input[type=radio]{min-height:0}
  .row>input.grow,.row>select{flex:1 1 140px}
  /* Bugün: the new-pack form stacks */
  form[data-form=new]{flex-direction:column;align-items:stretch}
  form[data-form=new] button{width:100%}
  /* Üret */
  .limits{grid-template-columns:1fr 1fr}
  .drop{padding:14px}
  .upfile{flex-wrap:wrap}.upfile select{flex:1 1 100%}
  /* Tasarım / paket sekmeleri scroll */
  .tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
  .tabs a{flex:none}
  .seg{overflow-x:auto;max-width:100%}
  /* arşiv, ızgaralar: tek ya da iki sütun */
  .grid{grid-template-columns:1fr 1fr!important}
  .grid2,.grid3,.share,.cmd{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)!important}
  .viewer .vbar{flex-wrap:wrap}
  .modal>.card{max-height:100vh;border-radius:0;width:100%;min-height:100%}
  .fontrow,.chips{flex-wrap:wrap}
  pre{white-space:pre-wrap;overflow-wrap:anywhere}
  table{display:block;overflow-x:auto}
  #linkbar{left:8px;right:8px;transform:none;top:6px}
}
@media (max-width:480px){.grid{grid-template-columns:1fr!important}}
/* hover-less screens: the zoom and download buttons are always there */
@media (hover:none){.mbtns{opacity:1!important}}
/* calendar on a phone: a list of days */
@media (max-width:820px){
  .calwrap{grid-template-columns:1fr}
  .calside{position:static;max-height:none;flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .calpack{min-width:230px;flex:none}
  .calgrid{display:flex;flex-direction:column;gap:6px}
  .calhead,.calday.empty{display:none}
  .calday{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:flex-start;padding:8px 10px;gap:6px}
  .calday .dn{width:44px;font-size:14px;font-weight:700;opacity:1}
  .calday .dn::after{content:attr(data-w);display:block;font-size:11px;font-weight:500;opacity:.6}
  .calday.out{display:none}
  .calday .calitem{flex:1 1 200px}
  .calday .add{margin-left:auto;font-size:12px;color:var(--mute);align-self:center}
}

@media (max-width:820px){
  .calside h3{flex:none;writing-mode:horizontal-tb;align-self:center;white-space:nowrap;margin-right:4px}
  .calgrid.nopick .calday:not(.has){display:none}
  .calgrid.nopick:not(:has(.has))::after{content:attr(data-empty);color:var(--mute);padding:14px}
  .calgrid.pick .calday.out{display:flex;opacity:.4}
  form[data-form=new]>*{flex:none!important;min-height:0;width:100%}
  form[data-form=new] input,form[data-form=new] select{height:44px}
}

/* ---------- Tasarım Stilleri: list, detail, form, picker ---------- */
.sdots{display:inline-flex;gap:3px;vertical-align:middle}
.sdots i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.swrap{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.sfil{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;display:flex;flex-direction:column;gap:16px;padding-right:4px}
.sfgroup{display:flex;flex-direction:column;gap:2px}
.sfgroup h3{margin-bottom:6px}
.sfgroup>a{display:flex;justify-content:space-between;gap:8px;padding:5px 9px;border-radius:7px;color:var(--mute);font-weight:600}
.sfgroup>a:hover{background:var(--panel);color:var(--fg)}
.sfgroup>a.on{background:var(--panel2);color:var(--fg)}
.sfgroup small{color:var(--mute);font-weight:500}
.sfgroup .seg{flex-wrap:wrap}
.scolors{display:flex;flex-wrap:wrap;gap:6px}
.scolors a{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid transparent}
.scolors a i{width:18px;height:18px;border-radius:50%;display:block}
.scolors a.on{border-color:var(--fg)}
.scolors a.x{color:var(--mute);font-size:12px}
.schips{display:flex;flex-wrap:wrap;gap:5px}
.schips a,.schips label{font-size:12px;font-weight:600;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--mute);background:var(--panel)}
.schips a.on{color:var(--ac);border-color:var(--ac)}
.schips.form label{display:inline-flex;gap:5px;align-items:center;cursor:pointer}
.schips.form label:has(input:checked){color:var(--ac);border-color:var(--ac)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.scard{padding:0;overflow:hidden;display:flex;flex-direction:column}
.scard:hover{border-color:#4a5058}
.sthumb{display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--line)}
.sthumb img{width:100%;height:100%;object-fit:cover;display:block}
.scard .in{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.scard b{font-size:14px;line-height:1.25}
.scard small{font-size:12px}
.sdet{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:18px;align-items:start}
.sspecs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.07fr);gap:12px;align-items:start}
.sspecs img{width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
.sroles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.sroles a,.sroles span{display:flex;flex-direction:column;gap:2px;font-size:12px}
.sroles i{display:block;height:46px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);margin-bottom:4px}
.sroles small{color:var(--mute);font-family:ui-monospace,Menlo,monospace}
.sroles.mini{grid-template-columns:repeat(4,1fr);gap:6px}.sroles.mini i{height:26px;border-radius:6px}.sroles.mini b{font-size:11px}
.sswatch{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sswatch a{display:flex;flex-direction:column;gap:2px;font-size:12px;min-width:0}
.sswatch i{display:block;height:54px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);margin-bottom:4px}
.sswatch small{color:var(--mute);font-family:ui-monospace,Menlo,monospace}
.sswatch em{font-style:normal;color:var(--mute);font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sgrad{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.sgrad i{display:block;height:64px;border-radius:9px}
.sgrad div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sgrad code{font-size:11.5px;color:var(--mute);cursor:copy;overflow-wrap:anywhere}
.sfont{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sfont .sample{font-size:30px;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.sfont p{font-size:12.5px;line-height:1.45}
.stable{overflow-x:auto}
.stable table{border-collapse:collapse;font-size:12.5px;width:100%}
.stable th,.stable td{border:1px solid var(--line);padding:5px 8px;text-align:left}
.stable th{background:var(--panel2)}
.srad{display:flex;flex-wrap:wrap;gap:10px}
.srad span{display:flex;flex-direction:column;gap:2px;min-width:92px;padding:12px 14px;border:2px solid var(--line);background:var(--panel2);font-size:12px;color:var(--mute)}
.srad b{color:var(--fg)}
.sshad{display:flex;flex-wrap:wrap;gap:16px;padding:6px 2px}
.sshad span{padding:16px 18px;border-radius:10px;background:#f4f4f6;color:#222;font-size:12px;font-weight:600}
.scode{position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;padding:12px 14px}
.scode .tabs{margin:0;flex-wrap:wrap;overflow:visible}
.scode .tabs a{padding:7px 9px;font-size:12.5px}
.scodepre{flex:1;overflow:auto;margin:0;white-space:pre;font:12px/1.5 ui-monospace,"SF Mono",Menlo,monospace;color:#c9ced6;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px}
.sform .scolor input[name^="c-"]{width:96px}
.sfprev{display:flex;flex-direction:column;gap:6px}
.stylepick{display:flex;align-items:center;gap:12px;text-align:left;padding:6px 14px 6px 6px;min-height:52px;max-width:100%;white-space:normal}
.stylepick img{width:40px;height:50px;object-fit:cover;border-radius:6px;display:block}
.stylepick span{display:flex;flex-direction:column;gap:2px}
.stylepick.on{border-color:var(--ac)}
.stylepick:not(.on){padding-left:14px}
body.spicking{overflow:hidden}
.spick{position:fixed;inset:0;z-index:90;background:rgba(5,6,8,.72);display:grid;place-items:center;padding:24px}
.spbox{width:min(1320px,100%);height:min(860px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.sphead,.spfoot{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.spfoot{border-bottom:0;border-top:1px solid var(--line)}
.sphead input{flex:1}
.spbody{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);position:relative;overflow:hidden}
.spbody>*{min-height:0}
.spsec{overflow:auto;padding:12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
/* rows of a set height: in this scrolling panel the grid otherwise squeezes its rows into the panel's height */
.spgrid{overflow:auto;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));grid-auto-rows:230px;gap:10px;align-content:start;outline:none}
.spcard{display:flex;flex-direction:column;gap:5px;padding:0 0 8px;text-align:left;overflow:hidden;font-weight:600;cursor:pointer;background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.spcard:hover{border-color:#4a5058}
/* a fixed height: the grid sizes its rows before the lazy pictures load, and an aspect ratio alone counts for nothing then */
.spcard .sthumb{flex:none;display:block;position:relative;width:100%;height:170px;aspect-ratio:auto;border-bottom:1px solid var(--line)}
.spcard .sthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spcard .sthumb>.sdots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.spcard b{font-size:12.5px;line-height:1.25;padding:0 8px}
.spcard .sdots{padding:0 8px}
.spcard .sdots i{width:9px;height:9px}
.spcard.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.sppv{overflow:auto;padding:14px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.sppvimg img,.sppvsheet{width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
.sppv ul{margin:0;padding-left:18px;color:var(--mute);font-size:12.5px;line-height:1.45}
.spfont{font-size:20px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.sdet{grid-template-columns:1fr}.scode{position:static;max-height:70vh}.spbody{grid-template-columns:190px minmax(0,1fr)}.sppv{display:none}.spick.pv .sppv{display:flex;position:absolute;inset:auto 0 0 0;max-height:60%;background:var(--panel);border-top:1px solid var(--line);z-index:2}}
@media (max-width:820px){
  .swrap{grid-template-columns:1fr}
  .sfil{position:static;max-height:none;flex-direction:row;overflow-x:auto;gap:18px;padding-bottom:6px}
  .sfgroup{min-width:200px;max-height:240px;overflow:auto}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .sspecs{grid-template-columns:1fr}
  .spick{padding:0}
  .spbox{width:100%;height:100%;border-radius:0}
  .spbody{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .spsec{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);max-height:180px}
  .spsec .sfgroup{min-width:180px}
  .spgrid{grid-template-columns:repeat(2,1fr)}
  .spcard .sthumb{height:200px}
  .spgrid{grid-auto-rows:260px}
  .spfoot{flex-wrap:wrap;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .spfoot #spcount{display:none}
  .spfoot button{flex:1 1 140px;white-space:normal}
  .sphead b{display:none}
  .spickrow .stylepick{flex:1 1 100%}
}

/* =====================================================================
   v2 görünüm katmanı: siyah-lacivert tema, yumuşak geçişler.
   Sadece görünüm; yukarıdaki yapıyı ezer, davranışa dokunmaz.
   ===================================================================== */
html{background:var(--bg)}
body{background:
  radial-gradient(1100px 620px at 12% -8%,rgba(31,69,168,.22),transparent 60%),
  radial-gradient(900px 560px at 100% 0%,rgba(77,127,224,.10),transparent 62%),
  linear-gradient(180deg,#141821 0%,var(--bg) 40%);
  background-attachment:fixed;grid-template-columns:240px minmax(0,1fr);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(77,127,224,.45);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#22314f transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#334469;border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#2a3c63;background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}
h1{font-size:26px;font-weight:750;letter-spacing:-.025em;background:linear-gradient(180deg,#fff 0%,#b9c7e6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-weight:650;letter-spacing:-.01em}
h3{color:#7f8db0;letter-spacing:.12em}
a,button,.btn,input,select,textarea,.card,.tag,.chip,nav a,.tabs a,.seg a{transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}

/* ---------- sol menü ---------- */
body>aside{padding:20px 14px;gap:22px;border-right:1px solid rgba(52,72,112,.55);
  background:linear-gradient(180deg,rgba(27,36,59,.92),rgba(20,24,35,.92));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body>aside>.logo{font-family:Sora,Inter,sans-serif;letter-spacing:-.03em;display:flex;flex-direction:column;gap:2px;padding:4px 10px 4px 52px;position:relative;min-height:40px;justify-content:center;font-size:20px;font-weight:600}
body>aside>.logo::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:url(/logo.svg) center/contain no-repeat;filter:drop-shadow(0 4px 12px rgba(255,90,60,.35))}
body>aside>.logo span{font-family:Inter,"Segoe UI",sans-serif;letter-spacing:0;font-size:11px;color:#7382a3;font-weight:500;line-height:1.3}
nav{gap:3px}
nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#8f9cb9;font-weight:600;position:relative;border:1px solid transparent}
nav a .ni{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:transform .25s var(--ease)}
nav a:hover{color:#e7ecf6;background:rgba(77,127,224,.08);border-color:rgba(77,127,224,.12)}
nav a:hover .ni{transform:translateX(1px) scale(1.06)}
nav a.on{color:#fff;background:linear-gradient(135deg,rgba(42,86,198,.42),rgba(77,127,224,.18));border-color:rgba(111,155,255,.28);
  box-shadow:0 8px 24px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.06)}
nav a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#6f9bff;box-shadow:0 0 12px #6f9bff}
nav a.on .ni{color:#9dbcff}
nav .navsep{height:1px;margin:10px 8px;background:linear-gradient(90deg,transparent,rgba(52,72,112,.9),transparent)}
.job{background:linear-gradient(180deg,rgba(33,47,75,.9),rgba(27,36,56,.9));border:1px solid var(--line);border-radius:12px;padding:10px 11px}
.job.running{border-color:rgba(77,127,224,.55);box-shadow:0 0 0 1px rgba(77,127,224,.15),0 8px 22px -12px var(--glow)}
.spin{border-color:#6f9bff;border-right-color:transparent}

/* ---------- ana alan ---------- */
main{padding:30px 36px 90px;max-width:1360px}
main.enter>*{animation:enter .38s var(--ease) both}
main.enter>*:nth-child(2){animation-delay:.04s}
main.enter>*:nth-child(3){animation-delay:.08s}
main.enter>*:nth-child(n+4){animation-delay:.12s}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.head{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(45,60,94,.7)}
.head p{color:#8593b1;margin-top:6px}

/* ---------- düğmeler ---------- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;color:#dbe3f3;
  background:linear-gradient(180deg,rgba(43,59,94,.9),rgba(32,44,70,.9));border:1px solid var(--line2);border-radius:11px;padding:8px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.3)}
button:hover,.btn:hover{border-color:#3a5288;color:#fff;background:linear-gradient(180deg,rgba(30,46,80,.95),rgba(37,52,83,.95));transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0) scale(.98)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ring)}
button.pri,.btn.pri{color:#fff;background:var(--grad);border-color:rgba(111,155,255,.55);
  box-shadow:0 8px 22px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.22)}
button.pri:hover,.btn.pri:hover{filter:brightness(1.08);box-shadow:0 12px 28px -8px rgba(77,127,224,.55),inset 0 1px 0 rgba(255,255,255,.25);border-color:#8fb1ff}
button.ghost{background:transparent;border-color:transparent;box-shadow:none}
button.ghost:hover{background:rgba(77,127,224,.1);border-color:rgba(77,127,224,.2)}
button.bad:hover{border-color:rgba(239,106,94,.6);color:#ff8f85;background:rgba(239,106,94,.08)}
button.done{color:var(--ok);border-color:rgba(76,195,138,.5);background:rgba(76,195,138,.08)}
button:disabled,button:disabled:hover{opacity:.45;transform:none;filter:none;cursor:not-allowed}
button .ic,.btn .ic{margin-right:0}
.zoombtn,.viewer .vbar button,.viewer .vnav{transform:none}

/* ---------- yazı alanları, seçimler ---------- */
input,select,textarea{color:var(--fg);background:rgba(20,25,37,.75);border:1px solid var(--line2);border-radius:11px;padding:9px 12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
input::placeholder,textarea::placeholder{color:#56637f}
input:hover,select:hover,textarea:hover{border-color:#33476f}
input:focus,select:focus,textarea:focus{border-color:#5b8aec;box-shadow:var(--ring),inset 0 1px 2px rgba(0,0,0,.35);background-color:rgba(22,29,45,.95)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fa6d8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
select option,select optgroup{background:#1c273e;color:var(--fg)}
input[type=checkbox],input[type=radio]{accent-color:var(--ac);width:16px;height:16px;padding:0;cursor:pointer;box-shadow:none}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;padding:0;border:0;border-radius:99px;background:#2b3a5b;box-shadow:none;cursor:pointer;accent-color:var(--ac)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #4d7fe0;box-shadow:0 2px 10px var(--glow)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:4px solid #4d7fe0}
input[type=range]::-moz-range-progress{background:#4d7fe0;height:6px;border-radius:99px}
input[type=search]::-webkit-search-cancel-button{filter:invert(.6)}
input[type=file]{color:var(--mute)}
label.chk{color:#93a0bd;cursor:pointer}
textarea{line-height:1.6}

/* ---------- kartlar, etiketler ---------- */
.card{background:linear-gradient(180deg,rgba(32,44,70,.78),rgba(25,33,52,.78));border:1px solid rgba(52,72,112,.6);border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8)}
a.card:hover,.lib:hover,.scard:hover{border-color:rgba(91,138,236,.5);transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(0,0,0,.9),0 0 0 1px rgba(77,127,224,.12)}
.pack .thumb{border-bottom:1px solid var(--line)}
.tag{padding:3px 9px;border-radius:99px;background:rgba(40,56,91,.7);color:#93a1c0;border:1px solid rgba(52,72,112,.8);font-weight:650}
.tag.on,.tag.fmt{color:#a9c2ff;border-color:rgba(91,138,236,.5);background:rgba(42,86,198,.16)}
.tag.done{color:#6fdca6;border-color:rgba(76,195,138,.45);background:rgba(76,195,138,.08)}
.tag.warn{color:#f0c46e;border-color:rgba(231,176,79,.45);background:rgba(231,176,79,.08)}
a.tag:hover{border-color:#4d7fe0;color:#fff}
.bar{height:5px;background:#253352}
.bar i{background:var(--grad);box-shadow:0 0 10px var(--glow)}
.empty{border:1px dashed #22314f;border-radius:var(--r);background:rgba(27,36,56,.45);color:#7f8db0;padding:40px}
.notice{border-color:rgba(231,176,79,.5);background:rgba(231,176,79,.06);border-radius:12px}
h3.day{display:flex;align-items:center;gap:10px}
h3.day::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(52,72,112,.8),transparent)}
.chip{border-radius:99px}
.chip i{border-radius:6px}
.meters i{background:#253352}
.mark{border-radius:12px}
.tile{border-radius:12px;border-color:rgba(52,72,112,.7);background:rgba(29,40,64,.8)}
.tile:hover{border-color:#3a5288}
.tile .mark{overflow:hidden}
.tile .mark img{width:auto;height:auto;max-width:100%;max-height:74px;object-fit:contain}
.assets a,.shots a{border-radius:10px;border-color:rgba(52,72,112,.7)}
.astrip img,.astrip .areel{border-radius:12px;border-color:rgba(52,72,112,.7)}
video{border-radius:12px}
.src,.conn,.net,.lim{border-radius:12px}
.hlist{border-color:rgba(52,72,112,.7)}
.hrow{border-color:rgba(52,72,112,.5)}
.hrow.mine{border-left-color:#5b8aec}
.ref:hover{background:rgba(77,127,224,.06)}

/* ---------- sekmeler, bölümlü seçiciler ---------- */
.tabs{gap:4px;border-bottom:0;padding:4px;background:rgba(24,31,48,.7);border:1px solid rgba(52,72,112,.6);border-radius:14px;width:fit-content;max-width:100%}
.tabs a{padding:8px 14px;border-radius:10px;border-bottom:0;margin:0;color:#8391b0}
.tabs a:hover{color:#e7ecf6;background:rgba(77,127,224,.08)}
.tabs a.on{color:#fff;background:linear-gradient(135deg,rgba(42,86,198,.55),rgba(77,127,224,.3));box-shadow:0 6px 16px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.08)}
.seg{border:1px solid rgba(52,72,112,.7);border-radius:12px;padding:3px;gap:3px;background:rgba(24,31,48,.7)}
.seg a{border-radius:9px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px}
.seg a:hover{color:#e7ecf6;background:rgba(77,127,224,.08)}
.seg a.on{background:linear-gradient(135deg,rgba(42,86,198,.55),rgba(77,127,224,.3));color:#fff}
.schips a,.schips label{background:rgba(29,40,64,.8);border-color:rgba(52,72,112,.8)}
.schips a:hover,.schips label:hover{border-color:#3a5288;color:#e7ecf6}
.schips a.on,.schips.form label:has(input:checked){color:#bcd0ff;border-color:rgba(91,138,236,.6);background:rgba(42,86,198,.2)}
.sfgroup>a{border-radius:9px}
.sfgroup>a:hover{background:rgba(77,127,224,.08)}
.sfgroup>a.on{background:rgba(42,86,198,.25);color:#fff}
.scolors a.on{border-color:#8fb1ff}
details.group>summary:hover{color:#fff;background:rgba(77,127,224,.05)}
details.group>summary .ic{transition:transform .25s var(--ease)}
details[open]>*:not(summary){animation:enter .3s var(--ease) both}

/* ---------- Üret penceresi ---------- */
form[data-form=create]{padding:24px;gap:18px;position:relative;overflow:hidden;border-color:rgba(77,127,224,.28);
  background:radial-gradient(700px 240px at 0% 0%,rgba(42,86,198,.18),transparent 70%),linear-gradient(180deg,rgba(32,44,70,.88),rgba(24,31,48,.88))}
form[data-form=create]::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(111,155,255,.6),transparent)}
form[data-form=create] textarea{min-height:170px;font-size:15px;padding:14px 16px;border-radius:14px;background-color:rgba(18,22,32,.8)}
form[data-form=create] h3{margin:0}
form[data-form=create]>.row:last-child{padding-top:14px;border-top:1px solid rgba(52,72,112,.5)}
form[data-form=create] button.pri{padding:11px 24px;font-size:15px}
.drop{border:1.5px dashed #2a3c63;border-radius:14px;background:rgba(27,36,59,.5);padding:22px}
.drop b{color:#cfdcfa}
.drop.over,.drop:hover{border-color:#5b8aec;background:rgba(42,86,198,.1);box-shadow:inset 0 0 40px -14px var(--glow)}
.upfile{border-color:rgba(52,72,112,.7);border-radius:12px;background:rgba(27,36,59,.55)}
.upthumb{border-radius:10px}
.lim{border-color:rgba(52,72,112,.7);background:rgba(27,36,59,.5);padding:12px}
.lim:hover{border-color:#33476f}
.stylepick{border-radius:12px}
.stylepick.on{border-color:rgba(91,138,236,.65);box-shadow:0 0 0 1px rgba(77,127,224,.2)}
form[data-form=new]{padding:10px;border-color:rgba(77,127,224,.22)}

/* ---------- projeler ---------- */
.proj{padding:18px 20px}
.avatar{border-radius:13px;background:linear-gradient(160deg,#2b3c62,#1d2943);border-color:rgba(52,72,112,.8);color:#9db3e0}
.strip a{border-radius:9px;border-color:rgba(52,72,112,.8)}
.strip a:hover{border-color:#5b8aec;transform:translateY(-2px)}
.hist .none{border-color:#22314f;border-radius:10px}
.plist a{border-radius:10px}
.plist a:hover{background:rgba(77,127,224,.08)}
.plist a.on{background:rgba(42,86,198,.25)}

/* ---------- komutlar, kod ---------- */
.tool{background:var(--grad);color:#fff;border-radius:7px}
.cmd pre,.doc pre,.scodepre{background:rgba(18,22,32,.8);border-color:rgba(52,72,112,.7);border-radius:10px;color:#c3cde2}
.cmd .n{background:#2b3b5f;border-radius:7px}
.drop.full{border-color:rgba(76,195,138,.6)}
.doc a{color:#8fb1ff}
.doc th,.stable th{background:rgba(33,47,75,.9)}
.doc th,.doc td,.stable th,.stable td{border-color:rgba(52,72,112,.7)}
.guide code{background:#253352}

/* ---------- açılan pencereler ---------- */
.modal,.spick{background:rgba(16,18,25,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade .2s ease both}
.modal>.card,.spbox{animation:pop .28s var(--ease) both;border-color:rgba(77,127,224,.3);box-shadow:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(77,127,224,.08)}
.modal>.card{background:linear-gradient(180deg,#1d2840,#181f30)}
.spbox{background:linear-gradient(180deg,#1d2840,#181f30);border-radius:18px}
.spcard{background:rgba(29,40,64,.85);border-color:rgba(52,72,112,.7);border-radius:12px}
.spcard:hover{border-color:#3a5288;transform:translateY(-2px)}
.spcard.on{border-color:#5b8aec;box-shadow:0 0 0 1px #5b8aec,0 10px 26px -12px var(--glow)}
.viewer{background:rgba(16,18,25,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade .2s ease both}
.viewer .vnav{background:rgba(27,36,59,.7);border-color:rgba(111,155,255,.25);border-radius:14px;transform:translateY(-50%)}
.viewer .vnav:hover{background:rgba(42,86,198,.5);transform:translateY(-50%)}
.viewer .vbar button{box-shadow:none}
.zoombtn{border-radius:10px;background:rgba(20,25,37,.72);border-color:rgba(255,255,255,.18);box-shadow:none}
.zoombtn:hover{background:rgba(42,86,198,.85)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
#toast{background:linear-gradient(135deg,#1f45a8,#4d7fe0);color:#fff;box-shadow:0 12px 30px -8px var(--glow);transform:translate(-50%,8px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
#toast.on{transform:translate(-50%,0)}
#linkbar{background:#5d3025;border-color:rgba(239,106,94,.4);border-radius:12px}

/* ---------- takvim ---------- */
.calday{border-radius:12px;background:rgba(27,36,59,.6);border-color:rgba(52,72,112,.6)}
.calday.today{border-color:#5b8aec;box-shadow:inset 0 0 0 1px rgba(77,127,224,.3)}
.calitem{border-radius:8px}
.calpack{border-radius:12px;background:rgba(29,40,64,.8)}
.calpack.on{outline-color:#5b8aec}

/* ---------- Arşiv: galeri ---------- */
.gbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:-6px 0 18px}
/* a grid, not columns: with CSS columns every poster that loaded changed a tile's height and the columns rebalanced,
   so tiles jumped from one column to another; here each tile has its shape before anything loads */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-items:start}
.gtile{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#1b2438;border:1px solid rgba(52,72,112,.55);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);animation:enter .45s var(--ease) both}
.gtile>a{display:block;position:relative;overflow:hidden}
.gtile img,.gtile video{display:block;width:100%;height:auto;max-height:none;border-radius:0;transition:transform .6s var(--ease)}
/* a video takes its 9:16 place at once (or the shape a tile sets in --ar); images on an image shelf are 4:5 */
.gtile video{aspect-ratio:var(--ar,9/16);object-fit:cover;background:#0b0f1a}
.gal.imgs .gtile img{aspect-ratio:4/5;object-fit:cover;background:#0b0f1a}
h4.shelf{margin:18px 0 10px;font-size:13px;font-weight:700;color:var(--mute);letter-spacing:.02em}
.gtile:hover{transform:translateY(-3px);border-color:rgba(91,138,236,.55);box-shadow:0 22px 50px -22px rgba(0,0,0,.95),0 0 0 1px rgba(77,127,224,.15)}
.gtile:hover img,.gtile:hover video{transform:scale(1.035)}
.gtile figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(17,20,28,.72) 45%,rgba(17,20,28,.94));opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.gtile:hover figcaption,.gtile:focus-within figcaption{opacity:1;transform:none}
.gtile figcaption a{pointer-events:auto;font-weight:700;font-size:13px;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gtile figcaption a:hover{color:#a9c2ff}
.gtile figcaption button{pointer-events:auto}
.gtile figcaption .row{gap:5px}
.gtile figcaption .tag{font-size:10.5px;padding:2px 7px;background:rgba(27,36,59,.75)}
.gkind{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:99px;
  background:rgba(20,25,37,.7);color:#cfdcfa;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);pointer-events:none}
.gkind.v{color:#bcd0ff;border-color:rgba(111,155,255,.4)}
.gtile .mbtns{z-index:3}
@media (hover:none){.gtile figcaption{opacity:1;transform:none}}
@media (max-width:820px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gtile{border-radius:12px}}

/* ---------- yazı tipi deneme ---------- */
.ftest{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(21,27,40,.7);border:1px solid rgba(52,72,112,.65)}
.ftest input[type=text]{flex:1 1 260px;font-size:15px;background-color:transparent;border-color:transparent;box-shadow:none}
.ftest input[type=text]:focus{border-color:#5b8aec;box-shadow:var(--ring)}
.ftest label{display:flex;align-items:center;gap:8px;color:#8391b0;font-size:12px;font-weight:600;white-space:nowrap}
.ftest input[type=range]{width:130px}
.ftest output{min-width:42px;color:#cfdcfa;font-variant-numeric:tabular-nums}
.stmock{border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--m-canvas,#1c2130);color:var(--m-ink,#eee);border:1px solid var(--m-border,rgba(255,255,255,.1));overflow:hidden}
.stmock .mcard{background:var(--m-surface,rgba(255,255,255,.04));border:1px solid var(--m-border,rgba(255,255,255,.1));border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.stmock .mh{font-size:34px;line-height:1.08;letter-spacing:-.02em;overflow-wrap:anywhere}
.stmock .mp{color:var(--m-muted,#999);line-height:1.55;font-size:14px;overflow-wrap:anywhere}
.stmock .mrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stmock .mbtn{background:var(--m-accent,#4d7fe0);color:var(--m-on,#fff);border-radius:10px;padding:9px 16px;font-weight:700;font-size:13px}
.stmock .mbtn2{border:1px solid var(--m-border,rgba(255,255,255,.2));border-radius:10px;padding:8px 15px;font-weight:600;font-size:13px}
.stmock .mchip{background:var(--m-accent2,var(--m-accent,#4d7fe0));color:var(--m-on,#fff);border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700}
.stmock .mfield{border:1px solid var(--m-border,rgba(255,255,255,.2));border-radius:10px;padding:9px 12px;font-size:13px;color:var(--m-muted,#999);flex:1;min-width:140px}

/* ---------- telefon ---------- */
@media (max-width:820px){
  body{grid-template-columns:minmax(0,1fr);background-attachment:scroll}
  main{min-width:0;max-width:100vw}
  body>aside{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(22,28,43,.96)}
  body>aside>.logo{padding-left:46px;min-height:34px}
  body>aside>.logo::before{width:32px;height:32px;font-size:17px;left:4px}
  nav{background:rgba(24,31,48,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(52,72,112,.7)}
  nav a{flex-direction:column;gap:3px;padding:7px 4px;font-size:11.5px;justify-content:center}
  nav a.on::before{display:none}
  nav .navsep{display:none}
  nav a.more{display:flex}
  body.more nav .sec{display:flex;flex-direction:row;gap:10px;background:#1d2943;border-color:rgba(77,127,224,.3);border-radius:12px;box-shadow:0 14px 34px -10px rgba(0,0,0,.9)}
  main{padding:18px 14px 28px}
  h1{font-size:22px}
  .tabs{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Üret: languages and voices */
.langs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.lchip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:99px;background:var(--panel2);color:var(--mute);font-weight:600;cursor:pointer;user-select:none}
.lchip input{margin:0;accent-color:var(--ac)}
.lchip.on{color:var(--fg);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,var(--panel2))}
.lchip:has(input:focus-visible){box-shadow:var(--ring)}
.langrows{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.langrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.langrow b{min-width:120px}
.langrow select{flex:1;min-width:220px;max-width:520px}
.langrow .star{color:var(--mute);font-size:16px;padding:2px 8px}
.langrow .star.on{color:var(--warn)}
.tag.lang{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 45%,transparent)}

/* archive detail: the work large, its commands, its languages */
body.adlg-on{overflow:hidden}
.adlg{position:fixed;inset:0;z-index:90;background:rgba(5,9,18,.78);display:flex;align-items:center;justify-content:center;padding:24px}
.adlg-box{width:min(1240px,100%);height:min(860px,100%);display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.adlg-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.adlg-head b{display:block;font-size:15px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adlg-langs a{min-width:40px;justify-content:center}
.adlg-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,420px) 1fr}
.adlg-left{display:flex;flex-direction:column;min-height:0;padding:12px;gap:8px;border-right:1px solid var(--line);background:var(--bg)}
.adlg-media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.adlg-media img,.adlg-media video{max-width:100%;max-height:100%;border-radius:10px;background:#000;display:block}
.adlg-nav{flex:none}
.adlg-cmds{overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.acmd{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.acmd summary{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;list-style:none}
.acmd summary::-webkit-details-marker{display:none}
.acmd summary .atool{font-size:11px;font-weight:700;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);border-radius:99px;padding:1px 7px;white-space:nowrap}
.acmd p{padding:0 12px 6px}
.acmd pre{margin:0;padding:10px 12px 12px;border-top:1px solid var(--line);white-space:pre-wrap;word-break:break-word;font:12.5px/1.55 ui-monospace,Menlo,monospace;color:var(--fg);max-height:420px;overflow:auto}
@media (max-width:820px){
  .adlg{padding:0;align-items:stretch}
  .adlg-box{height:100%;width:100%;border-radius:0;border:0}
  .adlg-body{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
  .adlg-left{display:block;border-right:0;border-bottom:1px solid var(--line)}
  .adlg-media{height:56vh}
  .adlg-nav{margin-top:8px}
  .adlg-cmds{overflow:visible}
  .adlg-head{flex-wrap:wrap;padding:10px 12px}
  .adlg-head > .grow{flex:1 0 calc(100% - 72px);order:0}
  .adlg-head > button[data-act=arch-close]{order:1}
  .adlg-head > .seg,.adlg-head > select,.adlg-head > .btn{order:2}
  .adlg-head b{white-space:normal}
  .acmd pre{max-height:none}
  .langrow select{min-width:0;width:100%}
}
.lchip small{font-size:11px;color:var(--mute);font-weight:500}
.adlg-head select{max-width:170px}

/* sol menü sayfa kayarken yerinde kalsın: gövde içerikle uzar, menü ekrana yapışık kalır */
body{height:auto;min-height:100vh}

/* =====================================================================
   hekaty: agentic's navy and its light, the door, plans, the Hekaty panel, calm motion
   ===================================================================== */
html{background:var(--bg);scrollbar-gutter:stable}
/* the light (WebGL, #glow in app.js) is drawn behind the page; the gradient above is what shows without it */
#glow{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
body.gl{background:none}
/* the menu: no blur behind it (the blur made it flicker as pages changed) and only colours move */
body>aside{background:linear-gradient(180deg,rgba(27,36,59,.86),rgba(20,24,35,.9));border-right-color:rgba(52,72,112,.55);backdrop-filter:none;-webkit-backdrop-filter:none;will-change:auto}
nav a,nav a .ni{transition:color .18s ease,background-color .18s ease,border-color .18s ease}
nav a:hover .ni{transform:none}
nav a.on::before{transition:none}
main.enter>*{animation:enter .22s var(--ease) both}
main.enter>*:nth-child(2){animation-delay:.02s}
main.enter>*:nth-child(3){animation-delay:.04s}
main.enter>*:nth-child(n+4){animation-delay:.06s}
@keyframes enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#nav-admin[hidden]{display:none!important}
a[href="#/styles/yeni"],a[href$="/duzenle"],[data-act=style-copy],[data-act=style-redraw],[data-act=style-delete],[data-style-apply]{display:none!important}

/* a button at work */
button.busy,.btn.busy{position:relative;color:transparent!important;pointer-events:none}
button.busy>*,.btn.busy>*{visibility:hidden}
button.busy::after,.btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid #cfe0ff;border-right-color:transparent;animation:sp .7s linear infinite}

/* the menu's foot: credits, who, language */
#jobs{margin-top:auto}
#me{display:flex;flex-direction:column;gap:8px}
#me .credit{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(111,155,255,.28);background:linear-gradient(135deg,rgba(42,86,198,.28),rgba(77,127,224,.1))}
#me .credit .ic{width:16px;height:16px;fill:none;stroke:#9dbcff;stroke-width:1.8}
#me .credit b{font-size:16px}
#me .credit small{color:var(--mute)}
#me .credit:hover{border-color:#6f9bff}
#me .who{display:flex;align-items:center;gap:10px;padding:6px;min-width:0;border-radius:12px;border:1px solid transparent}
#me .who:hover{background:rgba(77,127,224,.08);border-color:rgba(77,127,224,.15)}
#me .who .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--grad);font-weight:800;flex:none}
#me .who span.grow{min-width:0;display:flex;flex-direction:column}
#me .who b,#me .who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#me .who small{color:var(--mute);font-size:11px}
.langsw{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:rgba(20,25,37,.6);align-self:flex-start}
.langsw a{padding:3px 9px;border-radius:7px;font-size:12px;font-weight:700;color:var(--mute)}
.langsw a.on{background:rgba(77,127,224,.3);color:#fff}
/* a job as steps */
.jsteps{display:flex;gap:4px;margin:6px 0 4px}
.jsteps i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08)}
.jsteps i.done{background:var(--ac)}
.jsteps i.on{background:linear-gradient(90deg,var(--ac),rgba(91,140,240,.25));background-size:200% 100%;animation:jbar 1.2s linear infinite}
@keyframes jbar{from{background-position:100% 0}to{background-position:-100% 0}}

/* the door */
body.auth{grid-template-columns:1fr}
body.auth>aside{display:none}
body.auth main{max-width:none;padding:0}
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.authbox{width:min(420px,100%);padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.authbox h1{font-size:24px;margin-top:6px}
.authbox label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px;color:#cfd8ea}
.authbox input{padding:11px 12px}
button.big{padding:12px 18px;font-size:15px}
.authlogo{display:flex;align-items:center;gap:10px}
.authlogo i{width:38px;height:38px;background:url(/logo.svg) center/contain no-repeat;filter:drop-shadow(0 4px 12px rgba(255,90,60,.35));font-size:0}
.authlogo b{font:600 22px Sora,Inter,sans-serif;letter-spacing:-.03em}
.authswitch{text-align:center;color:var(--mute);margin-top:4px}
.authswitch a{color:#9dbcff;font-weight:600}

/* home */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi small{color:var(--mute);font-weight:600;font-size:12px}
.kpi b{font-size:28px;letter-spacing:-.02em}
a.kpi:hover{border-color:var(--line2)}
.nextstep{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.stepn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--grad);font-weight:800;flex:none}
.gnone{display:grid;place-items:center;aspect-ratio:9/16;background:var(--panel2);border-radius:12px}

/* Üret: the form and its folding parts */
.cwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;transition:grid-template-columns .34s var(--ease) .3s}
.cwrap.pclosed{grid-template-columns:minmax(0,1fr) 52px;transition:grid-template-columns .34s var(--ease) .3s}
.cwrap:not(.pclosed){transition:grid-template-columns .34s var(--ease) 0s}
.cform textarea[name=request]{font-size:15px;min-height:140px}
.brandsel{display:flex;align-items:center;gap:10px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.brandsel select{text-transform:none;letter-spacing:0;font-size:14px;color:var(--fg)}
.fsecs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(20,25,37,.35)}
.fsec+.fsec{border-top:1px solid var(--line)}
.fhead,.fhead:hover,.fhead:active{display:flex;width:100%;align-items:center;gap:12px;padding:13px 14px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;text-align:left;white-space:normal}
.fhead:hover{background:rgba(77,127,224,.06)}
.fhead b{min-width:130px;font-size:14px}
.fhead small{color:var(--mute);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchev .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transform:rotate(-90deg);transition:transform .3s var(--ease);margin:0}
.fsec.open .fchev .ic,details[open]>summary .fchev .ic{transform:none}
.fbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.fsec.open .fbody{grid-template-rows:1fr}
.fbody>.fin{min-height:0;overflow:hidden;padding:0 14px;transition:padding .32s var(--ease)}
.fsec.open .fbody>.fin{padding:4px 14px 16px}
.fin .drop{margin-top:4px}
.cgo{gap:14px}
.costpill{margin-left:8px;padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.18);font-size:12.5px;font-weight:700}

/* Üret: the Hekaty panel, a drawer on the right (folds up, then turns on its side) */
.mpanel{--mt:.34s;position:sticky;top:20px;width:100%;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mtoggle,.mtoggle:hover,.mtoggle:active{display:block;position:relative;width:100%;height:200px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;transition:height var(--mt) var(--ease) var(--mt),background .2s}
.mpanel.on .mtoggle{height:52px;transition:height var(--mt) var(--ease) 0s,background .2s}
.mtoggle:hover{background:rgba(77,127,224,.08)}
.mchev{position:absolute;left:14px;top:15px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(77,127,224,.16);color:var(--ac);font-size:16px;line-height:1;transform:rotate(180deg);transition:transform .5s var(--ease) .15s}
.mpanel.on .mchev{transform:none}
.mtoggle b{font-weight:800;color:var(--fg)}
.mtoggle small{color:var(--mute);font-weight:600;font-size:11.5px;white-space:nowrap}
.mh{position:absolute;left:48px;top:0;right:14px;height:52px;display:flex;align-items:center;gap:8px;opacity:0;transform:rotate(90deg);transform-origin:0 50%;transition:opacity .22s,transform .45s var(--ease)}
.mh small{margin-left:auto}
.mpanel.on .mh{opacity:1;transform:none;transition:opacity .3s .3s,transform .5s var(--ease) .25s}
.mv{position:absolute;left:0;right:0;top:48px;display:flex;align-items:center;gap:10px;margin:0 auto;width:max-content;writing-mode:vertical-rl;transform:rotate(180deg);opacity:1;transition:opacity .3s calc(var(--mt) + .15s),transform .5s var(--ease) var(--mt)}
.mpanel.on .mv{opacity:0;transform:rotate(90deg);transition:opacity .15s,transform .3s var(--ease)}
.mfold{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--mt) var(--ease),opacity .22s}
.mpanel.on .mfold{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .4s var(--ease) var(--mt),opacity .35s calc(var(--mt) + .05s)}
.mfold>.mbody{min-height:0;overflow:hidden}
.mbody{width:318px;display:flex;flex-direction:column;gap:12px;padding:14px;border-top:1px solid var(--line)}
.mrow{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.mrow small{line-height:1.35}
.msel{display:flex;gap:6px;margin-top:4px}
.msel select{flex:1;min-width:0;cursor:pointer}
.madv{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(20,25,37,.35)}
.madv summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;gap:8px}
.madv summary::-webkit-details-marker{display:none}
.madv summary::before{content:"›";color:var(--ac);font-size:16px;transition:transform .25s var(--ease)}
.madv[open] summary::before{transform:rotate(90deg)}
.vlist{display:flex;flex-direction:column;gap:8px}
.vopt,.vopt:hover{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);box-shadow:none;transform:none;white-space:normal}
.vopt:hover{border-color:var(--line2)}
.vopt.on{border-color:var(--ac);background:rgba(77,127,224,.14)}
.vopt b{display:block;font-size:14px}
.vopt small{display:block;color:var(--mute);font-weight:500;font-size:12px}
.vopt em{font-style:normal;font-weight:800;font-size:16px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.vopt em small{font-size:10.5px}
.vdot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);flex:none;transition:all .2s}
.vopt.on .vdot{border-color:var(--ac);background:radial-gradient(circle,var(--ac) 0 4px,transparent 5px)}
.vsum{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.vsum b.low{color:var(--bad)}
.warnline{color:var(--warn);font-size:13px}
.warnline a{text-decoration:underline}
@media (max-width:1000px){
  .cwrap,.cwrap.pclosed{grid-template-columns:1fr}
  .mpanel{position:static;order:-1}
  .mtoggle,.mtoggle:hover,.mpanel.on .mtoggle{height:52px;transition:background .2s}
  .mh,.mpanel.on .mh{opacity:1;transform:none}
  .mv{display:none}
  .mchev{transform:rotate(90deg)}
  .mpanel.on .mchev{transform:rotate(-90deg)}
  .mbody{width:auto}
}
@media (prefers-reduced-motion:reduce){.mpanel,.mpanel *,.fbody,.fin,.cwrap{transition:none!important}}

/* formats, settings */
.mfmts{display:flex;gap:8px;flex-wrap:wrap}
.mfmt{flex:1;min-width:110px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg);transition:border-color .2s,background .2s;position:relative}
.mfmt input{position:absolute;opacity:0;pointer-events:none}
.mfmt b{font-size:14px}
.mfmt small{font-size:11px;color:var(--mute);text-align:center}
.mfmt:has(input:checked){border-color:var(--ac);background:rgba(77,127,224,.14)}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.setgrid label,.card.stack>label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px}
.srow{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;align-items:start}
.srow h3{padding-top:8px}
@media (max-width:700px){.srow{grid-template-columns:1fr}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:8px 0 14px}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px}
.plan.pop{border-color:rgba(111,155,255,.55);box-shadow:0 18px 40px -24px var(--glow)}
.plan.cur{border-color:var(--ok)}
.plan .ribbon{position:absolute;top:-11px;left:20px;background:var(--grad);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
.plan h2{font-size:20px}
.plan .price b{font-size:28px}
.plan .price b.soon{font-size:20px;color:#9dbcff}
.plan .price small{color:var(--mute)}
.allplans{margin:0 0 14px}.allplans b{display:block;margin-bottom:6px}
.allplans ul{margin:0;padding-left:18px;columns:2 280px;column-gap:28px;line-height:1.7;color:#cfd8ea}
.plan ul{margin:0;padding-left:18px;color:#cfd8ea;line-height:1.7;flex:1}
.plan button{width:100%}
.ledger{padding:6px 16px}
.lrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow b.plus{color:var(--ok)}
.lrow b.minus{color:#ff9d94}

/* admin */
.utable{padding:0;overflow-x:auto}
.urow{display:grid;grid-template-columns:minmax(220px,2fr) 140px 90px 200px 160px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);min-width:820px}
.urow.uh{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.urow span{display:flex;flex-direction:column}
.urow .tag{align-self:flex-start;margin:2px 0}
.urow:last-child{border-bottom:0}

/* calendar notes and dialogs */
.calnote{font-size:11px;line-height:1.3;padding:2px 6px;margin-top:3px;border-radius:6px;border-left:3px solid var(--nc,#5b8cf0);background:rgba(255,255,255,.05);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blue{--nc:#5b8cf0}.green{--nc:#4cc38a}.yellow{--nc:#e7b04f}.red{--nc:#ef6a5e}.purple{--nc:#a77bf3}
.notelist{display:flex;flex-direction:column;gap:6px}
.noteln{font-size:12.5px;padding:7px 9px;border-radius:9px;border-left:3px solid var(--nc);background:rgba(255,255,255,.04)}
.noteln b{color:var(--mute);margin-right:4px}
.noteedit{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;border-left:3px solid var(--nc);background:rgba(255,255,255,.04)}
.ncolors{display:flex;gap:6px}
.ncol{cursor:pointer}
.ncol input{position:absolute;opacity:0}
.ncol i{display:block;width:20px;height:20px;border-radius:50%;background:var(--nc);border:2px solid transparent;transition:transform .15s}
.ncol input:checked+i{border-color:#fff;transform:scale(1.1)}
.modal{transition:opacity .18s}
.modal.out{opacity:0}
.mbox{width:min(560px,100%)}
.mbox .calitem{display:block;margin-top:6px}

/* the image page */
.imgopts{gap:18px;align-items:flex-end}
.imgopts label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px}
.lbl{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.imgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.imgtile{padding:0;overflow:hidden;margin:0;display:flex;flex-direction:column}
.imgtile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--panel2)}
.imgtile figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.imgtile p{margin:0;font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.imgtile .btn,.imgtile button{padding:4px 9px}

/* help */
.hsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.hstep{display:flex;flex-direction:column;gap:8px}
.hstep b{font-size:15px}
.faq{display:flex;flex-direction:column;gap:10px}
.fq{padding:0}
.fq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;font-weight:650}
.fq summary::-webkit-details-marker{display:none}
.fq p{margin:0;padding:0 16px 16px;color:#cfd8ea;line-height:1.6}
@media (max-width:820px){#me{flex-direction:row;align-items:center}#me .langsw,#me .langpick,#me .who span.grow,#me .help{display:none}#me .who{padding:0}#me .credit{padding:6px 10px}}

/* the front page */
.land{max-width:1180px;margin:0 auto;padding:18px 24px 60px}
.lbar{display:flex;align-items:center;gap:10px;padding:6px 0 10px}
.hero{text-align:center;padding:70px 10px 50px;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero h1{font-size:clamp(32px,5.4vw,58px);line-height:1.05;max-width:16ch}
.hero p{max-width:60ch;color:#c3cce0;font-size:17px;line-height:1.55}
.lfeats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:26px}
.lfeat{display:flex;flex-direction:column;gap:8px}
.lfeat .ic{width:22px;height:22px;fill:none;stroke:#9dbcff;stroke-width:1.8}
.lfeat b{font-size:15px}
.lfoot{text-align:center;padding-top:40px;font-size:12px}
.authback{font-size:13px;margin-bottom:4px}
@media (max-width:640px){.lbar .ghost{display:none}.hero{padding:40px 0 30px}}
/* colours */
.cfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.cfield{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--mute)}
.cfield input[type=color]{width:44px;height:34px;padding:2px;border-radius:9px;cursor:pointer;background:var(--bg)}
.cfield code{font-size:12px;color:var(--fg)}
.cprev{margin-top:12px;padding:16px;border-radius:12px;border:1px solid var(--line);font-size:18px}
.cprev span{padding:2px 8px;border-radius:6px;font-weight:700;font-size:14px;margin:0 6px}
.cdots{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.cdots i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.colorform{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
/* the library picker */
.libbox{width:min(860px,100%)}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:60vh;overflow:auto}
.libitem,.libitem:hover{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px;background:var(--bg);border:2px solid var(--line);box-shadow:none;transform:none;white-space:normal;text-align:left}
.libitem.on{border-color:var(--ac);background:rgba(77,127,224,.16)}
.libitem img,.libitem video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.libitem small{font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.libaudio{display:grid;place-items:center;aspect-ratio:1;font-size:28px;background:var(--panel2);border-radius:8px}
.gtile figcaption b{display:block;font-size:13px;line-height:1.3;margin-bottom:4px}

/* Google / GitHub */
.orline{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12px}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth{display:flex;flex-direction:column;gap:8px}
.oabtn{justify-content:center;gap:10px;padding:10px 14px;background:#f4f6fa!important;color:#1b2130!important;border-color:#f4f6fa!important}
.oabtn svg{width:18px;height:18px}
.oabtn.off{opacity:.55}
/* crypto */
.crypto{width:min(640px,100%)}
.coins{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.coin,.coin:hover{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);box-shadow:none;transform:none;white-space:normal;text-align:left}
.coin.on{border-color:var(--ac);background:rgba(77,127,224,.14)}
.coin small{color:var(--mute);font-weight:500;font-size:12px}
.coin em{font-style:normal;font-size:11px;color:var(--ok)}
.cpay{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:start}
.qr{width:140px;height:140px;border-radius:12px;background:repeating-conic-gradient(#f4f6fa 0 25%,#1b2130 0 50%) 0 0/14px 14px;display:grid;place-items:center;border:6px solid #f4f6fa}
.qr span{background:#f4f6fa;color:#1b2130;font-weight:800;padding:4px 8px;border-radius:6px}
.addr{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-width:0}
.addr code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
@media (max-width:600px){.cpay{grid-template-columns:1fr}.qr{margin:0 auto}}

/* guest */
.guestme{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgba(111,155,255,.28);border-radius:12px;background:linear-gradient(135deg,rgba(42,86,198,.22),rgba(77,127,224,.08))}
.guestme b{font-size:13px}
.guestwall{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px}
.gwic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(77,127,224,.16)}
.gwic .ic{width:22px;height:22px;fill:none;stroke:#9dbcff;stroke-width:1.8;margin:0}
.hero.in{padding:30px 10px 36px}
.needlogin{width:min(480px,100%)}
/* text styles */
.fontbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
.fontbar input[type=range]{width:140px}
.fontgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.fontcard{display:flex;flex-direction:column;gap:12px}
.fontcard.on{border-color:var(--ac)}
.fsample{min-height:90px;line-height:1.15;overflow-wrap:anywhere;color:#f4f6fa}
.imgtype{align-items:flex-end}
.wordprev{font-size:34px;padding:14px 16px;border-radius:12px;border:1px dashed var(--line2);background:rgba(20,25,37,.5);overflow-wrap:anywhere}
/* Pro ideas */
.sgbox{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(20,25,37,.35)}
.sgbox.open{flex-direction:column;align-items:stretch}
.sgbox.locked{border-style:dashed}
.sgideas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.sgidea{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.sgidea p{margin:0;font-size:13px;line-height:1.45;flex:1}
.sgidea button{align-self:flex-start}
.sgtips{margin:0;padding-left:18px;line-height:1.6;color:#cfd8ea}
.sgideas{align-items:start;grid-auto-rows:auto}
.sgidea{height:auto;min-height:0}
.sgidea p{flex:0 0 auto;min-height:0}

/* ---------- the menu: five places; Paketler behind the credits, Ayarlar and Yardım beside the name ---------- */
body:not(.admin) #more{display:none!important}
#me .meline{display:flex;align-items:center;gap:8px}
#me .meline .langsw,#me .meline .langpick{align-self:center}
#me .help{font-size:12px;font-weight:600;color:var(--mute);padding:4px 8px;border-radius:8px}
#me .help:hover{color:var(--fg);background:rgba(77,127,224,.08)}

/* ---------- Oluştur: Video · Görsel · Logo ---------- */
.ctabs{align-self:flex-end}
.ctabs a{padding:7px 16px}
@media (max-width:820px){.ctabs{align-self:stretch;display:flex}.ctabs a{flex:1;text-align:center}}

/* ---------- Oluştur → Logo ---------- */
.lform{max-width:860px}
.lfield{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px;color:#cfd8ea}
.lchips{display:flex;flex-wrap:wrap;gap:6px}
.lchip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line2);border-radius:99px;background:rgba(14,22,40,.5);color:#c3cde4;font-weight:600;font-size:13px;cursor:pointer}
.lchip:hover{border-color:rgba(111,155,255,.5);color:#fff}
.lchip.on{border-color:rgba(111,155,255,.6);background:rgba(77,127,224,.22);color:#fff}
.lfrom{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid rgba(111,155,255,.35);border-radius:var(--r);background:rgba(77,127,224,.08)}
.lfrom>img{width:64px;height:64px;border-radius:14px;flex:none;background:var(--panel2)}
.lfrom .grow{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ldrop{padding:12px;font-size:13px}
.lrefs{display:flex;gap:8px;flex-wrap:wrap}
.lrefs .lref{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.lrefs .lref img{width:100%;height:100%;object-fit:cover;display:block}
.lrefs .lref.up{opacity:.5}
.lrefs .lref button{position:absolute;top:2px;right:2px;padding:0 5px;font-size:11px;line-height:16px;min-height:0;border-radius:6px}
.lform+.lprog,.lform+.lprog+.day{margin-top:14px}
.lprog{display:flex;flex-direction:column;gap:6px;max-width:860px;border-color:rgba(77,127,224,.45);box-shadow:0 10px 28px -16px var(--glow)}
.lprog .jsteps{margin:2px 0}
.lround{display:flex;flex-direction:column;gap:12px}
.lround>header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lround>p{margin:0}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lcard{margin:0;display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:rgba(14,22,40,.35);min-width:0}
.lcard.best{border-color:rgba(111,155,255,.6);box-shadow:0 0 0 1px rgba(91,140,240,.2)}
.lcard .lbig{display:block;padding:0;border:0;border-radius:14px;background:none;box-shadow:none;cursor:zoom-in}
.lcard .lbig:hover{transform:none}
.lcard .lbig img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:14px;background:var(--panel2)}
.lsizes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lsizes span{display:flex;gap:8px;align-items:end;justify-content:center;padding:6px;border-radius:9px}
.lsizes .dk{background:#0a0f1f}
.lsizes .lt{background:#fff}
.lsizes img{display:block}
.lcard figcaption{display:flex;flex-direction:column;gap:6px;padding:0 2px 2px;flex:1}
.lcard .lacts{margin-top:auto}
.lcard figcaption .nm{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lcard em{font-style:normal;font-size:11px;font-weight:700;color:#9dbcff;border:1px solid rgba(111,155,255,.4);border-radius:99px;padding:0 7px}
.lcard em.cur{color:var(--ok);border-color:rgba(76,195,138,.5)}
.lcard small{color:var(--mute);line-height:1.45}
.lacts{display:flex;flex-wrap:wrap;gap:6px}
.lacts button{flex:1;padding:6px 10px;font-size:13px}
.lnote{display:flex;gap:8px;align-items:flex-start;color:#c9d3e8;font-size:13px;line-height:1.5}
.lnote .ic{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:#9dbcff;stroke-width:1.8}
.lfiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.lfiles a{display:flex;flex-direction:column;padding:6px 10px;border:1px solid var(--line);border-radius:9px;min-width:0}
.lfiles a b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfiles a small{color:var(--mute)}
.lempty{display:flex;flex-direction:column;gap:12px;max-width:620px}
.lempty form{display:flex;flex-direction:column;gap:10px}
.lempty label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px;color:#cfd8ea}
@media (max-width:820px){body.more nav #nav-admin{bottom:calc(60px + env(safe-area-inset-bottom))}}
/* phone: the tabs keep their words whole and share the width; the guest's lock card stacks */
.ctabs a{white-space:nowrap;overflow-wrap:normal}
@media (max-width:820px){
  .ctabs{width:100%}
  .guestwall{flex-direction:column;align-items:stretch;text-align:left}
  .guestwall .btn{justify-content:center}
}

/* the menu's groups: Oluştur and Stiller open their own items under their name */
nav a.grp .chev{width:14px;height:14px;margin-left:auto;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .25s var(--ease)}
nav a.grp.open .chev{transform:rotate(90deg)}
nav a.grp.has{color:#e7ecf6}
nav .nsub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease),opacity .2s var(--ease);opacity:0}
nav .nsub.open{grid-template-rows:1fr;opacity:1}
nav .nsub>div{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:2px}
nav .nsub a{padding:8px 12px 8px 22px;font-size:13.5px;margin-left:14px;border-left:1px solid rgba(77,127,224,.18);border-radius:0 12px 12px 0}
nav .nsub a .ni{width:16px;height:16px}
nav .nsub a.on::before{left:-1px}
#moremenu{display:none}
@media (max-width:820px){
  nav a[data-nav=community],nav a[data-nav=help],nav a[data-group=stiller],nav .nsub[data-sub=stiller]{display:none}
  nav a.grp .chev{display:none}
  nav .nsub[data-sub=create]{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);display:none;opacity:1}
  nav .nsub[data-sub=create].open{display:block}
  nav .nsub[data-sub=create]>div{flex-direction:row;gap:6px;padding:6px;background:#1d2943;border:1px solid rgba(77,127,224,.3);border-radius:14px;box-shadow:0 14px 34px -10px rgba(0,0,0,.9)}
  nav .nsub[data-sub=create] a{flex:1;margin:0;border:0;border-radius:10px;padding:10px 4px}
  body.more nav .sec{display:none}
  #moremenu{display:flex;flex-direction:column;position:fixed;right:8px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:70;min-width:180px;padding:6px;background:#1d2943;border:1px solid rgba(77,127,224,.3);border-radius:14px;box-shadow:0 14px 34px -10px rgba(0,0,0,.9)}
  #moremenu a{padding:12px 14px;border-radius:10px;color:#e7ecf6;font-weight:600}
  #moremenu a:hover{background:rgba(77,127,224,.12)}
}
/* the image page: reference pictures and the brand's logo */
.imgrefs{display:flex;flex-direction:column;gap:8px}
.imgrefs .lrefs{display:flex;flex-wrap:wrap;gap:8px}
.imgrefs .lrefs:empty{display:none}
.imgrefs .lref{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.imgrefs .lref img{width:100%;height:100%;object-fit:cover;display:block}
.imgrefs .lref.up{opacity:.5}
.imgrefs .lref button{position:absolute;top:3px;right:3px;padding:0 5px;font-size:11px;line-height:16px;min-height:0;border-radius:6px}
.imgrefs .lref em{position:absolute;left:0;right:0;bottom:0;font-size:10.5px;font-style:normal;text-align:center;background:#2a56c6cc;color:#fff;padding:2px}
.imgrefs .lrlogo{background:#fff;cursor:pointer}
.imgrefs .lrlogo img{object-fit:contain;padding:8px 8px 22px}
.imgrefs .lrlogo span{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;background:#141925e6;color:#e7ecf6;padding:2px}
.imgrefs .lrlogo span input{margin:0}
.imgrefs .lrlogo.off img{opacity:.35}
.imgrefs .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px}
/* phone: More now holds Topluluk, Stiller and Yardım, so everyone gets it */
@media (max-width:820px){body:not(.admin) nav a#more{display:flex!important}}
@media (max-width:820px){nav a[data-nav=plans]{display:none}}
.libitem,.libitem:hover{align-items:stretch;justify-content:flex-start;min-width:0;overflow:hidden}
.libitem small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;width:100%;min-width:0;line-height:1.3;overflow-wrap:anywhere;text-align:left}
.libgrid{grid-auto-rows:auto;align-items:start}
.imgtile .sharebtn{font-size:12px;padding:4px 10px;white-space:nowrap}
.imgtile .sharebtn.done{color:#7fd4a0;border-color:rgba(76,175,80,.4)}

/* image cards: the date on its own line, the buttons under it */
.imgtile figcaption .row{flex-wrap:wrap;row-gap:6px}
.imgtile figcaption .row>small.grow{flex:1 0 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the share question */
.sharebox{width:min(480px,100%)}
.sharechk{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.sharechk input{margin-top:3px}
.sharechk span{display:flex;flex-direction:column;gap:4px}
/* a community item large, with its panel on the right */
.cview .cvwrap{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);gap:16px;padding:0 16px 16px}
.cview .vstage{min-height:0;margin:0}
.cview .vstage img,.cview .vstage video{max-height:calc(100vh - 90px)}
.cvside{background:#141a28f2;border:1px solid rgba(77,127,224,.25);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto;max-height:calc(100vh - 90px);color:#e7ecf6}
.cvside h3{margin:0;font-size:16px;line-height:1.35}
.cvsec{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.cvrow{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.cvprompt{margin:0;white-space:pre-wrap;font-size:14px;line-height:1.5;background:rgba(10,14,22,.6);border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-height:40vh;overflow:auto}
@media (max-width:820px){.cview .cvwrap{grid-template-columns:1fr;grid-template-rows:auto;overflow:auto}.cview .vstage{height:58vh;flex:none}.cview .vstage img,.cview .vstage video{max-height:60vh}.cvside{max-height:none}}

/* plans: Pro's seats, and a level that needs Pro */
.plan .seats{font-size:12.5px;color:#9dbcff;background:rgba(77,127,224,.1);border:1px solid rgba(77,127,224,.25);border-radius:10px;padding:6px 10px}
.plan button.done{color:#7fd4a0;border-color:rgba(76,175,80,.4)}
.vopt.locked{opacity:.6}
.vopt.locked b .tag{margin-left:6px;font-size:10.5px;padding:1px 7px;vertical-align:middle}

/* plans: yearly saving and the price of one video */
.plan .price .save{display:block;font-style:normal;font-size:12.5px;color:#7fd4a0;margin-top:2px}
.plan .pervideo{font-size:12.5px;color:#9dbcff}

/* job list: put a finished or failed job away */
.job{position:relative}
.job .jx{position:absolute;top:4px;right:4px;background:none;border:0;color:var(--mute);font-size:12px;line-height:1;padding:4px 6px;cursor:pointer;border-radius:6px}
.job .jx:hover{color:var(--fg);background:#ffffff14}
.job.failed b,.job.done b{padding-right:20px}
.job.failed small{white-space:normal;overflow:visible}
/* knowledge base: a drop zone that reads as one, a row per upload, new sources marked */
.drop.knowdrop{border:2px dashed var(--accent, #4d7fe0);background:rgba(77,127,224,.07);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--fg)}
.drop.knowdrop b{font-size:16px}
.drop.knowdrop .kicon{font-size:26px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(77,127,224,.18);color:#9dbcff}
.drop.knowdrop.over{background:rgba(77,127,224,.18);border-style:solid}
.knowup{display:flex;flex-direction:column;gap:6px}
.kup{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px}
.kup .kname{display:flex;align-items:center;gap:8px;min-width:0}
.kup .kname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kup img{width:34px;height:34px;object-fit:cover;border-radius:6px;flex:none}
.kup small{flex:none;color:var(--mute)}
.kup i{position:absolute;left:0;bottom:0;height:3px;background:var(--accent, #4d7fe0);transition:width .2s}
.kup.ok{border-color:rgba(76,175,80,.5)}.kup.ok small{color:#7fd4a0}.kup.ok i{background:#4caf50}
.kup.error{border-color:rgba(229,83,83,.5)}.kup.error small{color:#ff8a8a}.kup.error i{background:#e55353}
.src.fresh{border-color:rgba(76,175,80,.6);box-shadow:0 0 0 1px rgba(76,175,80,.25)}
.tag.new{background:rgba(76,175,80,.2);color:#7fd4a0;border-color:rgba(76,175,80,.5)}
/* create page: the video's typeface; the owner's music under voice and languages */
.vfont{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.vfont label{display:flex;flex-direction:column;gap:4px;max-width:320px}
.vfont .wordprev{font-size:24px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.mymusic{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mymusic .drop{min-height:70px}
/* logo cards: the small-size strips stay inside a narrow card (the 48/32/16 px marks shrink with it) */
.lsizes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lsizes span{min-width:0;overflow:hidden;gap:6px;padding:6px 4px}
.lsizes img{min-width:0;max-width:40%;height:auto;flex:0 1 auto}

/* ---------- phone: app-like polish (last, so it wins) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,label,select,summary,[data-act]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (max-width:820px){
  /* the top bar keeps its height on a short page (the grid used to stretch it to fill the screen) */
  body{grid-template-rows:auto 1fr;align-content:start;min-height:100dvh}
  aside{padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
  main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  /* iOS zooms into any field under 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
  /* segmented choices: one line that scrolls, never letters broken over two lines */
  .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  .seg::-webkit-scrollbar{display:none}
  .seg a{flex:none;white-space:nowrap;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 12px}
  .seg a small{white-space:nowrap}
  /* tap targets */
  label.chk{min-height:36px;display:inline-flex;align-items:center;gap:8px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  .tag[href],a.tag{padding:6px 10px}
  .head .mute[href],.head a.mute{display:inline-block;padding:8px 0}
  /* admin: each user a card instead of a wide table */
  .utable{overflow:visible}
  .urow{grid-template-columns:1fr 1fr;min-width:0;gap:10px;padding:14px}
  .urow.uh{display:none}
  .urow>span:first-child{grid-column:1/-1}
  .urow form{grid-column:1/-1}.urow form input{flex:1}
  .urow select{width:100%}
  /* design styles: each filter a row of chips that scrolls sideways */
  .sfil{flex-direction:column;gap:10px;overflow:visible}
  .sfgroup{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .sfgroup::-webkit-scrollbar{display:none}
  .sfgroup h3{flex:none;margin:0 4px 0 0;font-size:11px}
  .sfgroup>a{flex:none;white-space:nowrap;border:1px solid var(--line);border-radius:99px;padding:7px 12px;display:inline-flex;gap:6px;align-items:center}
  .sfgroup>a.on{border-color:var(--ac);background:rgba(91,140,240,.18)}
  .sfgroup .seg,.sfgroup .scolors,.sfgroup .schips{flex:none;flex-wrap:nowrap}
  .sfgroup .schips a{white-space:nowrap}
  /* the knowledge page: actions full width */
  .know{grid-template-columns:1fr}
  .head>.row{width:100%}
  /* the toast sits above the bottom bar */
  #toast{bottom:calc(84px + env(safe-area-inset-bottom));left:12px;right:12px;transform:translateY(8px);text-align:center;max-width:none;border-radius:14px}
  #toast.on{transform:none}
  /* dialogs fill the phone and respect the notch */
  .modal>.card{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  /* sharing: the buttons wrap evenly */
  .share .card>.row:first-child{flex-wrap:wrap}
  .share .card>.row:first-child>*{flex:1 1 auto}
  .share .card>.row:first-child h2{flex-basis:100%}
  .sharehint{font-size:13px;line-height:1.5;margin:0}
}
/* installed on the home screen: no browser bar, so the page owns the notch */
@media (display-mode:standalone){body{overscroll-behavior-y:none}}
@media (max-width:820px){.sfgroup .schips a,.sfgroup .seg a{min-height:36px;display:inline-flex;align-items:center;padding:0 12px}.sfgroup .scolors a{width:32px;height:32px}}
@media (max-width:820px){.sfil .sfgroup{flex-direction:row;justify-content:flex-start;text-align:left}.sfil .sfgroup h3{align-self:center}}
@media (max-width:820px){.sfil .sfgroup{min-width:0;max-height:none;width:100%}.sfgroup .seg{flex-wrap:nowrap}}

/* toasts that open what they talk about */
#toast.link{pointer-events:auto;cursor:pointer}
.tag.soon{opacity:.85;border-style:dashed}
/* phone: no job list up top (a note says it is in line and when it is done); the calendar is a real month grid */
@media (max-width:820px){
  #jobs{display:none!important}
  .calgrid,.calgrid.nopick,.calgrid.pick{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .calgrid.nopick:not(:has(.has))::after{content:none;display:none}
  .calgrid .calhead{display:block!important;text-align:center;padding:2px 0 4px;font-size:11px}
  .calgrid .calday,.calgrid.nopick .calday:not(.has),.calgrid .calday.out{display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:stretch;min-height:56px;padding:5px 3px;gap:3px;border-radius:10px;min-width:0}
  .calgrid .calday.out{opacity:.35}
  .calgrid .calday .dn{width:auto;font-size:13px;font-weight:600;text-align:center;opacity:.9}
  .calgrid .calday .dn::after{content:none}
  .calgrid .calday.today .dn{color:#8fb3ff}
  .calgrid .calday .add{display:none}
  .calgrid.pick .calday:not(.out){border-style:dashed;border-color:#5b8aec}
  .calgrid .calday .calitem,.calgrid .calday .calnote{flex:none;height:5px;min-height:5px;padding:0;margin:0;font-size:0;line-height:0;border:0;border-radius:3px;background:#5b8aec;white-space:nowrap}
  .calgrid .calday .calnote{background:var(--nc,#e0b03e)}
  .calgrid .calday .calitem.posted{background:#4caf50}.calgrid .calday .calitem.failed{background:#e0603e}
  .calgrid .calday .calitem *{display:none}
}

.imgtile .sendbtn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#1f45a8,#4d7fe0);color:#fff;border:0;font-weight:700}
.imgtile .sendbtn .ic{width:16px;height:16px}
@media (max-width:820px){.imgtype > label{flex:1 1 100%}}

/* video templates: a scrolling row of cards */
.vtpl{display:flex;flex-direction:column;gap:6px;min-width:0}
.tplrow{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin;align-items:stretch}
.tpl{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:96px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(29,40,64,.6);color:var(--fg);cursor:pointer;font:inherit}
.tpl i{font-style:normal;font-size:22px;line-height:1}
.tpl b{font-size:12.5px;white-space:nowrap}
.tpl.on{border-color:#5b8aec;background:rgba(77,127,224,.22);box-shadow:0 0 0 1px rgba(91,138,236,.35)}
.tplg{flex:none;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:0 2px}

.tplrow{flex-wrap:wrap;overflow:visible;padding:0}
.tplg{writing-mode:horizontal-tb;transform:none;padding:4px 0 0;align-self:flex-start}
.tpl{min-width:0;flex:0 0 calc((100% - 32px) / 5)}
@media (max-width:820px){.tpl{flex:0 0 calc((100% - 16px) / 3);padding:10px 6px}.tpl b{white-space:normal;text-align:center;line-height:1.2}}
.tplg{text-transform:none;letter-spacing:.02em;font-size:12px;font-weight:600}
/* library window: fix the video */
.afix{display:flex;flex-direction:column;gap:8px;padding:10px 12px}

/* text-style picker: every style shown in its own letters (fontPicker in app.js) */
.fpick{display:flex;flex-direction:column;gap:10px;margin-top:8px;min-width:0}
.fpick .fcats{flex-wrap:wrap}
.fpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;max-height:380px;overflow:auto;padding:2px 4px 2px 2px;scrollbar-width:thin}
.fpitem{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:12px 12px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);cursor:pointer;text-align:left;font:inherit}
.fpitem:hover{border-color:color-mix(in srgb,var(--ac) 55%,var(--line))}
.fpitem.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 18%,var(--panel2));box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 45%,transparent)}
.fpitem.on small::before{content:"✓ ";color:var(--ac);font-weight:800}
.fps{display:block;width:100%;font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpnone{font-family:inherit;font-size:16px;font-weight:700;color:var(--mute)}
.fpitem small{font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fpitem small .warn{color:var(--warn)}
@media (max-width:820px){.fpgrid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:320px}.fps{font-size:19px}}
/* the gameplay pick under the split-screen template, and the admin's add form */
.gamepick{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px;font-weight:600}
.gameadd{flex-wrap:wrap;gap:8px;align-items:center}
.gameadd input[type=file]{max-width:240px}
/* the video size on the Create page: each choice with a small frame of its shape */
.vsize{display:flex;flex-direction:column;gap:6px;min-width:0}
.vsize .seg{flex-wrap:wrap}
.vsize .seg a{display:inline-flex;align-items:center;gap:7px}
.vsize .seg small{color:var(--mute);font-weight:500}
.vsz{display:inline-block;height:16px;border:2px solid currentColor;border-radius:3px;opacity:.75}
/* Create: video or slides; the library window: a deck's slides one by one */
.kindseg{align-self:flex-start}
.kindseg a{font-weight:700}
.cform.slides section[data-sec=meme],.cform.slides section[data-sec=brainrot],.cform.slides section[data-sec=sound],.cform.slides .vsize-video,.cform.slides .lim:has([data-k=webVideo]){display:none}
.deckv{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.deckv img{display:block;max-width:100%;max-height:70vh;width:auto;border-radius:10px;background:#0b0f1a;object-fit:contain}
/* the switch above a wall of moving previews */
.wallbar{display:flex;justify-content:flex-end;margin:-6px 0 10px}
.motiont{font-size:12.5px;padding:5px 12px}

/* Oluştur → AI çekim: the count, then what it adds */
.aiclips{display:flex;flex-direction:column;gap:6px}
.aiclips>.row{gap:10px;flex-wrap:wrap;align-items:center}
.aisum{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(29,40,64,.45);font-size:13.5px}
.aisum .row{gap:8px}.aisum small{margin-bottom:4px}

/* the language picker (eight languages) */
.langpick{width:auto;max-width:140px;padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:rgba(20,25,37,.6);color:var(--fg);font:inherit;font-size:12.5px;font-weight:700;align-self:flex-start;cursor:pointer}
/* the walls as a masonry (packWall in app.js): rows of 2 px, each tile spans its own height; a wide video takes two
   columns; holes fill with the next tiles (dense). Without the script the plain grid above still works. */
.gal.packed{grid-auto-rows:2px;row-gap:0;grid-auto-flow:dense}
.gal.packed>.gtile{margin-bottom:14px}
.gtile.wide{grid-column:span 2}
@media (max-width:820px){.gal.packed>.gtile{margin-bottom:10px}}

/* 2026-10-27: the logo without the glow behind it */
body>aside>.logo::before,.authlogo i{background-image:url(/logo.svg);filter:none}
/* a larger mark: at 32-36 px the cut lines were too thin to read */
body>aside>.logo{padding-left:54px;min-height:44px}
body>aside>.logo::before{width:42px;height:42px;left:4px}
body>aside>.logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;min-height:1.5em;flex:none}
.authlogo i{width:46px;height:46px}
/* 2026-10-27 phone: a slim sticky top bar, a compact guest bar, a calmer bottom bar (pill behind the icon) */
@media (max-width:820px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body>aside{position:sticky;top:0;z-index:55;min-height:56px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;gap:10px;background:rgba(14,22,40,.97);border-bottom:1px solid rgba(52,72,112,.55)}
  /* no backdrop-filter on aside: it would become the containing block of the fixed bottom bar */
  body>aside>.logo{font-size:19px;padding:0 0 0 46px;min-height:38px;flex:none}
  body>aside>.logo::before{width:38px;height:38px;left:0}
  #me{gap:8px;flex:none}
  .guestme{flex-direction:row;align-items:center;gap:8px;padding:0;border:0;background:none}
  .guestme b{display:none}
  .guestme .btn{min-height:36px;padding:0 14px;font-size:14px;border-radius:10px;display:inline-flex;align-items:center;white-space:nowrap}
  #me .credit{min-height:36px;padding:0 10px;border-radius:10px}
  #me .credit b{font-size:15px}
  #me .who .av{width:32px;height:32px}
  nav{height:calc(64px + env(safe-area-inset-bottom));padding:4px 2px env(safe-area-inset-bottom);align-items:stretch;background:rgba(14,22,40,.94);border-top:1px solid rgba(52,72,112,.55)}
  nav a,nav a#more{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 0;min-height:0;font-size:11px;font-weight:600;line-height:1.1;letter-spacing:-.01em;color:#8f9cb9;background:none;border:0;border-radius:12px;box-shadow:none;-webkit-tap-highlight-color:transparent}
  nav a>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  nav a .ni{width:54px;height:30px;padding:5px 17px;border-radius:99px;opacity:1;transition:background-color .2s var(--ease),transform .15s var(--ease)}
  nav a:hover{background:none;border-color:transparent}
  nav a:active .ni{transform:scale(.92)}
  nav a.on,nav a.grp.has,nav a.grp.open{color:#fff;background:none;border-color:transparent;box-shadow:none}
  nav a.on .ni,nav a.grp.has .ni,nav a.grp.open .ni{background:rgba(91,140,240,.24);color:#cfe0ff}
  nav .nsub[data-sub=create]{bottom:calc(100% + 10px)}
  nav .nsub[data-sub=create] a{flex-direction:column;gap:4px;padding:10px 4px;font-size:12px}
  nav .nsub[data-sub=create] a .ni{width:22px;height:22px;padding:0;background:none}
  #moremenu{bottom:calc(74px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  body:has(.guestme)>aside>.logo{font-size:0;padding-left:40px}
  .guestme .btn{padding:0 11px}
  nav a,nav a#more{font-size:10.5px;letter-spacing:-.02em}
  nav a .ni{width:48px;padding:5px 14px}
}
/* 2026-10-27: sidebar logo: text block centred on the mark */
body>aside>.logo{padding-top:0;padding-bottom:0;gap:3px;min-height:44px;justify-content:center;line-height:1}
body>aside>.logo span{line-height:1.2;min-height:0}

/* ===== 2026-10-27 arayüz turu: ana sayfa sohbeti, Hekaty Studio, telefon kabuğu, menü sayfası, iskelet, erişilebilirlik ===== */
:root{--shell-top:56px;--shell-bottom:64px;--tap:44px;--hair:rgba(77,127,224,.22)}
:focus-visible{outline:2px solid #6f9bff;outline-offset:2px;border-radius:6px}
.skip{position:fixed;left:12px;top:-64px;z-index:300;background:#eef2fa;color:#0e1628;padding:9px 14px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}
#ptitle{display:none}
.btn,.pri,.sb-chip,.seg button,.seg a,.cmp-send,.stu-style{transition:transform .12s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:active,.pri:active,.sb-chip:active,.seg button:active,.seg a:active,.cmp-send:active,.stu-style:active{transform:scale(.97)}
.seg button{appearance:none;border:0;background:none;color:var(--mute);font:inherit;font-weight:700;padding:7px 12px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button:hover{color:#e7ecf6;background:rgba(77,127,224,.08)}
.seg button.on{background:linear-gradient(135deg,rgba(42,86,198,.55),rgba(77,127,224,.3));color:#fff}
.seg button .ic{width:16px;height:16px}
.linkish{background:none;border:0;color:#9dbcff;font:inherit;font-weight:700;padding:6px 2px;cursor:pointer}
.linkish:hover{text-decoration:underline}

/* loading outline */
.skel{border-radius:14px;background:linear-gradient(90deg,#16213b 25%,#22325a 40%,#16213b 60%);background-size:300% 100%;animation:shim 1.5s ease-in-out infinite}
.skel-head{height:44px;width:min(340px,70%);margin-bottom:18px;border-radius:12px}
.skel-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.skel-row .skel{height:112px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.skel-tile{aspect-ratio:9/16;height:auto}
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* home: the chat first; on a wide screen the numbers sit beside it */
.homewrap{display:grid;gap:18px;align-items:start;margin-bottom:8px}
.homemain,.homeside{min-width:0}
.homeside{display:flex;flex-direction:column;gap:12px}
.homeside .kpis{grid-template-columns:1fr 1fr;margin:0}
.homeside .nextstep{margin:0}
@media (min-width:1100px){.homewrap:not(.guesthome):not(.solo){grid-template-columns:minmax(0,1fr) 280px}.homeside .kpis{grid-template-columns:1fr}}

/* the chat */
.chat{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px;animation:msgIn .45s var(--ease) both}
.chat.still{animation:none}
.chat.fresh{padding-top:clamp(4px,5vh,56px)}
.chat-hi{text-align:center;display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.chat-hi h1{font:600 clamp(26px,4vw,40px)/1.12 Sora,Inter,sans-serif;letter-spacing:-.03em;margin:0}
.chat-hi p{margin:0}
.chat-head{display:flex;justify-content:space-between;align-items:center}
.chat-thread{display:flex;flex-direction:column;gap:10px;max-height:min(50vh,520px);overflow:auto;padding:4px 2px;scroll-behavior:smooth}
.msg{max-width:88%}
.msg.new{animation:msgIn .35s var(--ease) both}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,#2a56c6,#4d7fe0);color:#fff;border-radius:18px 18px 6px 18px;padding:10px 14px;display:flex;flex-direction:column;gap:3px}
.msg.me p{margin:0;white-space:pre-wrap;line-height:1.45;overflow-wrap:anywhere}
.msg.me small{opacity:.78;font-size:11.5px}
.msg.hk{align-self:flex-start;display:flex;gap:10px;align-items:flex-start}
.hkav{width:30px;height:30px;flex:none;border-radius:50%;background:#0B1020 url(/hekaty-mark.svg) center/20px no-repeat;border:1px solid var(--line)}
.hkb{background:#16213b;border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.hkb p{margin:0;line-height:1.45}
.hkb .row{gap:8px;flex-wrap:wrap}
.hk-steps{display:flex;gap:4px}
.hk-steps i{width:30px;height:4px;border-radius:9px;background:#2a3a5f}
.hk-steps i.done{background:#6f9bff}
.hk-steps i.on{background:#6f9bff;animation:pulse 1.2s ease-in-out infinite}
.hk-wait{display:flex;gap:5px;padding:6px 0}
.hk-wait i{width:7px;height:7px;border-radius:50%;background:#9aa7c4;animation:dot 1s ease-in-out infinite}
.hk-wait i:nth-child(2){animation-delay:.15s}.hk-wait i:nth-child(3){animation-delay:.3s}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.4}}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.composer{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:22px;background:linear-gradient(180deg,rgba(30,44,76,.94),rgba(18,27,48,.94));border:1px solid var(--hair);box-shadow:0 24px 60px -30px rgba(0,0,0,.85);transition:border-color .2s var(--ease),box-shadow .25s var(--ease)}
.composer:focus-within{border-color:rgba(111,155,255,.55);box-shadow:0 0 0 4px rgba(77,127,224,.14),0 24px 60px -30px rgba(0,0,0,.85)}
.cmp-modes{align-self:flex-start}
.cmp-box{display:flex;align-items:flex-end;gap:8px;background:#0a1224;border:1px solid var(--line);border-radius:16px;padding:6px 6px 6px 14px}
.cmp-box textarea,.cmp-box textarea:focus{flex:1;min-width:0;border:0;background:none;resize:none;color:var(--fg);font:inherit;font-size:16.5px;line-height:1.45;padding:9px 0;min-height:54px;max-height:220px;outline:none;box-shadow:none}
.cmp-box textarea::placeholder{color:#6f7d9c}
.cmp-send{width:44px;height:44px;flex:none;border-radius:13px;border:0;display:grid;place-items:center;background:var(--grad);cursor:pointer;box-shadow:0 8px 20px -8px rgba(77,127,224,.8)}
.cmp-send .ic{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cmp-send.busy{opacity:.6}
.cmp-opts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cmp-chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 0 0 11px;border-radius:99px;border:1px solid var(--line2);background:rgba(22,33,59,.7);color:#c9d6f0;font-size:13px}
.cmp-chip:hover{border-color:#6f9bff}
.cmp-chip .ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cmp-chip::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-70%) rotate(45deg);opacity:.7;pointer-events:none}
.cmp-chip select,.cmp-chip select:focus{appearance:none;-webkit-appearance:none;background:none;border:0;box-shadow:none;color:inherit;font:inherit;font-weight:700;padding:7px 28px 7px 0;min-height:0;cursor:pointer;max-width:210px;text-overflow:ellipsis}
.cmp-chip select option{background:#141d33;color:#eef2fa}
.cmp-more{margin-left:auto;font-size:13.5px}
.sb-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.sb-chips::-webkit-scrollbar{display:none}
.chat>.sb-chips{justify-content:center;flex-wrap:wrap}
.sb-chip{flex:none;display:block;text-align:left;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-size:13px;padding:7px 13px;border-radius:99px;border:1px solid var(--line2);background:rgba(22,33,59,.7);color:#c9d6f0;cursor:pointer}
.sb-chip:hover,.sb-chip.on{border-color:#6f9bff;color:#fff}
.sb-chip.on{background:rgba(42,86,198,.35)}

/* Hekaty Studio: Hekaty's own look (Sora, the coral mark) around demos drawn in the chosen catalogue style */
.stu{--sbg:#0B1020;--sfg:#F5F7FB;--sac:#FF5A3C;--sac2:#4D7FE0;display:flex;flex-direction:column;gap:18px}
.stu h1{font:600 clamp(28px,4vw,42px)/1.08 Sora,Inter,sans-serif;letter-spacing:-.03em;margin:0 0 6px}
.stu-hero{display:flex;gap:18px;align-items:center;padding:22px;border-radius:22px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,90,60,.16),transparent 55%),linear-gradient(180deg,rgba(30,44,76,.8),rgba(18,27,48,.8));border:1px solid var(--hair)}
.stu-hero p{margin:0;max-width:640px;color:#c9d6f0;line-height:1.55}
.stu-mark{width:64px;height:64px;flex:none;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stu-styles{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.stu-styles::-webkit-scrollbar{display:none}
.stu-style{flex:none;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:99px;border:1px solid var(--line);background:#141d33;color:#c9d6f0;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.stu-style.on{border-color:#6f9bff;color:#fff;box-shadow:0 0 0 2px rgba(111,155,255,.22)}
.stu-style .sw{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(255,255,255,.12)}
.stu-style .sw i{width:7px;height:7px;border-radius:50%}
.stu-tabs{display:flex;overflow-x:auto;scrollbar-width:none;max-width:100%;align-self:flex-start}
.stu-tabs::-webkit-scrollbar{display:none}
.stu-panel{min-height:360px;animation:msgIn .35s var(--ease) both}
.stu-note{margin:0;font-size:13px}
.stu-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.stu-ctl{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.stu-ctl p{margin:0;line-height:1.55;color:#c9d6f0}
.stu-list{display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:100%}
.stu-list.langs{flex-direction:row;flex-wrap:wrap}
.stu-list .sb-chip{max-width:100%}
.stu-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:340px;padding:12px;border-radius:20px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 10px,transparent 10px 20px),#0c1426;border:1px solid var(--line)}
.stu-in{display:flex;flex-direction:column;gap:6px;width:100%}
.stu-in input{min-height:44px;font-size:17px;font-weight:700}
.sc-frame{position:relative;border-radius:16px;overflow:hidden;background:var(--sbg);color:var(--sfg);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-family:Sora,Inter,sans-serif}
.sc-inner{padding:9%;display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;height:100%;box-sizing:border-box}
.sc-tag{align-self:flex-start;font:800 10.5px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:99px;background:var(--sac);color:var(--sbg)}
.sc-cap{font-size:clamp(14px,1.8vw,22px);font-weight:600;line-height:1.16;letter-spacing:-.02em;margin:0;overflow-wrap:anywhere}
.sc-bar{display:block;height:5px;border-radius:9px;background:color-mix(in srgb,var(--sfg) 18%,transparent);overflow:hidden}
.sc-bar i{display:block;height:100%;width:40%;background:var(--sac);animation:bar 2.4s var(--ease) infinite alternate}
@keyframes bar{from{width:12%}to{width:92%}}
.stu-video{display:flex;flex-direction:column;gap:14px}
.stp-type{padding:18px;display:flex;flex-direction:column;gap:10px}
.stp-typed{font:600 clamp(19px,2.6vw,28px)/1.25 Sora,Inter,sans-serif;letter-spacing:-.02em;margin:0;min-height:2.5em}
.stp-typed::after{content:"";display:inline-block;width:2px;height:1em;background:#9dbcff;margin-left:3px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sc-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sc-tools>small{flex:1 1 100%}
.sc-tools .cmp-chip select{max-width:200px}
.sc-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}
.sc-scene{display:flex;flex-direction:column;gap:8px;min-width:0;animation:scIn .55s var(--ease) both;animation-delay:calc(var(--i) * .12s)}
.sc-scene .sc-frame{width:100%}
.sc-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
@keyframes scIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.img-mock{position:relative;border-radius:16px;overflow:hidden;background:radial-gradient(80% 70% at 30% 25%,color-mix(in srgb,var(--sac) 70%,white) 0%,transparent 60%),linear-gradient(160deg,var(--sac2),var(--sbg));box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.img-mock i{position:absolute;border-radius:50%;filter:blur(2px)}
.img-mock .o1{width:46%;aspect-ratio:1;left:27%;top:30%;background:radial-gradient(circle at 35% 30%,#fff8,transparent 40%),var(--sac);box-shadow:0 30px 40px -12px rgba(0,0,0,.6)}
.img-mock .o2{width:70%;height:12%;left:15%;bottom:16%;background:rgba(0,0,0,.35);filter:blur(10px)}
.img-mock .o3{width:20%;aspect-ratio:1;right:10%;top:10%;background:color-mix(in srgb,var(--sfg) 70%,transparent);opacity:.5;filter:blur(8px)}
.img-mock.k1 .o1{border-radius:18%;width:30%;left:35%;top:24%}
.img-mock.k2 .o1{border-radius:30% 30% 12% 12%;width:56%;left:22%;top:40%;aspect-ratio:2/1}
.img-cap{position:absolute;left:8%;right:8%;bottom:6%;font:600 clamp(13px,1.6vw,18px)/1.2 Sora,Inter,sans-serif;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.lg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lg-tile{aspect-ratio:1;border-radius:18px;background:var(--sbg);color:var(--sfg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 14px 30px -18px rgba(0,0,0,.8);overflow:hidden;text-align:center}
.lg-mono{width:58%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--sac);color:var(--sbg);font:600 clamp(28px,4vw,46px)/1 Sora,Inter,sans-serif}
.lg-word{display:inline-flex;align-items:baseline;gap:3px;font:600 clamp(15px,1.9vw,22px)/1.1 Sora,Inter,sans-serif;letter-spacing:-.03em}
.lg-word i{width:.32em;height:.32em;border-radius:50%;background:var(--sac);flex:none}
.lg-badge{position:relative;width:60%;aspect-ratio:1;display:grid;place-items:center}
.lg-badge svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--sac);stroke-width:3}
.lg-badge svg circle+circle{stroke:var(--sfg);stroke-width:1.2;stroke-dasharray:4 4}
.lg-badge b{font:600 clamp(22px,3vw,34px)/1 Sora,Inter,sans-serif}
.lg-tile small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.lg-grid.feel-cesur .lg-word,.lg-grid.feel-cesur .lg-badge b{font-weight:600;text-transform:uppercase;letter-spacing:-.01em}
.lg-grid.feel-cesur .lg-mono{border-radius:22%}
.lg-grid.feel-teknik .lg-word,.lg-grid.feel-teknik .lg-mono,.lg-grid.feel-teknik .lg-badge b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}
.lg-grid.feel-teknik .lg-mono{border-radius:8px}
.lg-grid.feel-sicak .lg-word,.lg-grid.feel-sicak .lg-badge b{font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:0}
.lg-grid.feel-sicak .lg-mono{font-family:Georgia,serif;font-style:italic}
.sl-deck{display:flex;align-items:center;gap:10px}
.sl-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#16213b;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.sl-nav:disabled{opacity:.3;cursor:default}
.sl-view{overflow:hidden;border-radius:16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.sl-track{display:flex;height:100%;transition:transform .45s var(--ease)}
.sl-card{flex:0 0 100%;height:100%;box-sizing:border-box;padding:10%;display:flex;flex-direction:column;justify-content:center;gap:12px;background:var(--sbg);color:var(--sfg);font-family:Sora,Inter,sans-serif;position:relative}
.sl-card p{margin:0;font-size:clamp(18px,2.2vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.sl-n{position:absolute;top:8%;right:8%;font:700 12px Inter,sans-serif;opacity:.7}
.sl-cta{align-self:flex-start;padding:7px 12px;border-radius:99px;background:var(--sac);color:var(--sbg);font:800 12px Inter,sans-serif}
.sl-dots{display:flex;gap:6px}
.sl-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#34497a;padding:0;cursor:pointer;transition:width .25s var(--ease)}
.sl-dots button.on{width:22px;border-radius:9px;background:#6f9bff}
.sc-wave{display:flex;align-items:center;gap:3px;height:22px}
.sc-wave i{flex:1;max-width:5px;border-radius:9px;background:var(--sac);animation:wave 1.1s ease-in-out infinite}
.sc-wave i:nth-child(odd){animation-delay:.2s}.sc-wave i:nth-child(3n){animation-delay:.45s}
@keyframes wave{0%,100%{height:20%}50%{height:100%}}
.fm-plat{font:700 12px Inter,sans-serif;opacity:.8}
.stu-brand{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:center}
.br-pal{display:flex;flex-wrap:wrap;gap:10px}
.br-pal span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.br-pal i{width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.15)}
.br-row{display:flex;gap:14px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.stp-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stp-cta .grow{min-width:200px;display:flex;flex-direction:column;gap:4px}

/* ----- phone: a minimal top bar (mark, page name, account) and four places at the bottom; both fold away on scroll ----- */
@media (max-width:820px){
  /* the bar's background is a pseudo-element; the aside gets no transform, so the fixed bottom bar inside it keeps its place */
  body>aside{--bar-h:calc(var(--shell-top) + env(safe-area-inset-top));position:fixed;top:0;left:0;right:0;z-index:55;height:var(--bar-h);min-height:0;background:none;border:0;pointer-events:none;box-sizing:border-box}
  body>aside::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,22,40,.97);border-bottom:1px solid rgba(52,72,112,.55);box-shadow:0 8px 24px -16px rgba(0,0,0,.9)}
  body>aside>.logo,body>aside>#me,body>aside>nav{pointer-events:auto}
  body>aside::before,body>aside>.logo,body>aside>#me,#ptitle{translate:0 0;transition:translate .38s cubic-bezier(.22,.8,.24,1);will-change:translate}
  html.bar-off body>aside::before,html.bar-off body>aside>.logo,html.bar-off body>aside>#me,html.bar-off #ptitle{translate:0 calc(-1 * var(--bar-h) - 4px);transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.6,1)}
  html.bar-off body>aside{pointer-events:none}
  html.bar-off body>aside>.logo,html.bar-off body>aside>#me{pointer-events:none}
  html.bar-off body>aside>nav{pointer-events:auto}
  body:not([data-page=today])>aside>.logo{font-size:0;padding-left:38px;width:38px;flex:none}
  #ptitle{display:block;position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 28px);transform:translate(-50%,-50%);max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 16px Sora,Inter,sans-serif;letter-spacing:-.02em;color:#eef2fa}
  body[data-page=today] #ptitle,body:has(.guestme) #ptitle{display:none}
  #main{padding-top:calc(var(--shell-top) + 10px + env(safe-area-inset-top))}
  body{padding-bottom:calc(var(--shell-bottom) + 6px + env(safe-area-inset-bottom))}
  #legal{display:none}
  nav a[data-nav=calendar],nav a[data-nav=projects],nav a[data-nav=studio],nav .nsub[data-sub=create]{display:none!important}
  .mpanel{order:-1}
  .mpanel:not(.on) .mfold,.mpanel .mv{display:none}
  .mpanel:not(.on){min-height:0}
  #me .credit small{display:none}
  .chat.fresh{padding-top:6px}
  .chat-hi h1{font-size:26px}
  .chat-thread{max-height:none;overflow:visible}
  .composer{padding:10px;border-radius:20px}
  .cmp-modes{align-self:stretch;display:flex}
  .cmp-modes button{flex:1;justify-content:center}
  .cmp-more{margin-left:0}
  .cmp-chip select{max-width:150px}
  .chat>.sb-chips{justify-content:flex-start;flex-wrap:nowrap}
  .sb-chip{max-width:250px}
  .homeside .kpis{grid-template-columns:1fr 1fr}
  .stu-hero{padding:16px;gap:12px}
  .stu-tabs button{padding:7px 10px}
  .stu-mark{width:44px;height:44px}
  .stu-split,.stu-brand{grid-template-columns:1fr;gap:16px}
  .stu-stage{min-height:0;padding:16px 8px}
  .sc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;scrollbar-width:none}
  .sc-track::-webkit-scrollbar{display:none}
  .sc-scene{flex:0 0 46%;scroll-snap-align:start}
  .lg-grid{gap:8px}
  .br-row .sc-frame{transform:scale(.82);transform-origin:bottom center;margin:0 -14px}
  .skel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .skel-row{grid-template-columns:1fr}
  .skel-row .skel{height:88px}
  /* the menu sheet */
  #sheet{position:fixed;inset:0;z-index:200}
  #sheet[hidden]{display:none}
  #sheet .sh-back{position:absolute;inset:0;background:rgba(4,8,16,0);transition:background .32s var(--ease)}
  #sheet.open .sh-back{background:rgba(4,8,16,.62)}
  #sheet .sh-panel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;max-height:86dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;background:#131c33;border:1px solid var(--hair);border-bottom:0;border-radius:22px 22px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(104%);transition:transform .36s var(--ease);box-shadow:0 -22px 50px -22px rgba(0,0,0,.85);outline:none}
  #sheet.open .sh-panel{transform:none}
  html.sheet-open,html.sheet-open body{overflow:hidden}
  .sh-grab{width:42px;height:5px;border-radius:9px;background:#34497a;margin:2px auto 12px}
  .sh-guest{display:flex;flex-direction:column;gap:10px;padding:4px 2px 14px}
  .sh-guest .btn{flex:1;justify-content:center}
  .sh-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sh-item{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:12px;border-radius:14px;background:#1a2643;color:#e7ecf6;font-weight:700;font-size:15px;border:1px solid rgba(77,127,224,.14);text-decoration:none}
  .sh-item.on{border-color:rgba(111,155,255,.5);background:#22345c}
  .sh-item svg{width:20px;height:20px;flex:none;fill:none;stroke:#9dbcff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .sh-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 2px 4px}
  .sh-row select{min-height:var(--tap);min-width:160px}
  .sh-install{width:100%;min-height:48px;margin-top:10px;border-radius:14px;border:0;background:var(--grad);color:#fff;font:inherit;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
  .sh-install .ic{width:18px;height:18px}
  .sh-tip{font-size:13px;line-height:1.5;margin:12px 2px 4px}
  .sh-legal{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font-size:12.5px}
  .sh-legal a{color:var(--mute)}
}
@media (max-width:380px){
  .sh-list{grid-template-columns:1fr}
  .sc-scene{flex-basis:58%}
  .cmp-chip select{max-width:120px}
}
@media (prefers-reduced-motion:reduce){
  .skel,.stp-typed::after,.sc-scene,.sc-bar i,.stu-mark,.sc-wave i,.hk-wait i,.hk-steps i,.msg,.chat,.stu-panel{animation:none!important}
  body>aside>*,body>aside::before,#ptitle,#sheet .sh-panel,#sheet .sh-back,.sl-track{transition:none!important}
  .msg.new{animation:none!important}
}

/* a job's progress (2026-10-27): its steps, the pictures as they land, the designer's first look at the scenes */
.pg{display:flex;flex-direction:column;gap:12px;min-width:0}
.pg-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pg-now{flex:1;min-width:0}
.pg-time{color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.pg-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pg-steps li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:5px;color:var(--mute);font-size:14px}
.pg-steps li>i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-sizing:border-box}
.pg-steps li.on,.pg-steps li.done{color:var(--fg)}
.pg-steps li.on>i{border-color:var(--ac);border-right-color:transparent;animation:sp .8s linear infinite}
.pg-steps li.done>i{border-color:var(--ac);background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.pg-steps li.bad>i{border-color:var(--bad)}
.pg-steps small{color:var(--mute);font-size:12px;text-align:right;min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-bar{grid-column:2/4;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.pg-bar b{display:block;height:100%;background:var(--ac);border-radius:4px;transition:width .6s ease}
.pg-pics{display:flex;flex-wrap:wrap;gap:6px}
.pg-pics:empty,.pg-foot:empty{display:none}
.pg-pics img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:rgba(255,255,255,.05);animation:pgin .5s ease both}
@keyframes pgin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.pg-sheet{margin:0}
.pg-sheet figcaption{font-size:12px;color:var(--mute);margin-bottom:6px}
.pg-sheet img{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:10px;background:rgba(0,0,0,.35)}
.pg-foot{display:flex;gap:8px}
.pgbox{width:min(600px,100%)}
.job.pgjob .jopen{position:absolute;inset:0;width:100%;background:none;border:0;padding:0;cursor:pointer;border-radius:inherit}
.job.pgjob .jopen:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.job .jx,.job .jretry{position:relative;z-index:1}
.job .jx{position:absolute}
.job .jretry{display:inline-block;margin-top:4px;font-size:12px}
.jsteps i.bad{background:var(--bad)}
.msg .pg{margin-bottom:6px}
@media (max-width:820px){.pg-steps small{max-width:150px}.pg-pics img{width:56px;height:56px}}

/* community: by quality (Yüksek / Orta / Düşük / Karışık), its badge on each tile, and "show more" */
.cq{display:flex;flex-wrap:wrap;margin:-4px 0 16px;width:max-content;max-width:100%}
.cq a{padding:6px 14px;white-space:nowrap}
.tag.qt.high{color:#ffd58a;border-color:rgba(255,200,110,.45)}
.tag.qt.medium{color:#a9c2ff;border-color:rgba(111,155,255,.45)}
.tag.qt.low{color:#9fe0c0;border-color:rgba(110,210,160,.4)}
.tag.qt.mixed{color:#e2b4ff;border-color:rgba(200,140,255,.4)}
.cmore{display:flex;justify-content:center;margin:20px 0 6px}
@media (max-width:820px){.cq{width:100%}.cq a{flex:1;text-align:center;padding:6px 8px}}

/* Oluştur → Fikir asistanı: past ideas beside the conversation; a proposal is a card with its button */
.ideas{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.ilist{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}
.iq{display:flex;flex-direction:column;gap:3px}
.ichats{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto}
.ichats a{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--fg);border:1px solid transparent}
.ichats a b{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ichats a:hover{background:rgba(111,155,255,.08)}
.ichats a.on{border-color:rgba(111,155,255,.45);background:rgba(111,155,255,.1)}
.ichatrow{display:flex;align-items:center;gap:4px;border-radius:10px;min-width:0}.ichatrow>a{flex:1;min-width:0}
.ichatrow.on{background:rgba(111,155,255,.1);box-shadow:inset 0 0 0 1px rgba(111,155,255,.45)}.ichatrow:not(.on)>a:hover{background:rgba(111,155,255,.08)}
.ichatrow .idel{padding:6px 8px;opacity:.55}.ichatrow .idel:hover,.ichatrow .idel:focus-visible{opacity:1}
.ichatrow>span{padding:8px 10px;font-size:13px}.ichatrow button{padding:6px 10px;font-size:13px}
.invite{max-width:720px}.invlink input{font-family:ui-monospace,monospace;font-size:14px}
.invstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.invstats>div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(111,155,255,.05)}.invstats b{font-size:24px}
.invsteps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.upall{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;font-weight:600}
body.filedrag main::after{content:attr(data-drop);position:fixed;inset:14px;z-index:60;display:grid;place-items:center;pointer-events:none;border:3px dashed var(--ac);border-radius:20px;background:color-mix(in srgb,var(--ac) 12%,rgba(8,12,24,.72));color:#fff;font:700 22px/1.3 system-ui,sans-serif;text-align:center;padding:20px}
.ichat{max-width:none;margin:0}
.ichat .chat-thread{max-height:min(62vh,680px)}
.ichat .msg.hk{max-width:96%}
.ichat .hkb{min-width:0}
.icard{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:14px;background:#0d162b;border:1px solid var(--line);width:100%}
.icard .ireq{white-space:pre-wrap;line-height:1.5;margin:0;font-size:14px;overflow-wrap:anywhere}
.icard .ichips{gap:6px;flex-wrap:wrap}
.ifiles{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.itips{margin:0;padding-left:18px;font-size:13px;color:var(--mute);display:flex;flex-direction:column;gap:3px}
.ideafiles{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(111,155,255,.5);background:rgba(111,155,255,.06);font-size:13.5px}
.idealink{font-size:13px;font-weight:600;text-decoration:none;color:#a9c2ff;align-self:flex-start}
.idealink:hover{text-decoration:underline}
@media (max-width:820px){.ideas{grid-template-columns:1fr}.ilist{position:static}.ichats{max-height:none;flex-direction:row;overflow-x:auto}.ichats a{min-width:160px;max-width:200px}.ichatrow{flex:none}.ichat .chat-thread{max-height:none}}

/* the idea assistant: photos and videos in the conversation */
.cmp-att{width:40px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;cursor:pointer;color:#9fb2d8;align-self:flex-end}
.cmp-att:hover{background:rgba(111,155,255,.12);color:#fff}
.cmp-att.off{opacity:.4;pointer-events:none}
.cmp-att .ic{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ithumbs{display:flex;flex-wrap:wrap;gap:6px}
.ithumb{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;background:#0a1224;flex:none}
.ithumb img,.ithumb video{width:100%;height:100%;object-fit:cover;display:block}
.ithumb i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}
.ithumb.up{opacity:.45}
.ithumb.up::after{content:'';position:absolute;left:8px;right:8px;bottom:7px;height:3px;border-radius:2px;background:linear-gradient(90deg,#4d7fe0,#9fb2d8);animation:shim 1.2s linear infinite;background-size:200% 100%}
.ithumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:11px;line-height:22px;padding:0;cursor:pointer}
.msg.me .ithumbs{justify-content:flex-end}
.tag.iok{background:rgba(52,199,120,.16);color:#7fe0a8}
.ilock{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border-radius:18px;border:1px dashed rgba(111,155,255,.4);background:rgba(77,127,224,.08)}
.ilock p{margin:0;line-height:1.5}
.irev{font-size:12.5px;padding:0 4px}
.icaret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:pulse 1s infinite}
.icard.ilive{opacity:.92}
/* the admin's view of what people do (lib/events.js) */
.evsum{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.evnums{display:flex;flex-wrap:wrap;gap:10px}
.evnums>div{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:rgba(111,155,255,.07);min-width:110px}
.evnums b{font-size:18px}
.evnums small{color:var(--mute);font-size:12px}
.evcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.evcols>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.evtop{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:3px 0;border-bottom:1px solid rgba(52,72,112,.35)}
.evtop span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evlist{grid-column:1/-1;max-height:420px;overflow:auto;padding:10px 12px;margin:0 0 8px;border-radius:12px;background:#0b1324;border:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.evvisit{font-size:12px;color:#a9c2ff;margin:8px 0 2px;font-weight:600}
.ev{display:grid;grid-template-columns:118px 22px minmax(0,auto) minmax(0,1fr);gap:8px;align-items:baseline;font-size:12.5px}
.ev small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev time{color:var(--mute);font-variant-numeric:tabular-nums}
.ev-server b{color:#7fe0a8}
.ev-toast b{color:#ffcf7a;font-weight:500}
@media (max-width:820px){.evcols{grid-template-columns:1fr}.ev{grid-template-columns:96px 20px minmax(0,1fr)}.ev small{grid-column:3}}