/* ==========================================================
   DECORART DUVAR PANELLERİ — PREMIUM THEME
   Logo-tabanlı marka kimliği: altın + koyu tonlar
   ========================================================== */

:root {
   /* —— Altın Paleti (Logo Bazlı) —— */
   --gold-50: #FBF6E7;
   --gold-100: #F5E9C0;
   --gold-200: #EBD791;
   --gold-300: #DFC366;
   --gold-400: #D2AE48;
   --gold-500: #C9A24B;
   /* ANA MARKA RENGİ */
   --gold-600: #B1883A;
   --gold-700: #8E6B2C;
   --gold-800: #6A4F1F;
   --gold-900: #432F11;

   /* —— Koyu / Nötr Tonlar —— */
   --ink-900: #0E0E0E;
   --ink-800: #1A1A1A;
   --ink-700: #2A2A2A;
   --ink-600: #3F3F3F;
   --ink-500: #6B6B6B;
   --ink-400: #9A9A9A;
   --ink-300: #C7C7C7;
   --ink-200: #E2E2E2;
   --ink-100: #F2F1EE;
   --ink-50: #FAF9F6;
   --paper: #FFFFFF;

   /* —— Anlam Renkler —— */
   --success: #2F6F4E;
   --warning: #C28A2A;
   --danger: #A93B3B;
   --info: #2C5C7E;

   /* —— Tipografi —— */
   --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
   --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'Courier New', monospace;

   /* —— Tipografi Ölçeği —— */
   --fs-display-1: clamp(3.5rem, 7vw, 6.5rem);
   --fs-display-2: clamp(2.75rem, 5vw, 4.5rem);
   --fs-h1: clamp(2.25rem, 4vw, 3.5rem);
   --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
   --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
   --fs-h4: 1.125rem;
   --fs-body: 1rem;
   --fs-small: 0.875rem;
   --fs-xs: 0.75rem;

   /* —— Layout —— */
   --container: 1320px;
   --radius-sm: 4px;
   --radius: 8px;
   --radius-lg: 16px;
   --radius-xl: 24px;

   /* —— Gölgeler —— */
   --shadow-xs: 0 1px 2px rgba(20, 15, 5, 0.04);
   --shadow-sm: 0 4px 12px rgba(20, 15, 5, 0.05);
   --shadow: 0 10px 30px rgba(20, 15, 5, 0.08);
   --shadow-lg: 0 24px 60px rgba(20, 15, 5, 0.12);
   --shadow-gold: 0 18px 50px -12px rgba(201, 162, 75, 0.35);
   --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

   /* —— Geçişler —— */
   --t-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
   --t-base: 320ms cubic-bezier(0.4, 0, 0.2, 1);
   --t-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);
   --t-lux: 900ms cubic-bezier(0.16, 1, 0.3, 1);

   /* —— Layout değişkenleri —— */
   --header-h: 88px;
   --topbar-h: 36px;
   --section-y: clamp(4rem, 8vw, 8rem);
}

/* ==========================================================
   RESET & BASE
   ========================================================== */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   font-family: var(--font-body);
   font-size: var(--fs-body);
   line-height: 1.65;
   color: var(--ink-800);
   background: var(--paper);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
   max-width: 100%;
}

html {
   overflow-x: hidden;
   max-width: 100%;
}

img,
svg,
video {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   color: inherit;
   text-decoration: none;
   transition: color var(--t-fast);
}

a:hover {
   color: var(--gold-500);
}

button {
   font-family: inherit;
   cursor: pointer;
   border: 0;
   background: none;
}

input,
textarea,
select {
   font-family: inherit;
   font-size: inherit;
}

::selection {
   background: var(--gold-500);
   color: #fff;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */
.h-display,
.display-1 {
   font-family: var(--font-display);
   font-weight: 400;
   font-size: var(--fs-display-1);
   line-height: 1.02;
   letter-spacing: -0.02em;
}

.h-1,
h1,
.display-2 {
   font-family: var(--font-display);
   font-weight: 400;
   font-size: var(--fs-h1);
   line-height: 1.1;
   letter-spacing: -0.015em;
}

.h-2,
h2 {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: var(--fs-h2);
   line-height: 1.15;
   letter-spacing: -0.01em;
}

.h-3,
h3 {
   font-family: var(--font-body);
   font-weight: 600;
   font-size: var(--fs-h3);
   line-height: 1.3;
   letter-spacing: -0.005em;
}

.h-4,
h4 {
   font-family: var(--font-body);
   font-weight: 600;
   font-size: var(--fs-h4);
   line-height: 1.4;
}

.h-5,
h5 {
   font-family: var(--font-body);
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.4;
}

.eyebrow {
   font-family: var(--font-body);
   font-size: var(--fs-xs);
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--gold-600);
}

.lead {
   font-size: 1.125rem;
   line-height: 1.7;
   color: var(--ink-600);
}

.italic-serif {
   font-family: var(--font-display);
   font-style: italic;
   font-weight: 400;
}

.muted {
   color: var(--ink-500);
}

.gold-text {
   background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-500) 50%, var(--gold-300) 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* ==========================================================
   LAYOUT
   ========================================================== */
.container,
.container-fluid {
   padding-left: clamp(1rem, 3vw, 2rem);
   padding-right: clamp(1rem, 3vw, 2rem);
}

.container {
   max-width: var(--container);
   margin: 0 auto;
}

.section {
   padding-top: var(--section-y);
   padding-bottom: var(--section-y);
}

.section-sm {
   padding-top: clamp(3rem, 5vw, 5rem);
   padding-bottom: clamp(3rem, 5vw, 5rem);
}

.section-dark {
   background: var(--ink-900);
   color: var(--ink-100);
}

.section-cream {
   background: var(--ink-50);
}

.divider {
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--ink-200), transparent);
   margin: 4rem 0;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.95rem 1.8rem;
   border-radius: 999px;
   font-family: var(--font-body);
   font-weight: 500;
   font-size: 0.95rem;
   letter-spacing: 0.02em;
   line-height: 1;
   border: 1px solid transparent;
   cursor: pointer;
   transition: all var(--t-base);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
}

.btn::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.4) 0%, transparent 60%);
   opacity: 0;
   transition: opacity var(--t-base);
   pointer-events: none;
}

.btn:hover::after {
   opacity: 1;
}

.btn-primary {
   background: var(--ink-900);
   color: #fff;
}

.btn-primary:hover {
   background: var(--gold-500);
   color: var(--ink-900);
   transform: translateY(-2px);
   box-shadow: var(--shadow-gold);
}

.btn-gold {
   background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 50%, var(--gold-400) 100%);
   color: var(--ink-900);
}

.btn-gold:hover {
   background: var(--ink-900);
   color: var(--gold-300);
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
}

.btn-outline {
   background: transparent;
   color: var(--ink-900);
   border-color: var(--ink-300);
}

.btn-outline:hover {
   background: var(--ink-900);
   color: #fff;
   border-color: var(--ink-900);
}

.btn-outline-light {
   background: transparent;
   color: #fff;
   border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
   background: #fff;
   color: var(--ink-900);
   border-color: #fff;
}

.btn-ghost {
   background: transparent;
   color: var(--ink-700);
   padding: 0.5rem 0;
}

.btn-ghost:hover {
   color: var(--gold-500);
}

.btn-lg {
   padding: 1.15rem 2.2rem;
   font-size: 1rem;
}

.btn-sm {
   padding: 0.6rem 1.1rem;
   font-size: 0.85rem;
}

.btn-block {
   display: flex;
   width: 100%;
   justify-content: center;
}

.btn-icon {
   width: 44px;
   height: 44px;
   padding: 0;
   justify-content: center;
}

.btn-text {
   padding: 0.5rem 0;
   font-weight: 500;
   color: var(--ink-700);
}

.btn-text:hover {
   color: var(--gold-500);
}

/* Magnetic button effect */
.btn-magnetic {
   transition: transform var(--t-base);
}

/* ==========================================================
   FORM
   ========================================================== */
.form-control,
.form-select {
   display: block;
   width: 100%;
   padding: 0.95rem 1.2rem;
   background: #fff;
   color: var(--ink-800);
   border: 1px solid var(--ink-200);
   border-radius: var(--radius);
   font-size: 0.95rem;
   line-height: 1.5;
   transition: all var(--t-base);
}

.form-control:focus,
.form-select:focus {
   outline: none;
   border-color: var(--gold-500);
   box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.12);
}

.form-control::placeholder {
   color: var(--ink-400);
}

.form-label {
   display: block;
   margin-bottom: 0.5rem;
   font-size: 0.85rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--ink-700);
}

.input-group-text {
   background: var(--ink-50);
   border-color: var(--ink-200);
   color: var(--ink-600);
}

.form-check-input {
   width: 1.1em;
   height: 1.1em;
   border: 1.5px solid var(--ink-300);
   border-radius: 3px;
   cursor: pointer;
}

.form-check-input:checked {
   background-color: var(--gold-500);
   border-color: var(--gold-500);
}

.form-check-input:focus {
   box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
   border-color: var(--gold-500);
}

.form-check-label {
   font-size: 0.95rem;
   color: var(--ink-700);
   margin-left: 0.4rem;
   cursor: pointer;
}

/* ==========================================================
   HEADER
   ========================================================== */
.topbar {
   background: var(--ink-900);
   color: var(--ink-300);
   font-size: 0.8rem;
   border-bottom: 1px solid rgba(201, 162, 75, 0.2);
}

.topbar a {
   color: var(--ink-300);
}

.topbar a:hover {
   color: var(--gold-300);
}

.topbar .divider-v {
   width: 1px;
   height: 14px;
   background: rgba(255, 255, 255, 0.15);
   margin: 0 0.9rem;
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 1030;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   border-bottom: 1px solid var(--ink-200);
   transition: all var(--t-base);
}

.site-header.is-scrolled {
   box-shadow: var(--shadow-sm);
}

/* Desktop: scroll’da logo+arama kaybolur, yalnızca main-nav sticky kalır */
@media (min-width: 992px) {
   .site-header > .container {
      position: relative;
      z-index: 1060;
      max-height: 140px;
      overflow: visible;
      transition: max-height var(--t-base), opacity var(--t-fast), visibility var(--t-fast);
   }

   .site-header.is-scrolled > .container {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      visibility: hidden;
   }

   .site-header.is-scrolled .main-nav {
      border-top: 0;
      background: rgba(255, 255, 255, 0.95);
   }

   body.header-nav-only {
      --header-h: 56px;
   }
}

.header-inner {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   min-height: var(--header-h);
}

.site-logo {
   display: flex;
   align-items: center;
   flex-shrink: 0;
}

.site-logo img {
   height: 52px;
   width: auto;
   transition: transform var(--t-base);
}

.site-logo:hover img {
   transform: scale(1.04);
}

.header-search {
   flex: 1;
   max-width: 540px;
   position: relative;
   z-index: 1061;
}

