@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --bg-color:     #0a0a0a;
    --card-bg:      #161616;
    --accent-color: #c5a059;
    --text-color:   #e0e0e0;
    --text-muted:   #a0a0a0;
    --glass:        rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --transition:   all 0.4s cubic-bezier(0.165,0.84,0.44,1);
}

html { scroll-behavior: auto; overflow-x: hidden; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, .luxury-font { font-family: 'Playfair Display', serif; }

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ─────────────────────────────────────────
   HEADER & NAV
───────────────────────────────────────── */
header {
    padding: 2rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(10,10,10,0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    transition: padding 0.3s, background 0.3s;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--text-color);
    text-transform: uppercase;
    flex-shrink: 0;
}
.logo span { color: var(--accent-color); }

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0;
    transition: var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent-color); }

#site-header.scrolled .nav-links a,
#site-header:not(.header--transparent) .nav-links a {
    font-size: 17px;
    font-weight: 400;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 80px;
    background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
    padding: 2rem;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 580px;
}

.badge {
    background: var(--accent-color);
    color: #000;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

/* ─────────────────────────────────────────
   FILTERS
───────────────────────────────────────── */
.filters {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    padding: 0.7rem 1.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.filter-btn:hover,
.filter-btn.active {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
}

/* ─────────────────────────────────────────
   SEARCH
───────────────────────────────────────── */
.search-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 1rem;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-box input {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 0.85rem 2.8rem;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.25s;
}
.search-box input::placeholder { color: var(--text-muted); }
.search-box input:focus { border-color: var(--accent-color); }

.search-clear {
    position: absolute;
    right: 0.8rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    transition: color 0.2s;
}
.search-clear:hover { color: var(--accent-color); }

.product-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.product-count span { color: var(--accent-color); font-weight: 600; }

/* ─────────────────────────────────────────
   PRODUCT GRID
───────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding-bottom: 6rem;
}

.product-card {
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
}
.product-card:hover {
    transform: translateY(-7px) scale(1.013);
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.22),
                0 28px 56px rgba(0,0,0,0.65),
                0 0 50px rgba(255,255,255,0.05);
}

.product-image {
    width: 100%;
    height: 460px;
    overflow: hidden;
    position: relative;
}
.product-image::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.product-image::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 260px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}
.product-card:hover .product-image img { transform: scale(1.07); }

.prod-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0e0e0e 0%, #161616 100%);
    z-index: 0;
}
.img-missing .prod-placeholder { display: flex; }
.img-missing .product-image::before { display: none; }

.prod-placeholder-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    color: rgba(255,255,255,0.07);
    text-transform: uppercase;
    user-select: none;
}

.product-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 1.1rem 1.1rem;
    z-index: 2;
}

.product-info { display: none; }

.product-category { display: none; }

.product-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.22rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
    line-height: 1.28;
    flex: 1 1 0;
    min-width: 0;
}

.stock-code {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-block;
}

.product-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}
.product-meta .stock-code {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 4px 11px;
    border-radius: 20px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    display: block;
    white-space: nowrap;
}

/* Variants */
.variants {
    display: flex;
    gap: 0.4rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.variant-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.variant-dot:hover { border-color: var(--accent-color); transform: scale(1.2); }

.variant-more {
    font-size: 0.7rem;
    color: var(--text-muted);
    align-self: center;
    margin-left: 2px;
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
    color: var(--text-muted);
    gap: 1rem;
}

.empty-icon {
    font-size: 3rem;
    opacity: 0.2;
}

.btn-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(197,160,89,0.3);
    padding-bottom: 2px;
    transition: border-color 0.2s;
}
.btn-link:hover { border-color: var(--accent-color); }

/* ─────────────────────────────────────────
   ZOOM LENS
───────────────────────────────────────── */
.zoom-lens {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    overflow: hidden;
    transition: opacity 0.15s ease;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.4),
        0 8px 24px rgba(0,0,0,0.6),
        inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────
   MODAL
───────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 3vh 1.5rem;
    backdrop-filter: blur(14px);
    overflow-y: auto;
}
.modal.active { display: flex; }

.modal-content {
    background: #111;
    max-width: 1020px;
    width: 100%;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.8);
    margin: auto;
}

.close-modal {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 20;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    transition: background 0.2s, transform 0.3s;
}
.close-modal:hover { background: rgba(197,160,89,0.85); transform: rotate(90deg); }

/* ── Image block ── */
.modal-img-wrap {
    width: 100%;
    overflow: hidden;
    background: #060606;
    position: relative;
    flex-shrink: 0;
}

.modal-img-bg {
    position: absolute;
    inset: -24px;
    background-size: cover;
    background-position: center;
    filter: blur(32px) brightness(0.28) saturate(0.6);
    z-index: 0;
}

.modal-img-wrap > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* ── Variant strip ── */
.variant-grid {
    display: flex;
    gap: 0.9rem;
    padding: 1.1rem 1.6rem;
    background: #0d0d0d;
    border-bottom: 1px solid var(--glass-border);
    flex-wrap: wrap;
    align-items: flex-start;
}

.variant-item { text-align: center; cursor: pointer; flex-shrink: 0; }
.variant-item img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    transition: var(--transition);
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.variant-item:hover img,
.variant-item.active img {
    border-color: var(--accent-color);
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(197,160,89,0.25);
}
.variant-item span {
    display: block;
    font-size: 0.58rem;
    margin-top: 0.4rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* ── Info block ── */
.modal-info {
    padding: 1.8rem 2rem 2.2rem;
}

.modal-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
}

.modal-info-header h2 {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-top: 0.3rem;
    color: #fff;
}

.modal-info-header .stock-code {
    white-space: nowrap;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

/* ── Specs block ── */
.specs-block { }

.pd-main {
    font-family: 'Poppins', sans-serif;
}

.specs-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.08rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1.2rem;
}

.spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.spec-item:nth-child(even) {
    padding-left: 1.2rem;
    border-left: 1px solid rgba(255,255,255,0.06);
}

.spec-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.spec-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.35);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.spec-val {
    font-size: 0.97rem;
    color: #fff;
    font-weight: 400;
    line-height: 1.35;
    font-family: 'Poppins', sans-serif;
}

/* ─────────────────────────────────────────
   HEADER (yeni nav yapısı)
───────────────────────────────────────── */
#site-header {
    padding: 2rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(10,10,10,0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    transition: padding 0.3s, background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
}
#site-header .container {
    max-width: 100%;
    padding: 0 50px;
}
@media (max-width: 768px) {
    #site-header .container { padding: 0 16px; }
}

/* Transparent overlay header (hero sayfası) */
.header--transparent {
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
.header--transparent.scrolled {
    background: rgba(10,10,10,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--glass-border);
}

/* Logo image */
.logo img {
    height: 48px;
    width: auto;
    display: block;
    transition: height 0.35s ease;
}
.header--transparent .logo img {
    height: 60px;
}
.header--transparent.scrolled .logo img {
    height: 48px;
}

/* Arama butonu (nav sağ) */
.nav-search-btn {
    position: relative;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    flex-shrink: 0;
    border-radius: 50%;
    transition: opacity 0.25s, transform 0.25s;
}
.nav-search-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0);
    transform: scale(0.55);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}
.nav-search-btn::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0);
    transition: background 0.25s ease;
}
.nav-search-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}
.nav-search-btn:hover::before {
    transform: scale(1);
    border-color: rgba(255,255,255,0.55);
    box-shadow: 0 0 18px rgba(255,255,255,0.12), inset 0 0 8px rgba(255,255,255,0.04);
}
.nav-search-btn:hover::after {
    background: rgba(255,255,255,0.05);
}
.nav-search-btn svg { position: relative; z-index: 1; }

.main-nav {
    display: flex;
    align-items: center;
}
.main-nav .nav-links {
    margin-left: auto;
    margin-right: 1.5rem;
}

/* Dropdown */
.nav-dropdown { position: relative; }

.nav-arrow {
    font-size: 0.55rem;
    margin-left: 3px;
    vertical-align: middle;
    opacity: 0.6;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 1rem);
    left: 50%;
    transform: translateX(-50%);
    background: #161616;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    min-width: 200px;
    list-style: none;
    padding: 0.5rem 0;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
    z-index: 200;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open   .dropdown-menu { display: block; }

.dropdown-menu li a {
    display: block;
    padding: 0.65rem 1.2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.dropdown-menu li a:hover { color: var(--accent-color); }
.dropdown-menu li:first-child { border-bottom: 1px solid var(--glass-border); }

/* ─────────────────────────────────────────
   ARAMA OVERLAY
───────────────────────────────────────── */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    visibility: hidden;
    pointer-events: none;
}
.search-overlay.open {
    visibility: visible;
    pointer-events: all;
}

.search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    opacity: 0;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.search-overlay.open .search-overlay-backdrop { opacity: 1; }

.search-overlay-panel {
    position: relative;
    width: 100%;
    min-height: 58vh;
    background: linear-gradient(160deg, #111 0%, #0a0a0a 100%);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem 4rem;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-overlay-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.25) 70%, transparent);
}
.search-overlay.open .search-overlay-panel { transform: translateY(0); }

.search-overlay-close {
    position: absolute;
    top: 1.8rem;
    right: 2.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 0;
}
.search-overlay-close:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

.search-overlay-content {
    width: min(1100px, 94vw);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
                opacity   0.4s ease 0.12s;
}
.search-overlay.open .search-overlay-content {
    transform: translateY(0);
    opacity: 1;
}

.search-overlay-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.search-overlay-field {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-bottom: 1.5px solid rgba(255,255,255,0.15);
    padding-bottom: 1.4rem;
    transition: border-color 0.3s;
}
.search-overlay-field:focus-within {
    border-bottom-color: rgba(255,255,255,0.75);
}

.search-overlay-field input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 4.5vw, 3.2rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    caret-color: rgba(255,255,255,0.7);
}
.search-overlay-field input::placeholder {
    color: rgba(255,255,255,0.38);
}

.search-overlay-go {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.search-overlay-go:hover,
.search-overlay-field:focus-within .search-overlay-go {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
    transform: translateX(4px);
}

.search-overlay-cats {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.search-overlay-cats-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.search-overlay-cats-links {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.search-cat-pill {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 24px;
    padding: 0.45rem 1.2rem;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.search-cat-pill:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
}
.search-cat-pill--all {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.search-cat-pill--all:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.6);
}

/* ─────────────────────────────────────────
   AJAX SEARCH RESULTS
───────────────────────────────────────── */
.search-ajax-results {
    margin-top: 1.8rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}
.search-ajax-results.sar-loading {
    opacity: 0.45;
    pointer-events: none;
}
.sar-empty {
    grid-column: 1 / -1;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.4);
    padding: 1rem 0;
}
.sar-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.sar-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-3px);
}
.sar-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.sar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.sar-item:hover .sar-thumb img {
    transform: scale(1.06);
}
.sar-info {
    padding: 0.65rem 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.sar-cat {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255,255,255,0.38);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.sar-name {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sar-name mark {
    background: none;
    color: rgba(255,220,150,1);
    font-weight: 700;
}
.sar-code {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}
.sar-code mark {
    background: none;
    color: rgba(255,220,150,0.9);
    font-weight: 600;
}
.sar-arrow { display: none; }

/* Footer nav */
.footer-nav {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 0.8rem;
}
.footer-nav a {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
}
.footer-nav a:hover { color: var(--accent-color); }

/* Product card as link */
.product-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Filter link variant */
.filters a.filter-btn { text-decoration: none; }

/* ─────────────────────────────────────────
   RENK FİLTRELERİ
───────────────────────────────────────── */
.color-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
}

.cfil {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    white-space: nowrap;
    background: rgba(255,255,255,0.03);
    letter-spacing: 0.2px;
    cursor: pointer;
}

.cfil:hover {
    border-color: rgba(255,255,255,0.28);
    color: #e8e8e8;
    background: rgba(255,255,255,0.07);
}

.cfil.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(162,105,66,0.12);
}

.cfil--all {
    font-weight: 500;
    padding-left: 13px;
}

.cfil-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.18);
    display: inline-block;
}

.cfil em {
    font-style: normal;
    font-size: 0.7rem;
    opacity: 0.5;
}

/* ─────────────────────────────────────────
   GRID HEADER — count + aktif renk etiketi
───────────────────────────────────────── */
.grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.grid-header-count {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.grid-header-count #visibleCount,
.grid-header-count #totalCount { color: var(--accent-color); font-weight: 600; }
.gh-sep   { opacity: 0.3; }
.gh-label { opacity: 0.55; margin-left: 2px; }
.gh-page  { opacity: 0.35; font-size: 0.73rem; margin-left: 8px; }

.grid-header-filter {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.22);
    border-radius: 20px;
    padding: 5px 10px 5px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--accent-color);
}
.gh-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
}
.gh-clear {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.15s;
    margin-left: 2px;
}
.gh-clear:hover { opacity: 1; }

/* ─────────────────────────────────────────
   RENK SİDEBAR (sol kenara yapışık, dot + hover label)
───────────────────────────────────────── */
.color-sidebar {
    position: fixed;
    left: 0;
    /* max(50vh, 494px) keeps top edge ≥ 8px below a ~88px header on screens < 972px tall */
    top: max(50vh, 494px);
    transform: translateX(-100%) translateY(-50%);
    z-index: 490;
    width: 52px;
    overflow: visible;
    background: rgba(13,13,13,0.93);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: none;
    border-radius: 0 18px 18px 0;
    box-shadow: 4px 0 32px rgba(0,0,0,0.55), 0 10px 40px rgba(0,0,0,0.4);
    padding: 0.5rem 0.35rem;
    transition: transform 0.4s cubic-bezier(0.165,0.84,0.44,1), opacity 0.35s;
    opacity: 0;
    pointer-events: none;
}
.color-sidebar.visible {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
    pointer-events: auto;
}

.csb-header, .csb-title, .csb-close { display: none; }

.csb-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* ── "TÜM" pill ── */
.csb-btn--all {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    text-transform: uppercase;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.csb-btn--all:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.26);
    color: var(--text-color);
}
.csb-btn--all.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(197,160,89,0.1);
}
/* Tooltip – TÜM, SAĞDA */
.csb-btn--all::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: rgba(14,14,14,0.97);
    color: #e8e8e8;
    font-size: 0.72rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    padding: 5px 12px;
    border-radius: 9px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 18px rgba(0,0,0,0.55);
    z-index: 10;
}
.csb-btn--all:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ── Renk dot butonları ── */
.csb-btn {
    position: relative;
    z-index: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 0.18s;
}
.csb-btn:hover { z-index: 5; }
.csb-btn.active { border-color: var(--accent-color); }

/* Dot: spring animasyon */
.csb-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.2);
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
}
.csb-btn:hover .csb-dot {
    transform: scale(1.6);
    box-shadow: 0 3px 14px rgba(0,0,0,0.5);
}

/* Tooltip – renk dot, SAĞDA */
.csb-btn::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(-10px) scale(0.92);
    background: rgba(12,12,12,0.96);
    color: #f0f0f0;
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 7px 16px;
    border-radius: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.34,1.56,0.64,1),
                transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
    z-index: 10;
}
.csb-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
}

.csb-all-dot, .csb-name, .csb-cnt { display: none; }

@media (max-width: 767px) {
    .color-sidebar { display: none !important; }
}

/* ── Mobil Renk Filtresi ── */
.mob-color-bar { display: none; }

