/* ═══════════════════════════════════════════════════════════════════
   Yastık sayfalarının ortak bileşenleri:
   `yastiklar.html` (kategori) + dört yastık ürün sayfası.

   ⚠️ Bu aile AÇIK ZEMİNLİ. Müşterinin çizdiği ekranların hepsi krem
   zeminli (Excel `web sitesi kılıflar ve yastıklar ekranları.xlsx` →
   image12 · image13 · image17 · image19 · image20 · image21 · …).
   CLAUDE.md kuralı: "Varsayılan koyudur; açık zemin ancak referans ekran
   öyleyse kullanılır." Burada referans ekran açık.

   Vurgu rengi ürüne göre değişir (çizilen ekranlarda her yastığın
   çekirdeği farklı renk): sayfa kendi <style> bloğunda `--p-accent` verir.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --p-bg:#F7F4F1;          /* kategori ve ürün zemini */
  --p-bg-warm:#FBF7F3;     /* kart zemini */
  --p-ink:#12233D;         /* lacivert başlık ve gövde */
  --p-ink-soft:#5A6675;
  --p-line:#E4DED7;
  --p-accent:#7C8B6B;      /* varsayılan adaçayı; sayfa geçersiz kılar */
  --p-copper:#B4661F;      /* fiyat ve kicker */
  --p-navy:#12233D;        /* satın al düğmesi */
}

.pil{background:var(--p-bg);color:var(--p-ink);position:relative}
.pil--warm{background:var(--p-bg-warm)}
.pil .wrap{position:relative}

/* ─────────────── Üst çubuk (geri + logo) ───────────────
   Ürün sayfalarına push navigasyonla girildiği için sol üstte tek adım
   geri bağlantısı var (image20 · image24 · image26 · image30). */
.pil-top{display:flex;align-items:center;gap:14px;
  padding:calc(var(--header-height) + 18px) 0 0}
.pil-back{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  color:var(--p-copper);font-size:14px;font-weight:500}
.pil-back .qi{width:16px;height:16px;transform:rotate(180deg)}
.pil-back:hover{color:var(--p-ink)}

/* ─────────────── Başlık bloğu ─────────────── */
.pil-kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--p-copper);margin-bottom:14px}
.pil-kicker.sage{color:var(--p-accent)}
.pil h1,.pil h2,.psheet h2{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;
  line-height:1.08;color:var(--p-ink)}
.pil h1{font-size:clamp(38px,9.5vw,64px)}
.pil h2,.psheet h2{font-size:clamp(28px,7.2vw,46px)}
.pil h1 sup,.pil h2 sup,.pil .tm,.psheet h2 sup,.psheet .tm{font-family:var(--font-sans);
  font-size:.3em;font-weight:400;vertical-align:super;letter-spacing:0}
.pil .o,.psheet .o{color:var(--p-copper)}
.pil .g,.psheet .g{color:var(--p-accent)}
.pil-sub{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(20px,5.2vw,30px);line-height:1.22;margin-top:14px}
.pil-sub .g{color:var(--p-accent)}
.pil-sub .o{color:var(--p-copper)}
.pil-lead{font-size:clamp(14.5px,3.8vw,16.5px);line-height:1.62;color:var(--p-ink-soft);
  max-width:560px;margin-top:16px}
.pil-rule{display:block;width:38px;height:1px;background:var(--p-copper);opacity:.6;margin:18px 0}

/* ─────────────── Yatış pozisyonu ikonları ─────────────── */
.pil-pos{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:26px 0 0}
.pil-pos li{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:0 clamp(12px,4vw,26px);position:relative}
.pil-pos li+li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:var(--p-line)}
.pil-pos .qi{width:clamp(38px,10vw,52px);height:auto;aspect-ratio:56/32;color:var(--p-ink)}
.pil-pos b{font-family:var(--font-sans);font-size:clamp(10.5px,2.8vw,12px);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--p-ink);white-space:nowrap}
@media(max-width:340px){.pil-pos b{letter-spacing:.04em;font-size:9.5px}}
.pil-pos.start{justify-content:flex-start}
.pil-pos.start li:first-child{padding-left:0}

