@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');
:root {
    --navy: #1e2328;
    --navy-dark: #111519;
    --navy-light: #2a3036;

    --purple: #403047;
    --purple-dark: #241b29;
    --mürdüm: #51344f;

    --gold: #d8b977;
    --gold-light: #e0c28a;
    --amber: #cfa55d;

    --ivory: #f3eedf;
    --muted: #b8b4aa;

    --border: rgba(216, 185, 119, 0.25);
}


/* =========================
   GENEL
========================= */

* {
    box-sizing: border-box;
}

h1,
h2,
h3 {
    text-transform: capitalize;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 12px 16px;
    transform: translateY(-160%);
    border-radius: 4px;
    background: var(--ivory);
    color: var(--navy-dark);
    font-weight: 600;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
}

main:focus {
    outline: none;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(81, 52, 79, 0.45),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(64, 48, 71, 0.42),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #111519 0%,
            #1e2328 40%,
            #241b29 70%,
            #111519 100%
        );

    color: var(--ivory);

    font-family: "Inter", sans-serif;

    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================
   EBRU HİSSİ VEREN ARKA PLAN
========================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0.34;

    background:
        radial-gradient(
            ellipse at 20% 30%,
            transparent 0%,
            rgba(111, 72, 111, 0.18) 15%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 75% 20%,
            transparent 0%,
            rgba(216, 185, 119, 0.08) 13%,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 70% 80%,
            transparent 0%,
            rgba(81, 52, 79, 0.24) 18%,
            transparent 40%
        );

    filter: blur(12px);

    z-index: -5;
}


.background-art {
    position: fixed;

    width: 650px;
    height: 650px;

    border-radius: 48% 52% 63% 37% / 40% 45% 55% 60%;

    filter: blur(2px);

    opacity: 0.13;

    pointer-events: none;

    z-index: -4;
}

.background-art-1 {
    top: -250px;
    left: -220px;

    background:
        repeating-radial-gradient(
            ellipse at center,
            rgba(216, 185, 119, 0.5) 0px,
            rgba(216, 185, 119, 0.5) 2px,
            rgba(81, 52, 79, 0.7) 5px,
            transparent 18px,
            transparent 30px
        );

    transform: rotate(-25deg);
}

.background-art-2 {
    right: -280px;
    bottom: -280px;

    background:
        repeating-radial-gradient(
            ellipse at center,
            rgba(216, 185, 119, 0.4) 0px,
            rgba(216, 185, 119, 0.4) 2px,
            rgba(81, 52, 79, 0.8) 5px,
            transparent 20px,
            transparent 32px
        );

    transform: rotate(30deg);
}


/* Altın parçacıklar */

.gold-dust {
    position: fixed;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--gold);

    opacity: 0.4;

    box-shadow:
        0 0 12px rgba(216, 185, 119, 0.6);

    pointer-events: none;

    z-index: -2;
}

.dust-1 {
    top: 25%;
    left: 12%;
}

.dust-2 {
    top: 64%;
    right: 16%;
}

.dust-3 {
    top: 43%;
    right: 8%;
}


/* =========================
   NAVBAR
========================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 120px;

    z-index: 1000;

    background: rgba(17, 21, 25, 0.76);

    border-bottom: 1px solid rgba(216, 185, 119, 0.12);

    backdrop-filter: blur(18px);
}

.nav-inner {
    max-width: 1250px;

    height: 100%;

    margin: auto;

    padding: 0 30px 0 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.nav-top-row {
    display: grid;
    grid-template-columns: 190px minmax(250px, 1fr) auto;
    align-items: center;
    gap: 28px;
    min-height: 72px;
    width: 100%;
}


/* LOGO */

.logo {
    text-decoration: none;

    color: var(--ivory);

    display: flex;

    flex-direction: column;

    line-height: 1;
}

.logo span {
    font-family: "Cormorant Garamond", serif;

    font-size: 31px;

    font-weight: 600;

    letter-spacing: 5px;

    color: var(--gold);
}

.logo-signature {
    display: block;
    width: 170px;
    height: auto;
}

.logo small {
    margin-top: 7px;

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--muted);

    text-transform: uppercase;
}


/* NAV LINKS */

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 100%;
    gap: 35px;
    border-top: 1px solid rgba(216, 185, 119, 0.12);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border: 0;
    background: transparent;
    color: var(--ivory);
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.header-action:hover,
.header-action:focus-visible {
    color: var(--gold-light);
    transform: translateY(-1px);
    outline: none;
}

.header-action:disabled { opacity: .82; cursor: not-allowed; }

.header-action svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--gold-light);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

.header-action-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-action-copy strong {
    color: var(--ivory);
    font: 500 10px "Montserrat", sans-serif;
    letter-spacing: 0.4px;
}

.header-action-copy small {
    color: var(--muted);
    font: 400 8px "Montserrat", sans-serif;
    letter-spacing: 0.25px;
    white-space: nowrap;
}

.header-cart svg {
    width: 23px;
    height: 23px;
}

/* HESAP GİRİŞİ */
body.account-dialog-open,
body.cart-dialog-open { overflow: hidden; }

.account-dialog {
    position: fixed;
    z-index: 1500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(8, 8, 7, .76);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.account-dialog.is-open {
    opacity: 1;
    visibility: visible;
}

.account-panel {
    position: relative;
    width: min(100%, 440px);
    max-height: min(92vh, 760px);
    overflow: auto;
    padding: 38px 42px 28px;
    border: 1px solid rgba(216, 185, 119, .3);
    border-radius: 4px;
    background: linear-gradient(145deg, #1c1a17, #11110f 75%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .52);
    color: var(--ivory);
    transform: translateY(12px) scale(.99);
    transition: transform .22s ease;
}

.account-dialog.is-open .account-panel { transform: translateY(0) scale(1); }
.account-logo { display: block; width: 118px; height: 44px; object-fit: contain; margin: 0 auto 14px; }
.account-eyebrow { margin: 0; color: var(--gold-light); text-align: center; font: 500 9px "Montserrat", sans-serif; letter-spacing: 2.2px; }
.account-panel h2 { margin: 8px 0 6px; color: var(--ivory); text-align: center; font: 500 30px "Cormorant Garamond", serif; }
.account-description { margin: 0 auto 22px; max-width: 300px; color: var(--muted); text-align: center; font: 400 11px/1.7 "Montserrat", sans-serif; }
.account-close { position: absolute; top: 12px; right: 15px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font: 300 28px/1 Montserrat, sans-serif; cursor: pointer; }
.account-close:hover, .account-close:focus-visible { color: var(--gold-light); }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 19px; border-bottom: 1px solid rgba(216, 185, 119, .2); }
.account-tab { position: relative; padding: 12px; border: 0; background: transparent; color: var(--muted); font: 500 11px "Montserrat", sans-serif; cursor: pointer; }
.account-tab::after { position: absolute; right: 18%; bottom: -1px; left: 18%; height: 2px; background: var(--gold-light); content: ""; transform: scaleX(0); transition: transform .2s ease; }
.account-tab.is-active { color: var(--ivory); }
.account-tab.is-active::after { transform: scaleX(1); }
.account-form { display: grid; gap: 8px; }
.account-form[hidden] { display: none; }
.account-form label { margin-top: 6px; color: #e5dfd2; font: 500 10px "Montserrat", sans-serif; }
.account-form label span { color: var(--muted); font-weight: 400; }
.account-form input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid rgba(216, 185, 119, .22); border-radius: 2px; outline: none; background: rgba(255, 255, 255, .045); color: var(--ivory); font: 400 11px "Montserrat", sans-serif; }
.account-form input::placeholder { color: #898477; }
.account-form input:focus { border-color: rgba(216, 185, 119, .8); box-shadow: 0 0 0 3px rgba(216, 185, 119, .1); }
.account-submit { min-height: 45px; margin-top: 12px; border: 1px solid var(--gold-light); background: var(--gold-light); color: #17140e; font: 600 10px "Montserrat", sans-serif; letter-spacing: 1px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.account-submit:hover { background: transparent; color: var(--gold-light); }
.account-notice { margin: 15px 0 0; padding: 10px 11px; border: 1px solid rgba(216, 185, 119, .18); background: rgba(216, 185, 119, .055); color: #d5c8aa; text-align: center; font: 400 9px/1.6 "Montserrat", sans-serif; }
.account-notice.is-error { border-color: rgba(220, 130, 115, .35); color: #edb8ac; }
.account-footnote { margin: 12px 0 0; color: #898477; text-align: center; font: 400 9px "Montserrat", sans-serif; }
.account-session { display: grid; gap: 10px; margin-top: 12px; text-align: center; }
.account-session[hidden] { display: none; }
.account-session p { margin: 0; color: var(--muted); font: 400 10px "Montserrat", sans-serif; }
.account-session strong { overflow-wrap: anywhere; color: var(--ivory); font: 500 12px "Montserrat", sans-serif; }
.account-submit:disabled { cursor: wait; opacity: .65; }
.account-tab[hidden] { display: none; }

@media (max-width: 520px) {
    .account-dialog { padding: 12px; }
    .account-panel { max-height: 94vh; padding: 32px 24px 22px; }
}

/* SEPET ÇEKMECESİ */
.cart-count { display: inline-grid; place-items: center; min-width: 15px; height: 15px; margin-left: 3px; padding: 0 4px; border: 1px solid rgba(224, 194, 138, .55); border-radius: 99px; color: var(--gold-light); font: 500 8px "Montserrat", sans-serif; vertical-align: 1px; }
.cart-dialog { position: fixed; z-index: 1490; inset: 0; visibility: hidden; }
.cart-dialog.is-open { visibility: visible; }
.cart-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(7, 8, 8, .68); opacity: 0; cursor: default; transition: opacity .25s ease; }
.cart-dialog.is-open .cart-scrim { opacity: 1; }
.cart-panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(100%, 470px); height: 100%; padding: 30px 32px 26px; border-left: 1px solid rgba(216, 185, 119, .26); background: linear-gradient(145deg, #1c1a17, #11110f 78%); color: var(--ivory); box-shadow: -24px 0 70px rgba(0, 0, 0, .34); transform: translateX(102%); transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.cart-dialog.is-open .cart-panel { transform: translateX(0); }
.cart-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 21px; border-bottom: 1px solid rgba(216, 185, 119, .2); }
.cart-heading p { margin: 0 0 7px; color: var(--gold-light); font: 500 8px "Montserrat", sans-serif; letter-spacing: 2px; }
.cart-heading h2 { margin: 0; font: 500 26px "Cormorant Garamond", serif; }
.cart-heading h2 span { color: var(--muted); font: 400 13px "Montserrat", sans-serif; }
.cart-close { width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font: 300 28px/1 Montserrat, sans-serif; cursor: pointer; }
.cart-close:hover, .cart-close:focus-visible { color: var(--gold-light); }
.cart-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 18px 6px 38px; text-align: center; }
.cart-empty-icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 21px; border: 1px solid rgba(216, 185, 119, .28); border-radius: 50%; background: rgba(216, 185, 119, .04); }
.cart-empty-icon svg { width: 32px; fill: none; stroke: var(--gold-light); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cart-empty h3 { margin: 0 0 9px; font: 500 25px "Cormorant Garamond", serif; }
.cart-empty p { max-width: 310px; margin: 0 0 24px; color: var(--muted); font: 400 10px/1.8 "Montserrat", sans-serif; }
.cart-continue { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid rgba(224, 194, 138, .65); color: var(--gold-light); font: 500 9px "Montserrat", sans-serif; letter-spacing: 1px; text-decoration: none; transition: color .2s ease, background .2s ease; }
.cart-continue:hover { background: var(--gold-light); color: #17140e; }
.cart-summary { padding-top: 20px; border-top: 1px solid rgba(216, 185, 119, .2); }
.cart-summary div { display: flex; justify-content: space-between; color: var(--ivory); font: 500 12px "Montserrat", sans-serif; }
.cart-summary p { color: var(--muted); font: 400 9px/1.6 "Montserrat", sans-serif; }
.cart-summary button { width: 100%; min-height: 45px; border: 1px solid rgba(216, 185, 119, .24); background: rgba(216, 185, 119, .12); color: var(--muted); font: 500 10px "Montserrat", sans-serif; }
.cart-items[hidden], .cart-summary[hidden] { display: none; }
@media (max-width: 520px) { .cart-panel { padding: 24px 22px 20px; } }

.nav-links a {
    position: relative;

    color: var(--ivory);

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    transition: 0.3s ease;
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition: 0.3s ease;
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-menu-item { position:relative; display:flex; height:100%; align-items:center; }
.nav-menu-popover { position:absolute; top:calc(100% - 1px); left:50%; z-index:1200; display:grid; width:240px; gap:2px; padding:14px; background:rgba(17,21,25,.98); border:1px solid rgba(216,185,119,.27); box-shadow:0 18px 40px rgba(0,0,0,.35); opacity:0; visibility:hidden; transform:translate(-50%,8px); transition:opacity .18s ease,transform .18s ease,visibility .18s ease; }
.nav-menu-item:hover .nav-menu-popover,
.nav-menu-item:focus-within .nav-menu-popover { opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav-menu-popover-title { display:block; padding:4px 9px 10px; color:var(--gold-light); font:500 9px "Montserrat",sans-serif; letter-spacing:1.8px; text-transform:uppercase; }
.nav-links .nav-menu-popover a { position:static; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 9px; color:var(--ivory); font-size:10px; letter-spacing:.3px; text-align:left; text-transform:none; }
.nav-links .nav-menu-popover a::after { display:none; }
.nav-links .nav-menu-popover a:hover,
.nav-links .nav-menu-popover a:focus-visible { color:var(--gold-light); background:rgba(216,185,119,.08); }
.nav-menu-popover a span { color:var(--gold); font-size:12px; }


/* MOBİL */

.mobile-menu-button {
    display: none;

    background: transparent;

    color: var(--gold);

    border: 0;

    font-size: 24px;

    cursor: pointer;
}

.mobile-menu {
    display: none;
}


/* =========================================
   HERO - PREMIUM TASARIM
========================================= */

.hero {
    min-height: 88vh;
    max-width: 1350px;
    margin: 0 auto;

    padding: 130px 50px 90px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;
    gap: 80px;

    position: relative;
}

/* SOL TARAF */

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-kicker {
    display: block;

    margin-bottom: 28px;

    color: var(--gold);

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0;

    max-width: 620px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(58px, 6vw, 92px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -2px;

    color: var(--ivory);
}

.hero h1 span {
    display: block;

    margin-top: 10px;

    color: var(--gold);
}

.hero p {
    max-width: 440px;

    margin: 32px 0 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}

/* BUTONLAR */

.hero-buttons {
    display: flex;

    gap: 14px;

    margin-top: 38px;

    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 25px;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.hero-btn.primary {
    background: var(--gold);

    color: var(--navy-dark);
}

.hero-btn.primary:hover {
    background: var(--gold-light);

    transform: translateY(-2px);
}

.hero-btn.secondary {
    border: 1px solid rgba(216, 185, 119, 0.35);

    color: var(--ivory);

    background: rgba(255, 255, 255, 0.02);
}

.hero-btn.secondary:hover {
    border-color: var(--gold);

    color: var(--gold);

    transform: translateY(-2px);
}

.site-search {
    position: relative;
    z-index: 5;
    max-width: 500px;
    margin-top: 24px;
}

.navbar .site-search {
    width: 100%;
    max-width: 640px;
    min-width: 0;
    margin: 0 auto;
}

.site-search-form {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 12px;
    padding: 5px 6px 5px 16px;
    border: 1px solid rgba(216, 185, 119, 0.14);
    background: rgba(243, 238, 223, 0.025);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.site-search-form input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ivory);
    font: 12px "Montserrat", sans-serif;
}

.site-search-form input::placeholder {
    color: #aaa69b;
    opacity: 1;
}

.site-search-form input::-webkit-search-cancel-button {
    filter: grayscale(1) invert(1);
}

.site-search-form button {
    display: grid;
    width: 44px;
    min-height: 38px;
    flex: 0 0 44px;
    place-items: center;
    padding: 0;
    border: 0;
    background: var(--gold);
    color: var(--navy-dark);
    cursor: pointer;
    transition: background 0.2s ease;
}

.site-search-form button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--navy-dark);
    stroke-linecap: round;
    stroke-width: 2;
}

.site-search-form button:hover {
    background: var(--gold-light);
}

.site-search-results {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid rgba(216, 185, 119, 0.27);
    background: #171b1f;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.site-search-results[hidden] {
    display: none;
}

.site-search-result {
    display: block;
    padding: 13px 17px;
    border-bottom: 1px solid rgba(216, 185, 119, 0.11);
    color: var(--ivory);
    text-decoration: none;
    transition: background 0.2s ease;
}

.site-search-result:last-child {
    border-bottom: 0;
}

.site-search-result:hover,
.site-search-result:focus-visible {
    outline: 0;
    background: rgba(216, 185, 119, 0.09);
}

.site-search-result strong {
    display: block;
    color: var(--gold-light);
    font: 500 18px "Cormorant Garamond", serif;
    text-transform: capitalize;
}

.site-search-result span,
.site-search-empty {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}

.site-search-empty {
    padding: 15px 17px;
}

.site-search-hint {
    margin: 9px 0 0 !important;
    color: var(--muted) !important;
    font-size: 10px !important;
}

@media (max-width: 1100px) and (min-width: 851px) {
    .nav-links {
        gap: 10px;
    }

    .nav-links a {
        font-size: 9px;
        letter-spacing: 0.45px;
    }

    .logo span {
        font-size: 27px;
    }

    .logo small {
        font-size: 7px;
    }
}

@media (max-width: 850px) {
    .navbar {
        height: 114px;
    }

    .nav-inner {
        padding: 0 18px;
    }

    .nav-top-row {
        height: 114px;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 62px 44px;
        gap: 4px 12px;
    }

    .nav-top-row > .logo {
        grid-column: 1;
        grid-row: 1;
        margin-left: 14px;
    }

    .navbar .site-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }

    .navbar .site-search-form {
        min-height: 40px;
        gap: 7px;
        padding: 3px 4px 3px 10px;
    }

    .navbar .site-search-form input {
        font-size: 10px;
    }

    .navbar .site-search-form button {
        width: 38px;
        min-height: 32px;
        flex-basis: 38px;
    }

    .nav-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 10px;
    }

    .header-action {
        gap: 5px;
    }

    .header-action svg {
        width: 19px;
        height: 19px;
    }

    .header-action-copy strong {
        font-size: 8px;
    }

    .header-action-copy small {
        display: none;
    }

    .mobile-menu {
        top: 114px;
    }

    .side-menu-toggle {
        display: none;
    }
}


/* =========================================
   HERO GÖRSEL
========================================= */

.hero-visual {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 560px;
}

.hero-image-frame {
    position: relative;

    width: min(100%, 570px);

    aspect-ratio: 4 / 5;

    padding: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(216, 185, 119, 0.65),
            rgba(216, 185, 119, 0.12) 35%,
            rgba(255, 255, 255, 0.04) 70%
        );

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.45),
        0 0 80px rgba(81, 52, 79, 0.22);

    transform: rotate(1.5deg);

    transition: transform 0.5s ease;
}

.hero-image-frame:hover {
    transform: rotate(0deg) translateY(-5px);
}

.hero-image-frame::before {
    content: "";

    position: absolute;

    inset: -18px;

    border: 1px solid rgba(216, 185, 119, 0.12);

    pointer-events: none;
}

.hero-image-frame img,
.hero-image-frame video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    background: #171a1d;
}

/* Full-width Ahenk brand film, inspired by the product-led opening format. */
.hero.hero-video-banner {
    isolation: isolate;
    display: flex;
    align-items: center;
    width: min(calc(100% - 36px), 1600px);
    height: min(50vw, 690px);
    min-height: 520px;
    max-width: none;
    margin: 132px auto 88px;
    padding: 64px clamp(35px, 6vw, 112px);
    overflow: hidden;
    border: 1px solid rgba(216, 185, 119, 0.2);
    background: var(--navy-dark);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
}

.hero-banner-video,
.hero-banner-shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-banner-video { display: block; object-fit: cover; object-position: center; }
.hero-banner-shade { background: linear-gradient(90deg, rgba(12, 15, 18, .34), rgba(12, 15, 18, .24)), linear-gradient(0deg, rgba(12, 15, 18, .1), transparent 42%, rgba(12, 15, 18, .06)); }
.hero-video-banner .hero-content { width: min(100%, 900px); margin-inline: auto; text-align: center; transition: opacity .7s ease, transform .7s ease; }
.hero-video-banner .hero-kicker { margin-bottom: 22px; }
.hero-brand-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hero-brand-kicker img { display: block; width: 104px; height: auto; }
.hero-video-badge { position: absolute; z-index: 2; top: 22px; left: 24px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid rgba(243,238,223,.24); border-radius: 999px; background: rgba(17,21,25,.58); color: rgba(243,238,223,.86); font-size: 10px; letter-spacing: .04em; backdrop-filter: blur(8px); }
.hero-video-badge svg { display: block; width: 16px; height: 16px; padding: 2px; border: 1px solid rgba(216,185,119,.58); border-radius: 50%; fill: var(--gold-light); }
.hero-intro-overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 78px 32px; text-align: center; pointer-events: none; }
.hero-intro-overlay[hidden] { display: none !important; }
.hero-intro-copy { display: flex; flex-direction: column; align-items: center; width: min(100%, 820px); animation: heroIntroReveal .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-intro-logo { display: block; width: clamp(112px, 13vw, 168px); height: 54px; margin-bottom: 9px; object-fit: contain; filter: drop-shadow(0 4px 18px rgba(0,0,0,.68)); }
.hero-intro-kicker { color: var(--gold-light); font: 500 9px "Montserrat", sans-serif; letter-spacing: 3.4px; text-shadow: 0 2px 18px rgba(0,0,0,.95); }
.hero.hero-video-banner .hero-intro-overlay h1 { margin: 9px auto 0; color: var(--ivory); font: 500 clamp(68px, 8vw, 108px)/.9 "Cormorant Garamond", serif; letter-spacing: -1.5px; text-shadow: 0 3px 34px rgba(0,0,0,.92); }
.hero-intro-rule { position: relative; display: block; width: 76px; height: 1px; margin: 20px 0 3px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); box-shadow: 0 0 13px rgba(224,194,138,.34); }
.hero.hero-video-banner .hero-intro-overlay p { margin: 12px auto 0; color: rgba(243,238,223,.96); font: 500 12px/1.75 "Montserrat", sans-serif; letter-spacing: .25px; text-shadow: 0 2px 20px rgba(0,0,0,.95); }
.hero.hero-video-banner .hero-intro-overlay p.hero-intro-detail { margin-top: 3px; color: rgba(224,194,138,.93); font-weight: 400; }
.inline-brand-logo { display: inline-block; width: auto; height: .9em; max-width: 76px; object-fit: contain; vertical-align: -.12em; margin: 0 .15em; }
.frame-detail-logo { display: block; width: 118px; height: auto; margin: 0 0 20px; }
.preview-brand-logo { display: block; width: 118px; height: auto; opacity: .65; }
.hero.hero-video-banner h1 { max-width: 900px; margin-inline: auto; font-size: clamp(54px, 6.2vw, 88px); }
.hero.hero-video-banner h1 span { margin-top: 7px; }
.hero-video-banner p { max-width: 600px; margin: 24px auto 0; }
.hero-video-banner .hero-ending-cta { position: absolute; z-index: 1; left: 50%; bottom: 13%; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .6s ease, transform .6s ease; }
.hero-video-banner.is-ending .hero-content { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.hero-video-banner.is-ending .hero-ending-cta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

@media (max-width: 900px) {
    .hero.hero-video-banner { height: 560px; min-height: 0; margin-top: 125px; padding: 48px 44px; }
    .hero.hero-video-banner h1 { font-size: clamp(50px, 7.5vw, 72px); }
    .hero-banner-shade { background: linear-gradient(90deg, rgba(12, 15, 18, .32), rgba(12, 15, 18, .22)), linear-gradient(0deg, rgba(12, 15, 18, .1), transparent); }
}

@media (max-width: 600px) {
    .hero.hero-video-banner { width: 100%; height: min(660px, calc(100svh - 120px)); min-height: 500px; margin: 120px auto 62px; padding: 38px 22px; }
    .hero-banner-video { object-position: 69% center; }
    .hero-banner-shade { background: linear-gradient(90deg, rgba(12, 15, 18, .3), rgba(12, 15, 18, .2)), linear-gradient(0deg, rgba(12, 15, 18, .28), rgba(12, 15, 18, .06) 92%); }
    .hero-video-banner .hero-content { margin-top: 0; text-align: center; }
    .hero-video-banner .hero-kicker { margin-bottom: 17px; font-size: 8px; }
    .hero-video-banner .hero-brand-kicker { gap: 9px; letter-spacing: 2px; }
    .hero-brand-kicker img { width: 78px; }
    .hero-video-badge { top: 14px; left: 14px; padding: 7px 10px; font-size: 9px; }
    .hero.hero-video-banner h1 { font-size: clamp(42px, 11vw, 56px); line-height: 1.02; }
    .hero.hero-video-banner h1 span { margin-top: 8px; }
    .hero-video-banner p { margin: 18px auto 0; font-size: 13px; }
    .hero-video-banner .hero-btn { width: auto; min-width: 210px; }
    .hero-intro-overlay { padding: 64px 22px 72px; }
    .hero-intro-copy { width: 100%; }
    .hero-intro-logo { width: 112px; height: 42px; margin-bottom: 8px; }
    .hero-intro-kicker { font-size: 8px; letter-spacing: 2.5px; }
    .hero.hero-video-banner .hero-intro-overlay h1 { margin-top: 11px; font-size: clamp(57px, 13vw, 72px); }
    .hero-intro-rule { width: 58px; margin-top: 17px; }
    .hero.hero-video-banner .hero-intro-overlay p { max-width: 330px; margin-top: 11px; font-size: 10px; }
    .hero.hero-video-banner .hero-intro-overlay p.hero-intro-detail { margin-top: 2px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-intro-overlay,
    .hero-video-banner .hero-content,
    .hero-video-banner .hero-ending-cta { transition-duration: .01ms; }
    .hero-intro-copy { animation: none; }
}

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

@keyframes sectionArrival {
    0% { opacity: .62; transform: translateY(20px); filter: brightness(.88); }
    100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

.section-arrival { animation: sectionArrival .85s cubic-bezier(.2,.7,.2,1) both; }
#koleksiyon { scroll-margin-top: 32px; }

.ahenk-route-transition { position: fixed; z-index: 12000; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #29202c 0%, #19171a 44%, #111519 100%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .34s ease, visibility 0s linear .34s; }
.ahenk-route-transition.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .34s ease; }
.ahenk-route-transition-mark { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(10px); transition: opacity .28s ease .04s, transform .28s ease .04s; }
.ahenk-route-transition.is-active .ahenk-route-transition-mark { opacity: 1; transform: translateY(0); }
.ahenk-route-transition-mark img { display: block; width: 164px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 18px rgba(0,0,0,.4)); }
.ahenk-route-transition-mark span { margin-top: 7px; color: var(--gold-light); font: 400 10px "Cormorant Garamond", serif; letter-spacing: 4px; text-transform: uppercase; }
.ahenk-route-transition-mark i { display: block; width: 92px; height: 1px; margin-top: 18px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); transform: scaleX(0); transition: transform .42s ease .08s; }
.ahenk-route-transition.is-active .ahenk-route-transition-mark i { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .section-arrival { animation: none; }
    .ahenk-route-transition,
    .ahenk-route-transition-mark,
    .ahenk-route-transition-mark i { transition: none; }
}


/* GÖRSEL ALTI YAZI */

.hero-brand {
    position: absolute;

    left: 50%;
    bottom: 12%;

    transform: translateX(-50%);

    text-align: center;

    z-index: 3;

    text-shadow:
        0 3px 20px rgba(0, 0, 0, 0.8),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-brand span {
    display: block;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 400;

    letter-spacing: 12px;

    color: #D8B977;

    line-height: 1;
}

.hero-brand small {
    display: block;

    margin-top: 12px;

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #F3EEDF;
}


/* =========================================
   MOBİL
========================================= */

@media (max-width: 900px) {

    .hero {
        min-height: auto;

        padding: 110px 25px 70px;

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .hero h1 {
        font-size: clamp(52px, 12vw, 78px);
    }

    .hero-visual {
        min-height: auto;
    }

    .hero-image-frame {
        width: min(100%, 500px);
    }
}



@media (max-width: 600px) {

    .hero {
        padding: 136px 20px 60px;
    }

    .hero-kicker {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .hero h1 {
        font-size: 53px;
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-btn {
        width: 100%;
    }

    .hero-image-frame {
        padding: 7px;
    }

    .hero-image-caption {
        left: 18px;
        bottom: 18px;
    }
}

/* =========================
   BÖLÜM BAŞLIKLARI
========================= */

.collection-section,
.custom-section {
    max-width: 1250px;

    margin: auto;

    padding: 110px 30px;
}

.section-heading {
    display: flex;

    gap: 22px;

    align-items: flex-start;

    margin-bottom: 55px;
}

.section-number {
    font-family: "Cormorant Garamond", serif;

    font-size: 18px;

    color: var(--gold);
}

.section-heading p {
    margin: 0 0 8px;

    color: var(--gold);

    font-size: 9px;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(38px, 5vw, 60px);

    font-weight: 400;
}


/* =========================
   KOLEKSİYON KARTLARI
========================= */

.collection-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.collection-card {
    min-height: 460px;

    background: rgba(17, 21, 25, 0.55);

    border: 1px solid rgba(216, 185, 119, 0.15);

    cursor: pointer;

    overflow: hidden;

    transition: 0.4s ease;
}

.collection-card:hover {
    transform: translateY(-8px);

    border-color: rgba(216, 185, 119, 0.5);

    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.collection-image {
    height: 380px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: flex-end;
}


/*
    Bu alanlara daha sonra gerçek ürün fotoğrafları
    ekleyebiliriz.
*/

.dini-image {
    background:
        linear-gradient(
            to top,
            rgba(10, 12, 14, 0.92),
            rgba(10, 12, 14, 0.05)
        ),
        radial-gradient(
            circle at 50% 30%,
            #75664d,
            #26282a 50%,
            #111519
        );
}

.sanatsal-image {
    background:
        linear-gradient(
            to top,
            rgba(10, 12, 14, 0.92),
            rgba(10, 12, 14, 0.05)
        ),
        linear-gradient(
            135deg,
            #574252,
            #24272b 50%,
            #111519
        );
}

.cerceve-image {
    background:
        linear-gradient(
            to top,
            rgba(10, 12, 14, 0.92),
            rgba(10, 12, 14, 0.05)
        ),
        linear-gradient(
            145deg,
            #8a7047,
            #282522 45%,
            #111519
        );
}

.image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(216, 185, 119, 0.08)
        );
}

.card-label {
    position: relative;

    z-index: 2;

    padding: 25px;
}

.card-label span {
    color: var(--gold);

    font-size: 9px;

    letter-spacing: 2px;
}

.card-label h3 {
    margin: 8px 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 32px;

    font-weight: 500;
}

.card-label p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;
}

.collection-bottom {
    height: 80px;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.arrow {
    color: var(--gold);

    font-size: 20px;
}


/* =========================
   GALERİ
========================= */

.gallery-area {
    margin-top: 50px;

    padding: 35px;

    background: rgba(10, 13, 15, 0.5);

    border: 1px solid rgba(216, 185, 119, 0.15);
}

.gallery-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}

.gallery-eyebrow {
    color: var(--gold);

    font-size: 8px;

    letter-spacing: 3px;
}

.gallery-header h3 {
    margin: 7px 0 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

    font-weight: 400;
}

#closeGallery {
    width: 38px;
    height: 38px;

    border: 1px solid var(--border);

    background: transparent;

    color: var(--gold);

    font-size: 25px;

    cursor: pointer;
}

.gallery-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;
}

.gallery-item {
    position: relative;

    aspect-ratio: 1 / 1.15;

    overflow: hidden;

    background: #111519;

    border: 1px solid rgba(216, 185, 119, 0.12);
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item span {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 18px 14px 13px;

    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.85)
    );

    color: var(--ivory);

    font-size: 10px;

    letter-spacing: 1px;
}