@media (max-width: 767px) {
    .mob-color-bar {
        display: block;
        position: sticky;
        top: 62px;
        z-index: 200;
        background: rgba(8,8,8,0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .mob-color-toggle {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        padding: 0.9rem 1rem;
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
        text-align: left;
    }
    .mob-ctog-swatch {
        width: 20px; height: 20px;
        border-radius: 50%;
        background: rgba(197,160,89,0.15);
        border: 1.5px solid rgba(197,160,89,0.4);
        flex-shrink: 0;
        transition: background 0.2s, border-color 0.2s;
    }
    .mob-ctog-swatch.has-color { border-color: transparent; }
    .mob-ctog-label {
        flex: 1;
        font-size: 0.9rem;
        font-weight: 400;
        color: rgba(255,255,255,0.82);
    }
    .mob-ctog-count {
        font-size: 0.75rem;
        color: rgba(197,160,89,0.7);
        flex-shrink: 0;
    }
    .mob-ctog-chevron {
        color: rgba(255,255,255,0.38);
        flex-shrink: 0;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .mob-color-bar.panel-open .mob-ctog-chevron { transform: rotate(180deg); }
    .mob-color-bar.panel-open .mob-ctog-label { color: #c5a059; }

    .mob-color-panel {
        border-top: 1px solid rgba(255,255,255,0.06);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .mob-color-bar.panel-open .mob-color-panel { max-height: 800px; }

    .mob-color-scroll {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        padding: 0.85rem 1rem 1.2rem;
    }
    .mob-cfil {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.42rem 0.85rem;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.04);
        color: rgba(255,255,255,0.65);
        font-family: 'Poppins', sans-serif;
        font-size: 0.8rem;
        cursor: pointer;
        white-space: nowrap;
        transition: border-color 0.18s, background 0.18s, color 0.18s;
    }
    .mob-cfil:hover { border-color: rgba(255,255,255,0.28); color: #fff; }
    .mob-cfil.active {
        border-color: #c5a059;
        background: rgba(197,160,89,0.12);
        color: #c5a059;
    }
    .mob-cfil--all { font-weight: 500; letter-spacing: 0.03em; }
    .mob-cfil-dot {
        width: 12px; height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
        border: 1px solid rgba(255,255,255,0.15);
    }
}

/* Short screens: scale down sidebar buttons so it fits */
@media (max-height: 860px) {
    .csb-btn       { width: 28px; height: 28px; }
    .csb-dot       { width: 15px; height: 15px; }
    .csb-btn--all  { width: 32px; height: 19px; font-size: 0.44rem; }
    .csb-grid      { gap: 1px; }
    .color-sidebar { padding: 0.3rem 0.3rem; top: max(50vh, 430px); }
}

/* Very short screens: hide sidebar entirely */
@media (max-height: 620px) {
    .color-sidebar { display: none; }
}

/* ─────────────────────────────────────────
   HOME PAGE
───────────────────────────────────────── */
.home-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(ellipse at center, #1c1a14 0%, #0a0a0a 70%);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c5a059' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.home-hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: -1px;
    margin-bottom: 1.2rem;
    line-height: 1.1;
}

.home-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.btn-primary {
    display: inline-block;
    background: var(--accent-color);
    color: #000;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    transition: var(--transition);
}
.btn-primary:hover {
    background: #d4b06a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197,160,89,0.3);
}

.home-section { padding: 6rem 0; }
.home-section--dark { background: #0d0d0d; }

.pd-similar-section {
    padding: 4rem 0 1rem;
    background: rgba(255,255,255,0.012);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-top: 1rem;
}
.similar-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.similar-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.similar-more-btn:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2.5rem;
}

.section-title {
    font-size: 2.2rem;
    letter-spacing: -0.5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.section-link {
    font-size: 0.82rem;
    color: var(--accent-color);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
}
.section-link:hover { opacity: 0.75; }

.home-cta {
    text-align: center;
    margin-top: 3rem;
}

/* Kategori kartları */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.cat-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
.cat-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.cat-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1a1a;
}
.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}
.cat-card:hover .cat-card-img img { transform: scale(1.06); }

.cat-card-placeholder { width: 100%; height: 100%; background: #1a1a1a; }

.cat-card-info {
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cat-card-info h3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}
.cat-card-info span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────
   PAGE HERO (iç sayfalar — magaza, vb.)
───────────────────────────────────────── */
.page-hero {
    padding: 9rem 0 3rem;
    background: linear-gradient(180deg, #111 0%, #0a0a0a 100%);
    border-bottom: 1px solid var(--glass-border);
}

.page-hero h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-top: 0.8rem;
    letter-spacing: -0.5px;
}

.page-hero-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.4rem;
}

.page-content { padding: 5.5rem 0 6rem; }
@media (max-width: 767px) { .page-content { padding: 1.2rem 1rem 3.5rem; } }

/* ─────────────────────────────────────────
   KATEGORİ HERO — full-bleed slideshow
───────────────────────────────────────── */
.cat-hero {
    position: relative;
    z-index: 1;
    height: 72vh;
    min-height: 500px;
    max-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: #0c0c0c;
}

/* Gradient overlay */
.cat-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.38) 0%,
            rgba(0,0,0,0.04) 28%,
            rgba(0,0,0,0.28) 50%,
            rgba(0,0,0,0.88) 68%,
            rgba(0,0,0,1)    80%);
    z-index: 1;
}

/* Static pages — same dimensions as category hero */
.cat-hero--sm {
    height: 72vh;
    min-height: 500px;
    max-height: 700px;
}
.cat-hero--sm .cat-hero-content {
    padding-bottom: calc(5.5rem + 5px);
}
.cat-hero--sm .cat-hero-bc {
    margin-bottom: 1.3rem;
}

/* Plain (no image) variant */
.cat-hero--plain {
    background: linear-gradient(160deg, #1a1410 0%, #0c0c0c 100%);
}
.cat-hero--plain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 60%, rgba(162,105,66,0.08) 0%, transparent 65%);
}

/* Slides */
.cat-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.4,0,0.2,1);
    animation: catHeroKenBurns 9s ease-out forwards;
}

.cat-hero-slide.active { opacity: 1; }

@keyframes catHeroKenBurns {
    from { transform: scale(1.06); }
    to   { transform: scale(1.00); }
}

/* Content — bottom */
.cat-hero-content {
    position: relative;
    z-index: 4;
    width: 100%;
    padding-top: 130px;
    padding-bottom: 5.5rem;
}

/* Breadcrumb — başlığın altında, hero içi */
.cat-hero-bc {
    margin: 0.5rem 0 0.6rem;
    font-size: 0.72rem;
}

.cat-hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.5rem;
}

.cat-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    font-weight: 400;
    line-height: 1.06;
    color: #fff;
    letter-spacing: -0.5px;
    margin: 0 0 0.75rem;
}

.cat-hero-meta {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.82);
}

.cat-hero-color-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 20px;
    padding: 3px 10px 3px 6px;
    color: #fff;
    font-size: 0.75rem;
}

.cat-hero-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Dot navigation */
.cat-hero-dots {
    position: absolute;
    bottom: 5.5rem; /* Match the content padding-bottom to stay vertically aligned */
    right: 2.5rem;
    z-index: 99;
    display: flex;
    gap: 7px;
    align-items: center;
    background: rgba(0,0,0,0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 7px 11px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.cat-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, transform 0.3s;
    flex-shrink: 0;
}

.cat-hero-dot.active {
    background: rgba(255,255,255,0.95);
    transform: scale(1.4);
}

/* Breadcrumb light variant (on dark hero bg) */
.breadcrumb--light a,
.breadcrumb--light span {
    color: rgba(255,255,255,0.55) !important;
}
.breadcrumb--light a:hover { color: #fff !important; }
.breadcrumb--light .bc-sep { color: rgba(255,255,255,0.25) !important; }

@media (max-width: 768px) {
    .cat-hero { height: 55vh; min-height: 380px; }
    .cat-hero-title { font-size: clamp(2rem, 8vw, 3rem); }
    .cat-hero-content { padding-top: 95px; padding-bottom: 3.5rem; }
    .cat-hero-meta { display: none; }
    .cat-hero-dots { display: none; }
}

/* ─────────────────────────────────────────
   KATEGORİ SECTION WRAPPER — hero geçiş
───────────────────────────────────────── */
.cat-section-wrap {
    position: relative;
    z-index: 2;
    margin-top: -110px;
    background: linear-gradient(
        to bottom,
        transparent          0px,
        rgba(10,10,10,0.75)  50px,
        var(--bg-color)      100px
    );
}
@media (max-width: 768px) {
    .cat-section-wrap { margin-top: -40px; }
}

/* ─────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--accent-color); }

.breadcrumb span:last-child { color: var(--accent-color); }

.bc-sep { color: rgba(255,255,255,0.2); }

.bc-container { padding-top: 6rem; padding-bottom: 0; }

/* ─────────────────────────────────────────
   SAYFALAMA
───────────────────────────────────────── */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.6rem;
    border-radius: 6px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--transition);
}
.page-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }
.page-btn.current {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
    font-weight: 700;
}
.page-dots {
    color: var(--text-muted);
    padding: 0 0.3rem;
}
.page-indicator { font-size: 0.75rem; opacity: 0.6; }

/* ─────────────────────────────────────────
   ÜRÜN DETAY — HERO (pd-hero)
───────────────────────────────────────── */
.pd-hero {
    height: 72vh;
    min-height: 500px;
    max-height: 700px;
}

.pd-hero-stock {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 4px 13px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* Hero content */
.pd-hero .cat-hero-content {
    padding-bottom: 5.5rem;
}

/* Ürün hero'su için daha yumuşak, uzun bir gradient */
.pd-hero::after {
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.32) 0%,
            rgba(0,0,0,0.02) 22%,
            rgba(0,0,0,0.10) 40%,
            rgba(0,0,0,0.58) 58%,
            rgba(0,0,0,0.88) 74%,
            rgba(0,0,0,1)    90%);
}

/* Ürün bilgi bölümü */
.pd-info-outer {
    background: #000;
    padding-bottom: 2rem;
}

.pd-info-section { padding: 1.5rem 0 2rem; }

/* ── 2-sütun yerleşim ── */
.pd-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
}

/* SOL — büyük görsel + thumbnail şeridi */
.pd-featured-col {
    position: sticky;
    top: 100px;
}

.pd-featured-wrap {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #0c0c0c;
    position: relative;
    aspect-ratio: 4 / 3;
    box-shadow: 0 32px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.05);
}

.pd-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.22s ease;
}

.pd-featured-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0d0d0d, #151515);
}
.pd-featured-wrap.img-missing .pd-featured-placeholder { display: flex; }
.pd-featured-placeholder span {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.45em;
    color: rgba(255,255,255,0.06);
}

/* ── Renk Çubuğu — hero'nun altından yükselir, kategori grid gibi ── */
.pd-color-bar {
    background: #000;
    margin-top: -5rem;
    position: relative;
    z-index: 5;
    padding: 0.7rem 0 0;
}

.pd-variant-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 4px;
}

.pd-strip-expand-btn {
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.5px;
}

.pd-vs-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: 2px solid rgba(255,255,255,0.22);
    border-radius: 7px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.pd-vs-btn:hover {
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-2px);
}

.pd-vs-btn.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.pd-vs-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pd-vs-btn.img-missing img { display: none; }

.pd-vs-noimg {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.08);
    display: block;
}

/* ── Alt Bölüm: CTA + SSS yan yana ── */
.pd-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    padding: 2rem 0 2.5rem;
    align-items: center;
}


/* ── Son Baktığınız Ürünler ── */
.pd-rv-outer {
    display: none;
    padding: 3rem 0 3rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.pd-rv-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.pd-rv-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.3px;
    margin: 0;
}
.pd-rv-count {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.25);
    font-family: 'Poppins', sans-serif;
}
.pd-rv-scroll {
    padding-top: 10px;
    margin-top: -10px;
    padding-bottom: 4px;
}
.pd-rv-track {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
}
.pd-rv-card {
    width: 100%;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.22s, transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
}
.pd-rv-card:hover {
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
}
.pd-rv-card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}
.pd-rv-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.38s ease;
}
.pd-rv-card:hover .pd-rv-card-img { transform: scale(1.07); }
.pd-rv-card-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.08);
    letter-spacing: 2px;
}
.pd-rv-card-body {
    padding: 0.6rem 0.7rem 0.7rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pd-rv-card-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-family: 'Poppins', sans-serif;
}
.pd-rv-card-code {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.28);
    display: block;
    margin-top: 0.18rem;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── İletişim CTA Bloğu ── */
.pd-cta-block {
    padding: 2.4rem 2.2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.pd-cta-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,0.4), transparent);
    pointer-events: none;
}

.pd-cta-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.pd-cta-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 0.28rem 0.75rem;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.25rem;
    font-family: 'Inter', sans-serif;
}
.pd-cta-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pd-cta-status--open {
    background: rgba(37,211,102,0.1);
    color: #25D366;
    border: 1px solid rgba(37,211,102,0.22);
}
.pd-cta-status--open::before {
    background: #25D366;
    box-shadow: 0 0 6px rgba(37,211,102,0.7);
    animation: statusPulse 2s ease-in-out infinite;
}
.pd-cta-status--closed {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.09);
}
.pd-cta-status--closed::before {
    background: rgba(255,255,255,0.25);
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pd-cta-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--accent-color);
    font-weight: 600;
    margin: 0 0 0.45rem;
    font-family: 'Poppins', sans-serif;
}

.pd-cta-heading {
    font-size: 1.45rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.5rem;
    letter-spacing: -0.3px;
    font-family: 'Poppins', sans-serif;
}

.pd-cta-desc {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.38);
    margin: 0 0 1.4rem;
    line-height: 1.65;
    font-family: 'Poppins', sans-serif;
    width: 100%;
}

/* ── Talep Formu Paneli ── */
.pd-cta-form-wrap {
    height: 0;
    overflow: hidden;
    transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.pd-cta-form-inner {
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: 0.6rem;
}
.pd-cta-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.pd-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.pd-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pd-form-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: rgba(255,255,255,0.3);
    font-family: 'Inter', sans-serif;
}
.pd-form-optional {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.67rem;
    color: rgba(255,255,255,0.18);
}
.pd-form-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.62rem 0.85rem;
    color: #fff;
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.pd-form-input::placeholder { color: rgba(255,255,255,0.18); }
.pd-form-input:focus {
    border-color: rgba(197,160,89,0.55);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 3px rgba(197,160,89,0.1);
}
.pd-form-textarea {
    resize: vertical;
    min-height: 78px;
    line-height: 1.6;
}
.pd-form-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.pd-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--accent-color);
    color: #0a0a0a;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.3rem;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.pd-form-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(197,160,89,0.35);
}
.pd-form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.pd-form-note {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.18);
    margin: 0;
    line-height: 1.45;
}
.pd-form-result {
    font-size: 0.84rem;
    padding: 0.65rem 0.9rem;
    border-radius: 9px;
    display: none;
}
.pd-form-result--success {
    display: block;
    background: rgba(37,211,102,0.09);
    border: 1px solid rgba(37,211,102,0.22);
    color: #3dd875;
}
.pd-form-result--error {
    display: block;
    background: rgba(255,80,80,0.07);
    border: 1px solid rgba(255,80,80,0.2);
    color: rgba(255,130,130,0.9);
}