.header-search .form-control {
   padding-left: 3rem;
   border-radius: 999px;
   background: var(--ink-50);
   border-color: transparent;
}

.header-search .form-control:focus {
   background: #fff;
}

.header-search .search-icon {
   position: absolute;
   left: 1.1rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--ink-500);
   pointer-events: none;
}

.header-search .btn-search {
   position: absolute;
   right: 0.4rem;
   top: 0.4rem;
   bottom: 0.4rem;
   padding: 0 1.2rem;
   border-radius: 999px;
   background: var(--ink-900);
   color: #fff;
   border: 0;
   font-size: 0.85rem;
   font-weight: 600;
   z-index: 2;
}

.header-search .search-suggest {
   position: absolute;
   left: 0;
   right: 0;
   top: calc(100% + 0.4rem);
   z-index: 2000;
   background: #fff;
   border: 1px solid var(--ink-200, #e5e5e5);
   border-radius: 12px;
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
   max-height: min(420px, 60vh);
   overflow: auto;
}

.header-search .search-suggest[hidden] {
   display: none !important;
}

.search-suggest-hint,
.search-suggest-empty {
   color: var(--ink-500, #737373);
   font-size: 0.875rem;
   padding: 0.9rem 1.1rem;
}

.search-suggest-item {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.65rem 1rem;
   color: inherit;
   text-decoration: none;
   transition: background 0.15s ease;
}

.search-suggest-item:hover,
.search-suggest-item.is-active {
   background: var(--ink-50, #f5f5f5);
}

.search-suggest-item img,
.search-suggest-item-ph {
   width: 48px;
   height: 48px;
   border-radius: 6px;
   object-fit: cover;
   flex: 0 0 48px;
   background: var(--ink-100, #eee);
}

.search-suggest-item-body {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
}

.search-suggest-item-title {
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--ink-900, #0e0e0e);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.search-suggest-item-meta {
   font-size: 0.75rem;
   color: var(--ink-500, #737373);
}

.search-suggest-item-price {
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--gold-600, #b8860b);
   white-space: nowrap;
}

.search-suggest-footer {
   border-top: 1px solid var(--ink-100, #f0f0f0);
   padding: 0.75rem 1rem;
}

.search-suggest-footer a {
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--ink-900, #0e0e0e);
   text-decoration: none;
}

.search-suggest-footer a:hover {
   color: var(--gold-600, #b8860b);
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   margin-left: auto;
}

.header-action {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.9rem;
   color: var(--ink-800);
   border-radius: 999px;
   transition: all var(--t-fast);
}

.header-action:hover {
   background: var(--ink-50);
   color: var(--gold-600);
}

.header-action i {
   font-size: 1.25rem;
}

.header-action .label {
   font-size: 0.85rem;
   font-weight: 500;
}

.header-action .badge {
   position: absolute;
   top: 0;
   right: 0;
   background: var(--gold-500);
   color: #fff;
   font-size: 0.65rem;
   min-width: 18px;
   height: 18px;
   border-radius: 9px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   padding: 0 5px;
}

.header-tel {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.55rem 1.1rem;
   background: var(--ink-900);
   color: #fff !important;
   border-radius: 999px;
   font-weight: 500;
   transition: all var(--t-base);
}

.header-tel:hover {
   background: var(--gold-500);
   color: var(--ink-900) !important;
   transform: translateY(-1px);
}

.mobile-toggle {
   display: none;
   width: 44px;
   height: 44px;
   border-radius: 999px;
   align-items: center;
   justify-content: center;
}

.mobile-toggle i {
   font-size: 1.4rem;
}

/* ==========================================================
   MEGA MENU
   ========================================================== */
.main-nav {
   position: relative;
   z-index: 1;
   border-top: 1px solid var(--ink-200);
   background: inherit;
}

.main-nav-inner {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.nav-item-mega {
   position: static;
}

.nav-link-mega {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   padding: 1rem 1.1rem;
   color: var(--ink-800);
   font-weight: 500;
   font-size: 0.95rem;
   position: relative;
   transition: color var(--t-fast);
}

.nav-link-mega::after {
   content: '';
   position: absolute;
   left: 1.1rem;
   right: 1.1rem;
   bottom: 0;
   height: 2px;
   background: var(--gold-500);
   transform: scaleX(0);
   transform-origin: center;
   transition: transform var(--t-base);
}

.nav-link-mega:hover,
.nav-item-mega:hover .nav-link-mega {
   color: var(--gold-600);
}

.nav-link-mega:hover::after,
.nav-item-mega:hover .nav-link-mega::after {
   transform: scaleX(1);
}

.nav-link-mega i {
   font-size: 0.7rem;
   opacity: 0.6;
   transition: transform var(--t-base);
}

.nav-item-mega:hover .nav-link-mega i {
   transform: rotate(180deg);
}

.mega-menu {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 1020;
   background: #fff;
   border-top: 1px solid var(--ink-200);
   box-shadow: var(--shadow-lg);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: all var(--t-base);
}

.nav-item-mega:hover .mega-menu,
.nav-item-mega:focus-within .mega-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.mega-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 2.5rem;
   padding: 2.5rem 0;
}

.mega-col h6 a {
   color: inherit;
   text-decoration: none;
}

.mega-col h6 a:hover {
   color: var(--ink-900);
}

.mega-menu[hidden],
.nav-item-mega:not(.has-children) .mega-menu {
   display: none !important;
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
}

.mega-col h6 {
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: var(--gold-600);
   margin-bottom: 1.2rem;
}

.mega-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.mega-list li {
   margin-bottom: 0.6rem;
}

.mega-list a {
   display: flex;
   align-items: center;
   gap: 0.65rem;
   font-size: 0.95rem;
   color: var(--ink-700);
   padding: 0.3rem 0;
}

.mega-list a::before {
   content: '';
   flex-shrink: 0;
   width: 7px;
   height: 7px;
   border: 1.5px solid var(--gold-400);
   border-radius: 50%;
   background: transparent;
   transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.mega-list a:hover {
   color: var(--gold-600);
}

.mega-list a:hover::before {
   background: var(--gold-400);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-400) 22%, transparent);
   transform: scale(1.08);
}

.mega-list a i {
   display: none;
}

.mega-banner {
   background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
   color: #fff;
   border-radius: var(--radius-lg);
   padding: 1.8rem;
   position: relative;
   overflow: hidden;
}

.mega-banner::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at top right, rgba(201, 162, 75, 0.3), transparent 60%);
}

.mega-banner .eyebrow {
   color: var(--gold-300);
}

.mega-banner h5 {
   font-family: var(--font-display);
   font-size: 1.4rem;
   margin: 0.6rem 0 1rem;
   position: relative;
}

.mega-banner p {
   font-size: 0.9rem;
   opacity: 0.85;
   position: relative;
}

.mega-banner .btn {
   position: relative;
   margin-top: 1rem;
}

/* ==========================================================
   ALT BAR - NAV MODERN BOXES & ICONS
   ========================================================== */
.nav-icon-box {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.6rem 1rem;
   background: var(--ink-50);
   border: 1px solid var(--ink-200);
   border-radius: var(--radius);
   color: var(--ink-800);
   font-weight: 500;
   font-size: 0.9rem;
   transition: all var(--t-fast);
   text-decoration: none;
}

.nav-icon-box i {
   font-size: 1.1rem;
   color: var(--gold-500);
}

.nav-icon-box:hover {
   background: #fff;
   border-color: var(--gold-500);
   color: var(--gold-600);
   transform: translateY(-2px);
   box-shadow: var(--shadow-sm);
}

.nav-user-actions {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   border-left: 1px solid var(--ink-200);
   padding-left: 1rem;
}

.nav-user-icon {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   color: var(--ink-800);
   border-radius: 999px;
   background: transparent;
   transition: all var(--t-fast);
   text-decoration: none;
}

.nav-user-icon:hover {
   background: var(--ink-50);
   color: var(--gold-600);
}

.nav-user-icon i {
   font-size: 1.25rem;
}

.nav-user-icon .badge {
   position: absolute;
   top: 0;
   right: 0;
   background: var(--gold-500);
   color: #fff;
   font-size: 0.65rem;
   min-width: 18px;
   height: 18px;
   border-radius: 9px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   padding: 0 5px;
}

/* ==========================================================
   FLOATING RIGHT MENU
   ========================================================== */
.floating-right-menu {
   position: fixed;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   z-index: 1040;
   background: #fff;
   padding: 0.8rem 0.5rem;
   border-radius: var(--radius-lg) 0 0 var(--radius-lg);
   box-shadow: -4px 0 20px rgba(20, 15, 5, 0.08);
   border: 1px solid var(--ink-200);
   border-right: none;
}

.floating-menu-item {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: var(--radius);
   color: var(--ink-700);
   background: var(--ink-50);
   transition: all var(--t-fast);
   text-decoration: none;
}

.floating-menu-item i {
   font-size: 1.3rem;
}

.floating-menu-item:hover {
   background: var(--gold-500);
   color: #fff;
   box-shadow: var(--shadow-sm);
}

.floating-menu-item .floating-text {
   position: absolute;
   right: 120%;
   top: 50%;
   transform: translateY(-50%) translateX(10px);
   background: var(--ink-900);
   color: #fff;
   padding: 0.4rem 0.8rem;
   border-radius: var(--radius);
   font-size: 0.85rem;
   font-weight: 500;
   opacity: 0;
   visibility: hidden;
   transition: all var(--t-fast);
   white-space: nowrap;
}

.floating-menu-item .floating-text::after {
   content: '';
   position: absolute;
   top: 50%;
   right: -5px;
   transform: translateY(-50%);
   border-width: 5px 0 5px 5px;
   border-style: solid;
   border-color: transparent transparent transparent var(--ink-900);
}

.floating-menu-item:hover .floating-text {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(0);
}

/* ==========================================================
   HERO
   ========================================================== */
.hero {
   position: relative;
   background: var(--ink-900);
   color: #fff;
   overflow: hidden;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
   min-height: 92vh;
}

.hero .carousel-item {
   padding-top: 100px;
   padding-bottom: 100px;
}

.hero-bg {
   position: absolute;
   inset: -12px;
   z-index: 0;
   background: linear-gradient(135deg, rgba(14, 14, 14, 0.65) 0%, rgba(14, 14, 14, 0.4) 50%, rgba(14, 14, 14, 0.7) 100%),
      url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=1920&q=85') center/cover no-repeat;
   transform: scale(1.05);
   will-change: transform;
   transition: transform 0.15s ease-out;
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 720px;
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
   padding: 0.5rem 1rem;
   border: 1px solid rgba(201, 162, 75, 0.4);
   border-radius: 999px;
   background: rgba(201, 162, 75, 0.1);
   color: var(--gold-300);
   font-size: 0.75rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 600;
}

.hero-title {
   font-family: var(--font-display);
   font-size: var(--fs-display-1);
   font-weight: 400;
   line-height: 1;
   letter-spacing: -0.02em;
   margin: 1.5rem 0 1.5rem;
}

.hero-title em {
   font-style: italic;
   color: var(--gold-300);
}

.hero-subtitle {
   font-size: 1.15rem;
   line-height: 1.7;
   opacity: 0.85;
   max-width: 540px;
   margin-bottom: 2.5rem;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.hero-stats {
   display: flex;
   gap: 3rem;
   margin-top: 4rem;
   padding-top: 2rem;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-stat {}

.hero-stat .num {
   font-family: var(--font-display);
   font-size: 2.4rem;
   color: var(--gold-300);
   display: block;
   line-height: 1;
}

.hero-stat .lbl {
   font-size: 0.8rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   opacity: 0.7;
   margin-top: 0.5rem;
   display: block;
}

.hero-scroll {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.75rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.6rem;
}

.hero-scroll::after {
   content: '';
   width: 1px;
   height: 50px;
   background: linear-gradient(to bottom, var(--gold-500), transparent);
   animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {

   0%,
   100% {
      transform: scaleY(1);
      transform-origin: top;
   }

   50% {
      transform: scaleY(0.3);
   }
}

/* ==========================================================
   FEATURES STRIP
   ========================================================== */
.feature-strip {
   background: var(--ink-900);
   color: #fff;
   padding: 3rem 0;
   border-top: 1px solid rgba(201, 162, 75, 0.2);
   border-bottom: 1px solid rgba(201, 162, 75, 0.2);
}

.feature-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 2rem;
}

.feature-item {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
}

.feature-icon {
   width: 48px;
   height: 48px;
   flex-shrink: 0;
   border-radius: 50%;
   background: rgba(201, 162, 75, 0.15);
   color: var(--gold-300);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
}

.feature-text h6 {
   font-size: 0.95rem;
   font-weight: 600;
   margin: 0 0 0.2rem;
}

.feature-text p {
   font-size: 0.8rem;
   opacity: 0.7;
   margin: 0;
   line-height: 1.4;
}

/* ==========================================================
   SECTION HEADERS
   ========================================================== */
.section-head {
   margin-bottom: 3.5rem;
}

.section-head.center {
   text-align: center;
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
}

.section-head .eyebrow {
   margin-bottom: 1rem;
   display: inline-block;
}

.section-head h2 {
   margin: 0 0 1rem;
}

.section-head p {
   color: var(--ink-600);
   font-size: 1.05rem;
   max-width: 620px;
}

.section-head.center p {
   margin: 0 auto;
}

.section-head .section-head-action {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 2rem;
   flex-wrap: wrap;
   position: relative;
}

.section-head .section-head-action>div:first-child {
   flex: 1;
   min-width: 280px;
}

.section-head-aside {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   gap: 0.65rem;
   flex-shrink: 0;
   position: relative;
   align-self: flex-end;
}

.section-head-deco {
   pointer-events: none;
   user-select: none;
   color: var(--gold-500);
   opacity: 0.22;
   line-height: 0;
   margin-left: auto;
   margin-right: auto;
}

.section-head-deco__svg {
   width: clamp(88px, 12vw, 132px);
   height: auto;
   display: block;
   filter: drop-shadow(0 8px 24px rgba(201, 162, 75, 0.15));
}

.section-head-deco__bar {
   transform-origin: center bottom;
   animation: sectionHeadWave 2.8s ease-in-out infinite;
}

.section-head-deco__bar:nth-child(1) { animation-delay: 0s; }
.section-head-deco__bar:nth-child(2) { animation-delay: 0.12s; }
.section-head-deco__bar:nth-child(3) { animation-delay: 0.24s; }
.section-head-deco__bar:nth-child(4) { animation-delay: 0.08s; }
.section-head-deco__bar:nth-child(5) { animation-delay: 0.2s; }
.section-head-deco__bar:nth-child(6) { animation-delay: 0.32s; }
.section-head-deco__bar:nth-child(7) { animation-delay: 0.16s; }
.section-head-deco__bar:nth-child(8) { animation-delay: 0.28s; }
.section-head-deco__bar:nth-child(9) { animation-delay: 0.04s; }
.section-head-deco__bar:nth-child(10) { animation-delay: 0.36s; }

@keyframes sectionHeadWave {
   0%, 100% { transform: scaleY(1); opacity: 0.85; }
   50% { transform: scaleY(0.72); opacity: 1; }
}

.section-head .section-head-action .actions {
   flex-shrink: 0;
   position: relative;
   z-index: 1;
   margin-bottom: 20px;
}

@media (max-width: 767.98px) {
   .section-head-aside {
      width: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
   }

   .section-head-deco {
      opacity: 0.14;
      margin: 0;
   }

   .section-head .section-head-action .actions {
      margin-bottom: 0;
   }

   .section-head-deco__svg {
      width: 72px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .section-head-deco__bar {
      animation: none;
   }
}

/* ==========================================================
   CATEGORY TILES (legacy grid — diğer sayfalar)
   ========================================================== */
.cat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
}

.cat-tile {
   position: relative;
   display: block;
   border-radius: var(--radius-lg);
   overflow: hidden;
   aspect-ratio: 4/5;
   background: var(--ink-100);
   transition: transform var(--t-base), box-shadow var(--t-base);
}

.cat-tile:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
   color: inherit;
}

.cat-tile img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--t-lux);
}

.cat-tile:hover img {
   transform: scale(1.06);
}

.cat-tile-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.6rem;
   color: #fff;
}

.cat-tile-overlay h3 {
   font-family: var(--font-display);
   font-size: 1.4rem;
   margin: 0 0 0.3rem;
   font-weight: 500;
}

.cat-tile-overlay .count {
   font-size: 0.8rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   opacity: 0.85;
}

.cat-tile-overlay .arrow {
   position: absolute;
   top: 1.2rem;
   right: 1.2rem;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(8px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all var(--t-base);
}

.cat-tile:hover .cat-tile-overlay .arrow {
   background: var(--gold-500);
   color: var(--ink-900);
   transform: rotate(-45deg);
}

.cat-tile.large {
   grid-column: span 2;
   aspect-ratio: 8/5;
}

/* ==========================================================
   CATEGORY ACCORDION — tam genişlik slide
   ========================================================== */
.cat-accordion-section {
   padding-bottom: 0;
   overflow: hidden;
   margin-bottom: 0;
}

.cat-accordion-section .section-head {
   margin-bottom: 2rem;
}

.cat-accordion-section + .section {
   padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.cat-accordion {
   display: flex;
   width: 100%;
   height: clamp(420px, 68vh, 640px);
   gap: 3px;
   background: var(--ink-900);
   counter-reset: cat-panel;
}

.cat-panel {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
   overflow: hidden;
   color: #fff;
   text-decoration: none;
   isolation: isolate;
   transition: flex 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-panel:hover,
.cat-panel:focus-visible,
.cat-panel.is-active {
   flex: 3.4 1 0;
   color: #fff;
}

.cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible) {
   flex: 0.72 1 0;
}

.cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible).is-active {
   flex: 0.72 1 0;
}

.cat-panel-media {
   position: absolute;
   inset: 0;
   z-index: 0;
   background: var(--ink-800);
}

.cat-panel-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1.04);
   transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
   filter: brightness(0.72) saturate(0.9);
}

.cat-panel.is-active .cat-panel-media img,
.cat-panel:hover .cat-panel-media img,
.cat-panel:focus-visible .cat-panel-media img {
   transform: scale(1.12);
   filter: brightness(0.88) saturate(1.05);
}

.cat-panel-veil {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background:
      linear-gradient(180deg, rgba(14, 14, 14, 0.15) 0%, transparent 28%, rgba(14, 14, 14, 0.55) 62%, rgba(14, 14, 14, 0.88) 100%),
      linear-gradient(90deg, rgba(14, 14, 14, 0.35) 0%, transparent 40%);
}

.cat-panel-body {
   position: absolute;
   inset: 0;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.75rem 1.4rem 1.9rem;
   pointer-events: none;
}

.cat-panel-index {
   font-family: var(--font-body);
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--gold-300);
   margin-bottom: 0.55rem;
   opacity: 0.9;
   counter-increment: cat-panel;
}

