/* Seven’s Design Ön Muhasebe, /yeni/ v2: one sample receipt travels through the product.
   Desktop: two-column stations, copy scrolls on the left, the object rests in a sticky column on the right.
   Mobile: one column, the object sits in the flow between the lead and the points.
   Layers: .atmos and .giant (z 0) < WebGL canvas from stage.js (z 1) < main (z 2) < rail, fab, header. */

:root{
  --bg:#0d0a0a; --bg-2:#141010; --bg-3:#1c1615;
  --ink:#f3eeec; --ink-2:rgba(243,238,236,.8); --ink-3:rgba(243,238,236,.62);
  --line:rgba(243,238,236,.12); --line-2:rgba(243,238,236,.22);
  --accent:#e08f80; --accent-dim:rgba(224,143,128,.38); --accent-faint:rgba(224,143,128,.1); --band:#964235;
  --glass:rgba(22,17,17,.78);
  --display:"Clash Grotesk","Segoe UI",system-ui,sans-serif;
  --text:Satoshi,"Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,Menlo,"DejaVu Sans Mono","Liberation Mono",monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,4vw,56px); --rail:0px; --nav-h:68px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--text);font-feature-settings:"kern";-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
p a,li a,td a,dd a,figcaption a{color:var(--accent)}
p a:hover,li a:hover,td a:hover,dd a:hover{color:var(--ink)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:rgba(224,143,128,.35);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;z-index:90;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Atmosphere (behind the WebGL canvas) ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(ellipse 60% 50% at 72% 30%,rgba(150,66,53,.22),transparent 70%),radial-gradient(ellipse 50% 40% at 10% 90%,rgba(150,66,53,.08),transparent 70%)}
.atmos::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(4,2,2,.7) 100%)}
.atmos i{position:absolute;top:-15%;width:20vw;height:130%;background:linear-gradient(180deg,rgba(243,238,236,.05),rgba(243,238,236,0) 65%);filter:blur(26px);transform:rotate(17deg)}
.atmos i:nth-child(1){left:24%}
.atmos i:nth-child(2){left:52%;width:11vw;background:linear-gradient(180deg,rgba(224,143,128,.09),rgba(224,143,128,0) 65%)}
.atmos i:nth-child(3){left:74%;width:15vw}

/* Giant outline words: aria-hidden decoration behind the hero receipt, moved by transform only. */
/* SVG text, so the decorative words are never the LCP element; positioned by transform, so never a layout shift. */
.giant{--g-size:clamp(96px,12.6vw,220px);position:absolute;left:0;right:0;top:0;height:100svh;z-index:0;pointer-events:none;overflow:hidden;contain:layout paint;transform:translate3d(0,var(--g-y,0px),0)}
.gw{position:absolute;height:calc(var(--g-size) * 1.02);overflow:visible;will-change:transform;transform:translate3d(var(--gx,0px),0,0)}
.gw text{font:600 var(--g-size)/1 var(--display);letter-spacing:-.035em;fill:none;stroke:rgba(224,143,128,.38);stroke-width:1px;vector-effect:non-scaling-stroke}
.g1{left:44vw;width:calc(56vw - var(--pad));top:12%}
.g2{left:0;width:calc(100% - var(--pad) - 2.5vw);bottom:5%}