/* ── Mesai Saatleri (minimal) ── */
.pd-cta-hours {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pd-cta-hours-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: rgba(255,255,255,0.75);
    margin: 0 0 0.55rem;
    font-family: 'Poppins', sans-serif;
}
.pd-cta-hours-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pd-cta-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.32rem 0.45rem;
    border-radius: 6px;
    transition: background 0.18s;
}
.pd-cta-hours-row span:first-child {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.38);
}
.pd-cta-hours-row span:last-child {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
.pd-cta-hours-row--closed span:first-child { color: rgba(255,255,255,0.22); }
.pd-cta-hours-row--closed span:last-child  { color: rgba(255,255,255,0.18); font-weight: 400; }
.pd-cta-hours-row--today {
    background: rgba(197,160,89,0.07);
}
.pd-cta-hours-row--today span:first-child {
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.pd-cta-hours-row--today span:last-child {
    color: var(--accent-color);
}

.pd-cta-channels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pd-cta-channels--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

.pd-cta-channel {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.pd-cta-channels--grid .pd-cta-channel {
    padding: 1rem 0.9rem;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
}
.pd-cta-channels--grid .pd-cta-ch-arrow { display: none; }

.pd-cta-channel:hover { transform: translateX(3px); }
.pd-cta-channels--grid .pd-cta-channel:hover { transform: translateY(-2px); }

.pd-cta-channel--wa {
    background: rgba(37,211,102,0.09);
    border-color: rgba(37,211,102,0.18);
}
.pd-cta-channel--wa:hover {
    background: rgba(37,211,102,0.12);
    border-color: rgba(37,211,102,0.4);
    box-shadow: 0 10px 25px -5px rgba(37,211,102,0.14), 0 0 1px rgba(37,211,102,0.35);
    color: #fff;
}
.pd-cta-channel--wa:hover .pd-cta-ch-body strong { color: #25D366; }
.pd-cta-channel--wa:hover .pd-cta-ch-arrow { color: #25D366; }

.pd-cta-channel--ph {
    background: rgba(77,184,255,0.06);
    border-color: rgba(77,184,255,0.15);
}
.pd-cta-channel--ph:hover {
    background: rgba(77,184,255,0.08);
    border-color: rgba(77,184,255,0.35);
    box-shadow: 0 10px 25px -5px rgba(77,184,255,0.14), 0 0 1px rgba(77,184,255,0.35);
}
.pd-cta-channel--ph:hover .pd-cta-ch-icon {
    background: rgba(77,184,255,0.18);
    color: #4db8ff;
}
.pd-cta-channel--ph:hover .pd-cta-ch-body strong { color: #4db8ff; }
.pd-cta-channel--ph:hover .pd-cta-ch-arrow { color: #4db8ff; }

.pd-cta-channel--ml {
    background: rgba(167,139,250,0.06);
    border-color: rgba(167,139,250,0.14);
}
.pd-cta-channel--ml:hover {
    background: rgba(167,139,250,0.08);
    border-color: rgba(167,139,250,0.32);
    box-shadow: 0 10px 25px -5px rgba(167,139,250,0.13), 0 0 1px rgba(167,139,250,0.32);
}
.pd-cta-channel--ml:hover .pd-cta-ch-icon {
    background: rgba(167,139,250,0.16);
    color: #a78bfa;
}
.pd-cta-channel--ml:hover .pd-cta-ch-body strong { color: #a78bfa; }
.pd-cta-channel--ml:hover .pd-cta-ch-arrow { color: #a78bfa; }

/* Form button (Talep Formu) */
.pd-cta-channel--fm {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.09);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
}
.pd-cta-channel--fm:hover {
    background: rgba(197,160,89,0.08);
    border-color: rgba(197,160,89,0.35);
    box-shadow: 0 10px 25px -5px rgba(197,160,89,0.12), 0 0 1px rgba(197,160,89,0.35);
}
.pd-cta-channel--fm:hover .pd-cta-ch-body strong { color: var(--accent-color); }
.pd-cta-channel--fm.active {
    background: rgba(197,160,89,0.1);
    border-color: rgba(197,160,89,0.4);
    transform: none;
}
.pd-cta-channel--fm .pd-cta-ch-icon {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.55);
}
.pd-cta-channel--fm:hover .pd-cta-ch-icon,
.pd-cta-channel--fm.active .pd-cta-ch-icon {
    background: var(--accent-color);
    color: #0a0a0a;
}

.pd-cta-ch-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.22s, color 0.22s, transform 0.22s;
}
.pd-cta-channel--wa .pd-cta-ch-icon { background: #25D366; color: #fff; }
.pd-cta-channel--ph .pd-cta-ch-icon { background: rgba(77,184,255,0.14); color: #4db8ff; }
.pd-cta-channel--ml .pd-cta-ch-icon { background: rgba(167,139,250,0.14); color: #a78bfa; }

.pd-cta-ch-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-family: 'Poppins', sans-serif;
}
.pd-cta-ch-body strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    display: block;
    transition: color 0.22s;
}
.pd-cta-ch-body span {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.38);
}

.pd-cta-ch-arrow {
    flex-shrink: 0;
    color: rgba(255,255,255,0.18);
    transition: color 0.2s, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.pd-cta-channel:hover .pd-cta-ch-arrow {
    color: rgba(255,255,255,0.45);
    transform: translateX(4px);
}

/* ── Ürün Açıklaması (specs altında) ── */
.pd-about-text {
    font-size: 1rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.8;
    margin: 1.8rem 0 0;
    font-weight: 300;
}

/* ── SSS (FAQ) ── */
.pd-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pd-faq-item {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
    transition: border-color 0.22s, background 0.22s;
}
.pd-faq-item:hover { border-color: rgba(255,255,255,0.12); }
.pd-faq-item.open  {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.14);
}

.pd-faq-q {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.96rem;
    font-weight: 500;
    color: rgba(255,255,255,0.68);
    transition: color 0.18s;
    font-family: inherit;
    line-height: 1.45;
}
.pd-faq-q:hover { color: rgba(255,255,255,0.9); }
.pd-faq-item.open .pd-faq-q { color: #fff; }

.pd-faq-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    position: relative;
    transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1),
                border-color 0.22s;
}
.pd-faq-icon::before,
.pd-faq-icon::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.45);
    border-radius: 1px;
    transition: background 0.2s;
}
.pd-faq-icon::before { width: 10px; height: 1.5px; top: 9.25px; left: 5px; }
.pd-faq-icon::after  { width: 1.5px; height: 10px; top: 5px;    left: 9.25px; }

.pd-faq-item.open .pd-faq-icon {
    transform: rotate(45deg);
    border-color: var(--accent-color);
}
.pd-faq-item.open .pd-faq-icon::before,
.pd-faq-item.open .pd-faq-icon::after { background: var(--accent-color); }

.pd-faq-a {
    height: 0;
    overflow: hidden;
    transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-faq-a-inner { padding: 0 1.1rem 1rem; }

.pd-faq-a p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.48);
    line-height: 1.78;
    margin: 0;
}

/* Featured image — cursor-tracked zoom */
.pd-featured-img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.22s ease;
    transform-origin: 50% 50%;
    will-change: transform;
}
.pd-featured-wrap:hover {
    cursor: zoom-in;
}
.pd-featured-wrap:hover .pd-featured-img {
    transform: scale(1.85);
}

/* SAĞ — başlık + özellikler */
.pd-data-col {}

.pd-data-inner {
    position: sticky;
    top: 110px;
    padding-top: 2.5rem;
}

.pd-data-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.65rem;
}

.pd-data-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.12;
    margin: 0 0 1.1rem;
    letter-spacing: -0.3px;
}

.pd-data-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.pd-data-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
}

.pd-data-color {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    margin: 0.25rem 0 0.4rem;
}

.pd-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
}

.pd-data-color-name {
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.pd-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 1.6rem 0 2rem;
}

.pd-source--bottom {
    margin-top: 2rem;
}

/* ── "+N" butonu (hero şeridinde) ── */
.pd-vs-more-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-vs-more-btn:hover {
    background: rgba(255,255,255,0.14);
}
.pd-vs-more-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.3px;
}

/* ── Renk Seçim Modalı ── */
.pd-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.pd-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.pd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pd-modal-inner {
    position: relative;
    z-index: 1;
    background: #121212;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    width: min(980px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.8);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.28s cubic-bezier(0.34,1.3,0.64,1);
}
.pd-modal.open .pd-modal-inner {
    transform: translateY(0) scale(1);
}

/* Sol: büyük görsel */
.pd-modal-left {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: #0e0e0e;
    overflow: hidden;
}

.pd-modal-img-wrap {
    width: 100%;
    flex: 1;
    min-height: 200px;
    overflow: hidden;
    background: #1a1a1a;
    cursor: zoom-in;
}

.pd-modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.18s ease, transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
    transform-origin: center center;
}
.pd-modal-img-wrap:hover .pd-modal-img {
    transform: scale(1.06);
}

.pd-modal-left-meta {
    flex-shrink: 0;
    padding: 1rem 1.3rem 1.3rem;
    background: #0e0e0e;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.pd-modal-product-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 0.35rem;
}

/* Sağ: header + grid */
.pd-modal-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-modal-right-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.pd-modal-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.3px;
}
.pd-modal-count em {
    font-style: normal;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
}

.pd-modal-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.pd-modal-close:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

.pd-modal-grid {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 0.55rem;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.pd-modal-grid::-webkit-scrollbar { width: 4px; }
.pd-modal-grid::-webkit-scrollbar-track { background: transparent; }
.pd-modal-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

@media (max-width: 640px) {
    .pd-modal-inner { flex-direction: column; }
    .pd-modal-left { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .pd-modal-img-wrap { width: 80px; height: 80px; min-height: unset; flex-shrink: 0; flex: unset; }
    .pd-modal-left-meta { padding: 0.7rem 1rem; border-top: none; }
}

.pd-mv-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.45rem 0.35rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.18s;
}
.pd-mv-btn:hover {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
}
.pd-mv-btn.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}
.pd-mv-btn img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.pd-mv-code {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
    letter-spacing: 0.2px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-mv-btn.active .pd-mv-code { color: rgba(255,255,255,0.85); }

@media (max-width: 1100px) {
    .pd-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .pd-featured-col { position: static; }
    .pd-data-inner { position: static; top: auto; }
    .pd-featured-wrap { aspect-ratio: 16 / 9; }
    .pd-bottom-row { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
    .pd-hero { height: 62vh; min-height: 420px; }
    .pd-hero .cat-hero-content { padding-bottom: 4rem; }
    .pd-info-section { padding: 1rem 0 1.5rem; }
    .pd-vs-btn { width: 60px; height: 60px; min-width: unset; max-width: unset; }
    .pd-vs-btn img, .pd-vs-noimg { width: 100%; height: 100%; }
    .pd-variant-strip { gap: 0.5rem; justify-content: center; }
    .pd-bottom-row { padding: 1.5rem 0 3.5rem; }
    .pd-rv-track { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .pd-featured-wrap { aspect-ratio: 4 / 3; }
    .pd-cta-channels--grid { grid-template-columns: 1fr 1fr; }
    .pd-bottom-row { gap: 1.5rem; padding: 1rem 0 2.5rem; }
    .pd-rv-track { grid-template-columns: repeat(3, 1fr); }
    .pd-rv-outer { padding: 2rem 0; }
    .pd-cta-block { padding: 1.5rem; }
    .pd-hero .cat-hero-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
    .pd-hero .cat-hero-eyebrow { font-size: 0.85rem; letter-spacing: 3px; }
    .pd-hero .breadcrumb { font-size: 0.9rem; }
    .pd-color-bar .container { padding: 0 0.75rem; }
}

/* ─────────────────────────────────────────
   ÜRÜN DETAY SAYFASI (urun.php) — eski stiller
───────────────────────────────────────── */
.product-detail-wrap { padding-bottom: 6rem; }

.product-detail {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: start;
    padding-top: 2rem;
}

/* Sol: görsel */
.pd-left { position: sticky; top: 100px; }

.pd-img-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #060606;
    position: relative;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.pd-img-wrap.img-missing {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0d0d0d 0%, #151515 100%);
}
.pd-img-wrap.img-missing::after {
    content: 'CASANORM';
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.45em;
    color: rgba(255,255,255,0.06);
    pointer-events: none;
}
.pd-variant-btn.img-missing { opacity: 0.35; }
.pd-variant-btn.img-missing img { display: none; }

.pd-img-wrap > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* Varyantlar */
.pd-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.pd-variant-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.pd-variant-btn img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    object-fit: cover;
    transition: var(--transition);
    display: block;
}
.pd-variant-btn span {
    font-size: 0.58rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-align: center;
}

.pd-variant-btn:hover img,
.pd-variant-btn.active img {
    border-color: var(--accent-color);
}

.pd-variant-color {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.52rem;
    color: var(--text-muted);
    letter-spacing: 0.2px;
    line-height: 1;
}

.pd-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
    display: inline-block;
}

/* Active variant color indicator (right panel) */
.pd-active-color {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0.5rem 0 1rem;
}

.pd-color-dot-lg {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
}

.pd-color-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* Sağ: bilgi */
.pd-right { padding-top: 0.5rem; }

.pd-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0.4rem 0 0.8rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.pd-stock {
    display: inline-block;
    margin-bottom: 2rem;
}

.pd-specs { margin-top: 1rem; }

.pd-source {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.pd-source a {
    color: var(--accent-color);
    text-decoration: none;
    margin-left: 0.4rem;
}
.pd-source a:hover { text-decoration: underline; }

/* 4-sütunlu grid (benzer ürünler için) */
.product-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ─────────────────────────────────────────
   404 SAYFASI
───────────────────────────────────────── */
.page-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.not-found-wrap {
    text-align: center;
    padding: 3rem;
}
.not-found-code {
    font-size: 8rem;
    font-family: 'Playfair Display', serif;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.6;
}
.not-found-msg {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}
.not-found-link {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: var(--accent-color);
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: var(--transition);
}
.not-found-link:hover { background: #d4b06a; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
/* ── Footer zemin hazırlığı ── */
.footer-pre-bridge {
    display: none;
}

footer {
    position: relative;
    background: #050505;
    border-top: none;
    overflow: visible;
}
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(197,160,89,0.5) 30%, rgba(197,160,89,0.7) 50%, rgba(197,160,89,0.5) 70%, transparent 100%);
}

/* ── Ana içerik ── */
.footer-main {
    position: relative;
    z-index: 2;
    padding: 2.5rem 0 2.5rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 2rem 4rem;
    align-items: start;
}

/* ── Büyük link sütunları ── */
.footer-col-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1.8rem;
}
.footer-big-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.footer-big-links a {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    display: block;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: color 0.2s, padding-left 0.2s;
    line-height: 1.2;
}
.footer-big-links a:last-child { border-bottom: none; }
.footer-big-links a:hover {
    color: #fff;
    padding-left: 6px;
}

