/* ============================================================
   ÇALIŞKAN OFİS — REDESIGN OVERLAY (Faz 0+)
   theme.css'ten SONRA yüklenir; tema dosyasına dokunulmaz.
   Yeni bölümler .co-* sınıflarıyla yazılır, mevcut bileşenler
   hedefli override edilir. Token'lar --co- önekiyle tanımlıdır.
   ============================================================ */

:root {
    /* Renk token'ları — premium üretici marka paleti (yeşilimsi antrasit + altın) */
    --co-primary:       #16211f;  /* derin yeşil-antrasit — ana marka rengi */
    --co-primary-soft:  #24332f;
    --co-primary-line:  #35473f;
    --co-accent:        #c8a35d;  /* altın — vurgu / CTA (koyu zeminde) */
    --co-accent-dark:   #a3823f;  /* açık zeminde okunur altın */
    --co-accent-soft:   #f3ecdd;
    --co-ink:           #121817;  /* metin */
    --co-muted:         #65706d;
    --co-surface:       #f7f4ed;  /* krem zemin */
    --co-line:          #e6dfd2;
    --co-white:         #ffffff;

    /* Biçim token'ları */
    --co-radius:        12px;
    --co-radius-sm:     8px;
    --co-shadow:        0 10px 30px rgba(30, 39, 50, .08);
    --co-shadow-soft:   0 4px 14px rgba(30, 39, 50, .06);
    --co-font:          "Rubik", "Lato", sans-serif;
    --co-font-display:  "Playfair Display", Georgia, "Times New Roman", serif; /* premium başlık serif'i */
}

/* Seçim rengi — küçük premium dokunuş */
::selection { background: var(--co-accent); color: var(--co-primary); }

/* ============================================================
   1) GLOBAL RAFİNE — yüksek görünürlüklü bileşen override'ları
   ============================================================ */

/* Bölüm başlıkları: serif display — premium imza */
.section-title {
    font-family: var(--co-font-display);
    font-weight: 600 !important;
    letter-spacing: 0;
    color: var(--co-ink);
}
/* Hero banner başlıkları da serif imzaya bağlanır (Poppins yerine) */
.cofis-banner .cofis-baslik,
.cofis-banner .cofis-yan-baslik {
    font-family: var(--co-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Ana butonlar: tema mavisi (#377dff) → antrasit */
.btn-primary {
    background-color: var(--co-primary);
    border-color: var(--co-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--co-primary-soft);
    border-color: var(--co-primary-soft);
    box-shadow: var(--co-shadow-soft);
}
.btn-outline-primary {
    color: var(--co-primary);
    border-color: var(--co-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--co-primary);
    border-color: var(--co-primary);
    color: #fff;
}

/* Satın alma / ana CTA (btn-success): yeşil → altın, koyu metin */
.btn-success {
    background-color: var(--co-accent);
    border-color: var(--co-accent);
    color: var(--co-primary);
    font-weight: 600;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--co-accent-dark);
    border-color: var(--co-accent-dark);
    color: #fff;
}

/* Banner slick pagination: cofis-banner-dots sınıfının stili yok —
   stilsiz <ul> varsayılan madde imi olarak sızıyordu. */
.cofis-banner .cofis-banner-main { position: relative; }
.cofis-banner-dots {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}
.cofis-banner-dots li { margin: 0; line-height: 0; }
.cofis-banner-dots li button {
    font-size: 0;
    line-height: 0;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(30, 39, 50, .25);
    cursor: pointer;
    transition: all .2s ease;
}
.cofis-banner-dots li.slick-active button {
    background: var(--co-accent-dark);
    width: 22px;
    border-radius: 50rem;
}

/* ============================================================
   2) ORTAK YAPI TAŞLARI (.co-*)
   ============================================================ */

/* Bölüm üstü küçük etiket (eyebrow) — açık zeminde koyu altın, koyu zeminde altın */
.co-eyebrow {
    display: inline-block;
    font-family: var(--co-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--co-accent-dark);
    margin-bottom: 10px;
}
.co-eyebrow::after {
    content: "";
    display: inline-block;
    width: 34px;
    height: 1px;
    background: var(--co-accent);
    vertical-align: middle;
    margin-left: 12px;
    opacity: .6;
}
/* ortalanmış başlıklarda çizgisiz kullanım */
.co-eyebrow--merkez::after { display: none; }

/* Altın zemin CTA — koyu metinle (kontrast) */
.co-btn-accent {
    display: inline-block;
    background: var(--co-accent);
    color: var(--co-primary) !important;
    font-family: var(--co-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 13px 30px;
    border-radius: 50rem;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.co-btn-accent:hover {
    background: #d8b56e;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(200, 163, 93, .38);
    text-decoration: none;
}

/* Açık zeminde koyu hat CTA */
.co-btn-outline {
    display: inline-block;
    color: var(--co-primary) !important;
    border: 1.5px solid var(--co-primary);
    background: transparent;
    font-family: var(--co-font);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.co-btn-outline:hover {
    background: var(--co-primary);
    color: #fff !important;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Açık zemin üzerinde hat CTA */
.co-btn-ghost {
    display: inline-block;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .45);
    font-family: var(--co-font);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 28px;
    border-radius: 50rem;
    transition: border-color .2s ease, background .2s ease;
}
.co-btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
}

/* ============================================================
   4) ÜRETİM GÜCÜMÜZ BANDI (anasayfa — fabrika videosu solda,
      2x2 üretim kabiliyeti kartları sağda)
   ============================================================ */

/* ============================================================
   Üretim Gücümüz (mockup birebir): kicker + ince geometrik başlık,
   fotoğraf üstü AKTİF ÜRETİM pili + alt yazı bloğu, sağda numaralı
   pastel kartlar (beyaz yuvarlak ikon + sağ-alt ↗ ok).
   ============================================================ */
#co-uretim {
    --co-geo: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
}
.co-fab-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}
.co-fab-eyebrow {
    display: block;
    font-family: var(--co-geo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8f887d;
    margin-bottom: 8px;
}
.co-fab-head h2 {
    font-family: var(--co-geo);
    font-size: clamp(30px, 3vw, 50px);
    font-weight: 300;
    letter-spacing: -.01em;
    color: var(--co-ink);
    line-height: 1.05;
    margin: 0;
}
.co-fab-head p {
    margin: 34px 0 0;
    max-width: 460px;
    color: var(--co-muted);
    font-family: var(--co-geo);
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
}

.co-fab-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
    align-items: stretch;
}

/* Sol: fabrika videosu (fotoğraf sahnesi) */
.co-fab-media {
    position: relative;
    min-height: 560px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--co-primary);
}
.co-fab-media > a {
    position: absolute;
    inset: 0;
    display: block;
}
.co-fab-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.co-fab-media > a::after {
    /* alt yazı bloğu için aşağı doğru koyulaşan degrade (mockup) */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .06) 34%, rgba(0, 0, 0, .62) 100%);
}
.co-fab-media .co-play {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(22, 19, 15, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform .2s ease, background .2s ease;
}
.co-fab-media .co-play::after {
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
    margin-left: 5px;
}
.co-fab-media a:hover .co-play {
    background: rgba(22, 19, 15, .92);
    transform: translate(-50%, -50%) scale(1.07);
}

/* Sol üst: AKTİF ÜRETİM pili */
.co-fab-pill {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(22, 19, 15, .78);
    backdrop-filter: blur(6px);
    color: #f4efe7;
    font-family: var(--co-geo);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 9px 14px;
    border-radius: 999px;
    pointer-events: none;
}
.co-fab-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e0402e;
    animation: coFabNabiz 1.6s ease-in-out infinite;
}
@keyframes coFabNabiz {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* Alt yazı bloğu (beyaz kart yerine fotoğraf üstü metin — mockup) */
.co-fab-rozet {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 26px;
    max-width: 520px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    pointer-events: none;
    z-index: 2;
}
.co-fab-rozet-kicker {
    display: block;
    font-family: var(--co-geo);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(244, 239, 229, .72);
    margin-bottom: 10px;
}
.co-fab-rozet h3 {
    font-family: var(--co-geo);
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 300;
    letter-spacing: 0;
    color: #fff;
    line-height: 1.18;
    margin: 0 0 10px;
}
.co-fab-rozet p {
    margin: 0;
    color: rgba(244, 239, 229, .78);
    font-family: var(--co-geo);
    font-size: 13px;
    line-height: 1.5;
}

/* Sağ: 2x2 numaralı pastel kartlar */
.co-fab-kartlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.co-fab-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #efece5;
    border-radius: 14px;
    padding: 22px;
    min-height: 268px;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.co-fab-kart:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(47, 44, 40, .09);
    text-decoration: none;
}
/* mockup pastel tonları */
.co-fab-kart--1 { background: #efe5d8; }
.co-fab-kart--2 { background: #ececea; }
.co-fab-kart--3 { background: #eae5e2; }
.co-fab-kart--4 { background: #e4e9e0; }
.co-fab-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: auto;
}
.co-fab-ikon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;   /* mockup: tam daire değil, yumuşak köşeli kare (squircle) */
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-ink);
    line-height: 0;        /* satır yüksekliği ikonun ortalamasını kaydırmasın */
}
.co-fab-ikon .co-line-icon {
    display: block;        /* svg baseline kayması olmadan tam merkez */
    width: 21px;
    height: 21px;
    stroke-width: 1.5;
    margin: 0;
}
.co-line-icon {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    stroke-width: 1.45;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.co-fab-no {
    font-family: var(--co-geo);
    font-size: 11px;
    letter-spacing: .08em;
    color: #a49d92;
}
.co-fab-govde { padding-right: 42px; }
.co-fab-kart h3 {
    font-family: var(--co-geo);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--co-ink);
    line-height: 1.2;
    margin: 18px 0 7px;
}
.co-fab-kart p {
    color: var(--co-muted);
    font-family: var(--co-geo);
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0;
}
.co-fab-ok {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(47, 44, 40, .18);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--co-ink);
    transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.co-fab-kart:hover .co-fab-ok {
    transform: rotate(45deg);
    background: var(--co-ink);
    color: #fff;
    border-color: var(--co-ink);
}

@media (max-width: 1199px) {
    .co-fab-media { min-height: 460px; }
    .co-fab-kart { min-height: 236px; }
}
@media (max-width: 991px) {
    .co-fab-head { display: block; }
    .co-fab-head p { text-align: left; margin: 10px 0 0; }
    .co-fab-grid { grid-template-columns: 1fr; }
    .co-fab-media { min-height: 360px; }
    .co-fab-kart { min-height: 0; }
    .co-fab-govde { padding-right: 0; }
    .co-fab-kart h3 { margin-top: 26px; }
}
@media (max-width: 640px) {
    .co-fab-kartlar { grid-template-columns: 1fr; }
    .co-fab-media { min-height: 280px; }
    .co-fab-rozet {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: none;
        padding: 16px 18px;
    }
    .co-fab-rozet h3 { font-size: 18px; }
}

/* v291 referansı: görselli atölye kartları ve geniş üretim sahnesi */
#co-uretim {
    width: 100%;
    max-width: none !important;
    margin-bottom: 0 !important;
    padding: 86px 4.5vw 96px;
    background: #f5f4f2;
    box-sizing: border-box;
}
#co-uretim .co-fab-head {
    max-width: 1720px;
    margin: 0 auto 34px;
    align-items: flex-end;
    gap: 50px;
}
#co-uretim .co-fab-eyebrow {
    margin-bottom: 12px;
    font-size: 10px;
    letter-spacing: .16em;
    color: #8b857d;
}
#co-uretim .co-fab-head h2 {
    margin: 0;
    color: #2f2c28;
    font-size: clamp(38px, 4.2vw, 66px);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 500;
}
#co-uretim .co-fab-head p {
    max-width: 470px;
    margin: 0 0 6px;
    color: #777169;
    font-size: 13px;
    line-height: 1.55;
    text-align: right;
}
#co-uretim .co-fab-grid {
    max-width: 1720px;
    min-height: 600px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
    gap: 18px;
}
#co-uretim .co-fab-media {
    min-height: 600px;
    overflow: hidden;
    border-radius: 26px;
    background: #211e1b;
}
#co-uretim .co-fab-media img {
    object-position: center center;
}
#co-uretim .co-fab-media > a::after {
    background: linear-gradient(0deg, rgba(24, 22, 20, .72) 0%, rgba(24, 22, 20, .08) 52%, rgba(24, 22, 20, 0) 100%);
}
#co-uretim .co-play {
    display: none;
}
#co-uretim .co-fab-pill {
    top: 24px;
    left: 24px;
    min-height: 38px;
    padding: 0 14px;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(30, 28, 25, .38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 9px;
    letter-spacing: .14em;
}
#co-uretim .co-fab-pill i {
    width: 7px;
    height: 7px;
    background: #d71920;
    box-shadow: 0 0 0 4px rgba(215, 25, 32, .18);
}
#co-uretim .co-fab-rozet {
    left: 30px;
    right: 30px;
    bottom: 28px;
    max-width: 590px;
    padding: 0;
}
#co-uretim .co-fab-rozet-kicker {
    margin-bottom: 9px;
    color: rgba(255, 255, 255, .68);
    font-size: 9px;
    letter-spacing: .15em;
}
#co-uretim .co-fab-rozet h3 {
    max-width: 560px;
    margin: 0 0 11px;
    font-size: clamp(25px, 2.3vw, 39px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 500;
}
#co-uretim .co-fab-rozet p {
    max-width: 520px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.55;
}
#co-uretim .co-fab-kartlar {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
#co-uretim .co-fab-kart {
    height: 293px;
    min-height: 293px;
    padding: 0 23px 20px;
    overflow: visible;
    border-radius: 24px;
    box-sizing: border-box;
    transition: transform .24s ease, box-shadow .24s ease;
}
#co-uretim .co-fab-kart:hover,
#co-uretim .co-fab-kart:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(47, 44, 40, .10);
    outline: none;
}
#co-uretim .co-fab-kart--1 { background: #e9e2d8; }
#co-uretim .co-fab-kart--2 { background: #e4e8e7; }
#co-uretim .co-fab-kart--3 { background: #e8e3e5; }
#co-uretim .co-fab-kart--4 { background: #e1e7df; }
#co-uretim .co-fab-medya {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    height: 166px;
    overflow: hidden;
    border-radius: 17px;
    background: #d8d4ce;
}
#co-uretim .co-fab-medya img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
#co-uretim .co-fab-ust {
    display: none;
}
#co-uretim .co-fab-govde {
    position: absolute;
    left: 23px;
    right: 58px;
    bottom: 22px;
    padding: 0;
}
#co-uretim .co-fab-kart h3 {
    margin: 0 0 7px;
    color: #2f2c28;
    font-size: 18px;
    line-height: 1.18;
    letter-spacing: -.025em;
}
#co-uretim .co-fab-kart p {
    max-width: 100%;
    margin: 0;
    color: #706a62;
    font-size: 11.5px;
    line-height: 1.55;
}
#co-uretim .co-fab-ok {
    right: 20px;
    bottom: 20px;
    width: 31px;
    height: 31px;
    color: #2f2c28;
}
#co-uretim .co-fab-kart:hover .co-fab-ok,
#co-uretim .co-fab-kart:focus-visible .co-fab-ok {
    transform: rotate(45deg);
    background: #2f2c28;
    color: #fff;
    border-color: #2f2c28;
}
@media (max-width: 1100px) {
    #co-uretim .co-fab-grid { grid-template-columns: 1fr; }
    #co-uretim .co-fab-media { min-height: 520px; }
}
@media (max-width: 720px) {
    #co-uretim { padding: 58px 20px 68px; }
    #co-uretim .co-fab-head { display: block; }
    #co-uretim .co-fab-head p { margin-top: 13px; text-align: left; }
    #co-uretim .co-fab-media { min-height: 430px; }
    #co-uretim .co-fab-kartlar { grid-template-columns: 1fr; }
    #co-uretim .co-fab-kart { height: 260px; min-height: 260px; }
    #co-uretim .co-fab-medya { height: 142px; }
}

/* ============================================================
   5) KATEGORİLER — fiyatlı kategori grid'i (v55 prototipi birebir)
   Kaynak: ANA_SAYFA_ARAS_GALERI_KAYDIRMA_DUZELTME_v55.html
   #priced-category-section-style bloğu
   ============================================================ */

.priced-category-section {
    padding: 74px 4.4vw 88px;
    background: #F5F4F2;
    /* prototipin "vitra-like" geometrik sans yığını — bölüme özel */
    font-family: Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
}
.priced-category-inner {
    max-width: 97%;
    margin: 0 auto;
}
.priced-category-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    align-items: end;
    gap: 48px;
    margin-bottom: 50px;
}
.priced-category-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: #8B857D;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
}
.priced-category-kicker::before {
    content: "";
    width: 34px;
    height: 1px;
    background: #D71920;
}
.priced-category-heading h2 {
    margin: 0;
    color: #2F2C28;
    font-family: inherit;
    font-size: clamp(36px, 3.2vw, 52px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.048em;
    text-transform: none;
}
.priced-category-heading > p {
    max-width: 500px;
    margin: 0 0 3px auto;
    color: #746F67;
    font-size: 13px;
    line-height: 1.7;
}
.priced-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.priced-category-card {
    position: relative;
    min-width: 0;
    min-height: 205px;
    padding: 24px 20px 20px;
    border: 1px solid rgba(47, 44, 40, .055);
    border-radius: 20px;
    overflow: hidden;
    color: #2F2C28;
    display: grid;
    grid-template-columns: minmax(138px, .9fr) minmax(150px, 1.1fr);
    align-items: center;
    text-decoration: none;
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.priced-category-card:hover,
.priced-category-card:focus {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(47, 44, 40, .09);
    text-decoration: none;
    color: #2F2C28;
}
.priced-category-card.tone-sage  { background: #E9EEE9; }
.priced-category-card.tone-cream { background: #EFEDE7; }
.priced-category-card.tone-blush { background: #F0E9E6; }
.priced-category-card.tone-stone { background: #ECECE9; }
.priced-category-card.tone-sand  { background: #EEE9E1; }
.priced-card-copy {
    position: relative;
    z-index: 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.priced-card-copy h3 {
    max-width: 180px;
    margin: 0 0 23px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: inherit;
}
.priced-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #5F7066;
}
.priced-card-price strong {
    font-size: 21px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.035em;
}
.priced-card-price span {
    font-size: 11px;
    font-weight: 600;
}
.priced-card-copy small {
    display: block;
    margin-top: 8px;
    color: #8A7766;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .025em;
}
.priced-card-visual {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.priced-card-visual img {
    width: 112%;
    height: 112%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    filter: saturate(.88) contrast(.98);
    transition: transform .32s ease;
}
.priced-category-card:hover .priced-card-visual img {
    transform: scale(1.045);
}
.priced-card-arrow {
    position: absolute;
    z-index: 4;
    right: 15px;
    top: 15px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(47, 44, 40, .16);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-style: normal;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.priced-category-card:hover .priced-card-arrow {
    background: #2F2C28;
    color: #fff;
    transform: rotate(45deg);
}
/* İndirimli teşhir kartı — %50 etiketli özel kart */
.discount-card-special {
    background: linear-gradient(135deg, #F2ECE6 0%, #EDE7DD 100%);
}
.discount-visual {
    align-items: center;
    justify-content: center;
}
.discount-tag {
    width: 154px;
    height: 126px;
    padding: 14px;
    border-radius: 24px 24px 24px 8px;
    background: #FFF7EF;
    color: #2F2C28;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(5deg);
    box-shadow: 0 16px 32px rgba(47, 44, 40, .09);
}
.discount-tag::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #E6DED3;
    left: 15px;
    top: 15px;
}
.discount-tag span {
    font-size: 7px;
    letter-spacing: .12em;
    font-weight: 700;
}
.discount-tag strong {
    color: #75A02F;
    font-size: 48px;
    line-height: .9;
    font-weight: 700;
}
.discount-tag b {
    color: #29366F;
    font-size: 13px;
    letter-spacing: .08em;
}

/* ------------------------------------------------------------
   Bağımsız İş Ortaklığı kartı — grid'in son hücresi
   (v358 mockup "partnership-category-card-v336" karşılığı).
   Koyu zeminli kart; sağdaki Bronz/Gold/Black kart destesi
   görsel değil, --print* değişkenleriyle çizilen CSS katmanları.
   ------------------------------------------------------------ */
.partnership-category-card-v336 {
    /* metin kolonu diğer kartlardan biraz geniş — başlık iki satıra sığsın */
    grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr);
    background-color: #100E0C;
    background-image:
        radial-gradient(92% 112% at 82% 26%, rgba(184, 118, 54, .28) 0%, rgba(118, 68, 24, .12) 38%, rgba(16, 14, 12, 0) 70%),
        linear-gradient(142deg, #17130F 0%, #100E0C 52%, #1B1510 100%);
    border-color: rgba(255, 255, 255, .07);
    color: #F5F0E9;
}
.partnership-category-card-v336:hover,
.partnership-category-card-v336:focus {
    color: #F5F0E9;
    box-shadow: 0 22px 46px rgba(16, 14, 12, .38);
}
.partnership-category-kicker-v336 {
    display: block;
    margin: 0 0 11px;
    color: rgba(224, 193, 154, .88);
    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .17em;
}
.partnership-category-card-v336 .priced-card-copy h3 {
    max-width: 100%;
    margin: 0 0 15px;
    color: #FFFFFF;
    font-size: 13px;
    letter-spacing: -.012em;
}
.partnership-card-tiers-v336 {
    display: flex;
    gap: 5px;
}
.partnership-card-tiers-v336 span {
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 4px;
    color: rgba(245, 240, 233, .78);
    font-size: 6.5px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
}
.partnership-category-card-v336 .priced-card-arrow {
    border-color: rgba(255, 255, 255, .26);
    color: #F5F0E9;
}
.partnership-category-card-v336:hover .priced-card-arrow {
    background: #F5F0E9;
    color: #17130F;
}
.partnership-program-visual-v336 {
    height: 100%;
    overflow: visible;
}
.partnership-mini-stack-v336 {
    position: relative;
    width: 100%;
    height: 148px;
}
.partnership-mini-card-v336 {
    /* Bronz varyantı taban değerlerdir; gold/black aşağıda override eder */
    --print: #4F220D;
    --print-hi: rgba(255, 224, 194, .40);
    --print-lo: rgba(55, 16, 3, .82);
    position: absolute;
    width: 104px;
    height: 66px;
    padding: 7px 8px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* logo + seviye adı üst şeritte kalır; deste üst üste binince
       her kartın adı görünür durumda olur */
    justify-content: flex-start;
    gap: 4px;
    background-color: var(--print);
    background-image:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 6%, var(--print-hi) 33%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(298deg, var(--print-lo) 0%, rgba(0, 0, 0, 0) 48%),
        linear-gradient(158deg, rgba(255, 255, 255, .13) 0%, rgba(0, 0, 0, .26) 100%);
    background-size: 103% 108%;
    background-position: center;
    box-shadow: 0 14px 26px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255, 255, 255, .10);
    transition: transform .34s ease;
}
.partnership-mini-card-v336 > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.partnership-mini-card-v336 b {
    color: rgba(255, 250, 244, .95);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .04em;
}
.partnership-mini-card-v336 b em {
    color: #E7B361;
    font-style: normal;
}
.partnership-mini-card-v336 small {
    color: rgba(255, 246, 236, .55);
    font-size: 4.6px;
    font-weight: 600;
    letter-spacing: .18em;
}
.partnership-mini-card-v336 strong {
    color: #FFFFFF;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .06em;
}
.partnership-mini-card-v336 span {
    display: block;
    margin-top: auto;
    color: rgba(255, 244, 232, .50);
    font-size: 4.2px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: .07em;
}
.partnership-mini-silver-v336 {
    top: 0;
    left: 0;
    z-index: 1;
    transform: rotate(-8deg);
}
.partnership-mini-gold-v336 {
    --print: #5B3605;
    --print-hi: rgba(255, 235, 174, .46);
    --print-lo: rgba(61, 31, 2, .84);
    top: 38px;
    left: 22px;
    z-index: 2;
    transform: rotate(-5deg);
}
.partnership-mini-platinum-v336 {
    --print: #16151A;
    --print-hi: rgba(226, 228, 236, .22);
    --print-lo: rgba(4, 4, 6, .88);
    top: 76px;
    left: 44px;
    z-index: 3;
    transform: rotate(-2deg);
}
.partnership-mini-platinum-v336 b em { color: #C9CCD6; }
.partnership-category-card-v336:hover .partnership-mini-silver-v336   { transform: rotate(-11deg) translate(-5px, -6px); }
.partnership-category-card-v336:hover .partnership-mini-gold-v336     { transform: rotate(-5deg)  translate(0, -2px); }
.partnership-category-card-v336:hover .partnership-mini-platinum-v336 { transform: rotate(-1deg)  translate(6px, 4px); }

@media (max-width: 1320px) {
    .priced-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .priced-category-heading { grid-template-columns: 1fr; gap: 16px; }
    .priced-category-heading > p { margin-left: 0; }
    .priced-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .priced-category-section { padding: 56px 16px 66px; }
    .priced-category-heading h2 { font-size: 36px; }
    .priced-category-grid { grid-template-columns: 1fr; gap: 12px; }
    .priced-category-card { min-height: 190px; }
    .partnership-category-card-v336 { grid-template-columns: minmax(140px, 1fr) minmax(130px, 1fr); }
}

/* ============================================================
   5b) İNDİRİMLİ FIRSAT ÜRÜNLERİ — v55 prototipi "discount-hero" birebir
   Kaynak: ANA_SAYFA_ARAS_GALERI_KAYDIRMA_DUZELTME_v55.html
   Override zinciri düzleştirildi → efektif: 560px yükseklik,
   solda yeşil metin paneli + sağda 2 tam-boy görsel kart.
   ============================================================ */

.discount-hero {
    background: #F5F4F2;
    font-family: Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
}
.discount-hero-wrap {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 20px;
    min-height: 560px;
}
.discount-main {
    position: relative;
    background: #C9D3C7;
    height: 560px;
    min-height: 560px;
    display: grid;
    grid-template-columns: 160px 1fr;
    overflow: hidden;
}
.discount-side-accent {
    background: #B4C2B2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
}
.discount-side-accent .accent-bar {
    width: 72px;
    height: 190px;
    border-radius: 34px;
    background: #E4ECE1;
    transform-origin: center bottom;   /* ünlemin gövdesi noktaya doğru vursun */
}
.discount-side-accent .accent-dot {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #E4ECE1;
    transform-origin: center top;
}
/* Panele gelince ünlem kalp atışı gibi vurur: çift vuruş (lup-dup) + dinlenme */
@keyframes coUnlemKalp {
    0%, 100% { transform: scale(1); }
    12%      { transform: scale(1.14); }
    24%      { transform: scale(.98); }
    36%      { transform: scale(1.09); }
    50%      { transform: scale(1); }
}
.discount-main:hover .accent-bar,
.discount-main:hover .accent-dot {
    animation: coUnlemKalp 1.25s cubic-bezier(.36, .07, .19, .97) infinite;
}
.discount-main:hover .accent-dot { animation-delay: .09s; } /* nokta bir tık geriden vurur — nabız hissi */
@media (prefers-reduced-motion: reduce) {
    .discount-main:hover .accent-bar,
    .discount-main:hover .accent-dot { animation: none; }
}
.discount-main-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 42px 38px 34px;
}
.discount-kicker {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    color: #2F2C28;
    margin-bottom: 18px;
}
.discount-main-copy h2 {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: clamp(42px, 4.2vw, 68px);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 600;
    color: #2F2C28;
    text-transform: none;
}
.discount-main-copy p {
    margin: 0 0 22px;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.5;
    color: #415142;
}
.discount-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    background: #2F2C28;
    color: #F5F4F2;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    width: max-content;
    transition: background .22s ease, transform .22s ease;
}
.discount-main-btn:hover,
.discount-main-btn:focus {
    background: #1d1b18;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.discount-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: 20px;
    height: 560px;
    min-height: 560px;
}
.discount-card {
    position: relative;
    overflow: hidden;
    height: 560px;
    min-height: 560px;
    background: #D9DED6;
    display: block;
}
.discount-card,
.discount-card:hover { text-decoration: none; }
.discount-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.discount-card:hover img { transform: scale(1.045); }
.discount-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .02) 18%, rgba(0, 0, 0, .48) 100%);
}
.discount-card-copy {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}
.discount-card-copy h3 {
    margin: 0;
    font-family: inherit;
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 600;
    color: #fff;
    max-width: 82%;
}
.discount-card-copy span {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    transform: translateY(-2px);
}
@media (max-width: 1280px) {
    .discount-hero-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
    .discount-main {
        grid-template-columns: 110px 1fr;
        height: auto;
        min-height: 560px;
    }
    .discount-side-accent .accent-bar { width: 54px; height: 180px; }
    .discount-side-accent .accent-dot { width: 54px; height: 54px; }
    .discount-main-copy { padding: 42px 28px 42px 26px; }
    .discount-main-copy h2 { font-size: clamp(42px, 9vw, 64px); }
    .discount-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        min-height: 0;
    }
    .discount-card { min-height: 320px; height: 320px; }
    /* dar ekranda başlık + "İncele" yan yana sığmıyor → alt alta, kırpılma önlenir */
    .discount-card-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
    .discount-card-copy h3 { max-width: 100%; }
}
@media (max-width: 680px) {
    /* dekoratif şeridi incelt + başlığı küçült → büyük başlık dar ekranda taşmaz */
    .discount-main {
        grid-template-columns: 66px 1fr;
        min-height: 480px;
    }
    .discount-side-accent { gap: 22px; }
    .discount-side-accent .accent-bar { width: 34px; height: 120px; }
    .discount-side-accent .accent-dot { width: 34px; height: 34px; }
    .discount-main-copy { padding: 34px 22px 34px 20px; }
    .discount-main-copy h2 { font-size: clamp(32px, 8.5vw, 52px); }
}

/* ============================================================
   6) ÜRÜN KARTLARI — hafif premium rötuş (anasayfa + listeleme)
   ============================================================ */

.urun_kutu.card {
    border-radius: var(--co-radius);
    overflow: hidden;
}

/* fiyat: tema turuncusu yerine bronz */
.urun_kutu .text-warning {
    color: var(--co-accent-dark) !important;
}

/* ============================================================
   7) PROJE VİTRİNİ + YORUMLAR — zemin ve başlık uyumu
   ============================================================ */

.projeler-vitrin-block {
    background: var(--co-surface);
}
.proje-vitrin-item { border-radius: var(--co-radius); }
.proje-vitrin-item:hover .proje-vitrin-overlay {
    background: linear-gradient(to top, rgba(30, 39, 50, .92) 0%, rgba(0, 0, 0, 0) 100%);
}

.testimonial-block.bg-gray-2 { background: var(--co-surface) !important; }
.testimonial-block .card { border-radius: var(--co-radius); border-color: var(--co-line) !important; }
/* Yorum metinleri serif italik — editoryal his */
.testimonial-block .card p {
    font-family: var(--co-font-display);
    font-style: italic;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--co-muted) !important;
}

/* ============================================================
   9) SÜREÇ BANDI — "Proje nasıl ilerler?" 6 adım
   ============================================================ */

.co-steps-section {
    /* krem zemin + köşelerde flu altın/antrasit ışımalar */
    background:
        radial-gradient(560px 340px at 10% 15%, rgba(200, 163, 93, .12), transparent 70%),
        radial-gradient(640px 400px at 90% 88%, rgba(22, 33, 31, .06), transparent 70%),
        var(--co-surface);
    padding: 62px 0 56px;
    margin-bottom: 34px;
    position: relative;
    overflow: hidden;
}
/* geometrik formlar: sağ üstte ince altın halka (haleli), sol altta döndürülmüş kare */
.co-steps-section::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -110px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(163, 130, 63, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 52px rgba(163, 130, 63, .05);
    pointer-events: none;
}
.co-steps-section::after {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -100px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(163, 130, 63, .18);
    border-radius: 30px;
    transform: rotate(45deg);
    pointer-events: none;
}
.co-steps-section .container { position: relative; z-index: 1; }
.co-steps-head { text-align: center; margin-bottom: 32px; }
.co-steps-head h2 {
    font-family: var(--co-font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--co-ink);
    margin: 0 0 8px;
}
.co-steps-head p { color: var(--co-muted); font-size: 14.5px; margin: 0; }
/* Bağlı zaman çizelgesi: altın ray üzerinde numaralı düğümler + asılı kartlar */
.co-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.co-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.co-flow-head {
    position: relative;
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* nodes arası altın hat — soldan sağa hafif koyulaşan */
.co-flow-head::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(200, 163, 93, .30), rgba(200, 163, 93, .62));
    z-index: 0;
}
/* uçları düğümde bitir (dışarı taşma olmasın) */
.co-flow-step:first-child .co-flow-head::before { left: 50%; }
.co-flow-step:last-child  .co-flow-head::before { right: 50%; }
.co-flow-node {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #e7ce8f, var(--co-accent) 58%, var(--co-accent-dark));
    color: var(--co-primary);
    font-family: var(--co-font-display);
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--co-surface);   /* rayı düğüm çevresinde kesen halka */
    box-shadow: 0 6px 16px rgba(200, 163, 93, .40);
    transition: transform .22s ease, box-shadow .22s ease;
}
.co-flow-body {
    position: relative;
    width: 100%;
    flex: 1;
    margin-top: 10px;
    background: var(--co-white);
    border: 1px solid var(--co-line);
    border-radius: 16px;
    padding: 20px 16px 18px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(30, 39, 50, .04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.co-flow-ikon {
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
    color: var(--co-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .22s ease;
}
.co-flow-ikon .co-line-icon { width: 30px; height: 30px; stroke-width: 1.4; }
.co-flow-body h3 {
    font-family: var(--co-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--co-ink);
    margin: 0 0 5px;
    letter-spacing: -.01em;
}
.co-flow-body p { font-size: 12.5px; color: var(--co-muted); margin: 0; line-height: 1.5; }
/* hover — kart yükselir, düğüm parlar, ikon koyulaşır */
.co-flow-step:hover .co-flow-body {
    transform: translateY(-4px);
    box-shadow: var(--co-shadow);
    border-color: rgba(200, 163, 93, .5);
}
.co-flow-step:hover .co-flow-node {
    transform: scale(1.08);
    box-shadow: 0 9px 22px rgba(200, 163, 93, .55);
}
.co-flow-step:hover .co-flow-ikon { color: var(--co-primary); }

/* Süreç bandı altı tetikleyici CTA satırı */
.co-steps-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.co-steps-cta .not {
    flex-basis: 100%;
    text-align: center;
    font-size: 13px;
    color: var(--co-muted);
    margin-top: 10px;
}

@media (max-width: 991px) {
    .co-flow { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
    /* satırlar sarıldığında ray kopuk görünmesin — gizle */
    .co-flow-head::before { display: none; }
}
@media (max-width: 575px) {
    .co-flow { grid-template-columns: repeat(2, 1fr); }
    .co-steps-head h2 { font-size: 24px; }
}

/* ============================================================
   11) ÇALIŞMA ALANI ÇÖZÜMLERİ — kullanım senaryosu kartları (2x4)
   ============================================================ */

/* ============================================================
   Çalışma Alanı Çözümleri (mockup birebir): geometrik başlık,
   sağ-alt yuvarlak ↗ ok, muted ikon, koyu "Savunma Sanayi" kartı.
   ============================================================ */
.co-rooms-section {
    --co-geo: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    padding: 86px 4.5vw 96px;
    background: #f5f4f2;
}
.co-rooms-section > .container {
    width: 100%;
    max-width: 1720px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.co-rooms-section .co-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 38px;
}
.co-rooms-section .co-eyebrow {
    display: block;
    margin-bottom: 13px;
    font-family: var(--co-geo);
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .18em;
    color: #8b857d;
}
.co-rooms-section .co-eyebrow::after {
    display: none;
}
.co-rooms-section .co-section-head h2 {
    font-family: var(--co-geo);
    font-size: clamp(38px, 4vw, 64px);
    font-weight: 500;
    letter-spacing: -.052em;
    color: #2f2c28;
    margin: 0;
    line-height: .96;
}
.co-rooms-section .co-section-head p {
    position: relative;
    margin: 0 0 6px;
    padding-bottom: 7px;
    color: #7c776f;
    font-family: var(--co-geo);
    font-size: 13px;
    white-space: nowrap;
}
.co-rooms-section .co-section-head p::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #2f2c28;
    opacity: .38;
    transform: scaleX(.42);
    transform-origin: left;
    transition: transform .35s ease, opacity .35s ease;
}
.co-rooms-section:hover .co-section-head p::after {
    opacity: .72;
    transform: scaleX(1);
}
.co-sol-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.co-sol-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: auto;
    padding: 18px 20px 22px;
    overflow: visible;
    isolation: isolate;
    background: #efeeea;
    border: 1px solid rgba(47, 44, 40, .045);
    border-radius: 24px;
    color: #2f2c28;
    transition: transform .34s cubic-bezier(.2, .7, .2, 1), background .34s ease, border-color .34s ease, box-shadow .34s ease;
}
.co-sol-card:nth-child(2n) {
    background: #eceae6;
}
.co-sol-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -82px;
    right: -72px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, 0) 72%);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .38s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.co-sol-card::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: #b8ab98;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.co-sol-card:hover,
