@layer pages {
  /* ============================================================
     urun.html — tek dinamik ürün sayfası (koni | vape | katalog)
     Token-only. Eskinin şık vape ürün sayfası deseni + restore dili.
  ============================================================ */

  /* ---------- Breadcrumb ---------- */
  .bc{background:var(--bb-surface);border-bottom:1px solid var(--bb-border)}
  .bc__inner{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-block:var(--bb-4);
    font-size:var(--bb-text-s);font-weight:700;color:var(--bb-on-light-dim)}
  .bc__inner a{color:var(--bb-cacao-700);transition:color var(--bb-dur-fast) var(--bb-ease-standard)}
  .bc__inner a:hover{color:var(--bb-teal-700)}
  .bc__sep{opacity:.5}
  .bc__cur{color:var(--bb-on-light);max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---------- Hero (2 kolon) ---------- */
  .ph{position:relative;background:var(--bb-grad-hero);color:var(--bb-on-dark);overflow:hidden}
  .ph::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(63,180,180,.24),transparent 70%);top:-160px;left:-140px;filter:blur(20px)}
  .ph::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;
    background:radial-gradient(circle,rgba(201,162,75,.16),transparent 70%);bottom:-180px;right:-100px;filter:blur(20px)}
  .ph__grid{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--bb-7);
    align-items:center;padding-block:clamp(40px,7vh,96px)}

  /* Sol: görsel sahne */
  .ph__art{position:relative;display:grid;place-items:center;min-height:420px}
  .ph__art .glow{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(63,180,180,.32),transparent 64%)}
  .ph__stage{position:relative;border-radius:var(--bb-r-2xl);overflow:hidden;background:var(--bb-grad-cacao);
    width:min(100%,440px);aspect-ratio:4/5;display:grid;place-items:center;box-shadow:var(--bb-e4);
    border:1px solid var(--bb-border-gold)}
  .ph__stage img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 30px 44px rgba(0,0,0,.55));
    animation:bb-float 6s var(--bb-ease-standard) infinite;transition:opacity var(--bb-dur-base) var(--bb-ease-standard)}
  .ph__chip{position:absolute;background:rgba(251,247,238,.95);color:var(--bb-cacao-800);border-radius:var(--bb-r-pill);
    padding:10px 16px;font-weight:800;font-size:var(--bb-text-xs);box-shadow:var(--bb-e3);
    display:flex;align-items:center;gap:8px;z-index:3;top:6%;right:-2%;animation:bb-float-s 4.6s var(--bb-ease-standard) infinite}
  .ph__chip .n{font-family:var(--bb-font-display);font-size:20px;color:var(--bb-teal-600)}
  .ph__badge{position:absolute;top:var(--bb-4);left:var(--bb-4);z-index:3}

  /* thumbnail şeridi (çok görselli — vape) */
  .ph__thumbs{display:flex;gap:var(--bb-3);margin-top:var(--bb-4);justify-content:center;flex-wrap:wrap}
  .ph__thumb{width:74px;height:74px;border-radius:var(--bb-r-md);overflow:hidden;background:var(--bb-grad-cacao);
    border:2px solid transparent;cursor:pointer;padding:6px;display:grid;place-items:center;
    transition:border var(--bb-dur-fast) var(--bb-ease-standard),transform var(--bb-dur-fast)}
  .ph__thumb img{width:100%;height:100%;object-fit:contain}
  .ph__thumb:hover{transform:translateY(-2px)}
  .ph__thumb.active{border-color:var(--bb-teal-400);box-shadow:var(--bb-glow-teal)}

  /* Sağ: bilgi + aksiyon */
  .ph__info h1{font-family:var(--bb-font-display);font-size:var(--bb-display-l);line-height:.96;
    letter-spacing:.012em;margin:var(--bb-3) 0}
  .ph__info h1 .teal{color:var(--bb-teal-400)}
  .ph__rating{display:flex;align-items:center;gap:10px;font-size:var(--bb-text-s);color:var(--bb-on-dark-dim);margin-bottom:var(--bb-4)}
  .ph__rating .bb-stars{font-size:var(--bb-text-l)}
  .ph__rating b{color:var(--bb-on-dark)}
  .ph__desc{font-size:var(--bb-text-l);color:var(--bb-on-dark-dim);max-width:52ch;margin-bottom:var(--bb-5);line-height:var(--bb-lh-body)}
  .ph__trust{display:flex;flex-wrap:wrap;gap:var(--bb-2);margin-top:var(--bb-5)}
  .ph__trust--col{flex-direction:column;align-items:flex-start;margin:0 0 var(--bb-5)}

  /* Aksiyon paneli (cam) — ince altın iç hairline + katmanlı derinlik */
  .ph__panel{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--bb-r-xl);
    padding:var(--bb-5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:var(--bb-e3),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(201,162,75,.12)}
  .ph__lbl{font-size:var(--bb-text-xs);font-weight:800;text-transform:uppercase;letter-spacing:var(--bb-ls-label);
    color:var(--bb-gold-300);margin-bottom:var(--bb-3);display:flex;align-items:center;justify-content:space-between;gap:10px}
  .ph__lbl .fark{font-size:var(--bb-text-xs);font-weight:800;color:var(--bb-teal-300);text-transform:none;
    letter-spacing:0;cursor:pointer;border-bottom:1px dashed var(--bb-teal-400);padding-bottom:1px;background:none}
  .ph__lbl .fark:hover{color:var(--bb-teal-300)}
  .ph__row{margin-bottom:var(--bb-4)}
  .ph__row:last-of-type{margin-bottom:0}

  /* Seçici ızgaraları */
  .sel-grid{display:grid;gap:var(--bb-2)}
  .sel-grid--guc{grid-template-columns:1fr 1fr}
  .sel-grid--lezzet{grid-template-columns:repeat(2,1fr)}
  .sel-grid--paket{grid-template-columns:repeat(4,1fr)}
  .sel-opt{position:relative;border:1.5px solid rgba(255,255,255,.18);border-radius:var(--bb-r-md);
    padding:13px 8px;text-align:center;cursor:pointer;background:rgba(255,255,255,.03);color:var(--bb-on-dark);
    font-weight:700;font-size:var(--bb-text-s);line-height:1.2;
    transition:border var(--bb-dur-fast) var(--bb-ease-standard),background var(--bb-dur-fast),transform var(--bb-dur-fast)}
  .sel-opt:hover{transform:translateY(-2px);border-color:var(--bb-teal-400)}
  .sel-opt:active{transform:scale(.98)}
  .sel-opt.active{border-color:var(--bb-teal-400);background:rgba(63,180,180,.16);box-shadow:var(--bb-glow-teal)}
  .sel-opt[disabled],.sel-opt.disabled{opacity:.4;cursor:not-allowed;transform:none;border-style:dashed}
  .sel-opt[disabled]:hover,.sel-opt.disabled:hover{transform:none;border-color:rgba(255,255,255,.18)}
  .sel-opt .v{display:block;font-family:var(--bb-font-display);font-size:24px;color:var(--bb-on-dark);line-height:1}
  .sel-opt .p,.sel-opt .sub{display:block;font-size:var(--bb-text-xs);font-weight:700;color:var(--bb-on-dark-dim);margin-top:4px}
  .sel-opt.active .p,.sel-opt.active .sub{color:var(--bb-teal-300)}
  .sel-opt__pop{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
    background:var(--bb-grad-teal);color:#fff;font-size:10px;font-weight:900;letter-spacing:.04em;
    padding:3px 9px;border-radius:var(--bb-r-pill);white-space:nowrap;box-shadow:var(--bb-glow-teal);z-index:2}

  /* Fiyat — panel içinde ince ayraçla ayrılmış, hizalı */
  .ph__price{display:flex;align-items:baseline;gap:10px;margin:var(--bb-5) 0 var(--bb-4);flex-wrap:wrap;
    padding-top:var(--bb-4);border-top:1px solid rgba(201,162,75,.18)}
  .ph__price .now{font-family:var(--bb-font-display);font-size:var(--bb-display-m);color:var(--bb-gold-400);line-height:1;
    font-variant-numeric:tabular-nums}
  .ph__price .unit{font-size:var(--bb-text-s);color:var(--bb-on-dark-dim);font-weight:800}
  /* Çizik eski fiyat (indirim) — ana fiyat + paket butonları */
  .ph__price .was{font-family:var(--bb-font-display);font-size:var(--bb-text-xl);color:var(--bb-on-dark-dim);
    text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5);opacity:.7;line-height:1;
    font-variant-numeric:tabular-nums;order:-1}
  .sel-opt .p .was{display:inline-block;margin-right:5px;text-decoration:line-through;
    text-decoration-color:currentColor;opacity:.55;font-weight:700}
  .ph__note{font-size:var(--bb-text-xs);color:var(--bb-on-dark-dim);margin-top:var(--bb-3);display:flex;align-items:center;gap:8px}
  .ph__cta{display:flex;flex-direction:column;gap:var(--bb-2)}
  .ph__cta .bb-btn:active{transform:scale(.98)}
  .ph__wa{--_bg:#1f9d57;--_fg:#fff}
  .ph__wa:hover{--_bg:#16864a}
  /* Tükendi — pasif sepete-ekle butonu */
  .ph__cta .bb-btn.is-disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.4);pointer-events:none}

  /* ---------- Güven & kalite şeridi (marquee) ---------- */
  .pt-strip{background:var(--bb-cacao-900);color:var(--bb-on-dark);overflow:hidden;white-space:nowrap;
    border-block:1px solid var(--bb-border-gold)}
  .pt-strip__track{display:flex;width:max-content;animation:bb-ticker 34s linear infinite;will-change:transform}
  .pt-strip:hover .pt-strip__track{animation-play-state:paused}
  .pt-strip__item{display:inline-flex;align-items:center;gap:12px;padding:14px clamp(20px,3vw,48px);
    font-family:var(--bb-font-display);font-size:var(--bb-text-xl);letter-spacing:.05em;color:var(--bb-on-dark)}
  .pt-strip__item .dot{color:var(--bb-teal-400)}

  /* ---------- Özellik / güvenlik ızgaraları ---------- */
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bb-5)}

  /* ---------- Benzer ürünler ---------- */
  .pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bb-5)}
  .pd-urun__media{aspect-ratio:1/1;background:var(--bb-grad-ivory);display:grid;place-items:center;
    padding:var(--bb-5);overflow:hidden;position:relative}
  .pd-urun__media img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(46,20,6,.26));
    transition:transform var(--bb-dur-slow) var(--bb-ease-standard)}
  .urun-kart:hover .pd-urun__media img{transform:scale(1.06) rotate(-1.5deg)}
  .pd-urun__body{padding:var(--bb-4);display:flex;flex-direction:column;gap:10px;text-align:left;flex:1}
  .pd-urun__title{font-family:var(--bb-font-body);font-weight:800;font-size:var(--bb-text-m);line-height:1.3;
    color:var(--bb-cacao-700);min-height:2.6em}
  .pd-urun__price{display:flex;align-items:baseline;gap:6px;margin-top:auto;
    padding-top:var(--bb-3);border-top:1px solid var(--bb-border)}
  .pd-urun__price .now{font-family:var(--bb-font-display);font-size:26px;color:var(--bb-cacao-700);font-variant-numeric:tabular-nums}

  /* ---------- Yorumlar ----------
     CSS-column (masonry) yerine flex ızgara: kartlar SOLDAN SAĞA sırayla, üstten hizalı dizilir.
     4 yorum masaüstünde tek satırda 4 sütun olur (eski column:3 → dengesiz "2+2" hatası çözüldü). */
  .reviews-masonry{display:flex;flex-wrap:wrap;gap:var(--bb-5);justify-content:center;align-items:flex-start}
  .reviews-masonry .yorum-kart{flex:1 1 260px;max-width:360px;margin:0}
  /* "Daha fazla yorum" butonu */
  .pd-yorum-more{display:flex;justify-content:center;margin-top:var(--bb-5)}
  .pd-yorum-more:empty{display:none}

  /* ---------- Karma lezzet seçici (çoklu, max 4) ---------- */
  .ph__lbl .lz-cnt{font-size:var(--bb-text-xs);font-weight:800;text-transform:none;letter-spacing:0;
    color:var(--bb-teal-300)}
  .ph__lbl .lz-cnt b{color:var(--bb-on-dark);font-family:var(--bb-font-display);font-size:15px}
  .lz-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--bb-2)}
  .lz-opt{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1.5px solid rgba(255,255,255,.18);
    border-radius:var(--bb-r-md);background:rgba(255,255,255,.03);color:var(--bb-on-dark);
    font-weight:700;font-size:var(--bb-text-s);line-height:1.2;cursor:pointer;text-align:left;
    transition:border var(--bb-dur-fast) var(--bb-ease-standard),background var(--bb-dur-fast),transform var(--bb-dur-fast)}
  .lz-opt:hover{transform:translateY(-1px);border-color:var(--bb-teal-400)}
  .lz-opt:active{transform:scale(.98)}
  .lz-opt.active{border-color:var(--bb-teal-400);background:rgba(63,180,180,.16);box-shadow:var(--bb-glow-teal)}
  .lz-opt__ad{min-width:0;overflow-wrap:anywhere}
  .lz-opt__tik{width:19px;height:19px;border-radius:6px;border:1.5px solid rgba(255,255,255,.35);
    display:grid;place-items:center;font-size:12px;flex-shrink:0;color:transparent;line-height:1;
    transition:background var(--bb-dur-fast) var(--bb-ease-standard),border-color var(--bb-dur-fast)}
  .lz-opt.active .lz-opt__tik{background:var(--bb-teal-500);border-color:transparent;color:#fff}
  .lz-note{font-size:var(--bb-text-xs);color:var(--bb-on-dark-dim);margin-top:10px;line-height:var(--bb-lh-snug)}
  .lz-note b{color:var(--bb-gold-300)}

  /* ---------- Favori (kalp) butonu — hero CTA ---------- */
  .ph__fav{--_bg:transparent}
  .ph__fav.is-on{border-color:var(--bb-gold-400);color:var(--bb-gold-300)}
  .ph__fav [data-fav-ic]{font-size:16px;margin-right:2px}

  /* ---------- D9/D8 karşılaştırma modalı ---------- */
  .fark-modal{max-width:620px;text-align:left}
  .fark-modal h2{font-family:var(--bb-font-display);font-size:var(--bb-display-s);color:var(--bb-cacao-700);
    letter-spacing:var(--bb-ls-display);margin-bottom:var(--bb-2)}
  .fark-modal .lede{color:var(--bb-on-light-dim);font-size:var(--bb-text-m);margin-bottom:var(--bb-5)}
  .fark-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--bb-3)}
  .fark-col{border:1px solid var(--bb-border);border-radius:var(--bb-r-lg);padding:var(--bb-4);background:var(--bb-surface-raised)}
  .fark-col h3{font-family:var(--bb-font-display);font-size:var(--bb-display-s);letter-spacing:.03em;margin-bottom:6px}
  .fark-col.d9 h3{color:var(--bb-teal-700)}
  .fark-col.d8 h3{color:var(--bb-gold-700)}
  .fark-col .tag{font-size:var(--bb-text-xs);font-weight:800;color:var(--bb-on-light-dim);margin-bottom:var(--bb-3);display:block}
  .fark-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
  .fark-col li{font-size:var(--bb-text-s);color:var(--bb-on-light-dim);padding-left:20px;position:relative;line-height:1.45}
  .fark-col li::before{content:"›";position:absolute;left:4px;color:var(--bb-teal-600);font-weight:900}
  .fark-modal__close{margin-top:var(--bb-5);text-align:right}

  /* ---------- Boş durum ---------- */
  .pd-bos{text-align:center;max-width:560px;margin-inline:auto;padding-block:clamp(40px,8vh,90px)}
  .pd-bos .em{font-size:64px;opacity:.55}
  .pd-bos h1{font-family:var(--bb-font-display);font-size:var(--bb-display-s);color:var(--bb-cacao-700);margin:var(--bb-3) 0}
  .pd-bos p{color:var(--bb-on-light-dim);font-size:var(--bb-text-l);margin-bottom:var(--bb-5)}

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .ph__grid{grid-template-columns:1fr;gap:var(--bb-6)}
    .ph__art{order:-1;min-height:340px}
    .feat-grid{grid-template-columns:1fr}
    .pd-grid{grid-template-columns:repeat(2,1fr)}
  }
  /* ≤768px: mobil — hero görsel sahne küçülür, başlık ölçeklenir */
  @media (max-width:768px){
    .ph__grid{gap:var(--bb-5);padding-block:clamp(28px,5vh,56px)}
    .ph__art{min-height:0}
    .ph__stage{width:min(100%,360px)}
    /* sağa taşan float chip'i hero içinde tut */
    .ph__chip{right:2%}
    .ph__info h1{font-size:var(--bb-display-m)}
    .ph__desc{font-size:var(--bb-text-m);margin-bottom:var(--bb-4)}
    .ph__panel{padding:var(--bb-4)}
    .ph__price .now{font-size:var(--bb-display-s)}
    /* marquee öğeleri biraz küçülsün */
    .pt-strip__item{font-size:var(--bb-text-l);padding-block:12px}
  }
  @media (max-width:560px){
    .ph__info h1{font-size:var(--bb-display-m)}
    .feat-grid{grid-template-columns:1fr}
    .pd-grid{grid-template-columns:1fr 1fr;gap:var(--bb-3)}
    .pd-urun__body{padding:var(--bb-3)}
    .pd-urun__title{font-size:var(--bb-text-s);min-height:auto}
    .sel-grid--lezzet{grid-template-columns:1fr 1fr}
    .sel-grid--paket{grid-template-columns:repeat(2,1fr)}
    .fark-grid{grid-template-columns:1fr}
    /* karma lezzet seçici dar telefonda tek sütun */
    .lz-grid{grid-template-columns:1fr}
  }
  /* ≤480px: küçük telefon ince ayar */
  @media (max-width:480px){
    .ph__stage{width:min(100%,300px)}
    /* güç seçici 2'li kalır; lezzet/paket de 2'li → dokunma hedefi rahat */
    .sel-opt{padding:11px 6px}
    .sel-opt .v{font-size:20px}
    /* breadcrumb tek satır taşmasın */
    .bc__cur{max-width:20ch}
  }
}