.cat-panel-index::before {
   content: counter(cat-panel, decimal-leading-zero);
}

.cat-panel-title {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: clamp(1.35rem, 1.8vw, 2.15rem);
   line-height: 1.15;
   margin: 0;
   max-width: 16ch;
   writing-mode: horizontal-tb;
   transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.cat-panel-cta {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   margin-top: 0.95rem;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--gold-300);
   opacity: 0;
   transform: translateY(10px);
   transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-panel-cta i {
   font-size: 0.95rem;
   transition: transform 0.35s ease;
}

.cat-panel.is-active .cat-panel-cta,
.cat-panel:hover .cat-panel-cta,
.cat-panel:focus-visible .cat-panel-cta {
   opacity: 1;
   transform: translateY(0);
}

.cat-panel:hover .cat-panel-cta i,
.cat-panel.is-active .cat-panel-cta i {
   transform: translate(2px, -2px);
}

@media (min-width: 992px) {
   .cat-accordion:not(:hover) .cat-panel:not(.is-active) .cat-panel-body,
   .cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible) .cat-panel-body {
      align-items: center;
      justify-content: flex-end;
      padding: 2rem 0.65rem 2.25rem;
      text-align: center;
   }

   .cat-accordion:not(:hover) .cat-panel:not(.is-active) .cat-panel-index,
   .cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible) .cat-panel-index,
   .cat-accordion:not(:hover) .cat-panel:not(.is-active) .cat-panel-title,
   .cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible) .cat-panel-title {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      max-width: none;
   }

   .cat-accordion:not(:hover) .cat-panel:not(.is-active) .cat-panel-index,
   .cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible) .cat-panel-index {
      margin-bottom: 1rem;
      letter-spacing: 0.28em;
   }

   .cat-accordion:not(:hover) .cat-panel:not(.is-active) .cat-panel-title,
   .cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible) .cat-panel-title {
      font-size: clamp(1.05rem, 1.35vw, 1.35rem);
      letter-spacing: 0.03em;
   }
}

@media (max-width: 991.98px) {
   .cat-accordion {
      flex-direction: column;
      height: auto;
      gap: 2px;
   }

   .cat-panel,
   .cat-panel.is-active,
   .cat-panel:hover,
   .cat-panel:focus-visible,
   .cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible),
   .cat-accordion:hover .cat-panel:not(:hover):not(:focus-visible).is-active {
      flex: none;
      height: 92px;
      transition: height 0.65s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .cat-panel.is-active {
      height: min(52vh, 360px);
   }

   .cat-panel-body {
      padding: 1.1rem 1.25rem;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
   }

   .cat-panel.is-active .cat-panel-body {
      flex-direction: column;
      align-items: flex-start;
      padding: 1.5rem 1.35rem 1.6rem;
   }

   .cat-panel-title {
      font-size: 1.25rem;
      max-width: none;
   }

   .cat-panel:not(.is-active) .cat-panel-cta {
      display: none;
   }

   .cat-panel:not(.is-active) .cat-panel-index {
      margin-bottom: 0;
   }
}

