@font-face{font-family:"Syncopate";src:url(assets/fonts/Syncopate-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:"Syncopate";src:url(assets/fonts/Syncopate-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"Jost";src:url(assets/fonts/Jost.ttf);font-weight:100 900;font-display:swap}
:root{--zemin:#0b0b0b;--yuzey:#141415;--cizgi:#2a2a2b;--metin:#d6d6d6;--ikincil:#9b9b9b;--gumus:#c8c8c8;--kenar:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0}
html{background:var(--zemin);color:var(--metin);-webkit-text-size-adjust:100%;scrollbar-color:#3a3a3b var(--zemin)}
body{font:400 18px/1.65 "Jost",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--gumus);color:var(--zemin)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:1px solid var(--gumus);outline-offset:3px}
h1,h2{font:400 clamp(24px,3.3vw,50px)/1.28 "Syncopate",sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--gumus);text-wrap:balance}
h3{font:400 15px/1.4 "Syncopate",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gumus)}
.ust{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px var(--kenar);mix-blend-mode:difference}
.ust-logo{width:132px;height:auto;display:block}
.ust-link{font-size:15px;color:#ddd;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.ust-link:hover{border-color:#ddd}

.sahne{height:240vh;position:relative}
.sahne-sabit{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--zemin)}
#gl{position:absolute;top:0;right:max(2vw,calc(50vw - 62vh));height:100%;width:auto;aspect-ratio:4/5;display:block;-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,#000 60%,transparent 100%)}
.vuru{position:absolute;left:var(--kenar);top:50%;transform:translateY(-50%);width:min(44vw,640px);opacity:0;pointer-events:none}
.v0{opacity:1}
.yakinda{margin-top:26px;font:400 14px/1 "Syncopate",sans-serif;letter-spacing:.6em;text-transform:uppercase;color:var(--ikincil)}
.asagi{position:absolute;left:50%;bottom:26px;width:1px;height:46px;background:linear-gradient(var(--gumus),transparent);opacity:.6}

.hikaye{padding:clamp(96px,14vw,180px) var(--kenar) 0}
.hikaye-satir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.hikaye-satir+.hikaye-satir{margin-top:clamp(72px,11vw,160px)}
.hikaye-satir.ters{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.hikaye-satir img{width:100%;height:auto;display:block}
.hikaye-satir h2+p{margin-top:32px}
.hikaye-satir p+p{margin-top:18px}
.hikaye-satir p{max-width:44ch}
.hikaye .imza{margin-top:32px;color:var(--gumus)}

.liste{min-height:100vh;display:grid;align-items:center;padding:120px var(--kenar);background:var(--zemin)}
.sutun{width:100%;max-width:640px;margin-inline:auto}
.sutun.genis{max-width:1120px}
.giris{margin-top:26px;color:var(--metin);max-width:52ch}
.nb{white-space:nowrap}
.giris strong{font-weight:400;color:#fff}
form{margin-top:44px}
.alan label{display:block;font-size:15px;color:var(--ikincil);margin-bottom:10px}
.satir{display:flex;border-bottom:1px solid var(--gumus)}
input[type=email]{flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;padding:12px 0;caret-color:var(--gumus);outline-offset:6px}
input::placeholder{color:#8c8c8c}
button{background:none;border:0;color:var(--gumus);font:400 12px/1 "Syncopate",sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:12px 0 12px 20px;cursor:pointer;white-space:nowrap;transition:color .25s,opacity .25s}
button:hover{color:#fff}
button:disabled{opacity:.45;cursor:wait}
.onay{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:15px;line-height:1.5;color:var(--ikincil);cursor:pointer}
.onay input{appearance:none;flex:none;width:18px;height:18px;margin-top:2px;border:1px solid var(--ikincil);background:none;cursor:pointer;display:grid;place-items:center}
.onay input:checked{background:var(--gumus);border-color:var(--gumus)}
.onay input:checked::after{content:"";width:9px;height:5px;border:solid var(--zemin);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translate(1px,-1px)}
.durum{min-height:1.6em;margin-top:18px;font-size:16px;color:var(--metin)}
.durum.hata{color:#e3a8a0}

.ozellik{padding:120px var(--kenar);border-top:1px solid var(--cizgi)}
dl{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,96px)}
dl div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--cizgi)}
dt{color:var(--ikincil)}
dd{margin:0;color:var(--metin);font-variant-numeric:tabular-nums}

.kullanim{padding:120px var(--kenar) 80px;border-top:1px solid var(--cizgi)}
ol{list-style:none;padding:0;margin-top:64px;display:grid;gap:clamp(64px,9vw,128px)}
ol li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:center}
ol li:nth-child(2){grid-template-columns:minmax(0,4fr) minmax(0,5fr)}
ol li:nth-child(2) img{order:2}
ol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 58%;display:block}
ol h3{margin-bottom:14px}
ol p{color:var(--metin);max-width:38ch}
.bakim{margin-top:clamp(72px,10vw,128px);padding-top:32px;border-top:1px solid var(--cizgi);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px}
.bakim p{max-width:62ch;color:var(--metin)}
.alt{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:40px var(--kenar);border-top:1px solid var(--cizgi);font-size:14px;color:var(--ikincil)}
.alt-logo{width:110px;height:auto}

.belge{max-width:680px;margin:0 auto;padding:120px 24px}
.belge h1{font-size:24px;margin-bottom:32px}
.belge h2{font-size:14px;margin:32px 0 10px}
.belge p,.belge li{color:var(--metin)}
.belge ul{padding-left:20px}

.metin-dugme{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:.22em}
.metin-dugme:hover{color:#fff}
.cerez{position:fixed;left:var(--kenar);right:var(--kenar);bottom:20px;z-index:30;margin-inline:auto;max-width:640px;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--yuzey);border:1px solid var(--cizgi);font-size:15px;line-height:1.45}
.cerez[hidden]{display:none}
.cerez div{display:flex;gap:20px;flex:none}
.cerez button{padding:8px 0}
.cerez button:first-child{color:var(--ikincil)}

@media (max-width:820px){
  .cerez{flex-direction:column;align-items:stretch;gap:8px;bottom:12px;left:12px;right:12px}
  .cerez div{justify-content:flex-end}
  body{font-size:17px}
  html{scroll-padding-top:72px}
  .ust{padding-block:16px;mix-blend-mode:normal;background:var(--zemin)}
  .ust-logo{width:112px}
  .vuru{left:var(--kenar);right:var(--kenar);width:auto;top:84px;transform:none}
  .yakinda{margin-top:16px;font-size:12px}
  /* Ürün kalan yüksekliğe sığar, oranı bozulmaz, yazıya binmez */
  #gl{--y:max(calc(100svh - 172px),148vw);top:max(calc(100svh - var(--y)),110px);bottom:auto;right:auto;left:50%;transform:translateX(-50%);height:var(--y);width:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 24%,#000 92%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 24%,#000 92%,transparent);mask-composite:intersect}
  .asagi{display:none}
  .hikaye{padding:88px var(--kenar) 0}
  .hikaye-satir,.hikaye-satir.ters{grid-template-columns:1fr;gap:28px}
  .hikaye-satir img{max-width:84%;margin-inline:auto}
  .hikaye-satir.ters img{order:2;max-width:78%}
  .liste{min-height:0;padding:96px var(--kenar) 72px}
  .ozellik{padding:80px var(--kenar)}
  .kullanim{padding:80px var(--kenar) 64px}
  dl{grid-template-columns:1fr;margin-top:40px}
  dl div{grid-template-columns:96px 1fr;padding:15px 0}
  ol{margin-top:40px;gap:56px}
  ol li,ol li:nth-child(2){grid-template-columns:1fr;gap:22px}
  ol li:nth-child(2) img{order:0}
  .bakim{grid-template-columns:1fr;gap:12px}
  .satir{flex-wrap:wrap;border-bottom:0}
  input[type=email]{flex-basis:100%;border-bottom:1px solid var(--gumus)}
  button{padding:18px 0 8px}
  .alt{flex-direction:column;align-items:flex-start;gap:14px;padding:32px var(--kenar)}
}