/* ── Sol sütun: iletişim ── */
.footer-contact-col {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    border-right: 1px solid rgba(255,255,255,0.08);
    padding-right: 3rem;
}
.footer-phone-group {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}
.footer-phone-row {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}
.footer-phone-icon {
    flex-shrink: 0;
    color: rgba(255,255,255,0.45);
    margin-top: 0.2rem;
}
.footer-phone-type {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin-bottom: 0.2rem;
}
.footer-big-phone {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    display: block;
    line-height: 1.35;
    transition: color 0.2s;
}
.footer-big-phone:hover { color: #fff; }

/* Sosyal */
.footer-social-row {}
.footer-social-row-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 0.8rem;
}
.footer-social {
    display: flex;
    gap: 0.5rem;
}
.footer-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.footer-social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}
.footer-social-icon.si-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer-social-icon.si-fb { background: #1877F2; }
.footer-social-icon.si-li { background: #0A66C2; }
.footer-social-icon.si-pt { background: #E60023; }

/* Logo */
.footer-logo-img {
    height: 34px;
    width: auto;
    opacity: 0.5;
    transition: opacity 0.2s;
    margin-top: auto;
}
.footer-logo-img:hover { opacity: 0.85; }

/* ── Alt bar ── */
.footer-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 0;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.22);
}
.footer-admin-link {
    color: rgba(255,255,255,0.18);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-admin-link:hover { color: var(--accent-color); }

/* ── İkon satırı ── */
.footer-icon-row {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}
.footer-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.footer-icon-btn:hover { transform: translateY(-3px); filter: brightness(1.15); }
.footer-icon-btn.fi-wa     { background: #25D366;              border-color: #25D366;              color: #fff; }
.footer-icon-btn.fi-mail   { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); color: #fff; }
.footer-icon-btn.fi-loc    { background: #EA4335;              border-color: #EA4335;              color: #fff; }
.footer-icon-btn.fi-google { background: #fff;                 border-color: #fff;                 color: #4285F4; }
.footer-icon-btn.fi-li     { background: #0A66C2;              border-color: #0A66C2;              color: #fff; }
.footer-icon-btn.fi-fb     { background: #1877F2;              border-color: #1877F2;              color: #fff; }

/* ── Adres kartı ── */
.footer-address-section {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 2rem;
}
.footer-address-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.footer-address-card:hover { border-color: rgba(255,255,255,0.22); }

/* Üst şerit */
.footer-addr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 2rem;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-address-label {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-addr-social {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Pill icon — expand on hover */
.fasi {
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 0;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    transition: padding 0.3s ease, gap 0.3s ease, filter 0.2s;
    flex-shrink: 0;
}
.fasi:hover {
    padding: 0 0.85rem;
    gap: 0.5rem;
    filter: brightness(1.08);
}
.fasi svg { flex-shrink: 0; }

.fasi-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.35s ease, opacity 0.25s ease 0.05s;
}
.fasi:hover .fasi-label {
    max-width: 100px;
    opacity: 1;
}

.fasi-wa { background: #25D366; }
.fasi-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fasi-fb { background: #1877F2; }
.fasi-li { background: #0A66C2; }
.fasi-pt { background: #E60023; }

/* Gövde */
.footer-addr-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 2rem 2rem;
    flex-wrap: wrap;
}
.footer-address-text {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: 300;
    color: #ffffff;
    line-height: 1.8;
    flex: 1 1 240px;
}
.footer-map-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    flex-shrink: 0;
}
.footer-map-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.62rem 1.15rem;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s;
}
/* Shine sweep */
.footer-map-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
    transition: left 0.55s ease;
    pointer-events: none;
}
.footer-map-btn:hover::after { left: 160%; }
.footer-map-btn:hover {
    transform: translateY(-3px) scale(1.04);
    filter: brightness(1.08);
}
.fmb-google { background: #EA4335; color: #fff; }
.fmb-yandex { background: #FC3F1D; color: #fff; }
.fmb-apple  { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
.fmb-bing   { background: #0078D4; color: #fff; }
.fmb-google:hover { box-shadow: 0 8px 24px rgba(234,67,53,0.55),  0 2px 8px rgba(0,0,0,0.35); }
.fmb-yandex:hover { box-shadow: 0 8px 24px rgba(252,63,29,0.55),  0 2px 8px rgba(0,0,0,0.35); }
.fmb-apple:hover  { box-shadow: 0 8px 24px rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.35); }
.fmb-bing:hover   { box-shadow: 0 8px 24px rgba(0,120,212,0.55),  0 2px 8px rgba(0,0,0,0.35); }

@media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-contact-col { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 2rem 4rem; align-items: flex-start; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-right: 0; padding-bottom: 2rem; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-contact-col { flex-direction: column; border-bottom: 1px solid rgba(255,255,255,0.08); padding-right: 0; }
    .footer-big-links a { font-size: 1.3rem; }
    .footer-big-phone { font-size: 1.2rem; }
    .footer-bottom-inner { flex-direction: column; gap: 0.6rem; text-align: center; }
}

/* ══════════════════════════════════════════
   SITE FOOTER — Premium Redesign (sf-*)
══════════════════════════════════════════ */

/* Nokta doku zemini */
.sf-dot-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.032) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* ── Büyük başlık ── */
.sf-headline-wrap {
    position: relative;
    z-index: 2;
    padding: 3.5rem 0 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sf-headline-inner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.sf-headline-text {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.4rem, 5.5vw, 5.2rem);
    font-weight: 200;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}
.sf-headline-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(197,160,89,0.65), rgba(197,160,89,0.18), transparent);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sf-headline-line.sf-line-revealed { transform: scaleX(1); }

/* ── Kayan bant ── */
.sf-tape {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 0.75rem 0;
    background: rgba(197,160,89,0.022);
}
.sf-tape-inner {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: sfTapeScroll 35s linear infinite;
    will-change: transform;
}
.sf-tape-item {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    padding: 0 1.8rem;
}
.sf-tape-sep {
    color: rgba(197,160,89,0.45);
    font-size: 0.52rem;
    flex-shrink: 0;
}
@keyframes sfTapeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Ana grid ── */
.sf-main {
    position: relative;
    z-index: 2;
    padding: 4rem 0 3rem;
}
.sf-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.7fr 1fr;
    gap: 1.5rem 4rem;
    align-items: start;
}

/* Marka sütunu */
.sf-brand-col {
    border-right: 1px solid rgba(255,255,255,0.07);
    padding-right: 3rem;
}
.sf-brand-logo {
    display: block;
    width: auto;
    height: 52px;
    object-fit: contain;
    margin-bottom: 1.2rem;
    filter: brightness(0.95);
}
.sf-brand-mark {
    font-family: 'Poppins', sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(197,160,89,0.55);
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 1.2rem;
    user-select: none;
}
.sf-brand-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.8;
    margin-bottom: 1.8rem;
}
.sf-social-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.sf-soc {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.sf-soc:hover { transform: translateY(-4px); color: #fff; }

.sf-soc-wa:hover  { background: #25D366; border-color: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,0.38); }
.sf-soc-ig:hover  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-color: transparent; box-shadow: 0 8px 20px rgba(214,36,159,0.38); }
.sf-soc-fb:hover  { background: #1877F2; border-color: #1877F2; box-shadow: 0 8px 20px rgba(24,119,242,0.38); }
.sf-soc-li:hover  { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 8px 20px rgba(10,102,194,0.38); }
.sf-soc-pt:hover  { background: #E60023; border-color: #E60023; box-shadow: 0 8px 20px rgba(230,0,35,0.38); }

/* Link sütunları */
.sf-col-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(197,160,89,0.6);
    margin-bottom: 1.4rem;
}
.sf-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.sf-link {
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.45vw, 1.28rem);
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 0.28rem 0;
    transition: color 0.2s;
    overflow: hidden;
}
.sf-link::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #c5a059, #e8c87a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-link:hover { color: #fff; }
.sf-link:hover::after { transform: scaleX(1); }

/* İletişim sütunu */
.sf-phones {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sf-phone-block { display: flex; flex-direction: column; gap: 0.12rem; }
.sf-phone-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin-bottom: 0.08rem;
}
.sf-phone {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.88rem, 1.15vw, 1.02rem);
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    display: block;
    letter-spacing: 0.02em;
    transition: color 0.2s, letter-spacing 0.25s;
}
.sf-phone:hover { color: #c5a059; letter-spacing: 0.06em; }

/* ── Adres kartı ── */
.sf-addr-wrap {
    position: relative;
    z-index: 2;
    padding: 0 0 3.5rem;
}
.sf-addr-card {
    background: rgba(255,255,255,0.018);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 22px;
    padding: 2.2rem 2.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    transition: border-color 0.35s;
    position: relative;
    overflow: hidden;
}
.sf-addr-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 5%, rgba(197,160,89,0.32) 50%, transparent 95%);
}
.sf-addr-card:hover { border-color: rgba(255,255,255,0.18); }
.sf-addr-left {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.sf-addr-coord {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    color: rgba(197,160,89,0.75);
    font-weight: 500;
}
.sf-addr-text {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.88rem, 1.15vw, 1.02rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.9;
}
.sf-addr-text strong { font-weight: 500; color: #fff; }
.sf-addr-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}
.sf-map-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
}
.sf-map-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(197,160,89,0.75);
    font-weight: 700;
}
.sf-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.sf-map-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    color: rgba(255,255,255,0.82);
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.2s, box-shadow 0.22s;
}
.sf-map-pill svg { flex-shrink: 0; }
.sf-map-pill:hover { transform: translateY(-2px); color: #fff; }

/* Google — kırmızı */
.sf-map-google {
    background: rgba(234,67,53,0.12);
    border-color: rgba(234,67,53,0.28);
}
.sf-map-google:hover {
    background: rgba(234,67,53,0.22);
    border-color: rgba(234,67,53,0.55);
    box-shadow: 0 5px 16px rgba(234,67,53,0.22);
}

/* Yandex — turuncu */
.sf-map-yandex {
    background: rgba(255,109,0,0.12);
    border-color: rgba(255,109,0,0.3);
}
.sf-map-yandex:hover {
    background: rgba(255,109,0,0.22);
    border-color: rgba(255,109,0,0.55);
    box-shadow: 0 5px 16px rgba(255,109,0,0.22);
}

/* Apple — beyaz/gümüş */
.sf-map-apple {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
}
.sf-map-apple:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 5px 16px rgba(255,255,255,0.07);
}

/* Bing — mavi */
.sf-map-bing {
    background: rgba(0,120,212,0.12);
    border-color: rgba(0,120,212,0.3);
}
.sf-map-bing:hover {
    background: rgba(0,120,212,0.22);
    border-color: rgba(0,120,212,0.55);
    box-shadow: 0 5px 16px rgba(0,120,212,0.22);
}

/* ── Alt bar ── */
.sf-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.sf-bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.4rem 0;
}
.sf-copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    color: #fff;
    text-align: left;
    white-space: nowrap;
}
.sf-eqa-credit {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.sf-eqa-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
}
.sf-eqa-sep {
    font-size: 0.4rem;
    color: rgba(255,255,255,0.5);
    line-height: 1;
}
.sf-eqa-name {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────
   ÜRÜN SAYFASI — Floating Contact Widget
───────────────────────────────────────── */
.pd-cf {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-110%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 10px;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-left: none;
    border-radius: 0 44px 44px 0;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.45s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.35s ease;
    opacity: 0;
    overflow: visible;
}
.pd-cf--visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

/* Sağ taraf varyantı */
.pd-cf--right {
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(110%);
    border-radius: 44px 0 0 44px;
    border-left: 1px solid rgba(197, 160, 89, 0.2);
    border-right: none;
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.5);
}
.pd-cf--right.pd-cf--visible {
    transform: translateY(-50%) translateX(0);
}
.pd-cf--right .pd-cf-tip {
    left: auto;
    right: calc(100% + 14px);
    transform: translateY(-50%) translateX(6px);
}
.pd-cf--right .pd-cf-btn:hover .pd-cf-tip {
    transform: translateY(-50%) translateX(0);
}
.pd-cf-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.22s, transform 0.22s;
}
.pd-cf-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.22s;
}
.pd-cf-btn:hover { transform: scale(1.1); }
.pd-cf-btn:hover svg { transform: scale(1.05); }

/* Renk: telefon & mail */
.pd-cf-btn--phone { color: #fff; }
.pd-cf-btn--phone:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pd-cf-btn--mail  { color: #d4a843; }
.pd-cf-btn--mail:hover  { background: rgba(212, 168, 67, 0.12); color: #e8c060; }

/* Renk: WhatsApp */
.pd-cf-btn--wa { color: #2ecc71; }
.pd-cf-btn--wa:hover { background: rgba(46, 204, 113, 0.12); color: #3dda7e; }

/* Tooltip */
.pd-cf-tip {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    white-space: nowrap;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(197, 160, 89, 0.18);
    border-radius: 8px;
    padding: 6px 13px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.pd-cf-btn:hover .pd-cf-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.pd-cf-divider {
    display: block;
    width: 16px;
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 1px;
    margin: 3px 0;
}

@media (max-width: 767px) {
    .pd-cf {
        top: auto;
        bottom: 72px;
        transform: translateX(-110%);
    }
    .pd-cf--visible {
        transform: translateY(0) translateX(0);
    }
    .pd-cf--right {
        top: auto;
        bottom: 72px;
        transform: translateX(110%);
    }
    .pd-cf--right.pd-cf--visible {
        transform: translateY(0) translateX(0);
    }
}

/* ── Scroll reveal ── */
[data-sf-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-sf-reveal].sf-revealed { opacity: 1; transform: translateY(0); }
[data-sf-reveal][data-sf-delay="100"] { transition-delay: 0.1s; }
[data-sf-reveal][data-sf-delay="200"] { transition-delay: 0.2s; }
[data-sf-reveal][data-sf-delay="300"] { transition-delay: 0.3s; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .sf-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
    .sf-brand-col {
        grid-column: 1 / -1;
        border-right: none; padding-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 2.5rem;
        display: flex; flex-direction: row; align-items: flex-start; gap: 3rem; flex-wrap: wrap;
    }
    .sf-brand-col .sf-col-label { display: none; }
    .sf-brand-logo { height: 44px; }
    .sf-brand-desc { font-size: 0.95rem; }
    .sf-main { padding: 3rem 0 2.5rem; }
}
@media (max-width: 900px) {
    .sf-addr-card { padding: 1.8rem 2rem; gap: 2rem; }
    .sf-map-grid { gap: 0.35rem; }
    .sf-link { font-size: 1rem; }
}
@media (max-width: 700px) {
    /* Koleksiyonlar + Kurumsal yan yana, marka ve iletişim tam genişlik */
    .sf-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }
    .sf-brand-col {
        grid-column: 1 / -1;
        flex-direction: column; gap: 0;
    }
    .sf-contact-col { grid-column: 1 / -1; }
    .sf-phones { flex-direction: row; flex-wrap: wrap; gap: 1rem 3rem; }

    /* Tüm footer kolonları ortalı */
    .sf-col {
        display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .sf-col .sf-links { align-items: center; }
    .sf-brand-col { align-items: center; }
    .sf-brand-desc { text-align: center; }
    .sf-social-row { justify-content: center; }
    .sf-phones { justify-content: center; }
    .sf-phone-block { align-items: center; }
    .sf-phone-label { text-align: center; }

    .sf-brand-logo { height: 40px; margin-bottom: 1rem; }
    .sf-brand-desc { font-size: 0.92rem; }
    .sf-link { font-size: 0.95rem; }
    .sf-headline-inner { gap: 1rem; }
    .sf-headline-text { font-size: clamp(1.8rem, 9vw, 3.2rem); }
    .sf-main { padding: 2.5rem 0 2rem; }
    .sf-addr-wrap { padding: 0 0 2.5rem; }
    .sf-addr-card {
        flex-direction: column; align-items: flex-start;
        padding: 1.6rem 1.4rem; border-radius: 16px; gap: 1.5rem;
    }
    .sf-addr-left { width: 100%; }
    .sf-addr-text { font-size: 1rem; }
    .sf-addr-right { align-items: flex-start; width: 100%; }
    .sf-map-section { align-items: flex-start; width: 100%; }
    .sf-map-grid { width: 100%; }
    .sf-addr-social { flex-wrap: wrap; }
    .sf-map-btns { width: 100%; }
    .sf-bottom-mark { display: none; }
    .sf-bottom-inner {
        grid-template-columns: 1fr;
        gap: 0.4rem; padding: 1.2rem 0 5rem;
        text-align: center; justify-items: center;
    }
    .sf-copyright { text-align: center; white-space: normal; }
}
@media (max-width: 480px) {
    .sf-headline-text { font-size: clamp(1.5rem, 8vw, 2.4rem); }
    .sf-addr-card { padding: 1.3rem 1.1rem; }
    .sf-map-grid { grid-template-columns: 1fr; }
    .sf-phones { gap: 1.2rem; }
}

/* ─────────────────────────────────────────
   CUSTOM CONTEXT MENU
───────────────────────────────────────── */
.ctx-menu {
    position: fixed;
    z-index: 9999;
    width: 286px;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(44px) saturate(2.2);
    -webkit-backdrop-filter: blur(44px) saturate(2.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    box-shadow:
        0 32px 100px rgba(0,0,0,0.8),
        0 10px 32px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.07);
    padding: 10px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    scrollbar-width: none;
    opacity: 0;
    transform: scale(0.86) translateY(-8px);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.24s cubic-bezier(0.34,1.56,0.64,1),
                transform 0.3s  cubic-bezier(0.34,1.56,0.64,1);
    user-select: none;
    -webkit-user-select: none;
}
.ctx-menu::-webkit-scrollbar { display: none; }
.ctx-menu.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* ── Üst 5 aksiyon butonu — tek oval blok ── */
.ctx-top {
    display: flex;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 4px;
}

.ctx-top-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.07);
    padding: 13px 2px 11px;
    cursor: pointer;
    transition: background 0.14s;
}
.ctx-top-btn:last-child { border-right: none; }
.ctx-top-btn:hover  { background: rgba(255,255,255,0.07); }
.ctx-top-btn:active { background: rgba(255,255,255,0.13); }

.ctx-top-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ctx-top-icon--blue   { color: #4db8ff; }
.ctx-top-icon--orange { color: #ffaa2e; }
.ctx-top-icon--gold   { color: var(--accent-color); }
.ctx-top-icon--purple { color: #c97cf5; }
.ctx-top-icon--teal   { color: #4cd9aa; }

.ctx-top-label {
    font-size: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.2px;
}

/* ── Ayraç ── */
.ctx-sep {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 4px 0;
}

/* ── Nav linkleri ── */
.ctx-nav { padding: 4px 0; }

.ctx-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    text-decoration: none;
    color: rgba(225,225,225,0.88);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    transition: background 0.12s,
                color 0.12s,
                transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.ctx-nav-item:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
    transform: translateX(4px);
}
.ctx-nav-item:active { transform: translateX(2px) scale(0.98); }

.ctx-nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(197,160,89,0.12);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.ctx-nav-item:hover .ctx-nav-icon {
    background: rgba(197,160,89,0.22);
    transform: scale(1.1);
}

/* ── İletişim ── */
.ctx-contact {
    padding: 4px 0 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ctx-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    text-decoration: none;
    transition: background 0.12s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.ctx-contact-item:hover {
    background: rgba(255,255,255,0.06);
    transform: translateX(4px);
}
.ctx-contact-item:active { transform: translateX(2px) scale(0.98); }

.ctx-contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.ctx-contact-item:hover .ctx-contact-icon { transform: scale(1.12); }
.ctx-contact-icon--phone { background: rgba(10,132,255,0.16);  color: #4db8ff; }
.ctx-contact-icon--wa    { background: rgba(37,211,102,0.15);  color: #2ecc71; }
.ctx-contact-icon--mail  { background: rgba(197,160,89,0.16);  color: var(--accent-color); }

.ctx-contact-info { display: flex; flex-direction: column; gap: 2px; }
.ctx-contact-label {
    font-size: 0.63rem;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ctx-contact-val {
    font-size: 0.82rem;
    color: rgba(225,225,225,0.9);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

@keyframes ctxItemIn {
    from { opacity: 0; transform: translateY(6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* ─────────────────────────────────────────
   LOADER
───────────────────────────────────────── */
.loader {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255,255,255,0.08);
    border-bottom-color: var(--accent-color);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
    .modal { padding: 0; align-items: flex-end; }
    .modal-content {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 95dvh;
        overflow-y: auto;
    }
    .modal-img-wrap img { max-height: 55vw; }
}

@media (max-width: 1024px) {
    .product-detail { grid-template-columns: 1fr; gap: 2.5rem; }
    .pd-left { position: static; }
    .pd-img-wrap > img { max-height: 60vw; }
}

@media (max-width: 1024px) {
    .nav-links { gap: 2rem; }
    .nav-links a { font-size: 16px; }
    #site-header.scrolled .nav-links a,
    #site-header:not(.header--transparent) .nav-links a { font-size: 15px; }
}

/* ── Mobile nav overlay ── */
.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #070707;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-nav.open { display: flex; }

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    min-height: 68px;
}
.mobile-nav-logo img { height: 36px; width: auto; }
.mobile-nav-x {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.mobile-nav-x:hover { background: rgba(255,255,255,0.12); color: #fff; }

.mobile-nav-links {
    flex: 1;
    list-style: none;
    padding: 0.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
}
.mobile-nav-links li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-nav-links li:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.mobile-nav-links a {
    display: flex;
    align-items: center;
    padding: 1.25rem 0.25rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    font-weight: 400;
    font-style: italic;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    transition: color 0.22s, padding-left 0.22s;
    position: relative;
}
.mobile-nav-links a::before {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 1px;
    background: #c5a059;
    bottom: 0;
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active {
    color: #c5a059;
    padding-left: 0.6rem;
}
.mobile-nav-links a:hover::before,
.mobile-nav-links a.active::before { width: 100%; }

.mobile-nav-foot {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 2rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.mobile-nav-soc {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.mobile-nav-soc:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; }
.mobile-nav-soc svg { flex-shrink: 0; }

/* Desktop'ta mobile-nav gizli */
@media (min-width: 769px) {
    .mobile-nav { display: none !important; }
}

@media (max-width: 768px) {
    /* ── Logo küçült ── */
    .logo img { height: 34px; }
    .header--transparent .logo img { height: 40px; }
    .header--transparent.scrolled .logo img { height: 34px; }

    /* ── Desktop nav-links gizle ── */
    .nav-links { display: none !important; }

    /* ── Search + Hamburger sağa ── */
    .nav-search-btn {
        margin-left: auto;
        width: 44px; height: 44px;
        padding: 8px;
    }
    .hamburger {
        display: flex;
        margin-left: 4px;
        padding: 6px;
        gap: 6px;
        min-width: 44px; min-height: 44px;
        align-items: center; justify-content: center;
    }
    .hamburger span { width: 24px; height: 2px; }
    .dropdown-menu { position: static; transform: none; box-shadow: none; border: none; background: transparent; padding-top: 0; }
    .nav-dropdown:hover .dropdown-menu { display: none; }
    .nav-dropdown.open   .dropdown-menu { display: block; }

    .hero h1 { font-size: 2.2rem; }
    .home-hero h1 { font-size: 2.4rem; }

    .cat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }

    .filters { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.5rem; flex-wrap: nowrap; }
    .filter-btn { flex-shrink: 0; }

    .color-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.4rem; }
    .cfil { flex-shrink: 0; }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0 0.25rem 3rem;
    }
    .product-image { height: 260px; }
    .product-card { border-radius: 12px; }
    .product-overlay {
        padding: 0 0.75rem 0.75rem;
        display: flex;
        flex-direction: column;
    }
    .product-meta { order: 1; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .product-name { font-size: 1.12rem; line-height: 1.3; }
    .product-meta .stock-code { font-size: 0.72rem; padding: 3px 11px; }
    .product-colors-preview {
        order: 2;
        display: flex;
        margin-bottom: 0;
        margin-top: 0.6rem;
        gap: 0.45rem;
    }
    .product-colors-preview .pc-circle,
    .product-colors-preview .pc-circle-empty { width: 30px; height: 30px; }
    .product-colors-preview .pc-more { height: 30px; font-size: 0.78rem; padding: 0 12px; }

    .search-row { gap: 0.8rem; }

    .section-header { flex-direction: column; gap: 0.5rem; }

    .footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
    .footer-nav { gap: 1.2rem; flex-wrap: wrap; }

    .pd-variants { gap: 0.5rem; }
    .pd-variant-btn img { width: 52px; height: 52px; }
}

@media (max-width: 480px) {
    .container { padding: 0 0.85rem; }
    .logo img { height: 36px; }
    .header--transparent .logo img { height: 44px; }
    .header--transparent.scrolled .logo img { height: 36px; }
    .product-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .product-image { height: 245px; }
    .home-hero h1 { font-size: 2rem; }
    .pagination { gap: 0.3rem; }
    .page-btn { min-width: 36px; height: 36px; font-size: 0.8rem; }
}

@media (max-width: 360px) {
    .product-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .product-image { height: 280px; }
    .product-card { border-radius: 14px; }
    .product-name { font-size: 0.92rem; }
    .product-meta .stock-code { font-size: 0.68rem; }
}

/* ── Ürün Detay Sayfası — Mobil Düzeni ────────────────────────────────── */
@media (max-width: 767px) {
    /* Görsel ile teknik özellikler arası boşluk */
    .pd-layout { gap: 1rem; }
    .pd-info-section  { padding: 0.75rem 1rem 1.5rem; }
    .pd-bottom-row    { padding: 1.25rem 1rem 2.5rem; gap: 1.5rem; }
    .pd-rv-outer      { padding: 2rem 1rem; }

    /* Featured image — daha az yer alsın */
    .pd-featured-wrap { border-radius: 12px; }

    /* Specs başlık küçük kalsın ama nefes alsın */
    .specs-title  { font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 0.85rem; }
    .spec-label   { font-size: 0.65rem; }
    .spec-val     { font-size: 0.88rem; }
    .spec-item    { padding: 0.65rem 0.75rem 0.65rem 0; }
    .spec-item:nth-child(even) { padding-left: 0.85rem; }

    /* Ürün açıklama metni */
    .pd-about-text { font-size: 0.9rem; line-height: 1.65; margin-top: 1.25rem; }

    /* Floating widget ürün sayfasında gizle — CTA block zaten mevcut */
    #pdCf { display: none !important; }

    /* Benzer ürünler tek sütun */
    .product-grid--4 { grid-template-columns: 1fr; }
    .pd-similar-section .product-image { height: 260px; }

    /* CTA block mobilde ortalı */
    .pd-cta-block { border-radius: 14px; align-items: center; text-align: center; }
    .pd-cta-header { justify-content: center; }
    .pd-cta-desc { text-align: center; }
    .pd-cta-eyebrow { font-size: 0.7rem; }

    /* 2×2 grid: dikey kart düzeni — icon üstte, metin altta */
    .pd-cta-channels--grid { gap: 0.5rem; }
    .pd-cta-channels--grid .pd-cta-channel {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.5rem;
        padding: 1rem 0.5rem;
        min-height: 96px;
    }
    .pd-cta-channels--grid .pd-cta-ch-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    .pd-cta-channels--grid .pd-cta-ch-body {
        align-items: center;
        gap: 0.15rem;
    }
    .pd-cta-channels--grid .pd-cta-ch-body strong {
        font-size: 0.82rem;
        white-space: nowrap;
    }
    .pd-cta-channels--grid .pd-cta-ch-body span {
        font-size: 0.68rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    /* Son ürünler başlık */
    .pd-rv-title { font-size: 1.2rem; }

    /* Renk şeridi container padding */
    .pd-color-bar { padding-bottom: 0.75rem; }
}

/* ═══════════════════════════════════════════
   HERO TOP VIGNETTE
═══════════════════════════════════════════ */
.hero-top-vignette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%);
    z-index: 999;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* ═══════════════════════════════════════════
   TRANSPARENT HEADER
═══════════════════════════════════════════ */
#site-header {
    transition: padding 0.35s, background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}

#site-header.header--transparent {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none;
}

#site-header.header--transparent.scrolled {
    background: rgba(10,10,10,0.8) !important;
    border-bottom-color: var(--glass-border) !important;
    backdrop-filter: blur(10px) !important;
    padding: 1.1rem 0;
}

#site-header.scrolled:not(.header--transparent) {
    padding: 1.1rem 0;
}

/* ═══════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════ */
.hero-slider {
    position: relative;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    background: #000;
}

.slider-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
    will-change: opacity;
}
.slider-slide.active { opacity: 1; }
.slider-slide.active .slider-content {
    animation: heroFadeUp 0.9s 0.4s ease both;
}

.slider-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.45) 40%,
        rgba(0,0,0,0.78) 100%
    );
}

.slider-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 2rem;
    z-index: 5;
}

.slider-eyebrow {
    font-size: 0.68rem;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--accent-color);
    margin-bottom: 1.4rem;
    display: block;
}

.slider-content h1 {
    font-size: clamp(2.6rem, 7vw, 6rem);
    color: #fff;
    letter-spacing: -2px;
    line-height: 1.05;
    margin-bottom: 1.2rem;
    font-style: italic;
    text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

.slider-content p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.72);
    margin-bottom: 2.5rem;
    letter-spacing: 0.3px;
    max-width: 500px;
}

/* Prev / Next buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.slider-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
    transform: translateY(-50%) scale(1.1);
}
.slider-prev { left: 2.5rem; }
.slider-next { right: 2.5rem; }

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 2.8rem;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    z-index: 10;
}
.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.35s;
}
.slider-dot.active {
    background: var(--accent-color);
    width: 28px;
    border-radius: 4px;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2.6rem;
    right: 3rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    animation: indicatorBounce 2.2s ease-in-out infinite;
}
.scroll-indicator svg {
    width: 22px;
    height: 22px;
    stroke: rgba(255,255,255,0.35);
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes indicatorBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(10px); }
}

/* ═══════════════════════════════════════════
   METRİK BANT
═══════════════════════════════════════════ */
.home-metrics {
    background: #0a0a0c;
    border-top: 1px solid rgba(197,160,89,0.18);
    border-bottom: 1px solid rgba(197,160,89,0.08);
    padding: 0;
    overflow: hidden;
}
.home-metrics-inner {
    display: flex;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.home-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    gap: 0;
    position: relative;
    transition: background 0.4s;
}
.home-metric:hover { background: rgba(197,160,89,0.04); }
.hm-sep {
    width: 1px;
    background: rgba(197,160,89,0.12);
    margin: 2rem 0;
    flex-shrink: 0;
}
.hm-num {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 400;
    color: #c5a059;
    line-height: 1;
    letter-spacing: -1px;
    transition: color 0.3s;
}
.hm-num--text {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    letter-spacing: 0;
    font-style: italic;
}
.home-metric:hover .hm-num { color: #e8d5a0; }
.hm-line {
    display: block;
    width: 24px;
    height: 1px;
    background: rgba(197,160,89,0.35);
    margin: 1rem auto 0.9rem;
    transition: width 0.4s, background 0.3s;
}
.home-metric:hover .hm-line { width: 40px; background: rgba(197,160,89,0.7); }
.hm-label {
    display: block;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.3);
    text-align: center;
    transition: color 0.3s;
}
.home-metric:hover .hm-label { color: rgba(255,255,255,0.55); }

@media (max-width: 700px) {
    .home-metrics-inner { flex-wrap: wrap; padding: 0; }
    .home-metric { flex: 0 0 50%; padding: 2.5rem 1rem; border-right: 1px solid rgba(197,160,89,0.1); }
    .home-metric:nth-child(4n) { border-right: none; }
    .hm-sep { display: none; }
}

/* ═══════════════════════════════════════════
   SECTION EYEBROW
═══════════════════════════════════════════ */
.section-eyebrow {
    display: block;
    font-size: 0.64rem;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--accent-color);
    margin-bottom: 0.6rem;
}

/* ═══════════════════════════════════════════
   CAT-CARD — overlay redesign
═══════════════════════════════════════════ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.cat-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
    display: block;
}
.cat-card:hover {
    border-color: rgba(197,160,89,0.5);
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(0,0,0,0.55);
}

.cat-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}
.cat-card:hover .cat-card-img img { transform: scale(1.08); }

.cat-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #1a1a1a 0%, #111 100%);
}

.cat-card-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 50%, transparent 100%);
    padding: 3.5rem 1.4rem 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.cat-card-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}

.cat-card-info span {
    font-size: 0.7rem;
    color: var(--accent-color);
    background: rgba(197,160,89,0.12);
    border: 1px solid rgba(197,160,89,0.3);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* ═══════════════════════════════════════════
   FEATURES SECTION
═══════════════════════════════════════════ */
.features-section {
    background: linear-gradient(180deg, #0f0f0f 0%, #0d0d0d 100%);
}

.features-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.features-header .section-title { margin-top: 0.2rem; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.8rem;
}

.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.feature-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: 0;
    transition: opacity 0.4s;
}
.feature-card:hover {
    border-color: rgba(197,160,89,0.25);
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.feature-card:hover::after { opacity: 1; }

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
}
.feature-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent-color);
}

.feature-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: #fff;
    letter-spacing: -0.3px;
}
.feature-card p {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.75;
}

/* ═══════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════ */
.cta-banner {
    background: linear-gradient(135deg, #0f0e0b 0%, #181610 50%, #0f0e0b 100%);
    border-top: 1px solid rgba(197,160,89,0.12);
    border-bottom: 1px solid rgba(197,160,89,0.12);
    padding: 7rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(197,160,89,0.07) 0%, transparent 65%);
    pointer-events: none;
}

.cta-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}
.cta-banner-inner .section-eyebrow { margin-bottom: 1.2rem; }
.cta-banner h2 {
    font-size: clamp(1.9rem, 4.5vw, 3.2rem);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    color: #fff;
}
.cta-banner p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 2.8rem;
    line-height: 1.6;
}