/* ---------- Cursor (fine pointers, motion on) ---------- */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(243,238,236,.45);border-radius:50%;opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s,border-color .3s}
.cursor i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--ink)}
.cursor.on{opacity:1}
.cursor.big{width:60px;height:60px;margin:-30px 0 0 -30px;border-color:var(--accent)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
.motion-off .cursor,.no-js .cursor{display:none}

/* ---------- Header ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);transition:transform .45s var(--ease),background-color .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(13,10,10,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.hide{transform:translateY(-100%)}
.no-js .nav{background:rgba(13,10,10,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:500 16.5px/1.1 var(--display);letter-spacing:-.005em}
.brand b{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--band);color:#fff;font-weight:600;font-size:17px}
.brand small{display:block;margin-top:2px;font:500 11px var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.menu{display:flex;gap:26px;font-size:14.5px}
.menu a{text-decoration:none;color:var(--ink-2);transition:color .2s}
.menu a:hover{color:var(--ink)}
.nav-end{display:flex;align-items:center;gap:10px}
.mtoggle{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(13,10,10,.4);font:500 13px var(--text);color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.mtoggle:hover{border-color:var(--ink);color:var(--ink)}
.mt-ico{position:relative;width:12px;height:12px;flex:none}
.mt-ico::before,.mt-ico::after{content:"";position:absolute;top:1px;bottom:1px;width:3.5px;border-radius:2px;background:currentColor}
.mt-ico::before{left:1px}.mt-ico::after{right:1px}
.motion-off .mt-ico::before{left:2px;top:0;bottom:0;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.motion-off .mt-ico::after{display:none}
.no-js .mtoggle{display:none}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:1px solid rgba(243,238,236,.34);border-radius:999px;color:var(--ink);background:rgba(13,10,10,.38);font:600 15px var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .2s var(--ease)}
.pill:hover{border-color:var(--ink)}
.pill:active{transform:scale(.97)}
.pill.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill.solid:hover{background:#fff}
.pill.sm{min-height:38px;padding:0 16px;font-size:14px}
.pill[disabled]{opacity:.6;cursor:progress}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 6px;font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none}
.textlink:hover{color:var(--accent)}
.textlink span{transition:transform .3s var(--ease)}
.textlink:hover span{transform:translateY(3px)}

/* ---------- Rail (desktop) ---------- */
.rail{position:fixed;left:clamp(12px,1.5vw,24px);top:50%;z-index:40;transform:translateY(-50%);display:none}
.rail ol{list-style:none;padding:6px 0;margin:0;display:grid}
.rail a{position:relative;display:flex;align-items:center;gap:8px;height:27px;text-decoration:none;color:rgba(243,238,236,.53);font:500 11px/1 var(--mono);transition:color .25s}
.rail a i{display:block;width:8px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.rail .l{position:absolute;left:calc(100% + 6px);top:50%;transform:translate(-4px,-50%);padding:5px 10px;border-radius:6px;background:rgba(13,10,10,.9);border:1px solid var(--line);font:500 12.5px/1 var(--text);letter-spacing:.01em;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.rail a:hover,.rail a:focus-visible{color:var(--ink)}
.rail a:hover .l,.rail a:focus-visible .l{opacity:1;transform:translate(0,-50%)}
.rail a[aria-current]{color:var(--accent)}
.rail a[aria-current] i{width:20px}

/* ---------- Stations ---------- */
main{position:relative;z-index:2}
.station{position:relative;padding:0 var(--pad)}
.st-head{padding-top:clamp(96px,16svh,180px)}
.st-no{display:flex;align-items:center;gap:12px;margin-bottom:22px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.st-no i{display:block;width:44px;height:1px;background:var(--line-2)}
.st-no b{font-weight:500;color:var(--accent)}
h2{font:500 clamp(32px,3.7vw,58px)/1.03 var(--display);letter-spacing:-.028em;text-wrap:balance;max-width:15em}
.kicker{display:block;margin-bottom:16px;font:700 12.5px/1.45 var(--text);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);text-wrap:balance}
.lead{margin-top:28px;font-size:clamp(18px,1.32vw,20.5px);line-height:1.58;color:var(--ink);max-width:34em}
.st-body{padding-bottom:clamp(120px,26svh,300px)}
.st-body>*+*{margin-top:34px}
.points{list-style:none;padding:0;counter-reset:pt;max-width:36em}
.points li{position:relative;padding:15px 0 15px 42px;border-top:1px solid var(--line);font-size:16.5px;line-height:1.62;color:var(--ink-2);counter-increment:pt}
.points li:last-child{border-bottom:1px solid var(--line)}
.points li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:18px;font:500 11.5px/1.4 var(--mono);color:var(--accent)}
.limit{position:relative;max-width:36em;padding:18px 20px 18px 22px;border:1px solid var(--accent-dim);border-radius:14px;background:linear-gradient(135deg,rgba(150,66,53,.16),rgba(150,66,53,.05));font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.limit strong{display:block;margin-bottom:6px;font:700 11.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.limit .lt{display:block}
.limit .lt::first-letter{text-transform:uppercase}
.note{font-size:15px;color:var(--ink-3);max-width:36em}
.mini-title{font:700 12px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* Figures: reserved boxes from the logical aspect ratio, so missing images never shift the layout. */
.shape{--ar:1;--fw:min(100%,var(--lw,9999px),calc(var(--mh,70svh) * var(--ar)));margin:0;position:relative}
.shape[data-shape="fis"],.shape[data-shape="teklif-fisi"]{--ar:380/720}
.shape[data-shape="oneri-karti"]{--ar:420/660}
.shape[data-shape="defter"]{--ar:660/530;--lw:660px}
.shape[data-shape="kdv-paneli"]{--ar:600/470;--lw:600px}
.shape[data-shape="e-arsiv-fatura"]{--ar:420/594}
.shape[data-shape="telefon"]{--ar:380/780}
.shape[data-shape="rol-matrisi"]{--ar:600/440;--lw:600px}
.shape[data-shape="sunucu-karti"]{--ar:600/460;--lw:600px}
.frame{position:relative;width:var(--fw);aspect-ratio:var(--ar)}
.frame picture{display:block;width:100%;height:100%}
.frame img{display:block;width:100%;height:100%;object-fit:contain;color:var(--ink-3);font-size:13px;line-height:1.45}
.shape.is-missing .frame{outline:1px dashed var(--line-2);outline-offset:-1px;border-radius:10px;background:rgba(243,238,236,.025)}
.shape.is-missing .frame img{padding:18px}
.shape figcaption{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3);text-wrap:pretty}
.tag,.ovl-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid var(--accent-dim);border-radius:999px;background:rgba(13,10,10,.72);font:500 11.5px/1.2 var(--mono);letter-spacing:.04em;color:var(--accent)}
.tag::before,.ovl-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.shape figcaption.cap-tag{width:var(--fw);max-width:100%}

/* Fotoğraf station overlays: viewfinder corners, local preview tag, format line. */
.vf{position:absolute;inset:-14px;pointer-events:none}
.vf .c{position:absolute;width:28px;height:28px;overflow:visible}
.vf .tl{left:0;top:0}.vf .tr{right:0;top:0;transform:rotate(90deg)}.vf .br{right:0;bottom:0;transform:rotate(180deg)}.vf .bl{left:0;bottom:0;transform:rotate(270deg)}
.vf path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:square;stroke-dasharray:52;stroke-dashoffset:0}
.ovl{position:absolute;pointer-events:none}
.ovl-tag{left:-14px;bottom:calc(100% + 26px);white-space:nowrap}
.ovl-fmt{left:calc(100% + 26px);top:0;writing-mode:vertical-rl;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
/* Onay station: check marks beside the nine fields of the card, ticked in order. */
.ticks{position:absolute;inset:0;list-style:none;padding:0;margin:0;pointer-events:none}
.ticks li{position:absolute;left:calc(100% + 10px);width:16px;height:16px;margin-top:-8px;color:var(--accent)}
.ticks li::before{content:"";position:absolute;left:3px;top:1px;width:5px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- Hero ---------- */
.hero .hero-copy{position:relative;z-index:1;padding-top:calc(var(--nav-h) + 36px)}
.hero h1{font:500 clamp(46px,6vw,98px)/.94 var(--display);letter-spacing:-.04em;text-wrap:balance}
.hero h1 .kicker{margin-bottom:24px;font-size:13px;max-width:30em;letter-spacing:.16em}
.sub{margin-top:28px;font-size:clamp(16.5px,1.22vw,18.5px);line-height:1.64;color:var(--ink-2);max-width:35em}
.cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.fact{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font:500 12.5px/1.75 var(--mono);color:var(--ink-3);max-width:46em}
.fact .sep{color:var(--accent)}

/* ---------- Tables, lists, readouts ---------- */
/* Scroll shadows: an edge glow appears only on the side that has more table to scroll to. */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;-webkit-overflow-scrolling:touch;max-width:40em;
  background:linear-gradient(to right,#141010 30%,rgba(20,16,16,0)) left center/40px 100% no-repeat local,
    linear-gradient(to left,#141010 30%,rgba(20,16,16,0)) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(224,143,128,.28),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(224,143,128,.28),transparent) right center/14px 100% no-repeat scroll,#141010}
.tbl:focus-visible{outline-offset:2px}
.tbl table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.tbl caption{caption-side:top;text-align:left;padding:16px 18px 10px;font:700 11.5px/1.45 var(--text);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.tbl th,.tbl td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tbl th:first-child,.tbl td:first-child{padding-left:18px}
.tbl th:last-child,.tbl td:last-child{padding-right:18px}
.tbl thead th{padding-top:8px;padding-bottom:8px;font:600 11px/1.35 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);vertical-align:bottom}
.tbl thead th.num{font-family:var(--text);font-size:11px;white-space:normal}
.tbl .nw,.tbl thead th.nw{white-space:nowrap}
.tbl.compact thead th{text-transform:none;letter-spacing:0;font-size:11.5px}
.tbl.compact th,.tbl.compact td{padding-left:8px;padding-right:8px}
.tbl.compact th:first-child,.tbl.compact td:first-child{padding-left:16px}
.tbl.compact th:last-child,.tbl.compact td:last-child{padding-right:16px}
.tbl.wide table{font-size:14px}
.tbl tbody th{font-weight:500;color:var(--ink)}
.tbl td{color:var(--ink-2)}
.tbl .num{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:13.5px}
.tbl tfoot th,.tbl tfoot td{color:var(--ink);font-weight:600}
.tbl tr.strong th,.tbl tr.strong td{color:var(--ink);font-weight:700}
.tbl tr.hot td,.tbl tr.hot th{background:rgba(150,66,53,.2);color:var(--ink)}
.tbl .badge{display:inline-block;white-space:nowrap;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--band);color:#fbefe9;font:700 11px/1.5 var(--text);letter-spacing:.1em;text-transform:uppercase;vertical-align:1px}
.tbl .yes{color:var(--ink)}
.tbl .yes::before{content:"";display:inline-block;width:5px;height:9px;margin-right:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.tbl .no{color:var(--ink-3)}
.tbl td.yes-col{color:var(--ink)}
.tbl-note{padding:12px 18px 16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.tbl-note a{color:var(--accent)}
.tbl.wide{max-width:none}

.readout-wrap{max-width:36em}
.readout{margin-top:12px;border:1px solid var(--line);border-radius:16px;background:rgba(18,14,14,.82);padding:4px 18px}
.readout div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-top:1px solid var(--line)}
.readout div:first-child{border-top:0}
.readout dt{font-size:14px;color:var(--ink-3)}
.readout dd{font:500 14.5px/1.4 var(--mono);text-align:right;min-height:1.4em}
.readout .hot dd{color:var(--accent)}
.readout dd .tw{position:relative}
.readout dd .ghost{visibility:hidden}
.readout dd.typing .tw::after{content:"";position:absolute;right:-4px;top:.12em;width:2px;height:1.15em;background:var(--accent);animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.readout-wrap .note{margin-top:14px}

.formula{max-width:36em;padding:20px 22px;border:1px solid var(--accent-dim);background:rgba(243,238,236,.035);border-radius:14px}
.formula dt{font:700 12px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.formula dd{margin-top:8px;font-size:16.5px;line-height:1.6;color:var(--ink)}
.formula-line{max-width:36em;font:500 13.5px/1.7 var(--mono);color:var(--ink-2)}

.kdv-hero{max-width:36em;padding:24px 24px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(150,66,53,.22),rgba(18,14,14,.85) 60%)}
.kh-label{font:700 12px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kh-val{margin-top:10px;font:500 clamp(40px,4.4vw,64px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kh-val data{display:inline-block;min-width:7.2ch}
.kh-note{margin-top:12px;font-size:15px;color:var(--ink-2)}

.audit{max-width:36em;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(18,14,14,.82);font-size:15.5px;color:var(--ink-2)}
.audit del{color:var(--ink-3);text-decoration-color:var(--accent);text-decoration-thickness:2px}
.audit ins{text-decoration:none;font-weight:700;color:var(--ink)}

.flow{list-style:none;padding:0;counter-reset:fl;max-width:36em;display:grid;gap:0}
.flow li{position:relative;padding:12px 0 12px 46px;counter-increment:fl;font-size:16px;color:var(--ink)}
.flow li::before{content:counter(fl);position:absolute;left:0;top:10px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--accent-dim);border-radius:50%;font:600 12px/1 var(--mono);color:var(--accent);background:var(--bg)}
.flow li::after{content:"";position:absolute;left:14px;top:38px;bottom:-10px;width:1px;background:var(--line-2)}
.flow li:last-child::after{display:none}
.flow small{display:block;margin-top:2px;font-size:14px;color:var(--ink-3)}

.status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:36em;padding:12px 16px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;color:var(--ink-2)}
.status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.status .ok{background:#7fc29b}
.status .dev{background:var(--accent)}
.status .sep{color:var(--ink-3)}

.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:40em}
.spec div{padding:18px 18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(18,14,14,.82)}
.spec dt{font:700 11.5px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.spec dd{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* Real panel screenshots */
.shot{max-width:40em}
.shot img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2)}
.shot figcaption,.shots figcaption{margin-top:10px;font-size:13px;color:var(--ink-3)}
.shots{max-width:40em}
.shots .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shots img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line-2);background:var(--bg-2)}

/* Transcript details (Fişin metni) */
.transcript{max-width:40em;border:1px solid var(--line);border-radius:16px;background:rgba(18,14,14,.82)}
.transcript>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px}
.transcript>summary::-webkit-details-marker{display:none}
.transcript>summary::after,.qa>summary::after{content:"";flex:none;width:22px;height:22px;border:1px solid var(--line-2);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/9px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 9px no-repeat;transition:transform .3s var(--ease),background-size .3s}
.transcript[open]>summary::after,.qa[open]>summary::after{transform:rotate(180deg);background-size:9px 1.5px,1.5px 0}
.transcript .tbl{border:0;border-top:1px solid var(--line);border-radius:0 0 16px 16px;background:none;max-width:none}

/* ---------- Kapsam (no object; scrim over the dust floor) ---------- */
.station.plain{background:rgba(13,10,10,.92)}
.kap-grid{display:grid;gap:16px;margin-top:44px}
.kap-block{padding:24px 24px 26px;border:1px solid var(--line);border-radius:18px;background:rgba(20,16,16,.9)}
.kap-block h3{font:500 22px/1.2 var(--display);letter-spacing:-.01em}
.kap-block ul{list-style:none;padding:0;margin-top:14px}
.kap-block li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.kap-block li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:1px;background:var(--accent)}
.kap-block.no li::before{width:8px;height:8px;top:16px;background:none;border:1px solid var(--ink-3);border-radius:50%}
.kap-block li strong{color:var(--ink);font-weight:700}
.kap-block p{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.fresh{margin-top:16px!important;padding-top:14px;border-top:1px solid var(--line);font:500 13px/1.6 var(--mono);color:var(--ink-3)!important}

/* ---------- SSS ---------- */
.faq{margin-top:40px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;list-style:none}
.qa>summary::-webkit-details-marker{display:none}
.qa h3{font:500 clamp(18.5px,1.45vw,22px)/1.3 var(--display);letter-spacing:-.008em}
.qa>summary:hover h3{color:var(--accent)}
.qa p{padding:0 44px 24px 0;font-size:16.5px;line-height:1.66;color:var(--ink-2);max-width:44em}
.qa{scroll-margin-top:96px}

/* ---------- Teklif ---------- */
.slogan{margin-top:18px;font:500 clamp(22px,2vw,30px)/1.2 var(--display);letter-spacing:-.015em;color:var(--accent)}
.steps{list-style:none;padding:0;counter-reset:st;display:grid;gap:10px;max-width:36em}
.steps li{position:relative;padding:18px 20px 18px 62px;border:1px solid var(--line);border-radius:14px;background:rgba(18,14,14,.82);counter-increment:st;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.steps li::before{content:counter(st);position:absolute;left:20px;top:17px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 13px/1 var(--text)}
.steps strong{color:var(--ink)}
.q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;max-width:40em;padding:28px;border:1px solid var(--line-2);border-radius:20px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.q-title{grid-column:1/-1;font:500 24px/1.2 var(--display);letter-spacing:-.01em}
.q label{display:grid;gap:7px;font-size:14px;font-weight:500;color:var(--ink-2)}
.q label .opt{font-weight:400;color:var(--ink-3)}
.q label>span:first-child{display:block}
.q .wide{grid-column:1/-1}
.q input,.q textarea,.q select{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:rgba(0,0,0,.38);color:var(--ink);font:500 16px var(--text);transition:border-color .2s,box-shadow .2s}
.q textarea{min-height:110px;resize:vertical;line-height:1.5}
.q select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.q select option{background:#1c1615;color:var(--ink)}
.q input:focus,.q textarea:focus,.q select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,143,128,.18)}
.q input:user-invalid,.q textarea:user-invalid{border-color:#ffb4a8}
.q .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--ink-2)}
.q .consent input{width:20px;height:20px;min-height:0;margin-top:1px;flex:none;padding:0;accent-color:var(--band)}
.q .consent a{color:var(--accent)}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.msg{grid-column:1/-1;min-height:1.5em;font-size:14.5px;color:var(--ink-2)}
.msg.ok{color:#9fd7b5}
.msg.err{color:#ffb4a8}
.q-nojs{grid-column:1/-1;padding:12px 14px;border:1px solid var(--accent-dim);border-radius:12px;font-size:14px;color:var(--ink-2)}

/* ---------- Footer ---------- */
.foot{position:relative;z-index:2;padding:72px var(--pad) 104px;border-top:1px solid var(--line);background:var(--bg)}
.foot-grid{display:grid;gap:32px}
.foot .foot-brand{font:500 22px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.foot p,.foot li{font-size:15px;color:var(--ink-2)}
.foot-grid>div>p+p{margin-top:8px}
.foot-h{font:700 11.5px/1.4 var(--text)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)!important}
.foot ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:8px}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--accent)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line)}
.foot-base p{font-size:13.5px;color:var(--ink-3)}

/* WhatsApp button */
.wa{position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + env(safe-area-inset-bottom,0px));z-index:50;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--band);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.45);opacity:0;transform:translateY(14px);pointer-events:none;transition:transform .35s var(--ease),opacity .35s}
.wa.show{opacity:1;transform:none;pointer-events:auto}
.wa.show:hover{transform:scale(1.06)}
.no-js .wa{opacity:1;transform:none;pointer-events:auto}

