/* ==========================================================================
   Spinal Mind — temel stiller (yazı tipleri, değişkenler, üst çubuk, menü, omurga sahnesi)
   Marka: zeytin #4F533D · krem #ECE5D8 · Fraunces + Inter (yerel)
   ========================================================================== */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-017E,U+018F,U+0192,U+0193,U+0194,U+0195,U+0196,U+0197,U+0198,U+0199,U+019A,U+019B,U+019C,U+019D,U+019E,U+019F,U+01A0-01A1,U+01A2-01A5,U+01A6-01A9,U+01AA-01AD,U+01AE-01B1,U+01B2-01B3,U+01B4-01B5,U+01B6-01B9,U+01BA-01BB,U+01BC-01BD,U+01BE-01BF,U+01C0-01C3,U+01C4-01C5,U+01C6-01C7,U+01C8-01CA,U+01CB-01CD,U+01CE-01CF,U+01D0-01D3,U+01D4-01D5,U+01D6-01D9,U+01DA-01DB,U+01DC-01DD,U+01DE-01DF,U+01E0-01E4,U+01E5-01E7,U+01E8-01EA,U+01EB-01EC,U+01ED-01EE,U+01EF-01F0,U+01F1-01F2,U+01F3-01F4,U+01F5-01F6,U+01F7-01F8,U+01F9-01FA,U+01FB-01FC,U+01FD-01FE,U+01FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-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:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-ext-wght-italic.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-017E,U+018F,U+0192,U+0193,U+0194,U+0195,U+0196,U+0197,U+0198,U+0199,U+019A,U+019B,U+019C,U+019D,U+019E,U+019F,U+01A0-01A1,U+01A2-01A5,U+01A6-01A9,U+01AA-01AD,U+01AE-01B1,U+01B2-01B3,U+01B4-01B5,U+01B6-01B9,U+01BA-01BB,U+01BC-01BD,U+01BE-01BF,U+01C0-01C3,U+01C4-01C5,U+01C6-01C7,U+01C8-01CA,U+01CB-01CD,U+01CE-01CF,U+01D0-01D3,U+01D4-01D5,U+01D6-01D9,U+01DA-01DB,U+01DC-01DD,U+01DE-01DF,U+01E0-01E4,U+01E5-01E7,U+01E8-01EA,U+01EB-01EC,U+01ED-01EE,U+01EF-01F0,U+01F1-01F2,U+01F3-01F4,U+01F5-01F6,U+01F7-01F8,U+01F9-01FA,U+01FB-01FC,U+01FD-01FE,U+01FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-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:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-var.ttf") format("truetype")}
/* --- Kök değişkenler ------------------------------------------------------ */
:root{
  --zeytin:#4F533D;          /* marka koyu */
  --zeytin-derin:#3E422F;    /* koyu bölümlerin alt tonu (zeytinin gölgesi) */
  --krem:#ECE5D8;            /* marka açık */
  --kart:#E3DACA;            /* kart zemini */
  --vurgu:#97A961;           /* koyu zeminde vurgu */
  --vurgu-koyu:#5F6A3A;      /* krem zeminde vurgu */
  --vurgu-acik:#C8D3A0;      /* koyu zeminde açık vurgu */
  --zeytin-soluk:#5A5F45;    /* krem zeminde ikincil metin (AA) */
  --krem-soluk:#D4CDBF;      /* koyu zeminde ikincil metin (AA) */
  --cizgi:rgba(79,83,61,.16);
  --cizgi-koyu:rgba(236,229,216,.16);
  --kenar:24px;              /* yan boşluk (mobilde 16px) */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --yumusak:cubic-bezier(.22,1,.36,1);
  --vh:1svh;
}
@media (max-width:767px){:root{--kenar:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--krem);color:var(--zeytin);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-feature-settings:"ss01"}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2{margin:0;font-weight:400}
button{font:inherit;color:inherit}
::selection{background:var(--vurgu-acik);color:var(--zeytin)}
.gorsel-gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}

/* Bölüm temaları + Farm Minerals tarzı dikey sütun çizgileri */
section,footer{position:relative}
.koyu{background:var(--zeytin);color:var(--krem)}
.acik{background:var(--krem);color:var(--zeytin)}
.cizgili{background-image:linear-gradient(to right,var(--cizgi) 1px,transparent 1px);
  background-size:20% 100%;background-position:calc(var(--kenar) * 0) 0}
@media (max-width:767px){.cizgili{background-size:50% 100%}}

/* Bölünen metinler: JS yüklenene kadar gizli değil; yüklenince harfler belirir */
.js [data-bol],.js [data-satir]{visibility:hidden}
.bolunmus{visibility:visible!important}
.satir-maske{overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}

