:root{
  /* palet filmin kendi zemininden türetildi: sıcak greige + titanyum + anodize altın */
  --bone:#E6DED2;
  --panel:#F2ECE1;
  --ink:#1C1A17;
  --body:#4A453E;
  --titan:#8A8176;
  --rule:#D0C6B7;
  --rule-soft:#DFD7C9;
  --accent:#9C6D26;
  --ok:#356A4F;

  --pad:clamp(20px,4vw,60px);
  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Archivo",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;

  --surface:78%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
/* kayıt yüklenene kadar sayfa kilitli: yarım yüklü kareyle scroll edilmesin */
html.loading{overflow:hidden}
body{
  margin:0;background:var(--bone);color:var(--body);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}

.eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--titan);margin:0 0 18px;
}

/* üst çubuk */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:8;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--pad) var(--pad) 0;pointer-events:none;
}
.mark-group{display:flex;align-items:center;gap:12px;min-width:0}
.brand{
  font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Kurgusal klinik olduğu her ekranda görünsün */
.demo{
  flex:none;pointer-events:auto;cursor:help;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;
  color:var(--titan);border:1px solid var(--rule);
  padding:4px 9px 3px;border-radius:999px;white-space:nowrap;
}
/* dil seçici */
.lang{display:flex;gap:2px;pointer-events:auto}
.lang button{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  background:none;border:0;cursor:pointer;padding:5px 9px;border-radius:999px;
  color:var(--titan);transition:color .2s,background .2s;
}
.lang button:hover{color:var(--ink)}
.lang button[aria-current="true"]{color:var(--ink);background:rgba(28,26,23,.08)}

/* ————— film sahnesi ————— */
.track{height:520vh;position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bone)}
.film{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rig{position:absolute;inset:0;pointer-events:none;z-index:2}
.rig i{position:absolute;display:block;height:1px;background:var(--rule);top:var(--surface)}
.rule-l{left:var(--pad);width:clamp(50px,10vw,130px)}
.rule-r{right:var(--pad);width:clamp(50px,10vw,130px)}

/* teknik künye */
.spec{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  width:166px;font-family:var(--f-mono);z-index:4;
  border-left:1px solid var(--rule);padding-left:18px;
}
.spec-act{font-size:9.5px;letter-spacing:.24em;color:var(--titan);margin-bottom:20px}
.spec-act b{font-weight:500;color:var(--ink)}
.spec dl{margin:0}
.spec dl>div{padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.spec dt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--titan)}
.spec dd{
  margin:3px 0 0;font-size:18px;font-weight:400;font-variant-numeric:tabular-nums;
  color:var(--ink);display:flex;align-items:baseline;gap:4px;
}
.spec dd span{font-size:10px;color:var(--titan)}
.spec-note{
  margin:16px 0 0;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--titan);
}

/* perde metinleri */
.chapters{position:absolute;inset:0;pointer-events:none;z-index:5}
.ch{position:absolute;opacity:0;will-change:transform,opacity;max-width:min(460px,40vw)}
.ch h1,.ch h2{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.0;
  font-size:clamp(38px,5.6vw,74px);margin:0 0 18px;color:var(--ink);text-wrap:balance;
}
.ch h2{font-size:clamp(30px,3.9vw,52px)}
.ch p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.55;max-width:36ch}
.ch1{left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(600px,50vw)}
.ch2{left:var(--pad);bottom:16%}
.ch3{right:calc(var(--pad) + 200px);top:19%}
.ch4{left:var(--pad);bottom:16%}
.lede{margin-top:0}
.hint{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--titan);margin-top:40px !important;display:flex;align-items:center;gap:10px;
}
.hint .arw{display:inline-block;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:1}}

.loader{
  position:absolute;inset:0;z-index:9;background:var(--bone);
  display:grid;place-content:center;gap:14px;justify-items:center;transition:opacity .6s;
}
.loader.done{opacity:0;pointer-events:none}
.loader p{margin:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--titan)}
.loader-bar{width:170px;height:1px;background:var(--rule)}
.loader-bar i{display:block;height:100%;width:0;background:var(--ink)}

/* ————— sayfa ————— */
.page{position:relative;z-index:6;background:var(--bone)}
.band{padding:clamp(72px,10vw,140px) var(--pad)}
.band-alt{background:var(--panel)}
.band-head{max-width:640px;margin:0 0 44px}
.band-h{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(28px,3.6vw,46px);color:var(--ink);margin:0 0 16px;text-wrap:balance;
}
.band-p{margin:0;max-width:60ch}