@media (prefers-reduced-motion: reduce) {
   .cat-panel,
   .cat-panel-media img,
   .cat-panel-cta,
   .cat-panel-title {
      transition-duration: 0.01ms !important;
   }
}

/* ==========================================================
   PRODUCT CARDS
   ========================================================== */
.product-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.75rem;
}

.product-card {
   position: relative;
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--ink-200);
   overflow: hidden;
   transition: all var(--t-base);
}

.product-card:hover {
   border-color: var(--gold-300);
   box-shadow: var(--shadow);
   transform: translateY(-4px);
}

.product-thumb {
   position: relative;
   aspect-ratio: 1/1;
   overflow: hidden;
   background: var(--ink-50);
}

.product-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--t-lux);
}

.product-card:hover .product-thumb img {
   transform: scale(1.08);
}

.product-badges {
   position: absolute;
   top: 1rem;
   left: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   z-index: 2;
}

.product-badge {
   display: inline-flex;
   align-items: center;
   padding: 0.35rem 0.7rem;
   border-radius: 4px;
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
}

.product-badge.new {
   background: var(--ink-900);
   color: #fff;
}

.product-badge.sale {
   background: var(--danger);
   color: #fff;
}

.product-badge.bestseller {
   background: var(--gold-500);
   color: var(--ink-900);
}

.product-badge.limited {
   background: var(--info);
   color: #fff;
}

.product-badge-new {
   background: var(--ink-900);
   color: #fff;
}

.product-badge-sale {
   background: var(--danger);
   color: #fff;
}

.product-badge-stock-out {
   background: var(--danger);
   color: #fff;
}

.product-badge-stock-supply {
   background: var(--gold-500);
   color: var(--ink-900);
}

.product-badge-stock-preorder {
   background: var(--info);
   color: #fff;
}

.product-badge-stock-low {
   background: var(--gold-600, #b8923a);
   color: #fff;
}

.product-stock-line {
   margin: 0.35rem 0 0.15rem;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.02em;
}

.product-stock-line--out_of_stock {
   color: var(--danger);
}

.product-stock-line--supply_2_3 {
   color: var(--gold-600, #b8923a);
}

.product-stock-line--preorder {
   color: var(--info);
}

.product-stock-line--low_stock {
   color: var(--gold-600, #b8923a);
}

.zp-list-add-cart[data-can-purchase="0"] {
   opacity: 0.85;
   background: var(--danger, #A93B3B) !important;
   border-color: var(--danger, #A93B3B) !important;
   color: #fff !important;
}

.zp-variant-opt.is-oos {
   opacity: 0.55;
   text-decoration: line-through;
}

.product-actions {
   position: absolute;
   top: 1rem;
   right: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   opacity: 0;
   transform: translateX(8px);
   transition: all var(--t-base);
   z-index: 2;
}

.product-card:hover .product-actions {
   opacity: 1;
   transform: translateX(0);
}

.product-action-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm);
   color: var(--ink-700);
   transition: all var(--t-fast);
}

.product-action-btn:hover {
   background: var(--gold-500);
   color: #fff;
   transform: scale(1.1);
}

.product-action-btn.active {
   background: var(--gold-500);
   color: #fff;
}

.product-quickview {
   position: absolute;
   left: 1rem;
   right: 1rem;
   bottom: 1rem;
   opacity: 0;
   transform: translateY(8px);
   transition: all var(--t-base);
   z-index: 2;
}

.product-card:hover .product-quickview {
   opacity: 1;
   transform: translateY(0);
}

.product-quickview .btn {
   width: 100%;
   background: rgba(14, 14, 14, 0.92);
   color: #fff;
   padding: 0.7rem;
   backdrop-filter: blur(8px);
}

.product-quickview .btn:hover {
   background: var(--gold-500);
   color: var(--ink-900);
}

.product-body {
   padding: 1.3rem 1.4rem 1.5rem;
}

.product-meta {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.75rem;
   color: var(--ink-500);
   margin-bottom: 0.5rem;
}

.product-meta .dot {
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: var(--ink-300);
}

.product-title {
   font-family: var(--font-body);
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--ink-900);
   margin: 0 0 0.6rem;
   line-height: 1.35;
   min-height: 2.7em;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.product-title a {
   color: inherit;
}

.product-title a:hover {
   color: var(--gold-600);
}

.product-rating {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-size: 0.85rem;
   color: var(--ink-500);
   margin-bottom: 0.8rem;
}

.product-rating .stars {
   color: var(--gold-500);
   letter-spacing: 0.05em;
}

.product-swatch-row {
   display: flex;
   gap: 0.4rem;
   margin-bottom: 0.8rem;
}

.product-swatch {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 1.5px solid #fff;
   box-shadow: 0 0 0 1px var(--ink-200);
}

.product-price-row {
   display: flex;
   align-items: baseline;
   gap: 0.6rem;
}

.product-price {
   font-family: var(--font-body);
   font-size: 1.1rem;
   color: var(--gold-600);
   font-weight: 600;
   letter-spacing: -0.01em;
}

.product-body .product-price,
.product-body .product-price .text-primary,
.product-body .text-primary {
   color: var(--gold-600) !important; /* #B1883A — Bootstrap primary mavisini ez */
}

.product-price-old {
   font-size: 0.9rem;
   color: var(--ink-400);
   text-decoration: line-through;
}

.product-price-unit {
   font-size: 0.75rem;
   color: var(--ink-500);
}

.product-vat {
   font-size: 0.7rem;
   color: var(--ink-400);
   margin-top: 0.3rem;
}

/* ==========================================================
   ROOM TILES
   ========================================================== */
.room-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
}

.room-tile {
   position: relative;
   aspect-ratio: 4/5;
   border-radius: var(--radius-lg);
   overflow: hidden;
}

.room-tile img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.2s var(--t-lux);
}

.room-tile:hover img {
   transform: scale(1.08);
}

.room-tile::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75));
}

.room-tile-content {
   position: absolute;
   left: 1.5rem;
   right: 1.5rem;
   bottom: 1.5rem;
   color: #fff;
   z-index: 2;
}

.room-tile-content h4 {
   font-family: var(--font-display);
   font-size: 1.4rem;
   margin: 0 0 0.3rem;
}

.room-tile-content p {
   font-size: 0.85rem;
   opacity: 0.85;
   margin: 0;
}

.room-tile-content .arrow {
   position: absolute;
   right: 0;
   bottom: 0.4rem;
   transition: transform var(--t-base);
}

.room-tile:hover .room-tile-content .arrow {
   transform: translateX(6px);
}

/* ==========================================================
   CONTENT BLOCKS / EDITORIAL
   ========================================================== */
.editorial {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 5rem;
   align-items: center;
}

.editorial.reverse {
   grid-template-columns: 1.1fr 1fr;
}

.editorial-media {
   position: relative;
}

.editorial-media .img-main {
   aspect-ratio: 4/5;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--ink-100);
}

.editorial-media .img-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.editorial-media .img-float {
   position: absolute;
   bottom: -2rem;
   left: -2rem;
   width: 55%;
   aspect-ratio: 1/1;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

.editorial-media .img-float img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.editorial-media .stat-card {
   position: absolute;
   top: 1.5rem;
   right: -1.5rem;
   background: #fff;
   padding: 1.4rem 1.6rem;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   max-width: 220px;
}

.editorial-media .stat-card .num {
   font-family: var(--font-display);
   font-size: 2.2rem;
   color: var(--gold-600);
   line-height: 1;
   display: block;
}

.editorial-media .stat-card .lbl {
   font-size: 0.75rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink-500);
   margin-top: 0.4rem;
   display: block;
}

.editorial-body .eyebrow {
   margin-bottom: 1rem;
}

.editorial-body h2 {
   margin: 0 0 1.5rem;
}

.editorial-body p {
   color: var(--ink-700);
   font-size: 1.05rem;
   line-height: 1.8;
   margin-bottom: 1.2rem;
}

.editorial-body .check-list {
   list-style: none;
   padding: 0;
   margin: 1.5rem 0;
}

.editorial-body .check-list li {
   display: flex;
   align-items: flex-start;
   gap: 0.7rem;
   padding: 0.5rem 0;
   color: var(--ink-800);
   font-size: 0.95rem;
}

.editorial-body .check-list i {
   color: var(--gold-500);
   margin-top: 4px;
}

/* ==========================================================
   BANNER / AFİŞ SLOTS
   ========================================================== */
.banner-strip {
   background: var(--ink-900);
   color: #fff;
}

.banner-strip--full {
   padding: 0;
}

.banner-strip--full .zp-banners,
.banner-strip--full .zp-banner {
   display: block;
   width: 100%;
}

.banner-strip--full .zp-banner img {
   display: block;
   width: 100%;
   height: auto;
   max-height: min(48vh, 480px);
   object-fit: cover;
}

.banner-strip--full:not(:has(.zp-banner)) {
   display: none;
}

.banner-strip--grid:not(:has(.zp-banner)) {
   display: none;
}

.banner-grid-cell:empty {
   display: none;
}

.banner-strip--grid {
   padding: 3rem 0;
}

.banner-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.25rem;
}

.banner-grid-cell .zp-banners,
.banner-grid-cell .zp-banner {
   display: block;
   height: 100%;
}

.banner-grid-cell .zp-banner img {
   display: block;
   width: 100%;
   height: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: var(--radius-lg);
   transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.banner-grid-cell .zp-banner:hover img {
   transform: scale(1.03);
}

.zp-banner {
   color: inherit;
   text-decoration: none;
   overflow: hidden;
}

@media (max-width: 767.98px) {
   .banner-grid {
      grid-template-columns: 1fr;
   }
}

/* ==========================================================
   STATS BAND
   ========================================================== */
.stats-band {
   background: var(--ink-900);
   color: #fff;
   padding: 4rem 0;
   position: relative;
   overflow: hidden;
}

.stats-band::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(201, 162, 75, 0.15), transparent 60%);
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
   position: relative;
}

.stat-item {
   text-align: center;
}

.stat-item .num {
   font-family: var(--font-display);
   font-size: clamp(2.8rem, 5vw, 4rem);
   color: var(--gold-300);
   display: block;
   line-height: 1;
}

.stat-item .lbl {
   font-size: 0.85rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   opacity: 0.7;
   margin-top: 0.7rem;
   display: block;
}

.stat-item .sep {
   width: 30px;
   height: 1px;
   background: var(--gold-500);
   margin: 1rem auto 0;
}

/* ==========================================================
   PROJECTS / PORTFOLIO
   ========================================================== */
.project-carousel {
   position: relative;
}