/* noscript story */
.still-story{position:relative;z-index:2;max-width:46em;margin:0 auto;padding:64px var(--pad)}
.still-story h2{font-size:clamp(28px,3vw,40px)}
.still-story p,.still-story li{margin-top:14px;color:var(--ink-2)}
.still-story ol{padding-left:22px}

/* Reveal (added by page.js only to blocks below the first screen, only with motion on) */
.js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}

/* ---------- Desktop: two-column sticky stations ---------- */
@media (min-width:900px){
  :root{--rail:58px}
  .rail{display:block}
  .station{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);column-gap:clamp(32px,5vw,96px);align-content:start;min-height:160svh;padding-left:calc(var(--pad) + var(--rail))}
  .station>*{grid-column:1}
  .station>.st-body{padding-top:44px}
  .station.hero{min-height:100svh}
  .track{position:absolute;grid-column:2;left:0;right:0;top:calc(-1 * var(--run-pre,0px));bottom:calc(-1 * var(--run-ext,0px));pointer-events:none}
  .track .shape{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);justify-items:center}
  .track .frame{grid-row:2}
  .track .shape figcaption{grid-row:3;align-self:start;width:min(100%,max(var(--fw),400px));max-width:460px;margin-top:16px;padding:0 2px}
  .track .shape figcaption.cap-tag{width:var(--fw);max-width:none}
  .shape{--mh:min(640px,74svh)}
  /* Caps = the painters' logical heights, so a DPR 1 or 2 screen with room shows the static images 1:1 (never upscaled). */
  .shape[data-shape="fis"],.shape[data-shape="teklif-fisi"]{--mh:min(720px,72svh)}
  .shape[data-shape="oneri-karti"]{--mh:min(660px,74svh)}
  .shape[data-shape="e-arsiv-fatura"]{--mh:min(594px,76svh)}
  .shape[data-shape="telefon"]{--mh:min(780px,78svh)}
  .shape[data-shape="defter"],.shape[data-shape="kdv-paneli"],.shape[data-shape="rol-matrisi"],.shape[data-shape="sunucu-karti"]{--mh:72svh}
  .hero .hero-copy{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-bottom:7svh}
  .station.plain{display:block;min-height:auto}
  .station.plain>.st-head,.station.plain>.lead{max-width:min(46em,100%)}
  .kap-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;max-width:1280px}
  .station.faqs{min-height:auto;grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
  .faqs .faq-head{grid-column:1;grid-row:1/3;align-self:start;position:sticky;top:0;padding-bottom:12svh}
  .faqs .faq{grid-column:2;grid-row:1;margin-top:0;padding-top:clamp(96px,16svh,180px);padding-bottom:22svh}
  .foot-grid{grid-template-columns:2fr 1fr 1fr}
  .foot{padding-left:calc(var(--pad) + var(--rail))}
}
@media (min-width:900px) and (max-width:1180px){
  .menu{display:none}
}
/* Rest time: an object station is at least 2.4 screens tall, so the object rests readable for a full screen between
   its arrival and the next burn (stage.js windows); e-Arşiv holds two reprint beats, so it gets more. */
