/* Vaka sayfası (referans detay): sahneli hero, metrik şeridi, bölüm anlatısı, kapsam kartları, kaydırılabilir ekran gezintisi */
.cv{--ac:hsl(var(--h) 78% 52%);--ac-soft:hsl(var(--h) 90% 60% / .13);--ac-line:hsl(var(--h) 70% 50% / .28);overflow-x:clip}

/* ---------- Hero ---------- */
.cv-hero{position:relative;overflow:hidden;padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(5rem,8vw,7rem);
  background:radial-gradient(55% 70% at 80% 38%,var(--ac-soft),transparent 70%),radial-gradient(40% 55% at 4% 100%,hsl(218 90% 60% / .08),transparent 70%),linear-gradient(180deg,var(--bg-soft),var(--bg) 96%)}
.cv-ghost{position:absolute;left:-.04em;bottom:-.3em;font:800 clamp(7rem,21vw,19rem)/1 var(--font-display);letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--ac-line);pointer-events:none;user-select:none;opacity:.4}
.nw{white-space:nowrap}
.cv-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(1.75rem,4vw,4rem);align-items:center}
.cv-back{display:inline-flex;align-items:center;gap:.4375rem;margin:0 0 1.5rem;padding:.4375rem .9375rem .4375rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--muted);font-weight:600;font-size:.86rem;transition:color .15s,border-color .15s}
.cv-back:hover{color:var(--brand);border-color:var(--brand)}
.cv-copy h1{font-size:clamp(2rem,3.5vw,3.1rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 1.5rem;text-wrap:balance}
.cv-meta{margin:0 0 1.75rem;display:grid}
.cv-meta>div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line)}
.cv-meta>div:first-child{border-top:1px solid var(--line)}
.cv-meta dt{font:700 .9rem var(--font-display);color:var(--brand)}
.cv-meta dd{margin:0;font-weight:600;color:var(--ink)}
.cv-chips{display:flex;flex-wrap:wrap;gap:.4375rem}
.cv-chips span{font-weight:600;font-size:.82rem;padding:.3125rem .8125rem;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink-2)}
.cv-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.cv-actions .btn{padding:.8125rem 1.375rem;font-size:.95rem;white-space:nowrap}

