/* TelcoRecord — telcorecord.live | style.css */

/* ── TOKENS ───────────────────────────────────────────── */
:root{
  --ink:#060607;
  --ink-2:#0b0b0d;
  --bone:#ece9e2;
  --bone-dim:rgba(236,233,226,.55);
  --red:#e30613;
  --red-deep:#71100b;
  --hair:rgba(236,233,226,.09);
  --hair-2:rgba(236,233,226,.16);
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.77,0,.18,1);
  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1440px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Archivo','Instrument Sans',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}

/* ── RESET ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body,h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:1px solid var(--red);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section[id],main[id]{scroll-margin-top:88px}
main:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:fixed;top:-100px;left:1rem;z-index:400;padding:.7rem 1rem;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;transition:top .25s var(--e)}
.skip:focus{top:1rem}

/* ── TYPE UTILITIES ───────────────────────────────────── */
.mono{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;line-height:1.4}
.dim{color:var(--bone-dim)}
.rd{color:var(--red)}

.rec-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);
  margin-right:.55em;vertical-align:.05em;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(227,6,19,.45)}50%{opacity:.35;box-shadow:0 0 0 5px rgba(227,6,19,0)}}

.slabel{color:var(--bone-dim);font-weight:500;margin-bottom:clamp(1.6rem,3vw,2.8rem)}

/* ── BUTTONS — standart kurumsal buton; ozgun dokunus:
   hover'da butonun icinden gecen isik supurmesi ─────────── */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-size:.92rem;font-weight:600;letter-spacing:.01em;
  padding:.78rem 1.55rem;border-radius:10px;border:1px solid transparent;
  transition:background .3s var(--e),border-color .3s var(--e),color .3s var(--e),
             transform .3s var(--e),box-shadow .3s var(--e);
}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .55s var(--e);pointer-events:none}
.btn:hover::after{left:118%}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.55rem 1.05rem;font-size:.86rem}
.btn-full{width:100%}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:#c00511;border-color:#c00511;
  box-shadow:0 10px 26px -10px rgba(227,6,19,.55)}
.btn-ghost{border-color:var(--hair-2);color:var(--bone)}
.btn-ghost::after{background:linear-gradient(105deg,transparent,rgba(227,6,19,.14),transparent)}
.btn-ghost:hover{border-color:var(--bone);background:rgba(236,233,226,.05)}

.tlink{font-family:var(--body);font-size:.95rem;font-weight:500;letter-spacing:0;color:var(--bone-dim);
  padding:.78rem .2rem;transition:color .3s var(--e)}
.tlink span{display:inline-block;transition:transform .35s var(--e)}
.tlink:hover{color:var(--bone)}
.tlink:hover span{transform:translateY(4px)}

/* ── PRELOADER ────────────────────────────────────────── */
#preloader{position:fixed;inset:0;z-index:300;background:var(--ink);display:flex;
  align-items:center;justify-content:center;clip-path:inset(0 0 0 0);
  transition:clip-path .7s var(--e2);
  animation:pl-failsafe .01s linear 2.5s forwards}
html:not(.js) #preloader{display:none}
@keyframes pl-failsafe{to{opacity:0;pointer-events:none;visibility:hidden}}
#preloader.done{clip-path:inset(0 0 100% 0)}
.pl-in{display:flex;align-items:center;gap:.85rem}
.pl-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1s ease-in-out infinite}
.pl-num{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.18em;color:var(--bone-dim)}

/* ── CURSOR ───────────────────────────────────────────── */
#cur-dot,#cur-ring{position:fixed;top:0;left:0;z-index:350;pointer-events:none;opacity:0;
  border-radius:50%;will-change:transform;transition:opacity .3s linear}
#cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--red)}
#cur-ring{width:28px;height:28px;margin:-14px 0 0 -14px}
#cur-ring::before{content:"";position:absolute;inset:0;border:1px solid var(--hair-2);border-radius:50%;
  transition:transform .25s var(--e),border-color .25s var(--e)}
#cur-ring.big::before{transform:scale(1.6);border-color:rgba(227,6,19,.55)}
html.cur #cur-dot,html.cur #cur-ring{opacity:1}
html.cur,html.cur *{cursor:none !important}