.co-sol-card:focus-visible {
    transform: translateY(-7px) scale(1.008);
    background: #fff;
    border-color: rgba(47, 44, 40, .12);
    box-shadow: 0 22px 48px rgba(47, 44, 40, .095);
    outline: none;
    text-decoration: none;
}
.co-sol-card:hover::before,
.co-sol-card:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}
.co-sol-card:hover::after,
.co-sol-card:focus-visible::after {
    transform: scaleX(1);
}
.co-sol-gorsel {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 0 18px;
    overflow: hidden;
    border-radius: 24px;
    background: #f6f3ee;
    box-shadow: inset 0 0 0 1px rgba(47, 44, 40, .035);
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), box-shadow .34s ease;
}
.co-sol-gorsel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    border-radius: 24px;
}
.co-sol-gorsel-hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .32s ease;
}
.co-sol-gorsel-ana {
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity .32s ease;
}
.co-sol-card--hover-image .co-sol-gorsel:hover .co-sol-gorsel-ana,
.co-sol-card--hover-image:focus-visible .co-sol-gorsel-ana {
    opacity: 0;
}
.co-sol-card--hover-image .co-sol-gorsel:hover .co-sol-gorsel-hover,
.co-sol-card--hover-image:focus-visible .co-sol-gorsel-hover {
    opacity: 1;
}
.co-sol-card:hover .co-sol-gorsel,
.co-sol-card:focus-visible .co-sol-gorsel {
    transform: translateY(-2px);
}
.co-sol-metin {
    margin-top: 0;
    padding: 0 4px 38px;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}