.project-track {
   display: flex;
   gap: 1.5rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding-bottom: 1.5rem;
   scrollbar-width: thin;
}

.project-track::-webkit-scrollbar {
   height: 6px;
}

.project-track::-webkit-scrollbar-thumb {
   background: var(--gold-300);
   border-radius: 3px;
}

.project-slide {
   flex: 0 0 calc(33.333% - 1rem);
   scroll-snap-align: start;
}

.project-card {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
   aspect-ratio: 4/5;
}

.project-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.2s var(--t-lux);
}

.project-card:hover img {
   transform: scale(1.08);
}

.project-card::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.85) 100%);
   transition: opacity var(--t-base);
}

.project-card-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 2rem;
   color: #fff;
   z-index: 2;
}

.project-card-content .cat {
   font-size: 0.7rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold-300);
   margin-bottom: 0.6rem;
}

.project-card-content h4 {
   font-family: var(--font-display);
   font-size: 1.5rem;
   margin: 0 0 0.5rem;
}

.project-card-content p {
   font-size: 0.9rem;
   opacity: 0.8;
   margin: 0 0 1rem;
}

.project-card-content .arrow {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.85rem;
   color: var(--gold-300);
}

.project-controls {
   display: flex;
   gap: 0.6rem;
   margin-top: 1.5rem;
}

.project-controls button {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1px solid var(--ink-200);
   background: #fff;
   color: var(--ink-700);
   transition: all var(--t-fast);
}

.project-controls button:hover {
   background: var(--ink-900);
   color: #fff;
   border-color: var(--ink-900);
}

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonial-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.75rem;
}

.testimonial-card {
   background: #fff;
   padding: 2.2rem;
   border-radius: var(--radius-lg);
   border: 1px solid var(--ink-200);
   position: relative;
}

.testimonial-card .quote-mark {
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
   font-family: var(--font-display);
   font-size: 4rem;
   line-height: 1;
   color: var(--gold-200);
}

.testimonial-card .stars {
   color: var(--gold-500);
   margin-bottom: 1rem;
   letter-spacing: 0.1em;
}

.testimonial-card blockquote {
   font-family: var(--font-display);
   font-size: 1.1rem;
   line-height: 1.55;
   color: var(--ink-800);
   margin: 0 0 1.5rem;
   font-style: italic;
}

.testimonial-author {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.testimonial-author .avatar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--ink-100);
   overflow: hidden;
   flex-shrink: 0;
}

.testimonial-author .avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.testimonial-author .info h6 {
   margin: 0;
   font-size: 0.95rem;
   font-weight: 600;
}

.testimonial-author .info p {
   margin: 0;
   font-size: 0.8rem;
   color: var(--ink-500);
}

/* ==========================================================
   BRANDS / REFERENCES
   ========================================================== */
.brand-row {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 1.5rem;
   align-items: center;
}

.brand-row .brand {
   aspect-ratio: 3/2;
   display: flex;
   align-items: center;
   justify-content: center;
   filter: grayscale(100%);
   opacity: 0.55;
   transition: all var(--t-base);
}

.brand-row .brand:hover {
   filter: grayscale(0);
   opacity: 1;
}

.brand-row .brand span {
   font-family: var(--font-display);
   font-size: 1.4rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--ink-700);
   font-weight: 500;
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq-list {
   max-width: 880px;
   margin: 0 auto;
}

.faq-item {
   background: #fff;
   border: 1px solid var(--ink-200);
   border-radius: var(--radius);
   margin-bottom: 0.8rem;
   overflow: hidden;
   transition: all var(--t-base);
}

.faq-item.open {
   border-color: var(--gold-300);
   box-shadow: var(--shadow-sm);
}

.faq-question {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1.3rem 1.6rem;
   cursor: pointer;
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--ink-900);
}

.faq-question .icon {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--ink-50);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all var(--t-base);
   color: var(--gold-600);
}

.faq-item.open .faq-question .icon {
   background: var(--gold-500);
   color: #fff;
   transform: rotate(45deg);
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--t-base);
}

.faq-answer-inner {
   padding: 0 1.6rem 1.5rem;
   color: var(--ink-600);
   line-height: 1.7;
}

/* ==========================================================
   BLOG
   ========================================================== */
.blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
}

.blog-card {
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--ink-200);
   transition: all var(--t-base);
}

.blog-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow);
   border-color: var(--gold-300);
}

.blog-thumb {
   aspect-ratio: 16/10;
   overflow: hidden;
   position: relative;
}

.blog-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1s var(--t-lux);
}

.blog-card:hover .blog-thumb img {
   transform: scale(1.06);
}

.blog-thumb .cat-tag {
   position: absolute;
   top: 1rem;
   left: 1rem;
   background: #fff;
   color: var(--ink-900);
   padding: 0.4rem 0.9rem;
   border-radius: 999px;
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.blog-body {
   padding: 1.6rem 1.8rem 1.8rem;
}

.blog-meta {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 0.8rem;
   color: var(--ink-500);
   margin-bottom: 0.8rem;
}

.blog-meta i {
   color: var(--gold-500);
   margin-right: 0.3rem;
}

.blog-body h4 {
   font-family: var(--font-display);
   font-size: 1.3rem;
   line-height: 1.3;
   margin: 0 0 0.8rem;
   font-weight: 500;
}

.blog-body h4 a {
   color: var(--ink-900);
}

.blog-body h4 a:hover {
   color: var(--gold-600);
}

.blog-body p {
   font-size: 0.95rem;
   color: var(--ink-600);
   line-height: 1.6;
   margin: 0 0 1rem;
}

.blog-body .read-more {
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--gold-600);
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
}

.blog-body .read-more:hover {
   gap: 0.8rem;
}

/* ==========================================================
   CTA BAND
   ========================================================== */
.cta-band {
   background: var(--ink-900);
   color: #fff;
   border-radius: var(--radius-xl);
   padding: 4rem;
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   gap: 3rem;
   align-items: center;
   position: relative;
   overflow: hidden;
   margin: 4rem 0;
}

.cta-band:not(:has(.cta-band-visual)) {
   grid-template-columns: 1fr;
}

.cta-band::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 50%;
   height: 100%;
   background: radial-gradient(circle at 80% 50%, rgba(201, 162, 75, 0.2), transparent 60%);
}

.cta-band h2 {
   font-family: var(--font-display);
   font-size: clamp(1.8rem, 3vw, 2.6rem);
   margin: 0 0 1rem;
}

.cta-band p {
   opacity: 0.8;
   margin: 0 0 1.5rem;
   max-width: 540px;
}

.cta-band .actions {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
}

.cta-band-visual {
   position: relative;
   text-align: center;
}

.cta-band-visual .num {
   font-family: var(--font-display);
   font-size: 6rem;
   color: var(--gold-300);
   display: block;
   line-height: 1;
}

.cta-band-visual .lbl {
   font-size: 0.85rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   opacity: 0.7;
}

/* ==========================================================
   NEWSLETTER
   ========================================================== */
.newsletter-band {
   padding: 0;
   margin: 0;
   width: 100%;
   max-width: none;
   border-radius: 0 !important;
}

.newsletter {
   background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%);
   color: var(--ink-900);
   padding: 4rem;
   border-radius: var(--radius-xl);
   text-align: center;
}

.newsletter--full {
   border-radius: 0 !important;
   width: 100%;
   max-width: none;
   padding: 4.5rem 0;
   text-align: left;
}

.newsletter-inner {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr);
   gap: 2.5rem 3rem;
   align-items: center;
}

.newsletter h3 {
   font-family: var(--font-display);
   font-size: 2rem;
   margin: 0 0 0.5rem;
}

.newsletter p {
   opacity: 0.85;
   margin: 0 0 1.5rem;
   max-width: 540px;
   margin-left: auto;
   margin-right: auto;
}

.newsletter--full .newsletter-copy p {
   margin: 0;
   margin-left: 0;
   margin-right: 0;
}

.newsletter-note {
   margin-top: 0.75rem !important;
   font-size: 0.75rem;
   opacity: 0.7;
}

.newsletter-form {
   display: flex;
   gap: 0.5rem;
   max-width: 480px;
   margin: 0 auto;
}

.newsletter--full .newsletter-form {
   margin: 0;
   width: 100%;
   max-width: none;
}

.newsletter-form .form-control {
   background: #fff;
   border-color: transparent;
}

.newsletter-form .btn {
   background: var(--ink-900);
   color: var(--gold-300);
   justify-content: center;
   text-align: center;
   padding-left: 1.6rem;
   padding-right: 1.6rem;
   gap: 0;
}

.newsletter-form .btn:hover {
   background: var(--ink-700);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
   background: var(--ink-900);
   color: var(--ink-300);
   padding-top: 5rem;
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
   gap: 3rem;
   padding-bottom: 4rem;
}

.footer-brand img {
   height: 60px;
   margin-bottom: 1.5rem;
   filter: brightness(0) invert(1);
}

.footer-brand p {
   font-size: 0.95rem;
   opacity: 0.75;
   line-height: 1.7;
   margin-bottom: 1.5rem;
}

.footer-contact {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-contact li {
   display: flex;
   align-items: flex-start;
   gap: 0.8rem;
   margin-bottom: 0.8rem;
   font-size: 0.9rem;
}

.footer-contact i {
   color: var(--gold-400);
   margin-top: 3px;
}

.site-footer h6,
.footer-col h6 {
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.2em;
   color: var(--gold-300);
   margin-bottom: 1.3rem;
   text-align: left;
}

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

.footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-links li {
   margin-bottom: 0.6rem;
}

.footer-links a {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.65rem;
   font-size: 0.9rem;
   opacity: 0.8;
   text-align: left;
}

.footer-links a::before {
   content: '';
   flex-shrink: 0;
   width: 7px;
   height: 7px;
   border: 1.5px solid var(--gold-400);
   border-radius: 50%;
   background: transparent;
   opacity: 0.9;
   transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.footer-links a:hover {
   color: var(--gold-300);
   opacity: 1;
}

.footer-links a:hover::before {
   background: var(--gold-400);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-400) 28%, transparent);
   transform: scale(1.08);
}

.footer-socials {
   display: flex;
   gap: 0.6rem;
   margin-top: 1.5rem;
}

.footer-socials a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   transition: all var(--t-fast);
}

.footer-socials a:hover {
   background: var(--gold-500);
   color: var(--ink-900);
   transform: translateY(-2px);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   padding: 1.5rem 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
}

.footer-bottom p {
   margin: 0;
   font-size: 0.85rem;
   opacity: 0.6;
}

.footer-payments {
   display: flex;
   gap: 0.6rem;
}

.footer-payments span {
   font-size: 0.7rem;
   padding: 0.3rem 0.7rem;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   letter-spacing: 0.1em;
   opacity: 0.6;
}

/* ==========================================================
   FLOATING ELEMENTS
   ========================================================== */