/* ── NAV: full bar that morphs into a floating pill ───── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding-inline:.75rem}
.nav-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:1.15rem var(--pad);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem);
  border:1px solid transparent;border-radius:0;
  transition:max-width .55s var(--e),margin .55s var(--e),padding .55s var(--e),
             background .4s linear,border-color .4s linear,border-radius .55s var(--e),
             box-shadow .55s var(--e),gap .55s var(--e)}
.nav.scrolled .nav-in{margin-top:.8rem;max-width:920px;padding:.62rem 1.05rem .62rem 1.35rem;
  gap:clamp(.9rem,2.2vw,1.9rem);
  background:rgba(6,6,7,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-color:var(--hair-2);border-radius:14px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.65)}
.nav-logo{display:block;margin-right:auto}
.nav-logo img{height:20px;width:auto}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2.1rem);font-family:var(--body);font-size:.92rem;font-weight:500;letter-spacing:.01em}
.nav-links a{position:relative;color:var(--bone-dim);padding:.3rem 0;transition:color .3s var(--e)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
.nav-links a:hover{color:var(--bone)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-act{display:flex;align-items:center;gap:.6rem}

.burger{display:none;width:34px;height:34px;position:relative;margin-left:auto}
.burger i{position:absolute;left:6px;width:22px;height:1px;background:var(--bone);
  transition:transform .4s var(--e2),opacity .2s linear}
.burger i:nth-child(1){top:14px}
.burger i:nth-child(2){top:20px}
.burger.on i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ── MOBILE MENU ──────────────────────────────────────── */
.mmenu{position:fixed;inset:0;z-index:190;background:var(--ink);display:flex;flex-direction:column;
  justify-content:center;padding:6rem var(--pad) 2.5rem;
  clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden;
  transition:clip-path .6s var(--e2),visibility 0s linear .6s}
.mmenu.open{clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;
  transition:clip-path .6s var(--e2),visibility 0s}
.mmenu-nav{display:flex;flex-direction:column;gap:.1rem;margin-top:auto}
.mmenu-nav a,.mmenu-nav button{
  display:block;text-align:left;font-family:var(--disp);font-stretch:115%;font-weight:800;
  font-size:clamp(2.2rem,11vw,4.2rem);line-height:1.02;letter-spacing:-.02em;color:var(--bone);
  padding:.16em 0;opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--e) var(--d,0s),transform .6s var(--e) var(--d,0s),color .3s var(--e)}
.mmenu.open .mmenu-nav a,.mmenu.open .mmenu-nav button{opacity:1;transform:none}
.mmenu-nav a:hover,.mmenu-nav button:hover{color:var(--red)}
.mmenu-foot{margin-top:auto;padding-top:2rem;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:1rem;color:var(--bone-dim)}

/* ── HERO ─────────────────────────────────────────────── */
/* ── GLOBAL BACKGROUND LAYER ──────────────────────────── */
/* fixed behind everything; corner vignette in deep, muted brand red */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 40% at 0% 0%,rgba(113,16,11,.50) 0%,rgba(113,16,11,.16) 45%,transparent 72%),
    radial-gradient(44% 40% at 100% 0%,rgba(113,16,11,.38) 0%,rgba(113,16,11,.12) 45%,transparent 72%),
    radial-gradient(50% 46% at 100% 100%,rgba(131,17,11,.46) 0%,rgba(113,16,11,.14) 48%,transparent 74%),
    radial-gradient(50% 46% at 0% 100%,rgba(131,17,11,.38) 0%,rgba(113,16,11,.12) 48%,transparent 74%)}
.bgfx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bgfx-fb{display:none}
html:not(.js) .bgfx-fb,
body.no-stream .bgfx-fb{
  display:block;position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 18% 92%,rgba(227,6,19,.30) 0%,rgba(113,16,11,.13) 38%,transparent 72%),
    radial-gradient(48% 42% at 52% 46%,rgba(236,233,226,.07) 0%,transparent 70%),
    repeating-linear-gradient(180deg,rgba(236,233,226,.035) 0 1px,transparent 1px 4px);
}
main,.foot{position:relative;z-index:1}

.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8.5rem var(--pad) 6.5rem}
.hero-in{position:relative;z-index:1;width:100%;max-width:min(1180px,100%);display:flex;
  flex-direction:column;align-items:center}

.eyebrow{display:inline-flex;align-items:center;border:1px solid var(--hair-2);border-radius:2px;
  padding:.5rem .95rem;color:var(--bone-dim);font-weight:500;margin-bottom:clamp(1.6rem,3.4vw,2.4rem)}

.hero-title{font-family:var(--disp);font-stretch:115%;font-weight:900;
  font-size:clamp(3.2rem,11vw,9.5rem);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;
  display:flex;flex-direction:column}   /* flex items: .ln's negative margins can't collapse */
