/* ===========================================================================
   pages_style.css — Inner page layouts
   Category / listing, product detail, cart, quote, blog, search, contact.
   =========================================================================== */

/* ===============================================================
   A. CATEGORY / PRODUCT LISTING
   =============================================================== */
.cat-detail-main-div { padding-block: 22px 56px; }

.cat-detail-main-div-in {
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr);
    grid-template-areas:
        "head head"
        "side main";
    /* Reference: 1347px of content, split 304 (rail) + 19 (gutter) + 1024
       (grid), which lands the listing card on 328.5px. */
    column-gap: 19px;
    row-gap: 18px;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --- header row --- */
.cat-right-header-out { grid-area: head; }
.cat-right-head-text {
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--ink-strong);
}
.cat-right-desc { margin-top: 8px; max-width: 860px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }

/* --- sidebar --- */
.cat-left-column { grid-area: side; }
.cat-left-main { width: 279px; max-width: 100%; }

.cat-left-box-main { margin-bottom: 26px; }

.cat-left-box-h {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 12px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--ink-strong);
}
.cat-left-box-h::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 30px; height: 3px;
    background: var(--red-500);
}

.cat-left-box-t { display: flex; flex-direction: column; gap: 2px; }

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.filter-option:hover { background: var(--surface-alt); }
.filter-option input { width: 16px; height: 16px; accent-color: var(--navy-600); cursor: pointer; flex: 0 0 auto; }
.filter-option .filter-count { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); font-family: var(--font-ui); }
.filter-option.is-checked { color: var(--navy-600); font-weight: 600; }

.filter-clear {
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--red-500);
    cursor: pointer;
}
.filter-clear:hover { text-decoration: underline; }

/* price range */
.price-range-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.price-range-row input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); font-size: 13px; }
.price-range-row input:focus { outline: 0; border-color: var(--navy-600); }
.price-range-row span { color: var(--ink-faint); }

/* mobile filter trigger */
.filter-toggle-mobile { display: none; }

/* --- main column --- */
.cat-right-main { grid-area: main; min-width: 0; }

.cat-right-elements-out { margin-bottom: 18px; }
.cat-right-elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.cat-right-elements-left { font-family: var(--font-ui); font-size: 13px; color: var(--ink-muted); }
.cat-right-elements-left strong { color: var(--ink-strong); }

.cat-right-elements-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.cat-right-elements-right-siralama { display: flex; align-items: center; gap: 8px; }
.cat-right-elements-right-siralama label { font-family: var(--font-ui); font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.cat-right-elements-right-siralama select {
    height: 34px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--line-input);
    border-radius: var(--radius-sm);
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-family: var(--font-ui); font-size: 13px; color: var(--ink-strong);
    appearance: none; cursor: pointer;
}
.cat-right-elements-right-siralama select:focus { outline: 0; border-color: var(--navy-600); }

.cat-right-elements-right-liste { display: flex; gap: 4px; }
.view-toggle {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-input);
    border-radius: var(--radius-sm);
    background: #fff; cursor: pointer; color: var(--ink-muted);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.view-toggle.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* list view */
.cat-detail-products.is-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cat-detail-products.is-list .cat-detail-products-box { flex-direction: row; }
.cat-detail-products.is-list .cat-detail-products-box-img { flex: 0 0 210px; aspect-ratio: 1 / 1; }
.cat-detail-products.is-list .cat-detail-products-box-info { padding: 18px 22px; }
.cat-detail-products.is-list .cat-detail-products-box-img { margin-bottom: 0; }
.cat-detail-products.is-list .cat-detail-products-box-h { font-size: 18px; min-height: 0; }

/* active filter chips */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding-inline: 12px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-strong);
}
.filter-chip button { background: none; border: 0; cursor: pointer; color: var(--ink-faint); font-size: 14px; line-height: 1; padding: 0; }
.filter-chip button:hover { color: var(--red-500); }

