/* ============================================================
     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__oos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 var(--bb-3);
    padding: 12px 14px;
    border-radius: var(--bb-r-lg, 12px);
    background: rgba(192, 57, 43, 0.12);
    border: 1px solid rgba(192, 57, 43, 0.35);
    color: #f5d4cf;
}
.ph__oos[hidden] { display: none !important; }
.ph__oos strong {
    font-size: var(--bb-text-s);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffb4a8;
}
.ph__oos span {
    font-size: var(--bb-text-s);
    line-height: 1.4;
    color: rgba(251, 247, 238, 0.78);
}

.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
    }
}