.ln{display:block;overflow:hidden;padding:.14em 0 .16em;margin:-.14em 0 -.16em}
.ln-i{display:block}
.otl{color:var(--bone)}
@supports (-webkit-text-stroke:1px #fff){.otl{color:transparent;-webkit-text-stroke:3px var(--bone)}}

.hero-sub{max-width:34rem;margin:clamp(1.6rem,3vw,2.2rem) auto 0;color:var(--bone-dim);
  font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.7}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(.8rem,2vw,1.6rem);margin-top:clamp(2rem,3.6vw,2.8rem)}

.hud{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--pad);border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--bone-dim)}
.hud .rec-dot{width:6px;height:6px}
.hud-l{display:inline-flex;align-items:center;white-space:nowrap}

.cue{position:absolute;left:50%;bottom:3.6rem;z-index:1;width:1px;height:48px;
  background:linear-gradient(180deg,transparent,var(--bone-dim));transform-origin:top;
  animation:cue 2.2s var(--e) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* hero intro stagger */
html.js .hero-r{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--e) var(--d,0s),transform .9s var(--e) var(--d,0s)}
html.js body.loaded .hero-r{opacity:1;transform:none}
html.js .ln-i{transform:translateY(140%);transition:transform 1.05s var(--e2) var(--d,0s)}
html.js body.loaded .ln-i{transform:none}
html.js .hud{opacity:0;transition:opacity .8s linear .75s}
html.js body.loaded .hud{opacity:1}

/* ── MARQUEE — eski sitenin teknigi: iki es yari + -50% dongu,
   kenar fade maskeleri, zit yonlu cift serit ─────────────── */
.mq{position:relative;width:100%;overflow:hidden;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);padding:.9rem 0;
  display:flex;flex-direction:column;gap:.6rem}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--ink) 0%,transparent 100%)}
.mq::after{right:0;background:linear-gradient(270deg,var(--ink) 0%,transparent 100%)}
.mq-row{display:flex;width:max-content;will-change:transform}
.mq-half{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.24em;
  color:var(--bone);white-space:nowrap}
.mq-half b{color:var(--red);font-weight:400;font-size:.6em}
.mq-left{animation:mqL 34s linear infinite}
.mq-right{animation:mqR 34s linear infinite}
.mq-right .mq-half{font-size:.68rem;letter-spacing:.28em}
.mq:hover .mq-row{animation-play-state:paused}
@keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ── SECTIONS ─────────────────────────────────────────── */
.sec{padding:clamp(5.5rem,12vw,11rem) 0}
.sec-flat{padding:clamp(3.5rem,7vw,6rem) 0}

/* reveal */
html.js .r{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--e) var(--d,0s),transform .8s var(--e) var(--d,0s)}
html.js .r.in{opacity:1;transform:none}

/* ── 01 MANIFESTO ─────────────────────────────────────── */
.mf-text{font-family:var(--disp);font-stretch:100%;font-weight:700;
  font-size:clamp(1.8rem,4.2vw,3.6rem);line-height:1.16;letter-spacing:-.012em;
  max-width:24ch;text-wrap:balance}
.mf-text .w{display:inline-block;opacity:.15;transition:opacity .4s linear}
.mf-text .w.on{opacity:1}
.mf-strike{position:relative;display:inline-block}
.mf-strike::after{content:"";position:absolute;left:-.04em;right:-.04em;top:.56em;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e) .12s}
.mf-strike.on::after{transform:scaleX(1)}
.mf-red{color:var(--red)}

/* ── 02 AKIŞ ──────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:rgba(6,6,7,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:0 clamp(1.2rem,2.2vw,2rem) clamp(1.6rem,2.4vw,2.2rem)}
html[data-theme="light"] .flow{background:rgba(246,245,242,.55)}
.step{position:relative;padding:2.4rem clamp(1rem,2vw,2rem) 0 0}
.fline{position:absolute;top:0;left:0;width:100%;height:1px;background:var(--hair-2);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e) var(--d,0s),background .45s var(--e)}
.step.in .fline,html:not(.js) .fline{transform:scaleX(1)}
.fidx{display:block;font-size:4rem;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:rgba(236,233,226,.22);
  transition:color .4s var(--e),-webkit-text-stroke-color .4s var(--e)}
@supports (-webkit-text-stroke:1px #fff){
  .fidx{color:transparent;-webkit-text-stroke:1px rgba(236,233,226,.22)}
}
.step:hover .fidx,.step.lit .fidx{color:var(--red);-webkit-text-stroke-color:var(--red)}
.step.lit .fline{background:var(--red)}
.step h3{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:1.28rem;
  letter-spacing:-.01em;line-height:1;margin:1.5rem 0 .7rem}
.step p{color:var(--bone-dim);font-size:.95rem;line-height:1.65;max-width:26ch}

/* ── 03 ÖZELLİKLER ────────────────────────────────────── */
.shead{font-family:var(--disp);font-stretch:112%;font-weight:800;
  font-size:clamp(2rem,5.4vw,4.4rem);line-height:.98;letter-spacing:-.022em;
  margin-bottom:clamp(2.2rem,4vw,3.4rem)}