/* ─────────────── Ürün sahnesi ─────────────── */
.pil-stage{margin:clamp(20px,5vw,34px) auto 0;max-width:720px}
.pil-stage img{width:100%;height:auto}

/* ─────────────── Üçlü özellik ─────────────── */
.pil-feats{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(24px,6vw,38px) 0 0;
  border:1px solid var(--p-line);border-radius:var(--r-card);background:#fff;padding:24px 0}
.pil-feats li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:0 clamp(8px,2.4vw,18px);position:relative}
.pil-feats li+li::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:var(--p-line)}
.pil-feats .qi{width:30px;height:30px;color:var(--p-accent)}
.pil-feats b{font-family:var(--font-sans);font-size:clamp(10.5px,2.7vw,12px);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--p-ink);line-height:1.35}
.pil-feats .dash{display:block;width:20px;height:1px;background:var(--p-line)}
.pil-feats p{font-size:clamp(11.5px,2.9vw,13px);line-height:1.5;color:var(--p-ink-soft)}

/* ─────────────── Fiyat + satın alma ─────────────── */
.pil-buy{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:clamp(24px,6vw,36px) 0 0;padding:20px 22px;border:1px solid var(--p-line);
  border-radius:var(--r-card);background:#fff}
.pil-price b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px,8vw,42px);line-height:1;color:var(--p-copper)}
.pil-price small{display:block;font-size:12px;color:var(--p-ink-soft);margin-top:8px}
.pil-cta{display:inline-flex;align-items:center;gap:14px;min-height:62px;padding:0 26px;
  border:0;border-radius:var(--r-btn);cursor:pointer;background:var(--p-navy);color:#fff;
  font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;transition:background var(--dur) var(--ease)}
.pil-cta:hover{background:#1B3559}
.pil-cta .arr{color:var(--p-copper);transition:transform var(--dur) var(--ease)}
.pil-cta:hover .arr{transform:translateX(4px)}

/* ─────────────── "Nasıl çalıştığını keşfet" açıcı ─────────────── */
.pil-open{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;
  margin:16px 0 0;min-height:62px;padding:0 20px;cursor:pointer;
  border:1px solid var(--p-line);border-radius:var(--r-card);background:#fff;
  font-family:var(--font-sans);font-size:clamp(12.5px,3.2vw,14px);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--p-ink);
  transition:border-color var(--dur) var(--ease)}
.pil-open:hover{border-color:var(--p-accent)}
.pil-open .qi{width:16px;height:16px;color:var(--p-copper);transform:rotate(90deg)}

/* ─────────────── Kategori: dört form kartı ─────────────── */
.pil-forms{display:grid;gap:16px;margin:clamp(26px,6vw,42px) 0 0}
.pil-form{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr) auto;align-items:center;
  gap:clamp(12px,3vw,22px);padding:18px;border:1px solid var(--p-line);border-radius:var(--r-card);
  background:#fff;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pil-form:hover{border-color:var(--p-accent);transform:translateY(-2px)}
.pil-form img{width:100%;height:auto}
.pil-form .no{display:block;font-family:var(--font-mono);font-size:12px;color:var(--p-ink-soft)}
.pil-form h3{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(18px,4.6vw,26px);line-height:1.15;color:var(--p-ink);margin-top:4px}
.pil-form .form-kind{font-size:clamp(12px,3.1vw,14px);color:var(--p-copper);margin-top:5px}
.pil-form .pil-pos{margin:12px 0 0;justify-content:flex-start}
.pil-form .pil-pos li{padding:0 clamp(8px,2.6vw,16px)}
.pil-form .pil-pos li:first-child{padding-left:0}
.pil-form .pil-pos .qi{width:clamp(30px,8vw,42px)}
.pil-form .form-note{font-size:clamp(11.5px,3vw,13.5px);line-height:1.5;color:var(--p-ink-soft);
  margin-top:12px;padding-top:12px;border-top:1px solid var(--p-line)}
.pil-form .go{width:44px;height:44px;border:1px solid var(--p-line);border-radius:50%;
  display:grid;place-items:center;color:var(--p-copper);flex-shrink:0}