.tbl{overflow-x:auto;margin-bottom:30px}
.tbl table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.tbl th{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--titan);text-align:left;font-weight:400;padding:0 18px 10px 0;
  border-bottom:1px solid var(--ink);white-space:nowrap;
}
.tbl td{padding:16px 18px 16px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tbl td:first-child{color:var(--ink);font-weight:500}
.num{font-variant-numeric:tabular-nums;font-family:var(--f-mono);color:var(--ink)}

.incl{margin:0;padding:0;list-style:none;max-width:62ch}
.incl li{position:relative;padding-left:24px;margin-bottom:10px}
.incl li::before{content:"";position:absolute;left:2px;top:.7em;width:9px;height:1px;background:var(--accent)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--rule-soft);margin-bottom:30px}
.card{background:var(--bone);padding:28px 26px 30px}
.band-alt .card{background:var(--panel)}
.card h3{
  font-family:var(--f-display);font-weight:600;font-size:24px;color:var(--ink);
  margin:0 0 6px;letter-spacing:-.01em;
}
.card p{margin:0;font-size:15.5px}
.card .role{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--titan);margin:0 0 10px;
}

/* form */
.form{max-width:640px;display:flex;flex-direction:column;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:flex;flex-direction:column;gap:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--titan)}
.form input,.form textarea{
  font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:var(--bone);border:1px solid var(--rule);border-radius:0;
  padding:13px 14px;letter-spacing:0;text-transform:none;
}
.band-alt .form input,.band-alt .form textarea{background:#FFFCF6}
.form input:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}
.form .file input{padding:11px 14px;font-size:14px}
.form button{
  align-self:flex-start;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;background:var(--ink);color:var(--panel);border:0;
  padding:16px 30px;border-radius:999px;cursor:pointer;transition:background .25s;
}
.form button:hover{background:var(--accent)}
.form-note{margin:0;font-size:13.5px;color:var(--titan);text-transform:none;letter-spacing:0;font-family:var(--f-body)}

/* SSS */
.qa{max-width:74ch;border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule-soft)}
.qa summary{
  cursor:pointer;list-style:none;padding:20px 32px 20px 0;position:relative;
  font-family:var(--f-display);font-size:19px;color:var(--ink);font-weight:600;letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:19px;color:var(--titan);font-family:var(--f-mono)}
.qa details[open] summary::after{content:"–"}
.qa p{margin:0 0 22px;max-width:64ch}

.foot{padding:60px var(--pad);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px 30px;align-items:baseline}
.foot-brand{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--ink);margin:0}
.foot p{margin:0;font-size:13px;color:var(--titan)}
.foot-note{max-width:62ch;line-height:1.5}

/* WhatsApp */
.wa{
  position:fixed;right:var(--pad);bottom:24px;z-index:20;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--panel);text-decoration:none;
  padding:15px 24px;border-radius:999px;box-shadow:0 6px 24px rgba(28,26,23,.18);
  transition:background .25s,transform .25s;
}
.wa:hover{background:var(--ok);transform:translateY(-2px)}
.wa-dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:900px){
  .track{height:440vh}
  .spec{
    top:auto;bottom:94px;right:var(--pad);left:var(--pad);transform:none;width:auto;
    border-left:0;border-top:1px solid var(--rule);padding:12px 0 0;
    display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  }
  .spec-act{margin:0;align-self:center}
  .spec dl{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
  .spec dl::-webkit-scrollbar{display:none}
  .spec dl>div{border-bottom:0;padding:0;flex:none}
  .spec dd{font-size:14px;white-space:nowrap}
  .spec dt{white-space:nowrap}
  .spec-note{display:none}
  .demo{font-size:8.5px;letter-spacing:.18em;padding:3px 7px 2px}
  .mark-group{gap:9px}
  .ch,.ch1{max-width:none;left:var(--pad);right:var(--pad);top:auto;bottom:25%;transform:none}
  .ch h1,.ch h2{font-size:clamp(30px,8.6vw,44px);margin-bottom:14px}
  .ch p{max-width:34ch;font-size:14.5px;line-height:1.45}
  .ch .eyebrow{margin-bottom:12px}
  .hint{margin-top:26px !important}
  .row2{grid-template-columns:1fr}
  .wa{left:var(--pad);right:var(--pad);justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hint .arw{animation:none}
}