/* pagination */
.pg-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.pg-pagination a, .pg-pagination span {
    min-width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-inline: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
    color: var(--ink-strong);
    transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.pg-pagination a:hover { background: var(--surface-alt); border-color: #d1d5db; }
.pg-pagination .is-current { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.pg-pagination .is-disabled { opacity: .4; pointer-events: none; }
.pg-pagination .is-gap { border: 0; background: none; min-width: 24px; padding: 0; color: var(--ink-faint); }

/* ===============================================================
   B. PRODUCT DETAIL
   =============================================================== */
/* Reference: a fixed 1347px column centred in the viewport with 39px of air
   either side at 1440, unchanged at 1900. Gallery 600 + 35 gap + 710 copy. */
.urun-detay-main { padding: 0 0 30px; background: #fff; }

.urun-detay-main-navg {
    width: min(1347px, calc(100% - 78px));
    margin-inline: auto;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
}

.urun-detay-main-in {
    display: flex;
    align-items: flex-start;
    width: min(1347px, calc(100% - 78px));
    margin: 20px auto 0;
}

/* --- gallery --- */
/* Not sticky — the reference column scrolls with the page. */
.urun-detay-sol-alan { flex: 0 1 600px; max-width: 600px; min-width: 0; margin-right: 35px; }

.glass-case { background: #fff; }

/* 600 x 618 on the reference, so very slightly taller than square. */
.gc-display-area { position: relative; aspect-ratio: 600 / 618; background: #fff; }
.gc-display-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gc-display-container img { max-width: 100%; max-height: 100%; object-fit: contain; }

.gc-zoom-hint {
    position: absolute; right: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding-inline: 11px;
    background: rgba(255,255,255,.94); border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-muted);
    pointer-events: none;
}

.gc-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.94); border: 1px solid var(--line);
    border-radius: 50%; cursor: pointer; color: var(--ink-strong);
    box-shadow: var(--shadow-sm);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.gc-nav:hover { background: var(--navy-900); color: #fff; }
.gc-nav-prev { left: 12px; }
.gc-nav-next { right: 12px; }

/* Reference: a 151px strip sitting 13px under the stage, no frame of its own. */
.gc-thumbs-area { position: relative; display: flex; align-items: center; gap: 8px; height: 151px; margin-top: 13px; background: #fff; }
.gc-thumbs-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; flex: 1 1 auto; }
.gc-thumbs-strip::-webkit-scrollbar { display: none; }
.gc-thumb {
    flex: 0 0 110px;
    width: 110px; height: 110px;
    padding: 6px;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .18s var(--ease);
}
.gc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gc-thumb:hover { border-color: #c9ced6; }
.gc-thumb.is-active { border-color: var(--navy-600); }

.gc-thumbs-area-prev, .gc-thumbs-area-next {
    flex: 0 0 30px; width: 30px; height: 110px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    cursor: pointer; color: var(--ink-muted);
}
.gc-thumbs-area-prev:hover, .gc-thumbs-area-next:hover { background: var(--navy-900); color: #fff; }
.gc-disabled { opacity: .35; pointer-events: none; }

/* lightbox */
.pg-lightbox {
    position: fixed; inset: 0; z-index: 320;
    background: rgba(10, 12, 18, .92);
    display: none;
    align-items: center; justify-content: center;
    padding: 40px;
}
.pg-lightbox.is-open { display: flex; }
.pg-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.pg-lightbox-close {
    position: absolute; top: 22px; right: 26px;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
    color: #fff; font-size: 22px; cursor: pointer;
}
.pg-lightbox-close:hover { background: rgba(255,255,255,.22); }

/* --- right column --- */
/* The reference measures 710px here, but it only ever renders at widths where
   600 + 35 + 710 fits. Pinning it broke every viewport under 1345px with a
   horizontal scrollbar, so the column fills what is left instead — which
   lands on 710 at 1440 anyway. */
.urun-detay-sag-alan { flex: 1 1 0; min-width: 0; }

.urun-detay-sag-alan-marka { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--red-500); letter-spacing: .5px; text-transform: uppercase; }

.urun-detay-sag-alan-baslik {
    margin: 20px 0;
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 600;
    line-height: 33px;
    color: var(--ink);
}

.product-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 12px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-muted); }
.product-meta-row strong { color: var(--ink-strong); font-weight: 600; }

.stock-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding-inline: 11px;
    border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600;
}
.stock-pill.in { background: #ecfdf5; color: #047857; }
.stock-pill.out { background: #fef2f2; color: #b91c1c; }
.stock-pill.order { background: #fffbeb; color: #b45309; }

.product_detail_islem_div { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
/* Reference: a flat grey disc, not an outlined square. */
.product-compare {
    width: 45px; height: 45px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 100px;
    background: #f3f5f7; cursor: pointer; color: #aeb7c8;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.product-compare:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.product-price-block { margin-top: 18px; padding: 18px 20px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); }
.product-price-now { font-family: var(--font-ui); font-size: 30px; font-weight: 800; color: var(--ink-strong); line-height: 1.1; }
.product-price-old { margin-left: 10px; font-size: 17px; font-weight: 500; color: var(--ink-faint); text-decoration: line-through; }
.product-price-note { margin-top: 5px; font-size: 12.5px; color: var(--ink-muted); }
.product-price-quote { font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: var(--navy-600); }

/* --- long CMS descriptions ------------------------------------------------
   A product whose description is a 40-row spec table makes the right column
   358px taller than the gallery, which drags the whole page down. Cap it on
   desktop and let it scroll inside itself, so the two columns finish together
   and the buttons stay in view. Only above 1024px — once the columns stack a
   scroll box inside a scrolling page is worse than a long page.
   Tune the height with --pd-desc-max. */
@media (min-width: 1025px) {
    .product_detail_aciklama_kisa {
        /* 640 lands the right column just under the 782px gallery, so the
           page is bounded by the gallery and no vertical space is wasted. */
        max-height: var(--pd-desc-max, 640px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 12px;
        scrollbar-width: thin;
        scrollbar-color: #c9ced8 transparent;
    }
    .product_detail_aciklama_kisa::-webkit-scrollbar { width: 8px; }
    .product_detail_aciklama_kisa::-webkit-scrollbar-track { background: transparent; }
    .product_detail_aciklama_kisa::-webkit-scrollbar-thumb {
        background: #c9ced8;
        border-radius: 4px;
    }
    .product_detail_aciklama_kisa::-webkit-scrollbar-thumb:hover { background: #aeb7c8; }
}

/* Reference body copy is 13px/19.5 in plain black, with default disc bullets. */
.product_detail_aciklama_kisa { margin-top: 0; font-size: 13px; line-height: 19.5px; color: #000; }
.product_detail_aciklama_kisa h2 { margin: 0 0 10px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink-strong); }
.product_detail_aciklama_kisa ul { margin: 0 0 14px; padding-left: 17px; list-style: disc; }
.product_detail_aciklama_kisa ul li { font-size: 13px; line-height: 19.5px; color: #000; }
.product_detail_aciklama_kisa p { margin: 0 0 12px; font-size: 13px; line-height: 19.5px; color: #000; }

/* --- options --- */
.product-options { margin-top: 22px; display: grid; gap: 20px; }

.option-group.has-error .option-group-label { color: var(--red-500); }
.option-group-label {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 9px;
    font-family: var(--font-ui); font-size: 13px; font-weight: 700;
    color: var(--ink-strong);
}
.option-group-label .req { color: var(--red-500); }
.option-group-label .chosen { font-weight: 500; color: var(--ink-muted); }

.option-swatches { display: flex; flex-wrap: wrap; gap: 9px; }

.option-swatch {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; height: 42px;
    padding-inline: 14px;
    background: #fff;
    border: 1.5px solid var(--line-input);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-ui); font-size: 13px; font-weight: 600;
    color: var(--ink-strong);
    transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.option-swatch:hover { border-color: var(--navy-600); }
.option-swatch.is-selected { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.option-swatch.is-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.option-swatch.is-color { width: 42px; min-width: 42px; padding: 3px; }
.option-swatch.is-color span { width: 100%; height: 100%; border-radius: 3px; display: block; }

.option-error { display: none; margin-top: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--red-500); }
.option-group.has-error .option-error { display: block; }

/* --- add to cart --- */
.product_detail_addcart_main { margin-top: 24px; display: grid; gap: 12px; }
.product-buy-row { display: flex; gap: 12px; align-items: stretch; }
.product-buy-row .qty-stepper { flex: 0 0 auto; height: 50px; }
.product-buy-row .qty-stepper input { height: 100%; }
.product_detail_addcart_button { flex: 1 1 auto; }
/* The detail page keeps the reference's own button palette, which is lighter
   than the brand red used in the header. */
.button-red {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 50px;
    border: 1px solid #f94453; border-radius: 22px;
    background: #f94453; color: #fff;
    font-family: var(--font-ui); font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.button-red:hover { background: #e13343; border-color: #e13343; color: #fff; }
.button-red:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.product_detail_addcart_wp a,
.product-quote-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 50px;
    border-radius: 22px;
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background-color .18s var(--ease), color .18s var(--ease);
}
.product_detail_addcart_wp a { background: #67cc8c; color: #fff; border: 0; }
.product_detail_addcart_wp a:hover { background: #55b87a; color: #fff; }
.product-quote-btn { background: #fff; color: var(--navy-900); border: 1.5px solid var(--navy-900); }
.product-quote-btn:hover { background: var(--navy-900); color: #fff; }

/* --- accordion --- */
.accordion-main-detail { margin-top: 28px; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 17px 4px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; color: var(--ink-strong);
    text-align: left;
}
.acc-head i { color: var(--ink-muted); font-size: 15px; transition: transform .25s var(--ease); }
.acc-item.is-open .acc-head i { transform: rotate(180deg); }
.acc-panel { display: none; padding: 0 4px 20px; font-size: 14px; line-height: 1.75; color: var(--ink-muted); }
.acc-item.is-open .acc-panel { display: block; }

/* ---------------------------------------------------------------
   CMS-authored HTML (urun.icerik / ek_bilgi / kargo, blog.icerik)
   ---------------------------------------------------------------
   Editors paste fixed-width tables, wide images and iframes into these
   fields. Left alone a 1056px spec table pushes the whole page sideways,
   so let this content scroll inside its own box instead.
   --------------------------------------------------------------- */
.acc-panel,
.blog-detail-body,
.product_detail_aciklama_kisa { max-width: 100%; }

.acc-panel table,
.blog-detail-body table,
/* CMS spec tables arrive with cellpadding="1" and no styling, which renders a
   40-row product spec as an unreadable wall. Give the cells room and a hairline
   between rows, while keeping the block/overflow guard that stops a wide table
   pushing the page sideways. tbody goes back to table layout so the rows still
   fill the column. */
.product_detail_aciklama_kisa table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    overflow-x: auto;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
}
.product_detail_aciklama_kisa table > tbody,
.product_detail_aciklama_kisa table > thead { display: table; width: 100%; }

.product_detail_aciklama_kisa table th,
.product_detail_aciklama_kisa table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    line-height: 19.5px;
    text-align: left;
    vertical-align: top;
}
.product_detail_aciklama_kisa table th {
    width: 42%;
    font-weight: 600;
    color: var(--ink-muted);
}
.product_detail_aciklama_kisa table td { color: var(--ink); }
.product_detail_aciklama_kisa table tr:nth-child(even) { background: var(--surface-alt); }
.product_detail_aciklama_kisa table tr:last-child th,
.product_detail_aciklama_kisa table tr:last-child td { border-bottom: 0; }
.acc-panel table td, .acc-panel table th,
.blog-detail-body table td, .blog-detail-body table th {
    padding: 9px 12px;
    border: 1px solid var(--line);
    vertical-align: top;
}

.acc-panel img, .acc-panel iframe, .acc-panel video,
.blog-detail-body img, .blog-detail-body iframe, .blog-detail-body video,
.product_detail_aciklama_kisa img,
.product_detail_aciklama_kisa iframe { max-width: 100%; height: auto; }

.acc-panel pre, .blog-detail-body pre { max-width: 100%; overflow-x: auto; }

/* fixed-width attributes on pasted markup */
.acc-panel [width], .blog-detail-body [width],
.product_detail_aciklama_kisa [width] { max-width: 100% !important; }

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 13.5px; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th { width: 40%; padding: 11px 12px 11px 0; text-align: left; font-weight: 600; color: var(--ink-strong); vertical-align: top; }
.spec-table td { padding: 11px 0; color: var(--ink-muted); }

/* related */


/* ===============================================================
   C. CART PAGE
   =============================================================== */
.cart-page { padding-block: 26px 60px; }
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.cart-table { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cart-table-head {
    display: grid; grid-template-columns: 92px minmax(0,1fr) 150px 130px 44px;
    gap: 16px; align-items: center;
    padding: 14px 18px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; color: var(--ink-muted);
}
.cart-row {
    display: grid; grid-template-columns: 92px minmax(0,1fr) 150px 130px 44px;
    gap: 16px; align-items: center;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}
.cart-row:last-child { border-bottom: 0; }
.cart-row-img { width: 92px; height: 92px; object-fit: contain; background: var(--surface-alt); border-radius: var(--radius-sm); }
.cart-row-name { font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--ink-strong); line-height: 1.4; }
.cart-row-name a:hover { color: var(--navy-600); }
.cart-row-meta { margin-top: 5px; font-size: 12.5px; color: var(--ink-muted); }
.cart-row-sku { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.cart-row-total { font-family: var(--font-ui); font-size: 16px; font-weight: 800; color: var(--ink-strong); text-align: right; }
.cart-row-remove { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-faint); }
.cart-row-remove:hover { color: var(--red-500); border-color: #fecaca; background: #fef2f2; }

.cart-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 18px; }

.cart-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: 20px; }
.cart-summary h3 { margin: 0 0 16px; font-family: var(--font-ui); font-size: 16px; font-weight: 800; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding-block: 9px; font-family: var(--font-ui); font-size: 14px; color: var(--ink-muted); }
.summary-row strong { color: var(--ink-strong); }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-ui); }
.summary-total span { font-size: 14px; color: var(--ink-muted); }
.summary-total strong { font-size: 24px; font-weight: 800; color: var(--ink-strong); }
.cart-summary .btn-base { margin-top: 18px; }

/* ===============================================================
   D. QUOTE / OFFER FORM
   =============================================================== */
.quote-page { padding-block: 26px 60px; }
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }

.quote-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.quote-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.field.is-full { grid-column: 1 / -1; }

.quote-aside { display: grid; gap: 18px; position: sticky; top: 20px; }
.quote-aside-card { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.quote-aside-card h3 { margin: 0 0 12px; font-family: var(--font-ui); font-size: 15px; font-weight: 800; }
.quote-aside-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-muted); }
.quote-aside-card ul { display: grid; gap: 10px; }
.quote-aside-card li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink); }
.quote-aside-card li i { color: #10b981; margin-top: 3px; }

.quote-product-strip { display: flex; gap: 14px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 22px; }
.quote-product-strip img { width: 68px; height: 68px; object-fit: contain; background: var(--surface-alt); border-radius: var(--radius-sm); }
.quote-product-strip-info strong { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--ink-strong); }
.quote-product-strip-info span { font-size: 12.5px; color: var(--ink-muted); }

/* ===============================================================
   E. BLOG
   =============================================================== */
.blog-page { padding-block: 26px 60px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }

.blog-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }

.blog-detail-hero { border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.blog-detail-hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }

.blog-detail-title { margin: 0 0 12px; font-family: var(--font-ui); font-size: 34px; font-weight: 800; line-height: 1.22; letter-spacing: -.5px; color: var(--ink-strong); }
.blog-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 24px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-muted); }
.blog-detail-meta i { margin-right: 5px; color: var(--ink-faint); }

.blog-detail-body { font-size: 15.5px; line-height: 1.85; color: #374151; }
.blog-detail-body h2 { margin: 34px 0 12px; font-family: var(--font-ui); font-size: 22px; font-weight: 800; color: var(--ink-strong); }
.blog-detail-body h3 { margin: 26px 0 10px; font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.blog-detail-body p { margin: 0 0 18px; }
.blog-detail-body ul { margin: 0 0 18px; display: grid; gap: 9px; }
.blog-detail-body ul li { position: relative; padding-left: 22px; }
.blog-detail-body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--red-500); }
.blog-detail-body img { border-radius: var(--radius); margin-block: 10px 22px; }
.blog-detail-body blockquote {
    margin: 24px 0; padding: 18px 22px;
    background: var(--surface-alt); border-left: 4px solid var(--red-500);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 16px; font-style: italic; color: var(--ink-strong);
}

.blog-sidebar { position: sticky; top: 20px; display: grid; gap: 22px; }
.blog-side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.blog-side-card h3 { margin: 0 0 14px; font-family: var(--font-ui); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-strong); }
.blog-side-post { display: flex; gap: 12px; padding-block: 11px; border-bottom: 1px solid var(--line); }
.blog-side-post:last-child { border-bottom: 0; }
.blog-side-post img { width: 68px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; }
.blog-side-post-t { font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-side-post:hover .blog-side-post-t { color: var(--red-500); }

/* ===============================================================
   F. SEARCH
   =============================================================== */
.search-page { padding-block: 26px 60px; }
.search-summary { margin-bottom: 22px; font-family: var(--font-ui); font-size: 14px; color: var(--ink-muted); }
.search-summary strong { color: var(--ink-strong); }

.search-hero { padding: 26px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 26px; }
.search-hero form { display: flex; gap: 10px; max-width: 620px; }
.search-hero input { flex: 1; min-width: 0; height: 48px; padding-inline: 15px; border: 1px solid var(--line-input); border-radius: var(--radius); font-size: 15px; }
.search-hero input:focus { outline: 0; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(41,74,122,.1); }
.search-hero .btn-base { height: 48px; }

/* live suggestions dropdown */
.search-suggest {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 420px; overflow-y: auto;
    z-index: 90;
    display: none;
}
.search-suggest.is-open { display: block; }
.search-suggest-group-title {
    padding: 11px 15px 6px;
    font-family: var(--font-ui); font-size: 11px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase; color: var(--ink-faint);
}
.search-suggest-item { display: flex; align-items: center; gap: 12px; padding: 9px 15px; cursor: pointer; }
.search-suggest-item:hover, .search-suggest-item.is-active { background: var(--surface-alt); }
.search-suggest-item img { width: 42px; height: 42px; object-fit: contain; background: var(--surface-alt); border-radius: var(--radius-sm); flex: 0 0 auto; }
.search-suggest-item > span { display: block; flex: 1 1 auto; min-width: 0; }
.search-suggest-item-t {
    display: block;
    font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
    color: var(--ink-strong); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-suggest-item-s { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }
.search-suggest-item mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; }
.search-suggest-empty { padding: 24px 15px; text-align: center; font-size: 13.5px; color: var(--ink-muted); }
.search-suggest-all { display: block; padding: 12px 15px; text-align: center; background: var(--surface-alt); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--navy-600); }
.search-suggest-all:hover { background: #eef1f5; }

.header-desktop-search1 { position: relative; }

/* ===============================================================
   G. CONTACT
   =============================================================== */
.contact-page { padding-block: 26px 60px; }
.contact-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }

.contact-info-card { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.contact-info-item { display: flex; gap: 14px; padding-block: 15px; border-bottom: 1px solid var(--line); }
.contact-info-item:last-child { border-bottom: 0; }
.contact-info-item i { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; color: var(--red-500); }
.contact-info-item strong { display: block; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-muted); margin-bottom: 3px; }
.contact-info-item span, .contact-info-item a { font-size: 14px; color: var(--ink-strong); line-height: 1.6; }
.contact-info-item a:hover { color: var(--red-500); }

.contact-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 22px; aspect-ratio: 16 / 9; background: var(--surface-alt); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------
   Product clip trigger under the gallery (reference: .galleryvideo_click)
   --------------------------------------------------------------- */
/* Reference: a 69px pink-to-red gradient bar 30px under the gallery, with the
   play badge centred and no label beside it. */
.galleryvideo_click {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 69px;
    margin-top: 30px;
    padding: 0 14px;
    background: linear-gradient(to right, #f857a6, #ff5858);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    transition: filter .18s var(--ease);
}
.galleryvideo_click:hover { filter: brightness(1.06); }

/* Pulsing play badge — the reference's .button.is-play with two expanding
   rings behind a red triangle. */
.galleryvideo_click .button.is-play {
    position: relative;
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
}
.galleryvideo_click .button-outer-circle {
    position: absolute;
    inset: 0;
    border: 2px solid var(--red-500);
    border-radius: 50%;
    opacity: 0;
    animation: pgPlayPulse 3s infinite cubic-bezier(.36, .11, .89, .32);
}
.galleryvideo_click .has-delay-short { animation-delay: 1.5s; }
@keyframes pgPlayPulse {
    from { transform: scale(1);   opacity: .9; }
    to   { transform: scale(1.7); opacity: 0; }
}
.galleryvideo_click .button-icon.is-play {
    position: relative;
    z-index: 1;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--red-grad);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    padding-left: 2px;                 /* optically centre the triangle */
}
@media (prefers-reduced-motion: reduce) {
    .galleryvideo_click .button-outer-circle { animation: none; opacity: .35; }
}

/* Inline video panel that opens under the gallery (reference: #videoCover) */
.galleryvideodetail {
    position: relative;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}
.galleryvideodetail video,
.galleryvideodetail iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}
.galleryvideodetail .closem {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55);
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.galleryvideodetail .closem:hover { background: rgba(0, 0, 0, .8); }

/* Long description / specs, full width beneath the two columns */
.urun-detay-desc-main {
    max-width: var(--container);
    margin: 40px auto 0;
    padding-inline: var(--gutter);
}