/* ==========================================================================
   İpeksi Baby — sayfa bileşenleri
   ========================================================================== */

/* ---------- Kahraman bölüm ---------- */
.kahraman{position:relative; padding:calc(var(--ust) + 60px) 0 90px; overflow:hidden}
.kahraman__fon{position:absolute; inset:-15% -10% 0; z-index:-1}
.kahraman__fon i{
  position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.55;
  animation:nefes 16s ease-in-out infinite;
}
.kahraman__fon i:nth-child(1){width:46vw; height:46vw; left:-8%; top:-6%; background:rgba(201,162,39,.34)}
.kahraman__fon i:nth-child(2){width:40vw; height:40vw; right:-6%; top:6%; background:rgba(169,120,79,.38); animation-delay:-5s}
.kahraman__fon i:nth-child(3){width:44vw; height:44vw; left:26%; bottom:-22%; background:rgba(231,215,190,.6); animation-delay:-9s}
@keyframes nefes{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-4%,0) scale(1.14)}}

.kahraman__ic{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,64px); align-items:center}
.kahraman__yazi{position:relative; z-index:2}
.kahraman h1{margin-bottom:.3em}
.kahraman__alt{max-width:52ch}
.kahraman__rozetler{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 30px}

.kahraman__gorsel{position:relative}
.kahraman__cerceve{
  position:relative; border-radius:44px 44px 44px 120px; overflow:hidden;
  box-shadow:var(--golge-l); border:6px solid rgba(255,255,255,.85);
  transform:rotate(1.4deg);
}
.kahraman__cerceve img{width:100%; aspect-ratio:4/3; object-fit:cover}
.kahraman__cerceve::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,transparent 45%,rgba(111,78,55,.28));
}
.yuzen-kart{
  position:absolute; display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:rgba(255,255,255,.94); border-radius:18px; box-shadow:var(--golge-m);
  font-size:.9rem; font-weight:700; color:var(--kakao); backdrop-filter:blur(6px);
  animation:sallan 6s ease-in-out infinite;
}
.yuzen-kart b{display:block; font-size:1.35rem; line-height:1; color:var(--kahve)}
.yuzen-kart span{font-weight:600; color:var(--ink-3); font-size:.78rem}
.yuzen-kart--sol{left:-26px; bottom:16%; animation-delay:-2s}
.yuzen-kart--sag{right:-18px; top:12%}
@keyframes sallan{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

@media (max-width:940px){
  .kahraman__ic{grid-template-columns:1fr}
  .yuzen-kart--sol{left:8px}
  .yuzen-kart--sag{right:8px}
}

/* ---------- Sayfa başlığı (iç sayfalar) ---------- */
.sayfa-bas{position:relative; padding:calc(var(--ust) + 64px) 0 54px; overflow:hidden}
.sayfa-bas::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(900px 420px at 20% 0%, rgba(201,162,39,.2), transparent 60%),
             radial-gradient(800px 400px at 85% 20%, rgba(169,120,79,.22), transparent 62%);
}
.sayfa-bas h1{max-width:20ch}
.sayfa-bas .lead{max-width:62ch}

