@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/roboto-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/roboto-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/roboto-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/roboto-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/roboto-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/roboto-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/roboto-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/roboto-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Sofia;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/sofia-sans-extra-condensed-latin-ext-900-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Sofia;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/sofia-sans-extra-condensed-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Sofia;font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/sofia-sans-extra-condensed-latin-ext-900-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Sofia;font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/sofia-sans-extra-condensed-latin-900-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --cobalt:#1244A1; --cobalt-koyu:#0D3682; --berry:#E4383F; --linen:#F4EFEA; --ink:#1B1B1F; --clay:#6B6760;
  --gece:#0E1220; --cobalt-acik:#6F9BFF; --berry-acik:#FF5A60; --berry-koyu:#C42A31; --beyaz:#FFFFFF;
  --alaca:#531B26; --alaca-koyu:#2C1420; --gok-acik:#DCE5F6; --dusk-ikincil:#C9B1AE; --kagit:#FBF9F7;
  --gutter:16px; --bar:64px; --bolum:72px; --gun:90px;
  --disp:Sofia,Impact,"Arial Narrow",sans-serif;
  --t-dev:clamp(52px,15vw,84px);
  --hizli:160ms; --orta:240ms; --ease:cubic-bezier(.2,.7,.2,1);
  --golge:0 18px 40px -18px rgba(14,18,32,.55);
}
@media (min-width:760px){ :root{--gutter:32px; --bolum:112px; --t-dev:clamp(84px,10.5vw,180px)} }
@media (min-width:1000px){ :root{--bar:72px; --gun:68px} }
@media (min-width:1200px){ :root{--gutter:48px} }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html.hazir{scroll-behavior:smooth}}
/* Yapışkan bar: scroll-padding bardaki öğeye odakta sayfayı zıplatır, bu yüzden pay yalnızca içerikte. */
main [id],main a,main summary,.alt a,#site-haritasi{scroll-margin-top:calc(var(--bar) + 16px)}
main section[id]{scroll-margin-top:var(--bar)}
.sahneler section[id]{scroll-margin-top:calc(var(--bar) + var(--gun))}
body{margin:0; background:var(--gece); color:var(--ink); font:400 18px/1.45 Roboto,system-ui,sans-serif; font-kerning:normal; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x:clip;
  display:flex; flex-direction:column; min-height:100vh; min-height:100svh}
main{flex:1 0 auto; width:100%; min-width:0; background:var(--linen)}
h1,h2,h3,h4,h5,p,ol,ul,dl,dd,figure{margin:0; padding:0}
ol,ul{list-style:none}
a{color:inherit}
svg{display:block}
img{max-width:100%}
:focus-visible{outline:3px solid currentColor; outline-offset:3px; border-radius:6px}
.gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.atla{position:absolute; left:var(--gutter); top:-80px; z-index:60; background:var(--linen); color:var(--ink); padding:12px 16px; border-radius:12px}
.atla:focus{top:8px}
.dunya{display:block; height:auto}
.ikon{display:block; flex:none; width:64px; height:64px}
.ikon--kucuk{width:28px; height:28px}
.ikon--orta{width:clamp(56px,6vw,96px); height:clamp(56px,6vw,96px)}
.ikon--buyuk{width:72px; height:72px}
.dev{font:900 var(--t-dev)/.92 var(--disp); letter-spacing:-.005em; text-wrap:balance; hyphens:none; max-width:16ch}
.rozet{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font:500 13px/1.45 Roboto,sans-serif; background:color-mix(in srgb,currentColor 14%,transparent)}
.rozet--sol{margin:0 0 12px}

/* Bar */
.bar{--z:var(--cobalt); --y:var(--linen); --p:var(--linen); position:sticky; top:0; z-index:40; background:var(--z); color:var(--y); transition:background-color var(--orta) var(--ease),color var(--orta) var(--ease)}
.bar[data-tema="keten"]{--z:var(--linen); --y:var(--ink); --p:var(--berry)}
.bar[data-tema="berry"]{--z:var(--berry-koyu); --y:var(--beyaz); --p:var(--beyaz)}
.bar[data-tema="alaca"]{--z:var(--alaca); --y:var(--linen); --p:var(--linen)}
.bar[data-tema="gece"]{--z:var(--gece); --y:var(--linen); --p:var(--berry-acik)}
.bar__ic{display:flex; align-items:center; gap:24px; height:var(--bar); padding:0 var(--gutter)}
.marka{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:22px; letter-spacing:-.02em; min-height:44px}
.marka svg{width:28px; height:28px; fill:var(--p,var(--berry)); transition:fill var(--orta) var(--ease)}
.menu{display:none; gap:28px; font-size:16px}
.menu a,.bar__giris,.bar__dil{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:16px}
.menu a:hover,.bar__giris:hover,.bar__dil:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
/* Modüller açılır listesi: details olduğu için JS olmadan da çalışır */
.acilir{position:relative}
.acilir summary{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:16px; cursor:pointer; list-style:none}
.acilir summary::-webkit-details-marker{display:none}
.acilir summary::after{content:""; width:7px; height:7px; margin-top:-3px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg)}
.acilir[open] summary::after{margin-top:3px; transform:rotate(-135deg)}
.acilir summary:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.acilir ul{position:absolute; left:-16px; top:100%; z-index:45; min-width:230px; padding:8px; background:var(--linen); color:var(--ink); border-radius:12px; box-shadow:var(--golge)}
.menu .acilir ul a{display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border-radius:8px; white-space:nowrap}
.menu .acilir ul a .rozet{margin-left:auto}
.menu .acilir ul a:hover{background:color-mix(in srgb,var(--ink) 8%,transparent); text-decoration:none}
.bar__sag{display:flex; align-items:center; gap:24px; margin-left:auto}
.bar__menu{appearance:none; display:inline-flex; align-items:center; border:0; background:none; color:inherit; font:500 16px/1 Roboto,system-ui,sans-serif; min-height:44px; padding:0 0 0 4px; cursor:pointer; text-decoration:none}
.bar__menu[hidden]{display:none}
.bar__giris,.bar__dene,.bar__dil{display:none}
.bar__dene{align-items:center; min-height:44px; font-size:16px; font-weight:500; text-decoration:none; padding:0 16px; border-radius:12px; box-shadow:inset 0 0 0 1.5px currentColor}
.bar__dene:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
@media (min-width:1000px){ .menu{display:flex} .bar__menu{display:none} .bar__giris,.bar__dene,.bar__dil{display:inline-flex} }

.menu-panel{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:var(--cobalt); color:var(--linen); padding:0 var(--gutter) 24px; overflow-y:auto}
.menu-panel[hidden]{display:none}
.menu-panel__ust{display:flex; align-items:center; justify-content:space-between; flex:none; height:64px}
.menu-panel .marka{--p:var(--linen)}
.menu-panel nav{margin-top:16px}
.menu-panel nav a{display:flex; align-items:center; min-height:56px; font:900 46px/1 var(--disp); text-decoration:none}
.menu-panel__grup{font-size:15px; font-weight:500; margin-top:8px}
.menu-panel nav .menu-panel__alt-liste a{min-height:44px; gap:10px; font-size:32px; padding-left:4px}
.menu-panel .rozet{font:500 13px/1.4 Roboto,sans-serif}
.menu-panel__alt{margin-top:auto; padding-top:24px; display:grid; gap:8px; justify-items:start}
.menu-panel__alt .dugme{width:100%; background:var(--linen); color:var(--cobalt)}
.menu-panel__alt a:not(.dugme){display:inline-flex; align-items:center; min-height:44px; font-weight:500}
@media (min-width:1000px){ .menu-panel{display:none} }

