:root{--paper:#f3eee3;--paper2:#e9e2d2;--ink:#15130f;--mut:#6b6556;--sig:#ff4b1f;--moss:#1f3d2b;--line:#15130f;--yel:#f5d547}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:clamp(16px,1.2vw + 11px,18px)/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
:root{--g:clamp(16px,4.5vw,40px);--sec:clamp(48px,9vw,104px);--navh:clamp(54px,7vw,64px)}
html{-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--g)}

/* nav */
nav{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:2px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--navh)}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:clamp(19px,2.4vw,22px);letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.logo img{width:clamp(26px,3vw,30px);height:auto;aspect-ratio:1}
nav a.l{text-decoration:none;margin-left:clamp(14px,2.4vw,26px);font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
nav a.l:hover{color:var(--sig)}
.nav-r{display:flex;align-items:center}
.lang{display:inline-flex;margin-left:clamp(12px,2vw,22px);border:2px solid var(--line);font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;line-height:1}
.lang a,.lang span{padding:7px 10px;text-decoration:none;color:var(--ink)}
.lang span{background:var(--ink);color:var(--paper)}
.lang a:hover{background:var(--yel)}

/* hero: kap (container) — yerleşim pencereye değil kabın genişliğine göre */
.hero{border-bottom:2px solid var(--line);position:relative;overflow:hidden;container-type:inline-size;display:flex;align-items:center;
  min-height:clamp(520px,calc(100svh - var(--navh) - 52px),900px)}
.topo{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:center;padding-block:clamp(36px,7vw,88px)}
@container (min-width:860px){.hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.tag{display:inline-block;background:var(--ink);color:var(--paper);padding:5px 10px;margin-bottom:clamp(16px,2.5vw,26px)}
h1{font-size:clamp(2.5rem,9.2vw + .3rem,7rem);line-height:.92;letter-spacing:-.055em;font-weight:900;overflow-wrap:break-word}
h1 .u{color:var(--sig);display:inline-block;transform:translateY(-.06em)}
h1 .brand{white-space:nowrap}
h1 s{text-decoration:none;background:linear-gradient(transparent 62%,var(--yel) 62% 92%,transparent 92%)}
.lead{font-size:clamp(17px,1.4vw + 12px,21px);max-width:34em;margin:clamp(18px,3vw,30px) 0}
.lead b{background:var(--yel);padding:0 3px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 22px;font-weight:800;text-decoration:none;border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);background:#fff}
.btn.p{background:var(--sig);color:#fff}
.btn.dis{cursor:default}
@media(max-width:480px){.cta{flex-direction:column;gap:14px}.btn{text-align:center;padding:13px 16px}}

/* rota kartı */
.route{background:var(--moss);color:var(--paper);border:2px solid var(--line);box-shadow:8px 8px 0 var(--line);padding:clamp(16px,2.4vw,24px);transform:rotate(1.2deg);width:100%;max-width:520px;justify-self:center}
@container (max-width:859px){.route{transform:none;max-width:none;box-shadow:5px 5px 0 var(--line)}}
.route .mono{opacity:.75}
.route svg{display:block;width:100%;height:auto;margin:10px 0 6px}
.route .dlg{margin-top:12px;border-top:1px dashed rgba(243,238,227,.4);padding-top:12px;font-size:clamp(14px,1.1vw + 9px,16px)}
.route .dlg p{margin-bottom:8px}
.route .dlg .you{color:var(--yel)}
.route .wave{display:flex;gap:3px;align-items:flex-end;height:30px;margin-top:10px}
.route .wave i{display:block;width:5px;background:var(--sig);animation:w 1.1s ease-in-out infinite}
@keyframes w{0%,100%{height:6px}50%{height:28px}}
.route .wave i:nth-child(2n){animation-delay:.15s;background:var(--yel)}
.route .wave i:nth-child(3n){animation-delay:.3s}

/* kayan şerit */
.strip{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--line)}
.strip div{display:inline-block;padding:13px 0;animation:m 60s linear infinite}
.strip span{margin:0 clamp(14px,2vw,22px)}.strip span.d{color:var(--sig)}
@keyframes m{to{transform:translateX(-50%)}}

/* bölümler */
section{padding-block:var(--sec);border-bottom:2px solid var(--line)}
.eyebrow{color:var(--sig);margin-bottom:12px}
h2{font-size:clamp(2rem,5.4vw + .4rem,4.25rem);line-height:.96;letter-spacing:-.045em;font-weight:900;max-width:15em;overflow-wrap:break-word}
.sub{color:var(--mut);max-width:34em;margin:18px 0 clamp(26px,5vw,44px);font-size:clamp(16px,1vw + 12px,18px)}
section .wrap{container-type:inline-size}

.feat{display:grid;grid-template-columns:minmax(0,1fr);border:2px solid var(--line);background:#fff}
.feat article{padding:clamp(20px,3vw,30px);border-bottom:2px solid var(--line)}
.feat article:last-child{border-bottom:0}
.feat article:nth-child(1){background:var(--yel)}
.feat article:nth-child(3){background:var(--paper2)}
.feat article:nth-child(4){background:var(--ink);color:var(--paper)}
.feat .n{font-family:ui-monospace,Menlo,monospace;font-size:13px;margin-bottom:clamp(20px,3vw,34px);display:block}
.feat h3{font-size:clamp(23px,2vw + 14px,30px);line-height:1;letter-spacing:-.04em;font-weight:900;margin-bottom:10px}
.feat p{max-width:26em}
@container (min-width:720px){
  .feat{grid-template-columns:repeat(12,minmax(0,1fr))}
  .feat article{border-right:2px solid var(--line)}
  .feat article:nth-child(1){grid-column:span 7}
  .feat article:nth-child(2){grid-column:span 5;border-right:0}
  .feat article:nth-child(3){grid-column:span 5;border-bottom:0}
  .feat article:nth-child(4){grid-column:span 7;border-right:0;border-bottom:0}
}

.steps{display:grid;grid-template-columns:minmax(0,1fr);border:2px solid var(--line)}
.steps div{padding:clamp(20px,3vw,28px) clamp(18px,3vw,26px) clamp(24px,3vw,34px);border-bottom:2px solid var(--line);position:relative;background:#fff}
.steps div:last-child{border-bottom:0;background:var(--sig);color:#fff}
.steps b{display:block;font-size:clamp(26px,2.4vw + 14px,34px);line-height:1;letter-spacing:-.04em;font-weight:900;margin:clamp(36px,5vw,44px) 0 10px}
.steps .mono{position:absolute;top:clamp(16px,2.5vw,22px);left:clamp(18px,3vw,26px)}
@container (min-width:720px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps div{border-bottom:0;border-right:2px solid var(--line)}
  .steps div:last-child{border-right:0}
}

.band{background:var(--sig);color:#fff}
.band h2{color:#fff}
.band .sub{color:#fff3ee}
.band .btn{color:var(--ink)}

.faq{border-top:2px solid var(--line)}
.faq details{border-bottom:2px solid var(--line);padding:clamp(14px,2vw,20px) 0}
.faq summary{cursor:pointer;font-size:clamp(18px,1.6vw + 12px,24px);font-weight:900;letter-spacing:-.03em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--sig)}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--mut);max-width:38em;margin-top:10px}

footer{padding:34px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:700px){nav a.l{display:none}footer .wrap{flex-direction:column}}
@media(max-height:520px) and (orientation:landscape){.hero{min-height:0}}

/* iç sayfalar */
.doc{padding:clamp(32px,6vw,56px) var(--g);max-width:780px}
.doc h1{font-size:clamp(40px,7vw,64px);line-height:.95;letter-spacing:-.045em;margin-bottom:18px}
.doc h2{font-size:24px;letter-spacing:-.03em;margin:30px 0 8px}
.doc p,.doc li{margin-bottom:8px}
.doc ul{padding-left:22px}
.note{background:var(--yel);border:2px solid var(--line);padding:12px 14px;font-size:15px;margin-bottom:22px}

@media(prefers-reduced-motion:reduce){.strip div,.route .wave i{animation:none}}