.btn-large {
    padding: 1.15rem 3.2rem;
    font-size: 0.82rem;
    letter-spacing: 3px;
}

.btn-outline {
    display: inline-block;
    border: 1px solid rgba(197,160,89,0.4);
    color: var(--accent-color);
    background: transparent;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.1rem 2.5rem;
    border-radius: 4px;
    transition: var(--transition);
}
.btn-outline:hover {
    border-color: var(--accent-color);
    background: rgba(197,160,89,0.08);
}

.cta-actions {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════ */
.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    padding: 5rem 0;
}

.about-story-text .section-eyebrow { margin-bottom: 0.8rem; }
.about-story-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 1.6rem;
}
.about-story-text p {
    color: var(--text-muted);
    line-height: 1.85;
    margin-bottom: 1.1rem;
    font-size: 0.94rem;
}

.about-img-wrap {
    position: relative;
    border-radius: 16px;
    overflow: visible;
}
.about-img-wrap img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}
.about-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--card-bg) 0%, #1c1c1c 100%);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    opacity: 0.15;
}
.about-img-badge {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    background: var(--accent-color);
    color: #000;
    padding: 1.2rem 1.6rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(197,160,89,0.3);
}
.about-img-badge-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.about-img-badge-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-top: 0.2rem;
}

/* About values */
.about-values { padding: 5rem 0; background: #0d0d0d; }
.about-values-header { text-align: center; margin-bottom: 3rem; }
.about-values-header .section-title { margin-top: 0.3rem; }

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.value-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 2rem;
    transition: var(--transition);
}
.value-card:hover {
    border-color: rgba(197,160,89,0.3);
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.4);
}