.hidden {
    display: none !important;
}


/* =========================
   ÖZEL ÇALIŞMA
========================= */

.custom-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: start;
}

.form-step {
    padding: 30px 0;

    border-bottom: 1px solid rgba(216, 185, 119, 0.12);
}

.custom-size-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.custom-size-fields label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.custom-size-fields label span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-light);
}

.custom-size-fields input {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: rgba(17, 21, 25, 0.6);
    color: var(--ivory);
    font: inherit;
}

.custom-size-fields input::placeholder {
    color: var(--muted);
}

@media (max-width: 420px) {
    .custom-size-fields {
        grid-template-columns: 1fr;
    }
}

.step-title {
    display: flex;

    gap: 18px;

    margin-bottom: 22px;
}

.step-title > span {
    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;
}

.step-title h3 {
    margin: 0 0 5px;

    font-family: "Cormorant Garamond", serif;

    font-size: 25px;

    font-weight: 500;
}

.step-title p {
    margin: 0;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;
}


/* UPLOAD */

.upload-box {
    min-height: 150px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border: 1px dashed rgba(216, 185, 119, 0.3);

    cursor: pointer;

    transition: 0.3s ease;
}

.upload-box:hover {
    border-color: var(--gold);

    background: rgba(216, 185, 119, 0.03);
}

.upload-box input {
    display: none;
}

.upload-icon {
    font-size: 30px;

    color: var(--gold);

    font-weight: 200;
}

.upload-box strong {
    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.upload-box small {
    color: var(--muted);

    font-size: 9px;
}

.file-name {
    margin-top: 12px;

    color: var(--muted);

    font-size: 10px;
}

.designer-image-quality { display: grid; gap: 6px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(216,185,119,.18); border-left: 2px solid var(--gold); background: rgba(216,185,119,.035); }
.designer-image-quality-title { color: var(--ivory); font: 500 9px "Montserrat",sans-serif; letter-spacing: .55px; }
.designer-image-quality-dimensions { color: var(--muted); font: 9px "Montserrat",sans-serif; }
.designer-image-quality-estimate { color: var(--gold-light); font: 500 12px "Montserrat",sans-serif; font-variant-numeric: tabular-nums; }
.designer-image-quality-meter { height: 4px; overflow: hidden; background: rgba(255,255,255,.1); }
.designer-image-quality-meter span { display: block; height: 100%; background: linear-gradient(90deg,#b67e53,var(--gold-light)); transition: width .25s ease; }
.designer-image-quality p { margin: 0; color: #c5c0b6; font: 9px/1.65 "Montserrat",sans-serif; }
.designer-image-quality p.is-low-resolution { color: #edc99f; }
.designer-image-quality small { color: #88857e; font: 8px/1.6 "Montserrat",sans-serif; }


/* OPTIONS */

.option-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}

.option-button {
    padding: 13px 8px;

    border: 1px solid rgba(216, 185, 119, 0.18);

    background: rgba(17, 21, 25, 0.5);

    color: var(--muted);

    cursor: pointer;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    transition: 0.25s ease;
}

.option-button:hover,
.option-button.active {
    color: var(--gold);

    border-color: var(--gold);

    background: rgba(216, 185, 119, 0.07);
}


/* SELECT */

.select-wrap {
    position: relative;
}

.select-wrap select {
    width: 100%;

    padding: 15px;

    border: 1px solid rgba(216, 185, 119, 0.2);

    outline: none;

    background: #171b1f;

    color: var(--ivory);

    font-family: "Montserrat", sans-serif;

    font-size: 10px;

    cursor: pointer;
}


/* ÇERÇEVELER */

.frame-options {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;
}

.frame-option {
    padding: 12px 6px;

    border: 1px solid rgba(216, 185, 119, 0.18);

    background: transparent;

    color: var(--ivory);

    cursor: pointer;

    font-size: 9px;

    transition: 0.25s ease;
}

.frame-option:hover,
.frame-option.active {
    border-color: var(--gold);

    color: var(--gold);
}

.frame-preview {
    display: block;

    width: 42px;
    height: 42px;

    margin: 0 auto 9px;

    border: 5px solid #222;
}

.frame-preview.black {
    border-color: #0b0c0d;
}

.frame-preview.gold {
    border-color: #d8b977;
}

.frame-preview.wood {
    border-color: #6b4930;
}

.frame-preview.none {
    border-color: transparent;

    box-shadow: inset 0 0 0 1px rgba(216, 185, 119, 0.3);
}


/* TEXTAREA */

textarea {
    width: 100%;

    min-height: 120px;

    resize: vertical;

    padding: 15px;

    border: 1px solid rgba(216, 185, 119, 0.18);

    outline: none;

    background: rgba(17, 21, 25, 0.5);

    color: var(--ivory);

    font-family: "Montserrat", sans-serif;

    font-size: 10px;
}

textarea:focus {
    border-color: var(--gold);
}

textarea::placeholder {
    color: #77746d;
}


/* SUMMARY */

.summary-button {
    width: 100%;

    margin-top: 30px;

    padding: 18px;

    border: 0;

    background: var(--gold);

    color: var(--navy-dark);

    font-family: "Montserrat", sans-serif;

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.summary-button:hover {
    background: var(--gold-light);
}

.summary-box {
    margin-top: 20px;

    padding: 25px;

    border: 1px solid rgba(216, 185, 119, 0.2);

    background: rgba(216, 185, 119, 0.03);
}

.summary-title {
    margin-bottom: 15px;

    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 25px;
}

#summaryContent {
    color: var(--muted);

    font-size: 10px;

    line-height: 2;
}


/* =========================
   ÖNİZLEME
========================= */

.preview-container {
    position: sticky;

    top: 110px;
}

.preview-heading {
    display: flex;

    gap: 18px;

    margin-bottom: 30px;
}

.preview-heading > span {
    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;
}

.preview-heading h3 {
    margin: 0 0 7px;

    font-family: "Cormorant Garamond", serif;

    font-size: 29px;

    font-weight: 500;
}

.preview-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.7;
}


/* ODA */

.table-room {
    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #25282b,
            #17191c
        );

    border: 1px solid rgba(216, 185, 119, 0.12);

    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.35);
}

.table-room::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 90px;

    background:
        linear-gradient(
            to top,
            #171312,
            transparent
        );

    opacity: 0.8;
}

.wall-light {
    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(216, 185, 119, 0.06);

    filter: blur(45px);
}


/* TABLO */

.preview-frame {
    position: relative;

    z-index: 3;

    width: 55%;

    aspect-ratio: 0.75;

    padding: 12px;

    background: #0b0c0d;

    box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.6);

    transition: 0.4s ease;
}

