/* ==========================================================================
   İpeksi Baby — temel katman: tokenlar, tipografi, düzen, bileşenler, hareket
   ========================================================================== */

/* ---------- 1. Tokenlar ---------- */
:root{
  --espresso:#2A1D14;
  --kakao:#43301F;
  --kahve:#6F4E37;
  --karamel:#A9784F;
  --bronz:#C69C6D;
  --altin:#C9A227;
  --bej:#E7D7BE;
  --bej-acik:#F1E5D2;
  --krem:#F9F3E9;
  --kagit:#FDFAF4;
  --beyaz:#FFFFFF;

  --ink:#2A1D14;
  --ink-2:#5B4632;
  --ink-3:#8A7357;
  --cizgi:rgba(111,78,55,.18);
  --cizgi-2:rgba(111,78,55,.10);

  --grad-sicak:linear-gradient(135deg,#6F4E37 0%,#A9784F 45%,#D9BF9B 100%);
  --grad-altin:linear-gradient(120deg,#8A5F3C 0%,#C9A227 50%,#E7D7BE 100%);
  --grad-krem:linear-gradient(160deg,#FDFAF4 0%,#F1E5D2 60%,#E7D7BE 100%);
  --grad-metin:linear-gradient(100deg,#6F4E37,#A9784F 40%,#C9A227 75%,#8A5F3C);

  --golge-s:0 1px 1px rgba(42,29,20,.05), 0 3px 8px rgba(42,29,20,.045);
  --golge-m:0 1px 2px rgba(42,29,20,.06), 0 10px 26px rgba(42,29,20,.075);
  --golge-l:0 4px 14px rgba(42,29,20,.08), 0 26px 60px rgba(42,29,20,.12);

  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --en:1180px;
  --ust:72px;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
    "Hoefler Text",Georgia,"Times New Roman",serif;

  --ok:cubic-bezier(.22,.61,.36,1);
  --yay:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--kagit); color:var(--ink);
  font:400 17px/1.7 "Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  /* clip: yatay taşmayı keser ama kaydırma kabı oluşturmaz — position:sticky çalışmaya devam eder */
  overflow-x:clip;
}
@supports not (overflow-x: clip){ html,body{overflow-x:hidden} }
body::before{ /* sayfanın tamamına yayılan sıcak zemin dokusu */
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 620px at 12% -6%, rgba(201,162,39,.13), transparent 62%),
    radial-gradient(900px 600px at 92% 8%, rgba(169,120,79,.16), transparent 60%),
    radial-gradient(1100px 700px at 50% 108%, rgba(111,78,55,.14), transparent 62%),
    var(--kagit);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:var(--bronz); color:#fff}

h1,h2,h3,h4{
  margin:0 0 .5em; font-family:var(--serif); font-weight:600;
  line-height:1.14; letter-spacing:-.012em;
}
h1{font-size:clamp(2.35rem,5.4vw,4rem); line-height:1.08}
h2{font-size:clamp(1.8rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.18rem,1.8vw,1.45rem); letter-spacing:-.006em}
h4{font-size:1.05rem}
/* Vurgu kelimesi: serif italik — gradyan yerine */
.vurgu{font-style:italic; color:var(--kahve)}
.vurgu-alt{
  position:relative; display:inline-block; width:fit-content;
  font-style:italic; color:var(--kahve);
}
.vurgu-alt::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.30em;
  background:linear-gradient(90deg,rgba(198,156,109,.42),rgba(198,156,109,.16));
  border-radius:.2em; z-index:-1;
}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.5vw,1.24rem); color:var(--ink-2); line-height:1.75}
.kucuk{font-size:.92rem; color:var(--ink-3)}

/* Dokuma dokusu — yüzeylere çok hafif bir örgü izi bırakır */
.doku{position:relative}
.doku::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(90deg, rgba(111,78,55,.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(111,78,55,.045) 0 1px, transparent 1px 4px);
}