.pil-form:hover .go{border-color:var(--p-accent)}
.pil-form .go .qi{width:16px;height:16px}

/* Ortak kalite şeridi */
.pil-common{margin:clamp(26px,6vw,40px) 0 0;padding:24px 20px;border:1px solid var(--p-line);
  border-radius:var(--r-card);background:var(--p-bg-warm)}
.pil-common h4{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-ink);text-align:center;margin-bottom:20px}
.pil-common ul{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pil-common li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.pil-common .qi{width:26px;height:26px;color:var(--p-accent)}
.pil-common span{font-size:clamp(10px,2.5vw,12px);line-height:1.35;color:var(--p-ink-soft)}

/* ─────────────── Bottom sheet (iki katmanlı) ───────────────
   image18: "Push 1 ana sayfa → kategori · Push 2 kategori → ürün ·
   Bottom sheet: ürün → ürünün mantığını daha derin anlamak."       */
.psheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:none;
  height:auto;border:0;padding:0;background:transparent;color:var(--p-ink)}
.psheet::backdrop{background:rgba(10,18,30,.55);backdrop-filter:blur(4px)}
.psheet-in{background:var(--p-bg);border-radius:22px 22px 0 0;max-height:92dvh;overflow-y:auto;
  padding:0 20px 28px;-webkit-overflow-scrolling:touch}
.psheet[open] .psheet-in{animation:psheetUp .4s cubic-bezier(.32,.72,0,1)}
@keyframes psheetUp{from{transform:translateY(100%)}to{transform:none}}
.psheet-grip{position:sticky;top:0;z-index:2;background:var(--p-bg);padding:12px 0 16px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.psheet-grip i{display:block;width:44px;height:4px;border-radius:2px;background:#CFC7BE}
.psheet-close{position:absolute;right:0;top:10px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--p-line);background:#fff;color:var(--p-ink);font-size:20px;
  line-height:1;cursor:pointer}
.psheet-close:hover{border-color:var(--p-accent)}

/* Sahne üzerindeki bölge etiketleri — çizilen ekranlarda görselin ÜSTÜNDE,
   ince noktalı çizgilerle ürüne bağlanıyor. */
.pil-zones{display:grid;grid-template-columns:repeat(var(--zone-count,3),1fr);gap:8px;
  margin-top:22px;text-align:center}
.pil-zone b{display:block;font-family:var(--font-sans);font-size:clamp(9.5px,2.5vw,11.5px);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p-ink);line-height:1.3}
.pil-zone .dash{display:block;width:16px;height:1px;background:var(--p-copper);margin:8px auto}
.pil-zone p{font-size:clamp(10.5px,2.7vw,12.5px);line-height:1.45;color:var(--p-ink-soft)}
.pil-zone .stem{display:block;width:1px;height:clamp(28px,7vw,54px);margin:10px auto 0;
  background:repeating-linear-gradient(180deg,var(--p-accent) 0 3px,transparent 3px 7px)}
.pil-zone .dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--p-accent);
  margin:0 auto}

/* Sheet içindeki pozisyon kartları */
.pil-poscards{display:grid;grid-template-columns:repeat(var(--pos-count,3),1fr);gap:12px;
  margin-top:clamp(18px,4vw,28px)}
.pil-poscard{border:1px solid var(--p-line);border-radius:var(--r-card);background:#fff;
  padding:20px clamp(6px,2.4vw,14px);text-align:center}
.pil-poscard .qi{width:clamp(40px,11vw,58px);height:auto;aspect-ratio:56/32;color:var(--p-ink)}
.pil-poscard b{display:block;font-family:var(--font-sans);font-size:clamp(11px,2.9vw,13px);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:12px}
.pil-poscard .dash{display:block;width:18px;height:1px;background:var(--p-copper);margin:10px auto}
.pil-poscard p{font-size:clamp(11px,2.8vw,13px);line-height:1.5;color:var(--p-ink-soft)}