.value-num {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--accent-color);
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 1rem;
}
.value-card h3 {
    font-size: 1rem;
    margin-bottom: 0.65rem;
    color: #fff;
}
.value-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.75;
}

/* About numbers strip */
.about-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.about-number-item {
    text-align: center;
    padding: 3rem 3.5rem;
    flex: 1;
    min-width: 180px;
}
.about-number {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: var(--accent-color);
    line-height: 1;
    letter-spacing: -1px;
}
.about-number-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.about-number-divider {
    width: 1px;
    height: 60px;
    background: var(--glass-border);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════ */
.contact-wrap { padding: 3.5rem 0 6rem; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 4rem;
    align-items: start;
    margin-top: 2rem;
}

.contact-info-col { }
.contact-info-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -0.5px;
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
}
.contact-intro {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.75;
}

.contact-info-list { margin-top: 2rem; }
.contact-info-item {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--glass-border);
}
.contact-info-item:first-child { border-top: 1px solid var(--glass-border); }

.ci-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ci-icon svg { width: 18px; height: 18px; stroke: var(--accent-color); }

.ci-text { flex: 1; }
.ci-text strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-weight: 400;
}
.ci-text span,
.ci-text a {
    color: var(--text-color);
    font-size: 0.92rem;
    text-decoration: none;
    line-height: 1.4;
}
.ci-text a:hover { color: var(--accent-color); }

.contact-quick { margin-top: 2.5rem; }
.contact-quick-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
}
.contact-quick-links { display: flex; gap: 0.8rem; }
.contact-quick-btn {
    display: inline-block;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    padding: 0.55rem 1.2rem;
    border-radius: 4px;
    font-size: 0.8rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}
.contact-quick-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* Contact form */
.contact-form-wrap {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2.8rem;
}
.contact-form-wrap h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.3px;
}
.contact-form-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group { margin-bottom: 1.4rem; }
.form-group label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
    font-family: 'Inter', sans-serif;
}

.form-input,
.form-textarea {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.25s, background 0.25s;
}
.form-input:focus,
.form-textarea:focus {
    border-color: var(--accent-color);
    background: rgba(197,160,89,0.03);
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}
.form-textarea { resize: vertical; min-height: 130px; }

.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1rem;
    gap: 0.8rem;
}
.form-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(197,160,89,0.1);
    border: 1px solid rgba(197,160,89,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.form-success-icon svg { width: 30px; height: 30px; stroke: var(--accent-color); }
.form-success h4 { font-size: 1.3rem; color: #fff; }
.form-success p  { font-size: 0.88rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════
   RESPONSIVE — YENİ ELEMENTLER
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .about-story { grid-template-columns: 1fr; gap: 3rem; padding: 3.5rem 0; }
    .about-img-badge { left: 1rem; bottom: -1rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-number-item { padding: 2rem 2rem; }
}

@media (max-width: 768px) {
    /* Slider */
    .slider-prev { left: 1rem; }
    .slider-next { right: 1rem; }
    .slider-btn  { width: 42px; height: 42px; font-size: 1.4rem; }
    .slider-content h1 { letter-spacing: -1px; }
    .scroll-indicator { display: none; }
    .slider-dots { bottom: 1.8rem; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.12); }
    .stat-item:nth-child(odd)  { border-right: 1px solid rgba(0,0,0,0.12); }
    .stat-item:nth-child(3),
    .stat-item:nth-child(4)    { border-bottom: none; }

    /* Cat grid */
    .cat-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }

    /* Features */
    .features-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }

    /* CTA */
    .cta-banner { padding: 5rem 1.5rem; }
    .cta-actions { flex-direction: column; align-items: center; }

    /* About */
    .about-numbers { flex-direction: column; gap: 0; }
    .about-number-divider { width: 60px; height: 1px; }
    .about-number-item { padding: 1.5rem 2rem; }
    .values-grid { grid-template-columns: 1fr 1fr; }

    /* Contact */
    .contact-form-wrap { padding: 1.8rem; }
    .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero-slider { min-height: 100svh; }
    .slider-content h1 { font-size: 2.2rem; letter-spacing: -0.5px; }
    .slider-content p { font-size: 0.9rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .about-img-badge { display: none; }
    .cta-banner h2 { font-size: 1.7rem; }
}

/* ─────────────────────────────────────────
   PRODUCT COLORS PREVIEW
───────────────────────────────────────── */
.product-colors-preview {
    display: flex;
    gap: 0.45rem;
    padding: 0;
    margin-bottom: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
}

.pc-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.pc-circle:hover {
    border-color: var(--accent-color);
}

.pc-circle-empty {
    background: #2a2a2a;
}

.pc-more {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.82);
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 28px;
    border-radius: 14px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    user-select: none;
    cursor: pointer;
}

.pc-more:hover {
    background: rgba(255,255,255,0.28);
    color: #fff;
    border-color: rgba(255,255,255,0.45);
}

/* ── Giriş/Slider Kapak Slaytı Yazı Simetrisi ── */
#SR7_1_1-6-19,
#SR7_1_1-6-20 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.8rem, 4.5vw, 3.2rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    font-style: normal !important;
    line-height: 1.2 !important;
}

#SR7_1_1-6-19 {
    box-sizing: border-box !important;
    padding-right: 2.5vw !important;
}


/* ═══════════════════════════════════════════════════════════
   ANA SAYFA — YENİ TASARIM
   ═══════════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── CİNEMATİC HERO ── */
.home-hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: #000;
    padding: 0;
    text-align: left;
    justify-content: flex-start;
}
.home-hero::before { display: none; }

.home-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: heroKenBurns 14s ease-out forwards;
    will-change: transform;
}

/* Slider slides */
.home-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
    will-change: opacity, transform;
    z-index: 0;
}
.home-hero-slide.active {
    opacity: 1;
}
.home-hero-slide--img.active {
    animation: heroKenBurns 16s ease-out forwards;
}
.home-hero-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes heroKenBurns {
    from { transform: scale(1.08); }
    to   { transform: scale(1.00); }
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.25) 0%,
            rgba(0,0,0,0.05) 25%,
            rgba(0,0,0,0.50) 58%,
            rgba(0,0,0,0.92) 82%,
            rgba(0,0,0,1.00) 100%);
    z-index: 1;
}

.home-hero-content {
    position: relative;
    z-index: 3;
    padding: 0 5% 7.5rem;
    max-width: 760px;
}

.home-hero-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 7px;
    margin-bottom: 1.4rem;
    display: block;
}

.home-hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3.2rem, 7.5vw, 7rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -2px;
    color: #fff;
    margin: 0 0 1.3rem;
}

.home-hero-content h1 em {
    font-style: italic;
    color: var(--accent-color);
    display: inline-block;
    transition: opacity 0.42s ease, transform 0.42s ease;
}
.home-hero-content h1 em.hero-rot-out {
    opacity: 0;
    transform: translateY(12px);
}

.home-hero-content > p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.18rem;
    color: #fff;
    margin-bottom: 2.6rem;
    line-height: 1.85;
    font-weight: 300;
}

.home-hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Marquee */
.home-hero-marquee-wrap {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    z-index: 4;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    padding: 0.9rem 0;
}
.home-hero-marquee {
    display: flex;
    width: max-content;
    animation: marqueeScroll 50s linear infinite;
    white-space: nowrap;
}
.home-hero-marquee span {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    padding-right: 0;
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Scroll indicator */
.home-hero-scroll {
    position: absolute;
    bottom: 4.5rem;
    right: 3.5rem;
    z-index: 4;
    color: rgba(255,255,255,0.3);
    animation: indicatorBounce 2.2s ease-in-out infinite;
}


/* ── 3 KATEGORİ SPLIT PANEL ── */
.home-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 72vh;
    min-height: 520px;
}
.home-cat-panel {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    border-right: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
}
.home-cat-panel:last-child { border-right: none; }

.home-cat-panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
    will-change: transform;
}
.home-cat-panel:hover .home-cat-panel-bg {
    transform: scale(1.06);
}

.home-cat-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.38) 45%,
        rgba(0,0,0,0.18) 100%
    );
    transition: background 0.5s ease;
    z-index: 1;
}
.home-cat-panel:hover .home-cat-panel-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.92) 0%,
        rgba(0,0,0,0.55) 50%,
        rgba(0,0,0,0.28) 100%
    );
}

.home-cat-panel-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 2.5rem 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.home-cat-panel-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.55rem, 2.4vw, 2.4rem);
    font-weight: 400;
    font-style: italic;
    color: #fff;
    line-height: 1.15;
    margin: 0;
    transform: translateY(6px);
    transition: transform 0.5s cubic-bezier(0.165,0.84,0.44,1);
}
.home-cat-panel:hover .home-cat-panel-content h2 {
    transform: translateY(0);
}
.home-cat-panel-count {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    color: var(--accent-color);
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.38s ease 0.08s, transform 0.38s ease 0.08s;
}
.home-cat-panel:hover .home-cat-panel-count {
    opacity: 1;
    transform: translateY(0);
}
.home-cat-panel-link {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.38s ease 0.14s, transform 0.38s ease 0.14s;
}
.home-cat-panel:hover .home-cat-panel-link {
    opacity: 1;
    transform: translateY(0);
}

/* ── BRAND STORY ── */
.home-brand { background: var(--bg-color); }

.home-brand-inner {
    display: grid;
    grid-template-columns: 42fr 58fr;
    gap: 5rem;
    align-items: center;
}
.home-brand-img-col {
    position: relative;
}
.home-brand-img-wrap {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border-left: 3px solid var(--accent-color);
    box-shadow: 0 36px 90px rgba(0,0,0,0.6);
}
.home-brand-img-wrap img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.home-brand-img-wrap:hover img {
    transform: scale(1.03);
}
.home-brand-subtitle {
    font-size: 1.02rem;
    color: var(--text-muted);
    line-height: 1.88;
    margin: 1rem 0 2.5rem;
    font-weight: 300;
}
.home-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.home-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.home-feature-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.home-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(197,160,89,0.07);
    border: 1px solid rgba(197,160,89,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.home-feature-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent-color);
}
.home-feature-text h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.97rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.3rem;
    letter-spacing: -0.1px;
}
.home-feature-text p {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.78;
    margin: 0;
}

/* ── ANA SAYFA RESPONSİVE ── */
@media (max-width: 1024px) {
    .home-hero-content { padding-bottom: 6.5rem; }
    .home-brand-inner { grid-template-columns: 1fr; gap: 3rem; }
    .home-brand-img-wrap { max-width: 540px; margin: 0 auto; }
    .home-brand-img-wrap img { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
    .home-hero-content { padding: 0 1.5rem 7rem; }
    .home-hero-content h1 { font-size: clamp(2.4rem, 9vw, 4rem); letter-spacing: -1px; }
    .home-cats {
        grid-template-columns: 1fr;
        height: auto;
    }
    .home-cat-panel {
        height: 52vw;
        min-height: 260px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .home-cat-panel:last-child { border-bottom: none; }
    .home-cat-panel-count,
    .home-cat-panel-link {
        opacity: 1;
        transform: translateY(0);
    }
    .home-hero-scroll { display: none; }
    .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .home-hero-content h1 { font-size: 2.4rem; }
    .home-hero-ctas { flex-direction: column; align-items: flex-start; }
    .home-brand-inner { gap: 2rem; }
    .home-cat-panel { height: 65vw; }
    .product-grid--4 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .pd-similar-section .product-grid--4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   KOLEKSİYON VİTRİNİ
   ═══════════════════════════════════════════════ */

.home-showcase {
    position: relative;
    padding: 5rem 0 7rem;
    background: #000;
    overflow: hidden;
}
.home-showcase-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    filter: brightness(0.08) saturate(0.3);
    transition: transform 12s ease-out;
}
.home-showcase-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%,  rgba(197,160,89,0.06) 0%, transparent 65%),
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.95) 100%);
}
.home-showcase-inner { position: relative; z-index: 1; }

.home-showcase-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 3rem;
}
.home-showcase-head h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.5px;
    margin: 0.5rem 0 1rem;
}
.home-showcase-head p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.75;
}

/* ── Klasör Grid ── */
.home-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 0 2.5rem;
}