/* ---------- 2. Düzen ---------- */
.wrap{width:min(100% - 40px, var(--en)); margin-inline:auto}
.wrap-genis{width:min(100% - 40px, 1420px); margin-inline:auto}
section{position:relative}
.blok{padding:clamp(64px,9vw,128px) 0}
.blok--sik{padding:clamp(44px,6vw,80px) 0}
.orta{text-align:center}
.izgara{display:grid; gap:clamp(18px,2.4vw,30px)}
.iz-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.iz-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.iz-4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}

.baslik-ust{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--karamel);
}
.baslik-ust::before{content:""; width:26px; height:1px; background:currentColor; opacity:.55}
.orta .baslik-ust::after{content:""; width:26px; height:1px; background:currentColor; opacity:.55}

/* ---------- 3. Düğmeler ---------- */
.dugme{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:999px; border:0; cursor:pointer;
  font-weight:600; font-size:.96rem; letter-spacing:.005em;
  color:#fff; background:linear-gradient(135deg,#7B573D,#6F4E37 60%,#5C4130); background-size:180% 100%;
  box-shadow:0 6px 16px rgba(111,78,55,.24);
  transition:transform .35s var(--yay), box-shadow .35s var(--ok), background-position .6s var(--ok);
  overflow:hidden; isolation:isolate;
}
.dugme::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.42),transparent 80%);
  transform:translateX(-120%); transition:opacity .2s;
}
.dugme:hover{transform:translateY(-2px); background-position:100% 50%; box-shadow:0 10px 24px rgba(111,78,55,.32)}
.dugme:hover::after{opacity:1; animation:parla .9s var(--ok)}
@keyframes parla{to{transform:translateX(120%)}}
.dugme--hat{background:transparent; color:var(--kahve); box-shadow:inset 0 0 0 1.6px var(--cizgi)}
.dugme--hat:hover{color:#fff; background:var(--grad-sicak); box-shadow:0 14px 30px rgba(111,78,55,.3)}
.dugme--bl{background:#fff; color:var(--kahve); box-shadow:var(--golge-m)}
.dugme-sira{display:flex; flex-wrap:wrap; gap:14px}
.orta .dugme-sira{justify-content:center}

/* ---------- 4. Kartlar ---------- */
.kart{
  position:relative; background:rgba(255,255,255,.82);
  border:1px solid var(--cizgi-2); border-radius:var(--r-l); padding:32px 30px;
  box-shadow:var(--golge-s); overflow:hidden;
  transition:transform .5s var(--ok), box-shadow .5s var(--ok), border-color .5s;
}
.kart::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%), rgba(201,162,39,.16), transparent 65%);
  transition:opacity .45s;
}
.kart:hover{transform:translateY(-8px); box-shadow:var(--golge-l); border-color:rgba(169,120,79,.3)}
.kart:hover::before{opacity:1}
.kart__ikon{
  display:flex; align-items:center; margin-bottom:22px; padding-bottom:18px;
  color:var(--kahve); border-bottom:1px solid var(--cizgi-2);
  transition:color .45s var(--ok), border-color .45s var(--ok);
}
.kart__ikon svg{width:34px; height:34px; display:block}
.kart:hover .kart__ikon{color:var(--karamel); border-color:rgba(169,120,79,.32)}
/* çizgi ikon ortak biçimi */
.ikon{fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round}
.kart h3{margin-bottom:.35em}
.kart p{margin:0; color:var(--ink-2); font-size:.98rem}

/* ---------- 5. Rozet & etiket ---------- */
.rozet{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.6); border:1px dashed rgba(111,78,55,.34);
  font-size:.8rem; font-weight:600; color:var(--kahve); letter-spacing:.01em;
}
.rozet svg{width:17px; height:17px; flex:0 0 auto; opacity:.9; stroke-width:1.75}
.etiket{
  display:inline-block; padding:4px 11px; border-radius:999px; font-size:.74rem; font-weight:700;
  background:var(--bej-acik); color:var(--kakao); letter-spacing:.02em;
}

