/* ============================================================
   Santim Santim Mardin — tek sayfa
   ============================================================ */

:root{
  --honey:      #c99a5b;
  --honey-lt:   #e8d3b0;
  --stone:      #8a6a3e;
  --terracotta: #a6522c;
  --haze:       #d9c7a8;
  --teal:       #3e6e6a;
  --gold:       #b98b3c;
  --cream:      #f6efe2;
  --night:      #2a2018;
  --ink:        #33271b;

  --accent:     var(--honey);
  --paper:      var(--cream);

  --tape-h: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; }

html,body{ height:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                 /* JS modu: sayfa kaymaz */
}

/* JS yoksa dikey akış + normal scroll */
body:not(.js){ overflow:auto; }
body:not(.js) .reel{ height:auto; }
body:not(.js) .reel__track{ display:block; transform:none !important; }
body:not(.js) .panel{ width:100%; height:100svh; }
body:not(.js) .nav,
body:not(.js) .tape,
body:not(.js) .hint{ display:none; }

/* ---------- wordmark ---------- */
.wordmark{
  position:fixed; top:clamp(14px,3vh,30px); left:clamp(16px,4vw,44px);
  z-index:40; display:flex; flex-direction:column; line-height:1;
  mix-blend-mode:difference; color:#f4ead6;
  pointer-events:none;
}
.wordmark__small{
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  font-weight:500; opacity:.9; padding-left:.2em;
}
.wordmark__big{
  font-family:"Amiri", serif; font-size:clamp(1.5rem,4.4vw,2.4rem);
  letter-spacing:.16em; margin-top:.28em;
}
.dotless{ /* İ görsel hizası */ }

/* ---------- reel ---------- */
.reel{
  position:relative;
  height:calc(100svh - var(--tape-h));
  overflow:hidden;
}
.reel__track{
  display:flex; height:100%;
  transition:transform .85s var(--ease);
  will-change:transform;
}