.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;padding:1px;
  background:var(--hair);grid-auto-rows:minmax(0,auto)}
.cell{position:relative;background:rgba(6,6,7,.55);padding:clamp(1.5rem,2.4vw,2.2rem);overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;transition:background .4s var(--e)}
html[data-theme="light"] .cell{background:rgba(246,245,242,.55)}
.cell-big{grid-column:span 7;grid-row:span 2}
.cell-5{grid-column:span 5}
.cell-4{grid-column:span 4}
.cell:not(.cell-big):hover{background:rgba(10,10,12,.72)}
.sweep{position:absolute;top:0;left:0;width:100%;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e)}
.cell:hover .sweep{transform:scaleX(1)}
.ico{display:block;color:var(--bone);margin-bottom:1.8rem;transition:color .4s var(--e)}
.ico svg{width:24px;height:24px}
.cell:hover .ico{color:var(--red)}
.cell h3{font-family:var(--body);font-size:1.04rem;font-weight:600;letter-spacing:.005em;
  margin-bottom:.6rem;line-height:1.35}
.cell p{color:var(--bone-dim);font-size:.95rem;line-height:1.65;max-width:34ch}

/* showpiece */
.rec-card{display:flex;flex-direction:column;flex:1 1 auto;min-height:clamp(15rem,26vw,20rem);
  border:1px solid var(--hair);background:rgba(11,11,13,.45);border-radius:2px}
html[data-theme="light"] .rec-card{background:rgba(255,255,255,.50)}
.rc-top,.rc-bot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.05rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  color:var(--bone-dim);white-space:nowrap;overflow:hidden}
.rc-top{border-bottom:1px solid var(--hair)}
.rc-bot{border-top:1px solid var(--hair)}
.rc-top>span:first-child{display:inline-flex;align-items:center;color:var(--bone)}
.rc-hint{color:var(--red)}
.rc-mid{position:relative;flex:1 1 auto;min-height:9rem;padding:1.1rem .9rem;display:grid;grid-template-rows:1fr}
#wave-canvas{width:100%;height:100%;min-width:0;min-height:0;display:block;cursor:pointer}

/* play/pause overlay */
.wplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;
  display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(6,6,7,.55);
  border:1px solid rgba(227,6,19,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .3s var(--e),background .3s var(--e),border-color .3s var(--e),opacity .3s var(--e)}
.wplay:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--red);border-color:var(--red)}
.wplay svg{width:22px;height:22px}
.wplay .i-pause{display:none}
.wplay.playing{opacity:.35}
.wplay.playing:hover{opacity:1}
.wplay.playing .i-play{display:none}
.wplay.playing .i-pause{display:block}
.rc-link{color:var(--red);font-family:var(--body);font-size:.88rem;font-weight:600;
  letter-spacing:.01em;transition:color .3s var(--e)}
.rc-link:hover{color:var(--bone)}

/* feature-cell inline CTA */
.cell-cta{margin-top:auto;padding-top:1.2rem;align-self:flex-start;color:var(--red);
  font-family:var(--body);font-size:.9rem;letter-spacing:.01em;font-weight:600;
  transition:color .3s var(--e)}
.cell-cta:hover{color:var(--bone)}
.cell-cta span{display:inline-block;transition:transform .3s var(--e)}
.cell-cta:hover span{transform:translateX(4px)}

/* transcript modal */
.panel-tr{max-width:480px}
.tr-chat{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem;max-height:min(46vh,420px);
  overflow-y:auto;padding:.25rem .1rem .25rem 0;scrollbar-width:thin}
.bub{max-width:84%;padding:.7rem .95rem;border-radius:14px;font-size:.92rem;line-height:1.5;
  text-align:left;border:1px solid var(--hair);background:rgba(236,233,226,.05);
  transition:border-color .25s var(--e),background .25s var(--e)}