/* ---------- İstatistik ---------- */
.sayilar{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px}
.sayi{
  position:relative; padding:30px 24px; border-radius:var(--r-l); text-align:center;
  background:rgba(255,255,255,.7); border:1px solid var(--cizgi-2); box-shadow:var(--golge-s);
  transition:transform .5s var(--ok), box-shadow .5s var(--ok);
}
.sayi:hover{transform:translateY(-6px); box-shadow:var(--golge-m)}
.sayi b{display:block; font-size:clamp(2.1rem,4vw,3.1rem); line-height:1; font-weight:800;
  background:var(--grad-metin); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sayi span{display:block; margin-top:10px; font-size:.9rem; color:var(--ink-2); font-weight:600}

/* ---------- Koleksiyon kartları ---------- */
.kol-kart{
  position:relative; display:block; border-radius:var(--r-l); overflow:hidden;
  background:#fff; box-shadow:var(--golge-s); border:1px solid var(--cizgi-2);
  transition:transform .55s var(--ok), box-shadow .55s var(--ok);
}
.kol-kart:hover{transform:translateY(-10px); box-shadow:var(--golge-l)}
.kol-kart__foto{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bej-acik)}
.kol-kart__foto img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ok)}
.kol-kart:hover .kol-kart__foto img{transform:scale(1.09)}
.kol-kart__foto::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:linear-gradient(180deg,transparent 40%,rgba(42,29,20,.5));
}
.kol-kart:hover .kol-kart__foto::after{opacity:1}
.kol-kart__yazi{padding:24px 26px 28px}
.kol-kart__yazi h3{margin-bottom:.3em}
.kol-kart__yazi p{margin:0 0 14px; color:var(--ink-2); font-size:.96rem}
.kol-kart__ok{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--kahve); font-size:.92rem}
.kol-kart__ok svg{transition:transform .4s var(--ok)}
.kol-kart:hover .kol-kart__ok svg{transform:translateX(6px)}
.kol-kart__sayi{
  position:absolute; top:16px; right:16px; padding:6px 13px; border-radius:999px;
  background:rgba(253,250,244,.92); font-size:.76rem; font-weight:700; color:var(--kahve);
}

/* ---------- Zaman çizelgesi ---------- */
.zaman{position:relative; padding-left:44px}
.zaman::before{
  content:""; position:absolute; left:13px; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--bronz),var(--karamel),var(--bej));
  transform-origin:top; transform:scaleY(var(--dolgu,0)); transition:transform 1.6s var(--ok);
}
.zaman.gorundu::before{--dolgu:1}
.zaman__ad{position:relative; padding:0 0 42px}
.zaman__ad:last-child{padding-bottom:0}
.zaman__ad::before{
  content:""; position:absolute; left:-38px; top:8px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px var(--karamel), 0 0 0 8px rgba(169,120,79,.16);
}
.zaman__yil{font-size:.82rem; font-weight:800; letter-spacing:.14em; color:var(--karamel)}
.zaman__ad h3{margin:.2em 0 .35em}
.zaman__ad p{color:var(--ink-2); margin:0; max-width:60ch}

/* ---------- Özellik listesi ---------- */
.ozellikler{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.ozellikler li{display:flex; gap:14px; align-items:flex-start; font-size:1rem; color:var(--ink-2)}
.ozellikler li::before{
  content:"✓"; flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-sicak); color:#fff; font-size:.8rem; font-weight:800; margin-top:2px;
}

/* ---------- Ürün ızgarası ---------- */
.filtre{
  position:sticky; top:calc(var(--ust) + 8px); z-index:40; margin-bottom:30px;
  background:rgba(253,250,244,.92); backdrop-filter:blur(12px);
  border:1px solid var(--cizgi-2); border-radius:var(--r-l); padding:16px 18px; box-shadow:var(--golge-s);
}
.filtre__sira{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.cip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--cizgi); background:#fff;
  font-size:.88rem; font-weight:650; color:var(--ink-2); cursor:pointer;
  transition:all .35s var(--ok);
}
.cip:hover{border-color:var(--karamel); color:var(--kahve); transform:translateY(-2px)}
.cip.aktif{background:var(--grad-sicak); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(111,78,55,.28)}
.ara{
  flex:1 1 210px; min-width:180px; padding:11px 16px; border-radius:999px;
  border:1px solid var(--cizgi); background:#fff; font-size:.92rem; color:var(--ink); outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.ara:focus{border-color:var(--karamel); box-shadow:0 0 0 4px rgba(169,120,79,.14)}
.filtre__bilgi{margin-left:auto; font-size:.86rem; color:var(--ink-3); font-weight:600}

.urunler{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:clamp(14px,2vw,24px)}
.urun-kart{
  position:relative; background:#fff; border:1px solid var(--cizgi-2); border-radius:var(--r-m);
  overflow:hidden; box-shadow:var(--golge-s); cursor:pointer; text-align:left;
  transition:transform .5s var(--ok), box-shadow .5s var(--ok), opacity .4s;
  animation:kartGel .6s var(--ok) both;
}
@keyframes kartGel{from{opacity:0; transform:translateY(22px) scale(.97)}}
.urun-kart:hover{transform:translateY(-7px); box-shadow:var(--golge-m)}
.urun-kart__foto{position:relative; aspect-ratio:5/4; overflow:hidden; background:var(--bej-acik)}
.urun-kart__foto img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ok)}
.urun-kart:hover .urun-kart__foto img{transform:scale(1.08)}
.urun-kart__kod{
  position:absolute; left:10px; top:10px; padding:5px 11px; border-radius:999px;
  background:rgba(42,29,20,.78); color:#F4E9D6; font-size:.72rem; font-weight:700; letter-spacing:.04em;
}
.urun-kart__ic{padding:14px 15px 17px}
.urun-kart h3{font-size:.98rem; line-height:1.35; margin:0 0 8px; font-weight:700}
.urun-kart__meta{display:flex; flex-wrap:wrap; gap:6px; font-size:.74rem; color:var(--ink-3)}
.renkler{display:flex; gap:5px; margin-top:10px; flex-wrap:wrap}
.renk{width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(42,29,20,.16); transition:transform .3s var(--yay)}
.urun-kart:hover .renk{transform:scale(1.18)}
.bos{grid-column:1/-1; text-align:center; padding:70px 0; color:var(--ink-3)}