/* ── Klasör Kartı ── */
.home-showcase-folder {
    position: relative;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s;
    container-type: inline-size;
}
.home-showcase-folder::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(197,160,89,0.2), rgba(197,160,89,0.7), rgba(197,160,89,0.2));
    z-index: 3;
    transition: background 0.4s;
}
.home-showcase-folder:hover {
    transform: translateY(-6px);
    border-color: rgba(197,160,89,0.22);
    box-shadow:
        0 32px 80px rgba(0,0,0,0.65),
        0 0 0 1px rgba(197,160,89,0.1);
}
.home-showcase-folder:hover::before {
    background: linear-gradient(90deg, rgba(197,160,89,0.5), #c5a059, rgba(197,160,89,0.5));
}

/* ── Klasör Başlığı ── */
.home-showcase-folder-head {
    padding: 1.6rem 1.8rem 1.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.hsf-cat-link {
    text-decoration: none;
    flex: 1;
    min-width: 0;
}
.hsf-cat-link h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 2.1vw, 1.9rem);
    font-style: italic;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    transition: color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hsf-cat-link:hover h3,
.home-showcase-folder:hover .hsf-cat-link h3 { color: #e8d5a0; }

.hsf-head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}
.hsf-meta {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.05em;
}
.hsf-see-all {
    font-size: 0.78rem;
    color: rgba(197,160,89,0.65);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.25s;
}
.hsf-see-all:hover { color: #c5a059; }

/* ── Ürün Carousel ── */
.hsi-scroll-wrap {
    overflow: hidden;
    background: #0a0a0a;
    line-height: 0;
}
.hsi-strip {
    display: flex;
    gap: 2px;
    width: max-content;
    animation: hsiScroll 22s linear infinite;
}
.home-showcase-folder:hover .hsi-strip {
    animation-play-state: paused;
}
@keyframes hsiScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hsi {
    display: block;
    flex: 0 0 auto;
    width: calc(100cqw / 3);
    text-decoration: none;
    background: #0d0d0d;
    line-height: normal;
}
.hsi-img {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
.hsi-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hsi:hover .hsi-img img { transform: scale(1.1); }
.hsi-name {
    display: block;
    padding: 0.38rem 0.5rem;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
    background: #0d0d0d;
    border-top: 1px solid rgba(255,255,255,0.05);
    transition: color 0.25s;
    line-height: 1.6;
}
.hsi:hover .hsi-name { color: rgba(255,255,255,0.75); }

/* ── Klasör Butonu ── */
.home-showcase-folder-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.8rem;
    background: rgba(197,160,89,0.05);
    border-top: 1px solid rgba(197,160,89,0.12);
    color: #c5a059;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: background 0.3s;
}
.home-showcase-folder-btn svg {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}
.home-showcase-folder-btn:hover,
.home-showcase-folder:hover .home-showcase-folder-btn {
    background: rgba(197,160,89,0.1);
}
.home-showcase-folder:hover .home-showcase-folder-btn svg { transform: translateX(5px); }

/* ═══════════════════════════════════════════════
   KULLANIM ALANLARI
   ═══════════════════════════════════════════════ */

.home-usage {
    position: relative;
    padding: 4.5rem 0 6rem;
    background: #000;
    overflow: hidden;
}

/* Üst kenar ayırıcı çizgi */
.home-usage::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(197,160,89,0.4) 25%, rgba(197,160,89,0.75) 50%, rgba(197,160,89,0.4) 75%, transparent 100%);
    z-index: 3;
}

/* A/B crossfade arka plan katmanları */
.home-usage-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.home-usage-scene-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 1;
}
.home-usage-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 3rem;
}
.home-usage-head p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.7;
    margin-top: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.home-usage-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 250px;
    text-decoration: none;
    display: block;
    background: #16161a;
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.35s, box-shadow 0.35s;
}
.home-usage-card:hover {
    border-color: rgba(197,160,89,0.22);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.home-usage-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-usage-card:hover .home-usage-card-bg { transform: scale(1.07); }

.home-usage-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.92) 100%
    );
    z-index: 1;
}

.home-usage-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #c5a059 50%, transparent 100%);
    z-index: 2;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}
.home-usage-card:hover::after { transform: scaleX(1); }

.home-usage-card-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.4rem 1.5rem;
}

.home-usage-num {
    position: absolute;
    top: 1.1rem;
    right: 1.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(197,160,89,0.5);
}

.home-usage-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0.45rem;
}

.home-usage-card p {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.52);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.7rem;
}

.home-usage-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: #c5a059;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: gap 0.25s;
}
.home-usage-card:hover .home-usage-link { gap: 0.65rem; }

@media (max-width: 900px) {
    .home-showcase-grid { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 1rem; }
    .home-showcase-grid .home-showcase-folder:last-child { display: none; }
    .home-usage-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .home-usage-card { height: 200px; }
}
@media (max-width: 660px) {
    .home-showcase-grid { grid-template-columns: 1fr; padding: 0 0.75rem; }
    .home-showcase-grid .home-showcase-folder:last-child { display: block; }
    .home-usage-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .home-usage-card { height: 190px; }
    .home-usage-card-inner { padding: 1.1rem 1.2rem; }
}
@media (max-width: 400px) {
    .home-usage-grid { grid-template-columns: 1fr 1fr; }
    .home-usage-card { height: 170px; }
}

/* ═══════════════════════════════════════════════
   MÜZİK ÇALAR
   ═══════════════════════════════════════════════ */

.music-player {
    position: fixed;
    bottom: 1.4rem;
    right: 1.4rem;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    pointer-events: none;
}

/* ── Pill bar ── */
.music-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(8,8,8,0.9);
    border: 1px solid rgba(197,160,89,0.2);
    border-radius: 40px;
    padding: 0.32rem 0.52rem 0.32rem 0.42rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: all;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    max-width: 215px;
    min-width: 155px;
    cursor: pointer;
    transition: box-shadow 0.5s ease, border-color 0.4s ease, background 0.2s ease;
}
.music-pill:hover {
    background: rgba(18,13,5,0.94);
    border-color: rgba(197,160,89,0.35);
}
.music-pill.playing {
    border-color: rgba(197,160,89,0.5);
    animation: pillGlow 2.5s ease-in-out infinite;
}
@keyframes pillGlow {
    0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 16px rgba(197,160,89,0.18), 0 0 40px rgba(197,160,89,0.07); }
    50%       { box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 26px rgba(197,160,89,0.34), 0 0 60px rgba(197,160,89,0.14); }
}

.music-pill-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(197,160,89,0.12);
    border: none; cursor: pointer;
    color: #c5a059;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.music-pill-icon:hover,
.music-pill-icon.active { background: rgba(197,160,89,0.25); }

.music-pill-info {
    flex: 1;
    overflow: hidden;
}
.music-pill-marquee {
    overflow: hidden;
    white-space: nowrap;
}
.music-pill-title {
    display: inline-block;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
}
.music-pill-title.scrolling {
    animation: musicMarquee 12s linear infinite;
}
@keyframes musicMarquee {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(calc(-100% + 100px)); }
    60%  { transform: translateX(calc(-100% + 100px)); }
    100% { transform: translateX(0); }
}

.music-pill-play {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #c5a059;
    border: none; cursor: pointer;
    color: #000;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.15s;
}
.music-pill-play:hover { background: #d4b06a; transform: scale(1.08); }

/* ── Expandable panel ── */
.music-panel {
    background: rgba(10,10,10,0.96);
    border: 1px solid rgba(197,160,89,0.18);
    border-radius: 16px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 12px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03);
    width: 270px;
    pointer-events: all;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease, transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.music-panel.open {
    max-height: min(90vh, 820px);
    opacity: 1;
    transform: translateY(0) scale(1);
}

.music-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.music-panel-label {
    font-size: 0.66rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(197,160,89,0.85);
    font-weight: 600;
}
.music-panel-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.25);
    padding: 2px;
    transition: color 0.18s;
    display: flex; align-items: center; justify-content: center;
}
.music-panel-close:hover { color: #fff; }

/* ── Vinyl disk ── */
.music-vinyl {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0.8rem auto 0.9rem;
    flex-shrink: 0;
    position: relative;
    background: radial-gradient(circle,
        #ffe085 0%, #d4a84b 5%, #c5a059 9%, #9e7c30 11%,
        #080808 11.6%,
        #181818 13%, #0e0e0e 15%,
        #191919 17%, #0e0e0e 19%,
        #191919 21%, #0f0f0f 23%,
        #1a1a1a 25%, #0f0f0f 27%,
        #1a1a1a 29%, #0f0f0f 31%,
        #1b1b1b 33%, #101010 35%,
        #1c1c1c 37%, #111 39%,
        #1c1c1c 41%, #111 43%,
        #1d1d1d 45%, #121212 47%,
        #1e1e1e 49%, #131313 51%
    );
    box-shadow:
        0 0 0 2px rgba(197,160,89,0.35),
        0 8px 32px rgba(0,0,0,0.75),
        inset 0 2px 0 rgba(255,255,255,0.07);
    animation: vinylSpin 8s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}
.music-vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #1e1810, #0d0b06);
    border: 1.5px solid rgba(197,160,89,0.5);
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.7),
        0 0 0 3px rgba(197,160,89,0.12),
        inset 0 1px 0 rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.music-vinyl-cf {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #c5a059;
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow: 0 0 8px rgba(197,160,89,0.4);
}

.music-vinyl::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255,255,255,0.00)  0deg,
        rgba(255,255,255,0.11) 40deg,
        rgba(255,255,255,0.00) 80deg,
        rgba(255,255,255,0.07) 130deg,
        rgba(255,255,255,0.00) 170deg,
        rgba(255,255,255,0.13) 210deg,
        rgba(255,255,255,0.00) 250deg,
        rgba(255,255,255,0.06) 300deg,
        rgba(255,255,255,0.00) 360deg
    );
    pointer-events: none;
    z-index: 1;
}
.music-vinyl::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at 68% 28%,
        rgba(255,255,255,0.28) 0%,
        rgba(255,255,255,0.10) 20%,
        transparent 55%
    );
    pointer-events: none;
    z-index: 2;
}
.music-vinyl.spinning {
    animation-play-state: running;
}
@keyframes vinylSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Now playing */
.music-panel-now {
    padding: 0 1rem 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}
.music-now-title {
    font-size: 0.83rem;
    color: #e8dfc8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.8rem;
    letter-spacing: 0.01em;
}

/* Progress */
.music-progress-wrap {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 0.35rem;
    position: relative;
    transition: height 0.2s ease;
    user-select: none;
}
.music-progress-wrap:hover { height: 6px; }
.music-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #c5a059, #e8c87a);
    border-radius: 3px;
    width: 0%;
    transition: width 0.4s linear;
    pointer-events: none;
    position: relative;
    box-shadow: 0 0 10px rgba(197,160,89,0.45);
}
.music-progress-thumb {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #e0c070;
    box-shadow: 0 0 8px rgba(197,160,89,0.7);
    transition: transform 0.18s ease;
    pointer-events: none;
}
.music-progress-wrap:hover .music-progress-thumb { transform: translateY(-50%) scale(1); }

/* Time display */
.music-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.music-panel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}
.music-ctrl-btn {
    background: rgba(255,255,255,0.06);
    border: none; cursor: pointer;
    color: rgba(255,255,255,0.55);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s, transform 0.15s;
}
.music-ctrl-btn:hover { background: rgba(255,255,255,0.12); color: #fff; transform: scale(1.07); }
.music-ctrl-play {
    background: linear-gradient(135deg, #d4b06a, #c5a059);
    color: #1a1200;
    width: 42px; height: 42px;
    box-shadow: 0 4px 16px rgba(197,160,89,0.4);
}
.music-ctrl-play:hover { background: linear-gradient(135deg, #e0bd78, #d4b06a); transform: scale(1.08); }

/* Volume */
.music-volume {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.music-vol-icon {
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.music-vol-slider {
    --vol: 100%;
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, rgba(197,160,89,0.7) var(--vol), rgba(255,255,255,0.1) var(--vol));
    outline: none;
    cursor: pointer;
}
.music-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #c5a059;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(197,160,89,0.55);
    transition: transform 0.15s;
}
.music-vol-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.music-vol-slider::-moz-range-thumb {
    width: 13px; height: 13px;
    border: none; border-radius: 50%;
    background: #c5a059;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(197,160,89,0.55);
}
.music-vol-slider::-moz-range-track {
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

/* Playlist label */
.music-playlist-label {
    font-size: 0.6rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding: 0.65rem 1rem 0.35rem;
    font-weight: 600;
}

/* Playlist */
.music-playlist {
    max-height: 260px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    padding: 0.2rem 0;
}
.music-playlist::-webkit-scrollbar { width: 6px; }
.music-playlist::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.music-playlist::-webkit-scrollbar-thumb { background: rgba(197,160,89,0.5); border-radius: 3px; }
.music-playlist::-webkit-scrollbar-thumb:hover { background: rgba(197,160,89,0.8); }

.music-track-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.55rem 1rem;
    cursor: pointer;
    color: rgba(255,255,255,0.48);
    font-size: 0.86rem;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    font-family: 'Poppins', sans-serif;
}
.music-track-btn:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.music-track-btn.active { color: #c5a059; }

.mtr-num {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.22);
    width: 18px;
    flex-shrink: 0;
    text-align: right;
}
.music-track-btn.active .mtr-num { color: #c5a059; }

.mtr-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Animated wave */
.mtr-wave {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    flex-shrink: 0;
}
.mtr-wave span {
    display: block;
    width: 3px;
    background: #c5a059;
    border-radius: 1px;
    animation: mtrWave 0.9s ease-in-out infinite alternate;
}
.mtr-wave span:nth-child(2) { animation-delay: 0.2s; }
.mtr-wave span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mtrWave {
    from { height: 4px; }
    to   { height: 13px; }
}
.music-track-btn.playing .mtr-wave { display: flex; }
.music-track-btn.playing .mtr-num  { display: none; }

@media (max-width: 480px) {
    .music-player { bottom: 0.8rem; right: 0.8rem; }
    .music-pill { max-width: 180px; min-width: 140px; }
    .music-panel { width: 240px; }
}

/* ══════════════════════════════════════════════════
   HAKKIMIZDA — Redesigned
   ══════════════════════════════════════════════════ */

/* ── Scroll reveal ── */
.hk-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.82s cubic-bezier(0.22,1,0.36,1),
                transform 0.82s cubic-bezier(0.22,1,0.36,1);
}
.hk-reveal.hk-revealed { opacity: 1; transform: none; }

/* ── Shared eyebrow ── */
.hk-eyebrow {
    display: inline-block;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #c5a059;
    margin-bottom: 1rem;
}

/* ── Stats strip ── */
.hk-stats {
    background: rgba(12,12,12,0.97);
    border-top: 1px solid rgba(197,160,89,0.12);
    border-bottom: 1px solid rgba(197,160,89,0.12);
    padding: 2.4rem 0;
}
.hk-stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.hk-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    padding: 0.5rem 3.5rem;
}
.hk-stat-num {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    font-weight: 700;
    color: #c5a059;
    line-height: 1;
    letter-spacing: -0.02em;
}
.hk-stat-label {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
}
.hk-stat-sep {
    width: 1px;
    height: 38px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
}

/* ── Mission — full-width, efektli ── */
.hk-mission {
    position: relative;
    padding: 6rem 0 5rem;
    overflow: hidden;
    background: #030303;
    text-align: center;
}
/* Arkaplan doku fotoğrafı */
.hk-mission-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.07;
    filter: grayscale(100%);
    transform: scale(1.04);
}
/* Nokta grid desen */
.hk-mission::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(197,160,89,0.07) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}
/* Altın köşe süslemeleri */
.hk-mission-corner {
    position: absolute;
    width: 55px;
    height: 55px;
    pointer-events: none;
}
.hk-mission-corner--tl {
    top: 2.5rem; left: 2.5rem;
    border-top: 1px solid rgba(197,160,89,0.28);
    border-left: 1px solid rgba(197,160,89,0.28);
}
.hk-mission-corner--br {
    bottom: 2.5rem; right: 2.5rem;
    border-bottom: 1px solid rgba(197,160,89,0.28);
    border-right: 1px solid rgba(197,160,89,0.28);
}
.hk-mission .container { position: relative; z-index: 1; }
.hk-mission-top {
    max-width: 720px;
    margin: 0 auto 3.5rem;
}
.hk-mission-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 400;
    font-style: italic;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 0;
}
.hk-mission-heading em {
    font-style: normal;
    color: #c5a059;
}
/* Animasyonlu altın çizgi */
.hk-mission-bar {
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, transparent, #c5a059 40%, #c5a059 60%, transparent);
    margin: 1.8rem auto;
    transition: width 1.5s cubic-bezier(0.22,1,0.36,1);
}
.hk-mission-bar--on { width: 260px; }
.hk-mission-lead {
    font-size: clamp(0.97rem, 1.5vw, 1.08rem);
    color: rgba(255,255,255,0.52);
    line-height: 1.9;
}