.floating-actions {
   position: fixed;
   right: 1.5rem;
   bottom: 1.5rem;
   z-index: 990;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.fab {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: #fff;
   color: var(--ink-800);
   box-shadow: var(--shadow);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   transition: all var(--t-base);
   position: relative;
}

.fab:hover {
   transform: translateY(-3px);
   color: var(--gold-500);
}

.fab.whatsapp {
   background: #25D366;
   color: #fff;
}

.fab.whatsapp:hover {
   background: #1ebe57;
   color: #fff;
   box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
}

.fab-to-top {
   display: none;
   opacity: 0;
   transform: translateY(10px);
}

.fab-to-top.visible {
   display: inline-flex;
   opacity: 1;
   transform: translateY(0);
}

.fab-tooltip {
   position: absolute;
   right: 100%;
   top: 50%;
   transform: translateY(-50%);
   background: var(--ink-900);
   color: #fff;
   padding: 0.4rem 0.8rem;
   border-radius: 6px;
   font-size: 0.78rem;
   white-space: nowrap;
   margin-right: 0.6rem;
   opacity: 0;
   transition: opacity var(--t-base);
}

.fab:hover .fab-tooltip {
   opacity: 1;
}

.fab-pulse {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid #25D366;
   animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
   0% {
      transform: scale(1);
      opacity: 0.6;
   }

   100% {
      transform: scale(1.6);
      opacity: 0;
   }
}

.recent-drawer {
   position: fixed;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 985;
   display: flex;
   flex-direction: row;
   align-items: center;
   opacity: 0;
   visibility: hidden;
   transition: all var(--t-base);
}
.recent-drawer.visible,
.recent-drawer.has-items {
   opacity: 1;
   visibility: visible;
}

.recent-drawer.visible {
   opacity: 1;
   visibility: visible;
}

.recent-drawer-item-fallback {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   min-height: 48px;
   background: var(--ink-100);
   color: var(--ink-400);
   font-size: 1.1rem;
}

.recent-drawer-toggle {
   background: #fff;
   border: 1px solid var(--ink-200);
   border-left: none;
   border-radius: 0 12px 12px 0;
   padding: 1rem 0.6rem 1rem 0.4rem;
   color: var(--ink-900);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 4px 0 15px rgba(0,0,0,0.06);
   transition: max-width 0s 0.4s, padding 0s 0.4s, border-width 0s 0.4s, opacity 0.3s ease 0.4s, visibility 0s 0.4s, color var(--t-fast);
   max-width: 50px;
   opacity: 1;
   visibility: visible;
   overflow: hidden;
}
.recent-drawer.open .recent-drawer-toggle {
   max-width: 0;
   padding: 0;
   border-width: 0;
   opacity: 0;
   visibility: hidden;
   transition: max-width 0s 0s, padding 0s 0s, border-width 0s 0s, opacity 0.2s ease 0s, visibility 0s 0s, color var(--t-fast);
}
.recent-drawer-toggle span {
   display: none;
}
.recent-drawer-toggle i {
   font-size: 1.2rem;
}
.recent-drawer-toggle:hover {
   color: var(--gold-500);
}
.recent-drawer-toggle i {
   font-size: 1.1rem;
   transform: rotate(90deg);
}

.recent-drawer-items-wrapper {
   background: #fff;
   border: 1px solid var(--ink-200);
   border-left: none;
   border-radius: 0 12px 12px 0;
   box-shadow: 4px 0 20px rgba(0,0,0,0.1);
   padding: 0.8rem;
   max-width: 0;
   opacity: 0;
   overflow: hidden;
   transition: all 0.4s ease-in-out;
   display: flex;
   flex-direction: column;
}

.recent-drawer.open .recent-drawer-items-wrapper {
   max-width: 140px;
   opacity: 1;
}

.recent-drawer-items {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   max-height: 210px;
   overflow-y: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
   -ms-overflow-style: none;
}
.recent-drawer-items::-webkit-scrollbar {
   display: none;
}

.recent-drawer-item {
   width: 64px;
   height: 64px;
   flex-shrink: 0;
   border-radius: 6px;
   overflow: hidden;
   background: var(--ink-100);
}

.recent-drawer-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ==========================================================
   MODAL / OFFCANVAS
   ========================================================== */
.modal-content {
   border: 0;
   border-radius: var(--radius-lg);
}

.modal-header {
   border: 0;
   padding: 1.5rem 1.5rem 0;
}

.modal-body {
   padding: 1.5rem;
}

.modal-footer {
   border: 0;
   padding: 0 1.5rem 1.5rem;
}

.btn-close {
   background-size: 1rem;
   opacity: 0.5;
}

.btn-close:hover {
   opacity: 1;
}

/* ==========================================================
   TABS
   ========================================================== */
.tabs-nav {
   display: flex;
   gap: 0.4rem;
   border-bottom: 1px solid var(--ink-200);
   margin-bottom: 2rem;
   flex-wrap: wrap;
}

.tabs-nav button {
   padding: 0.9rem 1.3rem;
   font-weight: 500;
   color: var(--ink-500);
   position: relative;
   transition: color var(--t-fast);
}

.tabs-nav button::after {
   content: '';
   position: absolute;
   left: 1.3rem;
   right: 1.3rem;
   bottom: -1px;
   height: 2px;
   background: var(--gold-500);
   transform: scaleX(0);
   transition: transform var(--t-base);
}

.tabs-nav button.active {
   color: var(--ink-900);
}

.tabs-nav button.active::after {
   transform: scaleX(1);
}

.tabs-nav button:hover {
   color: var(--ink-900);
}

/* ==========================================================
   BREADCRUMB
   ========================================================== */
.breadcrumb {
   background: transparent;
   padding: 0;
   margin: 0 0 1.5rem;
   font-size: 0.85rem;
}

.breadcrumb-item,
.breadcrumb-item a {
   color: var(--ink-500);
}

.breadcrumb-item.active {
   color: var(--ink-800);
}

.breadcrumb-item+.breadcrumb-item::before {
   color: var(--ink-300);
   content: '/';
   margin: 0 0.6rem;
}

.breadcrumb-item a:hover {
   color: var(--gold-600);
}

/* ==========================================================
   PRODUCT DETAIL
   ========================================================== */
.product-detail {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 4rem;
}

.pd-gallery {
   display: grid;
   grid-template-columns: 80px 1fr;
   gap: 1rem;
}

.pd-thumbs {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.pd-thumb {
   width: 80px;
   height: 80px;
   border-radius: var(--radius);
   overflow: hidden;
   cursor: pointer;
   border: 2px solid transparent;
   transition: border-color var(--t-fast);
   background: var(--ink-50);
}

.pd-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.pd-thumb.active {
   border-color: var(--gold-500);
}

.pd-main-image {
   position: relative;
   aspect-ratio: 1/1;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--ink-50);
   cursor: zoom-in;
}

.pd-main-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.pd-zoom-lens {
   position: absolute;
   pointer-events: none;
   border: 1px solid rgba(201, 162, 75, 0.5);
   background: rgba(201, 162, 75, 0.1);
   width: 150px;
   height: 150px;
   display: none;
}

.pd-info .pd-cat {
   font-size: 0.75rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--gold-600);
   margin-bottom: 0.5rem;
}

.pd-info h1 {
   font-family: var(--font-display);
   font-size: clamp(1.8rem, 3vw, 2.5rem);
   margin: 0 0 1rem;
}

.pd-rating {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   margin-bottom: 1.5rem;
}

.pd-rating .stars {
   color: var(--gold-500);
}

.pd-price-block {
   display: flex;
   align-items: baseline;
   gap: 1rem;
   margin: 1.5rem 0;
   padding: 1.5rem 0;
   border-top: 1px solid var(--ink-200);
   border-bottom: 1px solid var(--ink-200);
}

.pd-price {
   font-family: var(--font-display);
   font-size: 2.4rem;
   color: var(--ink-900);
   font-weight: 600;
}

.pd-price-old {
   font-size: 1.1rem;
   color: var(--ink-400);
   text-decoration: line-through;
}

.pd-savings {
   background: var(--danger);
   color: #fff;
   padding: 0.3rem 0.7rem;
   border-radius: 4px;
   font-size: 0.75rem;
   font-weight: 600;
}

.pd-vat {
   font-size: 0.8rem;
   color: var(--ink-500);
   margin-top: 0.3rem;
}

.pd-unit-ref,
.product-unit-ref-wrap {
   margin: 0.35rem 0 0.85rem;
}

.product-unit-ref {
   display: inline-flex;
   align-items: baseline;
   gap: 0.15rem;
   font-size: 0.95rem;
   color: var(--ink-700);
}

.product-card .product-unit-ref {
   display: flex;
   margin-top: 0.25rem;
   font-size: 0.8rem;
   color: var(--ink-500);
}

.product-unit-ref__unit {
   font-weight: 700;
   color: var(--ink-900);
}

.product-unit-ref__sep {
   opacity: 0.45;
   margin: 0 0.15rem;
}

.product-unit-ref__price {
   font-weight: 600;
   color: var(--gold-700, #a8842e);
}

.pd-options {
   margin: 1.5rem 0;
}

.pd-option {
   margin-bottom: 1.2rem;
}

.pd-option-label {
   font-size: 0.85rem;
   font-weight: 600;
   margin-bottom: 0.6rem;
   display: block;
}

.pd-swatch-list {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
}

.pd-swatch {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px var(--ink-200);
   cursor: pointer;
   transition: all var(--t-fast);
}

.pd-swatch.active {
   box-shadow: 0 0 0 2px var(--gold-500);
   transform: scale(1.1);
}

.pd-chip-list {
   display: flex;
   gap: 0.4rem;
   flex-wrap: wrap;
}

.pd-chip {
   padding: 0.5rem 1rem;
   border: 1px solid var(--ink-200);
   border-radius: 999px;
   font-size: 0.85rem;
   cursor: pointer;
   transition: all var(--t-fast);
}

.pd-chip.active {
   background: var(--ink-900);
   color: #fff;
   border-color: var(--ink-900);
}

.pd-chip:hover:not(.active) {
   border-color: var(--gold-500);
}

.pd-qty-cart {
   display: flex;
   gap: 0.8rem;
   margin: 1.5rem 0;
}

.qty-input {
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--ink-200);
   border-radius: 999px;
   overflow: hidden;
}

.qty-input button {
   width: 42px;
   height: 100%;
   background: var(--ink-50);
   color: var(--ink-800);
   font-size: 1rem;
}

.qty-input button:hover {
   background: var(--ink-100);
}

.qty-input input {
   width: 50px;
   text-align: center;
   border: 0;
   background: transparent;
   font-weight: 600;
}

.pd-meta-list {
   border-top: 1px solid var(--ink-200);
   padding-top: 1.5rem;
   margin-top: 1.5rem;
}

.pd-meta-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.6rem 0;
   font-size: 0.9rem;
}

.pd-meta-row .lbl {
   color: var(--ink-500);
}

.pd-meta-row .val {
   font-weight: 500;
}