/* ---------- Ürün penceresi ---------- */
.pencere{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px;
  background:rgba(42,29,20,.6); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ok), visibility .4s;
}
.pencere.acik{opacity:1; visibility:visible}
.pencere__kutu{
  position:relative;
  width:min(920px,100%); max-height:88vh; overflow:auto; background:var(--kagit);
  border-radius:var(--r-l); box-shadow:var(--golge-l); display:grid; grid-template-columns:1fr 1fr;
  transform:translateY(28px) scale(.96); transition:transform .5s var(--yay);
}
.pencere.acik .pencere__kutu{transform:none}
.pencere__foto{background:var(--bej-acik)}
.pencere__foto img{width:100%; height:100%; object-fit:cover; min-height:280px}
.pencere__ic{padding:30px 32px 34px}
.pencere__kapat{
  position:absolute; top:18px; right:20px; width:42px; height:42px; border-radius:50%; border:0;
  background:rgba(253,250,244,.94); cursor:pointer; font-size:1.2rem; color:var(--kahve);
  box-shadow:var(--golge-m); transition:transform .35s var(--yay)}
.pencere__kapat:hover{transform:rotate(90deg)}
.ozet-sat{display:flex; gap:14px; padding:11px 0; border-bottom:1px dashed var(--cizgi-2); font-size:.94rem}
.ozet-sat b{flex:0 0 108px; color:var(--kahve); font-weight:700}
.ozet-sat span{color:var(--ink-2)}
@media (max-width:720px){ .pencere__kutu{grid-template-columns:1fr} .pencere__foto img{min-height:220px} }