@media (min-width:900px){
  #okuma,#onay,#defter,#kdv,#cep,#ekip,#sunucu{min-height:240svh}
  #e-arsiv{min-height:280svh}
}
/* Small laptops: the right column is narrow and its captions reach the bottom-right corner, so the WhatsApp button
   moves to the empty bottom-left gutter beside the rail. */
@media (min-width:900px) and (max-width:1279.98px){
  .wa{right:auto;left:clamp(14px,2vw,26px)}
}

/* Pinned runs: consecutive stations with the same shape share one resting rect (set by page.js on desktop).
   A follower's track stays hidden until page.js has stretched it, so applying the geometry is never a visible
   layout shift; if page.js never runs, the track shows after 2.5 s in its plain sticky position. */
@media (min-width:900px){
  .js .station.follows .track{visibility:hidden;animation:sd-show 0s linear 2.5s forwards}
  .js.runs-ready .station.follows .track{visibility:visible;animation:none}
}
@keyframes sd-show{to{visibility:visible}}
.pin-run .shape .frame img{opacity:0;transition:opacity .25s linear}
.pin-run .shape.is-shown .frame img{opacity:1}
.pin-run .shape.is-missing:not(.is-current) .frame img{opacity:0}
.pin-run .shape figcaption,.pin-run .shape .ovl,.pin-run .shape .vf,.pin-run .shape .ticks{opacity:0;transition:opacity .3s}
.pin-run .shape.is-current figcaption,.pin-run .shape.is-current .ovl,.pin-run .shape.is-current .vf,.pin-run .shape.is-current .ticks{opacity:1}
/* Draw-in of the viewfinder corners and the ticks while the station is current (motion on only). */
html:not(.motion-off) .pin-run .shape .vf path{stroke-dashoffset:52;transition:stroke-dashoffset .4s var(--ease-out)}
html:not(.motion-off) .pin-run .shape.is-current .vf path{stroke-dashoffset:0}
html:not(.motion-off) .pin-run .shape .ovl{transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease-out)}
html:not(.motion-off) .pin-run .shape.is-current .ovl{transform:none}
html:not(.motion-off) .pin-run .shape .ticks li{opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--ease-out);transition-delay:calc(var(--i) * 60ms + 200ms)}
html:not(.motion-off) .pin-run .shape.is-current .ticks li{opacity:1;transform:none}