.bub>span:last-child{display:block}
.bub .bub-m{display:block;font-family:var(--body);font-size:.72rem;font-weight:500;
  letter-spacing:.01em;color:var(--bone-dim);margin-bottom:.25rem}
.bub.agent{align-self:flex-end;border-bottom-right-radius:4px;
  background:rgba(227,6,19,.08);border-color:rgba(227,6,19,.22)}
.bub.agent .bub-m{color:var(--red)}
.bub.customer{align-self:flex-start;border-bottom-left-radius:4px}
.bub.on{border-color:var(--red);background:rgba(227,6,19,.16)}

/* mini oynatici */
.tr-player{display:flex;align-items:center;gap:.95rem;margin-top:1.35rem;
  padding-top:1.15rem;border-top:1px solid var(--hair)}
.tr-pp{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#fff;box-shadow:0 6px 18px -6px rgba(227,6,19,.5);
  transition:background .3s var(--e),transform .3s var(--e)}
.tr-pp:hover{background:#c00511;transform:scale(1.05)}
.tr-pp svg{width:17px;height:17px}
.tr-pp .i-play{margin-left:2px}
.tr-pp .i-pause{display:none}
.tr-pp.playing .i-play{display:none}
.tr-pp.playing .i-pause{display:block}
.tr-bar{flex:1;height:6px;border-radius:999px;background:var(--hair-2);
  position:relative;cursor:pointer;overflow:hidden}
.tr-bar::before{content:"";position:absolute;inset:-8px 0}
.tr-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--red)}
.tr-time{flex:0 0 auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--bone-dim);font-variant-numeric:tabular-nums}

/* ── GÜVENCE ──────────────────────────────────────────── */
.assure{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.as{padding:clamp(2rem,3.5vw,3rem) clamp(1rem,2.5vw,2.4rem);border-left:1px solid var(--hair)}
.as:first-child{border-left:0;padding-left:0}
.as .mono{color:var(--bone-dim);margin-bottom:1.1rem}
.as-big{font-family:var(--disp);font-stretch:112%;font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.02em}

/* ── CTA ──────────────────────────────────────────────── */
.cta{position:relative;padding:clamp(7rem,16vw,14rem) 0;overflow:hidden;text-align:center}
.cta-glow{position:absolute;left:50%;top:50%;width:min(1100px,140%);height:min(1100px,140%);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(227,6,19,.16) 0%,rgba(113,16,11,.07) 34%,transparent 66%)}
.cta-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cta-title{font-family:var(--disp);font-stretch:115%;font-weight:900;
  font-size:clamp(2.3rem,8.2vw,6.6rem);line-height:.92;letter-spacing:-.024em;text-transform:uppercase}
.cta-sub{max-width:32rem;margin-top:clamp(1.4rem,2.6vw,2rem);color:var(--bone-dim);font-size:1.0625rem}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:clamp(2rem,3.4vw,2.8rem)}

/* ── FOOTER ───────────────────────────────────────────── */
.foot{border-top:1px solid var(--hair);padding:clamp(3rem,6vw,5rem) 0 2rem;
  background:rgba(6,6,7,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme="light"] .foot{background:rgba(246,245,242,.55)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.4fr);
  gap:clamp(2rem,4vw,3.5rem)}
.foot-brand img{height:22px;width:auto;margin-bottom:1.4rem}
.foot-brand p{color:var(--bone-dim);font-size:.95rem;max-width:32ch}
.foot-soc{display:flex;gap:.6rem;margin-top:1.4rem}
.foot-soc a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--hair-2);
  border-radius:2px;color:var(--bone-dim);transition:color .3s var(--e),border-color .3s var(--e),transform .3s var(--e)}
.foot-soc a:hover{color:var(--red);border-color:var(--red);transform:translateY(-2px)}
.foot-soc svg{width:16px;height:16px}
.fc-line{color:var(--bone-dim);line-height:1.8;
  font-family:var(--body);font-size:.95rem;letter-spacing:.02em}
.foot-map .fc-h{margin-bottom:.85rem}
.map-box{border:1px solid var(--hair-2);border-radius:2px;overflow:hidden;aspect-ratio:16/10;background:var(--ink-2)}
.map-box iframe{width:100%;height:100%;border:0;display:block;
  filter:grayscale(1) invert(.92) contrast(.92) hue-rotate(180deg);transition:filter .45s var(--e)}
.map-box:hover iframe{filter:none}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.fc-h{color:var(--bone);font-weight:600;margin-bottom:.35rem;
  font-family:var(--body);font-size:.95rem;letter-spacing:.01em}