/* ---------- Katalog görüntüleyici ---------- */
.katalog{
  position:relative; display:grid; place-items:center; padding:30px 0 10px;
  perspective:2200px;
}
.kitap{
  position:relative; width:min(92vw,760px); aspect-ratio:1.42/1;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  filter:drop-shadow(0 30px 60px rgba(42,29,20,.28));
}
.kitap__sayfa{position:relative; background:#fff; overflow:hidden}
.kitap__sayfa img{width:100%; height:100%; object-fit:contain; background:#fff}
.kitap__sayfa--sol{border-radius:14px 0 0 14px; box-shadow:inset -22px 0 34px -22px rgba(42,29,20,.5)}
.kitap__sayfa--sag{border-radius:0 14px 14px 0; box-shadow:inset 22px 0 34px -22px rgba(42,29,20,.5)}
.kitap.cevir-ileri .kitap__sayfa--sag{animation:cevirI .62s var(--ok)}
.kitap.cevir-geri .kitap__sayfa--sol{animation:cevirG .62s var(--ok)}
@keyframes cevirI{
  0%{transform:rotateY(0); transform-origin:left center; opacity:1}
  100%{transform:rotateY(-118deg); transform-origin:left center; opacity:.15}
}
@keyframes cevirG{
  0%{transform:rotateY(0); transform-origin:right center; opacity:1}
  100%{transform:rotateY(118deg); transform-origin:right center; opacity:.15}
}
.katalog__kumanda{display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; justify-content:center}
.yuvarlak{
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:#fff; box-shadow:var(--golge-m); color:var(--kahve); font-size:1.15rem;
  transition:transform .35s var(--yay), background .35s, color .35s;
}
.yuvarlak:hover{transform:scale(1.1); background:var(--grad-sicak); color:#fff}
.yuvarlak:disabled{opacity:.35; cursor:default; transform:none; background:#fff; color:var(--kahve)}
.katalog__no{font-weight:700; color:var(--kahve); min-width:130px; text-align:center; font-variant-numeric:tabular-nums}
.kucukler{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; margin-top:34px}
.kucukler button{
  padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:#fff;
  transition:transform .35s var(--ok), border-color .35s; line-height:0;
}
.kucukler button:hover{transform:translateY(-4px)}
.kucukler button.aktif{border-color:var(--karamel); transform:translateY(-4px)}
.kucukler img{width:100%; aspect-ratio:.71; object-fit:cover}
@media (max-width:620px){
  .kitap{grid-template-columns:1fr; aspect-ratio:.71/1; width:min(92vw,420px)}
  .kitap__sayfa--sol{display:none}
  .kitap__sayfa--sag{border-radius:14px; box-shadow:none}
}

/* ---------- Belgeler ---------- */
.belgeler{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px}
.belge{
  background:#fff; border-radius:var(--r-m); padding:14px; box-shadow:var(--golge-s);
  border:1px solid var(--cizgi-2); transition:transform .5s var(--ok), box-shadow .5s var(--ok);
}
.belge:hover{transform:translateY(-8px) rotate(-1deg); box-shadow:var(--golge-l)}
.belge img{border-radius:10px}
.belge p{margin:12px 4px 4px; font-size:.88rem; font-weight:700; color:var(--kahve); text-align:center}

/* ---------- İletişim ---------- */
.iletisim{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px)}
@media (max-width:880px){ .iletisim{grid-template-columns:1fr} }
.adres-kart{
  position:relative; padding:30px; border-radius:var(--r-l); background:rgba(255,255,255,.8);
  border:1px solid var(--cizgi-2); box-shadow:var(--golge-s); overflow:hidden;
  transition:transform .5s var(--ok), box-shadow .5s var(--ok);
}
.adres-kart:hover{transform:translateY(-6px); box-shadow:var(--golge-m)}
.adres-kart::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--grad-sicak);
  transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ok);
}
.adres-kart:hover::after{transform:scaleY(1)}
.adres-kart h3{margin-bottom:.4em}
.adres-sat{display:flex; gap:12px; padding:9px 0; font-size:.96rem; color:var(--ink-2); align-items:flex-start}
.adres-sat b{flex:0 0 62px; color:var(--kahve); font-weight:700}
.adres-sat a:hover{color:var(--karamel)}