/* Düğme ve bağlantı */
.dugme{display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 28px; border-radius:12px; background:var(--cobalt); color:var(--linen); font-weight:500; font-size:18px; white-space:nowrap; text-decoration:none; transition:background-color var(--hizli) var(--ease)}
.dugme:hover{background:var(--cobalt-koyu)}
.dugme--acik{background:var(--linen); color:var(--cobalt)}
.dugme--acik:hover{background:var(--beyaz)}
.bag{display:inline-flex; align-items:center; min-height:44px; color:var(--cobalt); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.bag:hover{text-decoration-thickness:2px}
.bag--acik{color:var(--linen)}
.bag--kagit{background:var(--linen); color:var(--ink); padding:0 16px; border-radius:8px}
.bag-satir{display:flex; flex-wrap:wrap; gap:0 24px}

/* Kâğıt şerit: fotoğrafı geçen başlıklar her zaman kendi zemininde durur */
.serit{display:inline; font:900 clamp(54px,16vw,92px)/1.12 var(--disp); letter-spacing:0; hyphens:none}
.serit > span{--s:var(--linen); --y:var(--ink); background:var(--s); color:var(--y); padding:.02em .14em .05em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.serit--kobalt > span{--s:var(--cobalt); --y:var(--linen)}
@media (min-width:1000px){ .serit{font-size:min(8.6vw,17vh)} }

/* Kural: metin, fotoğraf, çerçeve, not, afiş ve kedi birbirini örtmez. Her öğenin kendi yeri vardır;
   katman ancak okunacak bir şeyi ya da yüzü kapatmıyorsa kalır. scripts/dogrula.mjs bunu ölçer. */

/* Kâğıt notlar */
.not{display:block; padding:7px 12px 10px; background:var(--kagit); color:var(--ink); font:italic 400 14px/1.2 Roboto,sans-serif; white-space:nowrap; box-shadow:0 8px 16px -8px rgba(14,18,32,.5); --e:-3deg; --o:5px}
.not:nth-child(3n+2){background:#F7D9D4; --e:4deg; --o:-6px}
.not:nth-child(3n){background:#DCE5F6; --e:-5deg; --o:7px}

/* Tez: dev başlık, altında kedi. Notlar yalnızca alt şeritte kediye doğru gider; başlığa ve metne hiç değmez. */
.tez{--h1:min(26.6vw,13svh); --u:46px; --p:0; position:relative; background:var(--cobalt); color:var(--linen)}
html[lang="en"] .tez{--h1:min(21.5vw,13svh)}
.tez__sahne{position:relative; display:grid; gap:12px; padding:10px var(--gutter) 0; overflow:hidden}
.tez__ust{font-size:15px; font-weight:500}
.tez h1{font:900 var(--h1)/.9 var(--disp); letter-spacing:-.005em}
.tez h1 span{display:block}
.tez__alt p{max-width:44ch; font-size:17px; line-height:1.35}
.eylem{display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; margin-top:14px}
.tez__notlar{display:flex; flex-wrap:wrap; gap:18px 14px; align-items:center}
.tez__notlar .not{transform:rotate(var(--e)) translateY(var(--o))}
.tez__notlar .not:nth-child(n+3){display:none}
@media (max-width:359px){ .tez__notlar{display:none} .sc .sc__saat{font-size:29vw} }
.tez__art{margin:0 calc(var(--gutter) * -1)}
.tez__kedi{width:100%; max-width:560px; margin:0 auto}
@media (max-height:640px) and (max-width:999px){ .tez{--h1:min(26.6vw,9.2svh)} html[lang="en"] .tez{--h1:min(21.5vw,9.2svh)} .tez__sahne{gap:8px} .tez__alt p{font-size:15.5px} .tez .eylem{margin-top:6px} }
@media (min-width:1000px){
  .tez{--h1:min(14.6vw,23svh); --u:calc(38px + var(--h1) * .14)}
  html[lang="en"] .tez{--h1:min(13.6vw,23svh)}
  .hareket .tez{height:calc(136svh - var(--bar))}
  .tez__sahne{display:block; height:calc(100svh - var(--bar)); min-height:540px; padding:0}
  .hareket .tez__sahne{position:sticky; top:var(--bar)}
  .tez__ust{position:absolute; z-index:3; left:var(--gutter); top:14px; font-size:16px}
  .tez h1{position:absolute; z-index:3; left:var(--gutter); right:var(--gutter); top:var(--u)}
  .tez h1 span{display:inline}
  .tez h1 span:nth-child(2)::after{content:"\A"; white-space:pre}
  .tez__alt{position:absolute; z-index:3; left:var(--gutter); top:calc(var(--u) + var(--h1) * 1.8 + 26px); width:min(42vw,680px)}
  .tez__alt p{font-size:clamp(20px,1.5vw,27px); line-height:1.34; max-width:44ch}
  .tez__art{position:absolute; z-index:1; right:-1vw; bottom:0; top:calc(var(--u) + var(--h1) * 1.82); margin:0; aspect-ratio:3/2}
  .tez__kedi{position:absolute; right:0; top:0; width:auto; max-width:none; height:136%; margin:0; transform-origin:50% 100%; transform:translateY(calc(var(--p) * 5svh)) rotate(calc(var(--p) * -2deg))}
  .tez__notlar{position:absolute; z-index:2; left:0; right:0; bottom:0; height:0; display:block}
  .tez__notlar .not,.tez__notlar .not:nth-child(n+3){display:block; position:absolute; left:calc(var(--gutter) + var(--n) * 10vw); bottom:calc(26px + var(--n) * 7px); transform:translateX(calc(var(--p) * (44vw - var(--n) * 10vw))) rotate(var(--e)) scale(calc(1 - var(--p) * .4)); opacity:calc(1.35 - var(--p) * 1.35)}
}
@media (min-width:1000px) and (max-height:799px){ .tez__notlar{display:none} }

/* Geçiş: bölüm öncekinin renginde başlar, yeni renk bir şekilden yayılır. Metin hiç örtülmez; önceki bölüm yukarı çıkarken alttaki boyanır. */
.sel{display:none}
.hareket [data-sel]{position:relative; isolation:isolate; overflow:clip; background:var(--onceki)}
.hareket [data-sel] > :not(.sel){opacity:var(--fa,1)}
.hareket .sel{display:block; position:absolute; inset:0; z-index:-1; pointer-events:none}
.sel > div{position:sticky; top:0; height:100svh; overflow:hidden}
.sel i{position:absolute; left:var(--ox,50%); top:var(--oy,0%); width:320vmax; height:320vmax; margin:-160vmax 0 0 -160vmax; border-radius:50%; background:var(--zemin); transform:scale(0); will-change:transform}
.sel--pencere i{border-radius:7%}

/* Tek yer: iş nesneleri dağınık başlar, metnin dışındaki yörüngeye toplanır. Yörünge metin kutusundan ve ekran sınırından hesaplanır; hiçbir an ekran dışına ya da metne değmez. */
.tek{--ns:clamp(36px,11.5vw,46px); position:relative; background:var(--berry-koyu); color:var(--beyaz)}
.tek__sahne{position:relative; display:grid; gap:24px; padding:40px var(--gutter); overflow:hidden}
.tek__yazi{position:relative; z-index:3; text-align:center}
.tek__yazi h2{font:900 min(16vw,11.5svh)/.92 var(--disp); text-wrap:balance; hyphens:none}
.tek__yazi p{max-width:30ch; margin:12px auto 0; font-size:clamp(16px,4.6vw,19px); font-weight:500; line-height:1.3}
.nesneler{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.nesne{display:block; width:var(--ns); height:var(--ns)}
.hareket .tek{height:230svh}
.hareket .tek__sahne{position:sticky; top:var(--bar); height:calc(100svh - var(--bar)); padding:0; place-items:center}
.hareket .tek__yazi{max-width:calc(100vw - var(--ns) * 2.7 - 22px); opacity:var(--to,1)}
.hareket .nesneler{display:block; position:absolute; inset:0; z-index:1; pointer-events:none}
.hareket .nesne{position:absolute; left:50%; top:50%; margin:calc(var(--ns) / -2) 0 0 calc(var(--ns) / -2); opacity:0; will-change:transform}
@media (min-width:1000px){
  .tek{--ns:min(6.4vw,11.5svh)}
  .tek__yazi h2{font-size:min(11.6vw,20.5svh); max-width:6.4em; margin:0 auto}
  .tek__yazi p{max-width:none; margin-top:18px; font-size:clamp(24px,1.8vw,32px)}
}
@media (max-height:480px){
  .hareket .tek{height:auto}
  .hareket .tek__sahne{position:relative; top:auto; height:auto; padding:24px var(--gutter)}
  .hareket .tek__yazi{max-width:none; opacity:1}
  .hareket .nesneler{display:flex; position:static}
  .hareket .nesne{position:static; margin:0; opacity:1; transform:none !important}
}

/* Şerit: kedi, izler ve notlar yalnızca burada gider. Kendi yüksekliği vardır, taşan kırpılır, başka içerik buraya giremez. */
.yol{--lh:84px; --kw:46%; --c:.05; --j:0; position:relative; height:var(--lh); container-type:inline-size; overflow:hidden; color:var(--y,var(--linen))}
.yol__kedi{position:absolute; left:0; bottom:4px; height:calc(var(--lh) - 10px); width:auto; max-width:none; --x:calc(12px + (100cqw - 100% - 24px) * var(--c)); transform:translateX(var(--x))}
.yol__iz{position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:space-between; clip-path:inset(0 calc(100% - (100% - var(--kw)) * var(--c)) 0 0)}
.yol__iz i{width:20px; flex:none; transform:rotate(90deg)}
.yol__iz i:nth-child(even){margin-bottom:14px}
.yol__iz svg{fill:currentColor; width:20px; height:20px; opacity:.6}
.yol__notlar{position:absolute; inset:0}
.yol .not{--s:calc(46cqw + var(--n) * 34cqw); position:absolute; left:0; top:50%; margin-top:-17px; transform:translate(calc(var(--s) + 100cqw * min(1,var(--c) * 1.25)),var(--o)) rotate(var(--e))}
.yol .not:nth-child(n+3){display:none}
.yol--oturan,.yol--bakan{--kw:100%}
.yol--oturan .yol__kedi,.yol--bakan .yol__kedi{left:12px; transform:translateY(calc((1 - var(--c)) * 70%))}
html:not(.hareket) .yol--oturan .yol__kedi,html:not(.hareket) .yol--bakan .yol__kedi{transform:none}
.yol--oturan .yol__iz,.yol--bakan .yol__iz{display:none}
.yol--uyuyan .yol__kedi{transform:translateX(var(--x)) rotate(calc(var(--c) * 360deg))}
.yol--ziplayan{--lh:96px}
.yol--ziplayan .yol__kedi{height:78px; bottom:2px; transform:translate(var(--x),calc(var(--j) * -12px)) rotate(calc(4deg - var(--c) * 8deg))}
.yol--misyon{--lh:96px; flex:none; --y:var(--linen); margin:0 calc(var(--gutter) * -1)}
.yol--misyon .yol__kedi{height:82px; bottom:6px}
.yol--oz{--y:currentColor; grid-column:1 / -1; margin:0 calc(var(--gutter) * -1)}
@media (max-width:359px),(max-height:520px){ .yol__notlar{display:none} }
@media (min-width:1000px){
  .yol{--lh:84px; --kw:14%}
  .yol .not{--s:calc(26cqw + var(--n) * 21cqw)}
  .yol .not:nth-child(n+3){display:block}
  .yol--ziplayan{--lh:90px}
  .yol--ziplayan .yol__kedi{height:78px}
  .yol--misyon{--lh:124px}
  .yol--misyon .yol__kedi{height:110px}
}

@media (max-width:999px){ html.hareket .fin{height:150svh} }
.nedir__pc .pc,.adimlar__pc .pc{--ap:#FBF9F7; --cizgi:#E7E1DA; --sessiz:#6B6760; color:var(--ink); text-align:left}
.adimlar__pc{container-type:inline-size} .adimlar__pc .pc{height:22em} .adimlar__pc .imlec,.adimlar__pc .ucan,.nedir__pc .imlec,.nedir__pc .ucan{display:none}

/* Misyon: sabit bir okuma anı. Sönük sözcük açık pembe, yanmış sözcük Keten; ikisi de zeminde büyük metin AA sınırını geçer. */
.misyon{--sonuk:#F2B8B5; position:relative; background:var(--berry-koyu); color:var(--linen)}
.hareket .misyon:not(.misyon--akar){height:calc(400svh - var(--bar))}
.misyon__sahne{position:relative; min-height:calc(100svh - var(--bar)); padding:20px var(--gutter) 12px; display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,3svh,32px); overflow:hidden}
.hareket .misyon:not(.misyon--akar) .misyon__sahne{position:sticky; top:var(--bar); height:calc(100svh - var(--bar))}
.misyon__metin{font:900 min(10.2vw,5.6svh)/1.05 var(--disp); hyphens:none}
@media (max-height:640px) and (max-width:999px){ .misyon__metin{font-size:min(9.4vw,5svh)} .yol--misyon{--lh:90px} .yol--misyon .yol__kedi{height:72px} }
.misyon__metin .k{--a:1; color:color-mix(in srgb,var(--linen) calc(var(--a) * 100%),var(--sonuk))}
@media (min-width:1000px){ .misyon__metin{font-size:min(5.9vw,9.4svh); line-height:1.04} }

/* Maru nedir: ilk ekran. Solda ne olduğu, sağda ürün. */
.nedir{position:relative; background:var(--cobalt); color:var(--linen); display:grid; gap:28px; padding:22px var(--gutter) 40px; overflow:hidden}
.nedir__ust{font-size:15px; font-weight:500; color:var(--gok-acik)}
.nedir h1{font:900 clamp(46px,13.4vw,64px)/.94 var(--disp); margin-top:8px; text-wrap:balance; hyphens:none; letter-spacing:-.005em}
.nedir__alt{max-width:44ch; margin-top:14px; font-size:17px; line-height:1.4}
.nedir__slogan{margin-top:18px; font:900 22px/1 var(--disp); color:var(--gok-acik)}
.nedir__urun{--kh:56px; position:relative; min-width:0; padding-top:var(--kh)}
.cihazlar{position:relative; z-index:1; padding:0 22% 30% 0}
.cihazlar > .cihaz--tel{position:absolute; z-index:2; right:0; bottom:0; width:34%}
.nedir__pc{position:relative; z-index:1; container-type:inline-size}
.nedir__pc .pc{height:24em}
.nedir__kedi{position:absolute; z-index:2; left:12%; top:0; height:var(--kh); width:auto; max-width:none}
@media (min-width:1000px){
  .nedir{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(32px,4vw,72px); align-items:center; min-height:calc(100svh - var(--bar)); padding-top:40px; padding-bottom:56px}
  .nedir h1{font-size:min(5.5vw,10.5svh)}
  .nedir__alt{font-size:clamp(18px,1.35vw,23px)}
  .nedir__slogan{font-size:clamp(24px,1.9vw,34px); margin-top:28px}
  .nedir__urun{--kh:clamp(64px,5.4vw,96px)}
  .cihazlar{padding:0 13% 8% 0}
  .cihazlar > .cihaz--tel{width:23%}
  .nedir__pc .pc{height:30em}
}

/* Dört modül, tek Maru */
.modul4{background:var(--linen); color:var(--ink); padding:40px var(--gutter) 48px; display:grid; gap:18px}
.modul4__baslik{color:var(--cobalt); max-width:none}
.modul4__yazi{display:grid; gap:14px; font-size:18px; line-height:1.4; max-width:62ch}
.modul4__buyuk{font:900 clamp(30px,8vw,40px)/1.04 var(--disp)}
.nedir__bolum{display:grid; gap:10px; margin-top:8px}
@media (min-width:600px) and (max-width:999px){ .nedir__bolum{grid-template-columns:1fr 1fr} }
.nedir__bolum li{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; align-items:center; background:var(--kagit); color:var(--ink); padding:12px 14px 6px; border-radius:16px; box-shadow:var(--golge)}
.nedir__bolum .ikon{width:76px; height:76px}
.nedir__bolum h3{font:900 clamp(40px,11vw,48px)/1 var(--disp); color:var(--cobalt)}
.nedir__bolum h3 .rozet{vertical-align:middle}
/* Kartın üstünde modülün ne olduğu düz sözle yazar; ad altında tek sözcük kalır */
.nedir__ne{display:block; margin-bottom:6px; font:500 14px/1.2 Roboto,sans-serif; color:#5F5B55; letter-spacing:.01em}
.nedir__bolum p{grid-column:1 / -1; margin-top:4px; font-size:17px; line-height:1.3}
.nedir__bolum .bag{grid-column:1 / -1; justify-self:start}
@media (min-width:1000px){
  .modul4{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; padding-top:64px; padding-bottom:72px}
  .modul4__baslik{grid-column:1 / -1; font-size:min(7vw,13svh)}
  .modul4__yazi{grid-column:1 / -1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; max-width:none; font-size:19px}
  .modul4__buyuk{font-size:min(3vw,5.6svh)}
  .nedir__bolum{grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; align-items:stretch}
  .nedir__bolum li{grid-template-rows:auto auto 1fr; padding:14px 16px 6px; column-gap:12px}
  .nedir__bolum .bag{align-self:end}
  .nedir__bolum .ikon{width:clamp(84px,6.2vw,120px); height:clamp(84px,6.2vw,120px)}
  .nedir__bolum h3{font-size:clamp(40px,3.4vw,66px); line-height:.95}
  .nedir__bolum h3 .rozet{display:block; width:fit-content; margin:4px 0 0}
  .nedir__bolum p{font-size:clamp(16.5px,1.15vw,20px); margin-top:8px}
}

/* İş kartı: hikâyedeki tek işin kartı. --kp 0 önceki, 1 sonraki hâl. */
.ik{--ik0:#E3E0DB; --ik1:#DCE5F6; --ik2:#FBE3B8; --ik3:#F7D9D4; --ik4:#D3EDD9; --kp:var(--kpj,1); position:relative; display:grid; color:var(--ink); font:400 14px/1.25 Roboto,system-ui,sans-serif; text-align:left}
.ik > *{grid-area:1 / 1}
.ik__kart{background:var(--beyaz); border-radius:14px; padding:12px 14px 12px; box-shadow:0 0 0 1px rgba(27,27,31,.08), 0 14px 28px -16px rgba(14,18,32,.55); display:grid; gap:6px}
.ik__bos{display:grid; align-content:center; gap:4px; padding:12px 14px; border-radius:14px; border:2px dashed currentColor; color:inherit; opacity:.9}
.ik__bos b{font-weight:700}
.ik__bos small{font-size:13px}
.ik--dogar .ik__bos{opacity:calc(1 - var(--kp) * 2); color:var(--linen)}
.ik--dogar .ik__kart{opacity:calc(var(--kp) * 2 - .6); transform:translateY(calc((1 - var(--kp)) * 10px)) scale(calc(.94 + var(--kp) * .06))}
.ik__ust{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ik__etiket,.ik__rozet,.ik__say{display:inline-grid}
.ik__etiket > i,.ik__rozet > i,.ik__say > i{grid-area:1 / 1; font-style:normal; white-space:nowrap}
.ik__o{opacity:calc(1 - var(--kp) * 2)}
.ik__s{opacity:calc(var(--kp) * 2 - 1)}
.ik__etiket{font-size:11.5px; font-weight:500; color:#6B6760}
.ik__rozet{grid-auto-flow:column; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; background:color-mix(in srgb,var(--r1) calc(var(--kp) * 100%),var(--r0))}
.ik__rozet svg{grid-area:1 / 1; width:14px; height:14px; fill:none; stroke:#1F7A3A; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.ik--bitti .ik__rozet{grid-template-columns:auto auto; color:#145A2A}
.ik--bitti .ik__rozet > i{grid-column:2}
.ik--asama .ik__rozet,.ik--sayi .ik__say{box-shadow:0 0 0 calc(var(--kp) * 3px) rgba(228,56,63,calc(.55 - var(--kp) * .3))}
.ik__ad{font-weight:700; font-size:16px}
.ik__kim{display:flex; align-items:center; gap:6px; font-size:13px; color:#4A4743}
.ik__av{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--cobalt); color:var(--linen); font-size:11px; font-weight:700}
.ik__teslim::before{content:"·"; margin-right:6px}
.ik__alt{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#4A4743}
.ik__noktalar{display:flex; gap:4px}
.ik__noktalar i{width:10px; height:10px; border-radius:50%; border:1.5px solid #9B968F}
.ik__noktalar .dolu{background:#1F7A3A; border-color:#1F7A3A}
.ik__noktalar .yeni{background:rgba(31,122,58,var(--kp)); border-color:color-mix(in srgb,#1F7A3A calc(var(--kp) * 100%),#9B968F)}
.ik__say{font-weight:700; font-variant-numeric:tabular-nums}
.ik--sayi .ik__say{border-radius:6px; padding:0 3px}
.ik__not{margin-left:auto; text-align:right; font-size:12px; color:#6B6760; min-width:0}
.ik--durak{max-width:380px}
.ik--yok.ik--durak .ik__bos{color:var(--m)}

/* Sokaktaki iş kartı: tek satırlık sıkı düzen */
.ik--serit .ik__kart{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ad ust" "kim alt"; gap:6px 12px; padding:11px 14px; border-radius:12px; align-items:center}
.ik--serit .ik__ust{grid-area:ust; justify-content:flex-end}
.ik--serit .ik__ad{grid-area:ad; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ik--serit .ik__kim{grid-area:kim; font-size:14px; white-space:nowrap}
.ik--serit .ik__rozet{font-size:13px}
.ik--serit .ik__etiket{font-size:12px}
.ik--serit .ik__alt{grid-area:alt; justify-content:flex-end}
.ik--serit .ik__not{display:none}
.ik--serit .ik__bos{padding:8px 12px; border-color:rgba(244,239,234,.5); color:var(--linen)}
.ik--serit .ik__bos small{font-size:12.5px}

.gun__ust{display:flex; align-items:center; gap:8px; min-height:42px}
.gun__halka{flex:none; width:34px; height:34px}
html:not(.js) .gun__halka{display:none}
.gun__halka .yay{stroke:rgba(244,239,234,.26); stroke-width:13}
.gun__halka .yay--ust{stroke:var(--berry-acik); stroke-dasharray:1 1; stroke-dashoffset:var(--o,1)}
.gun__etiket{font-size:15px; font-weight:500; line-height:1.2}
.gun ol{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:1px}
.gun a{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:44px; border-radius:8px; text-decoration:none; color:inherit}
.gun b{font-size:12px; font-weight:500; font-variant-numeric:tabular-nums}
.gun a span{display:none}
.gun a:hover b{text-decoration:underline}
.gun a[aria-current]{background:var(--linen); color:var(--ink)}
.gun a[aria-current] b{font-weight:700}
@media (max-width:359px){ .gun b{font-size:11px} }
@media (min-width:1000px){
  .gun{grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px}
  .gun__halka{width:52px; height:52px}
  .gun__etiket{display:none}
  .gun ol{gap:4px}
  .gun a{min-height:56px}
  .gun b{font-size:16px}
  .gun a span{display:block; font-size:13px; line-height:1.2; white-space:nowrap}
}

/* Şehir paneli. Temel hâl dikeydir: yan çizgi boyunca durak durak akar. Yatay kip yalnızca .pano--yatay ile açılır. */
.sahneler{position:relative; background:var(--linen)}
.pano__gok,.pano__bulut,.pano__uzak,.sokak{display:none}
.pano__ray{position:relative}
.ara{height:calc(var(--aw) * 2.4px + 28px); background:linear-gradient(180deg,var(--a),var(--b))}
.ara--son{display:none}
.dur{--m:var(--ink); --y:var(--cobalt); --s:33; position:relative; display:grid; gap:12px; padding:18px var(--gutter) 22px 50px; background:var(--z); color:var(--m)}
.dur__saat{color:var(--y); font:900 calc(var(--s) * 1vw)/.86 var(--disp); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}
.d2,.d6{--s:15}
.d5{--s:40}
.d9{--s:18}
.dur__foto{aspect-ratio:3/2; overflow:hidden; background:color-mix(in srgb,var(--z) 80%,var(--ink))}
.dur__foto img{width:100%; height:100%; object-fit:cover; display:block}
.dur__cumle{font-size:18px; font-weight:500; line-height:1.3}
.dur__yazi h2{font:900 clamp(42px,12.6vw,80px)/.96 var(--disp); margin-top:6px; text-wrap:balance; hyphens:none}
.sc__kim{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-top:8px; font-size:15px; font-weight:500}
.dur__not{display:grid; gap:8px; font-size:16px; line-height:1.38}
.dur__not b{font-weight:700}
.dur__son{display:grid; gap:10px; justify-items:start}
.kedi-satir{font-style:italic; font-size:15px}
.toplanan{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500}
.toplanan b{display:block; font-weight:700}
.toplanan svg{flex:none; width:40px; height:40px}
.yay{fill:none; stroke:color-mix(in srgb,currentColor 24%,transparent); stroke-width:9; stroke-linecap:butt}
.yay--dolu{stroke:var(--berry-acik)}
.dur--acik .yay--dolu{stroke:var(--berry-koyu)}
.afis{background:var(--kagit); color:var(--ink); box-shadow:var(--golge)}
.afis svg{width:100%; height:auto}
.afis figcaption{padding:4px 6px 6px; font-size:12px; line-height:1.2}
.afis figcaption b{display:block; font-weight:700}
/* Durağa özgü çerçeveler */
.d1 .dur__foto{box-shadow:var(--golge); position:relative}
.d2 .dur__foto{border-radius:44% 44% 0 0 / 66% 66% 0 0; box-shadow:0 0 0 8px var(--kagit), 0 0 0 9px rgba(14,18,32,.2)}
.aski{position:relative; transform:rotate(-2.2deg); padding:10px; background:var(--kagit); box-shadow:var(--golge)}
.aski::before,.aski::after{content:""; position:absolute; top:-12px; width:12px; height:26px; border-radius:3px; background:var(--berry-koyu); box-shadow:0 0 0 1px rgba(14,18,32,.25)}
.aski::before{left:18%}
.aski::after{right:18%}
.dukkan{background:var(--linen); padding:0 10px 0; box-shadow:var(--golge)}
.dukkan__tente{display:block; height:30px; margin:0 -10px 10px; background:repeating-linear-gradient(90deg,var(--berry-koyu) 0 26px,var(--kagit) 26px 52px); border-radius:0 0 12px 12px}
.dukkan__esik{padding:6px 2px 8px; color:var(--cobalt); font:900 30px/1 var(--disp); text-align:right}
.d4 > .dur__saat{display:none}
.d6 .dur__foto{border:8px solid var(--kagit); border-bottom-width:34px; box-shadow:var(--golge); transform:rotate(1.6deg); width:78%; justify-self:end; box-sizing:content-box}
.d7 .dur__yazi{background:var(--cobalt); color:var(--linen); padding:14px 16px 12px; border-radius:22px; position:relative}
.d7 .dur__yazi::after{content:""; position:absolute; left:34px; bottom:-14px; border:14px solid transparent; border-bottom:0; border-top-color:var(--cobalt)}
.dur__kadran{position:relative; width:min(62vw,240px); aspect-ratio:1; display:grid; place-items:center}
.dur__kadran svg{position:absolute; inset:0; fill:none}
.dur__kadran circle{stroke:color-mix(in srgb,var(--linen) 18%,transparent); stroke-width:3}
.dur__kadran path{stroke:var(--berry-acik); stroke-width:3; stroke-linecap:round}
.dur__kadran .dur__saat{font-size:min(19vw,72px)}
.sus{display:none}
.d9 .sus--isik{display:flex; justify-content:space-between; padding:0 2px}
.sus--isik b{width:9px; height:9px; border-radius:50%; background:#F6D9A8; box-shadow:0 0 10px 2px rgba(246,217,168,.6)}
.dur--giris{font:900 clamp(44px,12.5vw,72px)/.96 var(--disp); color:var(--cobalt); --z:var(--linen); padding-top:32px}
.dur--giris p + p{color:var(--berry-koyu); font-size:.6em; line-height:1.1}
.dur__giris-kedi{height:110px; width:auto; justify-self:end}
.hat{position:absolute; left:0; top:0; bottom:56px; width:44px; pointer-events:none; z-index:5}
.hat::before{content:""; position:absolute; left:21px; top:0; bottom:0; border-left:2px dashed color-mix(in srgb,var(--clay) 60%,transparent)}
.hat__kedi{position:sticky; top:48svh; left:0; width:44px; height:44px}
.hat__poz{width:38px; max-width:none; margin:0 auto}
.gun{position:sticky; top:var(--bar); z-index:20; height:var(--gun); background:var(--gece); color:var(--linen); padding:0 var(--gutter); display:grid; align-content:center}
@media (min-width:760px){
  .dur{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; align-items:center; padding-left:60px}
  .dur__saat,.dur__not,.dur__son{grid-column:1 / -1}
  .dur__kadran,.dukkan,.aski{grid-column:1}
  .dur__saat{font-size:calc(var(--s) * .5vw)}
}

/* Telefonda şerit tek satırdır: halka ilerlemeyi, etiket saati ve aşamayı söyler. JS yoksa saat bağlantıları kalır. */
@media (max-width:759px){
  html.js{--gun:46px}
  html.js .gun ol{display:none}
  html.js .gun__ust{min-height:0}
  html.js .gun__halka{width:30px; height:30px}
  html.js .gun__etiket{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}

/* Yatay kip: --u durak yüksekliğinin yüzde biridir; her ölçü buna bağlıdır, ekran büyüyünce kompozisyon bozulmaz. */
.pano--yatay{--sk:100px; --b:calc(100svh - var(--bar) - var(--gun) - var(--sk) - 28px); --u0:min(calc(var(--b) / 100),calc((100vw - 32px) / 232)); --u:var(--u0)}
/* --fit: site.js bir durak yüksekliğe sığmazsa durağın bütün ölçüsünü küçültür; yine sığmazsa panel dikey akışa döner. */
.pano--yatay .dur{--u:calc(var(--u0) * var(--fit,1)); --mt:max(14px,calc(var(--u) * 2.45))}
.pano--yatay .hat{display:none}
.pano--yatay .pano__sahne{position:sticky; top:var(--bar); height:calc(100svh - var(--bar)); overflow:hidden; display:flex; flex-direction:column}
.pano--yatay .gun{position:relative; top:auto; flex:none}
.pano--yatay .pano__pencere{position:relative; flex:1; min-height:0; overflow:hidden}
.pano--yatay .pano__gok,.pano--yatay .pano__bulut,.pano--yatay .pano__uzak{display:block; position:absolute; left:0; top:0; bottom:0; will-change:transform}
.pano--yatay .pano__bulut{width:3600px}
.pano__bulut i{position:absolute; left:calc(var(--i) * 400px + 40px); top:calc(6% + (var(--i) * 37 % 3) * 10%); width:300px; height:90px; border-radius:50%; background:rgba(255,255,255,.05)}
.pano--yatay .pano__uzak{top:auto; height:20%; width:3200px}
.pano__siluet{display:block; width:100%; height:100%; fill:rgba(14,18,32,.09)}
.pano--yatay .pano__ray{position:absolute; left:0; top:0; bottom:0; display:flex; width:max-content; padding-top:14px; padding-bottom:14px; will-change:transform}
.pano--yatay .ara{flex:none; height:auto; width:calc(var(--aw) * var(--u)); background:none}
.pano--yatay .ara--son{display:block}
.pano--yatay .dur{flex:none; height:var(--b); padding:0 calc(var(--u) * 3); background:none; align-content:center; align-items:start; gap:calc(var(--u) * 2.4) calc(var(--u) * 5); overflow:hidden}
.pano--yatay .dur__son{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.pano--yatay .dur__not{font-size:var(--mt); line-height:1.36; column-gap:calc(var(--u) * 4)}
.pano--yatay .dur__cumle{font-size:max(16px,calc(var(--u) * 2.9))}
.pano--yatay .sc__kim{font-size:max(14px,calc(var(--u) * 2.3)); margin-top:calc(var(--u) * 1)}
.pano--yatay .kedi-satir{font-size:max(13.5px,calc(var(--u) * 2.2)); grid-column:1 / -1}
.pano--yatay .dur__saat{font-size:calc(var(--u) * var(--s)); line-height:.84}
.pano--yatay .dur__yazi h2{font-size:calc(var(--u) * var(--h,10)); margin-top:calc(var(--u) * .6)}
.pano--yatay .dur__foto{width:100%}
.pano--yatay .dur--giris{width:calc(var(--u) * 176); grid-template-columns:minmax(0,1fr) auto; font-size:calc(var(--u) * 13.5); align-content:center; align-items:center; row-gap:calc(var(--u) * 3)}
.pano--yatay .dur--giris p{grid-column:1}
.pano--yatay .dur__giris-kedi{grid-column:2; grid-row:1 / 3; height:calc(var(--u) * 60)}
/* 08:40 dev saat, altında tek grup; fotoğraf bantlı, güneş arkada */
.pano--yatay .d1{--s:36; --h:10.5; width:calc(var(--u) * 216); grid-template-columns:calc(var(--u) * 104) calc(var(--u) * 100); grid-template-areas:"s f" "y f" "n f"; grid-template-rows:auto auto auto; row-gap:calc(var(--u) * 1.4); align-items:center}
.pano--yatay .d1 > .dur__saat{grid-area:s} .pano--yatay .d1 > .dur__yazi{grid-area:y} .pano--yatay .d1 > .dur__foto{grid-area:f} .pano--yatay .d1 > .dur__not{grid-area:n}
.pano--yatay .d1 > .dur__saat,.pano--yatay .d1 > .dur__yazi,.pano--yatay .d1 > .dur__not{align-self:start}
.pano--yatay .d1 .dur__foto{transform:rotate(1.2deg)}
.pano--yatay .d1 .dur__not{grid-template-columns:1fr 1.35fr}
.pano--yatay .sus--gunes{display:block; position:absolute; right:calc(var(--u) * 2); top:calc(var(--u) * -8); width:calc(var(--u) * 44); height:calc(var(--u) * 44); border-radius:50%; background:#F7D9D4}
/* 10:15 küçük saat, kemerli pencere */
.pano--yatay .d2{--s:7; --h:13; width:calc(var(--u) * 230); grid-template-columns:calc(var(--u) * 90) calc(var(--u) * 66) calc(var(--u) * 58); grid-template-rows:auto auto 1fr; grid-template-areas:"f s n" "f y n" "f . n"}
.pano--yatay .d2 > .dur__foto{grid-area:f} .pano--yatay .d2 > .dur__saat{grid-area:s} .pano--yatay .d2 > .dur__yazi{grid-area:y} .pano--yatay .d2 > .dur__not{grid-area:n}
.pano--yatay .d2 .dur__foto{margin-top:calc(var(--u) * 6)}
.pano--yatay .d2 > .dur__saat{justify-self:start; padding:calc(var(--u) * 1) calc(var(--u) * 2); border-radius:999px; background:var(--y); color:var(--z); margin-top:calc(var(--u) * 6)}
.pano--yatay .d2 .dur__not{align-self:center}
/* 11:30 ipte asılı baskı */
.pano--yatay .d3{--s:26; --h:11; width:calc(var(--u) * 222); grid-template-columns:calc(var(--u) * 92) calc(var(--u) * 112); grid-template-areas:"a s" "a y" "a n"; grid-template-rows:auto auto auto; padding-top:calc(var(--u) * 4); row-gap:calc(var(--u) * 1.6)}
.pano--yatay .d3 > .aski{grid-area:a} .pano--yatay .d3 > .dur__saat{grid-area:s} .pano--yatay .d3 > .dur__yazi{grid-area:y} .pano--yatay .d3 > .dur__not{grid-area:n}
.pano--yatay .d3 .aski{margin-top:calc(var(--u) * 7)}
.pano--yatay .d3 .dur__not{grid-template-columns:1fr 1.25fr}
.pano--yatay .sus--tel{display:block; position:absolute; left:calc(var(--u) * -8); right:calc(var(--u) * 60); top:calc(var(--u) * 6); height:2px; background:color-mix(in srgb,var(--linen) 60%,transparent); transform:rotate(-.6deg)}
/* 12:45 dükkân vitrininden */
.pano--yatay .d4{--h:11; width:calc(var(--u) * 196); grid-template-columns:calc(var(--u) * 80) calc(var(--u) * 100); grid-template-areas:"y v" "n v"; grid-template-rows:auto 1fr}
.pano--yatay .d4 > .dukkan{grid-area:v} .pano--yatay .d4 > .dur__yazi{grid-area:y} .pano--yatay .d4 > .dur__not{grid-area:n}
.pano--yatay .d4 .dukkan__tente{height:calc(var(--u) * 7); background:repeating-linear-gradient(90deg,var(--berry-koyu) 0 calc(var(--u) * 6),var(--kagit) calc(var(--u) * 6) calc(var(--u) * 12))}
.pano--yatay .dukkan__esik{font-size:calc(var(--u) * 8)}
/* 14:00 saat iki satıra bölünür */
.pano--yatay .d5{--s:40; --h:10; width:calc(var(--u) * 230); grid-template-columns:calc(var(--u) * 40) calc(var(--u) * 96) calc(var(--u) * 78); grid-template-areas:"s f y" "s f n"; grid-template-rows:auto auto; align-items:center}
.pano--yatay .d5 > .dur__yazi{align-self:end}
.pano--yatay .d5 > .dur__not{align-self:start}
.pano--yatay .d5 > .dur__saat{grid-area:s} .pano--yatay .d5 > .dur__foto{grid-area:f} .pano--yatay .d5 > .dur__yazi{grid-area:y} .pano--yatay .d5 > .dur__not{grid-area:n}
/* 15:15 başlık öne geçer, küçük polaroid, cetvel */
.pano--yatay .d6{--s:9; --h:20; width:calc(var(--u) * 214); grid-template-columns:calc(var(--u) * 66) calc(var(--u) * 132); grid-template-areas:"y y" "f n" "f s"; grid-template-rows:auto auto auto}
.pano--yatay .d6 > .dur__yazi{grid-area:y} .pano--yatay .d6 > .dur__foto{grid-area:f} .pano--yatay .d6 > .dur__not{grid-area:n} .pano--yatay .d6 > .dur__saat{grid-area:s}
.pano--yatay .d6 .dur__foto{width:calc(var(--u) * 60); justify-self:start; border-width:calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 5)}
.pano--yatay .d6 .dur__not{grid-template-columns:1fr 1.3fr; align-self:start}
.pano--yatay .d6 > .dur__saat{padding-bottom:calc(var(--u) * 2.4); background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px calc(var(--u) * 1.6)) left bottom / 100% calc(var(--u) * 1.6) no-repeat}
/* 16:30 konuşma balonu */
.pano--yatay .d7{--s:30; --h:17; width:calc(var(--u) * 216); grid-template-columns:calc(var(--u) * 116) calc(var(--u) * 84); grid-template-areas:"y s" "y f" "n f"; grid-template-rows:auto auto auto; align-items:start}
.pano--yatay .d7 > .dur__yazi{grid-area:y} .pano--yatay .d7 > .dur__saat{grid-area:s} .pano--yatay .d7 > .dur__foto{grid-area:f} .pano--yatay .d7 > .dur__not{grid-area:n}
.pano--yatay .d7 .dur__yazi{padding:calc(var(--u) * 3) calc(var(--u) * 4)}
.pano--yatay .d7 .dur__not{grid-template-columns:1fr 1.35fr; margin-top:calc(var(--u) * 3)}
/* 17:45 saat kadranda, yağmur */
.pano--yatay .d8{--s:13; --h:12; width:calc(var(--u) * 230); grid-template-columns:calc(var(--u) * 46) calc(var(--u) * 92) calc(var(--u) * 76); grid-template-areas:"k f y" "k f n"; grid-template-rows:auto auto; align-items:center}
.pano--yatay .d8 > .dur__yazi{align-self:end}
.pano--yatay .d8 > .dur__not{align-self:start}
.pano--yatay .d8 > .dur__kadran{grid-area:k} .pano--yatay .d8 > .dur__foto{grid-area:f} .pano--yatay .d8 > .dur__yazi{grid-area:y} .pano--yatay .d8 > .dur__not{grid-area:n}
.pano--yatay .dur__kadran{width:calc(var(--u) * 46)}
.pano--yatay .dur__kadran .dur__saat{font-size:calc(var(--u) * 13.5)}
.pano--yatay .sus--yagmur{display:block; position:absolute; left:0; right:0; top:0; height:calc(var(--u) * 7); background:repeating-linear-gradient(105deg,transparent 0 calc(var(--u) * 2.4),rgba(220,229,246,.4) calc(var(--u) * 2.4) calc(var(--u) * 2.4 + 1.5px))}
/* 19:00 ışıklar, küçük saat, sessiz */
.pano--yatay .d9{--s:12; --h:12; width:calc(var(--u) * 226); grid-template-columns:calc(var(--u) * 112) calc(var(--u) * 94); grid-template-areas:"f s" "f y" "f n"; grid-template-rows:auto auto auto; padding-top:calc(var(--u) * 6)}
.pano--yatay .d9 > .dur__foto{grid-area:f; margin-top:calc(var(--u) * 4)} .pano--yatay .d9 > .dur__saat{grid-area:s} .pano--yatay .d9 > .dur__yazi{grid-area:y} .pano--yatay .d9 > .dur__not{grid-area:n}
.pano--yatay .d9 .sus--isik{position:absolute; left:calc(var(--u) * 2); right:calc(var(--u) * 2); top:calc(var(--u) * 3)}
.pano--yatay .sokak{position:relative; flex:none; display:grid; grid-template-columns:clamp(330px,26vw,400px) minmax(0,1fr) 280px; align-items:center; height:var(--sk); background:var(--gece); color:var(--linen); border-top:2px dashed rgba(244,239,234,.28)}
.sokak__afis{position:relative; height:100%}
.sokak__kart{position:absolute; left:var(--gutter); right:12px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .25s}
.sokak__kart.on{opacity:1}
.sokak__serit{position:relative; height:100%; overflow:hidden; container-type:inline-size}
.sokak__kedi{position:absolute; left:0; bottom:3px; height:78px; width:120px; will-change:transform}
.sokak__poz{position:absolute; left:0; bottom:0; height:76px; width:auto; max-width:none; opacity:0}
.sokak__poz.on{opacity:1}
.sokak__iz{position:absolute; right:100%; bottom:8px; width:6000px; height:26px; overflow:hidden; will-change:transform}
.sokak__iz > div{position:absolute; left:0; top:0; display:flex; gap:84px; width:9000px; will-change:transform; opacity:.5}
.sokak__iz i{width:20px; flex:none; transform:rotate(90deg)}
.sokak__iz i:nth-child(even){margin-top:6px}
.sokak__iz svg{fill:var(--linen); width:20px; height:20px}
.sokak__notlar{position:absolute; inset:0; opacity:0}
.sokak__notlar.on{opacity:1}
.sokak__notlar .not{position:absolute; left:0; top:50%; margin-top:-17px; will-change:transform}
.sokak__daire{display:flex; align-items:center; gap:10px; height:100%; padding-right:var(--gutter)}
.sokak__daire svg{flex:none; width:60px; height:60px}
.sokak__daire .yay{stroke:rgba(244,239,234,.26); stroke-width:11}
.sokak__daire .yay--ust{stroke:var(--berry-acik); stroke-dasharray:1 1; stroke-dashoffset:var(--o,1)}
.sokak__daire > div{position:relative; flex:1; height:100%}
.sokak__daire p{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); font-size:14px; line-height:1.2; opacity:0}
.sokak__daire p.on{opacity:1}
.sokak__daire b{display:block}

/* Ürün sahneleri */
.v{background:var(--beyaz); color:var(--ink); border-radius:14px; padding:14px; font-size:15px; line-height:1.3; box-shadow:0 0 0 1px rgba(27,27,31,.08), 0 14px 26px -18px rgba(14,18,32,.5)}
.v__ust{font-weight:700; padding-bottom:8px; border-bottom:1px solid #ECE6E0; display:flex; justify-content:space-between; gap:8px}
.v__ust span{color:var(--clay); font-weight:400; font-size:13px}
.v__liste li{display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:38px; border-bottom:1px solid #F0EBE6}
.v__liste li:last-child{border-bottom:0}
.v__liste small{color:var(--clay); font-size:12.5px; white-space:nowrap}
.v__eylem{display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 10px; border-radius:8px; font-weight:500; font-size:13.5px; box-shadow:inset 0 0 0 1px #D8D2CB; white-space:nowrap}
.v__eylem--tam{width:100%; margin-top:10px; min-height:36px}
.v__komut{margin-top:10px; padding:9px 10px; border-radius:10px; background:var(--linen); font-size:14.5px; overflow-wrap:anywhere}
.v__is{display:grid; margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--cobalt); color:var(--linen)}
.v__is small{font-size:12.5px}
.v__is strong{font-weight:500; font-size:16px}
.v__dl div{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #F0EBE6}
.v__dl dt{color:var(--clay)}
.v__dl dd{font-weight:500; text-align:right}
.v__prova{width:44%; margin:10px auto 0; box-shadow:0 8px 14px -8px rgba(14,18,32,.5)}
.v__iki{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.v__iki .v__eylem{min-height:38px; white-space:normal; text-align:center}
.v__not{display:flex; align-items:center; gap:6px; margin-top:10px; font-size:14px}
.v__not svg{flex:none; width:16px; height:16px; fill:none; stroke:var(--cobalt); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.v__pano{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:10px}
.v__sutun{background:var(--linen); border-radius:10px; padding:6px}
.v__ad{display:block; font-size:12px; font-weight:500; padding:2px 2px 6px}
.v__kart{background:var(--beyaz); border-radius:7px; padding:6px 7px; margin-bottom:4px; font-size:13px; font-weight:500}
.v__kart small{display:block; color:var(--clay); font-weight:400; font-size:11.5px}
.v__buyuk{font:900 30px/1.05 var(--disp); margin-top:8px}
.v__daire{display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--clay)}
.v__daire--dolu{background:var(--cobalt); box-shadow:none}
.v__daire svg{width:13px; height:13px; fill:none; stroke:var(--linen); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.v__balon{margin:10px 0 8px; padding:8px 12px; background:var(--linen); border-radius:12px 12px 12px 4px; width:fit-content}
.v__satir{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; margin-top:4px}
.v__etiket{font-size:12px; font-weight:500; padding:1px 8px; border-radius:999px; background:#DCE5F6; color:var(--cobalt)}
.v__bos{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 8px; margin-top:6px; padding:9px 10px; border-radius:10px; box-shadow:inset 0 0 0 1px #D8D2CB; font-size:14px}
.v__bos b{color:var(--cobalt); font-weight:500}
.v__kapat{margin-top:8px; padding-top:8px; border-top:1px solid #ECE6E0; font-weight:500}

.vitrin{position:relative; margin:0; background:var(--gece)}
.vitrin img{display:block; width:100%; height:auto}
.vitrin::before,.vitrin::after{content:""; position:absolute; left:0; right:0; height:12%; pointer-events:none}
.vitrin::before{top:0; background:linear-gradient(var(--gece),transparent)}
.vitrin::after{bottom:0; background:linear-gradient(transparent,var(--gece))}

/* Doruk */
.fin{--p:1; --g:1; --t:1; --v:1; position:relative; background:var(--gece); color:var(--linen)}
.hareket .fin{height:175svh}
.fin__sahne{position:relative; min-height:calc(100svh - var(--bar)); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,2.6svh,28px); padding:24px var(--gutter); text-align:center}
.hareket .fin__sahne{position:sticky; top:var(--bar); height:calc(100svh - var(--bar))}
.fin__soz{font:900 min(25vw,19svh)/.88 var(--disp); letter-spacing:-.01em; opacity:max(.12,var(--v)); hyphens:none}
.fin__soz span{display:inline-block}
.fin__kart{position:relative; width:min(460px,88vw); margin-top:clamp(18px,3svh,36px); opacity:var(--t); transform:translateY(calc((1 - var(--t)) * 24px))}
.fin__kart .ik__kart{padding:16px 18px; gap:8px}
.fin__kart .ik__ad{font-size:22px}
.fin__kart .ik__etiket{display:none}
.fin__kart .ik__ust{justify-content:flex-end}
.fin__kedi{position:absolute; left:14px; bottom:calc(100% - 16px); height:clamp(50px,7svh,72px); width:auto; max-width:none; pointer-events:none}
.fin__yan{font:900 clamp(26px,7vw,34px)/1.05 var(--disp); color:#9FD9AE; opacity:var(--g)}
.fin__metin{font-size:clamp(17px,4.4vw,20px); line-height:1.4; max-width:40ch; opacity:var(--g)}
@media (min-width:1000px){ .fin__soz{font-size:min(13vw,22svh)} .fin__yan{font-size:clamp(34px,2.8vw,48px)} .fin__metin{font-size:clamp(19px,1.45vw,24px); max-width:46ch} }

.moduller{background:var(--cobalt); color:var(--linen)}
.moduller__baslik{padding:40px var(--gutter) 24px; max-width:none; font-size:min(15vw,120px)}
/* İş akışı: tek pencere, adımlar üst üste. JS ve hareket yoksa her adım kendi tamamlanmış karesiyle alt alta durur. */
.akis{--ap:#FBF9F7; --cizgi:#E7E1DA; --sessiz:#6B6760; position:relative; background:var(--linen); color:var(--ink)}
.akis__sahne{display:grid; gap:40px; padding:40px var(--gutter)}
.akis__adim{display:none}
.ad{display:grid; gap:18px}
.ad__yazi h2{font:900 clamp(50px,14.6vw,96px)/.93 var(--disp); color:var(--cobalt); text-wrap:balance; hyphens:none}
.ad__yazi p{margin-top:10px; font-size:17px; max-width:48ch}
.ad__v{container-type:inline-size; min-width:0}
.pc{--f:clamp(12px,calc(100cqw / 30),15px); position:relative; font:400 var(--f)/1.3 Roboto,system-ui,sans-serif; width:100%; height:34em; border-radius:1em; overflow:hidden; background:var(--ap); box-shadow:0 0 0 1px rgba(27,27,31,.09), 0 2.2em 4em -1.6em rgba(14,18,32,.32), 0 .4em 1em -.4em rgba(14,18,32,.16)}
.pc__ust{display:flex; align-items:center; gap:.42em; height:2.3em; padding:0 .9em; background:#EFEAE4; border-bottom:1px solid var(--cizgi); color:var(--sessiz); font-size:.86em}
.pc__ust i{width:.72em; height:.72em; border-radius:50%; background:#D2CCC5}
.pc__ust span{flex:1; text-align:center; margin-right:3em}
.pc__ic{position:absolute; inset:2em 0 0}
.vw{position:absolute; inset:0; display:grid; grid-template-columns:3.4em minmax(0,1fr); background:var(--ap)}
.vw--cik{opacity:calc(1 - var(--c,1) * 2); transform:translateX(calc(var(--c,1) * -2.5%))}
.vw--gir{opacity:calc(var(--e,1) * 2 - 1); transform:translateX(calc((1 - var(--e,1)) * 2.5%))}
.vw--sonuk{filter:saturate(.7) brightness(.97)}
.vw__yan{display:grid; align-content:start; justify-items:center; gap:.7em; padding-top:.9em; border-right:1px solid var(--cizgi); background:#F6F2EE}
.vw__yan i{display:grid; place-items:center; width:2.4em; height:2.4em; border-radius:.75em}
.vw__yan i.on{background:#DCE5F6}
.pc .ikon--kucuk{width:1.7em; height:1.7em}
/* Chat */
.ch{position:relative; display:flex; flex-direction:column; min-width:0; padding:.8em 1em 1em}
.ch__ust{display:flex; align-items:baseline; gap:.6em; padding-bottom:.6em; border-bottom:1px solid var(--cizgi)}
.ch__ust small{color:var(--sessiz); font-size:.85em}
.ch__akim{flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:.5em; padding-top:.7em; min-height:0}
.ch__o,.ch__b,.ch__s{max-width:82%; padding:.5em .8em; border-radius:1em; font-size:.94em}
.ch__o{align-self:flex-start; background:#fff; box-shadow:0 0 0 1px var(--cizgi); border-bottom-left-radius:.3em}
.ch__o small{display:block; color:var(--sessiz); font-size:.82em}
.ch__b{align-self:flex-end; background:var(--cobalt); color:#fff; border-bottom-right-radius:.3em}
.ch__s{align-self:flex-end; background:#DCE5F6; color:var(--cobalt); font-weight:500}
.pk{background:#fff; border-radius:1em; padding:.8em .9em; margin-bottom:.6em; box-shadow:0 0 0 1px var(--cizgi), 0 1em 2em -1em rgba(14,18,32,.3); transform:translateY(calc((1 - var(--e,1)) * 1.6em)); opacity:calc(var(--e,1) - var(--x,0))}
.pk__tur{display:flex; align-items:center; gap:.45em; font-weight:500; color:var(--sessiz); font-size:.92em}
.pk__tur i{margin-left:auto; font-style:normal}
.pk__ad{margin-top:.45em; padding:.34em .6em; border-radius:.6em; box-shadow:inset 0 0 0 1px var(--cizgi); font-weight:500}
.pk__bilgi{display:flex; flex-wrap:wrap; gap:.2em 1em; margin-top:.45em; font-size:.94em}
.pk__eylem{display:flex; align-items:center; gap:.9em; margin-top:.55em; font-size:.94em}
.pk__ol{padding:.5em .9em; border-radius:.65em; background:var(--cobalt); color:#fff; font-weight:500}
.ch__yaz{display:flex; align-items:center; gap:.5em; flex:none; min-height:2.8em; padding:.3em .4em .3em .9em; border-radius:1.1em; background:#fff; box-shadow:0 0 0 1.5px var(--cobalt)}
.ch__yaz--bos{box-shadow:0 0 0 1px var(--cizgi); justify-content:flex-end}
.ch__metin{position:relative; flex:1; min-width:0; overflow:hidden; white-space:pre; font-size:.98em; line-height:1.7}
.ch__ortu{position:absolute; left:0; top:0; bottom:0; width:100%; background:#fff; border-left:2px solid var(--cobalt); transform:translateX(calc(var(--y,1) * 100%))}
.ch__yolla{flex:none; width:2.1em; height:2.1em; border-radius:50%; background:var(--cobalt)}
.tok{position:relative; z-index:0; color:color-mix(in srgb,var(--cobalt) calc(var(--t,1) * 100%),var(--ink)); font-weight:500}
.tok::before{content:""; position:absolute; z-index:-1; inset:.14em -.14em; border-radius:.3em; background:#DCE5F6; transform-origin:0 50%; transform:scaleX(var(--t,1))}
/* Pano */
.pn{position:relative; min-width:0; padding:.8em .9em}
.pn__ust{padding-bottom:.6em; font-size:1.15em}
.pn__kolonlar{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.5em; height:calc(100% - 2.6em)}
.pn__kolon{display:flex; flex-direction:column; gap:.45em; padding:.55em .5em; border-radius:.8em; background:#F1ECE6}
.pn__kolon > span{font-size:.84em; font-weight:500; color:#55524D}
.pn__kolon--2{display:none}
.pn__kart{padding:.5em .6em; border-radius:.6em; background:#fff; box-shadow:0 1px 3px rgba(14,18,32,.12); font-size:.92em}
.pn__kart b{display:block; font-weight:500}
.pn__kart small{color:var(--sessiz); font-size:.86em}
.pn__yeni{opacity:var(--l,1)}
.pn__gecen{transform:translateX(calc((1 - var(--e,1)) * var(--dx,-200%)))}
.pn__tost{position:absolute; left:50%; bottom:1.1em; display:flex; align-items:center; gap:.45em; padding:.55em .95em; border-radius:.8em; white-space:nowrap; background:var(--gece); color:var(--linen); font-size:.92em; box-shadow:0 1em 2em -1em rgba(14,18,32,.5); opacity:var(--e,1); transform:translate(-50%,calc((1 - var(--e,1)) * 1em))}
.pc svg{width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
/* Plan */
.pl{position:relative; min-width:0; padding:.8em 1em; overflow:hidden}
.pl__ust{padding-bottom:.5em; font-size:1.3em}
.pl__hat{display:grid; gap:.25em}
.pl__s{display:grid; grid-template-columns:3em 2.9em minmax(0,1fr) 2em; align-items:center; gap:.5em; min-height:4.1em}
.pl__s time{color:var(--sessiz); font-size:.94em}
.pl__d{display:grid; place-items:center; width:2.9em; height:3.4em; border-radius:1.2em; background:#DDE3EF; box-shadow:inset 0 0 0 1.5px #A9BADA}
.pl__s p small{display:block; color:var(--sessiz); font-size:.84em}
.pl__s p em{font-style:normal; padding:0 .42em; border-radius:.3em; background:#F7D9D4; color:var(--berry-koyu); font-weight:500}
.pl__s p b{font-weight:700; font-size:1.08em}
.pl__s p b span{font-weight:400; color:var(--sessiz); font-size:.86em}
.pl__s--bitti p b{text-decoration:line-through; color:var(--sessiz)}
.pl__c{display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; box-shadow:inset 0 0 0 2px #8FA6D2; color:#fff}
.pl__c--dolu{background:var(--cobalt); box-shadow:none}
.pl__c--tik{background:color-mix(in srgb,var(--cobalt) calc(var(--e,1) * 100%),transparent)}
.pl__c--tik path{stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--e,1))}
.pl__bos{margin-left:6.9em; padding:.2em 0; color:var(--sessiz); font-size:.92em}
.pl__bos b{margin-left:.6em; color:var(--cobalt); font-weight:500}
.pl__yeni{opacity:var(--l,1)}
.ucan{display:none}
.imlec{display:none}
.tel{position:absolute; right:1.3em; bottom:.9em; width:12.6em; padding:.9em .8em; border-radius:1.5em; background:#fff; box-shadow:0 0 0 .34em var(--ink), 0 2em 3em -1em rgba(14,18,32,.5); opacity:var(--e,1); transform:translateY(calc((1 - var(--e,1)) * 3em))}
.tel__ust{font-weight:700; padding-bottom:.4em}
.tel__afis{position:relative; width:7.4em; margin:0 auto; box-shadow:0 .5em 1em -.5em rgba(14,18,32,.5)}
.tel__afis > svg{width:100%; height:auto; stroke:none}
.tel__tik{position:absolute; right:-.7em; bottom:-.6em; display:grid; place-items:center; width:2.4em; height:2.4em; border-radius:50%; background:var(--cobalt); color:#fff; transform:scale(var(--e,1))}
.tel__iki{display:grid; grid-template-columns:1fr 1fr; gap:.4em; margin-top:.8em; font-size:.84em}
.tel__iki > *{padding:.5em .3em; border-radius:.55em; text-align:center; box-shadow:inset 0 0 0 1px #D8D2CB}
.tel__ol{background:var(--cobalt); color:#fff; box-shadow:none !important; font-weight:500}
.tel__not{display:flex; gap:.3em; margin-top:.5em; font-size:.8em; opacity:var(--e,1); color:var(--cobalt)}
@container (min-width:560px){ .pn__kolon--2{display:flex} }
@media (min-width:1000px){
  .akis__sahne{gap:72px; padding:64px var(--gutter)}
  .ad{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:48px; align-items:center}
  .ad__yazi h2{font-size:min(7.4vw,13svh)}
  .ad__yazi p{font-size:clamp(19px,1.45vw,26px); line-height:1.35}
  .pc{--f:min(calc(100cqw / 46),calc((100svh - var(--bar) - 96px) / 32)); height:32em}
}
/* Canlı kip: tek sahne, adımlar aynı hücrede */
.akis--canli .akis__sahne{position:sticky; top:var(--bar); height:calc(100svh - var(--bar)); padding:10px var(--gutter) 14px; gap:10px; grid-template-rows:auto auto minmax(0,1fr); align-content:start}
.akis--canli .ad{display:contents}
.akis--canli .ad__yazi,.akis--canli .ad__v{grid-column:1; will-change:transform,opacity}
.akis--canli .ad__yazi{grid-row:2; opacity:0}
.akis--canli .ad__v{grid-row:3; opacity:0; align-self:center}
.akis--canli .akis__adim{grid-row:1; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px}
.akis__adim li{--d:0; font-size:12px; font-weight:500; color:var(--clay)}
.akis__adim i{display:block; height:3px; margin-bottom:3px; border-radius:2px; background:color-mix(in srgb,var(--cobalt) 16%,transparent); overflow:hidden; position:relative}
.akis__adim i::after{content:""; position:absolute; inset:0; background:var(--cobalt); transform-origin:0 50%; transform:scaleX(var(--d))}
.akis--canli .ucan{display:block; position:absolute; z-index:6; margin:0; pointer-events:none; opacity:calc(var(--g,0) - var(--h,0)); transform:translate(calc((1 - var(--f,0)) * var(--dx,0px)),calc((1 - var(--f,0)) * var(--dy,0px))) scale(calc(1 + (var(--sc,1) - 1) * (1 - var(--f,0))))}
.akis--canli .ucan--satir{background:var(--ap); border-radius:.8em; box-shadow:0 1em 2em -1em rgba(14,18,32,.4)}
.akis--canli .imlec{display:block; position:absolute; z-index:8; left:0; top:0; width:1.6em; height:1.6em; margin:-.8em 0 0 -.8em; border-radius:50%; background:rgba(18,68,161,.28); box-shadow:0 0 0 2px #fff, 0 .3em .8em rgba(14,18,32,.35); opacity:calc(var(--g,0) - var(--h,0)); transform:translate(calc(var(--x0,0px) + (var(--x1,0px) - var(--x0,0px)) * var(--m,0)),calc(var(--y0,0px) + (var(--y1,0px) - var(--y0,0px)) * var(--m,0))) scale(calc(1 - sin(var(--b,0) * 3.1416rad) * .28))}
.akis--canli .imlec u{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px rgba(18,68,161,.5); opacity:calc(sin(var(--b,0) * 3.1416rad)); transform:scale(calc(1 + var(--b,0) * 1.6))}
@media (min-width:1000px){
  .akis--canli .akis__sahne{grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto minmax(0,1fr); column-gap:48px; padding:16px var(--gutter) 16px}
  .akis--canli .akis__adim{grid-column:1 / -1; grid-row:1}
  .akis--canli .ad__yazi{grid-column:1; grid-row:2; align-self:center}
  .akis--canli .ad__v{grid-column:2; grid-row:2}
  .akis__adim li{font-size:14px}
}

/* Modüller: fotoğraf bir yarıda, başlık, metin ve cihazlar öbür yarıda; hiçbiri ötekine binmez */
.mod{--z:var(--cobalt); --y:var(--linen); position:relative; background:var(--z); color:var(--y); display:grid}
.mod--keten{--z:var(--linen); --y:var(--ink)}
.mod--alaca{--z:var(--alaca)}
.mod--gece{--z:var(--gece)}
.mod__foto{aspect-ratio:3/2; overflow:hidden; background:color-mix(in srgb,var(--z) 70%,var(--ink))}
.mod__foto img{width:100%; height:100%; object-fit:cover; display:block}
.mod__yazi{padding:24px var(--gutter) 0}
.mod__ad{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font:900 clamp(64px,19vw,96px)/.95 var(--disp)}
.mod__ad .rozet{margin:0}
.mod__ad--orta{font-size:clamp(46px,13vw,76px); line-height:1}
.mod__metin{font-size:19px; margin-top:12px; max-width:56ch}
.maddeler{margin-top:16px; max-width:56ch; display:grid}
.maddeler li{padding:10px 0; border-top:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.mod__durum{margin-top:14px; font-weight:500}
.mod__bag{color:inherit; margin-top:8px}
.mod__v{padding:20px var(--gutter) 36px}
.mod__v > .v{max-width:460px}
.mod__ekran{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:center}
.mod__ekran > .cihaz--masa{flex:1 1 100%; min-width:0}
.mod__ekran > .cihaz--tel{width:44%; max-width:220px}
.mod__ekran > .v{flex:1 1 100%}
.mail-son{padding-top:32px}
@media (min-width:1000px){
  .mod{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; min-height:calc(100svh - var(--bar))}
  .mod__foto{grid-column:1; grid-row:1 / 3; aspect-ratio:3/2; align-self:center}
  .mod:nth-child(even of .mod) .mod__foto{grid-column:2}
  .mod__yazi{grid-column:2; grid-row:1; padding:40px var(--gutter) 0 40px}
  .mod:nth-child(even of .mod) .mod__yazi{grid-column:1; padding-left:var(--gutter); padding-right:40px}
  .mod__v{grid-column:2; grid-row:2; align-self:end; padding:24px var(--gutter) 32px 40px}
  .mod:nth-child(even of .mod) .mod__v{grid-column:1; padding-left:var(--gutter); padding-right:40px}
  .mod__ad{font-size:min(6.4vw,13svh)}
  .mod__ad--orta{font-size:min(4.4vw,10svh)}
  .mod__metin{font-size:20px}
  .mod__ekran{flex-wrap:nowrap}
  .mod__ekran > .cihaz--masa{flex:1 1 0}
  .mod__ekran > .cihaz--tel{flex:none; width:clamp(130px,24%,210px)}
  .mod__ekran > .v{flex:0 0 40%}
  .mod__ekran > .v:only-child{flex:1 1 100%; max-width:520px}
}
@media (min-width:1500px){
  .mod .mod__yazi{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:32px; align-content:start}
  .mod__ad{grid-column:1 / -1}
  .maddeler{grid-column:2; grid-row:2 / span 3; align-self:start}
  .mod__metin,.mod__durum,.mod__bag{grid-column:1}
  .mod__bag{justify-self:start}
}

/* Cihaz çerçeveleri: CSS ile çizilmiş dizüstü ve telefon. Ölçüler çerçevenin genişliğine bağlı (cqw), her boyutta aynı oran. */
.cihaz{container-type:inline-size; margin:0}
.cihaz img{display:block; width:100%; height:auto}
.cihaz--masa{filter:drop-shadow(0 18px 26px rgba(14,18,32,.32))}
.cihaz__kapak{position:relative; margin:0 6cqw; padding:2.3cqw 2.3cqw 2.9cqw; background:#1A1B1E; border-radius:3cqw 3cqw .7cqw .7cqw; box-shadow:inset 0 0 0 .3cqw #45474C, inset 0 0 0 .55cqw #1A1B1E}
.cihaz__kapak::before{content:""; position:absolute; left:50%; top:.85cqw; width:.75cqw; height:.75cqw; margin-left:-.375cqw; border-radius:50%; background:#33363C; box-shadow:inset 0 0 0 .18cqw #23262B}
.cihaz--masa .cihaz__ekran{overflow:hidden; border-radius:.5cqw; background:#F4EFEA}
.cihaz__taban{position:relative; height:2.4cqw; background:linear-gradient(#ECECEE,#C9CACE 45%,#9A9BA0); border-radius:.3cqw .3cqw 3cqw 3cqw / .3cqw .3cqw 2.4cqw 2.4cqw}
.cihaz__taban::before{content:""; position:absolute; left:50%; top:0; width:15cqw; height:.9cqw; margin-left:-7.5cqw; border-radius:0 0 1cqw 1cqw; background:linear-gradient(#A9AAAF,#C4C5C9)}
.cihaz--tel{filter:drop-shadow(0 18px 24px rgba(14,18,32,.36))}
.cihaz__govde{padding:3.4cqw; border-radius:15cqw; background:#16171A; box-shadow:inset 0 0 0 .9cqw #5E6066, inset 0 0 0 1.5cqw #16171A}
.cihaz--tel .cihaz__ekran{position:relative; overflow:hidden; border-radius:11.8cqw; background:var(--ust)}
.cihaz__durum{position:relative; display:flex; align-items:center; justify-content:space-between; height:13cqw; padding:1.4cqw 8cqw 0 11cqw; background:var(--ust); color:#1B1B1F; font:500 4.4cqw/1 Roboto, system-ui, sans-serif; letter-spacing:.01em}
.cihaz__durum::after{content:""; position:absolute; left:50%; top:3.2cqw; width:29cqw; height:8.2cqw; margin-left:-14.5cqw; border-radius:99px; background:#000}
.cihaz__durum svg{width:11cqw; height:auto; fill:currentColor}
.pan__ekran{margin-top:14px}

/* Adımlar */
.adimlar{background:var(--berry); color:var(--beyaz); padding:40px var(--gutter)}
.adimlar .dev{max-width:18ch}
.adimlar ol{display:grid; gap:14px; margin-top:20px}
.adimlar li{display:grid; gap:0; align-content:start}
@media (min-width:560px) and (max-width:759px){ .adimlar ol{grid-template-columns:repeat(2,minmax(0,1fr))} }
.adimlar .cihaz--tel{width:min(62%,220px); justify-self:center; margin-bottom:-28px; position:relative; z-index:1}
.adimlar__yazi{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; background:var(--kagit); color:var(--ink); padding:44px 16px 16px; border-radius:12px; box-shadow:var(--golge)}
.adimlar__no{font:900 56px/.85 var(--disp); color:var(--cobalt)}
.adimlar strong{font-weight:700}
.adimlar__alt{margin-top:24px; background:var(--gece); color:var(--linen); padding:10px 14px; width:fit-content; font-weight:500}
@media (min-width:760px){ .adimlar ol{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1200px){ .adimlar ol{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:48px} .adimlar .cihaz--tel{width:min(74%,220px)} }

/* Kimler */
.kimler{background:var(--cobalt); color:var(--linen); padding:40px var(--gutter)}
.kimler__metin{margin-top:16px; max-width:44ch; font-size:19px}
.kimler__sira{display:grid; gap:10px; margin-top:20px}
.kimler__sira li{display:grid; grid-template-columns:34% minmax(0,1fr); align-items:center; background:var(--kagit); color:var(--ink)}
.kimler__sira figure{aspect-ratio:3/2; overflow:hidden; background:var(--gece)}
.kimler__sira img{width:100%; height:100%; object-fit:cover; display:block}
.kimler__sira div{padding:10px 12px 12px}
.kimler__sira h3{font:900 26px/1 var(--disp); margin-bottom:4px}
.kimler__sira p{font-size:15px}
@media (min-width:1000px){ .kimler__sira{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px} .kimler__sira li{grid-template-columns:1fr} .kimler__sira figure{aspect-ratio:3/2} .kimler__sira div{padding:14px 16px 18px} .kimler__sira h3{font-size:32px} }

/* Fiyat */
.fiyat{background:var(--alaca); color:var(--linen); padding:40px var(--gutter)}
.fiyat__metin{margin-top:16px; font-size:19px; max-width:44ch}
.fiyat__kedi{float:right; width:min(26vw,180px); height:auto; margin:0 0 8px 12px; border-radius:50%}
/* Paketler: üç sütun, başlık kartı ve altında hizalı gruplar. Dönem ve paket seçimi radyo düğmesiyle çalışır, JS gerekmez. */
.paketler{margin-top:24px}
.fp__ust{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px}
.fp__baslik{font:900 clamp(38px,10vw,56px)/1 var(--disp)}
fieldset.fp__donem,fieldset.fp__sec{display:inline-flex; margin:0; padding:3px; min-width:0; border:0; border-radius:12px; background:color-mix(in srgb,var(--linen) 13%,transparent)}
.fp__r{position:absolute; opacity:0; width:1px; height:1px}
.fp__donem label,.fp__sec label{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:10px; font-size:16px; font-weight:500; cursor:pointer}
.fp__r:checked + label{background:var(--linen); color:var(--ink)}
.fp__r:focus-visible + label{outline:3px solid currentColor; outline-offset:2px}
.fp__donem em{font-style:normal; font-size:13px; padding:1px 7px; border-radius:999px; background:var(--berry-koyu); color:var(--beyaz)}
fieldset.fp__sec{display:flex; margin-top:14px}
.fp__sec label{flex:1; justify-content:center}
.fp__izgara{margin-top:14px}
/* Kart: baş bandı pakete göre renklenir (Kişisel açık, Ekip kobalt, Ajans gece); gövde kâğıt renginde */
.fp__kolon{display:none; gap:0; padding-bottom:8px; border-radius:22px; overflow:hidden; background:var(--kagit); color:var(--ink); box-shadow:var(--golge); transition:translate var(--orta) var(--ease),box-shadow var(--orta) var(--ease)}
.paketler:has(#fp-p0:checked) .fp__kolon--0,.paketler:has(#fp-p1:checked) .fp__kolon--1,.paketler:has(#fp-p2:checked) .fp__kolon--2{display:grid}
.fp__kart{display:grid; align-content:start; padding:22px 20px 20px; background:var(--gok-acik); color:var(--ink)}
.fp__kolon--1 .fp__kart{background:var(--cobalt); color:var(--linen)}
.fp__kolon--2 .fp__kart{background:var(--gece); color:var(--linen)}
.fp__kart h4{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font:900 34px/1 var(--disp); color:inherit}
.fp__kart h4 em{padding:3px 9px; border-radius:999px; background:var(--berry); color:var(--beyaz); font:500 13px/1.3 Roboto,sans-serif; font-style:normal; letter-spacing:.01em}
.fp__kim{margin-top:8px; min-height:2.6em; font-size:15.5px; line-height:1.3; color:inherit; opacity:.82}
.fp__tutar{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; margin-top:14px}
.fp__tutar b{font:900 54px/1 var(--disp); font-variant-numeric:lining-nums}
.fp__tutar small{font-size:15px; color:inherit; opacity:.7}
.fp__tutar s{margin-left:auto; font-size:15px; color:inherit; opacity:.7}
.fp__tutar--yil{display:none}
.paketler:has(#fp-yil:checked) .fp__tutar--ay{display:none}
.paketler:has(#fp-yil:checked) .fp__tutar--yil{display:flex}
.fp__cta{display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:16px; border-radius:12px; background:var(--cobalt); color:var(--linen); font-weight:500; text-decoration:none; transition:background-color var(--hizli) var(--ease),color var(--hizli) var(--ease),translate var(--hizli) var(--ease)}
.fp__cta:hover{background:var(--cobalt-koyu); translate:0 -1px}
.fp__kolon--1 .fp__cta,.fp__kolon--2 .fp__cta{background:var(--linen); color:var(--ink)}
.fp__kolon--1 .fp__cta:hover,.fp__kolon--2 .fp__cta:hover{background:var(--beyaz)}
.fp__grup{padding:16px 20px 0}
.fp__etiket{display:flex; align-items:center; gap:6px; font:500 13.5px/1.2 Roboto,sans-serif; color:#5F5B55}
.fp__metrik{margin-top:6px; font-size:18px; font-weight:700}
.fp__metrik em{margin-left:8px; padding:1px 8px; border-radius:999px; background:#DCE5F6; color:var(--cobalt); font:500 13px/1.4 Roboto,sans-serif}
.fp__metrik--kucuk{font-size:16.5px; font-weight:500}
.fp__agac{margin:4px 0 0 7px; border-left:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.fp__agac li{position:relative; padding:3px 0 3px 16px; font-size:15.5px}
.fp__agac li::before{content:""; position:absolute; left:0; top:50%; width:10px; border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.fp__agac li:last-child{background:linear-gradient(var(--kagit),var(--kagit)) 0 100% / 1px 50% no-repeat; margin-left:-1px; padding-left:17px}
.fp__liste{margin-top:4px}
.fp__s{display:grid; grid-template-columns:18px minmax(0,1fr); gap:6px; align-items:start; padding:3px 0; font-size:15.5px; line-height:1.3}
.fp__s svg{color:var(--cobalt); width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fp__s--yok{color:#7A756E}
.fp__s--yok svg{color:#A8A39B}
.fp__diger{margin:12px 20px 0; border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.fp__diger summary{display:flex; align-items:center; justify-content:space-between; min-height:44px; font-size:15.5px; font-weight:500; cursor:pointer; list-style:none}
.fp__diger summary::-webkit-details-marker{display:none}
.fp__diger summary::after{content:"+"; font-size:20px}
.fp__diger[open] summary::after{content:"\2212"}
.fp__diger .fp__liste{margin:0 0 8px}
.fp__mail{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:15.5px}
@media (min-width:760px){
  fieldset.fp__sec{display:none}
  /* Satırlar: baş kartı, altı grup (kişi, Proje, Chat, Plan, Meet, Pano) ve diğer özellikler = 8 */
  .fp__izgara{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(8,auto); column-gap:16px; margin-top:20px}
  .fp__kolon,.paketler:has(#fp-p0:checked) .fp__kolon,.paketler:has(#fp-p1:checked) .fp__kolon,.paketler:has(#fp-p2:checked) .fp__kolon{display:grid; grid-row:span 8; grid-template-rows:subgrid}
  /* Önerilen paket yukarı kaydırılmaz (gruplar üç sütunda hizalı kalır); keten halka ve koyu gölgeyle öne çıkar */
  .fp__kolon--1{box-shadow:0 0 0 3px var(--linen),0 30px 60px -22px rgba(14,18,32,.75)}
}
@media (min-width:1000px){
  .fp__izgara{column-gap:24px}
  .fp__kart{padding:24px 26px 22px}
  .fp__kart h4{font-size:clamp(36px,3vw,48px)}
  .fp__tutar b{font-size:clamp(58px,4.6vw,76px)}
  .fp__grup{padding-left:26px; padding-right:26px}
  .fp__diger{margin-left:26px; margin-right:26px}
}

.fiyat__not{margin-top:20px; font-size:16px; color:var(--dusk-ikincil); max-width:64ch}
.fiyat__eylem{margin-top:20px}
.fiyat--ic{padding-top:8px}

/* SSS */
.sssb{position:relative; background:var(--linen); padding:40px var(--gutter); display:grid; gap:16px}
.sssb .dev{color:var(--cobalt)}
.sssb__kedi{height:120px; width:auto; margin-top:12px}
.sss{max-width:70ch}
.sss details{border-top:1.5px solid var(--ink)}
.sss details:last-child{border-bottom:1.5px solid var(--ink)}
.sss summary{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:12px 0; font-weight:500; cursor:pointer; list-style:none}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+"; flex:none; font-size:24px; font-weight:400; line-height:1; color:var(--cobalt)}
.sss details[open] summary::after{content:"\2212"}
.sss details p{padding-bottom:16px}
.sss a{color:var(--cobalt); font-weight:500}
@media (min-width:1000px){ .sssb{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:48px} .sssb__sol{position:sticky; top:calc(var(--bar) + 24px); align-self:start} .sssb__kedi{height:min(22vw,300px)} }

/* Kapanış */
.kapanis{position:relative; background:var(--berry); color:var(--beyaz); padding:40px var(--gutter); display:grid; gap:16px}
.kapanis__soz{font:900 min(15vw,96px)/.92 var(--disp); hyphens:none; text-wrap:balance}
.kapanis__kedi{justify-self:center; width:min(52vw,420px)}
.kapanis__kagit{background:var(--kagit); color:var(--ink); padding:20px; box-shadow:var(--golge); max-width:520px}
.kapanis__kagit .dugme{margin-top:14px}
.is-k{background:#FFFEFD; color:var(--ink); border-radius:18px; padding:18px 18px 16px; box-shadow:0 1px 0 rgba(14,18,32,.06), 0 18px 36px -18px rgba(14,18,32,.55); width:100%}
.is-k__ust{display:flex; align-items:center; justify-content:space-between; gap:10px}
.is-k__durum{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:8px; background:#E4EAF6; color:var(--cobalt); font-size:14px; font-weight:500}
.is-k__durum::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.is-k__sayac{font-size:14px; color:#5E5A55; font-variant-numeric:tabular-nums}
.is-k__baslik{margin-top:12px; font-size:clamp(21px,1.6vw,26px); font-weight:500; line-height:1.2}
.is-k__meta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:12px; font-size:15px; color:#5E5A55}
.is-k__kim{display:inline-flex; align-items:center; gap:8px}
.is-k__kim i{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#EDE7E0; color:var(--ink); font-style:normal; font-size:12px; font-weight:700}
.is-k__teslim{display:inline-flex; align-items:center; gap:6px; font-weight:500; color:var(--ink)}
.is-k__teslim svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4}
.is-k__liste{margin-top:16px; padding-top:12px; border-top:1px solid #E7E1DA; font-size:14px; font-weight:500; color:#5E5A55}
.is-k__maddeler{display:grid; gap:2px; margin-top:6px}
.is-k__maddeler li{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:17px}
.is-k__maddeler span{flex:none; width:19px; height:19px; border:1.6px solid #B9B2AA; border-radius:5px}
.kapanis__kagit .is-k__dugme{display:flex; justify-content:center; width:100%; margin-top:16px}
.is-k__not{margin-top:10px; font-size:14px; color:#5E5A55}
@media (min-width:1000px){
  .kapanis{grid-template-columns:repeat(12,minmax(0,1fr)); min-height:70svh; align-content:center; column-gap:24px}
  .kapanis__soz{grid-column:1 / 8; grid-row:1; font-size:min(7vw,15svh)}
  .kapanis__kedi{grid-column:8 / 13; grid-row:1 / 3; width:100%; max-width:74svh; align-self:center; justify-self:end}
  .kapanis__kagit{grid-column:1 / 7; grid-row:2}
  .kapanis--kisa{min-height:0}
}

/* Alt bilgi */
.alt{background:var(--gece); color:#C9C6C3; padding:24px var(--gutter) 32px; font-size:15px; flex:none}
.alt__ic{display:flex; flex-wrap:wrap; align-items:center; gap:0 20px}
.alt .marka{color:var(--linen); font-size:18px; --p:var(--berry-acik)}
.alt .marka svg{width:22px; height:22px}
.alt ul{display:flex; flex-wrap:wrap; gap:0 20px}
.alt a:not(.marka){display:inline-flex; align-items:center; min-height:44px; text-underline-offset:3px; text-decoration:none}
.alt a:not(.marka):hover{text-decoration:underline}
.alt__telif{margin-left:auto}
@media (max-width:759px){ .alt__telif{margin-left:0; flex-basis:100%; padding-top:8px} }

/* İç sayfa başı */
.ust{--z:var(--cobalt); --y:var(--linen); background:var(--z); color:var(--y); display:grid}
.ust--berry{--z:var(--berry-koyu); --y:var(--beyaz)}
.ust--alaca{--z:var(--alaca)}
.ust--gece{--z:var(--gece)}
.ust__yazi{padding:32px var(--gutter) 28px; align-self:center}
.ust h1{font:900 min(21vw,110px)/.9 var(--disp); hyphens:none; text-wrap:balance}
.ust--gece h1{font-size:min(17vw,92px)}
.ust__yazi p{margin-top:16px; max-width:52ch; font-size:18px}
.ust__maddeler{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; max-width:48ch; font-size:18px}
.ust__maddeler li{position:relative; padding-left:26px; text-wrap:pretty}
.ust__maddeler li::before{content:''; position:absolute; left:2px; top:.5em; width:10px; height:10px; border-radius:50%; background:currentColor; opacity:.85}
.ust__foto{aspect-ratio:3/2; overflow:hidden; background:var(--gece)}
.ust__foto img{width:100%; height:100%; object-fit:cover; display:block}
.ust__kedi{justify-self:end; width:44vw; margin:0 var(--gutter) 16px}
.ust-alt{padding:0 var(--gutter) var(--bolum); display:grid; gap:12px; justify-items:start}
.ust-alt--alaca{background:var(--alaca); color:var(--linen)} .ust-alt--gece{background:var(--gece); color:var(--linen)} .ust-alt--berry{background:var(--berry-koyu)} .ust-alt--kobalt{background:var(--cobalt); color:var(--linen)}
@media (min-width:1000px){
  .ust{grid-template-columns:repeat(12,minmax(0,1fr)); min-height:min(calc(100svh - var(--bar)),820px)}
  .ust__yazi{grid-column:1 / 8; grid-row:1; padding:48px 32px 48px var(--gutter)}
  .ust h1{font-size:min(7.2vw,16svh)}
  .ust--gece h1{font-size:min(6vw,13svh)}
  .ust__yazi p{font-size:21px; max-width:46ch}
  .ust__maddeler{font-size:21px; gap:14px; max-width:44ch}
  .ust__foto{grid-column:8 / 13; grid-row:1; align-self:center; margin-right:var(--gutter)}
  .ust__kedi{grid-column:8 / 13; grid-row:1; align-self:center; justify-self:center; width:auto; height:min(62svh,520px); margin:24px}
}

/* Düz metin */
.duz{padding:40px var(--gutter) var(--bolum); background:var(--linen)}
.yazi{max-width:65ch}
.yazi h2{font:900 clamp(40px,4.4vw,60px)/1 var(--disp); margin-top:48px; text-wrap:balance}
.yazi h2:first-child{margin-top:0}
.yazi h3{font-size:20px; font-weight:500; margin-top:28px}
.yazi p{margin-top:12px}
.yazi ul:not(.sade){margin-top:12px; padding-left:20px; list-style:disc}
.yazi ul:not(.sade) li{margin-top:4px}
.yazi a:not(.dugme){color:var(--cobalt); font-weight:500; text-underline-offset:4px; text-decoration-thickness:1px}
.yazi a:not(.dugme):hover{text-decoration-thickness:2px}
.sirali{margin-top:16px; counter-reset:adim; max-width:60ch}
.sirali li{counter-increment:adim; display:grid; grid-template-columns:44px 1fr; padding:12px 0; border-top:1.5px solid var(--ink)}
.sirali li::before{content:counter(adim); font:900 32px/1 var(--disp); color:var(--cobalt)}
code{font:inherit; white-space:nowrap}
.guncelleme{margin-top:12px; font-size:15px; color:var(--clay)}
.taslak{display:flex; gap:12px; align-items:flex-start; margin-bottom:32px; padding:16px; border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--ink); font-weight:500; max-width:65ch}
.taslak svg{flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tablo{width:100%; margin-top:16px; border-collapse:collapse; font-size:16px}
.tablo th{text-align:left; font-weight:500; padding:10px 12px 10px 0; border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.tablo td{padding:10px 12px 10px 0; vertical-align:top; border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
@media (max-width:759px){
  .tablo thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .tablo,.tablo tbody,.tablo tr,.tablo td{display:block}
  .tablo tr{padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
  .tablo td{padding:2px 0; border:0}
  .tablo td::before{content:attr(data-b) ": "; color:var(--clay); font-size:15px}
  .tablo td:first-child{font-weight:500}
  .tablo td:first-child::before{content:none}
}
.yardim{padding:40px var(--gutter) var(--bolum); display:grid; gap:32px; background:var(--linen)}
.icindekiler summary{min-height:44px; display:flex; align-items:center; font-weight:500; cursor:pointer}
.icindekiler a,.icindekiler-yan a{display:flex; align-items:center; min-height:44px; text-decoration:none; color:var(--cobalt); font-weight:500; font-size:16px}
.icindekiler a:hover,.icindekiler-yan a:hover{text-decoration:underline; text-underline-offset:4px}
.icindekiler{border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink)}
.icindekiler-yan{display:none}
@media (min-width:1000px){
  .yardim{grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:48px; align-items:start}
  .icindekiler{display:none}
  .icindekiler-yan{display:block; position:sticky; top:96px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; transition-delay:0ms !important}
  html{scroll-behavior:auto}
}

/* Görüntü yazısı: Türkçe büyük harflerin noktası ve şapkası (İ Ş Ğ Ü Ö Ç) ve alt uzantılar için satır aralığı ve üst pay. Küçük giriş satırıyla başlık arasında açık bir boşluk kalır. */
.dev,.nedir h1,.dur__yazi h2,.ad__yazi h2,.mod__ad,.modul4__buyuk,.nedir__bolum h3,.fin__soz,.fin__yan,.dur--giris p:first-child,.kapanis__soz,.fp__baslik{line-height:1.08; padding-top:.08em}
.dur--giris p + p{line-height:1.14}
.dur__cumle{margin-bottom:.35em}
.dur__yazi h2{margin-top:.12em}
.pano--yatay .dur__yazi h2{margin-top:calc(var(--u) * 1.2)}

/* Kimler için: yapışkan bölüm menüsü, karşılaştırma şeridi ve her kitle için fotoğraf, cihazlar ve metin ızgarası. */
.kn{position:sticky; top:var(--bar); z-index:30; background:var(--gece); color:var(--linen); box-shadow:0 1px 0 rgba(244,239,234,.12)}
.kn ul{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1500px; margin:0 auto; padding:0 calc(var(--gutter) - 8px)}
.kn a{display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 4px; color:inherit; text-decoration:none; font-size:15px; font-weight:500; text-align:center; line-height:1.1; border-bottom:3px solid transparent}
.kn a:hover{color:var(--gok-acik)}
.kn a[aria-current]{border-bottom-color:var(--berry-acik)}
.kb,.kk{scroll-margin-top:calc(var(--bar) + 48px)}
.kk{background:var(--linen); color:var(--ink); padding:40px var(--gutter)}
.kk__bas{max-width:62ch}
.kk__baslik{font:900 clamp(40px,11vw,64px)/.98 var(--disp); color:var(--cobalt)}
.kk__bas p{margin-top:12px; font-size:18px}
.kk__liste{display:grid; gap:12px; margin-top:24px}
.kk__kart{--z:var(--cobalt); background:var(--kagit); border-top:6px solid var(--z); border-radius:4px 4px 14px 14px; padding:14px 16px 16px; box-shadow:var(--golge)}
.kk__kart--keten{--z:var(--clay)} .kk__kart--alaca{--z:var(--alaca)} .kk__kart--gece{--z:var(--gece)}
.kk__kart h3{font:900 26px/1 var(--disp)}
.kk__kart h3 a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.kk__kart dl{display:grid; gap:6px; margin-top:12px; font-size:15px}
.kk__kart dl div{display:grid; grid-template-columns:9.5em minmax(0,1fr); gap:8px}
.kk__kart dt{color:var(--clay)}
.kk__kart dd{font-weight:500}

.kb{--z:var(--cobalt); --y:var(--linen); --vurgu:var(--gok-acik); background:var(--z); color:var(--y); display:grid; gap:28px; padding:44px var(--gutter) 52px}
.kb--keten{--z:var(--linen); --y:var(--ink); --vurgu:var(--berry-koyu)}
.kb--alaca{--z:var(--alaca); --vurgu:#F2B8B5}
.kb--gece{--z:var(--gece); --vurgu:var(--cobalt-acik)}
.kb__ust{font-size:15px; font-weight:500; color:var(--vurgu)}
.kb__ad{font:900 clamp(44px,12.4vw,72px)/.95 var(--disp); margin-top:6px; text-wrap:balance; hyphens:none}
.kb__kim{margin-top:12px; font-size:19px; max-width:48ch}
.kb__et{font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--vurgu); margin-top:22px}
.kb__kart .kb__et{color:var(--cobalt); margin-top:0}
.kb__dert{display:grid; gap:0; margin-top:8px; counter-reset:d; max-width:56ch}
.kb__dert li{counter-increment:d; display:grid; grid-template-columns:28px minmax(0,1fr); padding:10px 0; border-top:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.kb__dert li::before{content:counter(d); font:900 20px/1.1 var(--disp); color:var(--vurgu)}
.kb__foto{margin:0; aspect-ratio:3/2; overflow:hidden; border-radius:4px; background:color-mix(in srgb,var(--z) 70%,var(--ink))}
.kb__foto img{width:100%; height:100%; object-fit:cover; display:block}
.kb__ekran{display:flex; gap:14px; align-items:flex-end; justify-content:center; min-width:0}
.kb__ekran > .cihaz--masa{flex:1 1 0; min-width:0}
.kb__ekran > .cihaz--tel{flex:none; width:30%; max-width:200px}
@media (max-width:599px){ .kb__ekran{flex-wrap:wrap} .kb__ekran > .cihaz--masa{flex:1 1 100%} .kb__ekran > .cihaz--tel{width:46%} }
.kb__kart{background:var(--kagit); color:var(--ink); border-radius:16px; padding:20px 18px; box-shadow:var(--golge)}
.kb__alt{font-size:14px; font-weight:500; color:var(--clay); margin-top:16px}
.kb__terim{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px}
.kb__terim div{background:var(--linen); border-radius:10px; padding:8px 10px}
.kb__terim dt{font-size:13px; color:var(--clay)}
.kb__terim dd{font-weight:700; font-size:16px; line-height:1.2; overflow-wrap:anywhere}
.kb__sutun{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.kb__sutun li{font-size:14px; line-height:1.2; padding:6px 10px; border-radius:99px; background:var(--gok-acik); color:var(--cobalt-koyu); font-weight:500}
.kb__modul{display:grid; margin-top:6px}
.kb__modul li{padding:9px 0; border-top:1px solid #E3DDD6; font-size:16px; line-height:1.4}
.kb__modul strong{display:block; font-weight:700}
.kb__gun ol{display:grid; gap:10px; margin-top:10px}
.kb__gun li{background:color-mix(in srgb,var(--y) 9%,var(--z)); border-radius:14px; padding:14px 16px}
.kb__saat{display:flex; align-items:center; gap:10px; font:900 26px/1 var(--disp); color:var(--vurgu)}
.kb__no{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--vurgu); color:var(--z); font:700 14px/1 Roboto,sans-serif}
.kb__gun p{margin-top:8px; font-size:17px}
.kb__fiyat{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:8px}
.kb__fiyat strong{font:900 34px/1 var(--disp)}
.kb__fiyat span{font:900 34px/1 var(--disp); color:var(--cobalt)}
.kb__kdv{font-size:14px; color:var(--clay)}
.kb__not{margin-top:10px; font-size:16px}
.kb__sss .sss{margin-top:6px}
.kb .sss details{border-color:color-mix(in srgb,currentColor 55%,transparent)}
.kb:not(.kb--keten) .sss summary::after{color:var(--vurgu)}
@media (min-width:600px) and (max-width:999px){ .kk__liste{grid-template-columns:repeat(2,minmax(0,1fr))} .kb__gun ol{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){
  .kn a{font-size:16px; min-height:52px}
  .kb,.kk{scroll-margin-top:calc(var(--bar) + 52px)}
  .kk{padding:72px var(--gutter)}
  .kk__bas{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:end; max-width:none}
  .kk__baslik{font-size:clamp(52px,4.6vw,80px)}
  .kk__bas p{margin:0; max-width:52ch; font-size:19px}
  .kk__liste{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:36px}
  .kk__kart dl div{grid-template-columns:1fr; gap:0}
  .kb{grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(28px,3vw,56px); row-gap:48px; padding:80px var(--gutter) 88px}
  .kb > *{min-width:0}
  .kb__bas{grid-column:1 / 7; grid-row:1; align-self:center}
  .kb__foto{grid-column:7 / 13; grid-row:1; align-self:center}
  .kb__ekran{grid-column:1 / 8; grid-row:2; align-self:center; gap:24px}
  .kb__ekran > .cihaz--tel{width:24%}
  .kb__verir{grid-column:8 / 13; grid-row:2 / 4; align-self:start; padding:26px 26px}
  .kb--ters .kb__bas{grid-column:7 / 13}
  .kb--ters .kb__foto{grid-column:1 / 7}
  .kb--ters .kb__ekran{grid-column:6 / 13}
  .kb--ters .kb__verir{grid-column:1 / 6}
  .kb--ters .kb__gun{grid-column:6 / 13}
  .kb__gun{grid-column:1 / 8; grid-row:3; align-self:start}
  .kb__gun ol{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .kb__paket{grid-column:1 / 6; grid-row:4; align-self:start; padding:26px}
  .kb__sss{grid-column:6 / 13; grid-row:4}
  .kb--ters .kb__paket{grid-column:8 / 13}
  .kb--ters .kb__sss{grid-column:1 / 8; grid-row:4}
  .kb__sss .kb__et{margin-top:0}
  .kb__ad{font-size:clamp(56px,5vw,92px)}
  .kb__kim{font-size:21px}
  .kb__dert li{font-size:18px}
}

@media (min-width:1700px){ .kb,.kk{padding-left:max(var(--gutter),calc((100vw - 1600px) / 2)); padding-right:max(var(--gutter),calc((100vw - 1600px) / 2))} }

/* Meet örneği: koyu oda, dört kişi kutusu, bekleme odası satırı */
.v--meet{background:#15181F; color:var(--linen); box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 14px 26px -18px rgba(14,18,32,.8)}
.v--meet .v__ust{border-bottom-color:rgba(255,255,255,.12)}
.v--meet .v__ust span{color:#A9B0BE; font-variant-numeric:tabular-nums}
.v__oda{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px}
.v__kisi{position:relative; aspect-ratio:4/3; display:grid; place-items:center; border-radius:10px; background:#232833; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.v__kisi--konusan{box-shadow:inset 0 0 0 2px var(--cobalt-acik)}
.v__kisi i{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; font:700 16px/1 var(--disp); color:var(--linen); background:hsl(calc(214 + var(--k) * 61) 52% 42%)}
.v__kisi span{position:absolute; left:8px; bottom:6px; font-size:11.5px; color:#DDE2EC; padding:1px 6px; border-radius:6px; background:rgba(14,18,32,.55)}
.v__bekleme{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:8px 10px; border-radius:10px; background:#232833; font-size:13.5px}
.v__bekleme .v__eylem{box-shadow:none; background:var(--cobalt); color:var(--linen); min-height:28px}

/* Pano örneği: kareli tuval, birkaç kart ve oy rozeti */
.v--tuval{background:var(--kagit)}
.v__tuval{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; padding:10px; border-radius:10px; background:#F7F6F3 repeating-linear-gradient(0deg, transparent 0 23px, #E9E6E0 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, #E9E6E0 23px 24px); background-blend-mode:multiply}
.v__yapiskan{padding:10px; min-height:70px; background:#FFE38A; color:var(--ink); font-size:13.5px; line-height:1.3; box-shadow:0 2px 6px -2px rgba(0,0,0,.25); transform:rotate(-1.5deg)}
.v__gorsel{display:grid; grid-template-rows:1fr auto; background:#fff; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.v__gorsel i{display:block; aspect-ratio:3/2; background:linear-gradient(160deg,#0E1220 0%,#2C3550 45%,#C97A4A 100%); border-radius:3px 3px 0 0}
.v__gorsel span{padding:5px 8px; font-size:12px; color:var(--clay)}
.v__renk{display:grid; grid-template-rows:1fr auto; background:#fff; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.v__renk i{display:block; min-height:46px; border-radius:3px 3px 0 0}
.v__renk span{padding:5px 8px; font:600 12px/1.3 ui-monospace,Menlo,monospace}
.v__liste-kart{display:grid; gap:4px; padding:8px 10px; background:#fff; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.12); font-size:12.5px}
.v__liste-kart b{font:600 13px/1.3 var(--disp)}
.v__liste-kart span{display:flex; align-items:center; gap:6px}
.v__liste-kart span::before{content:""; width:11px; height:11px; border-radius:3px; box-shadow:inset 0 0 0 1.5px #B9BCC2}
.v__liste-kart span.is-ok{color:var(--clay); text-decoration:line-through}
.v__liste-kart span.is-ok::before{background:var(--cobalt); box-shadow:none}
.v__oy{position:absolute; right:-6px; top:-8px; padding:3px 8px; border-radius:999px; background:var(--berry); color:#fff; font:700 12px/1.2 Roboto,sans-serif; box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}

/* Toplantı ve pano bölümü: gece zemin, iki kart yan yana */
.birlikte{position:relative; background:var(--gece); color:var(--linen); padding:40px var(--gutter) 56px; display:grid; gap:18px}
.birlikte__baslik{color:var(--linen); max-width:none}
.birlikte__giris{font-size:18px; line-height:1.4; max-width:56ch; color:#CBD2E0}
.birlikte__iki{display:grid; gap:28px; margin-top:8px}
.birlikte__kart{display:grid; gap:12px; align-content:start}
.birlikte__v{margin-bottom:6px}
.birlikte__v > .v{max-width:420px}
.birlikte__ad{display:flex; align-items:center; gap:10px; font:900 clamp(40px,11vw,56px)/1 var(--disp)}
.birlikte__ad .ikon{width:56px; height:56px}
.birlikte__metin{font-size:17px; line-height:1.4; max-width:48ch}
.birlikte__liste{display:grid; max-width:48ch}
.birlikte__liste li{padding:8px 0; border-top:1px solid rgba(244,239,234,.22); font-size:16px}
.birlikte .bag--acik{justify-self:start}
@media (min-width:1000px){
  .birlikte{padding:72px var(--gutter) 88px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px}
  .birlikte__baslik{grid-column:1 / -1; font-size:min(7vw,13svh)}
  .birlikte__giris{grid-column:1 / -1; font-size:20px}
  .birlikte__iki{grid-column:1 / -1; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px; align-items:start}
  .birlikte__kart:first-child .birlikte__v{max-width:440px}
  .birlikte__ad{font-size:clamp(48px,4.2vw,72px)}
  .birlikte__ad .ikon{width:clamp(56px,5vw,80px); height:clamp(56px,5vw,80px)}
  .birlikte__metin{font-size:19px}
}