.preview-frame.gold {
    background: linear-gradient(
        135deg,
        #f0d18e,
        #a98545,
        #e0c28a
    );
}

.preview-frame.wood {
    background: linear-gradient(
        135deg,
        #754d31,
        #3d281c,
        #81583a
    );
}

.preview-frame.none {
    padding: 0;

    background: transparent;
}

.preview-inner {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            #3e3c37,
            #17191b
        );
}

.preview-inner img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: none;
}

.preview-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

.preview-placeholder span {
    font-family: "Cormorant Garamond", serif;

    font-size: 32px;

    letter-spacing: 7px;

    color: rgba(216, 185, 119, 0.6);
}

.preview-placeholder small {
    margin-top: 12px;

    color: var(--muted);

    font-size: 8px;

    letter-spacing: 1.5px;
}

.preview-info {
    padding: 18px 0;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.7;

    text-align: center;
}


/* =========================
   QUOTE
========================= */

.quote-section {
    max-width: 900px;

    margin: 80px auto;

    padding: 90px 30px;

    text-align: center;

    border-top: 1px solid rgba(216, 185, 119, 0.15);

    border-bottom: 1px solid rgba(216, 185, 119, 0.15);
}

.quote-mark {
    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 90px;

    height: 60px;

    opacity: 0.6;
}

.quote-section p {
    margin: 15px 0 30px;

    font-family: "Cormorant Garamond", serif;

    font-size: 32px;

    line-height: 1.35;
}

.quote-section span {
    color: var(--gold);

    font-size: 9px;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* =========================
   İLETİŞİM
========================= */

.contact-section {
    max-width: 1250px;

    margin: auto;

    padding: 100px 30px;
}

.contact-content {
    max-width: 700px;
}

.contact-eyebrow {
    margin: 20px 0 15px;

    color: var(--gold);

    font-size: 9px;

    letter-spacing: 3px;
}

.contact-content h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(50px, 7vw, 85px);

    font-weight: 400;

    line-height: 0.9;
}

.contact-content h2 span {
    color: var(--gold);
}

.contact-text {
    max-width: 520px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.contact-button {
    padding: 14px 25px;

    border: 1px solid var(--border);

    color: var(--ivory);

    text-decoration: none;

    font-size: 9px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: 0.3s ease;
}

.contact-button:hover {
    border-color: var(--gold);

    color: var(--gold);
}



/* =========================
   FOOTER
========================= */

footer {
    padding: 60px 30px;

    text-align: center;

    border-top: 1px solid rgba(216, 185, 119, 0.12);
}

.site-footer {
    position: relative;
    background: #0b0e10;
    padding: 64px 30px 28px;
    text-align: left;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, 0.9fr)) 1.25fr;
    gap: 28px;
    max-width: 1250px;
    margin: 0 auto;
}

.footer-brand {
    text-align: left;
}

.footer-signatures {
    display: flex;
    max-width: 1250px;
    justify-content: space-between;
    gap: 20px;
    margin: 34px auto 0;
}