/* Sheet 2'ye geçiş */
.pil-next{display:flex;align-items:center;gap:16px;width:100%;margin-top:clamp(18px,4vw,26px);
  padding:16px 18px;cursor:pointer;border:1px solid var(--p-line);border-radius:var(--r-card);
  background:#fff;text-align:left;transition:border-color var(--dur) var(--ease)}
.pil-next:hover{border-color:var(--p-accent)}
.pil-next .ring{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--p-line);
  border-radius:50%;display:grid;place-items:center;color:var(--p-ink)}
.pil-next .ring .qi{width:16px;height:16px;transform:rotate(90deg)}
.pil-next b{display:block;font-family:var(--font-sans);font-size:clamp(13px,3.3vw,15px);
  font-weight:600;color:var(--p-ink)}
.pil-next span{display:block;font-size:clamp(11.5px,3vw,13px);color:var(--p-ink-soft);margin-top:3px}

/* Mühendislik sheet'indeki dörtlü teknoloji ızgarası */
.pil-tech{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(20px,5vw,30px)}
.pil-tech li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  padding:26px 12px;position:relative}
.pil-tech li:nth-child(-n+2){border-bottom:1px solid var(--p-line)}
.pil-tech li:nth-child(odd){border-right:1px solid var(--p-line)}
.pil-tech .ring{width:clamp(66px,17vw,88px);height:clamp(66px,17vw,88px);flex:0 0 auto;
  border:1px solid var(--p-line);border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--p-accent)}
.pil-tech .ring .qi{width:42%;height:42%}
.pil-tech b{font-family:var(--font-sans);font-size:clamp(12px,3.1vw,14px);font-weight:600;
  line-height:1.35;color:var(--p-ink)}

/* Sheet altındaki üçlü güvence */
.pil-assure{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(18px,4vw,26px);
  padding:20px 0;border:1px solid var(--p-line);border-radius:var(--r-card);background:var(--p-bg-warm)}
.pil-assure li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:0 8px;position:relative}
.pil-assure li+li::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:var(--p-line)}
.pil-assure .qi{width:26px;height:26px;color:var(--p-copper)}
.pil-assure span{font-size:clamp(10.5px,2.7vw,12.5px);line-height:1.35;color:var(--p-ink-soft)}

/* Sheet içi sabit fiyat çubuğu */
.pil-sticky{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;padding:16px 18px;
  border-radius:var(--r-card);background:var(--p-navy);color:#fff}
.pil-sticky b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(24px,6.4vw,34px);line-height:1;color:#F0B06A}
.pil-sticky small{display:block;font-size:11.5px;color:#A9B6C6;margin-top:6px}
.pil-sticky .pil-cta{background:transparent;border:1px solid rgba(255,255,255,.35);min-height:52px}
.pil-sticky .pil-cta:hover{background:rgba(255,255,255,.1)}

.pil-note{display:flex;align-items:flex-start;gap:11px;margin-top:16px;
  font-size:clamp(11.5px,2.9vw,13px);line-height:1.55;color:var(--p-ink-soft)}
.pil-note .qi{width:18px;height:18px;color:var(--p-ink-soft);flex-shrink:0;margin-top:1px}

/* ─────────────── Kırılma noktaları ─────────────── */
@media(min-width:760px){
  .psheet{inset:0;background:transparent}
  .psheet[open]{display:grid;place-items:center}
  .psheet-in{width:min(620px,92vw);max-height:88dvh;border-radius:var(--r-card);
    border:1px solid var(--p-line);padding-inline:32px}
  .pil-forms{grid-template-columns:1fr 1fr}
  .pil-form{grid-template-columns:1fr;text-align:left}
  .pil-form img{max-width:280px}
  .pil-form .go{position:absolute;right:18px;bottom:18px}
  .pil-form{position:relative}
}
@media(min-width:1080px){
  .pil-forms{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .pil-common ul{grid-template-columns:repeat(3,1fr);gap:18px 8px}
  .pil-feats{padding:20px 0}
  .pil-buy{padding:18px}
  .pil-cta{width:100%;justify-content:center}
}
@media(max-width:400px){
  .pil-form{grid-template-columns:minmax(72px,30%) minmax(0,1fr);row-gap:10px;padding:14px}
  .pil-form .go{grid-column:1/-1;justify-self:end}
  .pil-poscards{grid-template-columns:repeat(var(--pos-count,3),1fr)}
}