/* ---------- panel ---------- */
.panel{
  position:relative; flex:0 0 100vw; width:100vw; height:100%;
  overflow:hidden;
}
.panel[data-accent="honey"]      { --accent:var(--honey); }
.panel[data-accent="terracotta"] { --accent:var(--terracotta); }
.panel[data-accent="haze"]       { --accent:#b79a68; }
.panel[data-accent="teal"]       { --accent:var(--teal); }
.panel[data-accent="stone"]      { --accent:var(--stone); }
.panel[data-accent="gold"]       { --accent:var(--gold); }
.panel[data-accent="night"]      { --accent:#c99a5b; }

/* katman 1: SVG silüet + sıcak zemin */
.panel__art{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(255,244,224,.55), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--cream)) 0%,
                            color-mix(in srgb, var(--accent) 42%, #efe3cb) 46%,
                            color-mix(in srgb, var(--accent) 78%, #2a2018) 100%);
}
.panel__art::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:min(72%, 560px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='520' viewBox='0 0 1440 520' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23140e08' fill-opacity='.30'%3E%3Cpath d='M0 520V330h60v-34h44v34h40v-58h30v58h54v-40h40v40h60v-86h20v86h70v-52h44v52h60v-30h40v30h1094v190z'/%3E%3Cpath d='M300 520V250q22-26 44 0v270z M305 244a22 20 0 0 1 40 0z'/%3E%3Cellipse cx='560' cy='300' rx='66' ry='52'/%3E%3Cellipse cx='690' cy='288' rx='78' ry='62'/%3E%3Crect x='486' y='296' width='286' height='224'/%3E%3Cpath d='M1160 520V262q24-30 48 0v258z M1166 256a26 22 0 0 1 40 0z'/%3E%3C/g%3E%3Cg fill='%23140e08' fill-opacity='.5'%3E%3Cpath d='M40 520V360h56v-30h46v30h44v-52h30v52h58v-40h42v40h64v-72h22v72h72v-46h46v46h60v-26h44v26h300v-40h30v40h58v-58h40v58h70v-34h46v34h60v190z'/%3E%3Cpath d='M470 520V270q20-24 40 0v250z M474 264a20 18 0 0 1 34 0z'/%3E%3Cellipse cx='900' cy='330' rx='60' ry='48'/%3E%3Cellipse cx='1010' cy='320' rx='70' ry='56'/%3E%3Crect x='834' y='326' width='250' height='194'/%3E%3Cpath d='M1290 520V300q18-22 36 0v220z M1294 295a18 16 0 0 1 30 0z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:bottom center; background-size:cover;
}

/* katman 2: gerçek fotoğraf (varsa öne geçer) */
.panel__photo{
  position:absolute; inset:0; z-index:2;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity .6s ease;
}
.panel.has-photo .panel__photo{ opacity:1; }

/* okunabilirlik perdesi */
.panel__veil{
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(0deg, rgba(20,14,8,.82) 0%, rgba(20,14,8,.30) 42%, rgba(20,14,8,0) 70%);
}

/* metin */
.panel__body{
  position:absolute; z-index:4; left:0; bottom:0;
  width:min(680px, 100vw);
  padding:0 clamp(16px,6vw,90px) clamp(30px,7vh,70px);
  color:#f7efe2; overflow-wrap:break-word;
}
.panel__body--center{
  left:50%; transform:translateX(-50%);
  width:min(760px,100vw); text-align:center;
  padding-bottom:clamp(40px,12vh,120px);
}
.panel--end .panel__body--center{ top:50%; bottom:auto; transform:translate(-50%,-50%); }

/* kapanış paneli: koyu, davet parlasın */
.panel--end .panel__art{
  background:
    radial-gradient(120% 70% at 50% 24%, rgba(201,154,91,.28), transparent 60%),
    linear-gradient(180deg, #3a2b1b 0%, #241a10 55%, #140d07 100%);
}
.panel--end .panel__art::after{ height:58%; opacity:.55; }
.panel--end .panel__body--center .panel__text{ color:#d8c8ad; }

.panel__tag{
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--honey-lt);
  margin-bottom:.7em;
}
.panel__name{
  font-family:"Amiri", serif; font-weight:700;
  font-size:clamp(2.4rem,8vw,4.8rem); line-height:1.02;
  letter-spacing:.01em; color:#fdf6e8;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.panel__name--end{ font-size:clamp(2.1rem,7vw,4rem); }
.panel__text{
  margin-top:1em; font-size:clamp(1rem,2.5vw,1.18rem);
  color:#efe4d0; max-width:min(52ch, 100%);
}
.panel__body--center .panel__text{ margin-inline:auto; }
.panel__invite{
  margin-top:1.1em; font-family:"Amiri", serif; font-style:italic;
  font-size:clamp(1.15rem,3.4vw,1.6rem); color:#fff;
}
.panel__invite--big{
  font-style:normal; font-size:clamp(2rem,6vw,3.2rem); margin-top:.5em;
  color:var(--honey-lt);
}
.panel__domain{
  margin-top:2.4em; font-size:.82rem; letter-spacing:.32em;
  text-transform:uppercase; color:#cdbb98;
}

/* ---------- nav okları ---------- */
.nav{
  position:fixed; top:calc(50% - var(--tape-h)/2); transform:translateY(-50%);
  z-index:30; width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(20,14,8,.25);
  color:#fff; font-size:1.7rem; line-height:1; cursor:pointer;
  backdrop-filter:blur(4px); transition:background .25s, border-color .25s, opacity .3s;
  display:grid; place-items:center;
}
.nav:hover{ background:rgba(20,14,8,.55); border-color:#fff; }
.nav--prev{ left:clamp(10px,2.5vw,28px); }
.nav--next{ right:clamp(10px,2.5vw,28px); }
.nav[disabled]{ opacity:.2; pointer-events:none; }

/* ---------- hint ---------- */
.hint{
  position:fixed; left:50%; bottom:calc(var(--tape-h) + 16px);
  transform:translateX(-50%); z-index:30;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:#f4ead6; mix-blend-mode:difference;
  transition:opacity .5s;
}
.hint.gone{ opacity:0; }

/* ---------- mezura ---------- */
.tape{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  height:var(--tape-h);
  background:linear-gradient(180deg,#f0e4c9,#e3d2ab);
  border-top:2px solid var(--stone);
  overflow:hidden;
  font-family:"Karla", sans-serif;
}
.tape__viewport{ position:absolute; inset:0; overflow:hidden; }
.tape__scale{
  position:absolute; top:0; left:0; height:100%;
  transition:transform .85s var(--ease);
  will-change:transform;
}
.tape__tick{
  position:absolute; top:0; width:1px; background:var(--stone);
}
.tape__tick--minor{ height:12px; opacity:.5; }
.tape__tick--major{ height:22px; opacity:.9; }
.tape__num{
  position:absolute; top:24px; font-size:.66rem; color:var(--stone);
  transform:translateX(-50%); letter-spacing:.05em;
}
.tape__label{
  position:absolute; bottom:8px; transform:translateX(-50%);
  font-family:"Amiri", serif; font-size:.8rem; white-space:nowrap;
  color:var(--night); opacity:.35; transition:opacity .4s, color .4s;
}
.tape__label.active{ opacity:1; color:var(--terracotta); font-weight:700; }

.tape__marker{
  position:absolute; left:50%; top:0; bottom:0; width:2px; z-index:3;
  background:var(--terracotta); transform:translateX(-50%);
}
.tape__marker::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:8px solid var(--terracotta);
}
.tape__count{
  position:absolute; right:clamp(12px,3vw,32px); top:50%; transform:translateY(-50%);
  z-index:4; font-family:"Amiri",serif; font-size:1.15rem; color:var(--night);
  background:rgba(240,228,201,.85); padding:2px 10px; border-radius:3px;
}
.tape__sep{ margin:0 .3em; opacity:.5; }

/* ---------- erişilebilirlik ---------- */
@media (prefers-reduced-motion: reduce){
  .reel__track, .tape__scale, .panel__photo{ transition:none; }
}

@media (max-width:640px){
  :root{ --tape-h:64px; }
  .wordmark__small{ font-size:.62rem; letter-spacing:.34em; }
  .nav{ width:42px; height:42px; font-size:1.3rem; }
  .nav--prev{ left:8px; } .nav--next{ right:8px; }
  .panel__body{ width:100vw; padding-left:22px; padding-right:22px; }
  .panel__body--center{ width:100vw; padding-left:22px; padding-right:22px; }
  .panel__name{ font-size:clamp(2rem,10.5vw,3rem); }
  .panel__text{ font-size:1rem; max-width:100%; }
  .tape__count{ font-size:1rem; }
  .tape__label{ font-size:.72rem; }
  .hint{ display:none; }
}