/* ── Pillar kartları ── */
.hk-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    text-align: left;
}
.hk-pillar {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(197,160,89,0.1);
    border-radius: 10px;
    padding: 2.4rem 2rem;
    overflow: hidden;
    transition: background 0.4s, border-color 0.4s, transform 0.4s;
}
.hk-pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(197,160,89,0.06) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.4s;
}
.hk-pillar::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 0;
    background: linear-gradient(to bottom, #c5a059, rgba(197,160,89,0));
    transition: height 0.5s cubic-bezier(0.22,1,0.36,1);
}
.hk-pillar:hover { background: rgba(197,160,89,0.05); border-color: rgba(197,160,89,0.22); transform: translateY(-5px); }
.hk-pillar:hover::before { opacity: 1; }
.hk-pillar:hover::after { height: 100%; }
.hk-pillar-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: #c5a059;
    opacity: 0.7;
    margin-bottom: 1rem;
}
.hk-pillar h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.65rem;
}
.hk-pillar p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.82;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ── Story split ── */
.hk-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 68vh;
    background: #000;
    position: relative;
    z-index: 2;
    margin-top: calc(-5.5rem + 25px);
}
.hk-story-visual {
    overflow: hidden;
    position: relative;
}
.hk-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    min-height: 560px;
}
.hk-collage-cell {
    overflow: hidden;
    border: 3px solid #000;
}
.hk-collage-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.hk-collage-cell:hover img { transform: scale(1.07); }
.hk-story-placeholder {
    width: 100%;
    height: 100%;
    min-height: 560px;
    background: rgba(197,160,89,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hk-story-placeholder span {
    font-family: 'Poppins', sans-serif;
    font-size: 7rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(197,160,89,0.1);
}
.hk-story-body {
    padding: 6rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #000;
}
.hk-story-body h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.2rem, 3.5vw, 3.3rem);
    font-weight: 400;
    font-style: italic;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 1.8rem;
}
.hk-story-body p {
    font-size: 1.08rem;
    color: #fff;
    line-height: 1.9;
    margin-bottom: 1rem;
}
.hk-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c5a059;
    text-decoration: none;
    border-bottom: 1px solid rgba(197,160,89,0.28);
    padding-bottom: 0.35rem;
    transition: gap 0.25s, border-color 0.25s, color 0.25s;
}
.hk-link-btn:hover {
    color: #d4b06a;
    border-color: #c5a059;
    gap: 1rem;
}

/* ── Categories ── */
.hk-cats {
    padding: 7rem 0;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.hk-section-head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.hk-section-head h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0;
}
.hk-cats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.hk-cat-card {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 3/4;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.hk-cat-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
.hk-cat-bg--empty {
    background: rgba(197,160,89,0.04);
}
.hk-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
    transition: opacity 0.3s;
}
.hk-cat-card:hover .hk-cat-bg { transform: scale(1.07); }
.hk-cat-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.8rem;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.hk-cat-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
.hk-cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c5a059;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap;
}
.hk-cat-card:hover .hk-cat-cta {
    opacity: 1;
    transform: none;
}

/* ── Quote ── */
.hk-quote {
    padding: 9rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}
.hk-quote::before {
    content: '\201C';
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    font-size: clamp(10rem, 24vw, 22rem);
    color: rgba(197,160,89,0.04);
    pointer-events: none;
    line-height: 1;
}
.hk-quote-inner {
    position: relative;
    z-index: 1;
    max-width: 840px;
    margin: 0 auto;
}
.hk-quote-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    margin: 0 0 1.6rem;
    border: none;
    padding: 0;
}
.hk-quote-text strong {
    font-style: normal;
    font-weight: 700;
    color: #c5a059;
}
.hk-quote-attr {
    display: block;
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
}

/* ── CTA ── */
.hk-cta {
    padding: 8rem 0;
    text-align: center;
}
.hk-cta-inner {
    max-width: 580px;
    margin: 0 auto;
    padding: 0 2rem;
}
.hk-cta-inner h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.9rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0.8rem 0 2.2rem;
    line-height: 1.25;
}
.hk-cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .hk-pillars { grid-template-columns: 1fr; gap: 1.2rem; }
    .hk-mission { padding: 5rem 0 4rem; }
    .hk-mission-corner { display: none; }
    .hk-story { grid-template-columns: 1fr; }
    .hk-collage { min-height: 360px; height: 360px; }
    .hk-story-body { padding: 4rem 2rem; }
    .hk-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .hk-cat-card { aspect-ratio: 4/5; }
    .hk-cat-cta { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
    .hk-cats-grid { grid-template-columns: 1fr; }
    .hk-cat-card { aspect-ratio: 16/9; }
    .hk-story-body { padding: 3rem 1.5rem; }
    .hk-mission-bar--on { width: 160px; }
}

/* ══════════════════════════════════════════════════
   KOLEKSIYON (magaza.php) — Premium
   ══════════════════════════════════════════════════ */

/* Hero açıklama */
.mg-hero-desc {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    color: rgba(255,255,255,0.55);
    margin: 0.5rem 0 1.2rem;
}

/* ── Stats Bar ── */
.mg-stats-bar {
    position: relative;
    z-index: 3;
    background: rgba(10,10,10,0.95);
    border-bottom: 1px solid rgba(197,160,89,0.12);
}
.mg-stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.6rem 0;
    flex-wrap: wrap;
}
.mg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0 3rem;
}
.mg-stat-num {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #c5a059;
    line-height: 1;
    letter-spacing: -0.02em;
}
.mg-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.mg-stat-sep {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* ── Section Head ── */
.mg-cats-section {
    padding: 30px 0 4rem;
    background: #000;
}
.mg-section-head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.mg-section-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #c5a059;
    margin-bottom: 0.7rem;
}
.mg-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0 0 0.8rem;
}
.mg-section-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.45);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Category Grid ── */
.mg-cats-grid {
    display: grid;
    grid-template-columns: repeat(var(--col-count, 3), 1fr);
    gap: 2rem;
}
.mg-cat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease,
                border-color 0.3s ease, box-shadow 0.3s ease;
}
.mg-cat-card.mg-revealed {
    opacity: 1;
    transform: translateY(0);
}
.mg-cat-card:nth-child(2) { transition-delay: 0.1s; }
.mg-cat-card:nth-child(3) { transition-delay: 0.2s; }
.mg-cat-card:hover {
    border-color: rgba(197,160,89,0.22);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

/* ── Mosaic ── */
.mg-cat-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}
.mg-mosaic-cell {
    overflow: hidden;
    background: #111;
}
.mg-mosaic-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.mg-cat-mosaic:hover .mg-mosaic-cell img { transform: scale(1.06); }
.mg-mosaic-cell--empty { background: rgba(255,255,255,0.03); }
.mg-mosaic-cell--full {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
.mg-mosaic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 55%);
    pointer-events: none;
}

/* ── Card Body ── */
.mg-cat-body {
    padding: 1.4rem 1.6rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mg-cat-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.mg-cat-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}
.mg-cat-count {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.mg-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.22);
    border-radius: 8px;
    color: #c5a059;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.2s;
}
.mg-cat-btn svg { width: 13px; height: 13px; transition: transform 0.2s; }
.mg-cat-btn:hover {
    background: rgba(197,160,89,0.16);
    border-color: rgba(197,160,89,0.4);
    color: #d4b06a;
    transform: translateX(2px);
}
.mg-cat-btn:hover svg { transform: translateX(3px); }

/* ── Mini Strip ── */
.mg-cat-strip {
    display: flex;
    gap: 1px;
    background: rgba(255,255,255,0.04);
    padding: 0.9rem 1.2rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.mg-cat-strip::-webkit-scrollbar { display: none; }
.mg-strip-item {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.2s, transform 0.2s;
}
.mg-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mg-strip-item:hover {
    border-color: rgba(197,160,89,0.4);
    transform: scale(1.08);
}

/* ── CTA Band ── */
.mg-cta-band {
    background: linear-gradient(135deg, rgba(197,160,89,0.06) 0%, rgba(197,160,89,0.02) 100%);
    border-top: 1px solid rgba(197,160,89,0.1);
    border-bottom: 1px solid rgba(197,160,89,0.1);
    padding: 3.5rem 0;
}
.mg-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.mg-cta-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
}
.mg-cta-sub {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
}
.mg-cta-actions { display: flex; gap: 1rem; align-items: center; flex-shrink: 0; }
.mg-cta-secondary {
    padding: 0.75rem 1.6rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.22s, color 0.22s;
}
.mg-cta-secondary:hover { border-color: rgba(255,255,255,0.35); color: #fff; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .mg-cats-grid { grid-template-columns: 1fr; --col-count: 1; }
    .mg-stat { padding: 0 1.5rem; }
    .mg-cta-inner { flex-direction: column; text-align: center; }
    .mg-cta-actions { justify-content: center; }
}
@media (max-width: 600px) {
    .mg-stats-inner { gap: 0.5rem; }
    .mg-stat { padding: 0.5rem 1rem; }
    .mg-stat-sep { display: none; }
}

/* ══════════════════════════════════════════════════
   İLETİŞİM — Premium
   ══════════════════════════════════════════════════ */

.ct-hero {
    position: relative;
    padding: 7rem 0 4rem;
    overflow: hidden;
}
.ct-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
}
.ct-hero-bg span {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(7rem, 20vw, 22rem);
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(197,160,89,0.06);
    user-select: none;
    line-height: 0.85;
    padding-right: 1rem;
}
.ct-hero-content { position: relative; z-index: 1; }
.ct-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #c5a059;
    margin-bottom: 1rem;
}
.ct-hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.06;
    color: #fff;
    margin: 0 0 1.2rem;
}
.ct-hero-sub {
    font-size: 1.02rem;
    color: rgba(255,255,255,0.42);
    max-width: 480px;
    line-height: 1.75;
}

/* Quick cards */
.ct-quickbar { padding: 0 0 5rem; }
.ct-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.ct-quick-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 2rem 1.8rem;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    text-decoration: none;
    color: inherit;
}
.ct-quick-card:hover {
    background: rgba(197,160,89,0.05);
    border-color: rgba(197,160,89,0.2);
    transform: translateY(-3px);
}
.ct-qc-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(197,160,89,0.08);
    border: 1px solid rgba(197,160,89,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
}
.ct-qc-icon svg { width: 18px; height: 18px; }
.ct-qc-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 0.35rem;
}
.ct-qc-val {
    display: block;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

/* Main section — dark, overlaps hero exactly like cat-section-wrap */
.ct-main {
    position: relative;
    z-index: 2;
    margin-top: -170px;
    padding: 110px 0 5rem;
    background: linear-gradient(
        to bottom,
        transparent          0px,
        rgba(5,5,5,0.75)     50px,
        var(--bg-color, #050505) 100px
    );
}
.ct-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 4rem;
    align-items: start;
}
.ct-info-col h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
}
.ct-info-sub {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 2.4rem;
    line-height: 1.75;
}
.ct-detail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.ct-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.ct-detail-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: rgba(197,160,89,0.07);
    border: 1px solid rgba(197,160,89,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    margin-top: 2px;
}
.ct-detail-icon svg { width: 15px; height: 15px; }
.ct-detail-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.25rem;
}
.ct-detail-val {
    display: block;
    font-size: 1rem;
    color: #fff;
    line-height: 1.65;
}
.ct-detail-val a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}
.ct-detail-val a:hover { color: #c5a059; }
.ct-hours-block {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.8rem;
}
.ct-hours-title {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #c5a059;
    margin-bottom: 0.9rem;
}
.ct-hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.96rem;
    color: #fff;
    padding: 0.3rem 0;
}
.ct-hours-row + .ct-hours-row { border-top: 1px solid rgba(255,255,255,0.04); }
.ct-hours-day { color: #fff; }
.ct-wa-link { color: #fff; }
.ct-wa-link:hover { color: #c5a059; }

.ct-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.4rem;
    background: rgba(37,211,102,0.08);
    border: 1px solid rgba(37,211,102,0.18);
    border-radius: 8px;
    color: #25d366;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.ct-wa-btn:hover {
    background: rgba(37,211,102,0.15);
    border-color: rgba(37,211,102,0.32);
    transform: translateY(-2px);
}
.ct-wa-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* Form */
.ct-form-wrap {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 2.8rem;
}
.ct-form-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}
.ct-form-sub {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.35);
    margin: 0 0 2rem;
}
.ct-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ct-fg {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;
}
.ct-fg label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
}
.ct-input,
.ct-textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 7px;
    padding: 0.85rem 1rem;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.25s, background 0.25s;
    width: 100%;
    box-sizing: border-box;
}
.ct-input::placeholder,
.ct-textarea::placeholder { color: rgba(255,255,255,0.18); }
.ct-input:focus,
.ct-textarea:focus {
    border-color: rgba(197,160,89,0.4);
    background: rgba(197,160,89,0.03);
}
.ct-textarea { resize: vertical; min-height: 130px; }
.ct-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 1rem 2rem;
    background: #c5a059;
    color: #050505;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s;
    margin-top: 0.5rem;
}
.ct-submit:hover { background: #d4b068; transform: translateY(-2px); }
.ct-submit svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.ct-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    gap: 1rem;
}
.ct-success-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(197,160,89,0.1);
    border: 1px solid rgba(197,160,89,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
}
.ct-success-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
.ct-success h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.ct-success p { font-size: 0.88rem; color: rgba(255,255,255,0.42); margin: 0; }

/* Responsive */
@media (max-width: 960px) {
    .ab-split { grid-template-columns: 1fr; }
    .ab-split-visual { min-height: 340px; }
    .ab-split-body { padding: 4rem 2.5rem; }
    .ab-intro-facts { gap: 2.5rem; }
    .ab-values-grid { grid-template-columns: repeat(2, 1fr); }
    .ct-quick-grid { grid-template-columns: 1fr; }
    .ct-main-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ct-form-wrap { padding: 1.8rem; }
}
@media (max-width: 600px) {
    .ab-split-body { padding: 3rem 1.5rem; }
    .ab-intro-facts { gap: 2rem; }
    .ab-values-grid { grid-template-columns: 1fr; }
    .ab-hero h1 { font-size: 2.5rem; }
    .ct-hero h1 { font-size: 2.4rem; }
    .ab-cta-btns { flex-direction: column; align-items: stretch; }
    .ct-form-row { grid-template-columns: 1fr; }
}