.pd-meta-row i {
   color: var(--gold-500);
   margin-right: 0.4rem;
}

.pd-share {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   margin-top: 1.5rem;
}

.pd-share a {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--ink-100);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--ink-700);
   transition: all var(--t-fast);
}

.pd-share a:hover {
   background: var(--gold-500);
   color: #fff;
}

/* ==========================================================
   PAGE BANNER
   ========================================================== */
.page-banner {
   position: relative;
   min-height: 380px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background: var(--ink-900);
   color: #fff;
   overflow: hidden;
}

.page-banner-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(14, 14, 14, 0.7), rgba(14, 14, 14, 0.5)), url('https://images.unsplash.com/photo-1615873968403-89e068629265?w=1920&q=85') center/cover no-repeat;
}

.page-banner-content {
   position: relative;
   z-index: 2;
   padding: 4rem 0;
}

.page-banner h1 {
   font-family: var(--font-display);
   font-size: clamp(2.5rem, 5vw, 4rem);
   margin: 0.5rem 0 0.8rem;
}

.page-banner p {
   font-size: 1.1rem;
   opacity: 0.85;
   max-width: 640px;
   margin: 0 auto;
}

/* ==========================================================
   FILTER SIDEBAR
   ========================================================== */
.shop-layout {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 2.5rem;
}

.filter-sidebar {
   background: #fff;
   padding: 1.5rem;
   border-radius: var(--radius-lg);
   border: 1px solid var(--ink-200);
   align-self: start;
   position: sticky;
   top: calc(var(--header-h) + 1rem);
}

.filter-group {
   border-bottom: 1px solid var(--ink-100);
   padding: 1.2rem 0;
}

.filter-group:last-child {
   border: 0;
   padding-bottom: 0;
}

.filter-group h6 {
   font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin: 0 0 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.filter-options {
   list-style: none;
   padding: 0;
   margin: 0;
   max-height: 200px;
   overflow-y: auto;
}

.filter-options li {
   margin-bottom: 0.4rem;
}

.filter-options label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
   color: var(--ink-700);
   cursor: pointer;
   padding: 0.2rem 0;
}

.filter-options .count {
   color: var(--ink-400);
   font-size: 0.8rem;
   margin-left: auto;
}

.color-list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.color-swatch {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px var(--ink-200);
   cursor: pointer;
}

.color-swatch.active {
   box-shadow: 0 0 0 2px var(--gold-500);
}

.price-range {
   display: flex;
   gap: 0.5rem;
   align-items: center;
}

.price-range input {
   width: 100%;
}

.shop-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding-bottom: 1.5rem;
   margin-bottom: 1.5rem;
   border-bottom: 1px solid var(--ink-200);
   flex-wrap: wrap;
}

.shop-toolbar .count {
   font-size: 0.9rem;
   color: var(--ink-500);
}

.shop-toolbar .sort {
   display: flex;
   align-items: center;
   gap: 0.6rem;
}

.shop-toolbar select {
   padding: 0.6rem 2.5rem 0.6rem 1rem;
   border-radius: 999px;
}

.shop-view {
   display: flex;
   gap: 0.3rem;
}

.shop-view button {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   border: 1px solid var(--ink-200);
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.shop-view button.active {
   background: var(--ink-900);
   color: #fff;
   border-color: var(--ink-900);
}

/* ==========================================================
   PAGINATION
   ========================================================== */
.pagination {
   gap: 0.4rem;
   margin-top: 3rem;
   justify-content: center;
}

.pagination .page-item .page-link {
   width: 42px;
   height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--ink-200);
   border-radius: 8px;
   color: var(--ink-700);
   font-weight: 500;
}

.pagination .page-item .page-link:hover {
   background: var(--ink-50);
   color: var(--ink-900);
}

.pagination .page-item.active .page-link {
   background: var(--ink-900);
   border-color: var(--ink-900);
   color: #fff;
}

.pagination .page-item.disabled .page-link {
   opacity: 0.4;
   pointer-events: none;
}

/* ==========================================================
   ABOUT / TIMELINE
   ========================================================== */
.timeline {
   position: relative;
   padding-left: 3rem;
}

.timeline::before {
   content: '';
   position: absolute;
   left: 1rem;
   top: 0;
   bottom: 0;
   width: 1px;
   background: var(--ink-200);
}

.timeline-item {
   position: relative;
   margin-bottom: 2.5rem;
}

.timeline-item::before {
   content: '';
   position: absolute;
   left: -2.4rem;
   top: 0.5rem;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--gold-500);
   box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--gold-200);
}

.timeline-item .year {
   font-family: var(--font-display);
   font-size: 1.4rem;
   color: var(--gold-600);
   margin-bottom: 0.3rem;
}

.timeline-item h4 {
   margin: 0 0 0.5rem;
}

.timeline-item p {
   color: var(--ink-600);
   margin: 0;
}

.about-values {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
}

.about-value-card {
   background: #fff;
   border: 1px solid var(--ink-200);
   border-radius: var(--radius-lg);
   padding: 1.8rem 1.6rem;
}

.about-value-card__icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius);
   background: var(--ink-50);
   color: var(--gold-600);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   margin-bottom: 1rem;
}

.about-value-card h3 {
   font-family: var(--font-display);
   font-size: 1.45rem;
   margin: 0 0 0.6rem;
}

.about-value-card p {
   margin: 0;
   color: var(--ink-600);
   line-height: 1.7;
}

.about-gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
}

.about-gallery__item {
   margin: 0;
}

.about-gallery__item img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: var(--radius);
   background: var(--ink-100);
}

.about-gallery__item figcaption {
   margin-top: 0.45rem;
   font-size: 0.8rem;
   color: var(--ink-500);
}

.contact-map {
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--ink-50);
   border: 1px solid var(--ink-200);
}

.contact-map iframe {
   display: block;
   width: 100%;
   height: 380px;
   border: 0;
}

.contact-map-placeholder {
   padding: 2.5rem 1.5rem;
   text-align: center;
   color: var(--ink-600);
}

.contact-map-placeholder i {
   font-size: 2rem;
   color: var(--gold-600);
   display: block;
   margin-bottom: 0.75rem;
}

.contact-map-placeholder__addr {
   margin-top: 0.75rem;
   font-weight: 600;
   color: var(--ink-800);
}

@media (max-width: 991.98px) {
   .about-values,
   .about-gallery {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 575.98px) {
   .about-values,
   .about-gallery {
      grid-template-columns: 1fr;
   }
}

/* ==========================================================
   TEAM
   ========================================================== */
.team-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
}

.team-card {
   text-align: center;
}

.team-thumb {
   aspect-ratio: 1/1;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--ink-100);
   margin-bottom: 1rem;
}

.team-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1s var(--t-lux);
}

.team-card:hover .team-thumb img {
   transform: scale(1.06);
}

.team-card h5 {
   margin: 0 0 0.2rem;
   font-size: 1.05rem;
}

.team-card p {
   font-size: 0.85rem;
   color: var(--ink-500);
   margin: 0;
}

/* ==========================================================
   DASHBOARD
   ========================================================== */
.dashboard-layout {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 2.5rem;
}

.dashboard-sidebar {
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--ink-200);
   padding: 1.5rem;
   align-self: start;
   position: sticky;
   top: calc(var(--header-h) + 1rem);
}

.dashboard-user {
   text-align: center;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid var(--ink-100);
   margin-bottom: 1.2rem;
}

.dashboard-user .avatar-lg {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: var(--ink-100);
   margin: 0 auto 0.8rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 2rem;
   color: var(--gold-600);
}

.dashboard-user h6 {
   margin: 0 0 0.2rem;
}

.dashboard-user p {
   margin: 0;
   font-size: 0.8rem;
   color: var(--ink-500);
}

.dashboard-nav {
   list-style: none;
   padding: 0;
   margin: 0;
}

.dashboard-nav li {
   margin-bottom: 0.2rem;
}

.dashboard-nav a {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   padding: 0.7rem 1rem;
   border-radius: var(--radius);
   font-size: 0.95rem;
   color: var(--ink-700);
   transition: all var(--t-fast);
}

.dashboard-nav a:hover {
   background: var(--ink-50);
   color: var(--ink-900);
}

.dashboard-nav a.active {
   background: var(--ink-900);
   color: #fff;
}

.dashboard-nav a i {
   font-size: 1.1rem;
   width: 20px;
}

.dashboard-nav .badge {
   margin-left: auto;
   background: var(--gold-500);
   color: #fff;
   font-size: 0.7rem;
   padding: 0.2rem 0.5rem;
   border-radius: 999px;
}

.dashboard-card {
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--ink-200);
   padding: 1.8rem;
}

.dashboard-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
   margin-bottom: 2rem;
}

.dashboard-stat {
   background: #fff;
   border: 1px solid var(--ink-200);
   border-radius: var(--radius);
   padding: 1.3rem;
}

.dashboard-stat .lbl {
   font-size: 0.8rem;
   color: var(--ink-500);
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.dashboard-stat .num {
   font-family: var(--font-display);
   font-size: 1.8rem;
   color: var(--ink-900);
   margin-top: 0.3rem;
   display: block;
}

.dashboard-stat .delta {
   font-size: 0.8rem;
   color: var(--success);
   margin-top: 0.3rem;
}

/* ==========================================================
   CART
   ========================================================== */
.cart-layout {
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   gap: 2.5rem;
   align-items: start;
}

.cart-items {
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--ink-200);
   padding: 1.5rem;
}

.cart-item {
   display: grid;
   grid-template-columns: 100px 1fr auto auto auto;
   gap: 1.2rem;
   align-items: center;
   padding: 1.2rem 0;
   border-bottom: 1px solid var(--ink-100);
}

.cart-item:last-child {
   border: 0;
}

.cart-item-img {
   width: 100px;
   height: 100px;
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--ink-50);
}

.cart-item-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.cart-item-info h6 {
   margin: 0 0 0.3rem;
   font-size: 0.95rem;
}

.cart-item-info p {
   margin: 0;
   font-size: 0.8rem;
   color: var(--ink-500);
}

.cart-item-price {
   font-weight: 600;
}

.cart-summary {
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--ink-200);
   padding: 1.8rem;
   position: sticky;
   top: calc(var(--header-h) + 1rem);
}

.cart-summary h5 {
   font-family: var(--font-display);
   font-size: 1.3rem;
   margin: 0 0 1.2rem;
}

.cart-summary .row-line {
   display: flex;
   justify-content: space-between;
   padding: 0.5rem 0;
   font-size: 0.95rem;
   color: var(--ink-700);
}

.cart-summary .row-line.total {
   font-family: var(--font-display);
   font-size: 1.3rem;
   color: var(--ink-900);
   padding-top: 1rem;
   margin-top: 0.5rem;
   border-top: 1px solid var(--ink-200);
}

.coupon-input {
   display: flex;
   gap: 0.4rem;
   margin: 1rem 0;
}