.co-sol-card:hover .co-sol-metin,
.co-sol-card:focus-visible .co-sol-metin {
    transform: translateY(-2px);
}
.co-sol-kicker {
    display: block;
    font-family: var(--co-geo);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .56);
    margin-bottom: 7px;
}
.co-sol-card h3 {
    font-family: var(--co-geo);
    font-size: 17px;
    font-weight: 600;
    color: #2f2c28;
    margin: 0 0 9px;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.co-sol-card p {
    font-family: var(--co-geo);
    max-width: 280px;
    font-size: 11.5px;
    color: #777169;
    margin: 0;
    line-height: 1.55;
}
.co-sol-ok {
    position: absolute;
    right: 20px;
    bottom: 18px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(47, 44, 40, .18);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: inherit;
    background: transparent;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), background .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.co-sol-card:hover .co-sol-ok,
.co-sol-card:focus-visible .co-sol-ok {
    transform: translate(2px, -2px) rotate(45deg) scale(1.06);
    background: #2f2c28;
    color: #fff;
    border-color: #2f2c28;
    box-shadow: 0 8px 18px rgba(47, 44, 40, .16);
}

/* Koyu kart — "Savunma Sanayi / Özel Projelendirme" */
.co-sol-card.co-sol-cta {
    background: radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .06), transparent 28%), linear-gradient(145deg, #292622, #211e1b);
    color: #fff;
}
.co-sol-cta::before {
    top: -95px;
    right: -75px;
    width: 220px;
    height: 220px;
    background: repeating-radial-gradient(circle at center, rgba(255, 255, 255, .08) 0 1px, transparent 1px 7px);
    opacity: .36;
    transform: scale(.9) rotate(-12deg);
}
.co-sol-cta::after {
    background: #c2b49e;
}
.co-sol-card.co-sol-cta:hover,
.co-sol-card.co-sol-cta:focus-visible {
    background: radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .09), transparent 32%), linear-gradient(145deg, #302c28, #201d1a);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 24px 52px rgba(31, 28, 24, .24);
}
.co-sol-card.co-sol-cta:hover::before,
.co-sol-card.co-sol-cta:focus-visible::before {
    opacity: .62;
    transform: scale(1.06) rotate(0deg);
}
.co-sol-cta .co-sol-gorsel {
    background: rgba(255, 255, 255, .06);
}
.co-sol-cta .co-sol-gorsel img {
    filter: brightness(.88) contrast(1.06) saturate(.92);
}
.co-sol-cta h3 { color: #fff; }
.co-sol-cta p { color: rgba(255, 255, 255, .68); }
.co-sol-cta .co-sol-ok { border-color: rgba(255, 255, 255, .28); color: #fff; }
.co-sol-cta:hover .co-sol-ok,
.co-sol-cta:focus-visible .co-sol-ok { background: #fff; color: #24211e; border-color: #fff; }

@media (max-width: 1200px) {
    .co-sol-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .co-rooms-section { padding: 58px 20px 68px; }
    .co-rooms-section .co-section-head { display: block; }
    .co-rooms-section .co-section-head p { display: inline-block; margin-top: 12px; white-space: normal; }
    .co-sol-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .co-rooms-section *,
    .co-rooms-section *::before,
    .co-rooms-section *::after {
        transition: none !important;
    }
}

/* ============================================================
   12) FOOTER ÜSTÜ CTA BANDI
   ============================================================ */

.co-footer-cta {
    background: linear-gradient(180deg, var(--co-white), var(--co-surface));
    padding: 50px 0;
}
.co-footer-cta h2 {
    font-family: var(--co-font-display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--co-ink);
    margin: 0 0 8px;
}
.co-footer-cta p { color: var(--co-muted); font-size: 15px; margin: 0; }
.co-footer-cta .co-cta-butonlar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.co-btn-dark {
    display: inline-block;
    background: var(--co-primary);
    color: #fff !important;
    font-family: var(--co-font);
    font-size: 14px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 50rem;
    transition: background .2s ease, transform .2s ease;
}
.co-btn-dark:hover {
    background: var(--co-primary-soft);
    transform: translateY(-2px);
    text-decoration: none;
}
@media (max-width: 767px) {
    .co-footer-cta { text-align: center; }
    .co-footer-cta .co-cta-butonlar { justify-content: center; margin-top: 18px; }
    .co-footer-cta h2 { font-size: 22px; }
}

/* ============================================================
   13) HERO BANNER — turuncu (#f79e1d) kontroller altın palete bağlanır
   ============================================================ */

.cofis-banner .cofis-etiket {
    background: var(--co-accent-soft) !important;
    color: var(--co-accent-dark) !important;
    letter-spacing: .14em !important;
}
.cofis-banner .cofis-btn,
.cofis-banner .cofis-yan-btn {
    background: var(--co-accent) !important;
    color: var(--co-primary) !important;
    border-radius: 50rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
}
.cofis-banner .cofis-btn:hover,
.cofis-banner .cofis-yan-btn:hover {
    background: #d8b56e !important;
    filter: none !important;
}
.cofis-banner .cofis-yan-pill {
    background: rgba(200, 163, 93, .18) !important;
    color: var(--co-accent) !important;
    letter-spacing: .12em !important;
}

/* ============================================================
   14) FOOTER — koyu premium zemin
   (cart-sidebar da footer include'unda; stiller > div ile
   footer bloklarına kapsamlanır, aside'a sızmaz)
   ============================================================ */

footer.footer {
    background: var(--co-primary);
    margin-top: 0 !important;
}
footer.footer > .bg-light,
footer.footer > .space-1 { background: transparent !important; }
footer.footer > div h4 { color: #fff; }
footer.footer > div .text-gray-1,
footer.footer > div address span,
footer.footer > div p { color: rgba(255, 255, 255, .6) !important; }
footer.footer > div .text-primary { color: var(--co-accent) !important; }
footer.footer > div .fill-primary { fill: var(--co-accent) !important; }
footer.footer > div .list-group-item {
    background: transparent !important;
    color: rgba(255, 255, 255, .72) !important;
}
footer.footer > div a.list-group-item:hover { color: var(--co-accent) !important; }
footer.footer > div .btn-social .btn-icon__inner { color: rgba(255, 255, 255, .8); }
footer.footer > div .btn-social:hover .btn-icon__inner { color: var(--co-accent); }
footer.footer > div .border-color-8,
footer.footer > .border-top,
footer.footer > .border-bottom { border-color: rgba(255, 255, 255, .12) !important; }
footer.footer > div .form-control {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}
footer.footer > div .form-control::placeholder { color: rgba(255, 255, 255, .4); }
footer.footer > div .btn-primary {
    background: var(--co-accent) !important;
    border-color: var(--co-accent) !important;
    color: var(--co-primary) !important;
    font-weight: 600;
}
footer.footer > div img[alt*="Logo"] {
    filter: brightness(0) invert(1);
    opacity: .92;
}
footer.footer > div .max-width-40 {
    background: #fff;
    border-radius: 6px;
    padding: 3px;
}
footer.footer > div .bootstrap-select .btn {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .22) !important;
}

/* ============================================================
   15) OFİS PLANLAYICI — premium yapıya uygun yeniden derleme
   ============================================================ */

.co-planner {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--co-white);
    /* teknik çizim kağıdı dokusu — planlayıcı temasına gönderme */
    background-image:
        linear-gradient(rgba(163, 130, 63, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(163, 130, 63, .06) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid var(--co-line);
    border-radius: var(--co-radius);
    box-shadow: var(--co-shadow-soft);
    padding: 30px 34px;
}
.co-planner-ikon {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--co-accent-soft);
    color: var(--co-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-planner-ikon svg { width: 30px; height: 30px; }
.co-planner-metin { flex: 1 1 auto; min-width: 0; }
.co-planner-metin .rozet {
    display: inline-block;
    font-family: var(--co-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--co-accent-dark);
    margin-bottom: 6px;
}
.co-planner-metin h3 {
    font-family: var(--co-font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--co-ink);
    margin: 0 0 5px;
    line-height: 1.25;
}
.co-planner-metin p {
    font-size: 14px;
    color: var(--co-muted);
    margin: 0;
    line-height: 1.6;
}
.co-planner > .co-btn-accent { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 767px) {
    .co-planner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 28px 22px;
    }
    .co-planner-metin h3 { font-size: 20px; }
}

/* ============================================================
   16) MİKRO RÖTUŞLAR
   ============================================================ */

/* Yapışkan header altında anchor hedefleri gizlenmesin */
#co-kategoriler, #co-uretim { scroll-margin-top: 110px; }

/* Ürün kartlarında yumuşak görsel yaklaşması */
.urun_kutu .card-img-top { transition: transform .35s ease; }
.urun_kutu:hover .card-img-top { transform: scale(1.03); }

/* "Hemen Teslim" rozeti — yeşil yerine altın ton */
.badge-soft-success {
    background: var(--co-accent-soft) !important;
    color: var(--co-accent-dark) !important;
    letter-spacing: .04em;
}

/* Yorum avatarlarına ince altın halka */
.testimonial-block .card-img .rounded-circle {
    border: 2px solid var(--co-accent);
    padding: 2px;
    background: #fff;
}

/* ============================================================
   13) EDİTORYAL HERO — tam ekran; header hero üstüne biner
   (nowshopfun konsepti: sol büyük görsel + sağ koyu panel)
   ============================================================ */

.co-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(400px, 34%);
    min-height: 40vh;
    background: var(--co-primary);
    overflow: hidden;
}
.co-hero-media { position: relative; }
.co-hero-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.1s ease;   /* yalnız düz crossfade — zoom yok */
    will-change: opacity;
}
.co-hero-gorsel.aktif {
    opacity: 1;
}
.co-hero-media::after {
    /* üstte hafif karartma — şeffaf header'ın okunurluğu */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 12, 11, .42), rgba(8, 12, 11, 0) 32%);
    pointer-events: none;
}
.co-hero-panel {
    position: relative;
    display: grid;            /* slayt içerikleri üst üste (1/1) yığılır */
    align-items: center;
    justify-items: center;
    text-align: center;
    padding: 170px 44px 100px;   /* üst pay: bindirilmiş header */
    color: #efe9dd;
}
.co-hero-icerik {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s ease;
    pointer-events: none;
    visibility: hidden;
}
.co-hero-icerik.aktif {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .25s;   /* görsel geçişiyle zarif bindirme */
    pointer-events: auto;
    visibility: visible;
}
.co-hero-eyebrow {
    font-family: var(--co-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(239, 233, 221, .5);
    margin-bottom: 22px;
}
.co-hero-baslik {
    font-family: var(--co-font-display);
    font-size: clamp(40px, 3.6vw, 58px);
    color: #f3eee4;
    line-height: 1.08;
    letter-spacing: 0;
    margin: 0 0 18px;
}
.co-hero-baslik em { font-style: italic; font-weight: 600; }
.co-hero-baslik span { font-weight: 300; }
.co-hero-metin {
    font-family: var(--co-font);
    font-size: 15px;
    color: rgba(239, 233, 221, .64);
    line-height: 1.65;
    max-width: 340px;
    margin: 0 0 32px;
}
.co-hero-cta {
    display: inline-block;
    background: var(--co-accent);
    color: var(--co-primary);
    font-family: var(--co-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 2px;
    transition: background .2s ease, transform .2s ease;
}
.co-hero-cta:hover {
    background: #d9bb77;
    color: var(--co-primary);
    text-decoration: none;
    transform: translateY(-2px);
}
.co-hero-sayac {
    /* sağ altta chatbot/WhatsApp butonları olduğundan sol alta konumlanır */
    position: absolute;
    left: 42px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.co-hero-dial {
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);   /* ilerleme 12 yönünden başlar */
}
.co-hero-dial circle {
    fill: none;
    stroke-width: 1.8;
}
.co-hero-dial .zemin { stroke: rgba(239, 233, 221, .25); }
.co-hero-dial .ilerleme {
    stroke: var(--co-accent);
    stroke-linecap: round;
    stroke-dasharray: 56.55;     /* 2πr, r=9 */
    stroke-dashoffset: 56.55;
    animation: co-dial-akis 6.5s linear forwards;   /* süre JS'teki SURE ile aynı */
}
@keyframes co-dial-akis {
    from { stroke-dashoffset: 56.55; }
    to   { stroke-dashoffset: 0; }
}
.co-hero-no {
    background: none;
    border: 0;
    padding: 4px 2px;
    cursor: pointer;
    font-family: var(--co-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    color: rgba(239, 233, 221, .38);
    transition: color .25s ease;
}
.co-hero-no:hover { color: rgba(239, 233, 221, .75); }
.co-hero-no.aktif { color: #f3eee4; font-weight: 600; }

/* ============================================================
   HEADER DİL SEÇİCİ (bootstrap-select) — çerçeve/kutu kaldırıldı
   .btn-light varsayılan #f8f9fa zemin+border'ı koyu header üstünde
   açık gri kutu olarak sızıyordu; diğer header öğeleri (sepet, üyelik)
   gibi çerçevesiz olsun. Tüm sayfalarda geçerli; metin RENGİ header
   durumuna göre co-hero-header kurallarında ayarlanır.
   ============================================================ */
.u-header .bootstrap-select > .btn {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transition: color .2s ease;
}
.u-header .bootstrap-select > .btn:hover,
.u-header .bootstrap-select > .btn:focus,
.u-header .bootstrap-select > .btn:active,
.u-header .bootstrap-select.show > .btn {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   ARAMA ÖNERİ PANELİ (En çok aranan ürünler) — logo/nav çakışması
   KÖK NEDEN: hero header'da topbar'a verdiğimiz backdrop-filter blur
   bir STACKING CONTEXT yaratıyor → arama paneli (topbar içinde) z-index
   ne olursa olsun topbar'ın içine hapsoluyor; topbar DOM'da nav'dan
   ÖNCE ve z:auto olduğu için nav (js-mega-menu z:10) panelin üstünde
   kalıp logoyu panele sızdırıyordu (özellikle co-beyaz durumda).
   ÇÖZÜM: topbar'ı nav'ın üstüne çıkar (z-index:20) — @media bloğunda
   backdrop-filter'ın yanında. Burada panele yalnız temiz kart görünümü
   (dolu zemin + gölge + radius) veriliyor. (Tüm sayfalarda geçerli.)
   ============================================================ */
.u-header .u-search-slide-down {
    z-index: 1080 !important;
    background: #fff;
    box-shadow: 0 18px 44px rgba(18, 24, 23, .16);
    border-radius: 6px;
    overflow: hidden;
}

/* ============================================================
   ARAMA PANELİ (.co-arama) — inc/ust.php'de baştan yazıldı
   Yapı: arama çubuğu → gövde (canlı sonuç / varsayılan durum) → alt şerit.
   Varsayılan durum sunucudan gelir (son aramalar localStorage'dan JS ile),
   canlı sonuçlar /call/aramaoneri/ JSON ucundan.
   Tema .u-search-slide-down kutusunun içini tamamen devralır.
   ============================================================ */
.u-header .co-arama {
    --ara-ink:   #2f2c28;
    --ara-muted: #6e6961;
    --ara-line:  #e4e0d8;
    --ara-soft:  #f5f4f2;
    --ara-gold:  #a3823f;
    --ara-font:  Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;

    width: min(560px, calc(100vw - 32px)) !important;
    border-radius: 2px;
    border: 1px solid var(--ara-line);
    box-shadow: 0 26px 64px rgba(18, 24, 23, .20);
    font-family: var(--ara-font);
    color: var(--ara-ink);
}
.co-arama .co-arama__form { display: flex; flex-direction: column; max-height: min(78vh, 680px); }

/* --- Arama çubuğu --- */
.co-arama__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--ara-line);
    background: #fff;
}
.co-arama__ikon { font-size: 17px; color: var(--ara-muted); flex: none; }
.co-arama__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 60px;
    border: 0;
    background: transparent;
    font-family: var(--ara-font);
    font-size: 15px;
    color: var(--ara-ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.co-arama__input::placeholder { color: #a8a29a; }
.co-arama__input::-webkit-search-cancel-button { display: none; }
.co-arama__temizle {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--ara-soft);
    color: var(--ara-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.co-arama__temizle:hover { background: #ebe8e1; color: var(--ara-ink); }
.co-arama__gonder {
    flex: none;
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 2px;
    background: var(--ara-ink);
    color: #fff;
    font-family: var(--ara-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease;
}
.co-arama__gonder:hover { background: #16130f; }

/* --- Gövde --- */
.co-arama__govde { overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 4px; }
.co-arama__blok { padding: 10px 0 6px; }
.co-arama__blok + .co-arama__blok { border-top: 1px solid var(--ara-line); }
.co-arama__blok-bas {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px 10px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ara-muted);
}
.co-arama__blok-bas em { font-style: normal; letter-spacing: .06em; color: var(--ara-gold); }
.co-arama__blok-bas button {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--ara-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ara-muted);
    cursor: pointer;
}
.co-arama__blok-bas button:hover { color: var(--ara-ink); text-decoration: underline; }

/* --- Ürün satırı --- */
.co-arama__satir {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 13px;
    padding: 9px 16px;
    color: var(--ara-ink);
    transition: background .14s ease;
}
.co-arama__satir:hover,
.co-arama__satir.is-aktif { background: var(--ara-soft); text-decoration: none; color: var(--ara-ink); }
.co-arama__gorsel {
    width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0efec;
    border: 1px solid var(--ara-line);
    border-radius: 2px;
    overflow: hidden;
}
.co-arama__gorsel img { width: 100%; height: 100%; object-fit: contain; }
.co-arama__metin { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-arama__metin strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.co-arama__metin small {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ara-muted);
}
.co-arama__metin mark { background: rgba(200, 163, 93, .32); color: inherit; padding: 0 1px; border-radius: 2px; }
.co-arama__ok { font-size: 13px; color: var(--ara-muted); opacity: 0; transition: opacity .14s ease, transform .14s ease; }
.co-arama__satir:hover .co-arama__ok,
.co-arama__satir.is-aktif .co-arama__ok { opacity: 1; transform: translateX(2px); }

/* --- Çipler (kategori, hızlı erişim, son aramalar) --- */
.co-arama__cipler { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 6px; }
.co-arama__cip {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid var(--ara-line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--ara-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ara-ink);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.co-arama__cip:hover,
.co-arama__cip.is-aktif {
    background: var(--ara-ink);
    border-color: var(--ara-ink);
    color: #fff;
    text-decoration: none;
}
.co-arama__cip mark { background: rgba(200, 163, 93, .32); color: inherit; }
.co-arama__cip:hover mark, .co-arama__cip.is-aktif mark { background: rgba(200, 163, 93, .5); }

/* --- Yükleniyor iskeleti --- */
.co-arama__iskelet { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.co-arama__iskelet span {
    display: block;
    height: 40px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f2f0ec 25%, #e9e6e0 37%, #f2f0ec 63%);
    background-size: 400% 100%;
    animation: coAraParilti 1.2s ease infinite;
}
.co-arama__iskelet span:nth-child(2) { width: 88%; }
.co-arama__iskelet span:nth-child(3) { width: 72%; }
@keyframes coAraParilti { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .co-arama__iskelet span { animation: none; } }

/* --- Sonuç yok --- */
.co-arama__bos { padding: 26px 16px 22px; text-align: center; }
.co-arama__bos strong { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.co-arama__bos span { display: block; font-size: 12px; line-height: 1.55; color: var(--ara-muted); }

/* --- Alt şerit --- */
.co-arama__alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border-top: 1px solid var(--ara-line);
    background: var(--ara-soft);
}
.co-arama__ipucu { font-size: 9.5px; letter-spacing: .06em; color: var(--ara-muted); }
.co-arama__ipucu b {
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid var(--ara-line);
    border-radius: 3px;
    background: #fff;
    font-weight: 700;
}
.co-arama__ipucu i { font-style: normal; opacity: .5; margin: 0 3px; }
.co-arama__tumu {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 15px;
    border: 1px solid var(--ara-ink);
    border-radius: 2px;
    background: var(--ara-ink);
    color: #fff;
    font-family: var(--ara-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease;
}
.co-arama__tumu:hover { background: #16130f; }

@media (max-width: 767px) {
    .u-header .co-arama { width: calc(100vw - 24px) !important; }
    .co-arama__input { height: 54px; font-size: 14px; }
    .co-arama__ipucu { display: none; }
    .co-arama__alt { justify-content: flex-end; }
}

/* --- Header'ın hero üstüne binmesi (yalnız xl) — 3 durum:
       (temel)   şeffaf, hero üstünde absolute; beyaz linkler + beyaz logo
       .co-beyaz menü/dropdown hover'ı veya scroll → bar beyaz, linkler koyu
       .co-sabit scroll sonrası → fixed + yukarıdan süzülme + gölge, topbar gizli
       Durumları index.php'deki header IIFE'si yönetir. --- */
@media (min-width: 1200px) {
    .co-hero-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
    }
    .co-hero-header .u-header__section {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        transition: background-color .25s ease;
    }
    /* üst şerit: yarı saydam koyu cam (beyaz durumda da koyu kalır — nowshopfun gibi)
       z-index:20 → backdrop-filter'ın yarattığı stacking context'i nav'ın (js-mega-menu
       z:10) ÜSTÜNE al ki içindeki arama paneli logonun altında kalmasın (co-beyaz bug'ı). */
    .co-hero-header .u-header__topbar {
        position: relative;
        z-index: 20;
        background: rgba(8, 13, 12, .5);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    }
    .co-hero-header .u-header__topbar .text-dark,
    .co-hero-header .u-header__topbar .u-header__navbar-link {
        color: #ece7db !important;
    }
    .co-hero-header .u-header__topbar .u-header__navbar-link[style*="whitesmoke"] {
        background: rgba(255, 255, 255, .1) !important;
    }
    .co-hero-header .navbar-brand img { transition: filter .25s ease; }
    .co-hero-header .u-header__nav-link,
    .co-hero-header .flaticon-shopping-basket,
    .co-hero-header .btn-ghost-primary,
    .co-hero-header .bootstrap-select > .btn { transition: color .25s ease; }

    /* ŞEFFAF DURUM — beyaz logo + beyaz linkler */
    .co-hero-header:not(.co-beyaz) .navbar-brand img {
        filter: brightness(0) invert(1);
    }
    .co-hero-header:not(.co-beyaz) .u-header__nav-link,
    .co-hero-header:not(.co-beyaz) .u-header__navbar-nav > .nav-item > .nav-link {
        color: #fff !important;
    }
    .co-hero-header:not(.co-beyaz) .u-header__nav-link:hover {
        color: var(--co-accent) !important;
    }
    .co-hero-header:not(.co-beyaz) .flaticon-shopping-basket,
    .co-hero-header:not(.co-beyaz) .btn-ghost-primary,
    .co-hero-header:not(.co-beyaz) .btn-ghost-primary .text-primary-max-lg {
        color: #fff !important;
    }
    .co-hero-header:not(.co-beyaz) .btn-ghost-primary:hover {
        color: var(--co-accent) !important;
        background: transparent !important;
    }
    .co-hero-header:not(.co-beyaz) .bootstrap-select > .btn {
        color: #fff !important;
        background: transparent !important;
    }
    .co-hero-header:not(.co-beyaz) .bootstrap-select > .btn:hover,
    .co-hero-header:not(.co-beyaz) .bootstrap-select > .btn:focus,
    .co-hero-header:not(.co-beyaz) .bootstrap-select.show > .btn {
        color: var(--co-accent) !important;
    }

    /* BEYAZ DURUM — dropdown hover'ı veya scroll: bar beyaz, linkler koyu, logo renkli */
    .co-hero-header.co-beyaz .u-header__section {
        background: #fff !important;
    }
    .co-hero-header.co-beyaz .u-header__nav-link,
    .co-hero-header.co-beyaz .u-header__navbar-nav > .nav-item > .nav-link {
        color: var(--co-ink) !important;
    }
    .co-hero-header.co-beyaz .u-header__nav-link:hover {
        color: var(--co-accent-dark) !important;
    }
    .co-hero-header.co-beyaz .flaticon-shopping-basket,
    .co-hero-header.co-beyaz .btn-ghost-primary,
    .co-hero-header.co-beyaz .btn-ghost-primary .text-primary-max-lg {
        color: var(--co-ink) !important;
    }
    .co-hero-header.co-beyaz .btn-ghost-primary:hover {
        color: var(--co-accent-dark) !important;
        background: transparent !important;
    }
    .co-hero-header.co-beyaz .bootstrap-select > .btn {
        color: var(--co-ink) !important;
        background: transparent !important;
    }
    .co-hero-header.co-beyaz .bootstrap-select > .btn:hover,
    .co-hero-header.co-beyaz .bootstrap-select > .btn:focus,
    .co-hero-header.co-beyaz .bootstrap-select.show > .btn {
        color: var(--co-accent-dark) !important;
    }

    /* SABİT DURUM — scroll: fixed, yukarıdan süzülür, gölge; topbar gizli */
    .co-hero-header.co-sabit {
        position: fixed;
        animation: co-header-in .35s ease;
    }
    .co-hero-header.co-sabit .u-header__section {
        box-shadow: 0 8px 28px rgba(18, 24, 23, .1) !important;
    }
    .co-hero-header.co-sabit .u-header__topbar { display: none; }
}
@keyframes co-header-in {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ALT SAYFA STICKY HEADER (.co-sabit-alt) — inc/ust.php'deki script ekler.
   Anasayfadaki .co-sabit ile aynı dil: fixed + yukarıdan süzülme, topbar
   gizli, dolu beyaz zemin (u-header--bg-transparent-xl şeffaf bıraktığı için
   zemin AÇIKÇA verilmeli, yoksa içerik header'ın içinden görünür). */
@media (min-width: 1200px) {
    .u-header.co-sabit-alt {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        animation: co-header-in .35s ease;
    }
    .u-header.co-sabit-alt .u-header__section {
        background-color: rgba(245, 244, 242, .97) !important;   /* mockup header zemini */
        box-shadow: 0 8px 28px rgba(18, 24, 23, .08) !important;
    }
    .u-header.co-sabit-alt .u-header__topbar { display: none; }
}

@media (max-width: 1199px) {
    /* header normal akışta (beyaz) kalır; hero alta iner */
    .co-hero { grid-template-columns: 1fr; min-height: 0; }
    .co-hero-media { min-height: 46vh; }
    .co-hero-panel { padding: 56px 24px 84px; }
}
@media (max-width: 575px) {
    .co-hero-media { min-height: 38vh; }
    .co-hero-baslik { font-size: 34px; }
    .co-hero-sayac { left: 24px; bottom: 22px; }
}

/* ============================================================
   KATEGORİ HERO — ürün liste sayfası üst tanıtım bandı
   urunler.php'de render edilir; admin'den yönetilir (hero_* alanları).
   Yapı image 2 ile birebir: sol koyu panel (üst etiket + başlık +
   açıklama + özellik çipleri) / sağ tam boy görsel.
   Renk/font .co-cat-hero üzerindeki --cath-* değişkenleriyle kolayca
   değiştirilebilir (varsayılan: mockup — sıcak kahve + kırmızı çip,
   ince geometrik sans başlık).
   ============================================================ */
.co-cat-hero {
    --cath-bg:      #3a342d;                     /* mockup: sıcak koyu kahve/antrasit panel */
    --cath-bg1:     #3a342d;                     /* panelin düz renk karşılığı (degrade kullanıldığında geçişler için) */
    --cath-title:   #f5f1e9;                     /* başlık (krem-beyaz) */
    --cath-eyebrow: rgba(244, 239, 229, .62);    /* üst etiket (sıcak muted) */
    --cath-text:    rgba(244, 239, 229, .72);    /* açıklama */
    --cath-dot:     #e0402e;                     /* mockup: parlak kırmızı çip noktası */
    --cath-feat:    rgba(244, 239, 229, .88);    /* özellik metni */
    /* mockup'un ince geometrik sans'ı (Windows'ta Century Gothic'e düşer) */
    --cath-font:    Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;

    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 650px;
    background: var(--cath-bg);
    overflow: hidden;
}
.co-cat-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 84px clamp(32px, 4vw, 72px) 84px clamp(28px, 7vw, 132px);
}
.co-cat-hero__eyebrow {
    font-family: var(--cath-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--cath-eyebrow);
    margin: 0 0 28px;
}
.co-cat-hero__title {
    font-family: var(--cath-font);
    font-weight: 300;
    font-size: clamp(44px, 4.8vw, 92px);
    line-height: 1;
    letter-spacing: .01em;
    color: var(--cath-title);
    max-width: 13ch;   /* mockup'taki gibi uzun adlar alt satıra kırılır (Makam / Masaları) */
    margin: 0 0 26px;
}
.co-cat-hero__desc {
    font-family: var(--cath-font);
    font-size: 19px;
    line-height: 1.65;
    color: var(--cath-text);
    max-width: 100%;
    margin: 0 0 38px;
}
.co-cat-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.co-cat-hero__features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--cath-font);
    font-size: 15.5px;
    color: var(--cath-feat);
}
.co-cat-hero__features li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cath-dot);
    flex: 0 0 auto;
}
.co-cat-hero__media { position: relative; }
.co-cat-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}
/* mockup'ta panel ↔ görsel geçişi KESKİN; degrade yalnız mobil dikey yığında kullanılır */

@media (max-width: 991px) {
    .co-cat-hero { grid-template-columns: 1fr; min-height: 0; }
    .co-cat-hero__copy { padding: 44px 24px 40px; order: 2; }
    .co-cat-hero__media { order: 1; min-height: 240px; }
    .co-cat-hero__title { max-width: none; }
    .co-cat-hero__media::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(0deg, var(--cath-bg1, #3a342d) 0%, rgba(0,0,0,0) 22%);
    }
}
@media (max-width: 575px) {
    .co-cat-hero__media { min-height: 200px; }
    .co-cat-hero__title { font-size: 40px; }
    .co-cat-hero__desc { font-size: 16px; }
    .co-cat-hero__features { gap: 10px 22px; }
}

/* ============================================================
   PLP — ÜRÜN LİSTE SAYFASI (mockup düzeni)
   Üst şerit (başlık + sayaç + sıralama) → sol filtre kolonu +
   3 kolonlu ürün grid'i. Kategori hero ile aynı geometrik sans
   dili kullanılır. urunler.php içinde render edilir.
   ============================================================ */
/* Yeniden kullanılabilir renk utility'si (bg-white gibi ama bizim yumuşak gri tonumuz).
   İstediğin div'e class olarak eklenir; tema class'larına dokunmaz. */
.co-bg-soft { background-color: #f4f4f4 !important; }

.co-plp-zemin { --plp-font: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif; }

/* --- Üst şerit --- */
.co-plp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 34px 0 30px;
}
.co-plp-title {
    font-family: var(--plp-font);
    font-weight: 300;
    font-size: clamp(30px, 2.6vw, 44px);
    line-height: 1.1;
    color: #1d1a16;
    margin: 0 0 8px;
}
.co-plp-alt {
    font-family: var(--plp-font);
    font-size: 14.5px;
    color: #8a857c;
    margin: 0;
}
.co-plp-sort {
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--plp-font);
    font-size: 14px;
    color: #1d1a16;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231d1a16' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center;
    border: 1px solid #d8d3ca;
    border-radius: 2px;
    padding: 12px 44px 12px 16px;
    cursor: pointer;
    min-width: 180px;
}
.co-plp-sort:focus { outline: none; border-color: #1d1a16; }

/* --- İki kolonlu gövde --- */
.co-plp-wrap {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.co-plp-main { min-width: 0; }

/* --- Filtre kolonu --- */
.co-plp-filtre {
    border-top: 1px solid #e2e0dc;
    padding: 20px 0 22px;
}
/* İlk grubun tepesindeki boşta duran çizgi kaldırıldı — "Ayak Malzemesi"
   doğrudan ürün kartlarının üstüyle hizalanır (mockup). Gruplar arası çizgiler kalır. */
.co-plp-filtre:first-child { border-top: 0; padding-top: 2px; }
.co-plp-filtre__baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--plp-font);
    font-size: 15px;
    font-weight: 600;
    color: #1d1a16;
    margin: 0 0 16px;
}
.co-plp-filtre__baslik span { font-weight: 400; color: #8a857c; }
.co-plp-filtre__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 13px;
}
.co-plp-filtre__item:last-child { margin-bottom: 0; }
.co-plp-filtre__adet {
    font-family: var(--plp-font);
    font-size: 11.5px;
    color: #b9b4aa;
}
/* Checkbox: tema mavisi yerine sade koyu kare (mockup) */
.co-plp-side .custom-control { min-height: 0; }
.co-plp-side .custom-control-label {
    font-family: var(--plp-font);
    font-size: 14.5px;
    color: #4a463f;
    cursor: pointer;
}
.co-plp-side .custom-control-label::before {
    width: 18px;
    height: 18px;
    top: 1px;
    border: 1.5px solid #c9c3b9;
    border-radius: 2px;
    background: #fff;
    box-shadow: none !important;
}
.co-plp-side .custom-control-label::after {
    width: 18px;
    height: 18px;
    top: 1px;
}
.co-plp-side .custom-control-input:checked ~ .custom-control-label::before {
    background: #1d1a16;
    border-color: #1d1a16;
}
/* --- Fiyat aralığı --- */
.co-plp-fiyat {
    display: grid;
    grid-template-columns: 1fr 1fr 40px;
    gap: 8px;
}
.co-plp-fiyat input {
    font-family: var(--plp-font);
    font-size: 13.5px;
    color: #1d1a16;
    border: 1px solid #d8d3ca;
    border-radius: 2px;
    padding: 9px 10px;
    min-width: 0;
    -moz-appearance: textfield;
}
.co-plp-fiyat input::-webkit-outer-spin-button,
.co-plp-fiyat input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.co-plp-fiyat input:focus { outline: none; border-color: #1d1a16; }
.co-plp-fiyat button {
    border: 1px solid #1d1a16;
    border-radius: 2px;
    background: #1d1a16;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease;
}
.co-plp-fiyat button:hover { background: #3a342d; }
.co-plp-temizle {
    display: inline-block;
    font-family: var(--plp-font);
    font-size: 13.5px;
    color: #d0402e;
    text-decoration: underline;
    margin-top: 20px;
}
.co-plp-temizle:hover { color: #a92f20; text-decoration: underline; }

/* --- Ürün kartı --- */
.co-plp-card { display: flex; flex-direction: column; }
/* Görsel alanı: karta yayılan sabit oranlı kutu; ilk/ikinci görsel üst üste TAM
   bindirilmiş katmanlardır (theme.css'in top:0 absolute kuralı flex ortalamada
   üstte şerit sızdırıyordu — burada her iki katman inset:0 ile kutuyu doldurur). */
.co-plp-card__media {
    position: relative;
    background: #fff;
    border: 1px solid #e6e5e3;   /* nötr kenar: beyaz kart, gri zeminde net okunur */
    aspect-ratio: 4 / 3;
    min-height: 260px;
    overflow: hidden;
}
.co-plp-card__media a.d-block {
    position: absolute;
    inset: 0;
}
.co-plp-card__media .ilk_resim,
.co-plp-card__media .ikinci_resim {
    position: absolute !important;
    inset: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
}
.co-plp-card__media .ilk_resim { z-index: 2; background: #fff; } /* hover'da kaybolunca alttaki iç mekân görseli belirir */
.co-plp-card__media .ikinci_resim { z-index: 1; }
.co-plp-card__media img.center {
    display: block;
    width: 100%;
    min-height: 0 !important;   /* theme.css'in img.center min-height kuralını ezer */
    max-height: none;
    object-fit: contain;
}
/* Tek görselli ürün: <a> doğrudan img içerir — aynı doldurma */
.co-plp-card__media a.d-block > img.center {
    position: absolute;
    inset: 0;
}
.co-plp-card__rozet {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #16130f;
    color: #fff;
    font-family: var(--plp-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 11px;
}
.co-plp-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 2px 0;
}
.co-plp-card__ad {
    font-family: var(--plp-font);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1d1a16;
    margin: 0 0 4px;
    display: block;
}
.co-plp-card__ad:hover { color: #1d1a16; text-decoration: none; opacity: .75; }
.co-plp-card__meta {
    font-family: var(--plp-font);
    font-size: 13.5px;
    color: #8a857c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co-plp-card__alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 16px;
}
.co-plp-card__fiyat {
    font-family: var(--plp-font);
    font-size: 20px;
    font-weight: 700;
    color: #1d1a16;
    line-height: 1.2;
}
.co-plp-card__fiyat del {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: #b3aea6;
}
.co-plp-card__btn {
    flex: 0 0 auto;
    font-family: var(--plp-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #1d1a16;
    border: 1px solid #1d1a16;
    border-radius: 2px;
    background: transparent;
    padding: 10px 18px;
    transition: background .2s ease, color .2s ease;
}
.co-plp-card__btn:hover {
    background: #1d1a16;
    color: #fff;
    text-decoration: none;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .co-plp-wrap { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 991px) {
    .co-plp-wrap { grid-template-columns: 1fr; }
    /* Mobilde filtreler ürünlerin üstünde kompakt iki kolon akar */
    .co-plp-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
        border-bottom: 1px solid #e7e2d9;
        margin-bottom: 8px;
    }
    .co-plp-side .co-plp-temizle,
    .co-plp-side script { grid-column: 1 / -1; }
    .co-plp-temizle { margin: 4px 0 18px; }
}
@media (max-width: 575px) {
    .co-plp-side { grid-template-columns: 1fr; }
    .co-plp-head { margin: 24px 0 20px; }
    .co-plp-card__media { min-height: 220px; }
}

/* --- PLP sayfalama: bootstrap mavi hap yerine mockup dili (kare, ince çerçeve, koyu aktif) --- */
.co-plp-main .pagination-area { margin: 10px 0 26px; }
.co-plp-main .pagination {
    gap: 8px;
    align-items: center;
}
.co-plp-main .page-item { margin: 0; }
.co-plp-main .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 15px;
    font-family: var(--plp-font);
    font-size: 14px;
    font-weight: 500;
    color: #1d1a16;
    background: #fff;
    border: 1px solid #d8d3ca;
    border-radius: 2px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.co-plp-main .page-link:hover {
    border-color: #1d1a16;
    color: #1d1a16;
    background: #fff;
    text-decoration: none;
}
.co-plp-main .page-item.active .page-link {
    background: #1d1a16;
    border-color: #1d1a16;
    color: #fff;
}
.co-plp-main .page-link .fa {
    font-size: 13px;
    line-height: 1;
}

/* --- PLP seçilmiş filtre çipleri (mockup dili: beyaz, ince çerçeveli, × hover kırmızı) --- */
.co-plp-secili {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
}
.co-plp-secili__etiket {
    font-family: var(--plp-font);
    font-size: 13.5px;
    color: #8a857c;
    margin-right: 4px;
}
.co-plp-cip {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid #d8d3ca;
    border-radius: 2px;
    padding: 7px 13px;
}
.co-plp-cip__kapat {
    cursor: pointer;
    color: #1d1a16;
    font-size: 13px;
    line-height: 1;
    transition: color .2s ease;
}
.co-plp-cip__kapat:hover { color: #d0402e; }
.co-plp-cip__grup {
    display: block;
    font-family: var(--plp-font);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #b9b4aa;
    line-height: 1.3;
}
.co-plp-cip__deger {
    display: block;
    font-family: var(--plp-font);
    font-size: 13.5px;
    font-weight: 600;
    color: #1d1a16;
    line-height: 1.3;
}

/* ============================================================
   PDP HERO — ürün detay üst bandı (mockup: sol tam boy görsel +
   sağ koyu panel; kategori hero'nun aynadaki eşi). urun.php'de
   breadcrumb'dan hemen sonra render edilir.
   ============================================================ */
.co-pdp-hero {
    --pdph-bg:      #3a342d;
    --pdph-title:   #f5f1e9;
    --pdph-eyebrow: rgba(244, 239, 229, .62);
    --pdph-text:    rgba(244, 239, 229, .72);
    --pdph-font:    Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;

    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
    background: var(--pdph-bg);
    overflow: hidden;
}
.co-pdp-hero__media { position: relative; background: #fff; } /* şeffaf PNG ürün görselleri koyu zeminde kalmasın */
.co-pdp-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.co-pdp-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 84px clamp(28px, 6vw, 120px) 84px clamp(32px, 4vw, 72px);
}
.co-pdp-hero__eyebrow {
    font-family: var(--pdph-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--pdph-eyebrow);
    margin: 0 0 26px;
}
.co-pdp-hero__title {
    font-family: var(--pdph-font);
    font-weight: 300;
    font-size: clamp(40px, 4.4vw, 84px);
    line-height: 1.12;
    letter-spacing: .01em;
    color: var(--pdph-title);
    max-width: 12ch;   /* mockup'taki gibi: "Aras" / "Makam Masası" satır kırılımı */
    margin: 0 0 24px;
}
.co-pdp-hero__desc {
    font-family: var(--pdph-font);
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--pdph-text);
    max-width: 520px;
    margin: 0 0 30px;
}
.co-pdp-hero__fiyat {
    font-family: var(--pdph-font);
    font-size: 27px;
    font-weight: 700;
    color: var(--pdph-title);
    margin: 0 0 28px;
}
.co-pdp-hero__fiyat span {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--pdph-text);
    margin-left: 6px;
}
.co-pdp-hero__fiyat del {
    font-size: 15px;
    font-weight: 400;
    color: rgba(244, 239, 229, .45);
    margin-left: 12px;
}
.co-pdp-hero__etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0 0 6px;
    list-style: none;
}
.co-pdp-hero__etiketler li {
    font-family: var(--pdph-font);
    font-size: 12.5px;
    color: rgba(244, 239, 229, .85);
    border: 1px solid rgba(244, 239, 229, .32);
    border-radius: 2px;
    padding: 9px 14px;
}
.co-pdp-hero__btnler {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.co-pdp-hero__btn {
    display: inline-block;
    font-family: var(--pdph-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #f4efe7;
    border: 1px solid rgba(244, 239, 229, .55);
    border-radius: 2px;
    padding: 15px 26px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.co-pdp-hero__btn:hover {
    background: rgba(244, 239, 229, .12);
    color: #fff;
    text-decoration: none;
}
.co-pdp-hero__btn--dolu {
    background: #f4efe7;
    border-color: #f4efe7;
    color: #1d1a16;
}
.co-pdp-hero__btn--dolu:hover {
    background: #fff;
    border-color: #fff;
    color: #1d1a16;
}

@media (max-width: 991px) {
    .co-pdp-hero { grid-template-columns: 1fr; min-height: 0; }
    .co-pdp-hero__media { min-height: 260px; }
    .co-pdp-hero__copy { padding: 40px 24px 44px; }
    .co-pdp-hero__title { max-width: none; }
}
@media (max-width: 575px) {
    .co-pdp-hero__media { min-height: 210px; }
    .co-pdp-hero__title { font-size: 38px; }
    .co-pdp-hero__fiyat { font-size: 23px; }
    .co-pdp-hero__btnler { width: 100%; }
    .co-pdp-hero__btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   PDP MAIN — ürün detay gövdesi (mockup birebir):
   sol yığılı scroll galeri + sağ sticky satın alma paneli.
   Mockup tonları: zemin #F5F4F2, panel #ECEAE6, mürekkep #2F2C28,
   çizgi #D4D0C8, soluk #6E6961. Mevcut işlev sınıfları (image-radio,
   accessory-*, price-text...) sadece GÖRSEL olarak override edilir.
   ============================================================ */
.co-pdpm {
    --pm-bg:#F5F4F2; --pm-surface:#ECEAE6; --pm-ink:#2F2C28;
    --pm-muted:#6E6961; --pm-line:#D4D0C8;
    --pm-font: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;

    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: 36px;
    align-items: start;
    background: var(--pm-bg);
    margin-inline: calc(50% - 50vw);   /* container içinden tam genişliğe taşar (mockup 5vw pad) */
    padding: 48px 5vw 56px;
    font-family: var(--pm-font);
}

/* --- Galeri --- */
.co-pdpm__gallery { position: sticky; top: 96px; height: min(80vh, 760px); min-width: 0; }
.co-pdpm__gviewport { position: relative; height: 100%; background: #F0EFEC; overflow: hidden; isolation: isolate; }
.co-pdpm__gscroll {
    height: 100%;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    display: flex; flex-direction: column; gap: 14px;
    background: #F0EFEC; outline: none; cursor: ns-resize;
}
.co-pdpm__gscroll::-webkit-scrollbar { display: none; }
.co-pdpm__gslide {
    flex: 0 0 auto; width: 100%; aspect-ratio: 3/2; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; overflow: hidden;
}
.co-pdpm__gslide a { display: block; width: 100%; height: 100%; }
.co-pdpm__gslide img { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.co-pdpm__gslide video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.co-pdpm__gfade {
    position: absolute; left: 0; right: 0; height: 96px; z-index: 3;
    pointer-events: none; opacity: 0; transition: opacity .24s ease;
}
.co-pdpm__gfade--top { top: 0; background: linear-gradient(to bottom, #F0EFEC 4%, rgba(240,239,236,.88) 30%, rgba(240,239,236,0) 100%); }
.co-pdpm__gfade--bottom { bottom: 0; background: linear-gradient(to top, #F0EFEC 4%, rgba(240,239,236,.88) 30%, rgba(240,239,236,0) 100%); }
.co-pdpm__gallery.can-scroll-up .co-pdpm__gfade--top,
.co-pdpm__gallery.can-scroll-down .co-pdpm__gfade--bottom { opacity: 1; }
.co-pdpm__gcounter {
    position: absolute; right: 18px; top: 18px; z-index: 4;
    display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px;
    background: rgba(245,244,242,.84); backdrop-filter: blur(7px);
    font-size: 10px; letter-spacing: .09em; color: var(--pm-muted); pointer-events: none;
}
.co-pdpm__gcounter i { display: block; width: 18px; height: 1px; background: rgba(47,44,40,.28); }
.co-pdpm__gactions { position: absolute; left: 16px; bottom: 16px; z-index: 4; display: flex; gap: 8px; }
.co-pdpm__gbtn {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(38,35,31,.86); color: #F5F4F2;
    font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
    padding: 9px 13px; transition: background .2s ease;
}
.co-pdpm__gbtn:hover { background: #16130f; color: #fff; text-decoration: none; }

/* --- Panel --- */
.co-pdpm__panel { position: sticky; top: 96px; align-self: start; background: var(--pm-surface); padding: 30px; min-width: 0; }
.co-pdpm__panel .sag_panel { background: transparent; border: 0; }
.co-pdpm__title {
    font-family: var(--pm-font);
    font-size: 30px; line-height: 1.05; letter-spacing: -.02em;
    font-weight: 500; color: var(--pm-ink); margin: 0 0 8px;
}
.co-pdpm__rating { margin-bottom: 6px; }
.co-pdpm__rating .b_kul { font-size: 12px; color: var(--pm-muted); cursor: pointer; }
.co-pdpm__rating .b_kul:hover { color: var(--pm-ink); text-decoration: none; }
.co-pdpm__mevcut { font-size: 12px; color: var(--pm-muted); margin-bottom: 14px; }
.co-pdpm__mevcut .showroom,
.co-pdpm__mevcut .co-pdpm__harita { color: var(--pm-muted); text-decoration: underline; cursor: pointer; }
.co-pdpm__mevcut .showroom:hover,
.co-pdpm__mevcut .co-pdpm__harita:hover { color: var(--pm-ink); }
.co-pdpm__stok {
    margin-left: 10px; border: 1px solid #c46b5f; color: #b13b32;
    font-size: 10.5px; padding: 3px 8px; letter-spacing: .03em;
}
.co-pdpm__stok:hover { background: #b13b32; color: #fff; text-decoration: none; }

/* Fiyat kutusu — mevcut hook sınıfları yeniden giydirilir */
.co-pdpm .product-price-box {
    padding: 16px 0; margin-bottom: 20px;
    border-top: 1px solid var(--pm-line); border-bottom: 1px solid var(--pm-line);
    background: transparent; text-align: left;
}
.co-pdpm .price-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.co-pdpm .new-price.discount { font-size: 26px; font-weight: 600; color: var(--pm-ink); }
.co-pdpm .price-text small { font-size: 11px; color: var(--pm-muted); }
.co-pdpm .del-price { font-size: 13px; color: var(--pm-muted); }
.co-pdpm .offer-text .disc-prc { font-size: 11px; font-weight: 600; color: #D71920; letter-spacing: .04em; }
.co-pdpm .product-free-area { font-size: 11px; color: var(--pm-muted); justify-content: flex-start !important; margin-top: 4px; }
.co-pdpm .hteslimat { font-size: 11px; color: #b13b32; text-align: left !important; }

/* Varyant grupları */
.co-pdpm .varyantlar { margin: 0; }
.co-pdpm .var_title { padding: 0; margin-bottom: 18px !important; }
.co-pdpm__optlabel {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 12px; font-weight: 600; color: var(--pm-ink); margin: 0 0 10px !important;
}
.co-pdpm__selname { font-size: 11px; color: var(--pm-muted); font-weight: 400; }
/* Tema .image-radio kalıntıları TAMAMEN sıfırlanır (outline halkaları + img min-width:70) */
.co-pdpm .varyantlar label.image-radio,
.co-pdpm .varyantlar label.image-checkbox,
.co-pdpm .varyantlar label.image-radio-checked,
.co-pdpm .varyantlar label.image-checkbox-checked {
    outline: none !important;          /* temanın gri/mavi seçim halkası */
    margin: 0; padding: 0 !important; border: 0; background: transparent; box-shadow: none;
    border-radius: 0 !important; height: auto !important;
    cursor: pointer; display: block; text-align: center;
}
.co-pdpm .varyantlar label i.flaticon-tick,
.co-pdpm .varyantlar label .flaticon { display: none !important; }

/* Görselli seçenek (co-var-resimli): 46px kare swatch — ad tooltip + grup etiketinde */
.co-pdpm .varyantlar label.co-var-resimli { width: 46px; }
.co-pdpm .varyantlar label.co-var-resimli img {
    width: 46px !important; height: 46px !important;
    min-width: 0 !important; max-height: none !important;   /* tema: min-width:70/max-height:45 ezilir */
    object-fit: cover; border-radius: 0 !important;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(47,44,40,.18);
    transition: border-color .15s ease;
}
.co-pdpm .varyantlar label.co-var-resimli.image-radio-checked img,
.co-pdpm .varyantlar label.co-var-resimli.image-checkbox-checked img { border-color: var(--pm-ink); }
.co-pdpm .varyantlar label.co-var-resimli > span { display: none !important; }
.co-pdpm .varyantlar label.co-var-resimli .var_yaz_fiyat {
    display: block; font-size: 8px; line-height: 1.15; color: var(--pm-muted);
    margin-top: 3px; font-weight: 400; white-space: normal;
}

/* Yazılı seçenek (co-var-yazili): pill — grubu eşit bölerek doldurur (mockup: Sol/Sağ yarım, ölçüler üçte bir) */
.co-pdpm .varyantlar label.co-var-yazili {
    width: 100%;
    min-height: 42px; padding: 5px 10px !important;
    border: 1px solid var(--pm-line); background: transparent;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 11px; color: var(--pm-ink); line-height: 1.25;
    transition: background .15s ease, border-color .15s ease;
}
.co-pdpm .varyantlar label.co-var-yazili > span { color: var(--pm-ink); }
.co-pdpm .varyantlar label.co-var-yazili.image-radio-checked,
.co-pdpm .varyantlar label.co-var-yazili.image-checkbox-checked { background: var(--pm-ink); border-color: var(--pm-ink); }
.co-pdpm .varyantlar label.co-var-yazili.image-radio-checked > span,
.co-pdpm .varyantlar label.co-var-yazili.image-checkbox-checked > span { color: #fff; }
.co-pdpm .varyantlar label.co-var-yazili .var_yaz_fiyat {
    display: block; font-size: 8px; line-height: 1.15; color: var(--pm-muted); font-weight: 400;
}
.co-pdpm .varyantlar label.co-var-yazili.image-radio-checked .var_yaz_fiyat,
.co-pdpm .varyantlar label.co-var-yazili.image-checkbox-checked .var_yaz_fiyat { color: rgba(255,255,255,.75); }

/* Sarmal div'ler: görselli → içerik kadar sıkı; yazılı → satırı eşit paylaş (inline flex:1 0 10% ezilir) */
.co-pdpm .varyantlar .d-flex > div:has(> label.co-var-resimli) { flex: 0 0 auto !important; margin-right: 10px !important; }
.co-pdpm .varyantlar .d-flex > div:has(> label.co-var-yazili) { flex: 1 1 0 !important; }
.co-pdpm .varyantlar select.form-control {
    height: 40px; border: 1px solid var(--pm-line); border-radius: 0;
    background: #fff; font-size: 12px; color: var(--pm-ink); box-shadow: none;
}

/* Beraber kullanılabilecekler — inline stiller mockup diline ezilir */
.co-pdpm .accessories-section { padding: 0; margin-top: 2px; border-top: 1px solid var(--pm-line); }
.co-pdpm .accessories-title {
    font-size: 12px !important; font-weight: 600 !important; color: var(--pm-ink) !important;
    border-bottom: 0 !important; padding: 14px 0 2px !important; margin: 0;
}
.co-pdpm__acc-alt { font-size: 10px; color: var(--pm-muted); margin-bottom: 12px; }
.co-pdpm .accessory-item {
    border: 1px solid transparent !important; border-radius: 0 !important;
    background: rgba(245,244,242,.62) !important;
    padding: 9px !important; margin-bottom: 8px !important;
    transition: border-color .18s ease !important; transform: none !important; box-shadow: none !important;
}
.co-pdpm .accessory-item:hover { border-color: rgba(47,44,40,.38) !important; }
.co-pdpm .accessory-checkbox { width: 16px; height: 16px; margin: 4px 0 0 4px; accent-color: var(--pm-ink); }
.co-pdpm .accessory-image {
    width: 60px !important; height: 56px !important;
    border: 0 !important; border-radius: 0 !important; background: #fff !important;
}
.co-pdpm .accessory-title { font-size: 11px !important; font-weight: 600 !important; color: var(--pm-ink) !important; margin-bottom: 6px !important; }
.co-pdpm .quantity-btn {
    width: 24px !important; height: 26px !important; border: 1px solid var(--pm-line) !important;
    background: #fff !important; color: var(--pm-ink) !important; font-size: 13px !important; border-radius: 0 !important;
}
.co-pdpm .quantity-input { width: 30px !important; height: 26px !important; font-size: 10px !important; border-color: var(--pm-line) !important; background: #fff; }
.co-pdpm .accessory-price { font-size: 11px !important; font-weight: 600 !important; color: var(--pm-ink) !important; }
/* select2 düzleştirme */
.co-pdpm .select2-container--default .select2-selection--single,
.co-pdpm .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--pm-line) !important; border-radius: 0 !important;
    min-height: 30px !important; height: auto !important; box-shadow: none !important;
    padding: 0 6px !important; background: #fff !important;
}
.co-pdpm .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #F5F4F2 !important; border: 1px solid var(--pm-line) !important; border-radius: 0 !important;
    color: var(--pm-ink) !important;
    position: relative;
    font-size: 10px !important; padding: 3px 5px 3px 15px !important; margin: 3px 4px 3px 0 !important;
    box-shadow: none !important;
}
/* × düğmesi: select2 v4.1'de absolute + border-right ayıracı görselin üzerinden çizgi gibi geçiyordu */
.co-pdpm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute !important;
    left: 5px !important; top: 50% !important; transform: translateY(-50%);
    border: 0 !important;                 /* görsel üstündeki "çizgi" buydu */
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    height: auto !important; width: auto !important;
    font-size: 12px; line-height: 1;
}
/* seçili varyant çipinin içi: kategori satırı sarı DEĞİL — soluk gri, küçük harf aralıklı */
.co-pdpm .select2-container--default .select2-selection--multiple .select2-selection__choice .variant-cat {
    color: var(--pm-muted) !important;
    font-size: 10px !important;
    letter-spacing: .07em;
}
.co-pdpm .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--pm-ink);
    font-size: 10px;
    font-weight: 600;
}
.co-pdpm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--pm-muted) !important;
    font-weight: 400;
}
.co-pdpm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #D71920 !important;
    background: transparent !important;
}
.co-pdpm .select2-selection__choice img.variant-thumb { border-radius: 0 !important; }
.co-pdpm .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px !important; font-size: 11px !important; }

/* Toplam özeti */
.co-pdpm .total-summary { background: transparent !important; padding: 12px 0 0 !important; }
.co-pdpm .total-summary .total-item { font-size: 11px; color: var(--pm-muted); }
.co-pdpm .total-summary .total-item.main-product { font-weight: 500; color: var(--pm-ink); }
.co-pdpm .total-summary .total-item.final-total {
    border-top: 1px solid var(--pm-line) !important; margin-top: 8px; padding-top: 10px;
    font-size: 15px !important; font-weight: 600; color: var(--pm-ink) !important;
}
.co-pdpm .total-summary #finalTotal { color: var(--pm-ink); }

/* Sepete ekle */
.co-pdpm .sepet .text-center.p-3 { padding: 18px 0 0 !important; }
.co-pdpm .sepet button[type="submit"] {
    background: var(--pm-ink) !important; border: 0 !important; border-radius: 0 !important;
    height: 52px; font-family: var(--pm-font); font-weight: 600 !important;
    font-size: 12.5px !important; letter-spacing: .04em; color: #fff !important;
    transform: none !important; box-shadow: none !important;
}
.co-pdpm .sepet button[type="submit"]:hover { background: #171512 !important; }
.co-pdpm .product-details-bottom { display: none; } /* eski teslimat linki — yerini bilgi kutuları aldı */

/* Teslimat / kurulum kutuları */
.co-pdpm__notlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.co-pdpm__notlar > div { background: rgba(245,244,242,.62); padding: 13px; cursor: pointer; }
.co-pdpm__notlar strong { display: block; font-size: 11px; margin-bottom: 4px; color: var(--pm-ink); }
.co-pdpm__notlar span { font-size: 10px; color: var(--pm-muted); line-height: 1.35; }

/* Alt detay akordeonları */
.co-pdpm-detay { margin-top: 34px; }

@media (max-width: 1080px) {
    .co-pdpm { grid-template-columns: 1fr; }
    .co-pdpm__gallery { position: relative; top: auto; height: min(72vh, 680px); }
    .co-pdpm__panel { position: static; }
}
@media (max-width: 760px) {
    .co-pdpm { padding: 28px 5vw 40px; }
    .co-pdpm__gallery { height: min(64vh, 560px); }
    .co-pdpm__panel { padding: 22px 18px; }
    .co-pdpm__gscroll { gap: 10px; }
    .co-pdpm__notlar { grid-template-columns: 1fr; }
}

/* --- PDP bundle (Beraber kullanılabilecekler) — mockup birebir --- */
/* Aile bandı */
.co-pdpm__aile {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: 12px; min-height: 60px;
    padding: 11px 0; cursor: pointer; user-select: none;
}
.co-pdpm__aile-thumbs { display: flex; align-items: center; padding-left: 2px; }
.co-pdpm__aile-thumbs span {
    width: 34px; height: 34px; border-radius: 50%;
    background: #F7F6F3; border: 2px solid #ECEAE6;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    margin-left: -9px;
}
.co-pdpm__aile-thumbs span:first-child { margin-left: 0; }
.co-pdpm__aile-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.co-pdpm__aile-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-pdpm__aile-copy strong { font-size: 12px; font-weight: 600; color: var(--pm-ink); }
.co-pdpm__aile-copy small { color: var(--pm-muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-pdpm__aile-chev { font-size: 18px; line-height: 1; color: var(--pm-muted); transition: transform .22s ease; }
.co-pdpm-acc-kapali .co-pdpm__aile-chev { transform: rotate(180deg); }
.co-pdpm-acc-kapali .co-pdpm__acc-head,
.co-pdpm-acc-kapali #accessory-list { display: none; }

/* Başlık şeridi + rozet */
.co-pdpm__acc-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 13px 0 12px; border-top: 1px solid rgba(47,44,40,.08);
}
.co-pdpm__acc-badge {
    flex: none; border: 1px solid var(--pm-line); padding: 5px 7px;
    font-size: 8px; letter-spacing: .03em; color: var(--pm-ink);
    background: rgba(245,244,242,.55); white-space: nowrap;
}

/* Satır: [check][thumb][içerik][fiyat+adet] */
.co-pdpm .accessory-item {
    display: grid !important;
    grid-template-columns: 22px 54px minmax(0,1fr) 88px;
    gap: 9px; align-items: center; min-height: 78px;
}
.co-pdpm__acc-check { display: grid; place-items: center; margin: 0; cursor: pointer; }
.co-pdpm .accessory-checkbox { margin: 0 !important; }
.co-pdpm__acc-thumb {
    height: 54px; background: #fff; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
}
.co-pdpm .accessory-image { width: 100% !important; height: 100% !important; object-fit: contain; margin: 0 !important; }
.co-pdpm__acc-copy { min-width: 0; }
.co-pdpm__acc-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.co-pdpm__acc-toprow > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-pdpm__acc-cat { font-size: 7px; letter-spacing: .09em; text-transform: uppercase; color: var(--pm-muted); }
.co-pdpm .accessory-title {
    display: block; font-size: 10px !important; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 !important; border: 0 !important;
}
.co-pdpm__acc-link { font-size: 11px; color: var(--pm-muted); padding: 1px; flex: none; }
.co-pdpm__acc-link:hover { color: var(--pm-ink); text-decoration: none; }
.co-pdpm .accessory-options { margin: 0 !important; }
.co-pdpm__acc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.co-pdpm__acc-meta .accessory-price { font-size: 10px !important; text-align: right !important; }
.co-pdpm .quantity-control { margin: 0 !important; justify-content: flex-end !important; }

/* Toplam özeti HER ZAMAN görünür (mockup) */
.co-pdpm .total-summary { display: block !important; }

/* Adet + Sepete Ekle satırı */
.co-pdpm__buyrow {
    display: grid; grid-template-columns: 118px minmax(0,1fr);
    gap: 10px; margin-top: 18px;
}
.co-pdpm__qty {
    display: grid; grid-template-columns: 36px minmax(0,1fr) 36px;
    border: 1px solid var(--pm-line); min-height: 52px; background: transparent;
}
.co-pdpm__qty button {
    border: 0; background: transparent; cursor: pointer;
    font-size: 18px; color: var(--pm-ink); line-height: 1;
}
.co-pdpm__qty input {
    width: 100%; min-width: 0; border: 0; background: transparent;
    text-align: center; font-size: 13px; color: var(--pm-ink);
}
.co-pdpm__addcart { width: 100%; }
@media (max-width: 560px) {
    .co-pdpm .accessory-item { grid-template-columns: 20px 48px minmax(0,1fr); }
    .co-pdpm__acc-meta { grid-column: 3; flex-direction: row; justify-content: space-between; align-items: center; }
    .co-pdpm__buyrow { grid-template-columns: 104px minmax(0,1fr); }
}

/* ============================================================
   PDP ALT BÖLÜMLER (mockup birebir)
   1) .co-pdpf ürün ailesi kartları  2) .co-pdpd indirme bandı
   3) .co-pdpt teknik detay grid'i — hepsi tam genişlik (full-bleed)
   ============================================================ */
.co-pdpf, .co-pdpd, .co-pdpt {
    --pm-bg:#F5F4F2; --pm-ink:#2F2C28; --pm-muted:#6E6961; --pm-line:#D4D0C8;
    font-family: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    margin-inline: calc(50% - 50vw);
}

/* --- Bölüm başlığı ortak dili --- */
.co-pdpf__head, .co-pdpt__head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.co-pdpf__head h2, .co-pdpt__head h2 {
    font-size: clamp(34px, 4vw, 58px); letter-spacing: -.02em;
    font-weight: 400; margin: 0; color: var(--pm-ink); font-family: inherit;
}
.co-pdpf__head p, .co-pdpt__head p {
    max-width: 480px; margin: 0; color: var(--pm-muted);
    font-size: 13px; line-height: 1.55; text-align: right;
}
@media (max-width: 1200px) {
    .co-pdpf__grid { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
}

/* --- 1) Ürün ailesi --- */
.co-pdpf { padding: 68px 5vw; background: #F1F0ED; }
.co-pdpf__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * 14px) / 5);   /* görünürde 5 kart, gerisi kayar */
    gap: 14px;
    overflow-x: auto; padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
}
.co-pdpf__grid::-webkit-scrollbar { display: none; }
.co-pdpf__card { scroll-snap-align: start; }
/* başlık sağı: yazı + hemen yanında oklar */
.co-pdpf__sag { display: flex; align-items: center; gap: 18px; }
.co-pdpf__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.co-pdpf__ok {
    width: 36px; height: 36px; border: 1px solid var(--pm-line); border-radius: 50%;
    background: transparent; cursor: pointer; font-size: 17px; line-height: 1; color: var(--pm-ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.co-pdpf__ok:hover { background: var(--pm-ink); color: #fff; border-color: var(--pm-ink); }
.co-pdpf__card {
    min-width: 0; background: #fff; border: 1px solid rgba(47,44,40,.09);
    overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.co-pdpf__card:hover {
    transform: translateY(-3px);
    border-color: rgba(47,44,40,.18);
    box-shadow: 0 12px 30px rgba(47,44,40,.08);
}
.co-pdpf__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.co-pdpf__link:hover { text-decoration: none; color: inherit; }
.co-pdpf__media {
    aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
    padding: 14px; background: #fff; overflow: hidden;
}
.co-pdpf__media img {
    width: 100%; height: 100%; object-fit: contain;
    mix-blend-mode: multiply; transition: transform .28s ease;
}
.co-pdpf__card:hover .co-pdpf__media img { transform: scale(1.025); }
.co-pdpf__body {
    flex: 1; display: flex; flex-direction: column;
    padding: 18px 18px 17px; background: var(--pm-bg);
    border-top: 1px solid rgba(47,44,40,.07);
}
.co-pdpf__cat { font-size: 9px; color: var(--pm-muted); letter-spacing: .1em; font-weight: 700; text-transform: uppercase; }
.co-pdpf__body h3 {
    min-height: 40px; font-size: 18px; line-height: 1.12; font-weight: 500;
    margin: 10px 0 20px; color: var(--pm-ink); font-family: inherit;
}
.co-pdpf__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.co-pdpf__meta strong { font-size: 15px; font-weight: 700; color: var(--pm-ink); }
.co-pdpf__ok {
    width: 31px; height: 31px; border: 1px solid rgba(47,44,40,.18); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex: 0 0 auto;
    transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.co-pdpf__card:hover .co-pdpf__ok { transform: rotate(45deg); background: #2F2C28; color: #fff; border-color: #2F2C28; }

/* --- 2) İndirilebilir İçerikler --- */
.co-pdpd { background: var(--pm-bg); }
.co-pdpd__shell {
    background: #566065; color: #F5F4F2;
    padding: 58px 5vw;
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: 40px; align-items: start;
}
.co-pdpd__kicker {
    display: block; margin-bottom: 16px;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #D8D4CD;
}
.co-pdpd__shell h2 {
    font-size: clamp(34px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.02em;
    font-weight: 600; margin: 0 0 18px; color: #fff; font-family: inherit;
}
.co-pdpd__shell p { margin: 0; max-width: 680px; font-size: 15px; line-height: 1.65; color: rgba(245,244,242,.88); }
.co-pdpd__not { margin-top: 24px; max-width: 620px; }
.co-pdpd__not strong { display: block; font-size: 13px; letter-spacing: .02em; margin-bottom: 8px; color: #fff; }
.co-pdpd__not span { display: block; font-size: 13px; line-height: 1.62; color: rgba(245,244,242,.76); }
.co-pdpd__actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-content: start; }
.co-pdpd__link {
    position: relative; min-height: 78px;
    border: 1px solid rgba(245,244,242,.65);
    padding: 18px 86px 18px 22px;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    background: transparent; color: #F5F4F2;
    transition: background .22s ease, transform .22s ease, border-color .22s ease;
}
.co-pdpd__link:hover { background: rgba(255,255,255,.05); transform: translateY(-2px); color: #fff; text-decoration: none; }
.co-pdpd__link > span:first-child { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,244,242,.72); }
.co-pdpd__link .co-pdpd__formats { text-transform: none; letter-spacing: .04em; white-space: normal; line-height: 1.45; }
.co-pdpd__link strong { font-size: 15px; font-weight: 600; color: #fff; }
.co-pdpd__link--wide { grid-column: 1 / -1; }
.co-pdpd__link--accent { background: #8A5545; border-color: #8A5545; }
.co-pdpd__link--accent > span:first-child { color: #F7EAE2; }
.co-pdpd__link--accent:hover { background: #7A4A3C; border-color: #7A4A3C; }
.co-pdpd__ico {
    position: absolute; right: 22px; top: 50%;
    width: 42px; height: 42px; margin-top: -21px;
    border: 1px solid rgba(245,244,242,.48); border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.02);
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.co-pdpd__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.co-pdpd__link:hover .co-pdpd__ico {
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.78);
    box-shadow: 0 10px 26px rgba(12,12,12,.14);
}
.co-pdpd__link:hover .co-pdpd__ico svg { animation: coPdpdIn .56s ease both; }
@keyframes coPdpdIn {
    0% { transform: translateY(0); }
    35% { transform: translateY(3px); }
    60% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

/* --- 3) Teknik detaylar --- */
.co-pdpt { padding: 72px 5vw; background: var(--pm-bg); }
.co-pdpt__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--pm-line); border-left: 1px solid var(--pm-line);
}
.co-pdpt__cell {
    padding: 26px; min-height: 120px;
    border-right: 1px solid var(--pm-line); border-bottom: 1px solid var(--pm-line);
}
.co-pdpt__cell span { display: block; font-size: 10px; letter-spacing: .08em; color: var(--pm-muted); margin-bottom: 12px; text-transform: uppercase; }
.co-pdpt__cell strong { font-size: 18px; font-weight: 500; color: var(--pm-ink); }
.co-pdpt__ek { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; margin-top: 28px; align-items: start; }
.co-pdpt__ek img { max-width: 100%; height: auto; background: #fff; border: 1px solid var(--pm-line); }
.co-pdpt__ekmetin { font-size: 13px; line-height: 1.6; color: var(--pm-muted); }

@media (max-width: 1080px) {
    .co-pdpd__shell { grid-template-columns: 1fr; }
    .co-pdpt__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .co-pdpf { padding: 44px 5vw; }
    .co-pdpf__grid { grid-auto-columns: 78vw; gap: 12px; }
    .co-pdpf__body h3 { min-height: 0; }
    .co-pdpf__head p, .co-pdpt__head p { text-align: left; }
    .co-pdpd__shell { padding: 44px 5vw; }
    .co-pdpd__actions { grid-template-columns: 1fr; }
    .co-pdpd__link { min-height: 72px; padding-right: 76px; }
    .co-pdpd__ico { right: 18px; width: 38px; height: 38px; margin-top: -19px; }
    .co-pdpt { padding: 48px 5vw; }
    .co-pdpt__grid { grid-template-columns: 1fr; }
    .co-pdpt__ek { grid-template-columns: 1fr; }
}

/* ============================================================
   PDP SON KATMAN: story bandı + güven şeridi + benzer ürün rayı
   + kullanıcı deneyimleri + kalan akordeonların tasarım restilizasyonu
   ============================================================ */
.co-pdps, .co-pdpv, .co-pdpz, .co-pdpy {
    --pm-bg:#F5F4F2; --pm-ink:#2F2C28; --pm-muted:#6E6961; --pm-line:#D4D0C8;
    font-family: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
}
.co-pdps, .co-pdpv, .co-pdpz { margin-inline: calc(50% - 50vw); }

/* --- STORY: adaçayı panel + görsel --- */
.co-pdps { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 540px; background: #D8DDD3; }
.co-pdps__copy { padding: 64px 5vw; display: flex; align-items: center; }
.co-pdps__ic { max-width: 560px; }
.co-pdps__kicker { display: block; font-size: 11px; letter-spacing: .16em; color: #657066; margin-bottom: 16px; text-transform: uppercase; }
.co-pdps__ic h2 {
    font-size: clamp(38px, 4vw, 64px); line-height: 1.02; letter-spacing: -.02em;
    font-weight: 400; margin: 0 0 22px; color: var(--pm-ink); font-family: inherit;
}
.co-pdps__ic p { font-size: 15px; line-height: 1.65; color: #4D574F; margin: 0; }
.co-pdps__media { min-height: 540px; background: #F1F0ED; display: flex; align-items: center; justify-content: center; padding: 26px; }
.co-pdps__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* --- GÜVEN ŞERİDİ --- */
.co-pdpv {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--pm-line); border-bottom: 1px solid var(--pm-line);
    background: var(--pm-bg);
}
.co-pdpv__item { padding: 24px 24px 24px 5vw; border-right: 1px solid var(--pm-line); }
.co-pdpv__item:last-child { border-right: 0; }
.co-pdpv__item strong { display: block; font-size: 13px; margin-bottom: 5px; color: var(--pm-ink); }
.co-pdpv__item span { font-size: 11px; color: var(--pm-muted); line-height: 1.4; }
.co-pdpv__item.teslimat { cursor: pointer; }

/* --- BENZER ÜRÜNLER RAYI --- */
.co-pdpz { padding: 68px 5vw 60px; background: #fff; }
.co-pdpz__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.co-pdpz__head h2 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -.02em; font-weight: 400; margin: 0; color: var(--pm-ink); font-family: inherit; }
.co-pdpz__nav { display: flex; align-items: center; gap: 14px; }
.co-pdpz__tumu {
    font-size: 11px; letter-spacing: .12em; color: var(--pm-ink);
    text-decoration: underline; text-underline-offset: 4px;
}
.co-pdpz__tumu:hover { color: #D71920; text-decoration: underline; }
.co-pdpz__ok {
    width: 36px; height: 36px; border: 1px solid var(--pm-line); border-radius: 50%;
    background: transparent; cursor: pointer; font-size: 17px; line-height: 1; color: var(--pm-ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.co-pdpz__ok:hover { background: var(--pm-ink); color: #fff; border-color: var(--pm-ink); }
.co-pdpz__ray {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
    gap: 26px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding-bottom: 6px;
}
.co-pdpz__ray::-webkit-scrollbar { display: none; }
.co-pdpz__card { position: relative; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.co-pdpz__chip {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: #fff; border: 1px solid rgba(47,44,40,.12);
    font-size: 9px; letter-spacing: .12em; color: var(--pm-muted);
    padding: 7px 11px;
}
.co-pdpz__rozet {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: #16130f; color: #fff; font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; padding: 6px 9px;
}
.co-pdpz__media {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; background: #F7F6F4; padding: 26px; overflow: hidden;
}
.co-pdpz__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .28s ease; }
.co-pdpz__card:hover .co-pdpz__media img { transform: scale(1.03); }
.co-pdpz__ad {
    display: block; margin: 18px 0 6px;
    font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--pm-ink);
}
.co-pdpz__ad:hover { color: var(--pm-ink); opacity: .75; text-decoration: none; }
.co-pdpz__fiyat { font-size: 14px; color: var(--pm-ink); margin-bottom: 14px; }
.co-pdpz__fiyat del { font-size: 11.5px; color: #b3aea6; margin-left: 8px; }
.co-pdpz__btn {
    margin-top: auto; display: block; text-align: center;
    border: 1px solid var(--pm-ink); color: var(--pm-ink);
    font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 13px 10px;
    transition: background .2s ease, color .2s ease;
}
.co-pdpz__btn:hover { background: var(--pm-ink); color: #fff; text-decoration: none; }
.co-pdpz__bos { color: var(--pm-muted); font-size: 14px; }

/* --- KULLANICI DENEYİMLERİ --- */
.co-pdpy { margin-inline: calc(50% - 50vw); background: var(--pm-bg); border-top: 1px solid var(--pm-line); }
.co-pdpy__ic { max-width: 1180px; margin: 0 auto; padding: 68px 5vw 60px; }
.co-pdpy__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.co-pdpy__head h2 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -.02em; font-weight: 400; margin: 0; color: var(--pm-ink); font-family: inherit; }
.co-pdpy__head p { margin: 0; color: var(--pm-muted); font-size: 13px; }
.co-pdpy__ozet {
    display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 40px;
    padding: 26px 0 30px; border-top: 1px solid var(--pm-line); border-bottom: 1px solid var(--pm-line);
    margin-bottom: 12px; align-items: center;
}
.co-pdpy__skor strong { display: block; font-size: 56px; font-weight: 600; line-height: 1; color: var(--pm-ink); }
.co-pdpy__skor strong span { font-size: 20px; color: var(--pm-muted); font-weight: 400; }
.co-pdpy__skor em { display: block; font-style: normal; font-size: 15px; color: var(--pm-ink); margin: 8px 0 4px; }
.co-pdpy__skor small { font-size: 11.5px; color: var(--pm-muted); }
.co-pdpy__bar { display: grid; grid-template-columns: 200px minmax(0,1fr) 34px; gap: 14px; align-items: center; margin-bottom: 12px; }
.co-pdpy__bar:last-child { margin-bottom: 0; }
.co-pdpy__bar > span { font-size: 12px; color: var(--pm-muted); }
.co-pdpy__bar i { display: block; height: 2px; background: #E3DFD7; position: relative; }
.co-pdpy__bar i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pm-ink); }
.co-pdpy__bar > strong { font-size: 12px; color: var(--pm-ink); text-align: right; }
.co-pdpy .yorumdiv { display: none; }   /* hs.core ilk 5'i flex yapar, DAHA FAZLA ile devamı */
/* yorumlar: tasarım dilinde beyaz kart grid'i */
.co-pdpy__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.co-pdpy__yorum {
    gap: 18px; align-items: flex-start;
    background: #fff; border: 1px solid rgba(47,44,40,.09);
    padding: 22px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.co-pdpy__yorum:hover { border-color: rgba(47,44,40,.18); box-shadow: 0 10px 26px rgba(47,44,40,.06); }
@media (max-width: 900px) { .co-pdpy__liste { grid-template-columns: 1fr; } }
.co-pdpy__avatar {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    background: #E9E5DD; color: var(--pm-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.co-pdpy__govde { min-width: 0; }
.co-pdpy__govde header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.co-pdpy__govde header strong { font-size: 13.5px; color: var(--pm-ink); }
.co-pdpy__govde header span { font-size: 11.5px; color: var(--pm-muted); }
.co-pdpy__govde header time { font-size: 11px; color: #B4AFA5; margin-left: auto; }
.co-pdpy__govde p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--pm-muted); }
.co-pdpy__daha {
    display: block; width: 100%; margin-top: 26px;
    border: 1px solid var(--pm-ink); background: transparent; color: var(--pm-ink);
    font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em;
    padding: 15px 10px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.co-pdpy__daha:hover { background: var(--pm-ink); color: #fff; }

/* --- KALAN AKORDEONLAR (Açıklama / Özellikler / Stok / Mağaza / Teslimat / Ödeme) — tasarım dili --- */
.co-pdpm-detay {
    font-family: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    max-width: 1180px; margin-left: auto; margin-right: auto;
}
.co-pdpm-detay .card {
    border: 0 !important; border-top: 1px solid #D4D0C8 !important;
    border-radius: 0 !important; background: transparent !important;
    margin-bottom: 0 !important; box-shadow: none !important;
}
.co-pdpm-detay > .col-lg-12 > .position-relative > #basicsAccordion > .card:last-of-type { border-bottom: 1px solid #D4D0C8 !important; }
.co-pdpm-detay .card-header { background: transparent !important; border: 0 !important; padding: 0 !important; }
.co-pdpm-detay .card-btn {
    font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important;
    color: #2F2C28 !important; padding: 19px 4px !important; text-decoration: none !important;
}
.co-pdpm-detay .card-btn:hover { color: #2F2C28 !important; }
.co-pdpm-detay .card-btn-arrow { color: #6E6961 !important; }
.co-pdpm-detay .card-body {
    font-size: 13.5px !important; line-height: 1.7 !important; color: #6E6961 !important;
    padding: 2px 4px 26px !important; font-family: inherit;
}
.co-pdpm-detay .card-body strong, .co-pdpm-detay .card-body b { color: #2F2C28; }
.co-pdpm-detay .card-body u { text-decoration-color: #C9C3B9; }
.co-pdpm-detay .card-body a { color: #8A5545 !important; text-decoration: underline; }
.co-pdpm-detay .card-body a:hover { color: #6F4437 !important; }
.co-pdpm-detay .urun-aciklama-metni, .co-pdpm-detay .urun-aciklama-metni * { color: #6E6961 !important; font-family: inherit !important; }
.co-pdpm-detay .urun-aciklama-metni strong, .co-pdpm-detay .urun-aciklama-metni b { color: #2F2C28 !important; }
.co-pdpm-detay .table { color: #6E6961; }
.co-pdpm-detay .table th { color: #2F2C28; font-weight: 600; }
.co-pdpm-detay .table td, .co-pdpm-detay .table th { border-color: #E3DFD7 !important; font-size: 12.5px; }
.co-pdpm-detay .table-bordered thead { color: #2F2C28; font-weight: 600; }
.co-pdpm-detay .badge { background: #F0EDE6 !important; color: #2F2C28 !important; border-radius: 0 !important; font-weight: 500 !important; }

@media (max-width: 1080px) {
    .co-pdps { grid-template-columns: 1fr; }
    .co-pdps__media { min-height: 380px; order: -1; }
    .co-pdpv { grid-template-columns: repeat(2, 1fr); }
    .co-pdpv__item { padding: 20px 24px; border-bottom: 1px solid var(--pm-line); }
    .co-pdpy__ozet { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
    .co-pdps__copy { padding: 42px 5vw; }
    .co-pdps__media { min-height: 300px; }
    .co-pdpv { grid-template-columns: 1fr; }
    .co-pdpz { padding: 44px 5vw 40px; }
    .co-pdpz__ray { grid-auto-columns: minmax(78vw, 1fr); gap: 14px; }
    .co-pdpy__ic { padding: 44px 5vw 40px; }
    .co-pdpy__bar { grid-template-columns: 130px minmax(0,1fr) 30px; gap: 10px; }
    .co-pdpy__govde header time { margin-left: 0; width: 100%; }
}

/* --- TESLİMAT & KURULUM (tasarım dili; akordeonların yerini aldı) --- */
.co-pdpk {
    --pm-ink:#2F2C28; --pm-muted:#6E6961; --pm-line:#D4D0C8;
    font-family: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    margin-inline: calc(50% - 50vw);
    background: #fff;
    border-top: 1px solid var(--pm-line);
    scroll-margin-top: 90px;
}
.co-pdpk__ic {
    display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 56px; padding: 68px 5vw; align-items: start;
}
.co-pdpk__kicker { display: block; font-size: 11px; letter-spacing: .16em; color: #B4AFA5; margin-bottom: 14px; }
.co-pdpk__sol h2 { font-size: clamp(30px, 3vw, 46px); letter-spacing: -.02em; font-weight: 400; margin: 0 0 16px; color: var(--pm-ink); font-family: inherit; }
.co-pdpk__sol p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--pm-muted); }
.co-pdpk__icerik { font-size: 13.5px; line-height: 1.75; color: var(--pm-muted); }
.co-pdpk__icerik * { font-family: inherit !important; }
.co-pdpk__icerik strong, .co-pdpk__icerik b { color: var(--pm-ink); }
.co-pdpk__icerik u { text-decoration-color: #C9C3B9; text-underline-offset: 3px; }
.co-pdpk__icerik a { color: #8A5545; text-decoration: underline; }
.co-pdpk__icerik p { margin-bottom: 12px; }

/* panel not kutuları artık bağlantı — aynı görünüm */
.co-pdpm__notlar > a { background: rgba(245,244,242,.62); padding: 13px; display: block; }
.co-pdpm__notlar > a:hover { background: rgba(245,244,242,.92); text-decoration: none; }
/* güven şeridindeki bağlantı kutusu */
.co-pdpv__git { display: block; }
.co-pdpv__git:hover { text-decoration: none; }
.co-pdpv__git:hover strong { color: #8A5545; }
/* sayfa altındaki story bandına üst ayraç */
.co-pdpy + .co-pdps { border-top: 1px solid #D4D0C8; }

@media (max-width: 1080px) {
    .co-pdpk__ic { grid-template-columns: 1fr; gap: 24px; padding: 44px 5vw; }
}

/* Full-bleed bölümler (margin-inline: calc(50% - 50vw)) 100vw hesabına dikey
   kaydırma çubuğunu da kattığı için sayfa ~17px sağa taşıyordu — yatay scroll'un
   kaynağı buydu. `clip` scroll-container oluşturmaz; sticky paneller çalışmaya devam eder. */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* --- Galeri thumb çubuğu: son görsele inince alttan yumuşakça belirir --- */
.co-pdpm__gthumbs {
    position: absolute; left: 50%; bottom: 14px; z-index: 5;
    transform: translateX(-50%) translateY(18px);
    display: flex; gap: 8px; padding: 8px;
    background: rgba(245,244,242,.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(47,44,40,.10);
    box-shadow: 0 14px 34px rgba(47,44,40,.12);
    max-width: min(92%, 680px); overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .38s ease, transform .38s cubic-bezier(.22,.8,.32,1), visibility 0s linear .38s;
}
.co-pdpm__gthumbs::-webkit-scrollbar { display: none; }
.co-pdpm__gthumbs.gorunur {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .38s ease, transform .38s cubic-bezier(.22,.8,.32,1);
}
.co-pdpm__gthumb {
    flex: 0 0 auto; width: 56px; height: 44px; padding: 0;
    border: 2px solid transparent; background: #fff;
    cursor: pointer; overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.co-pdpm__gthumb:hover { transform: translateY(-2px); border-color: rgba(47,44,40,.35); }
.co-pdpm__gthumb.aktif { border-color: #2F2C28; }
.co-pdpm__gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-pdpm__gthumb--video { display: flex; align-items: center; justify-content: center; background: #16130f; color: #fff; font-size: 12px; }

/* ============================================================
   MEGA MENÜ (mockup dili): açık panel + kolonlar + Keşfedin
   hs.megamenu JS'i aynı; yalnız içerik/görünüm yenilendi.
   ============================================================ */
.co-mega {
    background: #F7F6F3 !important;
    border: 0 !important;
    border-top: 1px solid #E3DFD7 !important;
    box-shadow: 0 24px 48px rgba(47,44,40,.10) !important;
    border-radius: 0 !important;
    font-family: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
}
.co-mega__ic {
    display: flex;
    gap: 56px;
    padding: 34px 54px 40px;
    max-width: 1320px;
    margin: 0 auto;
}
.co-mega__kolon { min-width: 170px; flex: 1 1 0; }   /* kolonlar boşluğu paylaşarak alana yayılır */
.co-mega__baslik {
    display: block;
    font-size: 20px;
    letter-spacing: .08em;
    color: #8a857c;
    margin-bottom: 14px;
    min-height: 14px;
}
.co-mega__kolon > a,
.co-mega__kesfet > a {
    display: block;
    font-size: 16px;
    color: #2F2C28;
    padding: 6px 0;
    white-space: nowrap;
    transition: color .15s ease, transform .15s ease;
}
.co-mega__kolon > a:hover,
.co-mega__kesfet > a:hover {
    color: #D71920;
    text-decoration: none;
    transform: translateX(2px);
}
.co-mega__kesfet {
    margin-left: auto;
    padding-left: 48px;
    border-left: 1px solid #E3DFD7;
    min-width: 220px;
}
.co-mega__kesfet .co-mega__tumu {
    margin-top: 18px;
    font-weight: 600;
    color: #2F2C28;
}
.co-mega__tumu span { display: inline-block; transition: transform .18s ease; }
.co-mega__tumu:hover span { transform: translateX(4px); }
/* DİĞER paneli aynı zemin/yazı diline bağlanır */
.co-mega--diger .row { padding: 22px 30px 26px; }
.co-mega--diger .u-header__sub-menu-title,
.co-mega--diger .u-header__sub-menu-title a {
    font-size: 11px !important;
    letter-spacing: .08em;
    color: #8a857c !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
.co-mega--diger .u-header__sub-menu-nav-link {
    font-size: 13.5px !important;
    color: #2F2C28 !important;
    padding: 6px 0 !important;
}
.co-mega--diger .u-header__sub-menu-nav-link:hover { color: #D71920 !important; }
.co-mega--diger .u-header__sub-menu-bordered li { border: 0 !important; }

@media (max-width: 1199px) {
    /* mobil menüde kolonlar alt alta akar */
    .co-mega__ic { flex-direction: column; gap: 10px; padding: 12px 8px; }
    .co-mega__kolon .co-mega__baslik { min-height: 0; }
    .co-mega__kolon .co-mega__baslik:empty { display: none; }
    .co-mega__kesfet { margin-left: 0; padding-left: 0; border-left: 0; }
    .co-mega__kolon > a, .co-mega__kesfet > a { white-space: normal; }
}

/* --- Galeri butonları: tasarım dilinde CSS tooltip (Bootstrap'ın mavi tooltip'i yerine) --- */
.co-pdpm__gbtn { position: relative; }
.co-pdpm__gbtn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 0; bottom: calc(100% + 11px);
    transform: translateY(5px);
    background: #16130f; color: #f4efe7;
    font-family: var(--pm-font, inherit);
    font-size: 11px; letter-spacing: .02em; line-height: 1.4; font-weight: 500;
    white-space: normal; width: max-content; max-width: 220px; text-align: left;
    padding: 8px 11px;
    box-shadow: 0 12px 28px rgba(0,0,0,.24);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 30;
}
.co-pdpm__gbtn[data-tip]::before {
    content: "";
    position: absolute;
    left: 18px; bottom: calc(100% + 6px);
    transform: translateY(5px);
    border: 5px solid transparent; border-top-color: #16130f;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 30;
}
.co-pdpm__gbtn[data-tip]:hover::after,
.co-pdpm__gbtn[data-tip]:hover::before {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* ============================================================
   GOOGLE YORUMLARI (mockup birebir): adaçayı degrade panel,
   italik vurgulu başlık, beyaz kartlar (baş harf avatar + G +
   yıldızlar + tırnak), ok + bar sayfalama.
   ============================================================ */
.co-gy {
    --gy-geo: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    padding: 26px 0 40px;
}
.co-gy__panel {
    background: linear-gradient(180deg, #f4f7f2 0%, #edf0e9 100%);
    border: 1px solid rgba(47, 44, 40, .05);
    border-radius: 22px;
    padding: clamp(26px, 4vw, 54px);
}
.co-gy__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 30px;
}
.co-gy__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--gy-geo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6d7a68;
    margin-bottom: 12px;
}
.co-gy__kicker i { width: 26px; height: 1px; background: #8a9683; }
.co-gy__title {
    font-family: var(--gy-geo);
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 300;
    letter-spacing: -.01em;
    color: var(--co-ink);
    line-height: 1.08;
    margin: 0;
}
.co-gy__title em { font-style: italic; font-weight: 400; }
.co-gy__sag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex: 0 0 auto;
}
.co-gy__g {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(47, 44, 40, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gy-geo);
    font-size: 17px;
    font-weight: 700;
    color: #4285F4;
}
.co-gy__sag strong { display: block; font-family: var(--gy-geo); font-size: 13px; font-weight: 600; color: var(--co-ink); }
.co-gy__sag span { display: block; font-family: var(--gy-geo); font-size: 11px; color: var(--co-muted); }

/* kart rayı */
.co-gy__ray {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
}
.co-gy__ray::-webkit-scrollbar { display: none; }
.co-gy__card {
    position: relative;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid rgba(47, 44, 40, .06);
    border-radius: 8px;
    padding: 22px 22px 40px;
    min-height: 235px;
    display: flex;
    flex-direction: column;
}
.co-gy__card header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.co-gy__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #dfe5da;
    color: var(--co-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gy-geo);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .02em;
}
.co-gy__kim { min-width: 0; }
.co-gy__kim strong {
    display: block;
    font-family: var(--gy-geo);
    font-size: 14px;
    font-weight: 600;
    color: var(--co-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-gy__kim span { display: block; font-family: var(--gy-geo); font-size: 11px; color: var(--co-muted); }
.co-gy__gg {
    margin-left: auto;
    font-family: var(--gy-geo);
    font-size: 18px;
    font-weight: 700;
    color: #4285F4;
}
.co-gy__stars {
    color: #f2b73f;
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 10px;
}
.co-gy__card p {
    font-family: var(--gy-geo);
    font-size: 13px;
    line-height: 1.6;
    color: var(--co-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.co-gy__quote {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-size: 34px;
    line-height: 1;
    color: #e5e3dc;
    pointer-events: none;
}

/* ok + bar sayfalama */
.co-gy__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
}
.co-gy__ok {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(47, 44, 40, .18);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: var(--co-ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.co-gy__ok:hover { background: var(--co-ink); color: #fff; border-color: var(--co-ink); }
.co-gy__bars { display: flex; align-items: center; gap: 6px; }
.co-gy__bar {
    width: 18px;
    height: 3px;
    border: 0;
    border-radius: 2px;
    background: #cfd4c9;
    cursor: pointer;
    padding: 0;
    transition: width .2s ease, background .2s ease;
}
.co-gy__bar.aktif { width: 30px; background: var(--co-ink); }

@media (max-width: 991px) {
    .co-gy__ray { grid-auto-columns: calc((100% - 16px) / 2); }
    .co-gy__head { display: block; }
    .co-gy__sag { margin-top: 16px; }
}
@media (max-width: 640px) {
    .co-gy__ray { grid-auto-columns: 100%; }
}

/* ============================================================
   BLOG (mockup birebir + iyileştirmeler): ortalı kicker/başlık/çizgi,
   sağ üstte TÜM YAZILARI GÖR, kartlarda tarih etiketi + özet +
   YAZIYI İNCELE ↗ (hover: görsel zoom + ok kayması).
   ============================================================ */
.co-blog {
    --bl-geo: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    padding: 46px 0 64px;
}
.co-blog__head {
    position: relative;
    text-align: center;
    margin-bottom: 36px;
}
.co-blog__kicker {
    display: block;
    font-family: var(--bl-geo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6d7a68;
    margin-bottom: 10px;
}
.co-blog__head h2 {
    font-family: var(--bl-geo);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 300;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--co-ink);
    margin: 0 0 14px;
}
.co-blog__head h2 a { color: inherit; }
.co-blog__head h2 a:hover { color: inherit; text-decoration: none; opacity: .8; }
.co-blog__cizgi { display: inline-block; width: 34px; height: 2px; background: #7a8474; }
.co-blog__tumu {
    position: absolute;
    right: 0;
    top: 34px;
    font-family: var(--bl-geo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--co-ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(47, 44, 40, .3);
}
.co-blog__tumu:hover { color: #D71920; text-decoration: underline; }

.co-blog__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.co-blog__card { display: flex; flex-direction: column; min-width: 0; }
.co-blog__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: #f1efe9;
    overflow: hidden;
    border-radius: 4px;
}
.co-blog__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.co-blog__card:hover .co-blog__media img { transform: scale(1.035); }
.co-blog__etiket {
    font-family: var(--bl-geo);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #6d7a68;
    margin: 16px 0 8px;
}
.co-blog__card h3 {
    font-family: var(--bl-geo);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.co-blog__card h3 a { color: var(--co-ink); }
.co-blog__card h3 a:hover { color: var(--co-ink); text-decoration: none; opacity: .75; }
.co-blog__card p {
    font-family: var(--bl-geo);
    font-size: 13px;
    line-height: 1.55;
    color: var(--co-muted);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.co-blog__incele {
    margin-top: auto;
    font-family: var(--bl-geo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--co-ink);
}
.co-blog__incele span { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
.co-blog__incele:hover { color: #D71920; text-decoration: none; }
.co-blog__incele:hover span { transform: translate(3px, -3px); }

@media (max-width: 991px) {
    .co-blog__grid { grid-template-columns: repeat(2, 1fr); }
    .co-blog__tumu { position: static; display: inline-block; margin-top: 14px; }
}
@media (max-width: 575px) {
    .co-blog__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   KATEGORİ ARASI TANITIM BANDLARI (mockup):
   A) Ofisinizi Dönüştürün — foto + adaçayı panel
   B) Ofislerinizde Estetik Dokunuşlar — koyu karo + beyaz ürün
   ============================================================ */
.co-ara {
    --ara-geo: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    margin-inline: calc(50% - 50vw);   /* tam genişlik (mockup edge-to-edge) */
    display: grid;
    min-height: 400px;
    overflow: hidden;
    font-family: var(--ara-geo);
}

/* A — foto + adaçayı panel */
.co-ara--donustur { grid-template-columns: 1.4fr 1fr; }
.co-ara--donustur .co-ara__foto {
    background-size: cover;
    background-position: center;
    min-height: 500px;
}
.co-ara__panel {
    background: #8e9c88;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px clamp(28px, 5vw, 72px);
    text-align: center;
}
.co-ara__panel-ic { max-width: 430px; }
.co-ara__panel h2 {
    font-family: var(--ara-geo);
    font-size: clamp(30px, 3vw, 52px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 16px;
}
.co-ara__panel p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 26px;
}
.co-ara__btn {
    display: inline-block;
    background: #f4efe7;
    color: #1a1613;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 15px 28px;
    transition: background .2s ease, transform .2s ease;
}
.co-ara__btn:hover { background: #fff; color: #1a1613; text-decoration: none; transform: translateY(-2px); }

/* B — koyu karo + beyaz ürün */
.co-ara--estetik { grid-template-columns: 1fr 1fr; background: #fff; }
.co-ara--estetik:hover { text-decoration: none; }
.co-ara__karo {
    background: #16130f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(28px, 5vw, 72px);
}
.co-ara__karo h2 {
    font-family: var(--ara-geo);
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 300;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 22px;
    max-width: 13ch;
}
.co-ara__karo-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(244, 239, 231, .78);
    transition: color .2s ease;
}
.co-ara__karo-ok span { display: inline-block; transition: transform .2s ease; }
.co-ara--estetik:hover .co-ara__karo-ok { color: #fff; }
.co-ara--estetik:hover .co-ara__karo-ok span { transform: translate(3px, -3px); }
.co-ara__urun {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow: hidden;
}
.co-ara__urun img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    transition: transform .3s ease;
}
.co-ara--estetik:hover .co-ara__urun img { transform: scale(1.04); }

@media (max-width: 860px) {
    .co-ara--donustur, .co-ara--estetik { grid-template-columns: 1fr; }
    .co-ara { min-height: 0; }
    .co-ara--donustur .co-ara__foto { min-height: 240px; }
    .co-ara__karo { order: 2; }
    .co-ara__urun { order: 1; min-height: 260px; }
    .co-ara__panel { padding: 40px 24px; }
}

/* ============================================================
   FİLELİ ÇALIŞMA KOLTUKLARI VİTRİNİ (mockup "mesh-chair-strip" birebir)
   3 portre panel (metin görsele gömülü) + hover'da beliren cam CTA pili.
   Kategori grid'i ile İndirimli Fırsat arasında.
   ============================================================ */
.mesh-chair-strip {
    margin: 50px auto 50px;
    padding: 0 60px;
    background: transparent;
}
.mesh-chair-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
/* kart sayısı admin'den değişebilir (varsayılan 3) */
.mesh-chair-strip-grid[data-kart="1"] { grid-template-columns: minmax(0, 1fr); }
.mesh-chair-strip-grid[data-kart="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mesh-chair-strip-grid[data-kart="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mesh-chair-strip-card {
    position: relative;
    min-width: 0;
    aspect-ratio: 1509 / 2048;
    overflow: hidden;
    border-radius: 10px;
    background: #eaece3;
    isolation: isolate;
}
.mesh-chair-strip-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19,24,16,0) 34%, rgba(19,24,16,.16) 100%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.mesh-chair-strip-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.mesh-chair-strip-cta {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.46);
    background: rgba(248,247,242,.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    color: #222320;
    font-family: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .28s ease, transform .35s cubic-bezier(.22,.61,.36,1), background .28s ease, border-color .28s ease;
    pointer-events: none;
}
.mesh-chair-strip-cta:hover { text-decoration: none; color: #222320; background: rgba(248,247,242,.72); border-color: rgba(255,255,255,.62); }
.mesh-chair-strip-cta-label { white-space: nowrap; }
.mesh-chair-strip-cta-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34,35,32,.18);
    background: rgba(255,255,255,.56);
    font-size: 14px;
    line-height: 1;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), background .28s ease, border-color .28s ease;
}
.mesh-chair-strip-card:hover img,
.mesh-chair-strip-card:focus-within img { transform: scale(1.045); }
.mesh-chair-strip-card:hover::after,
.mesh-chair-strip-card:focus-within::after { opacity: 1; }
.mesh-chair-strip-card:hover .mesh-chair-strip-cta,
.mesh-chair-strip-card:focus-within .mesh-chair-strip-cta { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mesh-chair-strip-card:hover .mesh-chair-strip-cta-icon,
.mesh-chair-strip-cta:hover .mesh-chair-strip-cta-icon { transform: translate(2px,-2px); background: rgba(255,255,255,.78); border-color: rgba(34,35,32,.28); }

@media (max-width: 1120px) {
    .mesh-chair-strip-grid { gap: 8px; }
    .mesh-chair-strip-cta { left: 18px; bottom: 18px; padding: 11px 13px 11px 16px; }
}
@media (max-width: 860px) {
    .mesh-chair-strip { width: min(1760px, 100% - 24px); margin-bottom: 34px; }
    .mesh-chair-strip-grid,
    .mesh-chair-strip-grid[data-kart] { grid-template-columns: 1fr; gap: 10px; }
    /* dokunmatikte CTA görünür (hover yok) */
    .mesh-chair-strip-card::after { opacity: 1; background: linear-gradient(180deg, rgba(19,24,16,0) 40%, rgba(19,24,16,.12) 100%); }
    .mesh-chair-strip-cta { opacity: 1; transform: none; pointer-events: auto; }
}

/* ============================================================
   Güven veren detaylar (mockup "quality-section" birebir):
   blog ile footer CTA arasında; 3 görselli kart + koyu gradyan
   + krem "İncele" düğmesi. Başlık kalıbı co-rooms-section ile aynı.
   ============================================================ */
.co-guven {
    --co-geo: Futura, "Futura PT", "Century Gothic", "Twentieth Century", "Tw Cen MT", "Avenir Next", Avenir, Arial, sans-serif;
    background: #f2f2f2;
    padding: 68px 0;
}
.co-guven__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 26px;
}
.co-guven__head h2 {
    margin: 0;
    max-width: 720px;
    font-family: var(--co-geo);
    font-weight: 600;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.12;
    letter-spacing: -.018em;
    color: var(--co-ink);
}
.co-guven__head p {
    margin: 0;
    max-width: 420px;
    color: var(--co-muted);
    font-size: 14px;
    line-height: 1.48;
}
.co-guven__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.co-guven__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    padding: 26px;
    border-radius: 26px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.co-guven__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.66));
}
.co-guven__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--co-shadow);
}
.co-guven__ic { position: relative; color: #fff; }
.co-guven__ic h3 {
    margin: 0 0 8px;
    font-family: var(--co-geo);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: #fff;
}
.co-guven__ic p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #eee;
}
.co-guven__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    background: #e6e3de;
    color: #111615;
    transition: background .18s ease;
}
.co-guven__card:hover .co-guven__btn { background: #fff; }
@media (max-width: 980px) {
    .co-guven__grid { grid-template-columns: 1fr 1fr; }
    .co-guven__head { display: block; }
    .co-guven__head h2 { margin-bottom: 12px; }
}
@media (max-width: 640px) {
    .co-guven { padding: 48px 0; }
    .co-guven__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   İhracat çözümleri (mockup "export-hero" birebir):
   tam genişlik 2 kolon — sol görsel + koyu gradyan başlık,
   sağ yeşil panel (kicker/başlık/6 kart/madde/CTA).
   ============================================================ */
.co-ihracat {
    --co-geo: Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
    --co-ih-koyu: #2f2c28;
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    min-height: 760px;
    background: #f5f4f2;
    overflow: hidden;
}
.co-ihracat__media {
    position: relative;
    min-height: 760px;
    background-size: cover;
    background-position: center;
}
.co-ihracat__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(31,36,33,.86) 0%,
        rgba(31,36,33,.68) 22%,
        rgba(31,36,33,.38) 52%,
        rgba(31,36,33,.10) 78%,
        rgba(31,36,33,0) 100%);
}
.co-ihracat__caption {
    position: absolute;
    left: 5vw;
    bottom: 64px;
    z-index: 2;
    max-width: 640px;
}
.co-ihracat__kicker {
    display: inline-block;
    margin-bottom: 16px;
    font-family: var(--co-geo);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #d9d5cc;
}
.co-ihracat__kicker--dark { color: var(--co-ih-koyu); }
.co-ihracat__caption h2 {
    margin: 0 0 18px;
    font-family: var(--co-geo);
    font-size: clamp(40px, 4.8vw, 72px);
    line-height: .98;
    letter-spacing: -.05em;
    font-weight: 600;
    color: #fff;
}
.co-ihracat__caption p {
    margin: 0;
    max-width: 560px;
    font-family: var(--co-geo);
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255,255,255,.86);
}
.co-ihracat__content {
    min-height: 760px;
    padding: 72px 5vw 72px 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #d8ddd3;
}
.co-ihracat__content h3 {
    margin: 0 0 20px;
    font-family: var(--co-geo);
    font-size: clamp(34px, 3.2vw, 54px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 600;
    color: var(--co-ih-koyu);
}
.co-ihracat__content > p {
    margin: 0 0 24px;
    font-family: var(--co-geo);
    font-size: 18px;
    line-height: 1.6;
    color: #465248;
}
.co-ihracat__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 26px;
}
.co-ihracat__grid a {
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: rgba(238,241,235,.58);
    border: 1px solid rgba(47,44,40,.08);
    border-radius: 16px;
    font-family: var(--co-geo);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--co-ih-koyu);
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.co-ihracat__grid a:hover {
    background: rgba(238,241,235,.88);
    transform: translateY(-2px);
}
.co-ihracat__points {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}
.co-ihracat__points li {
    position: relative;
    padding-left: 18px;
    font-family: var(--co-geo);
    font-size: 15px;
    line-height: 1.5;
    color: var(--co-ih-koyu);
}
.co-ihracat__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a84a4a;
}
.co-ihracat__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.co-ihracat__btn-dark,
.co-ihracat__btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    font-family: var(--co-geo);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
}
.co-ihracat__btn-dark { background: var(--co-ih-koyu); color: #fff; }
.co-ihracat__btn-light { background: #eef1eb; color: var(--co-ih-koyu); }
@media (max-width: 1080px) {
    .co-ihracat { grid-template-columns: 1fr; min-height: auto; }
    .co-ihracat__media { min-height: 520px; }
    .co-ihracat__content { min-height: auto; padding: 48px 5vw; }
}
@media (max-width: 560px) {
    .co-ihracat__grid { grid-template-columns: 1fr; }
    .co-ihracat__caption h2 { font-size: clamp(34px, 9vw, 48px); }
}

/* v291: iki büyük kartlı İhracat Çözümleri bölümü */
.export-solutions-v291 {
    --co-export-font: Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
    position: relative;
    padding: clamp(76px, 8vw, 118px) 5vw clamp(82px, 8vw, 124px);
    overflow: hidden;
    border-top: 1px solid #dedbd4;
    background: #f1f0ec;
    color: #202823;
    scroll-margin-top: 110px;
}
.export-v291-inner {
    width: min(100%, 1460px);
    margin: 0 auto;
}
.export-v291-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .65fr);
    gap: clamp(32px, 6vw, 100px);
    align-items: end;
    margin-bottom: clamp(34px, 4.2vw, 58px);
}
.export-v291-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-family: var(--co-export-font);
    font-size: 10px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #5b675f;
}
.export-v291-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6f7a72;
}
.export-v291-head h2 {
    margin: 0;
    font-family: var(--co-export-font);
    font-size: clamp(44px, 6.2vw, 88px);
    line-height: .94;
    font-weight: 600;
    letter-spacing: -.058em;
    color: #202823;
}
.export-v291-intro {
    max-width: 560px;
    margin: 0 0 5px;
    font-family: var(--co-export-font);
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.7;
    color: #6a6f6b;
}
.export-v291-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}
.export-v291-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8d6cf;
    border-radius: 26px;
    background: #f8f7f4;
    color: #202823;
    box-shadow: 0 10px 32px rgba(30, 38, 33, .055);
    transition: transform .32s cubic-bezier(.2, .75, .2, 1), border-color .32s ease, box-shadow .32s ease;
}
.export-v291-card:hover,
.export-v291-card:focus-visible {
    transform: translateY(-5px);
    border-color: #b8bdb8;
    box-shadow: 0 20px 44px rgba(30, 38, 33, .10);
    outline: none;
    text-decoration: none;
}
.export-v291-media {
    position: relative;
    height: clamp(260px, 27vw, 400px);
    overflow: hidden;
    background: #dfe2dc;
}
.export-v291-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 62%, rgba(27, 34, 30, .12));
    pointer-events: none;
}
.export-v291-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .65s cubic-bezier(.2, .75, .2, 1);
}
.export-v291-card:hover .export-v291-media img,
.export-v291-card:focus-visible .export-v291-media img {
    transform: scale(1.035);
}
.export-v291-card-franchise .export-v291-media {
    background: #e5e6e1;
}
.export-v291-card-franchise .export-v291-media img {
    padding: clamp(18px, 2.2vw, 34px);
    box-sizing: border-box;
    object-fit: contain;
}
.export-v291-card-franchise .export-v291-media::after {
    background: linear-gradient(180deg, transparent 68%, rgba(33, 40, 36, .07));
}
.export-v291-body {
    min-height: 230px;
    padding: clamp(26px, 3vw, 42px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
}
.export-v291-kicker {
    display: block;
    margin: 0 0 12px;
    font-family: var(--co-export-font);
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6a766e;
}
.export-v291-body h3 {
    margin: 0 0 14px;
    font-family: var(--co-export-font);
    font-size: clamp(27px, 2.7vw, 40px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -.045em;
    color: #202823;
}
.export-v291-body p {
    max-width: 560px;
    margin: 0;
    font-family: var(--co-export-font);
    font-size: 13px;
    line-height: 1.65;
    color: #6b706c;
}
.export-v291-arrow {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid #c9cbc6;
    border-radius: 50%;
    background: transparent;
    font-size: 19px;
    color: #303a34;
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease;
}
.export-v291-card:hover .export-v291-arrow,
.export-v291-card:focus-visible .export-v291-arrow {
    transform: rotate(45deg);
    border-color: #2d3831;
    background: #2d3831;
    color: #fff;
}
@media (max-width: 900px) {
    .export-v291-head { grid-template-columns: 1fr; gap: 24px; }
    .export-v291-intro { max-width: 680px; }
    .export-v291-grid { grid-template-columns: 1fr; }
    .export-v291-media { height: clamp(280px, 58vw, 460px); }
}
@media (max-width: 560px) {
    .export-solutions-v291 { padding-left: 20px; padding-right: 20px; }
    .export-v291-head h2 { font-size: clamp(40px, 13vw, 58px); }
    .export-v291-card { border-radius: 20px; }
    .export-v291-media { height: 245px; }
    .export-v291-body {
        min-height: 210px;
        padding: 25px 22px 23px;
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 14px;
    }
    .export-v291-body h3 { font-size: clamp(25px, 8vw, 34px); }
    .export-v291-body p { font-size: 12px; line-height: 1.58; }
    .export-v291-arrow { width: 40px; height: 40px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .export-v291-card,
    .export-v291-media img,
    .export-v291-arrow { transition: none !important; }
}

/* ============================================================
   HEADER — TÜM SAYFALARDA TEK DİL
   Anasayfa header'ı .co-hero-header kurallarıyla marka paletine
   bağlıydı; alt sayfalarda tema varsayılanı (mavi #377dff / #297cbb)
   görünüyordu — üyelik butonu tıklandığında açık mavi kutuya
   dönüşmesi de bundandı. Aşağısı o farkı kapatır; anasayfanın
   .co-hero-header kuralları !important olduğu için orada değişmez.
   ============================================================ */
.u-header__nav-link { color: var(--co-ink); }
.u-header__nav-item:focus .u-header__nav-link,
.u-header__nav-item:hover .u-header__nav-link,
.u-header__nav-link:hover,
.u-header .active > .u-header__nav-link { color: var(--co-accent-dark); }

/* Üyelik butonu + sepet ikonu (tema: btn-ghost-primary → mavi) */
.u-header .btn-ghost-primary,
.u-header .btn-ghost-primary .text-primary-max-lg,
.u-header .flaticon-shopping-basket,
.u-header .flaticon-shopping-basket.text-primary-max-lg { color: var(--co-ink); }
.u-header .btn-ghost-primary.active,
.u-header .btn-ghost-primary:active,
.u-header .btn-ghost-primary:focus,
.u-header .btn-ghost-primary:hover {
    color: var(--co-accent-dark);
    background-color: transparent;
    box-shadow: none;
}
.u-header .btn-ghost-primary:active .text-primary-max-lg,
.u-header .btn-ghost-primary:focus .text-primary-max-lg,
.u-header .btn-ghost-primary:hover .text-primary-max-lg { color: var(--co-accent-dark); }
.u-header .cart-trigger:hover { color: var(--co-accent-dark); }

/* Sepet rozeti: tanım dosya sonundaki "HEADER — indexD.html mockup'ı"
   bölümünde (kırmızı .cart-count karşılığı). */

/* Üst şerit linkleri (arama, telefon, showroom) aynı mürekkebi kullanır */
.u-header__topbar .u-header__navbar-link:hover,
.u-header__topbar a.text-dark:hover { color: var(--co-accent-dark); }

/* ============================================================
   ÜYELİK EKRANLARI (.co-auth) — giriş / kayıt / şifre sıfırlama
   Tam genişlik 2 kolon: sol koyu marka paneli (breadcrumb + başlık
   + fayda maddeleri + destek), sağ açık form paneli.
   PLP/PDP mockup diliyle aynı: geometrik sans, keskin köşeler,
   #2f2c28 mürekkep, kırmızı vurgu noktası.
   Kullanan sayfalar: uye_giris.php, uye_ol.php, sifremi_unuttum.php,
   sifre_sifirlama.php
   ============================================================ */
.co-auth {
    --auth-geo:   Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
    --auth-ink:   #2f2c28;
    --auth-muted: #6e6961;
    --auth-line:  #d4d0c8;
    --auth-bg:    #f5f4f2;
    --auth-dark:  #2f2c28;
    --auth-dot:   #d0402e;

    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: stretch;
    background: var(--auth-bg);
}

/* --- Sol koyu marka paneli --- */
.co-auth__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 74px clamp(28px, 4vw, 76px) 66px clamp(28px, 6vw, 108px);
    background: var(--auth-dark);
    overflow: hidden;
}
/* sağ-alta sönümlenen noktalı doku (mockup dokusuyla aynı) */
.co-auth__aside::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 320px;
    height: 320px;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 13px 13px;
    -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 68%);
    mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 68%);
    pointer-events: none;
}
.co-auth__aside > * { position: relative; z-index: 1; }

.co-auth__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    font-family: var(--auth-geo);
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(244, 239, 229, .5);
}
.co-auth__crumbs a { color: rgba(244, 239, 229, .72); }
.co-auth__crumbs a:hover { color: #fff; text-decoration: none; }
.co-auth__crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }

.co-auth__eyebrow {
    font-family: var(--auth-geo);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(244, 239, 229, .58);
    margin: 0 0 22px;
}
.co-auth__title {
    font-family: var(--auth-geo);
    font-weight: 300;
    font-size: clamp(38px, 3.6vw, 62px);
    line-height: 1.1;
    letter-spacing: .01em;
    color: #f5f1e9;
    max-width: 12ch;
    margin: 0 0 22px;
}
.co-auth__lead {
    font-family: var(--auth-geo);
    font-size: 17px;
    line-height: 1.62;
    color: rgba(244, 239, 229, .72);
    max-width: 440px;
    margin: 0 0 34px;
}
.co-auth__list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.co-auth__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--auth-geo);
    font-size: 15px;
    line-height: 1.45;
    color: rgba(244, 239, 229, .88);
}
.co-auth__list li::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: .45em;
    border-radius: 50%;
    background: var(--auth-dot);
}
.co-auth__destek {
    margin: 42px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(244, 239, 229, .16);
    font-family: var(--auth-geo);
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(244, 239, 229, .6);
}
.co-auth__destek a { color: #f5f1e9; font-weight: 600; letter-spacing: .02em; }
.co-auth__destek a:hover { color: #fff; text-decoration: none; }

/* --- Sağ form paneli --- */
.co-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 74px clamp(24px, 5vw, 96px);
}
.co-auth__form { width: 100%; max-width: 470px; }
.co-auth__head { margin-bottom: 30px; }
.co-auth__head h2 {
    font-family: var(--auth-geo);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .01em;
    color: var(--auth-ink);
    margin: 0 0 8px;
}
.co-auth__head p {
    font-family: var(--auth-geo);
    font-size: 14px;
    line-height: 1.6;
    color: var(--auth-muted);
    margin: 0;
}

/* Alan + etiket */
.co-auth__field { margin-bottom: 18px; }
.co-auth__label {
    display: block;
    font-family: var(--auth-geo);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-muted);
    margin: 0 0 8px;
}
.co-auth__label .opsiyonel { font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .75; }
.co-auth .form-control {
    height: 52px;
    padding: 0 16px;
    font-family: var(--auth-geo);
    font-size: 14.5px;
    color: var(--auth-ink);
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    box-shadow: none;
    transition: border-color .18s ease;
}
.co-auth .form-control::placeholder { color: #a49f96; }
.co-auth .form-control:focus {
    border-color: var(--auth-ink);
    background: #fff;
    box-shadow: none;
}
/* Şifre alanı — göster/gizle düğmesi input'un içine oturur */
.co-auth__sifre { position: relative; }
.co-auth__sifre .form-control { padding-right: 64px; }
.co-auth__goster {
    position: absolute;
    right: 4px;
    top: 0;
    height: 52px;
    padding: 0 12px;
    background: none;
    border: 0;
    font-family: var(--auth-geo);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--auth-muted);
    cursor: pointer;
}
.co-auth__goster:hover { color: var(--auth-ink); }

/* Doğrulama geri bildirimi — tema mesajı gizliyordu, burada görünür kılıyoruz */
.co-auth .u-has-error .form-control { border-color: #c9402e; }
.co-auth .u-has-success .form-control { border-color: #b9b4aa; }
.co-auth .u-has-error .invalid-feedback { display: block; }
.co-auth .invalid-feedback {
    font-family: var(--auth-geo);
    font-size: 12px;
    color: #c9402e;
    margin-top: 7px;
}
.co-auth .alert {
    font-family: var(--auth-geo);
    font-size: 13.5px;
    border-radius: 2px;
    border: 0;
    margin-bottom: 18px;
}

/* Satır içi ikili alan (şifre / şifre tekrar) */
.co-auth__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

/* Onay kutuları */
.co-auth__secenekler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 4px 0 24px;
}
.co-auth__check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--auth-geo);
    font-size: 13.5px;
    color: var(--auth-ink);
    cursor: pointer;
}
.co-auth__check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--auth-ink);
    cursor: pointer;
    flex: 0 0 auto;
}
.co-auth__check a { color: var(--auth-ink); text-decoration: underline; }
.co-auth__link {
    font-family: var(--auth-geo);
    font-size: 13.5px;
    color: var(--auth-muted);
    border-bottom: 1px solid rgba(47, 44, 40, .28);
}
.co-auth__link:hover { color: var(--auth-ink); border-color: var(--auth-ink); text-decoration: none; }

/* Ana buton */
.co-auth__submit {
    display: block;
    width: 100%;
    height: 54px;
    background: var(--auth-ink);
    color: #fff;
    border: 1px solid var(--auth-ink);
    border-radius: 2px;
    font-family: var(--auth-geo);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease;
}
.co-auth__submit:hover:not(:disabled) { background: #171512; border-color: #171512; color: #fff; }
.co-auth__submit:disabled { opacity: .6; cursor: default; }

/* Ayraç */
.co-auth__ayrac {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 18px;
    font-family: var(--auth-geo);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-muted);
}
.co-auth__ayrac::before,
.co-auth__ayrac::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--auth-line);
}

/* Sosyal giriş */
.co-auth__social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.co-auth__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 48px;
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    font-family: var(--auth-geo);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--auth-ink);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.co-auth__social a:hover {
    background: var(--auth-ink);
    border-color: var(--auth-ink);
    color: #fff;
    text-decoration: none;
}
.co-auth__social a .fab { font-size: 15px; }

/* Alt geçiş satırı */
.co-auth__alt {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--auth-line);
    text-align: center;
    font-family: var(--auth-geo);
    font-size: 14px;
    color: var(--auth-muted);
}
.co-auth__alt a {
    color: var(--auth-ink);
    font-weight: 600;
    border-bottom: 1px solid var(--auth-ink);
    margin-left: 4px;
}
.co-auth__alt a:hover { text-decoration: none; opacity: .75; }

/* Adım göstergesi (sifre_sifirlama.php — token ile gelen 2 adımlı form).
   Tema nav-icon yuvarlaklarının yerine ince numaralı şerit. */
.co-auth__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 28px;
    border: 0;
}
.co-auth__steps .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    font-family: var(--auth-geo);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--auth-muted);
    text-align: left;
}
.co-auth__steps .nav-item:hover { text-decoration: none; color: var(--auth-ink); }
.co-auth__steps .nav-item .no {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--auth-line);
    border-radius: 50%;
    font-size: 11px;
}
.co-auth__steps .nav-item.active {
    background: var(--auth-ink);
    border-color: var(--auth-ink);
    color: #fff;
}
.co-auth__steps .nav-item.active .no { border-color: rgba(255, 255, 255, .45); }

/* Adım 2 alanları ajax'tan gelir (ajax.php → tokenkontrol): tema
   col-sm-12 / form-label kalıbını buranın diline çekiyoruz. */
.co-auth .sonuc .col-sm-12 { padding: 0; margin: 0 0 18px !important; }
.co-auth .sonuc .card-header { display: none; }
.co-auth .form-label {
    display: block;
    font-family: var(--auth-geo);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-muted);
    margin: 0 0 8px;
}

/* Adım formunun ileri/geri düğmeleri */
.co-auth__adimbtn {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}
.co-auth__adimbtn .co-auth__submit { margin: 0; }
.co-auth__geri {
    height: 54px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    font-family: var(--auth-geo);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--auth-ink);
    cursor: pointer;
}
.co-auth__geri:hover { border-color: var(--auth-ink); text-decoration: none; color: var(--auth-ink); }

/* Sayfa altındaki eski boşluk/çizgiyi bu ekranlarda kapat */
.co-auth-sayfa .footer.mt-4 { margin-top: 0 !important; }

@media (max-width: 1080px) {
    .co-auth { grid-template-columns: 1fr; }
    .co-auth__aside { padding: 44px 5vw 40px; }
    .co-auth__title { max-width: none; font-size: clamp(32px, 7vw, 46px); }
    .co-auth__lead { margin-bottom: 26px; }
    .co-auth__destek { margin-top: 30px; }
    .co-auth__panel { padding: 44px 5vw 56px; }
    .co-auth__form { max-width: 560px; }
}
@media (max-width: 575px) {
    .co-auth__list { gap: 11px; }
    .co-auth__list li { font-size: 14px; }
    .co-auth__row { grid-template-columns: 1fr; }
    .co-auth__secenekler { justify-content: flex-start; }
}

/* ============================================================
   SWEETALERT2 — SİTE GENELİ DİYALOG DİLİ (yeni tasarım)
   Vendor sınıfları (vendor/sweetalert/sweetalert2.css, v9) korunur;
   burada yalnızca GÖRSEL katman override edilir.
   Buton renkleri CSS'e devredildi (inc/js.php → Swal.mixin
   buttonsStyling:false), bu yüzden çağrılardaki confirmButtonColor
   değerleri artık dikkate alınmaz — tek görsel kaynak burasıdır.
   Dil: PDP / üyelik mockup'ı (keskin köşe, geometrik sans, ink #2f2c28).
   ============================================================ */
/* Token'lar :root'ta — swal2 kutusu body'ye ekleniyor, kapsayıcıya bağlarsak
   render anında değişken çözülmezse renkler (ör. koyu buton zemini) düşer. */
:root {
    --sw-ink:    #2f2c28;
    --sw-muted:  #6e6961;
    --sw-line:   #d4d0c8;
    --sw-soft:   #f5f4f2;
    --sw-ok:     #2f6d54;
    --sw-warn:   #a3823f;
    --sw-err:    #9a2c22;
    --sw-info:   #3a4a52;
    --sw-geo:    Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
}
.swal2-container { padding: 16px; }
/* Bilinçli olarak backdrop-filter YOK: blur ayrı bir kompozit katman açıyor ve
   üstünde animasyonlu kutu varken Firefox kutuyu bayat boyayabiliyor
   (buton yerini kaplayıp çizilmiyordu). Sade koyulaştırma yeterli ve güvenli. */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(22, 20, 17, .6);
}

/* --- Kutu --- */
.swal2-popup:not(.swal2-toast) {
    width: min(480px, calc(100vw - 32px));
    max-width: 100%;
    padding: 40px 36px 32px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(20, 18, 15, .28);
    font-family: var(--sw-geo);
    color: var(--sw-ink);
}
/* Köşe konumundaki kısa bildirimler (sil / kupon gibi) daha kompakt */
.swal2-container:not(.swal2-center) .swal2-popup:not(.swal2-toast) {
    width: min(380px, calc(100vw - 32px));
    padding: 26px 28px;
}

/* --- Başlık ve metin --- */
.swal2-popup:not(.swal2-toast) .swal2-title {
    font-family: var(--sw-geo);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--sw-ink);
    margin: 0 0 10px;
}
.swal2-container:not(.swal2-center) .swal2-popup:not(.swal2-toast) .swal2-title { font-size: 17px; }
.swal2-popup:not(.swal2-toast) .swal2-content,
.swal2-popup:not(.swal2-toast) .swal2-html-container {
    font-family: var(--sw-geo);
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--sw-muted);
    padding: 0;
}
.swal2-popup .swal2-content strong,
.swal2-popup .swal2-html-container strong { color: var(--sw-ink); font-weight: 600; }
.swal2-popup .swal2-footer {
    border-top: 1px solid var(--sw-line);
    margin: 24px 0 0;
    padding: 16px 0 0;
    font-size: 12.5px;
    color: var(--sw-muted);
}

/* --- İkonlar: ince halka, markaya bağlı renkler --- */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    font-size: 12px;              /* 5em kutu → 60px; alt parçalar em ile birlikte ölçeklenir */
    margin: 2px auto 22px;
}
.swal2-icon.swal2-success { border-color: rgba(47, 109, 84, .22); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(47, 109, 84, .22); }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--sw-ok); }
.swal2-icon.swal2-error { border-color: rgba(154, 44, 34, .25); }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--sw-err); }
.swal2-icon.swal2-warning  { border-color: rgba(163, 130, 63, .35); color: var(--sw-warn); }
.swal2-icon.swal2-info     { border-color: rgba(58, 74, 82, .28);   color: var(--sw-info); }
.swal2-icon.swal2-question { border-color: rgba(47, 44, 40, .22);   color: var(--sw-ink); }

/* --- Aksiyonlar --- */
.swal2-popup:not(.swal2-toast) .swal2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 28px 0 0;
}
.swal2-popup:not(.swal2-toast) .swal2-actions > button {
    flex: 1 1 0;
    min-width: 132px;
    min-height: 52px;
    margin: 0;
    padding: 0 14px;
    /* display'e dokunulmuyor: swal2 gizlemek için butona inline display:none
       yazıyor, override edersek gizli butonlar (ör. showConfirmButton:false) açılır.
       Buton içeriğini tarayıcı zaten dikeyde ortalar. */
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 2px;
    font-family: var(--sw-geo, Arial, sans-serif);
    font-size: 11.5px;             /* "ALIŞVERİŞE DEVAM ET" tek satıra sığsın */
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.swal2-popup .swal2-actions > button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(47, 44, 40, .35);
}
/* Birincil aksiyon — Swal.mixin reverseButtons ile her zaman sağda.
   Renkler var() + literal yedekle: değişken çözülmezse beyaz üstüne beyaz
   (görünmez buton) durumu oluşamaz. */
.swal2-popup .swal2-actions .swal2-confirm { background: var(--sw-ink, #2f2c28); color: #fff; }
.swal2-popup .swal2-actions .swal2-confirm:hover { background: #16130f; }
/* İkincil / vazgeç */
.swal2-popup .swal2-actions .swal2-cancel {
    background: #fff;
    color: var(--sw-ink, #2f2c28);
}
.swal2-popup .swal2-actions .swal2-cancel:hover { background: var(--sw-soft); border-color: var(--sw-ink); }
/* Yıkıcı aksiyon */
.swal2-popup .swal2-actions .swal2-deny { background: var(--sw-err); color: #fff; }
.swal2-popup .swal2-actions .swal2-deny:hover { background: #7d231b; }
/* Yükleniyor durumu: buttonsStyling:false olduğu için spinner ::after ile gelir.
   Buton metni gizlenir, sadece dönen halka kalır. */
.swal2-actions.swal2-loading .swal2-cancel { margin: 0; }
.swal2-popup .swal2-actions.swal2-loading .swal2-confirm {
    flex: 0 0 auto;
    min-width: 60px;
    font-size: 0;
    cursor: default;
}
.swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
    margin: 0;
    border-color: rgba(255, 255, 255, .38);
    border-right-color: transparent;
    box-shadow: none;
}

/* --- Kapat düğmesi --- */
.swal2-popup .swal2-close {
    width: 40px;
    height: 40px;
    font-size: 30px;
    line-height: 36px;
    border-radius: 0;
    color: var(--sw-muted);
    transition: color .18s ease;
}
.swal2-popup .swal2-close:hover,
.swal2-popup .swal2-close:focus {
    color: var(--sw-ink);
    background: transparent;
    transform: none;
    box-shadow: none;
    outline: none;
}

/* --- Girdi alanları --- */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
    width: 100%;
    height: 52px;
    margin: 14px 0 0;
    padding: 0 14px;
    border: 1px solid var(--sw-line);
    border-radius: 2px;
    box-shadow: none;
    background: #fff;
    font-family: var(--sw-geo);
    font-size: 14px;
    color: var(--sw-ink);
}
.swal2-popup .swal2-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; }
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus { border-color: var(--sw-ink); box-shadow: none; outline: none; }
.swal2-popup .swal2-validation-message {
    background: #fbf2f1;
    color: var(--sw-err);
    border-radius: 2px;
    font-family: var(--sw-geo);
    font-size: 12.5px;
}
.swal2-popup .swal2-validation-message::before { background: var(--sw-err); border-radius: 2px; }

/* --- Sayaç çubuğu --- */
.swal2-timer-progress-bar { background: rgba(200, 163, 93, .9); }

/* --- Toast (hediye çarkı vb.) --- */
.swal2-popup.swal2-toast {
    padding: 14px 16px;
    border: 1px solid var(--sw-line);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(20, 18, 15, .18);
    font-family: var(--sw-geo);
}
.swal2-popup.swal2-toast .swal2-title {
    font-family: var(--sw-geo);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sw-ink);
    margin: 0 0 0 10px;
}
.swal2-popup.swal2-toast .swal2-content,
.swal2-popup.swal2-toast .swal2-html-container { font-size: 12.5px; color: var(--sw-muted); }

/* --- Açılış / kapanış hareketi: vendor bounce yerine yumuşak yükseliş --- */
@keyframes coSwalIn  { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes coSwalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.99); } }
.swal2-popup.swal2-show { animation: coSwalIn .26s cubic-bezier(.2, .75, .28, 1) both; }
.swal2-popup.swal2-hide { animation: coSwalOut .16s ease-in both; }
@media (prefers-reduced-motion: reduce) {
    .swal2-popup.swal2-show,
    .swal2-popup.swal2-hide { animation: none; }
}

@media (max-width: 480px) {
    .swal2-popup:not(.swal2-toast) { padding: 32px 22px 26px; }
    .swal2-popup:not(.swal2-toast) .swal2-title { font-size: 21px; }
    .swal2-popup:not(.swal2-toast) .swal2-actions { flex-direction: column-reverse; }
    .swal2-popup:not(.swal2-toast) .swal2-actions > button { flex: 1 1 auto; width: 100%; min-width: 0; }
}

/* ============================================================
   ÖDEME SAYFASI (.co-odeme) — sepet/PDP ile aynı dil
   odeme.php markup'ı tamamen TEMA sınıflarıyla yazılmış; DOM'a
   dokunmamak için main#content'e eklenen tek `co-odeme` sınıfıyla
   kapsanıp buradan giydirildi. Tema utility'lerinin tamamı
   !important (bg-gray/bg-light/bg-primary/text-primary/border-gray…)
   olduğundan override'lar da !important taşımak zorunda.
   Form hook'ları (js-form-message, u-has-error, data-msg, js-validate,
   data-divi) markup'ta olduğu gibi duruyor — yalnız görsel katman.
   ============================================================ */
.co-odeme {
    --od-ink:       #2f2c28;
    --od-muted:     #6e6961;
    --od-line:      #d4d0c8;
    --od-line-soft: #e4e0d8;
    --od-bg:        #f5f4f2;
    --od-panel:     #faf9f6;
    --od-gold:      #a3823f;
    --od-gold-soft: #c8a35d;
    --od-font: Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;

    background-color: var(--od-bg) !important;
    font-family: var(--od-font);
}

/* --- Kartlar: gölge yok, ince çizgi, keskin köşe --- */
.co-odeme .shadow-soft { box-shadow: none !important; }
.co-odeme .rounded,
.co-odeme .rounded-sm,
.co-odeme .rounded-lg { border-radius: 2px !important; }
.co-odeme .shadow-soft.bg-white,
.co-odeme .js-sticky-block { border: 1px solid var(--od-line-soft) !important; }
.co-odeme .border-color-7 { border-color: var(--od-line-soft) !important; }
.co-odeme .border-width-2 { border-width: 1px !important; }
.co-odeme .border-gray { border-color: var(--od-line) !important; }
.co-odeme .bg-light,
.co-odeme .bg-soft-success { background-color: var(--od-panel) !important; }
.co-odeme .text-primary { color: var(--od-ink) !important; }
.co-odeme .text-gray-1 { color: var(--od-muted) !important; }
.co-odeme .text-red-light-2 { color: var(--od-gold) !important; }

/* --- Adım göstergesi (1-2-3) --- */
.co-odeme .list-group-item { background: transparent; border: 0; }
.co-odeme .list-group-item .rounded-circle {
    font-family: var(--od-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--od-muted);
}
.co-odeme .list-group-item .rounded-circle.bg-primary {
    background-color: var(--od-ink) !important;
    border-color: var(--od-ink) !important;
    color: #fff !important;
}
.co-odeme .list-group-item > div:last-child {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Bölüm başlıkları (Teslimat / Fatura / Teslimat Seçenekleri) --- */
.co-odeme h5.bg-gray {
    background-color: #f0eee9 !important;
    border-left: 3px solid var(--od-gold);
    padding: 13px 16px !important;
    margin-bottom: 20px !important;
    font-family: var(--od-font);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--od-ink) !important;
    line-height: 1.3 !important;
}

/* --- Uyarı kutuları --- */
.co-odeme .alert {
    border-radius: 2px;
    font-size: 12.5px;
    line-height: 1.55;
    border: 1px solid transparent;
}
.co-odeme .alert-warning { background: #faf6ec; border-color: #ead9b8; color: #6b5524; }
.co-odeme .alert-danger  { background: #fbf2f1; border-color: #e8cdc9; color: #8f2a20; }
.co-odeme .alert-success,
.co-odeme .alert-info    { background: #f2f6f3; border-color: #cfe0d6; color: #2f6d54; }
.co-odeme .alert-soft-primary {
    background-color: var(--od-panel) !important;
    border-color: var(--od-line-soft);
    color: var(--od-ink);
}
.co-odeme .alert-soft-primary .alert-heading {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--od-ink);
}
.co-odeme .bg-soft-primary { background-color: var(--od-panel) !important; }
.co-odeme .alert-link    { color: inherit; text-decoration: underline; }

/* --- Form alanları --- */
.co-odeme .form-label {
    font-family: var(--od-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--od-muted);
    margin-bottom: 8px;
}
.co-odeme .form-control {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--od-line);
    border-radius: 2px;
    background: #fff;
    box-shadow: none;
    font-family: var(--od-font);
    font-size: 13.5px;
    color: var(--od-ink);
}
.co-odeme textarea.form-control { height: auto; min-height: 100px; padding: 12px 14px; line-height: 1.55; }
.co-odeme .form-control:focus { border-color: var(--od-ink); box-shadow: none; }
.co-odeme .form-control::placeholder { color: #a8a29a; }
.co-odeme .u-has-error .form-control { border-color: #b8564a; }
.co-odeme .invalid-feedback { font-size: 11.5px; color: #8f2a20; }

/* --- Selectpicker (bootstrap-select 1.13) ---
   Kütüphane, select'in sınıflarını (form-control dahil) SARMALAYICI div'e
   kopyalıyor. Bu yüzden .form-control kutu stili hem sarmalayıcıya hem
   içindeki butona uygulanıp "kutu içinde kutu" çıkıyordu; ayrıca butona
   flex verilince tema oku (::after) mutlak konumlu .filter-option'ın
   altına düşüyordu. Kutu görünümü YALNIZ butondan gelir, sarmalayıcı
   kütüphanenin beklediği gibi nötr kalır. */
.co-odeme .bootstrap-select.form-control {
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.co-odeme .bootstrap-select > .dropdown-toggle {
    position: relative;
    display: block !important;
    width: 100%;
    height: 48px;
    padding: 0 38px 0 14px !important;
    line-height: 46px;
    border: 1px solid var(--od-line) !important;
    border-radius: 2px !important;
    background-color: #fff !important;
    color: var(--od-ink) !important;
    font-family: var(--od-font);
    font-size: 13.5px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}
/* .filter-option butonun padding'ini inherit eder; metin dikeyde ortalanır */
.co-odeme .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    line-height: 46px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Tema oku (Font Awesome ::after) sağa sabitlenir */
.co-odeme .bootstrap-select > .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    right: 14px;
    margin: 0;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--od-muted);
}
.co-odeme .bootstrap-select > .dropdown-toggle:focus,
.co-odeme .bootstrap-select > .dropdown-toggle:hover,
.co-odeme .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--od-ink) !important;
    background-color: #fff !important;
    color: var(--od-ink) !important;
    outline: none !important;
}
.co-odeme .bootstrap-select > .dropdown-toggle.bs-placeholder,
.co-odeme .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.co-odeme .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.co-odeme .bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: #a8a29a !important; }
.co-odeme .u-has-error .bootstrap-select > .dropdown-toggle { border-color: #b8564a !important; }

.co-odeme .bootstrap-select .dropdown-menu {
    border-radius: 2px;
    border-color: var(--od-line-soft);
    box-shadow: 0 14px 34px rgba(20, 18, 15, .12);
    font-family: var(--od-font);
    font-size: 13.5px;
    padding: 4px 0;
}
.co-odeme .bootstrap-select .dropdown-menu li a { padding: 9px 14px; color: var(--od-ink); }
.co-odeme .bootstrap-select .dropdown-menu li a:hover,
.co-odeme .bootstrap-select .dropdown-menu li a:focus { background: var(--od-bg); color: var(--od-ink); }
.co-odeme .bootstrap-select .dropdown-menu li.selected a { background: var(--od-bg); font-weight: 600; }
.co-odeme .bootstrap-select .bs-searchbox .form-control { height: 42px; }

/* --- Radio / checkbox --- */
.co-odeme .custom-control-label { font-size: 13px; color: var(--od-ink); }
.co-odeme .custom-control-label::before { border-color: var(--od-line) !important; }
.co-odeme .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--od-ink) !important;
    border-color: var(--od-ink) !important;
}
.co-odeme .custom-control-input:focus ~ .custom-control-label::before { box-shadow: none !important; }

/* --- Teslimat seçenekleri (iki kutu tek liste gibi birleşir) --- */
.co-odeme .bg-white.rounded.p-3 { border: 1px solid var(--od-line-soft); }
.co-odeme .bg-white.rounded.p-3 + hr.my-0 { display: none; }
.co-odeme hr.my-0 + .bg-white.rounded.p-3 { margin-top: -1px; }

/* --- Kayıtlı adres kartları (üye girişinde) --- */
.co-odeme .address_item { border-radius: 2px; border-color: var(--od-line-soft); }
.co-odeme .address_item.selected { border-color: var(--od-ink); }
.co-odeme .address_item h3 { font-size: 13px; font-weight: 600; color: var(--od-ink); }
.co-odeme .address_item p,
.co-odeme .address_item span { font-size: 12px; color: var(--od-muted); }

/* --- Ödeme tipi seçimi (Kredi Kartı / Havale) --- */
.co-odeme .nav-choose .nav-link {
    border: 1px solid var(--od-line) !important;
    border-radius: 2px !important;
    background: #fff;
    transition: border-color .18s ease, background .18s ease;
}
.co-odeme .nav-choose .nav-link:hover { border-color: var(--od-ink) !important; }
.co-odeme .nav-choose .nav-link.active { border-color: var(--od-ink) !important; background: var(--od-panel); }
.co-odeme .nav-choose .nav-link .rounded-circle.bg-primary { background-color: var(--od-ink) !important; }
.co-odeme .nav-choose .nav-link .w-100.text-dark {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--od-ink) !important;
}

/* --- "Ödenecek Tutar" paneli --- */
.co-odeme .d-flex.flex-column.bg-light.p-3 { border: 1px solid var(--od-line-soft); }
.co-odeme .d-flex.flex-column.bg-light.p-3 h3 {
    font-family: var(--od-font);
    font-size: 17px;
    font-weight: 500;
    color: var(--od-ink);
}
.co-odeme .d-flex.flex-column.bg-light.p-3 h3 span { font-weight: 600; }
.co-odeme .d-flex.flex-column.bg-light.p-3 p { font-size: 11.5px; color: var(--od-muted); }

/* --- Ana aksiyon butonu --- */
.co-odeme .btn-success {
    height: 56px;
    background-color: var(--od-ink) !important;
    border-color: var(--od-ink) !important;
    color: #fff !important;
    border-radius: 2px !important;
    font-family: var(--od-font);
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .11em;
    text-transform: uppercase;
    box-shadow: none !important;
}
.co-odeme .btn-success:hover,
.co-odeme .btn-success:focus,
.co-odeme .btn-success:active {
    background-color: #16130f !important;
    border-color: #16130f !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Kupon kutusu (sağ özet) --- */
.co-odeme .u-form .form-control { border-radius: 2px 0 0 2px !important; }
.co-odeme .btn-primary,
.co-odeme .u-btn-primary {
    height: 48px;
    padding: 0 18px;
    background-color: var(--od-ink) !important;
    border-color: var(--od-ink) !important;
    color: #fff !important;
    border-radius: 0 2px 2px 0 !important;
    font-family: var(--od-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: none !important;
}
.co-odeme .btn-primary:hover,
.co-odeme .u-btn-primary:hover { background-color: #16130f !important; border-color: #16130f !important; }

/* --- Sağ sipariş özeti --- */
.co-odeme .js-sticky-block .font-size-24 {
    font-family: var(--od-font);
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--od-ink) !important;
    margin-left: 0 !important;
}
.co-odeme .js-sticky-block .font-size-24 + .font-size-14 {
    font-size: 10.5px !important;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--od-muted);
}
.co-odeme .js-sticky-block .media h2 a { color: var(--od-ink); font-size: 13px; font-weight: 600; }
.co-odeme .js-sticky-block .media h2 a:hover { color: var(--od-gold); text-decoration: none; }
.co-odeme .js-sticky-block .media small { font-size: 11px; color: var(--od-muted) !important; }
.co-odeme .js-sticky-block img { background: #f0efec; }
.co-odeme .rounded-lg.bg-gray {
    background-color: var(--od-bg) !important;
    border: 1px solid var(--od-line-soft);
}
.co-odeme .rounded-lg.bg-brown-light {
    background-color: #f7f2e6 !important;
    border: 1px solid #e6d9bb;
}
.co-odeme .js-sticky-block h3.h6 {
    font-family: var(--od-font);
    font-size: 12.5px !important;
    font-weight: 500;
    color: var(--od-muted) !important;
    margin: 0;
}
.co-odeme .js-sticky-block .media-body span { font-size: 13px; color: var(--od-ink); }
.co-odeme .odeme_odenecek_tutar {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--od-ink);
}
.co-odeme .js-sticky-block hr { border-color: var(--od-line-soft); }

@media (max-width: 767px) {
    .co-odeme .pt-4.pb-5.px-5 { padding-left: 18px !important; padding-right: 18px !important; }
    .co-odeme .list-group-item > div:last-child { font-size: 9.5px; }
}

/* ============================================================
   MAĞAZALARIMIZ (.co-magaza) — indexD.html mockup'ı birebir
   Kaynak: indexD.html içindeki storesPageFrame iframe'i (base64
   srcdoc). Mockup'taki override zincirleri (stores-map-full-hero-fix,
   stores-map-render-fix) burada DÜZLEŞTİRİLMİŞ hâlde yazıldı; yani
   efektif değerler tek yerde. Mockup'ta 7 mağaza için sabit olan
   strip kolon sayısı auto-fit'e çevrildi (mağaza sayısı DB'den gelir).
   Harita kaynağı: magaza.magaza_harita içindeki gömülü iframe src'si
   (pin doğru yerde kalsın diye); yoksa koordinattan OpenStreetMap.
   ============================================================ */
.co-magaza {
    --mg-bg:    #F5F4F2;
    --mg-paper: #FAF9F7;
    --mg-ink:   #2F2C28;
    --mg-muted: #756F67;
    --mg-line:  #D6D1C9;
    --mg-red:   #D71920;
    --mg-font:  Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;

    display: block;
    background: var(--mg-bg);
    color: var(--mg-ink);
    font-family: var(--mg-font);
}
.co-magaza *,
.co-magaza *::before,
.co-magaza *::after { box-sizing: border-box; }
.co-magaza a { color: inherit; text-decoration: none; }

/* --- Breadcrumb (h1 burada; tema .breadcrumb'ıyla çakışmasın diye .co-mg-bc) --- */
.co-mg-bc {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 18px 5vw;
    border-bottom: 1px solid rgba(214, 209, 201, .65);
    font-size: 12px;
    color: var(--mg-muted);
}
.co-mg-bc a:hover { color: var(--mg-ink); }
.co-mg-bc h1 {
    margin: 0;
    font-family: var(--mg-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mg-ink);
    display: inline;
}

/* --- Harita bandı --- */
.co-magaza .stores-hero {
    padding: 34px 5vw 32px;
    background: var(--mg-bg);
    border-bottom: 1px solid var(--mg-line);
}
.co-magaza .stores-hero-inner {
    display: block;
    max-width: 1650px;
    margin: 0 auto;
}
.co-magaza .store-map-shell {
    width: 100%;
    min-height: 690px;
    border-radius: 30px;
    overflow: hidden;
    background: #E7E4DE;
    border: 1px solid rgba(47, 44, 40, .09);
    display: grid;
    grid-template-rows: minmax(570px, 1fr) auto;
    box-shadow: 0 22px 56px rgba(47, 44, 40, .10);
}
.co-magaza .store-map-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 570px;
    overflow: hidden;
    background: #E7E4DE;
}
.co-magaza #storesMapFrame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #E7E4DE;
    filter: saturate(.78) contrast(.98) brightness(1.02);
}
.co-magaza .store-map-stage.map-loading::before {
    content: "Harita yükleniyor";
    position: absolute;
    inset: 0;
    z-index: 2;      /* iframe'in zemini opak olduğu için üstte durmalı */
    display: grid;
    place-items: center;
    background: #E7E4DE;
    color: #817B73;
    font-size: 11px;
    letter-spacing: .08em;
}
.co-magaza .store-map-overlay {
    position: absolute;
    z-index: 3;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    pointer-events: none;
}
.co-magaza .store-map-info {
    max-width: 560px;
    padding: 19px 21px;
    border-radius: 19px;
    background: rgba(250, 249, 247, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 35px rgba(47, 44, 40, .13);
}
.co-magaza .store-map-info small {
    display: block;
    margin-bottom: 6px;
    font-size: 8px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mg-red);
}
.co-magaza .store-map-info strong {
    display: block;
    margin-bottom: 7px;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.15;
}
.co-magaza .store-map-info span {
    display: block;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--mg-muted);
}
.co-magaza .store-map-directions {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-width: 165px;
    padding: 15px 19px;
    border-radius: 999px;
    background: var(--mg-ink);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    box-shadow: 0 14px 30px rgba(47, 44, 40, .17);
    transition: background .18s ease;
}
.co-magaza .store-map-directions:hover { background: #16130F; color: #fff; }

/* Mockup'ta 7 kolon sabitti; mağaza sayısı DB'den geldiği için auto-fit */
.co-magaza .map-location-strip {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    background: #F7F5F1;
    border-top: 1px solid rgba(47, 44, 40, .08);
}
.co-magaza .map-location-button {
    min-width: 0;
    min-height: 60px;
    padding: 13px 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--mg-ink);
    font-family: var(--mg-font);
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.co-magaza .map-location-button:hover { background: #ECE9E3; }
.co-magaza .map-location-button.active {
    background: var(--mg-ink);
    color: #fff;
    box-shadow: 0 10px 24px rgba(47, 44, 40, .12);
}
.co-magaza .map-location-button span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
}
.co-magaza .map-location-button small {
    display: block;
    margin-top: 4px;
    font-size: 8px;
    color: var(--mg-muted);
}
.co-magaza .map-location-button.active small { color: rgba(255, 255, 255, .58); }

/* --- Filtre şeridi --- */
.co-magaza .filter-bar {
    position: sticky;
    top: 96px;       /* sabitlenen tema header'ının altında kalsın (PDP ile aynı ofset) */
    z-index: 40;
    padding: 18px 5vw;
    background: rgba(245, 244, 242, .93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mg-line);
}
.co-magaza .filter-inner {
    max-width: 1650px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
.co-magaza .filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.co-magaza .filter-button {
    border: 1px solid var(--mg-line);
    background: transparent;
    padding: 10px 17px;
    border-radius: 999px;
    font-family: var(--mg-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--mg-ink);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.co-magaza .filter-button.active,
.co-magaza .filter-button:hover {
    background: var(--mg-ink);
    border-color: var(--mg-ink);
    color: #fff;
}
.co-magaza .result-count { font-size: 10px; color: var(--mg-muted); white-space: nowrap; }

/* --- Mağaza kartları --- */
.co-magaza .stores-section { padding: 38px 5vw 100px; }
.co-magaza .stores-grid {
    max-width: 1650px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.co-magaza .store-card {
    position: relative;
    min-height: 445px;
    padding: 28px;
    background: var(--card-accent, #E8DED1);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .24s ease, box-shadow .24s ease;
}
.co-magaza .store-card::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
}
.co-magaza .store-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(47, 44, 40, .09); }
.co-magaza .store-card.hidden { display: none; }
.co-magaza .store-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.co-magaza .store-number { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.co-magaza .store-type {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .58);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.co-magaza .store-card-body { position: relative; z-index: 2; margin-top: 45px; max-width: 680px; }
.co-magaza .store-location {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.co-magaza .store-location small { font-size: 10px; font-weight: 400; color: var(--mg-muted); }
.co-magaza .store-card h2 {
    margin: 0 0 14px;
    font-family: var(--mg-font);
    font-size: clamp(31px, 3.1vw, 53px);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 500;
    color: var(--mg-ink);
}
.co-magaza .store-description {
    margin: 0 0 22px;
    max-width: 610px;
    font-size: 12.5px;
    line-height: 1.62;
    color: #5F5A53;
}
.co-magaza .store-card address {
    max-width: 600px;
    margin: 0;
    font-style: normal;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
}
.co-magaza .store-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 26px;
    padding-top: 21px;
    border-top: 1px solid rgba(47, 44, 40, .14);
}
.co-magaza .store-contact-grid a { min-width: 0; }
.co-magaza .store-contact-grid a:hover strong { text-decoration: underline; }
.co-magaza .store-contact-grid small {
    display: block;
    margin-bottom: 6px;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mg-muted);
}
.co-magaza .store-contact-grid strong { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.co-magaza .store-card-actions {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    gap: 11px;
}
.co-magaza .store-card-actions a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 152px;
    padding: 13px 16px;
    border: 1px solid rgba(47, 44, 40, .23);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.co-magaza .store-card-actions a:hover { background: var(--mg-ink); color: #fff; border-color: var(--mg-ink); }

/* --- Kapanış bandı --- */
.co-magaza .stores-cta { padding: 0 5vw 95px; }
.co-magaza .stores-cta-inner {
    max-width: 1650px;
    margin: auto;
    padding: 58px;
    border-radius: 30px;
    background: var(--mg-ink);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
}
.co-magaza .stores-cta h2 {
    margin: 0 0 13px;
    font-family: var(--mg-font);
    font-size: clamp(36px, 4vw, 62px);
    line-height: .96;
    letter-spacing: -.052em;
    font-weight: 500;
    color: #fff;
}
.co-magaza .stores-cta p { margin: 0; max-width: 620px; font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, .68); }
.co-magaza .stores-cta a {
    display: inline-block;
    padding: 15px 22px;
    border-radius: 999px;
    background: #fff;
    color: var(--mg-ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    transition: background .18s ease;
}
.co-magaza .stores-cta a:hover { background: #E8DED1; }

@media (max-width: 1180px) {
    .co-magaza .store-map-shell { min-height: 650px; grid-template-rows: minmax(520px, 1fr) auto; }
    .co-magaza .store-map-stage { min-height: 520px; }
    .co-magaza .map-location-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 1050px) {
    .co-magaza .stores-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .co-magaza .stores-hero { padding: 20px 16px 24px; }
    .co-magaza .store-map-shell { min-height: 690px; border-radius: 24px; grid-template-rows: minmax(470px, 1fr) auto; }
    .co-magaza .store-map-stage { min-height: 470px; }
    .co-magaza .store-map-overlay { left: 14px; right: 14px; bottom: 14px; flex-direction: column; align-items: stretch; gap: 10px; }
    .co-magaza .store-map-info { padding: 15px 16px; max-width: none; }
    .co-magaza .store-map-directions { align-self: flex-start; }
    .co-magaza .map-location-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-magaza .store-contact-grid { grid-template-columns: 1fr; }
    .co-magaza .stores-cta-inner { grid-template-columns: 1fr; padding: 36px; }
    .co-magaza .stores-section { padding: 28px 16px 70px; }
    .co-magaza .filter-bar { padding: 14px 16px; top: 0; }
    .co-mg-bc { padding: 14px 16px; }
}
@media (max-width: 520px) {
    .co-magaza .store-card { padding: 22px; border-radius: 22px; }
    .co-magaza .store-card-actions { flex-direction: column; }
    .co-magaza .store-card-actions a { width: 100%; }
}

/* ============================================================
   ANASAYFA KATEGORİ SATIRI (.co-yeni) — indexD.html mockup'ındaki
   "new-arrivals / storage-cabinets-section" bölümünün birebir karşılığı.
   Markup: inc/kategori_urun_blok.php (hem öne çıkan blok hem döngü).
   Mockup değerleri: krem zemin #F5F4F2, kart görseli min 430px +
   mix-blend-mode:multiply, başlık clamp(34-56px) w500 ls -.045em,
   ilk kelime el yazısı, TÜMÜNÜ GÖR alt çizgili 13px ls .12em,
   ‹ › 30px opacity .75, 4 kolon gap 24px, hover'da görsel scale 1.035
   ve alttan "SEPETE EKLE" pili (rgba(47,44,40,.94), radius 999px).
   Tema kancaları korunur: .urun_kutu .ilk_resim:hover{opacity:0} ile
   ikinci görsel ortaya çıkar; .fabric-colours tıklaması hs.core.js'te.
   ============================================================ */
.co-yeni {
    --cy-ink:   #2F2C28;
    --cy-muted: #6E6961;
    --cy-krem:  #F5F4F2;
    --cy-line:  #D4D0C8;
    --cy-font:  Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;

    background: var(--cy-krem);
    padding: 55px 5vw 58px;
    font-family: var(--cy-font);
    color: var(--cy-ink);
    border-bottom: #d6d6d6 solid 1px;
}
.co-yeni__ic { min-width: 0; }

/* --- Başlık satırı --- */
.co-yeni__bas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.co-yeni__bas h2 {
    margin: 0;
    font-family: var(--cy-font);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 500;
    color: var(--cy-ink);
}
.co-yeni__bas h2 a { color: inherit; }
.co-yeni__bas h2 a:hover { color: inherit; text-decoration: none; opacity: .78; }
.co-yeni__el {
    font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.055em;
    display: inline-block;
    transform: translateY(-1px);
    margin-right: 8px;
}
.co-yeni__aks {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 8px;
    flex: none;
}
.co-yeni__tumu {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--cy-ink);
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    white-space: nowrap;
}
.co-yeni__tumu:hover { color: var(--cy-ink); text-decoration: none; opacity: .7; }
.co-yeni__ok {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--cy-ink);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    opacity: .75;
    transition: opacity .18s ease;
}
.co-yeni__ok:hover { opacity: 1; }
.co-yeni__ok[disabled] { opacity: .22; cursor: default; }

/* --- Ray: masaüstünde 4 kolon, dar ekranda kaydırılır --- */
.co-yeni__ray {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 72px) / 4);
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.co-yeni__ray::-webkit-scrollbar { display: none; }
.co-yeni__kart { scroll-snap-align: start; min-width: 0; background: transparent; }

/* --- Görsel --- */
.co-yeni__gorsel {
    position: relative;
    background: var(--cy-krem);
    min-height: 340px;
    overflow: hidden;
}
.co-yeni__link { display: block; position: absolute; inset: 0; }
/* İki görselli kartta tema .ilk_resim/.ikinci_resim ile geçiş yapıyor */
/* DİKKAT: bu katmanlara z-index VERME — konumlandırılmış öğede z-index yeni bir
   yığın bağlamı açar ve görselin mix-blend-mode:multiply'ı krem zeminle değil
   kendi bağlamıyla harmanlanır (ürünlerin beyaz zemini kutu gibi görünür).
   Üstte durması DOM sırasından geliyor: önce .ikinci_resim, sonra .ilk_resim. */
.co-yeni__gorsel .ilk_resim,
.co-yeni__gorsel .ikinci_resim {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* İkinci (ortam) görsel DURURKEN gizli; yoksa üstteki beyaz zeminli ürün
   fotoğrafı multiply ile ONUNLA harmanlanıp ortam fotoğrafı gibi görünüyor.
   Tema mantığı korunur: hover'da ürün → ortam geçişi. */
.co-yeni__gorsel .ikinci_resim {
    opacity: 0;
    transition: opacity .4s ease;
}
.co-yeni__gorsel .ikinci_resim img { mix-blend-mode: normal; }
.co-yeni__gorsel .ilk_resim { opacity: 1; transition: opacity .4s ease; }
.co-yeni__kart:hover .co-yeni__gorsel .ikinci_resim { opacity: 1; }
.co-yeni__kart:hover .co-yeni__gorsel .ilk_resim { opacity: 0; }
.co-yeni__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .45s ease;
    transform-origin: center center;
}
.co-yeni__gorsel > .card-img-top {         /* tek görselli kart */
    position: absolute;
    inset: 0;
}
.co-yeni__kart:hover .co-yeni__gorsel img { transform: scale(1.035); }

/* Rozetler */
.co-yeni__rozet {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .72);
    color: var(--cy-ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 11px;
}
.co-yeni__rozet--indirim { top: 18px; left: 18px; }
.co-yeni__rozet--stok    { top: 18px; right: 18px; background: rgba(47, 44, 40, .88); color: #fff; }

/* Hover'da beliren hızlı aksiyon pili */
.co-yeni__hizli {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 4;
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(47, 44, 40, .94);
    color: #fff;
    font-family: var(--cy-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease, background .24s ease;
}
.co-yeni__kart:hover .co-yeni__hizli,
.co-yeni__kart:focus-within .co-yeni__hizli {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.co-yeni__hizli:hover { background: #16130f; color: #fff; text-decoration: none; }

/* --- Bilgi --- */
.co-yeni__bilgi { padding-top: 14px; }
.co-yeni__bilgi h3 {
    margin: 0 0 8px;
    font-family: var(--cy-font);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: .025em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cy-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.co-yeni__bilgi h3 a { color: inherit; }
.co-yeni__bilgi h3 a:hover { color: var(--cy-muted); text-decoration: none; }
.co-yeni__fiyat {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cy-ink);
}
.co-yeni__fiyat del { margin-left: 8px; font-size: 12.5px; color: var(--cy-muted); }

/* Renk daireleri (.fabric-colours markup'ı tema kancası — sadece biçim) */
.co-yeni .fabric-colours { margin-top: 12px; }
.co-yeni .fabric-colours ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.co-yeni .fabric-colours li { margin: 0; cursor: pointer; }
.co-yeni .fabric-colours li span {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(47, 44, 40, .14);
    transition: transform .24s ease, box-shadow .24s ease;
}
.co-yeni .fabric-colours li:hover span { transform: scale(1.14); }
.co-yeni .fabric-colours li.first_colour span {
    transform: scale(1.1);
    box-shadow: 0 0 0 1px var(--cy-krem), 0 0 0 2px rgba(47, 44, 40, .78), inset 0 0 0 1px rgba(47, 44, 40, .14);
}

.co-yeni__bos {
    padding: 28px 0;
    font-size: 13.5px;
    color: var(--cy-muted);
}

@media (max-width: 1200px) {
    .co-yeni__ray { grid-auto-columns: calc((100% - 24px) / 2); }
    .co-yeni__gorsel { min-height: 380px; }
}
@media (max-width: 680px) {
    .co-yeni { padding: 34px 16px 38px; }
    .co-yeni__bas { flex-direction: column; gap: 12px; }
    .co-yeni__aks { padding-top: 0; }
    .co-yeni__ray { grid-auto-columns: 78%; gap: 16px; }
    .co-yeni__gorsel { min-height: 300px; }
    .co-yeni__hizli { opacity: 1; transform: none; pointer-events: auto; }
}

/* ============================================================
   HEADER — indexD.html mockup'ı BİREBİR (caliskan-global-header-standard)
   Ölçüler mockup'tan: topbar 32px / bar 78px / yatay bosluk 5vw,
   zemin #F5F4F2 (bar rgba .97 + blur 14), çizgi #D8D3CB, mürekkep #2F2C28,
   marka kırmızısı #D71920, font Futura yığını; nav 15px w500 ls-.01em,
   topbar 11px w400 ls.025em, logo 20px w700, ikonlar 40px daire içinde
   21px 1.5 stroke, sepet rozeti kırmızı 17px.
   Markup inc/ust.php'de yeniden düzenlendi; tema kancaları
   (js-mega-menu, unfold, tooltip, rozet id'leri) aynen duruyor.
   ============================================================ */
.u-header {
    --coust-font: Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
    --coust-bg:   #F5F4F2;
    --coust-ink:  #2F2C28;
    --coust-line: #D8D3CB;
    --coust-red:  #D71920;
}

/* --- Aksiyon ikonları (arama / üyelik / sepet) — tüm genişliklerde --- */
.co-ust-aks { gap: 10px; }
.co-ust-aks .co-ust-ikon,
.co-ust-aks .co-ust-sepet > a,
.co-ust-aks .u-header__login-form > a {
    width: 40px;
    height: 40px;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--coust-ink) !important;
    transition: background .18s ease;
}
.co-ust-aks .co-ust-ikon:hover,
.co-ust-aks .co-ust-sepet > a:hover,
.co-ust-aks .u-header__login-form > a:hover {
    background: #ECEAE6;
    color: var(--coust-ink) !important;
    box-shadow: none;
}
.co-ust-aks svg {
    display: block;
    width: 21px;
    height: 21px;
    margin: 0;          /* tema global svg{margin-bottom:-7px} kuralı merkezi 3.5px kaydırıyordu */
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Üyelik: isim + ok yalnız ikona indirgenir (dropdown kancası aynen çalışır) */
.co-ust-aks .u-header__login-form > a > span,
.co-ust-aks .u-header__login-form > a > i { display: none !important; }
.co-ust-aks .u-header__login-form { padding-left: 0 !important; }
.co-ust-sepet { position: relative; }

/* Sepet rozeti — mockup .cart-count: kırmızı, 17px, sağ üst köşe */
.u-header .co-cart-badge {
    position: absolute;
    top: 1px;
    right: -1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--coust-red, #D71920);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 17px;
    box-shadow: none;
    pointer-events: none;
}
.u-header .co-cart-badge[hidden] { display: none; }

@media (min-width: 1200px) {

    /* --- Bar zemini: krem + blur, alt çizgi --- */
    .u-header .u-header__section {
        background-color: rgba(245, 244, 242, .97) !important;
        border-bottom: 1px solid var(--coust-line) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: none !important;
    }

    /* --- Topbar: 3 kolonlu grid, 32px --- */
    .u-header .co-ust-strip {
        display: grid !important;
        grid-template-columns: minmax(160px, 1fr) auto minmax(390px, 1fr);
        align-items: center;
        gap: 20px;
        height: 32px;
        padding: 0 5vw;
        background: var(--coust-bg);
        border-bottom: 1px solid var(--coust-line) !important;
        color: var(--coust-ink);
        font-family: var(--coust-font);
        font-size: 11px;
        font-weight: 400;
        letter-spacing: .025em;
        line-height: 1;
    }
    .u-header .co-ust-strip a { color: var(--coust-ink); font-size: 11px; line-height: 1; }
    .u-header .co-ust-strip a:hover { color: var(--coust-red); text-decoration: none; }
    .co-ust-dil { justify-self: start; white-space: nowrap; }
    .co-ust-dil span { display: inline-block; margin: 0 8px; }
    .co-ust-dil a.aktif { font-weight: 600; }
    .co-ust-orta { justify-self: center; white-space: nowrap; }
    .co-ust-linkler {
        justify-self: end;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 24px;
        white-space: nowrap;
    }
    .co-ust-magaza { display: inline-flex !important; align-items: center; gap: 6px; }
    .co-ust-magaza svg {
        display: block;
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        margin: 0;      /* tema global svg margin'i dikey hizayı bozuyordu */
        fill: none;
        stroke: currentColor;
        stroke-width: 1.45;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* --- Ana bar: tam genişlik, 78px; [logo | nav | ikonlar] --- */
    .u-header #logoAndNav {
        max-width: none;
        width: 100%;
        padding: 0 5vw !important;
    }
    .u-header .u-header__navbar { min-height: 78px; padding: 0 !important; }

    /* Metin logo (v315 mockup birebir): img gizli, "ÇALIŞKAN OFİS" 20px w700 + altında sağa hizalı "1974'ten beri" */
    .u-header .u-header__navbar-brand-default img { display: none; }
    .u-header .co-ust-logo {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        font-family: var(--coust-font);
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .01em;
        color: #171717;
        white-space: nowrap;
    }
    .u-header .co-ust-logo-mark { display: block; line-height: 1; white-space: nowrap; }
    .u-header .co-ust-logo b { color: var(--coust-red); font-weight: inherit; }
    .u-header .co-ust-logo-since {
        display: block;
        margin-top: 3px;
        margin-right: 1px;
        font-family: var(--coust-font);
        font-size: 9px;
        font-style: normal;
        font-weight: 500;
        line-height: 1;
        letter-spacing: .025em;
        color: rgba(36, 34, 31, .68);
        text-transform: none;
        white-space: nowrap;
    }
    .u-header .navbar-brand { margin-right: 24px; padding: 0; }

    /* Nav ortada: 15px w500, hover kırmızı, ok işaretleri yok */
    .u-header #navBar { flex-grow: 1; }
    .u-header #navBar .u-header__navbar-nav {
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 36px;
    }
    .u-header #navBar .nav-item,
    .u-header #navBar .nav-item:not(:first-child),
    .u-header #navBar .nav-item:not(:last-child) { margin: 0 !important; }
    .u-header #navBar .u-header__nav-link {
        padding: 0 !important;
        font-family: var(--coust-font);
        font-size: 15px !important;
        font-weight: 500 !important;
        letter-spacing: -.01em;
        line-height: 78px;
        color: var(--coust-ink) !important;
        text-transform: none;
    }
    .u-header #navBar .u-header__nav-link-toggle::after { display: none; }
    .u-header #navBar .u-header__nav-item:hover .u-header__nav-link,
    .u-header #navBar .u-header__nav-link:hover,
    .u-header #navBar .active > .u-header__nav-link { color: var(--coust-red) !important; }

    /* Dil seçici artık topbar'da — navbar'daki select gizli */
    .co-ust-aks .bootstrap-select,
    .co-ust-aks select.selectpicker { display: none !important; }

    /* Arama paneli ikonun altına, sağa hizalı açılır */
    .co-ust-ara .co-arama {
        left: auto !important;
        right: -8px;
        top: calc(100% + 10px);
    }

    /* Sabitlenince topbar gizlenir — yukarıdaki display:grid !important'ı ezmek için */
    .u-header.co-sabit-alt .co-ust-strip { display: none !important; }
}

/* <1200: yeni ikonlar mobil header'da da durur; arama paneli ekrana sabitlenir
   (topbar gizliyken arama ilk kez mobilde de erişilebilir) */
@media (max-width: 1199.98px) {
    .co-ust-logo { display: none; }
    .co-ust-ara .co-arama {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 12px;
        width: auto !important;
    }
}

/* ===== Ofisinizi Dönüştürün bandı — v315 mockup (.transform-section) birebir =====
   Sol tam görsel + sağ yeşil panel; düğme, üzerine gelince çizilen ofis krokisi animasyonu içerir. */
.transform-section{
  --cream:#F5F4F2;
  --text:#2F2C28;
  --font-vitra-like:Futura,"Futura PT","Avenir Next",Avenir,"Century Gothic","Tw Cen MT",Arial,sans-serif;
}
.transform-section{
  padding:0;
  background:var(--cream);
}
.transform-wrap{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  min-height:680px;
  overflow:visible;
}
.transform-visual{
  min-height:680px;
  background:#ddd;
}
.transform-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.transform-copy{
  background:linear-gradient(180deg, #7D857F 0%, #727A74 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:52px 46px;
}
.transform-copy-inner{
  max-width:470px;
  text-align:center;
}
.transform-copy h2{
  margin:0 0 16px;
  font-family:var(--font-vitra-like);
  font-size:clamp(38px, 4.4vw, 70px);
  line-height:0.98;
  letter-spacing:-0.04em;
  font-weight:500;
  color:#F5F4F2;
}
.transform-copy h2 span{
  font-family:var(--font-vitra-like);
  font-style:normal;
  font-weight:400;
  color:#F5F4F2;
}
.transform-copy p{
  margin:0 0 28px;
  font-family:var(--font-vitra-like);
  font-size:15px;
  line-height:1.55;
  color:#ECEAE6;
}
.transform-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 32px;
  background:transparent;
  color:var(--text);
  font-family:var(--font-vitra-like);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
}
@media(max-width:980px){
.transform-wrap{
    grid-template-columns:1fr;
    min-height:auto;
  }
.transform-visual{
    min-height:380px;
  }
.transform-copy{
    padding:38px 24px 42px;
  }
.transform-copy h2{
    font-size:clamp(32px, 8vw, 48px);
  }
}
.transform-section{
  margin-top:0 !important;
}
.transform-section{
  margin-top:0 !important;
  padding-top:0 !important;
}
.new-arrivals + .transform-section{
  margin-top:0 !important;
}
.transform-wrap,
.transform-visual{
  min-height:520px !important;
}
.transform-copy{
  min-height:520px !important;
  padding:38px 40px !important;
}
.transform-copy h2{
  font-size:clamp(36px, 3.8vw, 58px) !important;
}
.transform-copy p{
  margin-bottom:22px !important;
}
@media(max-width:680px){
.transform-visual,
  .aesthetic-visual{
    min-height:380px !important;
  }
.transform-copy,
  .aesthetic-copy{
    min-height:300px !important;
  }
}
@media (min-width:981px){
.transform-wrap,
  .transform-visual,
  .transform-copy{
    height:560px !important;
    min-height:560px !important;
  }
.transform-copy{
    padding:42px 44px !important;
  }
.transform-copy h2{
    font-size:clamp(38px, 4vw, 62px) !important;
  }
}
@media (max-width:980px){
.hero-split-wrap,
  .hero-visual,
  .hero-copy,
  .discount-hero-wrap,
  .discount-main,
  .discount-grid,
  .plan-banner-visual,
  .transform-wrap,
  .transform-visual,
  .transform-copy,
  .aesthetic-hero-wrap,
  .aesthetic-copy,
  .aesthetic-visual,
  .export-hero,
  .export-hero-media,
  .export-hero-content{
    height:auto !important;
  }
}
.transform-projects-btn{
  position:relative;
  isolation:isolate;
  display:inline-grid !important;
  place-items:center;
  width:244px;
  height:56px;
  min-width:244px;
  min-height:56px;
  padding:0 !important;
  overflow:visible;
  vertical-align:top;
  background:transparent;
  color:var(--text);
  border:0;
  box-shadow:none;
  cursor:pointer;
  transition:
    width .24s cubic-bezier(.22,.61,.36,1),
    height .24s cubic-bezier(.22,.61,.36,1),
    background-color .12s ease,
    border-color .18s ease,
    box-shadow .24s ease;
}
.transform-projects-btn .transform-btn-label{
  grid-area:1/1;
  position:relative;
  z-index:3;
  white-space:nowrap;
  opacity:1;
  transform:scale(1);
  transition:opacity .09s ease, transform .12s ease;
}
.transform-projects-btn .office-plan-inline{
  grid-area:1/1;
  position:absolute;
  inset:8px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transform:scale(.84);
  transform-origin:center;
  transition:opacity .14s ease .03s, transform .2s cubic-bezier(.22,.61,.36,1) .03s;
}
.transform-projects-btn .office-plan-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.transform-projects-btn:hover,
.transform-projects-btn:focus-visible{
  width:286px;
  height:126px;
  min-width:286px;
  min-height:126px;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  outline:none;
}
.transform-projects-btn:hover .transform-btn-label,
.transform-projects-btn:focus-visible .transform-btn-label{
  opacity:0;
  transform:scale(.78);
}
.transform-projects-btn:hover .office-plan-inline,
.transform-projects-btn:focus-visible .office-plan-inline{
  opacity:1;
  transform:scale(1);
}
.office-plan-svg .plan-wall,
.office-plan-svg .plan-detail,
.office-plan-svg .door-swing-arc{
  fill:none;
  stroke:#343934;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset .42s cubic-bezier(.2,.75,.25,1);
}
.office-plan-svg .plan-wall{stroke-width:2;}
.office-plan-svg .plan-detail{stroke-width:1.2;}
.office-plan-svg .door-swing-arc{
  stroke:#8A918B;
  stroke-width:1;
  stroke-dasharray:.18 .07;
  opacity:.72;
}
.office-plan-svg .plan-object{
  fill:rgba(125,133,127,.12);
  stroke:#747C76;
  stroke-width:1.05;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.55);
  transition:opacity .16s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.office-plan-svg .door-leaf{
  fill:none;
  stroke:#343934;
  stroke-width:1.55;
  stroke-linecap:square;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity .12s ease, transform .16s ease;
}
.office-plan-svg .door-a{transform-origin:90px 35px;}
.office-plan-svg .door-b{transform-origin:137px 64px;}
.office-plan-svg .door-c{transform-origin:185px 64px;}
.transform-projects-btn:hover .office-plan-svg .plan-wall,
.transform-projects-btn:focus-visible .office-plan-svg .plan-wall,
.transform-projects-btn:hover .office-plan-svg .plan-detail,
.transform-projects-btn:focus-visible .office-plan-svg .plan-detail,
.transform-projects-btn:hover .office-plan-svg .door-swing-arc,
.transform-projects-btn:focus-visible .office-plan-svg .door-swing-arc{
  stroke-dashoffset:0;
}
.transform-projects-btn:hover .office-plan-svg .partition-a,
.transform-projects-btn:focus-visible .office-plan-svg .partition-a{transition-delay:.08s;}
.transform-projects-btn:hover .office-plan-svg .partition-b,
.transform-projects-btn:focus-visible .office-plan-svg .partition-b{transition-delay:.14s;}
.transform-projects-btn:hover .office-plan-svg .door-swing-arc,
.transform-projects-btn:focus-visible .office-plan-svg .door-swing-arc{transition-delay:.24s;}
.transform-projects-btn:hover .office-plan-svg .plan-object,
.transform-projects-btn:focus-visible .office-plan-svg .plan-object{
  opacity:1;
  transform:scale(1);
  transition-delay:.28s;
}
.transform-projects-btn:hover .office-plan-svg .door-leaf,
.transform-projects-btn:focus-visible .office-plan-svg .door-leaf{
  opacity:1;
  transition-delay:.25s;
}
.transform-projects-btn:hover .office-plan-svg .door-a,
.transform-projects-btn:focus-visible .office-plan-svg .door-a{
  animation:officeDoorA 1.08s ease-in-out .34s infinite;
}
.transform-projects-btn:hover .office-plan-svg .door-b,
.transform-projects-btn:focus-visible .office-plan-svg .door-b{
  animation:officeDoorB 1.08s ease-in-out .48s infinite;
}
.transform-projects-btn:hover .office-plan-svg .door-c,
.transform-projects-btn:focus-visible .office-plan-svg .door-c{
  animation:officeDoorC 1.08s ease-in-out .61s infinite;
}
@media (prefers-reduced-motion:reduce){
.transform-projects-btn,
  .transform-projects-btn .transform-btn-label,
  .transform-projects-btn .office-plan-inline,
  .office-plan-svg .plan-wall,
  .office-plan-svg .plan-detail,
  .office-plan-svg .door-swing-arc,
  .office-plan-svg .plan-object,
  .office-plan-svg .door-leaf{
    transition:none !important;
    animation:none !important;
  }
.transform-projects-btn:hover .office-plan-svg .door-a,
  .transform-projects-btn:focus-visible .office-plan-svg .door-a{transform:rotate(-86deg)}
.transform-projects-btn:hover .office-plan-svg .door-b,
  .transform-projects-btn:focus-visible .office-plan-svg .door-b{transform:rotate(86deg)}
.transform-projects-btn:hover .office-plan-svg .door-c,
  .transform-projects-btn:focus-visible .office-plan-svg .door-c{transform:rotate(-86deg)}
}
@media(max-width:640px){
.transform-projects-btn{width:224px;min-width:224px;}
.transform-projects-btn:hover,
  .transform-projects-btn:focus-visible{
    width:250px;
    min-width:250px;
    height:112px;
    min-height:112px;
  }
}

/* Ofis krokisi kapı salınımı (v315) — çıkarımda atlanmıştı */
@keyframes officeDoorA{
  0%,14%,100%{transform:rotate(0deg)}
  48%,72%{transform:rotate(-86deg)}
}
@keyframes officeDoorB{
  0%,14%,100%{transform:rotate(0deg)}
  48%,72%{transform:rotate(86deg)}
}
@keyframes officeDoorC{
  0%,14%,100%{transform:rotate(0deg)}
  48%,72%{transform:rotate(-86deg)}
}

/* ===== PLP sol filtre — görselli seçenek grubu (kart ızgarası) =====
   Değerlerinde görsel olan filtre grupları (ör. "Ürün Opsiyonu") kolonun en üstünde
   kart ızgarası olarak çizilir. Checkbox işlevi aynen korunur (label>input); yalnız
   görünüm değişir — hs.core.js '.accordion input[type=checkbox]' handler'ı çalışmaya devam eder. */
.co-plp-filtre--gorsel .co-plp-gkartlar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.co-plp-gkart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 8px 8px 9px;
    border: 1px solid #e2e0dc;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.co-plp-gkart:hover {
    border-color: #b9b2a6;
    box-shadow: 0 4px 14px rgba(31, 27, 22, .07);
}
/* Gerçek checkbox görünmez ama erişilebilir kalır (klavye + ekran okuyucu) */
.co-plp-gkart > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.co-plp-gkart__foto {
    position: relative;
    display: block;
    height: 62px;
    border-radius: 6px;
    background: #faf9f7;
    overflow: hidden;
}
.co-plp-gkart__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    mix-blend-mode: multiply;
}
.co-plp-gkart__adet {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: rgba(31, 27, 22, .72);
    color: #fff;
    font-family: var(--plp-font);
    font-size: 10.5px;
    line-height: 18px;
    text-align: center;
}
.co-plp-gkart__ad {
    font-family: var(--plp-font);
    font-size: 12.5px;
    line-height: 1.25;
    color: #4a463f;
    text-align: center;
}
/* Seçili durum: koyu çerçeve + onay işareti (sunucu tarafı .secili, tıklamada :has) */
.co-plp-gkart.secili,
.co-plp-gkart:has(> input:checked) {
    border-color: #2f2c28;
    box-shadow: 0 0 0 1px #2f2c28 inset;
}
.co-plp-gkart.secili .co-plp-gkart__ad,
.co-plp-gkart:has(> input:checked) .co-plp-gkart__ad { color: #1d1a16; font-weight: 600; }
.co-plp-gkart.secili::after,
.co-plp-gkart:has(> input:checked)::after {
    content: "✓";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2f2c28;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
/* Klavye odağı görünür kalsın */
.co-plp-gkart:focus-within { border-color: #2f2c28; }
@media (max-width: 991px) {
    .co-plp-filtre--gorsel .co-plp-gkartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .co-plp-filtre--gorsel .co-plp-gkartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   OFİS MUTFAKLARI HERO (v373 mockup birebir)
   Anasayfada "Çalışma Alanı Çözümleri" bölümünün hemen altında.
   Ölçüler mockup ile aynıdır; blok izoledir (.co-mutfak-*).
   ============================================================ */
.co-mutfak-hero {
    padding: 92px 2.1vw 18px;
    background: #f3f1ec;
    font-family: Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
}
.co-mutfak-hero-stage {
    position: relative;
    min-height: 680px;
    border-radius: 34px;
    overflow: hidden;
    background: #3b1717;
    box-shadow: 0 26px 70px rgba(49, 30, 23, .13);
}
.co-mutfak-hero-stage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.co-mutfak-hero-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(38, 11, 12, .91) 0%, rgba(49, 14, 15, .69) 38%, rgba(48, 17, 16, .12) 69%, rgba(48, 17, 16, .25) 100%);
}
.co-mutfak-hero-copy {
    position: relative;
    z-index: 2;
    min-height: 680px;
    max-width: 760px;
    padding: 78px 6vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}
.co-mutfak-hero-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.co-mutfak-hero-kicker::before {
    content: "";
    width: 42px;
    height: 1px;
    background: currentColor;
}
.co-mutfak-hero h2 {
    max-width: 720px;
    margin: 20px 0 23px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(52px, 6.2vw, 94px);
    font-weight: 500;
    line-height: .91;
    letter-spacing: -.062em;
    text-transform: none;
}
.co-mutfak-hero-copy p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .79);
    font-size: 15px;
    line-height: 1.78;
}
.co-mutfak-hero-button {
    min-height: 52px;
    align-self: flex-start;
    margin-top: 31px;
    padding: 0 23px;
    border-radius: 999px;
    background: #fff;
    color: #471516;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .055em;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease;
}
.co-mutfak-hero-button:hover,
.co-mutfak-hero-button:focus-visible {
    transform: translateY(-2px);
    background: #f6e9df;
    color: #471516;
    text-decoration: none;
}
.co-mutfak-hero-note {
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 28px;
    width: min(340px, 31vw);
    padding: 19px 21px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    background: rgba(48, 17, 16, .53);
    backdrop-filter: blur(14px);
    color: #fff;
}
.co-mutfak-hero-note strong {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
}
.co-mutfak-hero-note span {
    display: block;
    color: rgba(255, 255, 255, .65);
    font-size: 9px;
    line-height: 1.55;
    letter-spacing: .075em;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .co-mutfak-hero { padding: 72px 14px 12px; }
    .co-mutfak-hero-stage,
    .co-mutfak-hero-copy { min-height: 650px; }
    .co-mutfak-hero-copy { padding: 60px 32px; }
    .co-mutfak-hero-note { display: none; }
}
@media (max-width: 600px) {
    .co-mutfak-hero { padding: 58px 10px 10px; }
    .co-mutfak-hero-stage { border-radius: 24px; min-height: 700px; }
    .co-mutfak-hero-stage > img { object-position: 60% center; }
    .co-mutfak-hero-copy { min-height: 700px; padding: 52px 24px; }
    .co-mutfak-hero h2 { font-size: clamp(48px, 14vw, 72px); }
    .co-mutfak-hero-copy p { font-size: 14px; }
}