/* ---------- Cihaz çerçeveleri ---------- */
.cv-stage{position:relative;padding:0 0 1.5rem}
.dv-laptop{position:relative}
.dv-lid{padding:.625rem .625rem 1.125rem;border-radius:1.125rem 1.125rem .25rem .25rem;background:linear-gradient(180deg,#1b1f2a,#0f1218);box-shadow:0 2.75rem 5rem -2rem rgba(15,30,80,.5),inset 0 0 0 1px rgba(255,255,255,.07)}
.dv-lid::before{content:"";display:block;width:.3125rem;height:.3125rem;margin:-.25rem auto .1875rem;border-radius:50%;background:#2c3343}
.dv-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:.375rem;background:var(--bg-soft)}
.dv-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.dv-screen svg{width:100%;height:100%;display:block}
.dv-base{position:relative;height:.875rem;margin:0 -5%;border-radius:.125rem .125rem 1rem 1rem;background:linear-gradient(180deg,#d9dde6,#aeb4c2);box-shadow:0 1rem 1.5rem -.5rem rgba(15,30,80,.4)}
.dv-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:.375rem;transform:translateX(-50%);border-radius:0 0 .5rem .5rem;background:#8c93a4}
.dv-phone{position:relative;width:min(100%,17.5rem);margin-inline:auto;padding:.5rem;border-radius:2.5rem;background:linear-gradient(160deg,#272c39,#0c0f15);box-shadow:0 2.5rem 4rem -1.5rem rgba(15,30,80,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
.dv-phone::before{content:"";position:absolute;z-index:2;top:.875rem;left:50%;width:28%;height:1.0625rem;transform:translateX(-50%);border-radius:999px;background:#05070b}
.dv-phone::after{content:"";position:absolute;right:-.1875rem;top:7rem;width:.1875rem;height:3.5rem;border-radius:0 .125rem .125rem 0;background:#1c212c}
.dv-pscreen{aspect-ratio:9/19.2;overflow-y:auto;overflow-x:hidden;border-radius:2rem;background:var(--bg-soft);overscroll-behavior:contain;scrollbar-width:none}
.dv-pscreen::-webkit-scrollbar{display:none}
.dv-pscreen img{display:block;width:100%;height:auto}
.dv-phone--float{position:absolute;right:-.5rem;bottom:-.5rem;width:clamp(6.75rem,11vw,9.5rem);padding:.3125rem;border-radius:1.5rem;transform:rotate(3deg)}
.dv-phone--float::before{top:.5rem;height:.5rem}
.dv-phone--float::after{display:none}
.dv-phone--float .dv-pscreen{border-radius:1.1875rem;overflow:hidden}
.dv-phone--float .dv-pscreen img{height:100%;object-fit:cover;object-position:top}
.dv-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:.3125rem;height:1.75rem;padding:0 .625rem;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.dv-bar i{width:.4375rem;height:.4375rem;border-radius:50%}
.dv-bar i:nth-child(1){background:#ff6b5e}.dv-bar i:nth-child(2){background:#ffbd3d}.dv-bar i:nth-child(3){background:#2fcb53}
.dv-bar .icon{width:.6875rem;height:.6875rem;flex:none}
.dv-bar span{margin-left:.625rem;display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .625rem;border-radius:.375rem;background:var(--bg);border:1px solid var(--line);font:500 .7rem var(--font-mono);color:var(--muted)}
.dv-screen--scroll{aspect-ratio:16/10;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ac-line) transparent}
.dv-screen--scroll img{height:auto;object-fit:unset}
.dv-screen:focus-visible,.dv-pscreen:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* ---------- Metrik şeridi (hero'ya biner) ---------- */
.cv-metrics{position:relative;z-index:2;display:grid;margin:calc(-1 * clamp(2.5rem,4vw,3.5rem)) 0 clamp(3rem,5vw,4.5rem);background:var(--bg);border:1px solid var(--line);border-radius:1.25rem;box-shadow:0 1.5rem 3.5rem -1.75rem rgba(15,30,80,.28)}
.cv-metrics--1{grid-template-columns:1fr}.cv-metrics--2{grid-template-columns:repeat(2,1fr)}.cv-metrics--3{grid-template-columns:repeat(3,1fr)}.cv-metrics--4{grid-template-columns:repeat(4,1fr)}
.cv-metric{display:grid;gap:.5rem;padding:clamp(1.25rem,2.4vw,2rem) clamp(1.25rem,2.6vw,2.25rem);border-left:1px solid var(--line);min-width:0}
.cv-metric:first-child{border-left:0}
.cv-metric b{font:800 clamp(1.8rem,3.6vw,3rem)/1 var(--font-display);letter-spacing:-.04em;color:var(--brand);overflow-wrap:anywhere}
.cv-metric span{font-size:.9rem;color:var(--muted);font-weight:500}

/* ---------- Anlatı: üç bölüm ---------- */
.cv-story{padding:0 0 clamp(3rem,5vw,4.5rem)}
.cv-chaps{list-style:none;margin:0;padding:0;counter-reset:ch}
.cv-chap{display:grid;grid-template-columns:clamp(4.5rem,9vw,8rem) minmax(8rem,16rem) minmax(0,1fr);gap:clamp(1rem,3vw,3rem);align-items:start;padding:clamp(1.5rem,3vw,2.5rem) 0;border-top:1px solid var(--line)}
.cv-chap:last-child{border-bottom:1px solid var(--line)}
.cv-num{font:800 clamp(3rem,7vw,6rem)/.9 var(--font-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--ac)}
.cv-chap-t{padding-top:.5rem}
.cv-chap-t h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:0 0 .25rem;letter-spacing:-.02em}
.cv-chap-t small{font:600 .74rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cv-chap p{margin:0;padding-top:.5rem;font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.75;color:var(--text);max-width:46em}
.cv-chap--end{border-radius:0}
.cv-chap--end p{color:var(--ink);font-weight:600}
.cv-chap--end .cv-num{-webkit-text-stroke-color:var(--brand)}

/* ---------- Kapsam ---------- */
.cv-scope{padding:clamp(3rem,5vw,4.5rem) 0;background:var(--bg-soft);border-block:1px solid var(--line)}
.cv-scope-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.75rem,4vw,4rem);align-items:start}
.cv-scope-lead{position:sticky;top:6.5rem}
.cv-scope-lead h2,.cv-tour-head h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;margin:0 0 1.375rem;line-height:1.1}
.cv-scope-lead h2 span,.cv-tour-head h2 span{position:relative;color:var(--brand);white-space:nowrap}
.cv-scope-lead h2 span::after,.cv-tour-head h2 span::after{content:"";position:absolute;left:0;right:0;bottom:-.2em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6c10-6 20-6 30 0s20 6 30 0 20-6 30 0 20 6 28 0' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.cv-scope-lead p{font-size:1.12rem;line-height:1.75;color:var(--text);margin:0;max-width:30em}
.cv-scope-cards{display:grid;gap:1rem}
.cv-card{padding:clamp(1.25rem,2.2vw,1.75rem);border:1px solid var(--line);border-radius:1.25rem;background:var(--bg)}
.cv-card h3{font-size:1.05rem;margin:0 0 1rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.625rem}
.cv-card h3::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ac);box-shadow:0 0 0 .3125rem var(--ac-soft)}
.cv-card ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem}
.cv-card li{display:grid;grid-template-columns:auto 1fr;gap:.625rem;align-items:start;font-size:.95rem;line-height:1.5;color:var(--text)}
.cv-card li .icon{margin-top:.2rem;color:var(--brand);flex:none}

/* ---------- Kısa bakış ---------- */
.cv-statement{padding:0 0 clamp(2.5rem,4vw,3.5rem);text-align:center}
.cv-statement h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;margin:0 0 1.25rem;line-height:1.1}
.cv-statement h2 span{position:relative;color:var(--brand);white-space:nowrap}
.cv-statement h2 span::after{content:"";position:absolute;left:0;right:0;bottom:-.2em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6c10-6 20-6 30 0s20 6 30 0 20-6 30 0 20 6 28 0' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.cv-statement p{margin:0 auto;max-width:36em;font:600 clamp(1.15rem,1.7vw,1.5rem)/1.6 var(--font-display);letter-spacing:-.01em;color:var(--ink)}

/* ---------- Cihaz vitrini ---------- */
.cv-show{padding:clamp(3rem,5vw,4.5rem) 0;background:var(--bg-soft);border-top:1px solid var(--line)}
.cv-show--alt{background:var(--bg)}
.cv-show-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.cv-show-in--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.cv-show-in--solo{grid-template-columns:minmax(0,1fr);max-width:44rem}
.cv-show-txt h2{font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.03em;margin:0 0 .75rem;line-height:1.12}
.cv-show-txt h2 span{color:var(--brand)}
.cv-show-txt>p{margin:0 0 1.5rem;color:var(--muted);font-size:1.02rem;line-height:1.6}
.cv-show-txt .cv-card ul{grid-template-columns:minmax(0,1fr)}
.cv-show-dev{min-width:0}
.cv-show .dv-lid{box-shadow:0 2rem 3.5rem -1.75rem rgba(15,30,80,.45),inset 0 0 0 1px rgba(255,255,255,.07)}

/* ---------- Açık/koyu ve duyarlılık ---------- */
[data-theme="dark"] .cv-hero{background:radial-gradient(60% 75% at 86% 30%,var(--ac-soft),transparent 70%),linear-gradient(180deg,var(--bg-soft),var(--bg) 96%)}
[data-theme="dark"] .cv-win{box-shadow:0 2.5rem 5rem -2rem rgba(0,0,0,.7)}
[data-theme="dark"] .cv-metric b{color:var(--brand-ink,#93b4ff)}
[data-theme="dark"] .cv-card{background:var(--surface)}
[data-theme="dark"] .cv-scope-lead h2 span,[data-theme="dark"] .cv-tour-head h2 span{color:var(--brand-ink,#93b4ff)}

@media (max-width:1100px){
  .cv-hero-in{grid-template-columns:minmax(0,1fr)}
  .cv-stage{max-width:46rem;margin-inline:auto;width:100%}
  .cv-show-in,.cv-show-in--wide{grid-template-columns:minmax(0,1fr)}
  .cv-show--alt .cv-show-dev{order:2}
  .cv-scope-in{grid-template-columns:minmax(0,1fr)}
  .cv-scope-lead{position:static}
}
@media (max-width:760px){
  .cv-chap{grid-template-columns:auto minmax(0,1fr);row-gap:.5rem}
  .cv-chap p{grid-column:1/-1;padding-top:0}
  .cv-num{font-size:3.25rem}
  .cv-metrics--3,.cv-metrics--4{grid-template-columns:repeat(2,1fr)}
  .cv-metrics--3 .cv-metric:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .cv-metrics--4 .cv-metric:nth-child(3){border-left:0}
  .cv-metrics--4 .cv-metric:nth-child(n+3){border-top:1px solid var(--line)}
  .cv-card ul{grid-template-columns:minmax(0,1fr)}
  .cv-meta>div{grid-template-columns:4.5rem minmax(0,1fr)}
  .dv-phone--float{right:-.25rem}
}
@media (max-width:480px){
  .cv-actions .btn{flex:1 1 100%;justify-content:center}
  .cv-note{right:0;font-size:1.35rem}
}

[data-theme="dark"] .cv-statement h2 span,[data-theme="dark"] .cv-show-txt h2 span{color:var(--brand-ink,#93b4ff)}
[data-theme="dark"] .cv-show{background:var(--bg-soft)}[data-theme="dark"] .cv-show--alt{background:var(--bg)}