.foot-col a,.foot-col button{color:var(--bone-dim);text-align:left;
  font-family:var(--body);font-size:.95rem;letter-spacing:.01em;
  transition:color .3s var(--e)}
.foot-col a:hover,.foot-col button:hover{color:var(--red)}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(3rem,6vw,5rem);padding-top:1.4rem;border-top:1px solid var(--hair);
  font-family:var(--body);font-size:.82rem;letter-spacing:.01em;color:var(--bone-dim)}
.foot-rec{display:inline-flex;align-items:center;color:var(--red)}

/* ── MODALS ───────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;
  padding:1.25rem;overflow-y:auto}
.modal[hidden]{display:none}
.modal-bd{position:absolute;inset:0;background:rgba(6,6,7,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s linear}
.modal.on .modal-bd{opacity:1}
.panel{position:relative;z-index:1;width:100%;background:var(--ink-2);border:1px solid var(--hair-2);
  border-radius:2px;padding:clamp(1.75rem,3.5vw,2.6rem);margin:auto;
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .4s var(--e),transform .45s var(--e)}
.modal.on .panel{opacity:1;transform:none}
.panel-login{max-width:420px}
.panel-app{max-width:560px}
.x{position:absolute;top:.85rem;right:.85rem;width:34px;height:34px;display:grid;place-items:center;
  color:var(--bone-dim);border:1px solid transparent;border-radius:2px;transition:color .3s,border-color .3s}
.x svg{width:18px;height:18px}
.x:hover{color:var(--red);border-color:var(--hair-2)}
.panel-logo{height:21px;width:auto;margin-bottom:1.5rem}
.panel-title{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:1.5rem;
  line-height:1;letter-spacing:-.015em}
.panel-sub{color:var(--bone-dim);font-size:.9rem;margin-top:.6rem}

.alert{display:none;margin-top:1.25rem;padding:.75rem .9rem;border-radius:8px;
  font-family:var(--body);font-size:.85rem;letter-spacing:0;line-height:1.5}
.alert.error{display:block;background:rgba(227,6,19,.1);border:1px solid rgba(227,6,19,.4);color:#ff8a8a}
.alert.success{display:block;background:rgba(236,233,226,.06);border:1px solid var(--hair-2);color:var(--bone)}

form{margin-top:1.5rem}
.fg{margin-bottom:1.1rem;display:flex;flex-direction:column}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.fg label{color:var(--bone-dim);margin-bottom:.55rem;font-weight:500;
  font-family:var(--body);font-size:.85rem;letter-spacing:.01em}
.fg input,.fg select,.fg textarea{
  width:100%;background:var(--ink);border:1px solid var(--hair-2);border-radius:2px;
  padding:.8rem .9rem;font-family:var(--body);font-size:.95rem;color:var(--bone);
  transition:border-color .3s var(--e),background .3s var(--e)}
.fg textarea{resize:vertical;min-height:5rem}
.fg select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--bone-dim) 50%),linear-gradient(135deg,var(--bone-dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.fg select option{background:var(--ink-2);color:var(--bone)}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(236,233,226,.28)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--red)}
.fg input.bad,.fg select.bad,.fg textarea.bad{border-color:var(--red)}
.fe{display:none;margin-top:.45rem;font-family:var(--body);font-size:.78rem;letter-spacing:0;color:#ff8a8a}
.fe.on{display:block}

.pw{position:relative;display:flex}
.pw input{padding-right:3rem}
.pw-t{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:32px;height:32px;
  display:grid;place-items:center;color:var(--bone-dim);transition:color .3s}
.pw-t:hover{color:var(--bone)}
.pw-t svg{width:18px;height:18px}
.pw-t .eye-off{display:none}
.pw-t.on .eye-on{display:none}
.pw-t.on .eye-off{display:block}

.chk{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;margin:.2rem 0 1.4rem}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk-b{flex:0 0 auto;width:15px;height:15px;margin-top:.24rem;border:1px solid var(--hair-2);
  border-radius:1px;position:relative;transition:border-color .25s,background .25s}
.chk-b::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg) scale(0);
  transition:transform .22s var(--e)}
.chk input:checked+.chk-b{background:var(--red);border-color:var(--red)}
.chk input:checked+.chk-b::after{transform:rotate(42deg) scale(1)}
.chk input:focus-visible+.chk-b{outline:1px solid var(--red);outline-offset:3px}
.chk-t{font-size:.85rem;color:var(--bone-dim);line-height:1.55}

/* spinner */
.btn .spin{display:none;width:14px;height:14px;border:1.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.loading{pointer-events:none;opacity:.75}
.btn.loading .btn-tx{display:none}
.btn.loading .spin{display:block}

/* application steps */
.steps{display:flex;align-items:center;gap:.85rem;margin-top:1.6rem;color:var(--bone-dim);
  font-family:var(--body);font-size:.82rem;letter-spacing:.01em}
.st{display:inline-flex;align-items:center;gap:.5rem;letter-spacing:.14em;transition:color .3s}
.st i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--hair-2);border-radius:2px;font-size:.6rem;transition:all .3s var(--e)}
.st.active{color:var(--bone)}
.st.active i{border-color:var(--red);color:var(--red)}
.st.done{color:var(--bone-dim)}
.st.done i{background:var(--red);border-color:var(--red);color:#fff;font-size:.7rem}
.st-line{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden}
.st-line b{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e)}
.st-line.done b{transform:scaleX(1)}