/* --- Başlık tipografisi --- */
.bolum-baslik{font-family:var(--serif);font-weight:350;font-size:clamp(34px,4.4vw,72px);line-height:1.02;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.etiket,.menu-etiket{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}

/* --- Hap butonlar (Farm: • REQUEST PRODUCT •) --- */
.hap{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;transition:background .4s var(--yumusak),color .4s var(--yumusak),gap .4s var(--yumusak)}
.hap:hover{gap:16px}
.hap-nokta{width:3px;height:3px;border-radius:50%;background:currentColor;flex:none}
.hap-acik{background:rgba(236,229,216,.12);color:var(--krem);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hap-acik:hover{background:var(--krem);color:var(--zeytin)}
.hap-koyu{background:var(--zeytin);color:var(--krem)}
.hap-koyu:hover{background:var(--vurgu-koyu)}
.hap-cizgi{box-shadow:inset 0 0 0 1px var(--zeytin)}
.hap-cizgi:hover{background:var(--zeytin);color:var(--krem)}

/* ==========================================================================
   AÇILIŞ
   ========================================================================== */
.acilis{position:fixed;inset:0;z-index:100;pointer-events:none}
.acilis-sutunlar{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.acilis-sutunlar i{background:var(--krem);border-right:1px solid var(--cizgi);transform-origin:top}
.acilis-orta{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:18px;color:var(--zeytin)}
.acilis-logo{width:clamp(56px,7vw,92px);height:auto;aspect-ratio:155/355;overflow:visible}
.acilis-iz{color:var(--cizgi)}
.acilis-sayac{font-size:11px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
html:not(.js) .acilis{display:none}
html:not(.js) .not-kart,html:not(.js) .hareket-adim{opacity:1}

/* ==========================================================================
   ÜST ÇUBUK + MENÜ
   ========================================================================== */
.ust{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:16px var(--kenar);color:var(--krem);transition:color .5s var(--yumusak);pointer-events:none}
.ust>*{pointer-events:auto}
body[data-ust="acik"] .ust{color:var(--zeytin)}
body.menu-acik .ust{color:var(--zeytin)}
.menu-dugme{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;cursor:pointer;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;justify-self:start}
.yildiz{width:10px;height:10px;position:relative;transition:transform .6s var(--yumusak)}
.yildiz::before,.yildiz::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:currentColor;border-radius:2px}
.yildiz::before{transform:rotate(45deg)}.yildiz::after{transform:rotate(-45deg)}
.menu-dugme:hover .yildiz,body.menu-acik .yildiz{transform:rotate(90deg)}
.ust-logo{display:grid;justify-items:center;gap:3px;text-decoration:none;font-size:10px;letter-spacing:.06em}
.ust-logo svg{width:12px;height:28px}
.ust-iletisim{justify-self:end;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:4px 0}
.ust-iletisim:hover,.menu-dugme:hover{opacity:.7}

.menu{position:fixed;inset:0;z-index:45;background:var(--krem);color:var(--zeytin);display:grid;grid-template-columns:repeat(5,1fr);
  padding:84px 0 var(--kenar);background-image:linear-gradient(to right,var(--cizgi) 1px,transparent 1px);background-size:20% 100%;
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--yumusak)}
.menu[hidden]{display:grid;visibility:hidden}
body.menu-acik .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu-kolon{display:flex;flex-direction:column;gap:6px;padding:0 var(--kenar);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.menu-kolon a{text-decoration:none;opacity:0;transform:translateY(12px);transition:opacity .6s var(--yumusak),transform .6s var(--yumusak)}
.menu-kolon a:hover{color:var(--vurgu-koyu)}
body.menu-acik .menu-kolon a{opacity:1;transform:none}
body.menu-acik .menu-kolon:nth-child(2) a{transition-delay:.08s}
body.menu-acik .menu-kolon:nth-child(3) a{transition-delay:.16s}
body.menu-acik .menu-kolon:nth-child(4) a{transition-delay:.24s}
.menu-kolon .menu-etiket{margin-bottom:6px}
.menu-sag{grid-column:5;text-align:right;align-items:flex-end}
.menu-buyuk{font-family:var(--serif);font-size:clamp(20px,1.8vw,28px);text-transform:none;letter-spacing:0}
.menu-logo{position:absolute;right:calc(20% + var(--kenar));bottom:var(--kenar);width:clamp(90px,10vw,150px);height:clamp(206px,23vw,344px);color:var(--zeytin);
  transform:translateY(30%);opacity:0;transition:transform 1.1s var(--yumusak),opacity 1.1s var(--yumusak)}
body.menu-acik .menu-logo{transform:none;opacity:1}
@media (max-width:767px){
  .menu{grid-template-columns:1fr;align-content:start;gap:28px;padding-top:80px;background-size:50% 100%}
  .menu-sag{grid-column:auto;text-align:left;align-items:flex-start}
  .menu-logo{right:var(--kenar)}
}

/* ==========================================================================
   OMURGA SAHNESİ (tek WebGL tuvali bu kaplar arasında taşınır)
   ========================================================================== */
.omurga-sahne{position:absolute;inset:0;z-index:1;pointer-events:none}
.omurga-tuval{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.omurga-yedek{display:none;position:absolute;left:50%;top:50%;width:min(16vw,120px);height:min(37vw,276px);transform:translate(-50%,-50%);color:var(--krem);opacity:.9}
body.omurga-yok .omurga-yedek{display:block}
.acik .omurga-yedek{color:var(--zeytin)}