.form{display:grid; gap:15px}
.alan{position:relative}
.alan input,.alan textarea,.alan select{
  width:100%; padding:16px 16px 16px; border-radius:16px; border:1px solid var(--cizgi);
  background:#fff; font:inherit; font-size:.96rem; color:var(--ink); outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.alan textarea{min-height:130px; resize:vertical}
.alan input:focus,.alan textarea:focus,.alan select:focus{border-color:var(--karamel); box-shadow:0 0 0 4px rgba(169,120,79,.14)}
.alan label{display:block; margin:0 0 7px 4px; font-size:.85rem; font-weight:700; color:var(--kahve)}
.form__not{font-size:.84rem; color:var(--ink-3)}

/* ---------- Çağrı bandı ---------- */
.cagri{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(40px,6vw,76px);
  background:var(--espresso); color:#F3E8D6; text-align:center}
.cagri::before{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, rgba(201,162,39,.34), rgba(169,120,79,.18), rgba(231,215,190,.3), rgba(201,162,39,.34));
  animation:donen 22s linear infinite; opacity:.5;
}
@keyframes donen{to{transform:rotate(360deg)}}
.cagri>*{position:relative}
.cagri h2{color:#fff}
.cagri p{color:#DCCBB0; max-width:56ch; margin-inline:auto}

/* ---------- Bilgi kutusu ---------- */
.bilgi{
  border-left:4px solid var(--karamel); background:rgba(255,255,255,.7); border-radius:0 var(--r-m) var(--r-m) 0;
  padding:20px 24px; box-shadow:var(--golge-s);
}
.bilgi p:last-child{margin:0}

/* ---------- Yukarı çık ---------- */
.yukari{
  position:fixed; right:22px; bottom:22px; z-index:80; width:48px; height:48px; border-radius:50%;
  border:0; cursor:pointer; background:var(--grad-sicak); color:#fff; box-shadow:var(--golge-m);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s var(--ok), transform .4s var(--yay);
}
.yukari.gorunur{opacity:1; transform:none; pointer-events:auto}
.yukari:hover{transform:translateY(-4px) scale(1.06)}

/* ---------- Alıntı bloğu ---------- */
.alinti{
  position:relative; text-align:center; max-width:60ch; margin-inline:auto; padding:clamp(30px,5vw,58px) clamp(20px,4vw,50px);
  border-radius:var(--r-xl); background:rgba(255,255,255,.66); border:1px solid var(--cizgi-2);
  box-shadow:var(--golge-s); overflow:hidden;
}
.alinti::before{
  content:"\201C"; position:absolute; top:-26px; left:24px; font-size:9rem; line-height:1;
  font-family:Georgia,"Times New Roman",serif; color:rgba(169,120,79,.16);
}
.alinti p{
  position:relative; margin:0; font-size:clamp(1.15rem,2.3vw,1.7rem); line-height:1.5; font-weight:700;
  letter-spacing:-.01em; color:var(--kakao);
}
.alinti cite{display:block; margin-top:18px; font-style:normal; font-size:.86rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--karamel)}

/* ---------- Adım adım süreç ---------- */
.adimlar{counter-reset:adim; display:grid; gap:0}
.adim{
  position:relative; display:grid; grid-template-columns:78px 1fr; gap:clamp(16px,3vw,34px);
  padding:26px 0; border-bottom:1px dashed var(--cizgi-2);
}
.adim:last-child{border-bottom:0}
.adim__no{
  counter-increment:adim; align-self:start; width:60px; height:60px; border-radius:20px; display:grid; place-items:center;
  background:var(--grad-krem); box-shadow:inset 0 0 0 1px var(--cizgi-2);
  font-size:1.25rem; font-weight:800; color:var(--karamel);
  transition:transform .5s var(--yay), background .5s;
}
.adim__no::before{content:counter(adim,decimal-leading-zero)}
.adim:hover .adim__no{transform:translateY(-4px) rotate(-6deg); background:var(--grad-sicak); color:#fff}
.adim h3{margin:.1em 0 .3em}
.adim p{margin:0; color:var(--ink-2)}
.adim__etiket{display:inline-block; margin-top:10px; font-size:.76rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--karamel)}
@media (max-width:560px){ .adim{grid-template-columns:56px 1fr} .adim__no{width:48px;height:48px;border-radius:16px;font-size:1rem} }

/* ---------- Karşılaştırma / ikili liste ---------- */
.ikili{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.ikili__kutu{
  padding:26px 28px; border-radius:var(--r-l); background:rgba(255,255,255,.72);
  border:1px solid var(--cizgi-2); box-shadow:var(--golge-s);
  transition:transform .5s var(--ok), box-shadow .5s var(--ok);
}
.ikili__kutu:hover{transform:translateY(-6px); box-shadow:var(--golge-m)}
.ikili__kutu h4{font-size:1.02rem; margin-bottom:.5em; color:var(--kahve); text-transform:none; letter-spacing:-.01em}
.ikili__kutu p{margin:0; font-size:.96rem; color:var(--ink-2)}

/* ---------- Sözlük / terim listesi ---------- */
.terimler{display:grid; gap:0}
.terim{padding:20px 0; border-bottom:1px dashed var(--cizgi-2)}
.terim:last-child{border-bottom:0}
.terim b{display:block; color:var(--kahve); font-size:1.02rem; margin-bottom:.25em}
.terim span{color:var(--ink-2); font-size:.97rem}

/* ---------- Yapım rozeti ---------- */
.alt__rozet{ flex:1 0 100%; display:flex; justify-content:center; margin-top:10px }