.step-pane{display:none}
.step-pane.active{display:block;animation:pane .4s var(--e)}
@keyframes pane{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.snav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem}

.succ{display:none;text-align:center;padding:2.5rem 0 1rem}
.succ.on{display:block;animation:pane .5s var(--e)}
.succ-mark{display:block;margin:0 auto 1.5rem;color:var(--red)}
.succ-mark svg{width:44px;height:44px;margin:0 auto}
.succ-t{font-family:var(--disp);font-stretch:112%;font-weight:800;font-size:1.5rem;letter-spacing:-.015em}
.succ-s{color:var(--bone-dim);font-size:.95rem;margin-top:.6rem}

body.lock{overflow:hidden}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width:1439px){
  .cell p,.step p{max-width:32ch}
}
@media (max-width:1024px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .cell-big{grid-column:span 6;grid-row:span 1}
  .cell-5{grid-column:span 3}
  .cell-4{grid-column:span 2}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .foot-map{grid-column:1 / -1}
}
@media (max-width:820px){
  .nav-links,.nav-act{display:none}
  .burger{display:block}
  .hud{display:none}
  .hero{padding-bottom:5rem}
  .cue{bottom:2.2rem}
  .mq-half{font-size:.66rem;letter-spacing:.18em;gap:1.6rem;padding-right:1.6rem}
  .mq-right .mq-half{font-size:.56rem}
  .mq::before,.mq::after{width:56px}
  .assure{grid-template-columns:1fr}
  .as{border-left:0;border-top:1px solid var(--hair);padding-left:0}
  .as:first-child{border-top:0}
  .fidx{font-size:3.2rem}
}
@media (max-width:700px){
  .bento{grid-template-columns:1fr}
  .cell-big,.cell-5,.cell-4{grid-column:span 1}
  .rec-card{min-height:14rem}
}
@media (max-width:600px){
  .flow{grid-template-columns:1fr;row-gap:2rem}
  .step p{max-width:none}
  .frow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:2.5rem}
  .foot-bot{gap:.5rem;flex-direction:column;align-items:flex-start}
  .cta-btns .btn,.hero-cta .btn{width:100%}
  .hero-cta{flex-direction:column;gap:.6rem}
  .cta-btns{flex-direction:column;width:100%}
  .modal{padding:.75rem}
}
@media (max-width:380px){
  :root{--pad:1rem}
  .hero-title{font-size:2.9rem}
  .eyebrow{font-size:.6rem;letter-spacing:.1em}
  .panel{padding:1.4rem}
  .steps{gap:.5rem;font-size:.6rem}
}

/* ── HEDEFLİ OKUNURLUK DÜZELTMELERİ ───────────────────────
   Yalnizca su ibareler: hero alt metni, akis adim aciklamalari,
   guvence etiketleri. Renk tam metin rengi (temaya gore beyaz/siyah),
   agirlik bir kademe kalin. Baska hicbir yazi etkilenmez. */
.hero-sub{color:var(--bone);font-weight:500}
.step p{color:var(--bone);font-weight:500}
.as .mono{color:var(--bone);font-weight:600;font-family:var(--body);font-size:.95rem;letter-spacing:.02em}
.cta-sub{color:var(--bone);font-weight:500}

/* ── THEME SWITCH ─────────────────────────────────────────
   Pist + kayan topuz; topuz marka kirmizisi (REC noktasi),
   icinde aktif temanin ikonu. Karanlikta sagda, aydinlikta solda. */
