/* ==========================================================================
   İ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 2px rgba(42,29,20,.06), 0 4px 12px rgba(42,29,20,.06);
  --golge-m:0 2px 6px rgba(42,29,20,.07), 0 16px 40px rgba(42,29,20,.10);
  --golge-l:0 8px 24px rgba(42,29,20,.10), 0 40px 90px rgba(42,29,20,.16);

  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --en:1180px;
  --ust:72px;

  --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; line-height:1.12; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(2.4rem,6vw,4.5rem)}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
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)}

.grad-ink{
  background:var(--grad-metin); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:220% 100%; animation:kayanRenk 9s ease-in-out infinite;
}
@keyframes kayanRenk{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- 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:10px; margin:0 0 16px;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--kahve);
}
.baslik-ust::before{content:""; width:34px; height:2px; border-radius:2px; background:var(--grad-sicak)}
.orta .baslik-ust::after{content:""; width:34px; height:2px; border-radius:2px; background:var(--grad-sicak)}

/* ---------- 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:700; font-size:.98rem; letter-spacing:.01em;
  color:#fff; background:var(--grad-sicak); background-size:180% 100%;
  box-shadow:0 10px 26px rgba(111,78,55,.32);
  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(-3px); background-position:100% 50%; box-shadow:0 16px 34px rgba(111,78,55,.4)}
.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,.78); backdrop-filter:blur(8px);
  border:1px solid var(--cizgi-2); border-radius:var(--r-l); padding: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{
  width:56px; height:56px; display:grid; place-items:center; border-radius:16px;
  background:var(--grad-krem); box-shadow:inset 0 0 0 1px var(--cizgi-2); margin-bottom:18px;
  font-size:1.5rem; transition:transform .5s var(--yay);
}
.kart:hover .kart__ikon{transform:rotate(-8deg) scale(1.08)}
.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:8px; padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px var(--cizgi);
  font-size:.8rem; font-weight:700; color:var(--kahve); letter-spacing:.02em;
}
.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 22px rgba(231,215,190,.7); opacity:.5;
  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:16px 0; border-block:1px solid var(--cizgi-2); background:rgba(255,255,255,.5)}
.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:12px; font-weight:700; color:var(--kahve);
  letter-spacing:.08em; text-transform:uppercase; font-size:.86rem; white-space:nowrap}
.serit span::after{content:"✦"; color:var(--bronz)}
@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}
}