.coupon-input input {
   flex: 1;
   padding: 0.7rem 1rem;
   border-radius: 999px;
}

/* ==========================================================
   COMPARE
   ========================================================== */
.compare-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--ink-200);
}

.compare-table th,
.compare-table td {
   padding: 1rem;
   text-align: left;
   border-bottom: 1px solid var(--ink-100);
}

.compare-table th {
   background: var(--ink-50);
   font-weight: 600;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--ink-600);
}

.compare-table .col-product {
   width: 24%;
}

.compare-table .img-cell {
   aspect-ratio: 1/1;
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--ink-50);
}

/* ==========================================================
   404 / COMING SOON
   ========================================================== */
.error-page {
   min-height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 4rem 1rem;
}

.error-page .code {
   font-family: var(--font-display);
   font-size: clamp(6rem, 18vw, 14rem);
   line-height: 1;
   color: var(--gold-500);
   display: block;
}

.error-page h1 {
   font-family: var(--font-display);
   font-size: 2.5rem;
   margin: 1rem 0 0.8rem;
}

.error-page p {
   max-width: 540px;
   margin: 0 auto 2rem;
   color: var(--ink-600);
   font-size: 1.1rem;
}

/* ==========================================================
   ICON BOX
   ========================================================== */
.icon-box {
   width: 64px;
   height: 64px;
   border-radius: var(--radius);
   background: var(--ink-50);
   color: var(--gold-600);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   margin-bottom: 1.2rem;
}

.icon-box.lg {
   width: 84px;
   height: 84px;
   font-size: 1.8rem;
}

/* ==========================================================
   LOADING SKELETON
   ========================================================== */
.skeleton {
   background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 50%, var(--ink-100) 75%);
   background-size: 200% 100%;
   animation: skeletonShimmer 1.5s infinite;
   border-radius: var(--radius);
}

@keyframes skeletonShimmer {
   0% {
      background-position: 200% 0;
   }

   100% {
      background-position: -200% 0;
   }
}

.skeleton-line {
   height: 16px;
   margin-bottom: 0.6rem;
}

.skeleton-line.sm {
   width: 40%;
}

.skeleton-line.md {
   width: 70%;
}

/* ==========================================================
   UTILITIES
   ========================================================== */
.relative {
   position: relative;
}

.z-1 {
   z-index: 1;
}

.z-2 {
   z-index: 2;
}

.overflow-hidden {
   overflow: hidden;
}

.text-balance {
   text-wrap: balance;
}

.text-pretty {
   text-wrap: pretty;
}

.bg-cream {
   background: var(--ink-50);
}

.bg-paper {
   background: var(--paper);
}

.bg-dark {
   background: var(--ink-900);
}

.text-dark {
   color: var(--ink-900);
}

.text-gold {
   color: var(--gold-500);
}

.gap-1 {
   gap: 0.5rem;
}

.gap-2 {
   gap: 1rem;
}

.gap-3 {
   gap: 1.5rem;
}

.gap-4 {
   gap: 2rem;
}

@media (max-width: 1199.98px) {
   .feature-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .cat-grid,
   .product-grid,
   .blog-grid,
   .testimonial-grid,
   .room-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .footer-grid {
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
   }

   .team-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 991.98px) {
   :root {
      --header-h: 72px;
   }

   .newsletter-inner {
      grid-template-columns: 1fr;
      gap: 1.25rem;
   }

   .header-search {
      display: none;
   }

   .header-action .label {
      display: none;
   }

   .topbar {
      display: none;
   }

   /* Main Nav - Mobile Drawer */
   .main-nav {
      display: block !important;
      position: fixed;
      top: var(--header-h);
      left: -100%;
      width: 100%;
      height: calc(100vh - var(--header-h) - 60px);
      background: #fff;
      z-index: 1040;
      overflow-y: auto;
      transition: left var(--t-base);
      border-top: none;
      padding-bottom: 2rem;
   }

   body.mobile-menu-open .main-nav {
      left: 0;
   }

   body.mobile-menu-open {
      overflow: hidden;
   }

   .main-nav-inner {
      flex-direction: column;
      align-items: flex-start;
      padding: 1.5rem 1rem;
   }

   .nav-item-mega {
      width: 100%;
      border-bottom: 1px solid var(--ink-200);
      margin: 0;
   }

   .nav-item-mega:last-child {
      border-bottom: none;
   }

   .nav-link-mega {
      width: 100%;
      justify-content: space-between;
   }

   .mega-menu {
      position: static;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      display: none;
      padding: 1rem 0;
   }

   .nav-item-mega:hover .mega-menu,
   .nav-item-mega:focus-within .mega-menu {
      display: block;
   }

   .mega-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      padding: 0;
   }

   .mega-col h6 {
      margin-bottom: 0.8rem;
   }

   .mega-banner {
      display: none;
   }

   /* Mobile Quick Links in Drawer */
   .mobile-quick-links {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.8rem;
      margin-bottom: 1.5rem;
   }

   .quick-link-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--ink-50);
      padding: 1rem 0.5rem;
      border-radius: var(--radius);
      text-decoration: none;
      color: var(--ink-800);
      font-weight: 500;
      font-size: 0.85rem;
      border: 1px solid var(--ink-100);
      transition: all var(--t-fast);
   }

   .quick-link-box i {
      font-size: 1.5rem;
      margin-bottom: 0.3rem;
      color: var(--gold-600);
   }

   .quick-link-box:hover,
   .quick-link-box:active {
      background: #fff;
      border-color: var(--gold-300);
      color: var(--gold-600);
      box-shadow: var(--shadow-sm);
   }

   /* Hide User Actions in Top Nav */
   .nav-user-actions {
      display: none !important;
   }

   .floating-right-menu {
      display: none !important;
   }

   /* Mobile Bottom Bar */
   .mobile-bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #fff;
      border-top: 1px solid var(--ink-200);
      z-index: 1040;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0.5rem 0;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
   }

   .mobile-bottom-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--ink-600);
      text-decoration: none;
      font-size: 0.75rem;
      position: relative;
      padding: 0.2rem 0.5rem;
   }

   .mobile-bottom-item i {
      font-size: 1.3rem;
      margin-bottom: 2px;
   }

   .mobile-bottom-item.active,
   .mobile-bottom-item:hover {
      color: var(--gold-600);
   }

   .mobile-bottom-item .badge {
      position: absolute;
      top: 0;
      right: 0;
      background: var(--gold-500);
      color: #fff;
      font-size: 0.6rem;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   /* Grid adjustments */
   .cat-grid,
   .product-grid,
   .blog-grid,
   .testimonial-grid,
   .room-grid,
   .team-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .cat-tile.large {
      grid-column: span 2;
   }

   .editorial,
   .editorial.reverse {
      grid-template-columns: 1fr;
      gap: 3rem;
   }

   .editorial-media .img-float {
      display: none;
   }

   .stats-grid,
   .brand-row,
   .feature-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .shop-layout,
   .cart-layout,
   .dashboard-layout,
   .product-detail {
      grid-template-columns: 1fr;
   }

   .filter-sidebar,
   .dashboard-sidebar,
   .cart-summary {
      position: static;
   }

   .project-slide {
      flex: 0 0 calc(50% - 0.75rem);
   }

   .cta-band {
      grid-template-columns: 1fr;
      padding: 2.5rem;
   }

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

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      text-align: left;
   }

   .footer-brand,
   .footer-col,
   .footer-links,
   .site-footer h6 {
      text-align: left;
   }

   .footer-links a {
      justify-content: flex-start;
   }

   .footer-brand {
      grid-column: span 2;
   }

   .cart-item {
      grid-template-columns: 80px 1fr;
      gap: 0.8rem;
   }

   .cart-item>*:nth-child(n+3) {
      grid-column: 1 / -1;
   }

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

   .pd-thumbs {
      flex-direction: row;
   }

   .mobile-toggle {
      display: inline-flex;
   }

   .floating-actions {
      right: 1rem;
      bottom: calc(4rem + 50px);
   }
}

@media (max-width: 575.98px) {

   .cat-grid,
   .product-grid,
   .blog-grid,
   .testimonial-grid,
   .room-grid,
   .team-grid,
   .brand-row,
   .feature-grid,
   .stats-grid,
   .dashboard-stats,
   .mega-grid,
   .filter-options,
   .pd-chip-list,
   .pd-swatch-list,
   .tabs-nav {
      grid-template-columns: 1fr 1fr;
      flex-direction: column;
   }

   .feature-item,
   .stat-item {
      text-align: center;
      flex-direction: column;
      align-items: center;
   }

   .hero-stats {
      flex-wrap: wrap;
      gap: 1.5rem;
   }

   .newsletter-form,
   .coupon-input,
   .pd-qty-cart,
   .hero-actions,
   .cart-item-actions {
      flex-direction: column;
   }

   .newsletter-form .btn,
   .pd-qty-cart .btn,
   .coupon-input .btn {
      width: 100%;
      justify-content: center;
   }

   .footer-bottom {
      flex-direction: column;
      text-align: center;
   }

   .site-footer .footer-grid {
      grid-template-columns: 1fr;
      text-align: left;
   }

   .site-footer .footer-brand {
      grid-column: auto;
   }

   .site-footer .footer-col,
   .site-footer .footer-links,
   .site-footer h6 {
      text-align: left;
   }

   .site-footer .footer-links a {
      justify-content: flex-start;
   }

   .cta-band {
      padding: 1.5rem;
   }

   .recent-drawer {
      display: flex !important;
      top: auto;
      bottom: 58px;
      left: 0;
      width: 100%;
      transform: translateY(150%);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      padding: 1.2rem;
      box-shadow: 0 -5px 30px rgba(0,0,0,0.15);
      flex-direction: column;
   }
   .recent-drawer.open {
      transform: translateY(0);
   }
   .recent-drawer-toggle {
      display: none;
   }
   .recent-drawer-items-wrapper {
      max-width: 100% !important;
      opacity: 1;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
   }
   .recent-drawer-header, .recent-drawer-nav {
      display: none !important;
   }
   .recent-drawer-items {
      flex-direction: row;
      max-height: none !important;
      max-width: 100% !important;
      opacity: 1;
      overflow-x: auto;
      overflow-y: hidden;
      gap: 1rem;
      padding: 0.5rem 0;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      border: none;
      box-shadow: none;
   }
   .recent-drawer.open .recent-drawer-items {
      padding: 0.5rem 0;
      overflow-y: hidden;
   }
   .recent-drawer-item {
      flex: 0 0 84px;
      height: 84px;
      scroll-snap-align: start;
   }

   .cat-tile.large {
      grid-column: span 1;
   }

   .newsletter {
      padding: 2rem 1.2rem;
   }

   .newsletter--full {
      padding: 2.5rem 0;
      border-radius: 0 !important;
   }

   .product-detail>* {
      min-width: 0;
   }

   .mega-banner {
      display: none;
   }
}