.footer-signature {
    color: #928c7c;
    font-family: "Cormorant Garamond", serif;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.footer-signature-right {
    text-align: right;
}

.footer-main h3 {
    margin: 0 0 17px;
    color: var(--ivory);
    font: 500 11px "Montserrat", sans-serif;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.footer-brand > p {
    margin: 9px 0 27px;
    color: var(--muted);
    font: 17px "Cormorant Garamond", serif;
}

.footer-brand > h3 {
    margin-bottom: 13px;
}

.footer-social-link,
.footer-column a,
.footer-column > span {
    color: var(--muted);
    font: 11px/1.7 "Montserrat", sans-serif;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.footer-social-link svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--gold-light);
    stroke-width: 1.4;
}

.footer-social-link .instagram-dot {
    fill: var(--gold-light);
    stroke: none;
}

.footer-social-link span {
    color: #817c70;
    font-size: 9px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding-top: 5px;
}

.footer-column h3 {
    margin-bottom: 6px;
}

.footer-column a:hover,
.footer-social-link:hover {
    color: var(--gold-light);
}

.footer-policies > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.footer-policies small {
    color: var(--gold);
    font: 8px "Montserrat", sans-serif;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.footer-subscribe {
    padding-top: 5px;
}

.footer-subscribe p {
    margin: 0 0 17px;
    color: var(--muted);
    font: 11px/1.8 "Montserrat", sans-serif;
}

.footer-subscribe > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(216, 185, 119, 0.32);
    color: var(--gold-light);
    font: 9px "Montserrat", sans-serif;
    letter-spacing: 0.55px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.footer-subscribe > a:hover {
    border-color: var(--gold);
    background: rgba(216, 185, 119, 0.08);
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 18px;
    max-width: 1250px;
    margin: 48px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(216, 185, 119, 0.12);
}

.footer-bottom .footer-copyright {
    color: #706e69;
    font-size: 8px;
    letter-spacing: 1px;
    text-align: center;
}

.footer-credit {
    display: block;
    color: #706e69;
    font: 8px/1.5 "Montserrat", sans-serif;
    letter-spacing: 1px;
    text-align: center;
}

.about-page-footer .footer-credit {
    color: var(--muted);
    font-size: 9px;
}

.artworks-footer .footer-credit {
    margin-top: 9px;
}

.catalog-page-credit {
    padding: 0 20px 24px;
}

.collections-footer-logo {
    display: block;
    width: 132px;
    height: auto;
    margin: 0 auto 8px;
}

@media (max-width: 950px) {
    .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 24px;
    }
}

@media (max-width: 700px) and (min-width: 521px) {
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand,
    .footer-subscribe {
        grid-column: 1 / -1;
    }
}

.footer-logo {
    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

    letter-spacing: 7px;

    color: var(--gold);
}

.footer-logo-image {
    display: block;
    width: 152px;
    height: auto;
    margin: 0 auto;
}

footer p {
    color: var(--muted);

    font-family: "Cormorant Garamond", serif;

    font-size: 18px;
}

footer small {
    color: #706e69;

    font-size: 8px;

    letter-spacing: 1px;
}

@media (max-width: 520px) {
    .site-footer {
        padding: 48px 18px 24px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .footer-brand,
    .footer-subscribe {
        max-width: 340px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 14px 8px;
        margin-top: 34px;
    }
.footer-bottom .footer-copyright {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}


/* =========================
   MÜZİK BUTONU
========================= */

.music-toggle {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 2000;

    padding: 12px 18px;

    border: 1px solid rgba(216, 185, 119, 0.5);

    border-radius: 30px;

    background: rgba(17, 21, 25, 0.9);

    color: var(--ivory);

    font-family: "Montserrat", sans-serif;

    font-size: 10px;

    letter-spacing: 0.8px;

    cursor: pointer;

    backdrop-filter: blur(15px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3);

    transition: 0.3s ease;
}

.music-toggle:hover {
    border-color: var(--gold);

    color: var(--gold);

    transform: translateY(-2px);
}


/* =========================
   MOBİL
========================= */

@media (max-width: 850px) {

    .nav-links {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .mobile-menu {
        position: fixed;

        top: 78px;
        left: 0;
        right: 0;

        z-index: 999;

        padding: 20px;

        background: rgba(17, 21, 25, 0.97);

        border-bottom: 1px solid var(--border);
    }

    .mobile-menu.open {
        display: flex;

        flex-direction: column;

        gap: 18px;
    }

    .mobile-menu a {
        color: var(--ivory);

        text-decoration: none;

        font-size: 11px;

        letter-spacing: 1.5px;

        text-transform: uppercase;
    }

    .hero {
        grid-template-columns: 1fr;

        padding-top: 140px;
    }

    .hero-decoration {
        height: 400px;
    }

    .collection-grid {
        grid-template-columns: 1fr;
    }

    .collection-card {
        min-height: 420px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .custom-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .preview-container {
        position: relative;

        top: auto;
    }

    .preview-frame {
        width: 55%;
    }
}


@media (max-width: 520px) {

    .nav-inner {
        padding: 0 18px;
    }

    .logo span {
        font-size: 26px;
    }

    .logo-signature {
        width: 150px;
    }

    .hero,
    .collection-section,
    .custom-section,
    .contact-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero h1 {
        font-size: 72px;
    }

    .hero-decoration {
        height: 330px;
    }

    .hero-circle {
        width: 300px;
        height: 300px;
    }

    .hero-card {
        width: 200px;
    }

    .gallery-area {
        padding: 20px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .option-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .frame-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-room {
        min-height: 400px;
    }

    .preview-frame {
        width: 65%;
    }

    .quote-section p {
        font-size: 25px;
    }

    .contact-buttons {
        flex-direction: column;
    }

    .contact-button {
        text-align: center;
    }

    .music-toggle {
        right: 15px;
        bottom: 15px;
    }
}

/* =========================================
   KOLEKSİYON GİRİŞ ALANI
========================================= */

.collection-intro {
    position: relative;

    min-height: 420px;

    margin-top: 45px;
    padding: 70px 75px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(81, 52, 79, 0.32),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.01)
        );

    border: 1px solid rgba(216, 185, 119, 0.14);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.25);
}

.collection-intro::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -180px;

    border: 1px solid rgba(216, 185, 119, 0.08);

    border-radius: 50%;

    pointer-events: none;
}

.collection-intro-text {
    position: relative;

    z-index: 2;

    max-width: 650px;
}

.collection-eyebrow {
    display: block;

    margin-bottom: 22px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.collection-intro h3 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(48px, 5vw, 72px);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -1px;

    color: var(--ivory);
}

.collection-intro p {
    max-width: 520px;

    margin: 28px 0 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


/* BUTON */

.collection-main-button {
    display: inline-flex;

    align-items: center;

    gap: 24px;

    margin-top: 35px;

    padding: 15px 0;

    color: var(--ivory);

    border-bottom: 1px solid rgba(216, 185, 119, 0.5);

    font-family: "Montserrat", sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.3s ease,
        gap 0.3s ease,
        border-color 0.3s ease;
}

.collection-main-button span {
    color: var(--gold);

    font-size: 18px;

    line-height: 1;

    transition: transform 0.3s ease;
}

.collection-main-button:hover {
    color: var(--gold);

    gap: 32px;

    border-color: var(--gold);
}

.collection-main-button:hover span {
    transform: translateX(5px);
}

.catalog-showcase {
    max-width: 1120px;
    margin: 88px auto 0;
    padding: clamp(28px, 5vw, 64px);
    color: #292720;
    background: #eee8dc;
}

.catalog-showcase-heading,
.catalog-showcase-details,
.catalog-showcase-approach {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalog-showcase-heading {
    display: flex;
    justify-content: space-between;
    color: #8b7047;
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 2px;
}

.catalog-showcase-index { color: #81796c; }

.catalog-showcase-main {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: clamp(35px, 7vw, 90px);
    padding: 34px 0 32px;
    border-bottom: 1px solid rgba(85, 72, 53, .18);
}

.catalog-showcase-label {
    margin: 0 0 16px;
    color: #8b7047;
    font: 500 8px "Montserrat", sans-serif;
    letter-spacing: 2.4px;
}

.catalog-showcase-copy h2 {
    margin: 0;
    color: #292720;
    font: 400 clamp(32px, 4vw, 52px)/0.98 "Cormorant Garamond", serif;
}

.catalog-showcase-description {
    max-width: 450px;
    margin: 20px 0 0;
    color: #686256;
    font-size: 12px;
    line-height: 1.9;
}

.catalog-showcase-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    color: #39362f;
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
}

.catalog-showcase-cta span { color: #8b7047; font-size: 16px; }
.catalog-showcase-cta:hover { color: #8b7047; }

.catalog-showcase-art {
    min-height: 340px;
    background: url("./images/catalog-kayik-oda.png") center 45%/cover;
    border: 9px solid #d2c8b7;
    box-shadow: 0 14px 35px rgba(42, 36, 27, .16), inset 0 0 0 1px rgba(90, 72, 46, .18);
}

.catalog-showcase-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgba(85, 72, 53, .18);
}

.catalog-showcase-details > div { padding: 18px 20px 18px 0; }
.catalog-showcase-details > div + div { padding-left: 22px; border-left: 1px solid rgba(85, 72, 53, .18); }
.catalog-showcase-details span,
.catalog-showcase-approach article > span { color: #8b7047; font: 500 8px "Montserrat", sans-serif; letter-spacing: 1.7px; }
.catalog-showcase-details p { margin: 8px 0 0; color: #39362f; font: 400 18px "Cormorant Garamond", serif; }

.catalog-showcase-approach { gap: 40px; padding-top: 25px; }
.catalog-showcase-approach h3 { margin: 8px 0 5px; color: #292720; font: 400 22px "Cormorant Garamond", serif; }
.catalog-showcase-approach p { max-width: 440px; margin: 0; color: #686256; font-size: 11px; line-height: 1.8; }

@media (max-width: 700px) {
    .catalog-showcase { margin-top: 58px; padding: 26px 22px; }
    .catalog-showcase-main { grid-template-columns: 1fr; gap: 28px; padding: 30px 0 24px; }
    .catalog-showcase-art { min-height: 260px; }
    .catalog-showcase-details { grid-template-columns: 1fr; }
    .catalog-showcase-details > div,
    .catalog-showcase-details > div + div { padding: 14px 0; border-left: 0; }
    .catalog-showcase-details > div + div { border-top: 1px solid rgba(85, 72, 53, .18); }
    .catalog-showcase-approach { grid-template-columns: 1fr; gap: 22px; }
}


/* SAĞ DETAY */

.collection-intro-detail {
    position: relative;

    z-index: 2;

    width: 190px;

    padding-left: 35px;

    border-left: 1px solid rgba(216, 185, 119, 0.25);
}

.collection-intro-detail span {
    display: block;

    margin-bottom: 20px;

    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;

    line-height: 1;
}

.collection-intro-detail p {
    margin: 0;

    color: rgba(243, 238, 223, 0.65);

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;

    line-height: 1.3;
}


/* MOBİL */

@media (max-width: 700px) {

    .collection-intro {
        min-height: auto;

        padding: 50px 30px;

        flex-direction: column;

        align-items: flex-start;

        gap: 45px;
    }

    .collection-intro h3 {
        font-size: 50px;
    }

    .collection-intro-detail {
        width: 100%;

        padding-left: 20px;
    }

}

/* =========================================
   KOLEKSİYONLAR SAYFASI
========================================= */

.collection-page-header {
    max-width: 1350px;
    margin: 0 auto;
    padding: 30px 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(216, 185, 119, 0.12);
}

.collection-logo {
    color: var(--gold);

    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    letter-spacing: 8px;

    text-decoration: none;
}

.collection-logo img {
    display: block;
    width: 150px;
    height: auto;
}

.about-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 104px 50px 72px;
}

.about-page-intro {
    max-width: 760px;
    margin: 0 auto 76px;
}

.about-page-intro .collection-eyebrow {
    display: block;
    margin-bottom: 24px;
    color: var(--gold);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 4px;
}

.about-page-intro h1 {
    margin: 0 0 32px;
    color: var(--ivory);
    font: 400 clamp(56px, 8vw, 88px)/0.98 "Cormorant Garamond", serif;
    letter-spacing: -2px;
}

.about-page-intro h1 span { color: var(--gold); }

.about-page-intro p {
    max-width: 680px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
}

.about-page-intro .about-page-lead {
    margin-bottom: 20px;
    color: var(--ivory);
    font: 500 22px/1.6 "Cormorant Garamond", serif;
}

.about-page-footer { display: flex; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 22px 50px 30px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.about-page-footer a { color: var(--gold); letter-spacing: 3px; text-decoration: none; }
.about-page-footer a img { display: block; width: 116px; height: auto; }
.about-page-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.about-page-footer nav a { color: var(--muted); font: 10px "Montserrat", sans-serif; letter-spacing: .3px; text-decoration: none; }
.about-page-footer nav a:hover { color: var(--gold-light); }
.about-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.about-page-actions a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(216,185,119,.32); color: var(--gold-light); font: 10px "Montserrat", sans-serif; letter-spacing: .35px; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.about-page-actions a:hover { border-color: var(--gold); background: rgba(216,185,119,.08); }
.about-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; max-width: 1080px; margin: 0 auto 72px; padding: 0 50px; }
.about-values article { padding: 24px 22px; border: 1px solid var(--border); background: rgba(255,255,255,.018); }
.about-values article > span { color: var(--gold); font: 10px "Montserrat",sans-serif; letter-spacing: 1.2px; }
.about-values h2 { margin: 20px 0 9px; color: var(--ivory); font: 500 23px/1.15 "Cormorant Garamond",serif; }
.about-values p { margin: 0; color: var(--muted); font: 11px/1.8 "Montserrat",sans-serif; }

@media (max-width: 600px) {
    .about-page { padding: 75px 22px 55px; }
    .about-page-intro { margin-bottom: 52px; }
    .about-page-intro h1 { font-size: 58px; }
    .about-page-intro .about-page-lead { font-size: 20px; }
    .about-page-value { grid-template-columns: 38px 1fr; gap: 13px; padding: 23px 2px; }
    .about-page-footer { padding: 20px 22px 26px; }
    .about-values { grid-template-columns: 1fr; gap: 10px; margin-bottom: 44px; padding: 0 22px; }
    .about-values article { padding: 19px; }
    .about-values h2 { margin-top: 12px; }
    .about-page-actions { flex-direction: column; }
    .about-page-actions a { justify-content: space-between; }
    .about-page-footer { flex-wrap: wrap; gap: 16px; }
    .about-page-footer nav { order: 3; width: 100%; justify-content: flex-start; }
    .collection-logo img { width: 140px; }
}

.back-home {
    color: var(--muted);

    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;

    text-decoration: none;

    transition: color 0.3s ease;
}

.back-home:hover {
    color: var(--gold);
}


/* SAYFA */

.collections-page {
    max-width: 1150px;
    margin: 0 auto;

    padding: 110px 50px 100px;
}


/* BAŞLIK */

.collections-hero {
    max-width: 760px;

    margin-bottom: 100px;
}

.collections-hero .collection-eyebrow {
    display: block;

    margin-bottom: 25px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 4px;

    text-transform: uppercase;
}

.collections-hero h1 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(65px, 8vw, 105px);

    font-weight: 400;

    line-height: 0.86;

    letter-spacing: -3px;

    color: var(--ivory);
}

.collections-hero h1 span {
    color: var(--gold);
}

.collections-hero p {
    max-width: 520px;

    margin-top: 35px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.9;
}

.collections-coming-soon {
    display: flex;
    min-height: 54vh;
    flex-direction: column;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto 28px;
    padding: 38px 0 55px;
    border-top: 1px solid rgba(216, 185, 119, .2);
}

.collections-coming-soon h1 {
    font-size: clamp(58px, 8vw, 96px);
}

.collections-coming-soon p {
    max-width: 470px;
    margin-top: 24px;
    font-size: 13px;
}

.collections-coming-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    margin-top: 28px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(216, 185, 119, .5);
    color: var(--ivory);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 1.6px;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease, border-color .2s ease;
}

.collections-coming-link span { color: var(--gold); font-size: 17px; }
.collections-coming-link:hover { gap: 23px; color: var(--gold); border-color: var(--gold); }


/* KOLEKSİYON LİSTESİ */

.collection-list {
    border-top: 1px solid rgba(216, 185, 119, 0.16);
}

.collection-category {
    position: relative;

    display: grid;

    grid-template-columns: 80px 1fr 60px;

    align-items: center;

    gap: 35px;

    min-height: 190px;

    padding: 35px 20px;

    border-bottom: 1px solid rgba(216, 185, 119, 0.13);

    text-decoration: none;

    transition:
        background 0.35s ease,
        padding 0.35s ease;
}

.collection-category:hover {
    background: rgba(255, 255, 255, 0.025);

    padding-left: 35px;
}


/* NUMARA */

.category-number {
    color: rgba(216, 185, 119, 0.55);

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;
}


/* İÇERİK */

.category-content > span {
    display: block;

    margin-bottom: 8px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.category-content h2 {
    margin: 0;

    color: var(--ivory);

    font-family: "Cormorant Garamond", serif;

    font-size: 48px;

    font-weight: 400;

    line-height: 1;
}

.category-content p {
    max-width: 550px;

    margin: 12px 0 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;
}


/* OK */

.category-arrow {
    color: var(--gold);

    font-size: 25px;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.collection-category.is-upcoming {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    cursor: default;
}

.collection-category.is-upcoming:hover {
    padding-left: 20px;
    background: transparent;
}

.category-status,
.frame-upcoming-label {
    color: var(--muted);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.category-status {
    padding: 9px 12px;
    border: 1px solid rgba(216, 185, 119, 0.2);
}

.collection-category:hover .category-arrow {
    transform: translateX(8px);

    color: var(--gold-light);
}


/* FOOTER */

.collections-footer {
    padding: 45px 20px 55px;
    background: #0b0e10;
    text-align: left;

    border-top: 1px solid rgba(216, 185, 119, 0.1);
}


/* MOBİL */

@media (max-width: 700px) {

    .collection-page-header {
        padding: 25px 20px;
    }

    .collections-page {
        padding: 80px 20px 70px;
    }

    .collections-coming-soon { min-height: 48vh; padding: 36px 0; }

    .collections-hero {
        margin-bottom: 65px;
    }

    .collections-hero h1 {
        font-size: 62px;
    }

    .collection-category {
        grid-template-columns: 45px 1fr 25px;

        gap: 15px;

        min-height: 165px;

        padding: 25px 5px;
    }

    .collection-category.is-upcoming {
        grid-template-columns: 45px minmax(0, 1fr);
    }

    .collection-category.is-upcoming .category-status {
        grid-column: 2;
        justify-self: start;
    }

    .collection-category:hover {
        padding-left: 10px;
    }

    .category-number {
        font-size: 20px;
    }

    .category-content h2 {
        font-size: 34px;
    }

    .category-content p {
        font-size: 11px;
    }

    .category-arrow {
        font-size: 20px;
    }

}

/* =========================================
   ÇERÇEVELER BÖLÜMÜ
========================================= */

.frame-section {
    max-width: 1250px;
    margin: auto;
    padding: 110px 30px;
}

.frame-intro {
    position: relative;

    min-height: 420px;

    margin-top: 45px;
    padding: 70px 75px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(216, 185, 119, 0.10),
            transparent 38%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(81, 52, 79, 0.28),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.01)
        );

    border: 1px solid rgba(216, 185, 119, 0.14);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.25);
}


/* dekoratif çizgi */

.frame-intro::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -220px;
    bottom: -250px;

    border: 1px solid rgba(216, 185, 119, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* SOL TARAF */

.frame-intro-text {
    position: relative;

    z-index: 2;

    max-width: 650px;
}

.frame-eyebrow {
    display: block;

    margin-bottom: 22px;

    color: var(--gold);

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.frame-intro h3 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(48px, 5vw, 72px);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -1px;

    color: var(--ivory);
}

.frame-intro h3 span {
    color: var(--gold);
}

.frame-intro-text > p {
    max-width: 520px;

    margin: 28px 0 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


/* BUTON */

.frame-button {
    display: inline-flex;

    align-items: center;

    gap: 24px;

    margin-top: 35px;

    padding: 15px 0;

    color: var(--ivory);

    border-bottom: 1px solid rgba(216, 185, 119, 0.5);

    font-family: "Montserrat", sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.3s ease,
        gap 0.3s ease,
        border-color 0.3s ease;
}

.frame-button span {
    color: var(--gold);

    font-size: 18px;

    line-height: 1;

    transition: transform 0.3s ease;
}

.frame-button:hover {
    color: var(--gold);

    gap: 32px;

    border-color: var(--gold);
}

.frame-button:hover span {
    transform: translateX(5px);
}


/* SAĞ TARAF */

.frame-intro-detail {
    position: relative;

    z-index: 2;

    width: 190px;

    padding-left: 35px;

    border-left: 1px solid rgba(216, 185, 119, 0.25);
}

.frame-intro-detail > span {
    display: block;

    margin-bottom: 20px;

    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;

    letter-spacing: 5px;

    line-height: 1;
}

.frame-intro-detail p {
    margin: 0;

    color: rgba(243, 238, 223, 0.65);

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;

    line-height: 1.3;
}


/* MOBİL */

@media (max-width: 700px) {

    .frame-section {
        padding: 80px 18px;
    }

    .frame-intro {
        min-height: auto;

        padding: 50px 30px;

        flex-direction: column;

        align-items: flex-start;

        gap: 45px;
    }

    .frame-intro h3 {
        font-size: 50px;
    }

    .frame-intro-detail {
        width: 100%;

        padding-left: 20px;
    }

}

/* =========================================
   İSTEĞE ÖZEL ÇALIŞMALAR — PREMIUM
========================================= */

.custom-section {
    position: relative;
}

.custom-section .section-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 65px;
}


/* Ana çalışma alanı */

.custom-layout {
    position: relative;

    padding: 55px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(81, 52, 79, 0.24),
            transparent 35%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(216, 185, 119, 0.06),
            transparent 30%
        ),
        rgba(10, 13, 15, 0.38);

    border: 1px solid rgba(216, 185, 119, 0.14);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.25);
}


/* Sol taraf */

.custom-layout > div:first-child {
    position: relative;
}

.custom-layout > div:first-child::before {
    content: "";

    display: block;

    width: 112px;
    height: 24px;
    background: url("./images/ahenk-logo-transparent.png") left center / contain no-repeat;

    margin-bottom: 28px;

    color: rgba(216, 185, 119, 0.65);

    font-size: 8px;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* Adım çizgileri */

.form-step {
    position: relative;

    padding: 30px 0;

    border-bottom: 1px solid rgba(216, 185, 119, 0.10);
}

.form-step:first-of-type {
    padding-top: 0;
}

.form-step:last-of-type {
    border-bottom: 0;
}


/* Adım numaraları */

.step-title > span {
    position: relative;

    min-width: 28px;

    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 23px;
}


/* Başlıklar */

.step-title h3 {
    font-size: 28px;

    letter-spacing: -0.3px;
}

.step-title p {
    max-width: 420px;

    color: rgba(184, 180, 170, 0.72);
}


/* Form elemanlarını biraz daha premium yap */

.upload-box,
.option-button,
.select-wrap select,
textarea {
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.upload-box:hover {
    box-shadow:
        inset 0 0 35px rgba(216, 185, 119, 0.025);
}

.option-button:hover,
.option-button.active {
    box-shadow:
        0 0 25px rgba(216, 185, 119, 0.04);
}

.select-wrap select:focus,
textarea:focus {
    border-color: rgba(216, 185, 119, 0.65);

    box-shadow:
        0 0 25px rgba(216, 185, 119, 0.04);
}


/* Sağ önizleme alanı */

.preview-container {
    position: sticky;

    top: 110px;

    padding-left: 15px;
}

.preview-heading {
    padding-bottom: 22px;

    border-bottom: 1px solid rgba(216, 185, 119, 0.10);
}

.preview-heading h3 {
    font-size: 31px;
}


/* Oda alanı */

.table-room {
    min-height: 570px;

    margin-top: 25px;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(216, 185, 119, 0.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #292c2f,
            #151719
        );

    border: 1px solid rgba(216, 185, 119, 0.16);

    box-shadow:
        inset 0 0 120px rgba(0, 0, 0, 0.45),
        0 25px 60px rgba(0, 0, 0, 0.25);
}


/* Önizleme tablosu */

.preview-frame {
    box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(216, 185, 119, 0.05);
}


/* Önizleme boşken daha şık görünüm */

.preview-placeholder span {
    font-size: 38px;

    letter-spacing: 9px;

    opacity: 0.75;
}

.preview-placeholder small {
    letter-spacing: 2px;
}


/* Mobil */

@media (max-width: 850px) {

    .custom-layout {
        padding: 30px 25px;
    }

    .preview-container {
        padding-left: 0;
    }

    .table-room {
        min-height: 500px;
    }
}

@media (max-width: 520px) {

    .custom-layout {
        padding: 25px 18px;
    }

    .custom-layout > div:first-child::before {
        font-size: 7px;
        letter-spacing: 3px;
    }

    .step-title h3 {
        font-size: 24px;
    }

    .table-room {
        min-height: 420px;
    }
}

/* =========================================
   İSTEĞE ÖZEL - ÇERÇEVE ÖNİZLEMESİ
========================================= */

.preview-frame.frame-black {
    border: var(--frame-face-width, 12px) solid #111111;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.preview-frame.frame-gold {
    border: var(--frame-face-width, 12px) solid #D8B977;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.preview-frame.frame-wood {
    border: var(--frame-face-width, 12px) solid #6B4930;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.preview-frame.frame-none {
    border: none;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.35);
}

.preview-frame.frame-white { border: var(--frame-face-width, 12px) solid #eeeae2; box-shadow: 0 18px 35px rgba(0,0,0,.45), inset 0 0 0 1px rgba(35,35,35,.14); }
.preview-frame.frame-gray { border: var(--frame-face-width, 12px) solid #85827c; box-shadow: 0 18px 35px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); }
.preview-frame.frame-silver { border: var(--frame-face-width, 12px) solid #c6c5c0; box-shadow: 0 18px 35px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35); }
.preview-frame.frame-dark-wood { border: var(--frame-face-width, 12px) solid #33251d; box-shadow: 0 18px 35px rgba(0,0,0,.45), inset 0 0 0 1px rgba(216,185,119,.12); }
.preview-frame.frame-colorful { border: var(--frame-face-width, 12px) solid #9b725d; box-shadow: 0 18px 35px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.2); }

/* Kendin Tasarla giriş kartı ve tam sayfa tasarım alanı */
.products-section { max-width:1250px; margin:0 auto; padding:52px 30px 96px; }
.products-heading { margin:0 0 28px; text-align:center; }
.products-heading .section-number { color:var(--gold); font:500 9px "Montserrat",sans-serif; letter-spacing:2.2px; }
.products-heading h2 { margin:11px 0 8px; color:var(--ivory); font:400 clamp(38px,5vw,54px)/1 "Cormorant Garamond",serif; text-transform:none; }
.products-heading p { margin:0; color:var(--muted); font-size:11px; line-height:1.8; }
.products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.product-card { position:relative; display:flex; min-height:205px; flex-direction:column; justify-content:flex-end; gap:13px; padding:24px; overflow:hidden; color:var(--ivory); background:linear-gradient(145deg,rgba(216,185,119,.09),rgba(20,23,24,.92) 62%); border:1px solid rgba(216,185,119,.2); text-decoration:none; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.product-card::before { position:absolute; top:-42px; right:-20px; width:145px; height:145px; content:""; border:1px solid rgba(216,185,119,.12); transform:rotate(18deg); transition:transform .35s ease; }
.product-card:hover { transform:translateY(-4px); border-color:rgba(216,185,119,.55); background:linear-gradient(145deg,rgba(216,185,119,.15),rgba(20,23,24,.94) 62%); }
.product-card:hover::before { transform:rotate(32deg) scale(1.08); }
.product-card-index { position:absolute; top:18px; left:21px; color:rgba(216,185,119,.72); font:500 9px "Montserrat",sans-serif; letter-spacing:1.5px; }
.product-card-icon { position:absolute; top:28px; right:27px; color:var(--gold); font:400 34px/1 "Cormorant Garamond",serif; opacity:.82; }
.product-card-copy { display:grid; gap:7px; }
.product-card-copy strong { font:400 27px/1.05 "Cormorant Garamond",serif; }
.product-card-copy small { color:var(--muted); font-size:9px; line-height:1.6; }
.product-card-arrow { position:absolute; right:22px; bottom:23px; color:var(--gold-light); font-size:16px; transition:transform .2s ease; }
.product-card:hover .product-card-arrow { transform:translate(3px,-3px); }
.header-cart { text-decoration:none; }
@media(max-width:950px) { .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .products-section { padding:36px 24px 74px; }.products-grid { grid-template-columns:1fr; gap:10px; }.product-card { min-height:155px; padding:21px; }.product-card-icon { top:24px; } }
.design-entry-section { max-width: 1250px; margin: 0 auto; padding: 28px 30px 96px; }
.design-entry-card { position: relative; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: clamp(18px,3vw,38px); align-items: center; min-height: 190px; padding: clamp(26px,4vw,52px); overflow: hidden; border: 1px solid rgba(216,185,119,.28); background: radial-gradient(ellipse at 8% 50%,rgba(216,185,119,.12),transparent 40%),linear-gradient(115deg,rgba(24,27,28,.96),rgba(14,17,18,.96)); color: var(--ivory); text-decoration: none; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.design-entry-card:hover { transform: translateY(-4px); border-color: rgba(216,185,119,.62); box-shadow: 0 22px 60px rgba(0,0,0,.26); }
.design-entry-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(216,185,119,.35); border-radius: 50%; color: var(--gold); font-size: 30px; }
.design-entry-copy { display: grid; gap: 9px; }
.design-entry-copy .section-number { font: 500 9px "Montserrat",sans-serif; letter-spacing: 2.2px; }
.design-entry-copy strong { font: 400 clamp(34px,5vw,54px)/1 "Cormorant Garamond",serif; }
.design-entry-copy > span:last-child { max-width: 590px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.design-entry-action { display: flex; gap: 18px; align-items: center; padding: 15px 19px; border: 1px solid rgba(216,185,119,.34); color: var(--gold-light); font-size: 10px; letter-spacing: .5px; white-space: nowrap; }
.design-entry-action b { font-size: 19px; font-weight: 400; transition: transform .25s ease; }
.design-entry-card:hover .design-entry-action b { transform: translateX(4px); }
.custom-designer-page { max-width: 1500px; margin: 0 auto; padding: 38px clamp(18px,4vw,64px) 100px; }
.custom-designer-intro { max-width: 850px; margin: 24px auto 42px; text-align: center; }
.custom-designer-intro .section-number { font: 500 10px "Montserrat",sans-serif; letter-spacing: 2.5px; }
.custom-designer-intro h1 { margin: 18px 0 12px; font: 400 clamp(42px,7vw,76px)/1 "Cormorant Garamond",serif; }
.custom-designer-intro h1 span { color: var(--gold-light); }
.custom-designer-intro p { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.9; }
.designer-form-section { max-width: none; padding: 18px 0 0; }
.designer-form-section .section-heading { margin-bottom: 30px; }
.designer-form-section .section-heading h2 { font-size: clamp(32px,4vw,48px); }
.designer-form-section .custom-layout { grid-template-columns: minmax(0,1.08fr) minmax(380px,.92fr); gap: clamp(28px,4vw,60px); padding: clamp(22px,4vw,54px); }
.designer-form-section .custom-form { grid-column: 2; grid-row: 1; }
.designer-form-section .preview-container { top: 32px; }
.designer-form-section .preview-container { grid-column: 1; grid-row: 1; }
.designer-form-section .table-room { min-height: 520px; }
.designer-frame-controls { display: grid; gap: 15px; }
.designer-frame-controls > label { display: grid; gap: 8px; color: var(--muted); font-size: 11px; }
.designer-frame-controls select { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid rgba(216,185,119,.23); border-radius: 2px; outline: none; background: #171b1f; color: var(--ivory); font: 11px "Montserrat",sans-serif; }
.designer-frame-controls select:focus { border-color: var(--gold); }
.designer-frame-controls select:disabled { opacity: .56; }
.designer-profile-preview { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 10px; border: 1px solid rgba(216,185,119,.16); background: rgba(255,255,255,.025); }
.designer-profile-preview[hidden] { display: none; }
.designer-profile-preview img { display: block; width: 96px; height: 82px; object-fit: contain; background: #f8f7f4; }
.designer-profile-preview span { color: var(--ivory); font: 400 17px/1.4 "Cormorant Garamond",serif; }
.designer-profile-help { margin: -4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.designer-room-select { display: grid; grid-template-columns: auto minmax(150px,240px); gap: 14px; align-items: center; margin-top: 22px; color: var(--gold); font: 500 8px "Montserrat",sans-serif; letter-spacing: 1.6px; }
.designer-room-select select { min-height: 38px; padding: 0 11px; border: 1px solid rgba(216,185,119,.2); background: #171b1f; color: var(--ivory); font: 10px "Montserrat",sans-serif; }
.designer-crop-controls { display: grid; gap: 12px; margin: 14px 0 4px; padding: 14px 16px; border: 1px solid rgba(216,185,119,.14); background: rgba(10,12,13,.38); }
.designer-crop-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.designer-crop-mode .designer-choice { min-height: 40px; padding: 9px 10px; font-size: 9px; }
.designer-crop-mode .designer-choice.active::after { content: "✓"; }
.designer-crop-controls label { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; color: var(--ivory); font-size: 10px; }
.designer-crop-controls input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--gold); }
.designer-crop-controls input:disabled { opacity: .4; }
.designer-crop-controls output { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.designer-crop-controls p,.designer-preview-disclaimer { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.designer-preview-disclaimer { margin-top: 10px; }
.designer-type-grid, .designer-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.designer-size-unit { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 2px 0 14px; color: var(--muted); font-size: 10px; }
.designer-size-unit select { min-height: 38px; padding: 0 12px; border: 1px solid rgba(216,185,119,.2); background: #171b1f; color: var(--ivory); font: 10px "Montserrat",sans-serif; }
.custom-size-fields label b { font-weight: 400; }
.designer-type-grid .designer-choice:first-child { grid-column: 1 / -1; }
.designer-choice { min-height: 48px; padding: 11px 12px; border: 1px solid rgba(216,185,119,.2); background: rgba(255,255,255,.018); color: var(--muted); text-align: left; font: 10px/1.5 "Montserrat",sans-serif; cursor: pointer; transition: border-color .2s ease,background .2s ease,color .2s ease; }
.designer-choice:hover, .designer-choice.active { border-color: rgba(216,185,119,.72); background: rgba(216,185,119,.08); color: var(--ivory); }
.designer-choice.active::after { content: "✓"; float: right; color: var(--gold-light); }
.preview-frame.glass-clear .preview-inner::after, .preview-frame.glass-matte .preview-inner::after { position: absolute; z-index: 4; inset: 0; content: ""; pointer-events: none; background: linear-gradient(135deg,rgba(255,255,255,.19),transparent 36%,rgba(255,255,255,.025) 64%,transparent 76%); }
.preview-frame.glass-matte .preview-inner::after { background: linear-gradient(135deg,rgba(239,237,230,.28),rgba(230,228,220,.09) 55%,rgba(255,255,255,.2)); backdrop-filter: blur(.35px); }
.preview-inner.mat-single { padding: 8%; background: #f2efe8; box-shadow: inset 0 0 0 1px rgba(45,39,32,.14); }
.preview-inner.mat-double { padding: 10%; background: #e9e4d9; box-shadow: inset 0 0 0 1px rgba(45,39,32,.25),inset 0 0 0 5px #faf8f2,inset 0 0 0 6px rgba(45,39,32,.14); }
.preview-inner.mat-single img, .preview-inner.mat-double img { object-fit: contain; }
.table-room.scene-plain { background: radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.1),transparent 56%),linear-gradient(180deg,#77716a 0 72%,#4c4037 72% 75%,#292421 75% 100%); }
.table-room.scene-living { background: radial-gradient(ellipse at 50% 32%,rgba(246,224,185,.18),transparent 48%),linear-gradient(180deg,#aa9986 0 70%,#716151 70% 72%,#42372f 72% 100%); }
.table-room.scene-modern { background: radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.16),transparent 52%),linear-gradient(180deg,#b8b8b1 0 71%,#77766e 71% 73%,#484743 73% 100%); }
.table-room.scene-bedroom { background: radial-gradient(ellipse at 48% 28%,rgba(255,223,212,.16),transparent 50%),linear-gradient(180deg,#9b8580 0 70%,#67554f 70% 73%,#3c3332 73% 100%); }
.table-room.scene-gallery { background: repeating-linear-gradient(90deg,transparent 0 24%,rgba(20,18,16,.16) 24.1% 24.5%,transparent 24.6% 49%),linear-gradient(180deg,#a69b89 0 71%,#685a4a 71% 74%,#37302a 74% 100%); }
.table-room.scene-dark { background: radial-gradient(ellipse at 50% 27%,rgba(216,185,119,.12),transparent 52%),linear-gradient(180deg,#45413c 0 71%,#302c28 71% 74%,#171615 74% 100%); }
.table-room.scene-living::before,.table-room.scene-modern::before,.table-room.scene-bedroom::before,.table-room.scene-gallery::before,.table-room.scene-dark::before,.table-room.scene-plain::before { position:absolute; inset:0 0 29%; content:""; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 20% 80%,rgba(0,0,0,.16)),repeating-linear-gradient(0deg,transparent 0 48%,rgba(255,255,255,.035) 48.2% 48.5%,transparent 48.7% 100%); box-shadow:inset 0 0 110px rgba(0,0,0,.17); }
.table-room.scene-living .wall-light,.table-room.scene-modern .wall-light,.table-room.scene-bedroom .wall-light,.table-room.scene-gallery .wall-light,.table-room.scene-dark .wall-light,.table-room.scene-plain .wall-light { width:52%; height:44%; border-radius:0; background:linear-gradient(180deg,rgba(255,248,230,.15),transparent); filter:blur(35px); }
.table-room.scene-plain::after,.table-room.scene-living::after,.table-room.scene-modern::after,.table-room.scene-bedroom::after,.table-room.scene-gallery::after,.table-room.scene-dark::after { z-index:1; height:29%; background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.25)),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 25%); opacity:.8; }
.preview-frame.profile-ornate { filter: drop-shadow(0 18px 16px rgba(0,0,0,.36)); }
.preview-frame.profile-ornate::before { position:absolute; z-index:3; inset:2px; content:""; border:1px solid rgba(255,255,255,.24); pointer-events:none; box-shadow:inset 0 0 0 2px rgba(0,0,0,.18); }
.preview-frame.profile-woodgrain { background-image:repeating-linear-gradient(4deg,rgba(255,255,255,.055) 0 1px,rgba(0,0,0,.06) 1px 3px,transparent 3px 7px); }
.preview-frame.profile-metallic { border-image:linear-gradient(135deg,#fff4cc,#8e6c34 13%,#e5c278 28%,#96723e 43%,#f8dfa0 56%,#89672f 75%,#e1c27d) 1; }
.preview-frame.profile-accent-gold { box-shadow:0 24px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,244,206,.72),inset 0 0 0 3px rgba(98,65,23,.9),inset 0 0 0 5px rgba(240,207,132,.72); }
.preview-frame.profile-accent-silver { box-shadow:0 24px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.8),inset 0 0 0 3px rgba(85,85,80,.85),inset 0 0 0 5px rgba(223,223,216,.72); }
.preview-frame { box-sizing:border-box; padding:var(--frame-face-width,12px); background-clip:padding-box; box-shadow:0 24px 38px rgba(0,0,0,.48),inset 0 1px 1px rgba(255,255,255,.44),inset 0 -3px 5px rgba(0,0,0,.4); }
.preview-frame.frame-black { border-color:#111; border-style:solid; }
.preview-frame.frame-gold { border-color:#c5a05a; border-style:solid; }
.preview-frame.frame-wood { border-color:#70482b; border-style:solid; }
.preview-frame.frame-white { border-color:#eeeae2; border-style:solid; }
.preview-frame.frame-gray { border-color:#85827c; border-style:solid; }
.preview-frame.frame-silver { border-color:#c6c5c0; border-style:solid; }
.preview-frame.frame-dark-wood { border-color:#33251d; border-style:solid; }
.preview-frame.frame-colorful { border-color:#9b725d; border-style:solid; }
.preview-inner img { object-fit:contain; transform:scale(var(--artwork-zoom,1)); transition:transform .25s ease,object-position .25s ease; }
.preview-frame.image-cover .preview-inner img { object-fit:cover; }

@media (max-width: 850px) {
    .design-entry-section { padding: 20px 20px 72px; }
    .design-entry-card { grid-template-columns: 52px minmax(0,1fr); gap: 17px; }
    .design-entry-mark { width: 48px; height: 48px; }
    .design-entry-action { grid-column: 2; width: fit-content; }
    .designer-form-section .custom-layout { grid-template-columns: 1fr; }
    .designer-form-section .preview-container { grid-column: 1; grid-row: 1; }
    .designer-form-section .custom-form { grid-column: 1; grid-row: 2; }
    .designer-form-section .preview-container { position: relative; top: auto; }
}
@media (max-width: 520px) {
    .design-entry-section { padding: 12px 16px 60px; }
    .design-entry-card { grid-template-columns: 1fr; gap: 15px; padding: 25px 21px; }
    .design-entry-mark { width: 44px; height: 44px; }
    .design-entry-action { grid-column: 1; }
    .custom-designer-page { padding: 22px 14px 64px; }
    .custom-designer-intro { margin: 22px auto 30px; }
    .designer-form-section .custom-layout { padding: 22px 16px; }
    .designer-form-section .table-room { min-height: 390px; }
    .designer-type-grid, .designer-choice-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================
   AHENK - ÇERÇEVE KOLEKSİYONU SAYFASI
========================================= */

.frame-collection-page {
    max-width: 1250px;
    margin: auto;
    padding: 80px 30px 120px;
}

.frame-collection-hero {
    padding: 70px 0 90px;
    max-width: 850px;
}

.frame-collection-hero .section-number {
    display: block;
    margin-bottom: 28px;
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.frame-collection-hero h1 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(58px, 7vw, 100px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -2px;
}

.frame-collection-hero h1 span {
    display: block;
    color: var(--gold);
}

.frame-collection-hero p {
    max-width: 560px;
    margin-top: 35px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================
   RENKLER
========================================= */

.frame-colors-section {
    padding-top: 30px;
}

.frame-section-title {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 50px;
}

.frame-section-title > span {
    color: var(--gold);
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    line-height: 1;
}

.frame-section-title p {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 4px;
}

.frame-section-title h2 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 400;
    line-height: 1;
}


/* =========================================
   RENK KARTLARI
========================================= */

.frame-color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.frame-color-card {
    display: block;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(216, 185, 119, 0.12);
    background: rgba(255, 255, 255, 0.018);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.frame-color-card:hover {
    transform: translateY(-7px);
    border-color: rgba(216, 185, 119, 0.38);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.frame-color-card.is-upcoming {
    cursor: default;
}

.frame-color-card.is-upcoming:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(216, 185, 119, 0.12);
}

.frame-upcoming-label {
    display: inline-block;
    margin-top: 10px;
    letter-spacing: 0.8px;
}


/* =========================================
   RENK GÖRSEL ALANI
========================================= */

.frame-color-image {
    height: 250px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.frame-color-image span {
    position: relative;
    z-index: 2;
    padding: 9px 12px;
    border-radius: 2px;
    background: rgba(17, 21, 25, 0.72);
    color: var(--ivory);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* Siyah */

.black-frame {
    background:
        linear-gradient(
            135deg,
            #111111,
            #272727 50%,
            #0c0c0c
        );
}


/* Beyaz */

.white-frame {
    background:
        linear-gradient(
            135deg,
            #d8d5ce,
            #f0eee8 50%,
            #c8c5be
        );
}

.white-frame span {
    background: rgba(243, 238, 223, 0.92);
    color: #1e2328;
}


/* Ahşap */

.wood-frame {
    background:
        linear-gradient(
            135deg,
            #4a3021,
            #80583b 35%,
            #5a3926 70%,
            #321f16
        );
}


/* Altın */

.gold-frame {
    background:
        linear-gradient(
            135deg,
            #8e703b,
            #d8b977 35%,
            #f0d99b 50%,
            #9b7b42 75%,
            #66502b
        );
}

.gold-frame span {
    color: rgba(30, 35, 40, 0.55);
}


/* Gümüş */

.silver-frame {
    background:
        linear-gradient(
            135deg,
            #696969,
            #c7c7c7 35%,
            #eeeeee 50%,
            #8a8a8a 75%,
            #555555
        );
}

.silver-frame span {
    color: rgba(0, 0, 0, 0.35);
}


/* Gri */

.gray-frame {
    background:
        linear-gradient(
            135deg,
            #383a3b,
            #6b6d6e 50%,
            #2b2d2e
        );
}

.dark-wood-frame {
    background:
        linear-gradient(135deg, rgba(22, 13, 9, .1), rgba(17, 12, 10, .68)),
        repeating-linear-gradient(12deg, #563828 0 13px, #684734 14px 18px, #39271f 19px 34px);
}

.colorful-frame {
    background:
        linear-gradient(135deg, rgba(18, 17, 21, .12), rgba(18, 17, 21, .56)),
        linear-gradient(135deg, #a95346 0 24%, #c8954e 25% 47%, #627b69 48% 70%, #6a688e 71%);
}

.dark-wood-frame span,
.colorful-frame span {
    color: #fff6e6;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.frame-profile-range-section {
    margin-top: 110px;
    padding-top: 48px;
    border-top: 1px solid rgba(216, 185, 119, .16);
}

.frame-profile-range-intro {
    max-width: 560px;
    margin: 24px 0 28px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.frame-profile-range-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.frame-profile-range-grid article {
    position: relative;
    min-height: 142px;
    padding: 20px;
    border: 1px solid rgba(216, 185, 119, .14);
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}

.frame-profile-range-grid a {
    position: relative;
    display: block;
    min-height: 142px;
    padding: 20px;
    border: 1px solid rgba(216, 185, 119, .14);
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
    color: inherit;
    text-decoration: none;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.frame-profile-range-grid a:hover { transform: translateY(-3px); border-color: rgba(216,185,119,.42); background: rgba(216,185,119,.045); }
.frame-profile-range-grid a > span { color: var(--gold); font: 500 9px "Montserrat", sans-serif; letter-spacing: 1.5px; }
.frame-profile-range-grid a strong { display: block; margin-top: 18px; color: var(--ivory); font: 400 clamp(24px, 3vw, 34px)/1 "Cormorant Garamond", serif; }
.frame-profile-range-grid a strong small { color: var(--gold-light); font: 400 13px "Montserrat", sans-serif; }
.frame-profile-range-grid a p { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.frame-profile-range-grid a b { display: block; margin-top: 14px; color: var(--gold-light); font-size: 9px; font-weight: 500; letter-spacing: .5px; }

.profile-family-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8f7f4;
}
.frame-color-image.profile-family-image span {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(17,21,25,.86);
    color: var(--ivory);
}

.catalog-toolbar.profile-catalog-toolbar {
    grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(145px, 1fr)) auto auto;
}
.profile-catalog-toolbar .catalog-status { grid-column: 1 / -1; }

@media (max-width: 980px) {
    .catalog-toolbar.profile-catalog-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-catalog-toolbar .catalog-status { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .catalog-toolbar.profile-catalog-toolbar { grid-template-columns: 1fr; }
    .profile-catalog-toolbar .catalog-status { grid-column: auto; }
}

.frame-profile-range-grid article > span {
    color: var(--gold);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 1.5px;
}

.frame-profile-range-grid strong {
    display: block;
    margin-top: 18px;
    color: var(--ivory);
    font: 400 clamp(24px, 3vw, 34px)/1 "Cormorant Garamond", serif;
}

.frame-profile-range-grid strong small {
    color: var(--gold-light);
    font: 400 13px "Montserrat", sans-serif;
}

.frame-profile-range-grid p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 10px;
}

@media (max-width: 760px) {
    .frame-profile-range-section { margin-top: 76px; }
    .frame-profile-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .frame-profile-range-grid { gap: 8px; }
    .frame-profile-range-grid article { min-height: 126px; padding: 15px; }
}


/* =========================================
   KART BİLGİLERİ
========================================= */

.frame-color-info {
    padding: 25px 28px 30px;
}

.frame-color-info > span {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 2px;
}

.frame-color-info h3 {
    margin: 10px 0 5px;
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 400;
}

.frame-color-info p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.frame-color-info strong {
    display: block;
    margin-top: 22px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
}


/* =========================================
   MOBİL
========================================= */

@media (max-width: 850px) {

    .frame-collection-page {
        padding: 50px 20px 90px;
    }

    .frame-collection-hero {
        padding: 50px 0 70px;
    }

    .frame-color-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 560px) {

    .frame-collection-page {
        padding: 35px 18px 70px;
    }

    .frame-collection-hero h1 {
        font-size: 58px;
    }

    .frame-section-title {
        gap: 15px;
    }

    .frame-color-grid {
        grid-template-columns: 1fr;
    }

    .frame-color-image {
        height: 220px;
    }

}

/* Çerçeve sayfası AHENK logosu */

    color: var(--gold);
    text-decoration: none;
    font-family: "Cormorant Garamond", serif;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 7px;
    line-height: 1;
}

.collection-page-logo a:hover {
    color: var(--gold);
}

/* =========================================
   AHENK - SİYAH ÇERÇEVELER SAYFASI
========================================= */

.frame-model-page {
    max-width: 1250px;
    margin: auto;
    padding: 70px 30px 120px;
}


/* BAŞLIK */

.frame-model-header {
    padding: 70px 0 55px;
    max-width: 800px;
}

.frame-model-header > span {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 4px;
}

.frame-model-header h1 {
    margin: 25px 0 20px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(60px, 7vw, 92px);
    font-weight: 400;
    line-height: 0.85;
    letter-spacing: -2px;
}

.frame-model-header h1 strong {
    display: block;
    color: var(--gold);
    font-weight: 400;
}

.frame-model-header p {
    max-width: 560px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}


/* ARAÇ ÇUBUĞU */

.frame-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    margin-bottom: 35px;
    border-top: 1px solid rgba(216, 185, 119, 0.14);
    border-bottom: 1px solid rgba(216, 185, 119, 0.14);
}

.frame-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.frame-count strong {
    color: var(--gold);
    font-family: "Cormorant Garamond", serif;
    font-size: 30px;
    font-weight: 400;
}

.frame-count span {
    color: var(--muted);
    font-size: 11px;
}

.frame-sort-button {
    padding: 11px 18px;
    border: 1px solid rgba(216, 185, 119, 0.2);
    background: transparent;
    color: var(--ivory);
    font-size: 10px;
    letter-spacing: 1.5px;
    cursor: pointer;
}

.frame-sort-button span {
    margin-left: 10px;
    color: var(--gold);
}


/* MODEL ALANI */

.frame-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 18px;
}

.frame-product-card {
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(216, 185, 119, 0.16);
    background: rgba(255, 255, 255, 0.018);
}

.frame-product-image {
    display: grid;
    min-height: 240px;
    aspect-ratio: 4 / 3;
    place-items: center;
    padding: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.008)),
        #171a1d;
    color: rgba(216, 185, 119, 0.65);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
}

.frame-product-info {
    padding: 19px;
}

.frame-product-number {
    color: var(--gold);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 1.5px;
}

.frame-product-info h2 {
    min-height: 2.2em;
    margin: 10px 0 16px;
    color: var(--ivory);
    font: 400 24px/1.1 "Cormorant Garamond", serif;
}

.frame-product-info dl {
    display: grid;
    gap: 9px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.frame-product-info dl div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.frame-product-info dt,
.frame-product-info dd {
    margin: 0;
}

.frame-product-info dd {
    color: var(--ivory);
    text-align: right;
}

.profile-card { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.profile-card { position: relative; }
.profile-card-link { display: block; color: inherit; text-decoration: none; }
.profile-card-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.profile-card:focus-within { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.profile-card:hover { transform: translateY(-4px); border-color: rgba(216, 185, 119, .42); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.profile-photo { display: grid; min-height: 230px; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; padding: 10px; background: #f8f7f4; }
.profile-photo img { display: block; width: 100%; height: 100%; max-height: 290px; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s ease; }
.profile-card:hover .profile-photo img { transform: scale(1.045); }
.profile-price-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(216, 185, 119, .13); color: var(--gold-light); font-size: 10px; line-height: 1.6; }
.catalog-saved-toggle { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(216,185,119,.24); color: var(--gold-light); background: rgba(216,185,119,.045); font: 500 10px "Montserrat",sans-serif; white-space: nowrap; cursor: pointer; }
.catalog-saved-toggle:hover,.catalog-saved-toggle[aria-pressed="true"] { border-color: var(--gold); background: rgba(216,185,119,.12); }
.catalog-saved-toggle span { display: inline-grid; min-width: 19px; height: 19px; place-items: center; border-radius: 50%; color: var(--ivory); background: rgba(216,185,119,.18); font-size: 9px; }
.profile-save-button { position: absolute; z-index: 2; top: 11px; right: 11px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(29,31,33,.16); border-radius: 50%; color: #514638; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(0,0,0,.12); font: 24px/1 Arial,sans-serif; cursor: pointer; transition: transform .18s ease, color .18s ease, background .18s ease; }
.profile-save-button:hover { transform: scale(1.08); }
.profile-save-button[aria-pressed="true"] { color: #a34b43; background: #fff8f6; }
.profile-save-button:focus-visible,.catalog-saved-toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

@media (max-width: 520px) {
    .profile-photo { min-height: 190px; }
}

/* KATALOG SIRALAMA VE FİLTRELER */
[hidden] {
    display: none !important;
}

.catalog-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
    margin: 0 0 28px;
    padding: 22px;
    border: 1px solid rgba(216, 185, 119, 0.16);
    background: rgba(17, 21, 25, 0.55);
}

.catalog-toolbar-compact {
    grid-template-columns: minmax(210px, 1.4fr) minmax(210px, 1.2fr) auto auto;
}

.catalog-toolbar > label,
.catalog-price-filter label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font: 500 10px "Montserrat", sans-serif;
    letter-spacing: 0.5px;
}

.catalog-toolbar input,
.catalog-toolbar select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(216, 185, 119, 0.22);
    border-radius: 2px;
    background: #171a1d;
    color: var(--ivory);
    font: 12px "Montserrat", sans-serif;
}

.catalog-toolbar input::placeholder {
    color: #918c81;
}

.catalog-price-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.catalog-reset {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(216, 185, 119, 0.38);
    background: transparent;
    color: var(--gold-light);
    font: 500 10px "Montserrat", sans-serif;
    cursor: pointer;
}

.catalog-reset:hover {
    background: rgba(216, 185, 119, 0.1);
}

.catalog-status {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.catalog-toolbar :is(input, select):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.catalog-price-filter.is-unavailable > summary {
    color: var(--muted);
}

.catalog-filter-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.catalog-empty {
    padding: 30px;
    border: 1px dashed var(--border);
    color: var(--muted);
    text-align: center;
}

@media (max-width: 520px) {
    .catalog-toolbar {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

/* Sade katalog yerleşimi */
.catalog-toolbar {
    position: relative;
    grid-template-columns: minmax(190px, 1.4fr) minmax(145px, 0.9fr) minmax(210px, 1.2fr) auto auto;
    gap: 12px;
    margin: 8px 0 24px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid rgba(216, 185, 119, 0.16);
    background: transparent;
}

.catalog-toolbar > label,
.catalog-price-filter label {
    gap: 6px;
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.catalog-toolbar input,
.catalog-toolbar select {
    min-height: 40px;
    border-color: rgba(216, 185, 119, 0.17);
    background: rgba(255, 255, 255, 0.025);
    font-size: 11px;
    color-scheme: dark;
}

.catalog-toolbar select option,
.select-wrap select option {
    background-color: #171a1d;
    color: #f3eedf;
}

.catalog-price-filter {
    position: relative;
    display: block;
    min-width: 145px;
    align-self: end;
}

.catalog-price-filter > summary {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: 1px solid rgba(216, 185, 119, 0.17);
    color: var(--ivory);
    font-size: 11px;
    cursor: pointer;
    list-style: none;
}

.catalog-price-filter > summary::-webkit-details-marker {
    display: none;
}

.catalog-price-filter > summary::after {
    content: "+";
    color: var(--gold);
    font-size: 16px;
}

.catalog-price-filter[open] > summary::after {
    content: "−";
}

.catalog-price-filter > div {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 10;
    display: grid;
    width: min(290px, 82vw);
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(216, 185, 119, 0.24);
    background: #171a1d;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.catalog-price-filter:not([open]) > div {
    display: none;
}

.catalog-reset {
    min-height: 40px;
    padding: 0 12px;
    border-color: transparent;
    color: var(--muted);
    white-space: nowrap;
}

.catalog-status {
    color: rgba(184, 180, 170, 0.75);
    font-size: 10px;
}

.collection-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
    gap: 14px;
    border: 0;
}

.collection-category.is-upcoming {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 22px;
    min-height: 270px;
    padding: 24px;
    border: 1px solid rgba(216, 185, 119, 0.14);
    background: rgba(255, 255, 255, 0.018);
}

.collection-category.is-upcoming:hover {
    padding-left: 24px;
    border-color: rgba(216, 185, 119, 0.28);
    background: rgba(255, 255, 255, 0.025);
}

.collection-category.is-upcoming .category-content {
    grid-column: 1;
    grid-row: 2;
}

.collection-category.is-upcoming .category-content h2 {
    font-size: clamp(32px, 3vw, 40px);
}

.collection-category.is-upcoming .category-status {
    grid-column: 1;
    grid-row: 3;
    width: fit-content;
    padding: 7px 9px;
    font-size: 8px;
}

.collection-category-link { color: inherit; text-decoration: none; }
.collection-category-link .category-arrow { justify-self: end; }

.collection-featured-group {
    grid-column: 1 / -1;
    min-width: 0;
}

.collection-featured-group .catalog-showcase {
    max-width: none;
    margin: 14px 0 0;
}

.catalog-empty-state {
    max-width: 760px;
    margin: 20px auto 0;
    padding: clamp(32px, 6vw, 64px);
    border: 1px solid rgba(216, 185, 119, 0.16);
    background:
        radial-gradient(circle at 50% 0, rgba(216, 185, 119, 0.07), transparent 58%),
        rgba(255, 255, 255, 0.015);
    text-align: center;
}

.catalog-empty-mark {
    display: block;
    width: 104px;
    height: auto;
    margin: 0 auto;
    opacity: .62;
}

.catalog-empty-state h2 {
    margin: 18px 0 10px;
    font: 400 clamp(30px, 4vw, 42px)/1.1 "Cormorant Garamond", serif;
}

.catalog-empty-state p {
    max-width: 490px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .catalog-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-toolbar .catalog-status {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .catalog-toolbar {
        grid-template-columns: 1fr;
        gap: 11px;
        padding-bottom: 14px;
    }

    .catalog-toolbar .catalog-status {
        grid-column: 1;
    }

    .catalog-price-filter > div {
        right: auto;
        left: 0;
    }
}

@media (min-width: 901px) {
    .catalog-toolbar.catalog-toolbar-compact {
        grid-template-columns: minmax(210px, 1.4fr) minmax(210px, 1.2fr) auto auto;
    }
}

.frame-model-placeholder {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    border: 1px solid rgba(216, 185, 119, 0.12);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );
}

.frame-model-placeholder > span {
    margin-bottom: auto;
    color: rgba(216, 185, 119, 0.55);
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
}

.frame-model-placeholder p {
    margin: 0 0 5px;
    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
}

.frame-model-placeholder small {
    color: var(--muted);
    font-size: 10px;
}

/* SAYFALAMA */

.frame-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 70px;
}

.frame-pagination a {
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid rgba(216, 185, 119, 0.12);
    font-size: 10px;
    transition: 0.3s ease;
}

.frame-pagination a:hover,
.frame-pagination a.active {
    color: var(--gold);
    border-color: rgba(216, 185, 119, 0.45);
}


/* MOBİL */

@media (max-width: 850px) {

    .frame-model-page {
        padding: 50px 20px 90px;
    }

    .frame-model-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 550px) {

    .frame-model-page {
        padding: 35px 18px 70px;
    }

    .frame-model-header {
        padding: 50px 0 45px;
    }

    .frame-model-header h1 {
        font-size: 58px;
    }

    .frame-model-grid {
        grid-template-columns: 1fr;
    }

    .frame-model-placeholder {
        min-height: 300px;
    }

    .frame-toolbar {
        align-items: flex-start;
    }

}

.frame-model-info {
    padding-top: 16px;
}

.frame-model-series {
    margin: 0;
    color: #111111;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.frame-model-price {
    margin-top: 4px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 500;
}

.frame-model-info p {
    margin: 10px 0 5px;
    color: var(--ivory);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.frame-model-info small {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.2px;
}

.frame-model-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.frame-model-card .frame-model-photo {
    position: relative;
    height: 300px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );
}

.frame-model-card .frame-model-photo > span {
    color: rgba(216, 185, 119, 0.65);
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    line-height: 1;
}

.frame-model-card .frame-model-info {
    padding: 16px 4px 5px;
}

.frame-model-card .frame-model-series {
    color: #111111;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.frame-model-card .frame-model-price {
    margin-top: 4px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 500;
}

.frame-model-card .frame-model-info p {
    margin: 10px 0 5px;
    color: var(--ivory);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.frame-model-card .frame-model-info small {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.2px;
}

.frame-model-card:hover .frame-model-photo {
    border-color: rgba(216, 185, 119, 0.35);
}

.frame-model-card:hover .frame-model-info p {
    color: var(--gold);
}

/* Çerçeve ürün kartı - okunabilirlik */
.frame-model-card .frame-model-series {
    color: var(--ivory);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.frame-model-card .frame-model-price {
    margin-top: 5px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 600;
}

.frame-model-card .frame-model-info p {
    margin: 11px 0 6px;
    color: #F3F0E8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.frame-model-card .frame-model-info small {
    color: #B8B4AA;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.frame-model-card .frame-model-info p {
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1px;
}

.frame-model-card .frame-model-info small {
    font-size: 13px;
    color: #C4C0B6;
    letter-spacing: 0.3px;
}

.frame-model-card .frame-model-info p {
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.1px;
}

.frame-model-card .frame-model-info p strong {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.frame-model-card .frame-model-info small {
    font-size: 15px;
    color: #C4C0B6;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.frame-model-card .frame-model-info small {
    font-size: 48px;
    color: #C4C0B6;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.frame-model-card .frame-model-info small {
    font-size: 40px;
    color: #C4C0B6;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.frame-model-card .frame-model-info small {
    font-size: 30px;
    color: #C4C0B6;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.frame-model-card .frame-model-info small {
    font-size: 30px;
    color: #C4C0B6;
    opacity: 0.45;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* =========================================
   SOL HAMBURGER MENÜ
========================================= */

.side-menu-toggle {
    position: fixed;
    top: 15px;
left: 22px;
transform: none;

    width: 48px;
    height: 48px;

    z-index: 3000;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;

    border: 1px solid rgba(216, 185, 119, 0.35);
    border-radius: 50%;

    background: rgba(17, 21, 25, 0.82);

    backdrop-filter: blur(16px);

    cursor: pointer;

    transition: 0.35s ease;
}

.side-menu-toggle span {
    display: block;

    width: 18px;
    height: 1px;

    background: var(--gold);

    transition: 0.35s ease;
}

.side-menu-toggle:hover {
    border-color: var(--gold);
    box-shadow: 0 0 25px rgba(216, 185, 119, 0.12);
}

.side-menu-toggle:hover span {
    width: 22px;
}


/* MENÜ */

.side-menu {
    position: fixed;

    top: 0;
    left: 0;

    width: 330px;
    height: 100vh;

    z-index: 2500;

    background: rgba(17, 21, 25, 0.96);

    backdrop-filter: blur(25px);

    border-right: 1px solid rgba(216, 185, 119, 0.16);

    transform: translateX(-100%);

    transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);

    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35);
}

.side-menu.open {
    transform: translateX(0);
}

.side-menu-inner {
    height: 100%;

    padding: 55px 42px 35px;

    display: flex;
    flex-direction: column;
}


/* MARKA */

.side-menu-brand {
    padding-bottom: 45px;

    border-bottom: 1px solid rgba(216, 185, 119, 0.12);
}

.side-menu-brand span {
    display: block;

    color: var(--gold);

    font-family: "Cormorant Garamond", serif;

    font-size: 38px;
    font-weight: 500;

    letter-spacing: 6px;
}

.side-menu-logo {
    display: block;
    width: 155px;
    height: auto;
    margin: 0 0 8px;
}

.side-menu-brand small {
    display: block;

    margin-top: 8px;

    color: var(--muted);

    font-family: "Cormorant Garamond", serif;

    font-size: 16px;
}


/* LİNKLER */

.side-menu-links {
    display: flex;
    flex-direction: column;

    gap: 26px;

    padding-top: 48px;
}

.side-menu-links a {
    position: relative;

    width: fit-content;

    color: var(--ivory);

    text-decoration: none;

    font-family: "Inter", sans-serif;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: 0.3s ease;
}

.side-menu-links a::before {
    content: "";

    position: absolute;

    left: -18px;
    top: 50%;

    width: 0;
    height: 1px;

    background: var(--gold);

    transition: 0.3s ease;
}

.side-menu-links a:hover {
    color: var(--gold);

    transform: translateX(8px);
}

.side-menu-links a:hover::before {
    width: 10px;
}


/* ALT */

.side-menu-footer {
    margin-top: auto;

    padding-top: 25px;

    border-top: 1px solid rgba(216, 185, 119, 0.12);

    color: #77746D;

    font-size: 9px;

    letter-spacing: 1.5px;

    line-height: 1.7;

    text-transform: uppercase;
}


/* AÇILINCA BUTON X OLSUN */

.side-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.side-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.side-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* MAĞAZA BİLGİLERİ */
.store-info-section {
    max-width: 1250px;
    margin: 0 auto;
    padding: 90px 30px;
}

.store-info-heading {
    max-width: 700px;
    margin: 0 auto 38px;
    text-align: center;
}

.store-info-heading h2 {
    margin: 12px 0;
    font: 500 clamp(32px, 5vw, 54px)/1.1 "Cormorant Garamond", serif;
}

.store-info-heading h2 span {
    color: var(--gold-light);
}

.store-info-heading p,
.store-info-card p {
    color: var(--muted);
    line-height: 1.75;
}

.store-info-contact {
    display: flex;
    width: fit-content;
    gap: 10px;
    align-items: center;
    margin: 28px auto 0;
    padding: 13px 20px;
    border: 1px solid var(--gold);
    color: var(--gold-light);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.store-info-contact:hover {
    background: var(--gold);
    color: var(--navy-dark);
}

.store-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.store-info-card {
    padding: 24px;
    border: 1px solid var(--border);
    background: rgba(17, 21, 25, 0.45);
}

.store-info-card h3 {
    margin: 0;
    color: var(--gold-light);
    font: 500 22px "Cormorant Garamond", serif;
}

.store-info-card p {
    margin: 12px 0 0;
    font-size: 13px;
}

/* SİPARİŞ SÜRECİ */
.order-process-section {
    max-width: 1250px;
    margin: 0 auto;
    padding: 82px 30px 94px;
    border-top: 1px solid rgba(216, 185, 119, 0.12);
}

.order-process-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.order-process-heading h2 {
    margin: 12px 0;
    font: 500 clamp(32px, 5vw, 54px)/1.1 "Cormorant Garamond", serif;
}

.order-process-heading h2 span {
    color: var(--gold-light);
}

.order-process-heading p {
    max-width: 590px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.order-process-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: order-step;
}

.order-process-card {
    min-height: 205px;
    padding: 24px 22px;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(30, 35, 40, 0.72), rgba(17, 21, 25, 0.42));
}

.order-step-number {
    display: block;
    margin-bottom: 22px;
    color: var(--gold);
    font: 500 20px "Cormorant Garamond", serif;
    letter-spacing: 1px;
}

.order-process-card h3 {
    margin: 0;
    color: var(--ivory);
    font: 500 23px/1.2 "Cormorant Garamond", serif;
}

.order-process-card p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
}

/* SIK SORULAN SORULAR */
.faq-list {
    max-width: 850px;
    margin: 0 auto;
    border-top: 1px solid var(--border);
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item summary {
    position: relative;
    padding: 22px 48px 22px 2px;
    color: var(--ivory);
    cursor: pointer;
    font: 500 22px/1.35 "Cormorant Garamond", serif;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    color: var(--gold);
    font: 300 25px "Montserrat", sans-serif;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
    color: var(--gold-light);
}

.faq-item p {
    max-width: 700px;
    margin: -4px 42px 22px 2px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 850px) {
    .order-process-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .store-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .order-process-section {
        padding: 65px 18px 72px;
    }

    .order-process-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .order-process-card {
        min-height: 0;
        padding: 20px;
    }

    .order-step-number {
        margin-bottom: 12px;
    }

    .store-info-section {
        padding: 65px 18px;
    }

    .faq-item summary {
        padding: 18px 38px 18px 2px;
        font-size: 20px;
    }

    .faq-item p {
        margin-right: 8px;
        font-size: 12px;
    }

    .store-info-grid {
        grid-template-columns: 1fr;
    }
}


/* MOBİL */

@media (max-width: 850px) {

    .side-menu-toggle {
        left: 15px;
        width: 44px;
        height: 44px;
    }

    .side-menu {
        width: min(330px, 88vw);
    }

    .side-menu-inner {
        padding: 45px 30px 30px;
    }

}

.designer-live-profile { margin-top: 18px; padding: 16px; border: 1px solid rgba(216,185,119,.16); background: rgba(255,255,255,.018); transition: border-color .25s ease, background .25s ease; }
.designer-live-profile.has-profile { border-color: rgba(216,185,119,.48); background: rgba(216,185,119,.045); }
.designer-live-profile-label { display: block; margin-bottom: 12px; color: var(--gold); font: 500 8px "Montserrat",sans-serif; letter-spacing: 1.8px; }
.designer-live-profile-content { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 15px; align-items: center; }
.designer-live-profile-content img { display: block; width: 92px; height: 78px; object-fit: contain; background: #f8f7f4; }
.designer-live-profile-content img[src=""] { visibility: hidden; }
.designer-live-profile-content strong { display: block; color: var(--ivory); font: 400 19px/1.3 "Cormorant Garamond",serif; }
.designer-live-profile-content span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.preview-frame.profile-accent-gold { box-shadow: 0 18px 35px rgba(0,0,0,.45), inset 0 0 0 2px #d8b977, inset 0 0 0 5px rgba(23,18,12,.75); }
.preview-frame.profile-accent-silver { box-shadow: 0 18px 35px rgba(0,0,0,.45), inset 0 0 0 2px #dedbd3, inset 0 0 0 5px rgba(23,23,22,.72); }
.designer-compare-button { display:block; width:100%; margin:14px 0 4px; padding:12px 15px; border:1px solid rgba(216,185,119,.32); background:rgba(216,185,119,.055); color:var(--ivory); text-align:center; font:500 9px "Montserrat",sans-serif; letter-spacing:.5px; cursor:pointer; transition:background .2s,border-color .2s; }
.designer-compare-button:hover,.designer-compare-button[aria-pressed="true"] { border-color:rgba(216,185,119,.72); background:rgba(216,185,119,.13); }
.preview-frame { isolation:isolate; overflow:visible; background-color:#191715; border:var(--frame-face-width,12px) solid #282522; padding:0; box-shadow:0 22px 42px rgba(0,0,0,.47),inset 0 1px 1px rgba(255,255,255,.55),inset 0 -4px 7px rgba(0,0,0,.52); }
.preview-frame.frame-black { background:linear-gradient(135deg,#63605d 0%,#171717 12%,#090909 33%,#242323 49%,#080808 73%,#44413b 100%); border-color:transparent; border-image:linear-gradient(135deg,#66615c,#111 15%,#050505 48%,#302c26 65%,#080808 85%,#4c4942) 1; }
.preview-frame.frame-gold { background:linear-gradient(135deg,#fff1bd 0%,#a77c35 12%,#e7c576 28%,#8e682e 43%,#f3d992 55%,#9c7130 73%,#5e4727 88%,#e1c17b); border-color:transparent; border-image:linear-gradient(135deg,#fff1bd,#a77c35 12%,#e7c576 28%,#8e682e 43%,#f3d992 55%,#9c7130 73%,#5e4727 88%,#e1c17b) 1; }
.preview-frame.frame-silver { background:linear-gradient(135deg,#fff 0%,#999b9b 16%,#e7e7e3 31%,#888986 48%,#f6f6f2 62%,#858681 82%,#deddd7); border-color:transparent; border-image:linear-gradient(135deg,#fff,#999b9b 16%,#e7e7e3 31%,#888986 48%,#f6f6f2 62%,#858681 82%,#deddd7) 1; }
.preview-frame.frame-wood,.preview-frame.frame-dark-wood { background:repeating-linear-gradient(7deg,rgba(255,218,163,.1) 0 1px,transparent 1px 5px),linear-gradient(135deg,#a0794e,#40291b 24%,#68452a 43%,#2b1d16 66%,#805c39 83%,#34251c); border-color:transparent; border-image:linear-gradient(135deg,#a0794e,#40291b 24%,#68452a 43%,#2b1d16 66%,#805c39 83%,#34251c) 1; }
.preview-frame.frame-white { background:linear-gradient(135deg,#fff,#c9c5bb 18%,#f8f5ed 37%,#c4c0b6 60%,#fff 82%,#dedbd2); border-color:transparent; border-image:linear-gradient(135deg,#fff,#c9c5bb 18%,#f8f5ed 37%,#c4c0b6 60%,#fff 82%,#dedbd2) 1; }
.preview-frame.frame-gray,.preview-frame.frame-colorful { background:linear-gradient(135deg,#ddd8cd,#605d58 18%,#9b725d 37%,#47433f 63%,#c2b8a8 85%,#504c46); border-color:transparent; border-image:linear-gradient(135deg,#ddd8cd,#605d58 18%,#9b725d 37%,#47433f 63%,#c2b8a8 85%,#504c46) 1; }
.profile-frame-texture { position:absolute; z-index:1; inset:calc(0px - var(--frame-face-width,12px)); display:none; width:calc(100% + var(--frame-face-width,12px) + var(--frame-face-width,12px)); height:calc(100% + var(--frame-face-width,12px) + var(--frame-face-width,12px)); object-fit:fill; pointer-events:none; opacity:.94; filter:contrast(1.08) saturate(.95); }
.profile-frame-texture[src]:not([src=""]) { display:block; }
.preview-inner { position:relative; z-index:2; }
.preview-frame.compare-no-frame { border:0!important; border-image:none!important; padding:0!important; background:transparent!important; box-shadow:0 16px 30px rgba(0,0,0,.4)!important; filter:none!important; }
.preview-frame.compare-no-frame .profile-frame-texture { display:none; }
.preview-frame.compare-no-frame::before { display:none; }
.preview-frame.profile-ornate:not(.compare-no-frame) { outline:1px solid rgba(249,226,171,.5); outline-offset:-3px; }
.preview-frame.profile-woodgrain:not(.compare-no-frame) { background-blend-mode:screen,normal; }
.preview-frame.profile-accent-gold:not(.compare-no-frame) { box-shadow:0 22px 42px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,242,200,.9),inset 0 0 0 3px rgba(93,63,25,.94),inset 0 0 0 5px rgba(237,203,126,.8); }
.preview-frame.profile-accent-silver:not(.compare-no-frame) { box-shadow:0 22px 42px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.96),inset 0 0 0 3px rgba(70,70,66,.92),inset 0 0 0 5px rgba(224,224,218,.83); }
.designer-live-profile-content { grid-template-columns: minmax(105px,130px) minmax(0,1fr); }
.designer-live-profile-content img { width:100%; height:110px; padding:5px; border:1px solid rgba(30,30,30,.12); background:#f8f7f4; }
@media (max-width:520px) { .designer-live-profile-content { grid-template-columns:82px minmax(0,1fr); }.designer-live-profile-content img { width:82px; height:76px; } }
.designer-stepper { margin:4px 0 4px; padding:0 0 18px; border-bottom:1px solid rgba(216,185,119,.16); }
.designer-stepper ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.designer-stepper-button { display:flex; width:100%; min-height:42px; gap:9px; align-items:center; padding:7px 9px; border:1px solid rgba(216,185,119,.13); background:rgba(255,255,255,.018); color:var(--muted); text-align:left; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.designer-stepper-index { display:grid; width:24px; height:24px; flex:0 0 24px; place-items:center; border:1px solid rgba(216,185,119,.25); border-radius:50%; color:#c1b99e; font:500 8px "Montserrat",sans-serif; }
.designer-stepper-button>span:last-child { overflow:hidden; font:500 8px/1.3 "Montserrat",sans-serif; text-overflow:ellipsis; }
.designer-stepper-button[aria-current="step"] { border-color:rgba(216,185,119,.68); background:rgba(216,185,119,.09); color:var(--ivory); }
.designer-stepper-button[aria-current="step"] .designer-stepper-index,.designer-stepper-button.is-complete .designer-stepper-index { border-color:var(--gold); color:var(--navy-dark); background:var(--gold); }
.designer-form-section .form-step[hidden] { display:none!important; }
.designer-form-section .form-step.is-active { padding:23px 0 14px; border-bottom:0; animation:designerStepIn .24s ease both; }
@keyframes designerStepIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.designer-step-actions { display:flex; min-height:42px; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; margin-top:24px; padding-top:15px; border-top:1px solid rgba(216,185,119,.12); }
.designer-step-actions button { min-height:39px; padding:0 15px; border:1px solid rgba(216,185,119,.3); background:transparent; color:var(--ivory); font:500 9px "Montserrat",sans-serif; cursor:pointer; }
.designer-step-actions .designer-step-next { border-color:var(--gold); background:var(--gold); color:#161512; }
.designer-step-actions .designer-step-prev { margin-right:auto; color:var(--muted); }
.designer-step-actions button:hover { border-color:var(--gold-light); }
.designer-step-actions button[hidden] { display:none!important; }
.designer-step-error { flex:1 1 100%; margin:0; color:#f0bc9e; font-size:10px; }
.designer-step-error:empty { display:none; }
.designer-native-profile-select { position:absolute!important; width:1px!important; min-width:1px!important; height:1px!important; min-height:1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; clip-path:inset(50%)!important; }
.designer-profile-search { display:grid; gap:7px; margin-top:3px; color:var(--muted); font-size:10px; }
.designer-profile-search input { min-height:42px; padding:0 12px; border:1px solid rgba(216,185,119,.21); border-radius:2px; outline:none; background:#171b1f; color:var(--ivory); font:10px "Montserrat",sans-serif; }
.designer-profile-search input:focus { border-color:var(--gold); }
.designer-profile-search input:disabled { opacity:.5; }
.designer-profile-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:380px; overflow:auto; scrollbar-color:rgba(216,185,119,.4) transparent; scrollbar-width:thin; }
.designer-profile-card { min-width:0; padding:6px; border:1px solid rgba(216,185,119,.15); background:rgba(255,255,255,.025); color:var(--ivory); text-align:left; cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.designer-profile-card:hover { transform:translateY(-2px); border-color:rgba(216,185,119,.5); }
.designer-profile-card[aria-selected="true"] { border-color:var(--gold); background:rgba(216,185,119,.1); box-shadow:inset 0 0 0 1px rgba(216,185,119,.14); }
.designer-profile-card img { display:block; width:100%; height:58px; object-fit:contain; background:#f8f7f4; }
.designer-profile-card strong { display:-webkit-box; min-height:31px; margin-top:6px; overflow:hidden; color:var(--ivory); font:500 8px/1.45 "Montserrat",sans-serif; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.designer-profile-card span { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.designer-profile-more { width:100%; min-height:37px; margin-top:8px; border:1px solid rgba(216,185,119,.2); background:rgba(216,185,119,.045); color:var(--gold-light); font:500 9px "Montserrat",sans-serif; cursor:pointer; }
.designer-profile-more[hidden] { display:none; }
.designer-profile-flip { width:100%; min-height:38px; margin-top:8px; border:1px solid rgba(216,185,119,.2); background:transparent; color:var(--ivory); font:500 9px "Montserrat",sans-serif; cursor:pointer; }
.designer-profile-flip:disabled { opacity:.45; cursor:not-allowed; }
.preview-frame.profile-flipped .profile-frame-texture { transform:scaleX(-1); }
.designer-profile-zoom-button { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:0; background:#f8f7f4; cursor:zoom-in; }
.designer-profile-zoom-button span { position:absolute; right:4px; bottom:4px; margin:0; padding:4px 6px; background:rgba(15,16,16,.82); color:#fff; font:500 7px "Montserrat",sans-serif; }
.designer-profile-zoom-button:disabled { cursor:default; }
.designer-profile-zoom-button:disabled span { display:none; }
.designer-profile-dialog { position:fixed; width:min(680px,calc(100% - 32px)); max-width:none; max-height:calc(100% - 32px); padding:28px; border:1px solid rgba(216,185,119,.38); background:#f7f6f2; color:#1d1d1b; box-shadow:0 30px 100px rgba(0,0,0,.65); }
.designer-profile-dialog::backdrop { background:rgba(7,9,10,.82); backdrop-filter:blur(5px); }
.designer-profile-dialog[open] { display:grid; justify-items:center; gap:10px; }
.designer-profile-dialog>img { display:block; width:100%; max-height:65vh; object-fit:contain; }
.designer-profile-dialog h3 { margin:6px 32px 0; text-align:center; font:400 23px/1.3 "Cormorant Garamond",serif; }
.designer-profile-dialog p { margin:0; color:#69655c; font-size:9px; }
.designer-profile-dialog-close { position:absolute; top:9px; right:10px; display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(0,0,0,.14); background:rgba(255,255,255,.8); color:#222; font-size:23px; cursor:pointer; }
.designer-no-frame { width:100%; min-height:39px; border:1px solid rgba(216,185,119,.2); background:transparent; color:var(--muted); font:500 9px "Montserrat",sans-serif; cursor:pointer; }
.designer-no-frame[aria-pressed="true"] { border-color:var(--gold); background:rgba(216,185,119,.1); color:var(--gold-light); }
.designer-print-summary { width:100%; min-height:42px; margin-top:12px; border:1px solid rgba(216,185,119,.33); background:rgba(216,185,119,.06); color:var(--ivory); font:500 9px "Montserrat",sans-serif; cursor:pointer; }
.designer-print-summary:hover { border-color:var(--gold); background:rgba(216,185,119,.12); }
@media(prefers-reduced-motion:reduce) { .designer-form-section .form-step.is-active { animation:none; }.designer-profile-card,.designer-stepper-button,.designer-step-actions button { transition:none; } }
@media print {
    body.custom-designer-body { background:#fff!important; color:#171715!important; }
    body.custom-designer-body .collection-page-header,body.custom-designer-body .site-header,body.custom-designer-body .site-footer,body.custom-designer-body .designer-stepper,body.custom-designer-body .designer-step-actions,body.custom-designer-body .designer-crop-controls,body.custom-designer-body .designer-room-select,body.custom-designer-body .designer-compare-button,body.custom-designer-body .designer-preview-disclaimer,body.custom-designer-body .designer-profile-search,body.custom-designer-body .designer-profile-gallery,body.custom-designer-body .designer-profile-more,body.custom-designer-body .designer-profile-flip,body.custom-designer-body .designer-no-frame,body.custom-designer-body .designer-print-summary,body.custom-designer-body .designer-profile-dialog { display:none!important; }
    body.custom-designer-body .custom-designer-page { width:100%; max-width:none; padding:12mm; }
    body.custom-designer-body .custom-designer-intro { margin:0 0 8mm; }
    body.custom-designer-body .custom-designer-intro h1,body.custom-designer-body .custom-designer-intro p,body.custom-designer-body .section-heading h2 { color:#191916!important; }
    body.custom-designer-body .designer-form-section .custom-layout { grid-template-columns:1fr 1fr; gap:8mm; padding:0; border:0; background:transparent; }
    body.custom-designer-body .designer-form-section .custom-form { grid-column:2; grid-row:1; }
    body.custom-designer-body .designer-form-section .preview-container { position:static; grid-column:1; grid-row:1; }
    body.custom-designer-body .designer-form-section .form-step[hidden] { display:none!important; }
    body.custom-designer-body .designer-form-section .form-step.is-active { padding:0; }
    body.custom-designer-body .table-room { min-height:105mm; border:1px solid #cfcac0; box-shadow:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
    body.custom-designer-body .preview-frame { filter:none; }
    body.custom-designer-body .designer-live-profile,body.custom-designer-body .summary-box { break-inside:avoid; border:1px solid #d4cdbd; background:#fff!important; color:#171715!important; }
    body.custom-designer-body .designer-live-profile strong,body.custom-designer-body .summary-title,body.custom-designer-body #summaryContent,body.custom-designer-body #summaryContent strong,body.custom-designer-body #summaryContent span { color:#171715!important; }
    body.custom-designer-body .designer-order-note { color:#555!important; }
}
.designer-color-suggestions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px; border:1px solid rgba(216,185,119,.15); background:rgba(216,185,119,.045); }
.designer-color-suggestions[hidden] { display:none; }
.designer-color-suggestions span { flex:1 0 100%; color:var(--muted); font-size:8px; }
.designer-color-suggestions button { min-height:29px; padding:0 9px; border:1px solid rgba(216,185,119,.26); background:rgba(0,0,0,.12); color:var(--ivory); font:500 8px "Montserrat",sans-serif; cursor:pointer; }
.designer-color-suggestions button:hover { border-color:var(--gold); color:var(--gold-light); }
.upload-box { position:relative; }
.upload-box input { position:absolute; z-index:2; inset:0; display:block; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload-box:focus-within,.upload-box.is-dragover { border-color:var(--gold); background:rgba(216,185,119,.07); box-shadow:0 0 0 3px rgba(216,185,119,.09); }
.preview-frame.image-cover .preview-inner img { cursor:grab; touch-action:none; }
.preview-frame.is-image-dragging .preview-inner img { cursor:grabbing; }
@media(max-width:520px) { .designer-stepper ol { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.designer-stepper-button { min-height:38px; gap:6px; padding:5px; }.designer-stepper-index { width:22px; height:22px; flex-basis:22px; }.designer-stepper-button>span:last-child { font-size:7px; }.designer-profile-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:340px; }.designer-profile-card img { height:66px; } }
.designer-order-note { margin: 16px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
@media (max-width: 520px) {
    .designer-live-profile { padding: 12px; }
    .designer-live-profile-content { grid-template-columns: 72px minmax(0,1fr); gap: 11px; }
    .designer-live-profile-content img { width: 72px; height: 66px; }
}

/* PRODUCT PROFILE DETAIL */
.frame-detail-page { width: min(1360px, 100% - 48px); margin: 0 auto; padding: 28px 0 84px; color: var(--ivory); }
.frame-detail-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 28px; color: var(--muted); font-size: 11px; }
.frame-detail-breadcrumb a,.frame-detail-back a { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.frame-detail-breadcrumb a:hover,.frame-detail-back a:hover { color: var(--gold-light); }
.frame-detail-breadcrumb strong { color: var(--ivory); font-weight: 500; }
.frame-detail-top { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap: clamp(34px,6vw,92px); align-items: start; }
.frame-detail-main-image { position: relative; min-height: 440px; display: grid; place-items: center; overflow:hidden; padding: 34px; background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); border: 1px solid rgba(216,185,119,.14); }
.frame-detail-zoom { width: 100%; cursor: zoom-in; color: inherit; text-align: center; }
.frame-detail-main-image img { display: block; width: 100%; max-height: 520px; aspect-ratio: 1.25 / 1; object-fit: contain; transition: transform .38s ease; }
.frame-detail-main-image.view-corner img { transform:scale(1.85); transform-origin:52% 57%; }
.frame-detail-main-image.view-face img { transform:scale(2.35); transform-origin:35% 48%; }
.frame-detail-zoom-hint { position: absolute; right: 14px; bottom: 14px; padding: 8px 10px; color: var(--ivory); background: rgba(17,21,25,.82); border: 1px solid rgba(216,185,119,.22); font-size: 10px; }
.frame-gallery-views { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:10px; margin-top:14px; }
.frame-gallery-option { min-width:0; padding:7px; color:var(--muted); background:rgba(255,255,255,.018); border:1px solid rgba(216,185,119,.13); cursor:pointer; text-align:left; transition:border-color .2s ease,color .2s ease,background .2s ease; }
.frame-gallery-option:hover,.frame-gallery-option.is-active { color:var(--ivory); border-color:rgba(216,185,119,.55); background:rgba(216,185,119,.045); }
.frame-gallery-option>span { display:block; height:64px; overflow:hidden; background:#f8f7f4; }
.frame-gallery-option img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.frame-gallery-option[data-gallery-view="corner"] img { transform:scale(1.8); transform-origin:52% 57%; }
.frame-gallery-option[data-gallery-view="face"] img { transform:scale(2.2); transform-origin:35% 48%; }
.frame-gallery-option strong { display:block; overflow:hidden; padding-top:7px; font-size:9px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.frame-gallery-caption { min-height:30px; margin:9px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
.frame-detail-summary { padding-top: 12px; }
.frame-detail-eyebrow,.frame-measure-heading>span,.frame-measure-result>span { color: var(--gold); font: 500 9px/1.6 Inter,sans-serif; letter-spacing: 2px; }
.frame-detail-summary h1 { margin: 15px 0 12px; color: var(--ivory); font: 400 clamp(34px,4vw,52px)/1.08 "Cormorant Garamond",serif; text-transform: none; }
.frame-detail-rating { margin: 0; color: var(--muted); font-size: 11px; }
.frame-detail-rating span { margin-right: 7px; color: var(--gold); letter-spacing: 2px; }
.frame-detail-divider { height: 1px; margin: 22px 0; background: rgba(216,185,119,.2); }
.frame-detail-description { max-width: 530px; color: #d1cdc4; font-size: 13px; line-height: 1.9; }
.frame-detail-specs { margin: 22px 0; border-top: 1px solid rgba(255,255,255,.08); }
.frame-detail-specs>div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.frame-detail-specs>div[hidden] { display: none; }
.frame-detail-specs dt { color: var(--muted); }.frame-detail-specs dd { margin: 0; color: var(--ivory); font-weight: 500; }
.frame-detail-notice { display: flex; gap: 13px; padding: 17px; margin: 22px 0; background: rgba(216,185,119,.06); border: 1px solid rgba(216,185,119,.2); }
.frame-detail-notice>span { color: var(--gold); }.frame-detail-notice p { display: grid; gap: 5px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.frame-detail-notice strong { color: var(--ivory); font-size: 12px; }
.frame-detail-design-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: var(--navy-dark); background: var(--gold); text-decoration: none; font-size: 12px; font-weight: 600; transition: background .2s ease, transform .2s ease; }.frame-detail-design-link:hover { background: var(--gold-light); transform: translateY(-2px); }
.frame-share-button { width: 100%; display:flex; justify-content:space-between; margin-top: 9px; padding: 13px 2px; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid rgba(216,185,119,.15); cursor: pointer; font: 500 11px Inter,sans-serif; text-align:left; }.frame-share-button:hover { color: var(--gold-light); }
.frame-share-status { display:block; min-height:18px; padding-top:5px; color:var(--gold-light); font-size:10px; }
.frame-measure-tool { margin-top: 86px; padding: clamp(24px,4vw,54px); background: rgba(255,255,255,.025); border: 1px solid rgba(216,185,119,.15); }
.frame-measure-heading { max-width: 710px; margin-bottom: 32px; }.frame-measure-heading h2 { margin: 10px 0; font: 400 clamp(30px,4vw,42px)/1.1 "Cormorant Garamond",serif; text-transform: none; }.frame-measure-heading p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.frame-measure-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); gap: clamp(30px,5vw,70px); align-items: start; }
.frame-measure-unit { display:grid; max-width:300px; gap:8px; margin-bottom:20px; color:#d8d3c9; font-size:11px; }
.frame-measure-unit select { height:44px; padding:0 12px; color:var(--ivory); background:#1a1e21; border:1px solid rgba(216,185,119,.24); font:inherit; }
.frame-measure-unit option { color:#f3eedf; background:#1a1e21; }
.frame-size-presets { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 20px; }
.frame-size-presets>span { width:100%; margin-bottom:2px; color:var(--muted); font-size:10px; }
.frame-size-presets button { padding:8px 10px; color:#e3ded3; background:rgba(255,255,255,.03); border:1px solid rgba(216,185,119,.16); cursor:pointer; font:500 10px Inter,sans-serif; }
.frame-size-presets button:hover,.frame-size-presets button.is-selected { color:var(--navy-dark); background:var(--gold); border-color:var(--gold); }
.frame-measure-fields { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; }.frame-measure-fields label,.frame-quantity-label { position: relative; display: grid; gap: 9px; color: #d8d3c9; font-size: 11px; }
.frame-measure-fields input,.frame-quantity-label input { width: 100%; height: 48px; padding: 0 48px 0 14px; color: var(--ivory); background: rgba(0,0,0,.15); border: 1px solid rgba(216,185,119,.24); border-radius: 2px; font: inherit; }
.frame-measure-fields input:focus,.frame-quantity-label input:focus { border-color: var(--gold); outline: 1px solid var(--gold); }.frame-measure-fields small { position: absolute; right: 14px; bottom: 16px; color: var(--muted); }.measure-times { padding-bottom: 15px; color: var(--gold); }
.frame-quantity-label { max-width: 210px; margin-top: 22px; }.frame-quantity-label input { max-width: 130px; padding-right: 14px; }
.frame-measure-submit { display: flex; width: 100%; justify-content: space-between; margin-top: 22px; padding: 15px 17px; color: var(--navy-dark); background: var(--gold); border: 0; cursor: pointer; font: 600 12px Inter,sans-serif; }.frame-measure-submit:hover { background: var(--gold-light); }
.frame-measure-reset { margin:12px 0 2px; padding:6px 0; color:var(--muted); background:transparent; border:0; cursor:pointer; font:500 10px Inter,sans-serif; }.frame-measure-reset:hover { color:var(--ivory); }
.frame-measure-disclaimer { color: var(--muted); font-size: 10px; line-height: 1.7; }
.frame-print-button:disabled { opacity:.45; cursor:not-allowed; }
.frame-measure-result.has-result { border-color:rgba(216,185,119,.4); }
.frame-detail-information { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:40px; align-items:start; margin-top:70px; padding:34px 0; border-top:1px solid rgba(216,185,119,.15); border-bottom:1px solid rgba(216,185,119,.15); }
.frame-detail-information>div>span,.frame-related-heading span { color:var(--gold); font:500 9px Inter,sans-serif; letter-spacing:2px; }
.frame-detail-information h2,.frame-related-heading h2 { margin:9px 0 12px; font:400 clamp(26px,3vw,36px)/1.1 "Cormorant Garamond",serif; text-transform:none; }
.frame-detail-information p { margin:0; color:#c9c4ba; font-size:11px; line-height:1.9; }
.frame-detail-information details { color:var(--muted); font-size:11px; line-height:1.8; }
.frame-detail-information summary { padding:10px 0; color:var(--ivory); cursor:pointer; }
.frame-detail-information details p { padding:4px 0 10px; }
.frame-related-section { margin-top:72px; }
.frame-related-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:22px; }
.frame-related-heading h2 { margin-bottom:0; }
.frame-related-heading>a { color:var(--gold-light); font-size:10px; text-decoration:none; white-space:nowrap; }
.frame-related-heading>a:hover { color:var(--ivory); }
.frame-related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.frame-related-card { display:grid; gap:9px; padding-bottom:14px; color:var(--ivory); border:1px solid rgba(216,185,119,.14); background:rgba(255,255,255,.02); text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.frame-related-card:hover { transform:translateY(-3px); border-color:rgba(216,185,119,.45); }
.frame-related-card img { width:100%; aspect-ratio:4/3; object-fit:contain; padding:9px; background:#f8f7f4; }
.frame-related-card strong { padding:0 12px; font:400 17px/1.2 "Cormorant Garamond",serif; }
.frame-related-card>span { padding:0 12px; color:var(--muted); font-size:9px; }
.frame-image-dialog { position:fixed; width:min(1000px,calc(100vw - 32px)); max-width:none; max-height:90vh; padding:20px; border:1px solid rgba(216,185,119,.35); background:#17191b; box-shadow:0 24px 90px rgba(0,0,0,.7); }
.frame-image-dialog::backdrop { background:rgba(5,7,9,.88); backdrop-filter:blur(5px); }
.frame-image-dialog>img { display:block; width:100%; max-height:82vh; object-fit:contain; background:#f8f7f4; }
.frame-image-dialog-close { position:absolute; z-index:1; top:8px; right:8px; width:40px; height:40px; color:var(--ivory); background:#17191b; border:1px solid rgba(216,185,119,.45); border-radius:50%; cursor:pointer; font-size:25px; }
.frame-detail-back { margin-top: 28px; text-align: center; font-size: 12px; }.collections-footer img { width: 116px; height: auto; }
@media(max-width:800px) { .frame-detail-page { width: min(100% - 32px,650px); padding-top: 20px; }.frame-detail-top,.frame-measure-layout,.frame-detail-information { grid-template-columns: 1fr; }.frame-detail-main-image { min-height: 320px; }.frame-detail-summary { padding-top: 6px; }.frame-measure-tool { margin-top: 58px; }.frame-measure-fields { gap: 9px; }.frame-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:460px) { .frame-detail-main-image { min-height: 260px; padding: 16px; }.frame-detail-breadcrumb { gap: 6px; font-size: 9px; }.frame-measure-tool { padding: 22px 16px; }.frame-measure-fields { grid-template-columns: 1fr; }.measure-times { display: none; }.frame-quantity-label { max-width: none; }.frame-measure-result { padding: 17px; }.frame-detail-information { gap:20px; }.frame-related-heading { align-items:start; flex-direction:column; }.frame-related-grid { gap:10px; }.frame-related-card strong { font-size:15px; padding:0 9px; }.frame-related-card>span { padding:0 9px; } }
@media print { body.frame-detail-body { background: white!important; color: #111!important; }.collection-page-header,.frame-detail-breadcrumb,.frame-detail-gallery,.frame-detail-summary,.frame-measure-form,.frame-detail-information,.frame-related-section,.frame-detail-back,.site-footer,.collections-footer { display: none!important; }.frame-detail-page { width: 100%; padding: 0; }.frame-measure-tool { margin: 0; padding: 0; border: 0; background: white; }.frame-measure-heading h2,.frame-measure-heading p,.frame-measure-result p,.frame-measure-result strong,.frame-measure-result>span { color: #111!important; }.frame-measure-result { border: 1px solid #999; background: white; }.frame-print-button { display: none; } }

/* Global search on secondary pages */
.collection-page-header { gap: clamp(16px, 3vw, 38px); }
.collection-page-header .site-search { flex: 1 1 360px; width: 100%; max-width: 560px; min-width: 180px; margin: 0 auto; }
.collection-page-header .site-search-form { min-height: 42px; }
.collection-page-header .site-search-form button { min-height: 34px; }
@media (max-width: 700px) {
    .collection-page-header { flex-wrap: wrap; gap: 14px 18px; }
    .collection-page-header .site-search { order: 3; flex: 0 0 100%; max-width: none; min-width: 0; }
    .collection-page-header .back-home { font-size: 8px; letter-spacing: 1px; }
}

/* SANATSAL TABLO SEÇKİSİ VE SAYFA SAYFA KATALOG */
.artworks-page,
.catalog-reader {
    min-height: 100vh;
    background: #101414;
}

.artworks-header,
.catalog-reader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 30px;
}

.artworks-header img { display: block; width: 112px; height: auto; }
.artworks-back,
.catalog-reader-header a {
    color: rgba(238, 232, 220, .76);
    font: 500 10px "Montserrat", sans-serif;
    letter-spacing: 1.1px;
    text-decoration: none;
    text-transform: uppercase;
}
.artworks-back:hover,
.catalog-reader-header a:hover { color: #d8b977; }

.artworks-main {
    display: grid;
    justify-items: center;
    gap: 25px;
    padding: 38px 20px 64px;
}

.artworks-heading { text-align: center; }

.artworks-heading h1 {
    margin: 10px 0 0;
    color: #eee8dc;
    font: 400 clamp(38px, 6vw, 58px)/.96 "Cormorant Garamond", serif;
}

.artworks-eyebrow {
    margin: 0;
    color: #d8b977;
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 3px;
    text-align: center;
}

.artwork-catalog-card {
    position: relative;
    display: block;
    width: min(100%, 390px);
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(216, 185, 119, .27);
    background: #e9e2d6;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    text-decoration: none;
}

.artwork-catalog-card img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.artwork-catalog-card span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 17px 8px 6px;
    color: #373329;
    font: 500 10px "Montserrat", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.artwork-catalog-card span span { display: block; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }

.artwork-catalog-card b { color: #9a7740; font-size: 18px; transition: transform .2s ease; }
.artwork-catalog-card:hover b { transform: translateX(5px); }
.artworks-footer { padding: 0 20px 30px; color: rgba(238, 232, 220, .5); font: 10px "Montserrat", sans-serif; text-align: center; }

.catalog-reader-header span {
    color: rgba(238, 232, 220, .55);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: 2px;
}

.catalog-reader-main { max-width: 1040px; margin: 18px auto 0; padding: 0 25px 50px; }
.catalog-reader-page {
    position: relative;
    min-height: min(720px, calc(100vh - 190px));
    padding: clamp(28px, 5vw, 58px);
    color: #292720;
    background: #eee8dc;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.catalog-reader-page[hidden] { display: none !important; }
.catalog-reader-page.is-active { animation: catalogPageIn .28s ease both; }
@keyframes catalogPageIn { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.catalog-reader-page-top,
.catalog-reader-page-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #81796c;
    font: 500 8px "Montserrat", sans-serif;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.catalog-reader-page-top { padding-bottom: 20px; border-bottom: 1px solid rgba(85, 72, 53, .18); }
.catalog-reader-page-bottom { position: absolute; right: clamp(28px, 5vw, 58px); bottom: 24px; left: clamp(28px, 5vw, 58px); padding-top: 15px; border-top: 1px solid rgba(85, 72, 53, .18); letter-spacing: .5px; text-transform: none; }

.catalog-cover-content { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 38px; padding: 30px 0 55px; }
.catalog-cover-content h1 { margin: 0 0 16px; color: #292720; font: 600 clamp(32px, 4vw, 48px)/1 "Cormorant Garamond", serif; }
.catalog-cover-content p { margin: 0; color: #5e584d; font-size: 12px; line-height: 1.9; }
.catalog-cover-content img { display: block; width: 100%; max-height: 470px; object-fit: cover; }

.catalog-product-content { display: grid; grid-template-columns: .95fr 1.05fr; align-items: start; gap: 38px; padding: 28px 0 52px; }
.catalog-product-content > img { width: 100%; height: 490px; object-fit: cover; }
.catalog-product-category { margin: 0 0 12px; color: #8b7047; font: 500 8px "Montserrat", sans-serif; letter-spacing: 1.5px; }
.catalog-product-copy h2,
.catalog-approach-intro h2 { margin: 0; color: #292720; font: 600 clamp(29px, 3.4vw, 42px)/1 "Cormorant Garamond", serif; }
.catalog-product-copy > p:not(.catalog-product-category),
.catalog-approach-intro > p:not(.catalog-product-category) { margin: 16px 0 0; color: #5e584d; font-size: 12px; line-height: 1.85; }
.catalog-product-copy dl { margin: 23px 0 0; border-top: 1px solid rgba(85, 72, 53, .18); }
.catalog-product-copy dl > div { padding: 13px 0; border-bottom: 1px solid rgba(85, 72, 53, .18); }
.catalog-product-copy dt { color: #8b7047; font: 500 8px "Montserrat", sans-serif; letter-spacing: 1.5px; }
.catalog-product-copy dd { margin: 5px 0 0; color: #39362f; font: 400 16px "Cormorant Garamond", serif; }

.catalog-approach-content { display: grid; grid-template-columns: 1fr 220px; gap: 22px 45px; align-items: center; padding: 44px 0 58px; }
.catalog-approach-intro { max-width: 510px; }
.catalog-approach-content > img { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-height: 355px; object-fit: cover; }
.catalog-approach-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-self: end; }
.catalog-approach-cards section { padding-top: 16px; border-top: 1px solid rgba(85, 72, 53, .23); }
.catalog-approach-cards section > span { color: #8b7047; font: 500 9px "Montserrat", sans-serif; letter-spacing: 1.5px; }
.catalog-approach-cards h3 { margin: 8px 0 5px; color: #292720; font: 500 22px "Cormorant Garamond", serif; }
.catalog-approach-cards p { margin: 0; color: #5e584d; font-size: 11px; line-height: 1.8; }

.catalog-page-controls { display: flex; justify-content: center; align-items: center; gap: 30px; padding-top: 24px; color: #eee8dc; font: 11px "Montserrat", sans-serif; }
.catalog-page-controls button { min-width: 115px; padding: 11px 14px; border: 1px solid rgba(216, 185, 119, .38); color: #eee8dc; background: transparent; font: 500 9px "Montserrat", sans-serif; letter-spacing: .8px; cursor: pointer; }
.catalog-page-controls button:hover:not(:disabled) { border-color: #d8b977; color: #d8b977; }
.catalog-page-controls button:disabled { opacity: .35; cursor: default; }
.catalog-page-controls strong { color: #d8b977; font-weight: 500; }

@media (max-width: 700px) {
    .artworks-header, .catalog-reader-header { padding: 20px; }
    .artworks-main { padding-top: 28px; }
    .artwork-catalog-card { width: min(100%, 340px); }
    .catalog-reader-header span { max-width: 145px; text-align: right; font-size: 7px; }
    .catalog-reader-main { margin-top: 8px; padding: 0 12px 30px; }
    .catalog-reader-page { min-height: 720px; padding: 25px 22px 65px; }
    .catalog-reader-page-top, .catalog-reader-page-bottom { font-size: 7px; }
    .catalog-reader-page-bottom { right: 22px; left: 22px; bottom: 18px; }
    .catalog-cover-content, .catalog-product-content { grid-template-columns: 1fr; gap: 22px; padding: 24px 0 35px; }
    .catalog-cover-content img { max-height: 310px; }
    .catalog-product-content > img { height: 300px; }
    .catalog-approach-content { grid-template-columns: 1fr; gap: 20px; padding: 28px 0 35px; }
    .catalog-approach-content > img { grid-column: 1; grid-row: auto; width: min(100%, 190px); max-height: 280px; justify-self: center; }
    .catalog-approach-cards { grid-template-columns: 1fr; gap: 17px; }
    .catalog-page-controls { gap: 13px; }
    .catalog-page-controls button { min-width: 100px; padding: 10px 8px; }
}

/* Ana sayfada koleksiyon ve çerçeve bölüm başlıkları */
.collection-section > .section-heading,
.frame-section > .section-heading {
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(216, 185, 119, .15);
}

.collection-section > .section-heading .section-number,
.frame-section > .section-heading .section-number {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(216, 185, 119, .32);
    border-radius: 50%;
    background: rgba(216, 185, 119, .035);
    color: var(--gold-light);
    font: 500 9px "Montserrat", sans-serif;
    letter-spacing: .6px;
}

.collection-section > .section-heading > div,
.frame-section > .section-heading > div {
    display: grid;
    gap: 5px;
}

.collection-section > .section-heading p,
.frame-section > .section-heading p {
    margin: 0;
    color: #b6a57f;
    font-size: 8px;
    letter-spacing: 2.4px;
}

.collection-section > .section-heading h2,
.frame-section > .section-heading h2 {
    color: var(--ivory);
    font-size: clamp(32px, 4.3vw, 48px);
    line-height: 1.08;
    letter-spacing: -.35px;
}

@media (max-width: 600px) {
    .collection-section > .section-heading,
    .frame-section > .section-heading {
        gap: 12px;
        margin-bottom: 25px;
        padding-bottom: 16px;
    }

    .collection-section > .section-heading .section-number,
    .frame-section > .section-heading .section-number {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 8px;
    }

    .collection-section > .section-heading h2,
    .frame-section > .section-heading h2 {
        font-size: clamp(27px, 7.4vw, 36px);
    }
}

/* Readable text wordmark in collection labels */
.collection-eyebrow,
.frame-eyebrow {
    color: #d6bf8c;
    font-size: 10px;
    letter-spacing: 2.2px;
}

.eyebrow-brand-logo {
    display: inline-block;
    width: auto;
    height: 18px;
    max-width: 96px;
    object-fit: contain;
    vertical-align: -5px;
    margin-right: 4px;
}

.collection-eyebrow > span,
.frame-eyebrow > span {
    padding: 0 3px;
    color: var(--gold-light);
}

@media (max-width: 600px) {
    .eyebrow-brand-logo { height: 18px; vertical-align: -5px; }
    .inline-brand-logo { height: 1.05em; max-width: 88px; vertical-align: -.16em; }
}