/* ---------- 6. Üst menü ---------- */
.ust{
  position:fixed; inset:0 0 auto; z-index:90; height:var(--ust);
  display:flex; align-items:center;
  background:rgba(253,250,244,.72); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .4s, background .4s, height .4s;
}
.ust.kaydi{border-bottom-color:var(--cizgi-2); background:rgba(253,250,244,.9)}
.ust__ic{width:min(100% - 32px,1420px); margin-inline:auto; display:flex; align-items:center; gap:20px}
.ust__logo{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.ust__logo img{height:34px; width:auto; transition:transform .5s var(--yay)}
.ust__logo:hover img{transform:scale(1.06) rotate(-2deg)}
.ust__menu{display:flex; gap:4px; margin-left:auto}
.ust__menu a{
  position:relative; padding:9px 14px; border-radius:999px; font-size:.95rem; font-weight:600;
  color:var(--ink-2); transition:color .3s, background .3s;
}
.ust__menu a::after{
  content:""; position:absolute; left:50%; bottom:4px; width:0; height:2px; border-radius:2px;
  background:var(--grad-sicak); transform:translateX(-50%); transition:width .4s var(--ok);
}
.ust__menu a:hover{color:var(--kahve)}
.ust__menu a:hover::after{width:22px}
.ust__menu a.aktif{color:var(--kahve); background:rgba(231,215,190,.5)}
.ust__menu a.aktif::after{width:22px}
.ust__cta{flex:0 0 auto}
.ust__ac{
  display:none; width:44px; height:40px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; align-items:center;
}
.ust__ac i{display:block; width:22px; height:2px; border-radius:2px; background:var(--kahve); transition:transform .4s var(--ok), opacity .3s}
.ust__ac[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.ust__ac[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}

.sayfa-menu{
  position:fixed; inset:var(--ust) 0 auto; z-index:89; background:rgba(253,250,244,.98);
  backdrop-filter:blur(16px); border-bottom:1px solid var(--cizgi-2);
  max-height:0; overflow:hidden; transition:max-height .5s var(--ok);
}
.sayfa-menu.acik{max-height:80vh}
.sayfa-menu .wrap{display:flex; flex-direction:column; padding:14px 0 24px}
.sayfa-menu a{padding:13px 4px; font-weight:600; border-bottom:1px solid var(--cizgi-2)}
.sayfa-menu a:last-child{border:0}

@media (max-width:900px){
  .ust__menu{display:none}
  .ust__cta{display:none}
  .ust__ac{display:flex; margin-left:auto}
}

/* İlerleme çubuğu */
.ilerleme{position:fixed; top:0; left:0; height:3px; z-index:100; width:0;
  background:var(--grad-altin); box-shadow:0 0 12px rgba(201,162,39,.6)}

/* ---------- 7. Alt bilgi ---------- */
.alt{position:relative; margin-top:60px; color:#EADFCC; background:var(--espresso); overflow:hidden}
.alt::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 380px at 10% 0%, rgba(201,162,39,.2), transparent 60%),
             radial-gradient(700px 420px at 90% 100%, rgba(169,120,79,.28), transparent 62%);
}
.alt__ic{position:relative; display:grid; gap:38px; grid-template-columns:1.3fr 1fr 1fr 1.1fr; padding:70px 0 34px}
.alt h4{color:#fff; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px}
.alt a{color:#D8C7AC; transition:color .3s, transform .3s; display:inline-block}
.alt a:hover{color:#fff; transform:translateX(3px)}
.alt ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.95rem}
.alt__logo img{height:44px; filter:brightness(0) invert(1) sepia(.4) saturate(3) hue-rotate(-8deg); opacity:.95}
.alt__slogan{margin-top:16px; font-size:.95rem; color:#C9B79A; max-width:34ch}
.alt__son{position:relative; border-top:1px solid rgba(255,255,255,.12); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.86rem; color:#B7A488}
@media (max-width:900px){ .alt__ic{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .alt__ic{grid-template-columns:1fr} }

/* ---------- 8. Hareket yardımcıları ---------- */
/* JavaScript kapalıysa hiçbir içerik gizli kalmaz */
html:not(.js) [data-goster],
html:not(.js) .harfler span{opacity:1 !important; transform:none !important; filter:none !important}
html:not(.js) .maske::after{transform:scaleX(0) !important}
html:not(.js) .maske img{transform:none !important}

[data-goster]{opacity:0; will-change:transform,opacity}
[data-goster="yukari"]{transform:translateY(38px)}
[data-goster="asagi"]{transform:translateY(-30px)}
[data-goster="sol"]{transform:translateX(-42px)}
[data-goster="sag"]{transform:translateX(42px)}
[data-goster="olcek"]{transform:scale(.9)}
[data-goster="bulanik"]{filter:blur(14px); transform:translateY(20px)}
[data-goster="dondur"]{transform:rotate(-6deg) translateY(30px)}
[data-goster].gorundu{
  opacity:1; transform:none; filter:none;
  transition:opacity .9s var(--ok), transform 1s var(--ok), filter .9s var(--ok);
  transition-delay:var(--gecikme,0ms);
}

/* maskeli görsel açılışı */
.maske{position:relative; overflow:hidden; border-radius:var(--r-l)}
.maske::after{
  content:""; position:absolute; inset:0; background:var(--grad-sicak); transform-origin:right;
  transition:transform 1.05s var(--ok); transition-delay:var(--gecikme,0ms);
}
.maske.gorundu::after{transform:scaleX(0)}
.maske img{transform:scale(1.14); transition:transform 1.6s var(--ok); transition-delay:var(--gecikme,0ms)}
.maske.gorundu img{transform:scale(1)}

/* harf harf açılan başlık */
.harfler .kelime{display:inline-block; white-space:nowrap}
.harfler .kelime span{display:inline-block; opacity:0; transform:translateY(.6em) rotate(6deg)}
.harfler.gorundu .kelime span{
  opacity:1; transform:none;
  transition:opacity .6s var(--ok), transform .75s var(--yay);
  transition-delay:calc(var(--i) * 26ms);
}

/* sayaç */
.sayac{font-variant-numeric:tabular-nums}

/* yüzen pamuk zerreleri */
.zerreler{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.zerre{
  position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,rgba(231,215,190,.5));
  box-shadow:0 0 16px rgba(231,215,190,.55); opacity:.32;
  animation:yuz var(--sure,22s) linear infinite; animation-delay:var(--bekle,0s);
}
@keyframes yuz{
  0%{transform:translate3d(0,110%,0) scale(.7); opacity:0}
  12%{opacity:.55}
  85%{opacity:.4}
  100%{transform:translate3d(var(--kay,30px),-20%,0) scale(1.1); opacity:0}
}

/* kayan şerit */
.serit{overflow:hidden; padding:15px 0; border-block:1px solid var(--cizgi-2); background:transparent}
.serit__ic{display:flex; gap:44px; width:max-content; animation:kay 32s linear infinite}
.serit:hover .serit__ic{animation-play-state:paused}
.serit span{display:inline-flex; align-items:center; gap:26px; font-weight:600; color:var(--ink-2);
  letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; white-space:nowrap}
.serit span::after{content:""; width:1px; height:11px; background:var(--bronz); opacity:.55}
@keyframes kay{to{transform:translateX(-50%)}}

/* dalga ayırıcı */
.dalga{display:block; width:100%; height:auto; margin-bottom:-6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  [data-goster]{opacity:1 !important; transform:none !important; filter:none !important}
  .maske::after{transform:scaleX(0)}
  .harfler span{opacity:1; transform:none}
}