.tbtn{position:relative;width:54px;height:28px;flex:0 0 auto;
  border:1px solid var(--hair-2);border-radius:999px;
  background:rgba(236,233,226,.06);cursor:pointer;
  transition:border-color .3s var(--e),background .3s var(--e)}
.tbtn:hover{border-color:var(--red)}
html[data-theme="light"] .tbtn{background:rgba(23,23,27,.06)}
.tbtn .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--red);color:#fff;
  box-shadow:0 1px 6px rgba(227,6,19,.45);
  transform:translateX(26px);transition:transform .35s var(--e)}
html[data-theme="light"] .tbtn .knob{transform:translateX(0)}
.tbtn svg{width:12px;height:12px}
.tbtn .i-sun{display:none}
html[data-theme="light"] .tbtn .i-sun{display:block}
html[data-theme="light"] .tbtn .i-moon{display:none}
.tbtn-m{display:none;margin-left:auto}
@media (max-width:820px){
  .tbtn-m{display:block}
  .burger{margin-left:0}
}

/* ── LIGHT THEME ──────────────────────────────────────── */
html[data-theme="light"]{
  --ink:#f6f5f2;
  --ink-2:#ffffff;
  --bone:#17171b;
  --bone-dim:rgba(23,23,27,.60);
  --hair:rgba(23,23,27,.10);
  --hair-2:rgba(23,23,27,.20);
}
/* kose vinyetleri: kirmizi kalir, beyaz zemine gore ayarli */
html[data-theme="light"] .bgfx{
  background:
    radial-gradient(44% 40% at 0% 0%,rgba(227,6,19,.20) 0%,rgba(227,6,19,.06) 45%,transparent 72%),
    radial-gradient(44% 40% at 100% 0%,rgba(227,6,19,.14) 0%,rgba(227,6,19,.05) 45%,transparent 72%),
    radial-gradient(50% 46% at 100% 100%,rgba(227,6,19,.18) 0%,rgba(227,6,19,.06) 48%,transparent 74%),
    radial-gradient(50% 46% at 0% 100%,rgba(227,6,19,.14) 0%,rgba(227,6,19,.05) 48%,transparent 74%)}
html[data-theme="light"] .nav.scrolled .nav-in{background:rgba(255,255,255,.80);
  box-shadow:0 18px 50px -20px rgba(23,23,27,.22)}
html[data-theme="light"] .cell:not(.cell-big):hover{background:rgba(255,255,255,.72)}
html[data-theme="light"] .modal-bd{background:rgba(246,245,242,.82)}
html[data-theme="light"] .btn-ghost:hover{background:rgba(23,23,27,.05)}
html[data-theme="light"] .fg input::placeholder,
html[data-theme="light"] .fg textarea::placeholder{color:rgba(23,23,27,.35)}
html[data-theme="light"] .fidx{color:rgba(23,23,27,.25)}
@supports (-webkit-text-stroke:1px #fff){
  html[data-theme="light"] .fidx{color:transparent;-webkit-text-stroke:1px rgba(23,23,27,.30)}
  html[data-theme="light"] .step:hover .fidx{-webkit-text-stroke-color:var(--red)}
}
html[data-theme="light"] .bub{background:rgba(23,23,27,.045)}
html[data-theme="light"] .bub.agent{background:rgba(227,6,19,.07)}
html[data-theme="light"] .bub.on{background:rgba(227,6,19,.13)}
html[data-theme="light"] .alert.success{background:rgba(23,23,27,.05)}
html[data-theme="light"] .wplay{background:rgba(255,255,255,.65);color:#17171b}
html[data-theme="light"] .wplay:hover{background:var(--red);color:#fff}
html[data-theme="light"] .map-box iframe{filter:saturate(.9)}
html[data-theme="light"] .bgfx-fb{
  background:
    radial-gradient(60% 55% at 18% 92%,rgba(227,6,19,.16) 0%,rgba(227,6,19,.06) 38%,transparent 72%),
    radial-gradient(48% 42% at 52% 46%,rgba(23,23,27,.05) 0%,transparent 70%)}
html[data-theme="light"] ::selection{background:var(--red);color:#fff}

/* ── REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .mq-row{animation:none}
  .cue{animation:none;opacity:.45}
  html.js .r,html.js .hero-r{opacity:1;transform:none}
  html.js .ln-i{transform:none}
  html.js .hud,html.js .cue{opacity:1}
  .mf-text .w{opacity:1}
  #cur-dot,#cur-ring{display:none}
  .rec-dot,.pl-dot{animation:none}
}