/* While the WebGL stage draws, the static images give way to the crisp planes (stage.js sets these classes). */
html.stage-on .shape.is-live .frame img,
html.stage-on .pin-run .shape .frame img{visibility:hidden}
html.stage-on .shape.is-live.is-missing .frame{outline-color:transparent;background:none}

/* ---------- Narrow screens ---------- */
@media (max-width:899.98px){
  :root{--nav-h:62px}
  .menu{display:none}
  .mtoggle{width:40px;padding:0;justify-content:center}
  .mtoggle .mt-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav .pill.sm{padding:0 14px}
  .brand{font-size:15px}
  .brand small{font-size:11px}
  .station{padding-bottom:0}
  .st-head{padding-top:88px}
  .lead{margin-top:22px}
  .track{position:relative;margin:40px 0 44px}
  .track .shape{display:flex;flex-direction:column;align-items:center}
  .shape{--fw:min(100%,var(--lw,9999px),360px)}
  .shape[data-shape="fis"],.shape[data-shape="teklif-fisi"]{--fw:min(321px,82vw)}
  .shape[data-shape="oneri-karti"]{--fw:min(340px,86vw)}
  .shape[data-shape="e-arsiv-fatura"]{--fw:min(360px,88vw)}
  .shape[data-shape="telefon"]{--fw:min(300px,76vw)}
  .shape[data-shape="defter"],.shape[data-shape="kdv-paneli"],.shape[data-shape="rol-matrisi"],.shape[data-shape="sunucu-karti"]{--fw:min(100%,var(--lw))}
  .shape figcaption{width:var(--fw);max-width:100%}
  .vf{inset:-10px}
  .vf .c{width:22px;height:22px}
  .ovl-tag{left:-10px;bottom:auto;top:calc(100% + 18px)}
  .ovl-fmt{left:auto;right:-10px;top:auto;bottom:calc(100% + 16px);writing-mode:horizontal-tb;font-size:11px}
  .shape--vf{padding-top:30px}
  .shape--vf figcaption{margin-top:56px}
  .ticks li{left:auto;right:4px}
  .hero .hero-copy{padding-top:calc(var(--nav-h) + 36px)}
  .hero .track{margin-top:44px;margin-bottom:0;padding-bottom:24px}
  .st-body{padding-bottom:96px}
  .kap-grid{margin-top:32px}
  .station.plain{padding-bottom:72px}
  .faq{padding-bottom:72px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
  /* Single column: the giant words frame the hero receipt above and below it (placed by page.js). */
  .giant{--g-size:23vw;height:calc(min(321px,82vw) * 720 / 380 + 80px)}
  .g1{left:4vw;width:calc(96vw - 4vw);top:0}
  .g2{width:calc(100% - 3vw);bottom:0}
  .js .giant{visibility:hidden}
  .js .giant.placed{visibility:visible}
}
@media (max-width:699.98px){
  .shape[data-shape="defter"]{--ar:380/760;--lw:380px}
  .shape[data-shape="kdv-paneli"]{--ar:380/800;--lw:380px}
  .shape[data-shape="rol-matrisi"]{--ar:380/600;--lw:380px}
  .shape[data-shape="sunucu-karti"]{--ar:380/780;--lw:380px}
  .q{grid-template-columns:minmax(0,1fr);padding:20px}
  .cta .pill{flex:1 1 100%}
  .cta .textlink{flex:1 1 100%;justify-content:center}
  .spec{grid-template-columns:minmax(0,1fr)}
  .shots .row{gap:8px}
  .shots img{border-radius:10px}
  .tbl th,.tbl td{padding:9px 14px}
  .tbl caption{padding:14px 14px 8px}
  .status{border-radius:14px}
  .points li{padding-left:36px}
  .qa p{padding-right:0}
}

/* Reduced motion and the header toggle: no decorative motion anywhere. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .readout dd.typing .tw::after{animation:none}
  .nav,.wa,.cursor{transition:none}
  .js .rv{opacity:1;transform:none;transition:none}
}
.motion-off{scroll-behavior:auto}
.motion-off .gw{transform:none}
.motion-off .rv{opacity:1!important;transform:none!important}
.motion-off .readout dd.typing .tw::after{animation:none}
@media print{
  .nav,.rail,.wa,.cursor,.atmos,.giant{display:none}
  body{background:#fff;color:#000}
}

/* stage */
/* Owned by the engine (js/stage.js). The fixed WebGL stage draws only during transitions (hidden at rest);
   at rest each live figure shows its rest plane, a canvas painted at the exact device-pixel size of the frame.
   The static <img> stays in the accessibility tree (opacity 0 instead of visibility hidden). */
.sd-stage{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none;visibility:hidden;display:block}
.sd-stage.on{visibility:visible}
.frame>canvas.sd-rest{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
html.stage-on .shape.is-live .frame img{visibility:visible!important;opacity:0!important;transition:none!important}
@media print{.sd-stage{display:none}}

/* Packages: three plan cards, the middle one featured. */
.plans{display:grid;gap:16px;margin-top:44px}
.plan{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 30px;border:1px solid var(--line);border-radius:20px;background:rgba(20,16,16,.9)}
.plan.featured{border-color:rgba(224,143,128,.55);background:linear-gradient(160deg,rgba(150,66,53,.22),rgba(20,16,16,.95) 55%)}
.plan.featured::before{content:"En çok tercih edilen";position:absolute;top:-13px;left:24px;padding:4px 12px;border-radius:999px;background:var(--accent);color:#1b1212;font:700 11.5px/1.4 var(--text);letter-spacing:.1em;text-transform:uppercase}
.plan h3{font:500 30px/1.1 var(--display);letter-spacing:-.015em}
.plan-who{font-size:15px;color:var(--ink-2)}
.plan-price{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.plan-price b{font:500 clamp(34px,3vw,44px)/1 var(--display);letter-spacing:-.025em}
.plan-price span{font-size:13.5px;color:var(--ink-2)}
.plan-renew{padding:10px 12px;border-radius:12px;background:rgba(243,238,236,.06);font-size:14px;color:var(--ink-2)}
.plan-renew b{color:var(--ink);font-weight:700}
.plan-list{list-style:none;padding:0;margin:4px 0 0;display:grid}
.plan-list li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2)}
.plan-list li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:2px;background:var(--accent)}
.plan-not{font-size:13.5px;color:var(--ink-3,rgba(243,238,236,.6))}
.plan-cta{margin-top:auto;justify-content:center}
.plan-notes{margin-top:20px}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;max-width:1280px}.plan-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}