/* ===== CSS VARIABLES ===== */
:root {
  --navy:       #0d1b2e;
  --navy-mid:   #142236;
  --navy-light: #1a2f4a;
  --gold:       #c9a84c;
  --gold-light: #e0c068;
  --gold-pale:  #f5edda;
  --gold-dim:   rgba(201,168,76,.15);
  --white:      #ffffff;
  --cream:      #faf8f3;
  --beige:      #f2eddf;
  --gray-100:   #f4f1ec;
  --gray-300:   #d6cfc0;
  --gray-500:   #7a7060;
  --gray-700:   #3d3628;
  --text:       #1a1610;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Outfit', sans-serif;
  --shadow-sm:  0 2px 10px rgba(13,27,46,.07);
  --shadow-md:  0 8px 36px rgba(13,27,46,.14);
  --shadow-lg:  0 24px 64px rgba(13,27,46,.2);
  --radius:     14px;
  --radius-sm:  8px;
  --header-h:   78px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section-pad { padding: 6rem 0; }

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold); color: var(--navy);
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  letter-spacing: .06em; padding: .9rem 2.1rem; border-radius: 50px;
  transition: background .25s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(201,168,76,.35); cursor: pointer; border: none;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,168,76,.5); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12); color: white; border: 1.5px solid rgba(255,255,255,.45);
  font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  padding: .88rem 1.9rem; border-radius: 50px; transition: all .25s; cursor: pointer;
}
.btn-ghost:hover { background: rgba(255,255,255,.22); border-color: white; }
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 2px solid var(--navy); color: var(--navy);
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  padding: .85rem 2rem; border-radius: 50px; transition: all .25s; cursor: pointer;
}
.btn-outline:hover { background: var(--navy); color: white; }
.btn-ghost-dark {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.3);
  font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  padding: .85rem 1.9rem; border-radius: 50px; transition: all .25s; cursor: pointer;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.18); color: white; border-color: white; }

/* ===== SECTION LABELS & TITLES ===== */
.section-label {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  background: var(--gold-pale); display: inline-block;
  padding: .3rem .9rem; border-radius: 50px; margin-bottom: 1rem;
  border: 1px solid rgba(201,168,76,.3);
}
.section-label.light { background: rgba(201,168,76,.15); color: var(--gold-light); border-color: rgba(201,168,76,.2); }
.section-title {
  font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700;
  line-height: 1.1; color: var(--text); text-align: center; margin-bottom: 3rem;
}
.section-title.left { text-align: left; }
.section-title.light { color: white; }

/* ===== HEADER ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h);
  background: rgba(250,248,243,.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201,168,76,.12); transition: box-shadow .3s, background .3s;
}
.site-header.scrolled { box-shadow: var(--shadow-md); background: rgba(250,248,243,.98); }
.header-inner { display: flex; align-items: center; gap: 1.8rem; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.logo-img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
.logo-text strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; color: var(--navy); line-height: 1; }
.logo-text small { font-size: .63rem; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.nav-links { display: flex; gap: 1.8rem; margin-left: auto; align-items: center; }
.nav-links > a, .nav-dropdown > a {
  font-family: var(--font-body); font-weight: 500; font-size: .92rem; letter-spacing: .04em;
  color: var(--gray-700); transition: color .2s; cursor: pointer;
}
.nav-links > a:hover, .nav-dropdown > a:hover, .nav-links > a.active, .nav-dropdown > a.active { color: var(--gold); }
.nav-dropdown { position: relative; }
.arrow { font-size: .7em; }
.dropdown-menu {
  position: absolute; top: calc(100% + .8rem); left: 0;
  background: white; border-radius: var(--radius-sm); padding: .6rem 0;
  box-shadow: var(--shadow-md); border: 1px solid var(--gray-100);
  min-width: 180px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s;
}
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a { display: block; padding: .55rem 1.2rem; font-size: .88rem; color: var(--gray-700); transition: color .15s, background .15s; }
.dropdown-menu a:hover { color: var(--gold); background: var(--gold-pale); }
.btn-header-cta {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--gold);
  color: var(--navy); font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  padding: .55rem 1.3rem; border-radius: 50px; transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.btn-header-cta:hover { background: var(--gold-light); transform: scale(1.04); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .3rem; margin-left: auto; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: all .3s; }
.mobile-nav { display: none; flex-direction: column; padding: 1rem 1.5rem 1.2rem; gap: .8rem; border-top: 1px solid var(--gray-100); background: var(--cream); }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--gray-700); padding: .3rem 0; }

/* ===== HERO ===== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: heroZoom 14s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(13,27,46,.92) 0%, rgba(13,27,46,.72) 55%, rgba(13,27,46,.32) 100%); }
.hero-content { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 4rem); padding-bottom: 4rem; max-width: 680px; }
.hero-eyebrow { display: inline-block; background: var(--gold-dim); color: var(--gold-light); border: 1px solid rgba(201,168,76,.3); font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: .38rem 1.1rem; border-radius: 50px; margin-bottom: 1.5rem; animation: fadeUp .7s .2s both; }
.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 700; line-height: .95; color: white; margin-bottom: 1.3rem; animation: fadeUp .7s .35s both; }
.hero-title em { font-style: italic; color: var(--gold-light); }
.hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.75); margin-bottom: 2.2rem; max-width: 440px; line-height: 1.7; animation: fadeUp .7s .5s both; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp .7s .65s both; }
.hero-scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(255,255,255,.4); font-size: .73rem; letter-spacing: .14em; animation: fadeUp .7s 1.2s both; }
.scroll-arrow { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent); animation: scrollPulse 2s infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.5;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.2)} }

/* ===== STATS BAR ===== */
.stats-bar { background: var(--navy); padding: 2.2rem 0; }
.stats-inner { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stat { text-align: center; padding: .5rem 1.5rem; }
.stat strong, .stat .count { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--gold-light); display: inline-block; }
.stat small { display: block; color: rgba(255,255,255,.55); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .2rem; }
.stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,.12); }

/* ===== CATEGORIES ===== */
.categories { background: var(--white); }
.categories .container { text-align: center; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cat-card { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100); transition: box-shadow .3s, transform .3s, border-color .3s; display: block; }
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); border-color: var(--gold); }
.cat-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.cat-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cat-card:hover .cat-img-wrap img { transform: scale(1.06); }
.cat-overlay { position: absolute; inset: 0; background: rgba(13,27,46,.3); transition: background .3s; }
.cat-card:hover .cat-overlay { background: rgba(13,27,46,.5); }
.cat-info { padding: 1.3rem 1.5rem; text-align: left; }
.cat-info h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; }
.cat-info p { font-size: .85rem; color: var(--gray-500); margin-bottom: .6rem; }
.cat-link { font-size: .82rem; font-weight: 600; color: var(--gold); letter-spacing: .04em; }

/* ===== ABOUT PREVIEW ===== */
.bg-navy { background: var(--navy); }
.bg-cream { background: var(--cream); }
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-img-col { position: relative; }
.about-img-col img { border-radius: var(--radius); width: 100%; height: 500px; object-fit: cover; box-shadow: var(--shadow-lg); }
.about-badge-card { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--gold); color: var(--navy); padding: 1rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .8rem; }
.badge-icon { font-size: 1.8rem; }
.about-badge-card strong { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; }
.about-badge-card small { font-size: .78rem; opacity: .8; }
.about-text-col p { color: rgba(255,255,255,.75); line-height: 1.8; margin-bottom: 1rem; font-size: .97rem; }
.feature-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.feature-list li { font-size: .95rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: .6rem; }
.feat-icon { color: var(--gold); font-size: .8rem; }

/* ===== RECENT WORKS ===== */
.recent-works .container { text-align: center; }
.works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.work-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3/4; cursor: pointer; }
.work-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.work-item:hover img { transform: scale(1.07); }
.work-overlay { position: absolute; inset: 0; background: rgba(13,27,46,.6); display: flex; align-items: flex-end; padding: 1.2rem; opacity: 0; transition: opacity .3s; }
.work-overlay span { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--gold-light); }
.work-item:hover .work-overlay { opacity: 1; }

/* ===== WHY US ===== */
.why-us .container { text-align: center; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: left; }
.why-card { background: white; border-radius: var(--radius); padding: 2rem 1.8rem; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100); transition: all .3s; }
.why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--gold); }
.why-icon { font-size: 2rem; margin-bottom: 1rem; }
.why-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.why-card p { color: var(--gray-500); font-size: .9rem; line-height: 1.65; }

/* ===== CTA BAND ===== */
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); padding: 4.5rem 0; border-top: 2px solid rgba(201,168,76,.25); }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-inner h2 { font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 700; color: white; line-height: 1.2; margin-bottom: .5rem; }
.cta-inner p { color: rgba(255,255,255,.6); font-size: .95rem; }
.cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ===== FOOTER ===== */
.footer { background: var(--navy); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 4rem 0; }
.footer-brand { }
.footer-logo-img { width: 70px; height: 70px; object-fit: contain; border-radius: 50%; margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,.55); font-size: .88rem; line-height: 1.7; margin-bottom: 1.2rem; max-width: 260px; }
.footer-social { display: flex; gap: .8rem; }
.footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); transition: all .2s; }
.footer-social a:hover { background: var(--gold); color: var(--navy); }
.footer-col h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--gold-light); margin-bottom: 1.2rem; letter-spacing: .05em; }
.footer-col ul { display: flex; flex-direction: column; gap: .55rem; }
.footer-col ul li a { font-size: .88rem; color: rgba(255,255,255,.55); transition: color .2s; }
.footer-col ul li a:hover { color: var(--gold-light); }
.contact-list li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: rgba(255,255,255,.55); }
.contact-list li a { color: rgba(255,255,255,.55); transition: color .2s; }
.contact-list li a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1.3rem 0; }
.footer-bottom p { text-align: center; color: rgba(255,255,255,.3); font-size: .8rem; }

/* ===== WA FLOAT ===== */
.wa-float { position: fixed; bottom: 2rem; right: 2rem; width: 58px; height: 58px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 999; box-shadow: 0 4px 20px rgba(37,211,102,.45); transition: transform .3s; animation: waPulse 2.5s infinite; }
.wa-float:hover { transform: scale(1.12); }
@keyframes waPulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.45)} 50%{box-shadow:0 4px 30px rgba(37,211,102,.8),0 0 0 10px rgba(37,211,102,.07)} }

/* ===== PAGE HERO ===== */
.page-hero { position: relative; height: 340px; display: flex; align-items: flex-end; margin-top: var(--header-h); overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,27,46,.92) 0%, rgba(13,27,46,.5) 100%); }
.page-hero-content { position: relative; z-index: 2; padding-bottom: 2.5rem; }
.breadcrumb { font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: .6rem; }
.breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb span { margin: 0 .4rem; }
.page-hero-content h1 { font-family: var(--font-display); font-size: clamp(2rem,5vw,3.2rem); font-weight: 700; color: white; }

/* ===== HAKKIMIZDA DETAIL ===== */
.about-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.about-detail-text p { color: var(--gray-700); line-height: 1.8; margin-bottom: 1rem; font-size: .97rem; }
.about-detail-img img { border-radius: var(--radius); width: 100%; height: 420px; object-fit: cover; box-shadow: var(--shadow-lg); }

/* ===== VALUES ===== */
.values-section .container { text-align: center; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: left; }
.value-card { background: white; border-radius: var(--radius); padding: 2rem 1.8rem; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100); transition: all .3s; }
.value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--gold); }
.value-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .6rem; }
.value-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.value-card p { color: var(--gray-500); font-size: .9rem; line-height: 1.65; }

/* ===== PRODUCTS PAGE ===== */
.product-nav { background: white; border-bottom: 1px solid var(--gray-100); padding: 0; z-index: 100; }
.sticky-product-nav { position: sticky; top: var(--header-h); }
.product-nav-inner { display: flex; gap: 0; overflow-x: auto; }
.product-nav-inner a { font-family: var(--font-body); font-size: .88rem; font-weight: 500; color: var(--gray-500); padding: 1rem 1.4rem; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .2s; }
.product-nav-inner a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.product-section { }
.section-divider { height: 1px; background: var(--gray-100); margin: 0; }
.product-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 4rem; }
.product-feature.reverse { direction: rtl; }
.product-feature.reverse > * { direction: ltr; }
.product-feature-img { border-radius: var(--radius); overflow: hidden; }
.product-feature-img img { width: 100%; height: 380px; object-fit: cover; transition: transform .5s; }
.product-feature-img:hover img { transform: scale(1.04); }
.product-feature-text h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--navy); margin-bottom: 1rem; }
.product-feature-text p { color: var(--gray-700); line-height: 1.8; font-size: .97rem; margin-bottom: 1.5rem; }
.product-features { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; }
.product-features li { font-size: .92rem; color: var(--text); display: flex; align-items: center; gap: .6rem; }
.product-features li::before { content: ""; display: none; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.product-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover img { transform: scale(1.07); }
.product-card span { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(13,27,46,.85), transparent); color: white; font-family: var(--font-display); font-size: .95rem; font-weight: 600; padding: 1rem 1rem .8rem; }

/* ===== GALLERY PAGE ===== */
.gallery-filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.5rem; justify-content: center; }
.filter-btn { font-family: var(--font-body); font-size: .85rem; font-weight: 500; padding: .5rem 1.3rem; border-radius: 50px; border: 1.5px solid var(--gray-300); background: none; color: var(--gray-700); cursor: pointer; transition: all .2s; }
.filter-btn:hover, .filter-btn.active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.masonry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.masonry-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; transition: transform .3s; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.masonry-item:hover img { transform: scale(1.07); }
.masonry-item .gallery-overlay { position: absolute; inset: 0; background: rgba(13,27,46,.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.masonry-item .gallery-overlay span { color: var(--gold-light); font-family: var(--font-display); font-size: 1rem; font-weight: 600; border: 1px solid var(--gold-light); padding: .35rem 1.1rem; border-radius: 50px; }
.masonry-item:hover .gallery-overlay { opacity: 1; }
.masonry-item.hidden { display: none; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.93); z-index: 9999; display: none; align-items: center; justify-content: center; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox-close { position: absolute; top: 1.5rem; right: 2rem; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; opacity: .6; transition: opacity .2s; }
.lightbox-close:hover { opacity: 1; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: none; color: white; font-size: 3rem; cursor: pointer; padding: .5rem 1rem; border-radius: 8px; transition: background .2s; }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.22); }

/* ===== CONTACT PAGE ===== */
.contact-page-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-bottom: 4rem; align-items: start; }
.contact-info-block .section-label { margin-bottom: .8rem; }
.contact-info-block > p { color: var(--gray-700); line-height: 1.8; margin-bottom: 2rem; font-size: .97rem; }
.cinfo-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.cinfo-icon { font-size: 1.2rem; width: 44px; height: 44px; background: var(--gold-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cinfo-item strong { display: block; font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-500); margin-bottom: .2rem; }
.cinfo-item a { color: var(--text); font-size: .97rem; transition: color .2s; }
.cinfo-item a:hover { color: var(--gold); }
.contact-social-btns { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.social-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: 50px; font-family: var(--font-body); font-size: .9rem; font-weight: 600; transition: all .25s; }
.social-btn.whatsapp { background: #25d366; color: white; }
.social-btn.whatsapp:hover { background: #1ebe5c; transform: translateY(-2px); }
.social-btn.phone { background: var(--navy); color: white; }
.social-btn.phone:hover { background: var(--navy-light); transform: translateY(-2px); }
.contact-form-block { background: var(--cream); border-radius: var(--radius); padding: 2.5rem; border: 1px solid var(--gray-100); }
.contact-form-block h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 1.8rem; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group.full { grid-column: span 2; }
.form-group label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--gray-500); text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea { padding: .75rem 1rem; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .93rem; color: var(--text); background: white; transition: border-color .2s; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); }
.form-group textarea { resize: vertical; }
.full-btn { grid-column: span 2; justify-content: center; }
.form-success { text-align: center; padding: 2rem 0; }
.success-icon { font-size: 3rem; margin-bottom: 1rem; }
.form-success h4 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.form-success p { color: var(--gray-500); font-size: .95rem; }
.map-container { margin-top: 0; }
.map-container iframe { width: 100%; height: 380px; border-radius: var(--radius); border: none; box-shadow: var(--shadow-md); display: block; }

/* ===== HAKKIMIZDA about-list ===== */
.about-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.about-list li { font-size: .95rem; color: var(--text); font-weight: 500; }

/* ===== REVEAL ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .kw-grid{grid-template-columns:repeat(2,1fr)}
  .about-inner{grid-template-columns:1fr;gap:3rem}
  .about-img-col img{height:360px}
  .about-badge-card{right:0;bottom:-1rem}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem}
  .about-detail{grid-template-columns:1fr;gap:3rem}
  .contact-page-inner{grid-template-columns:1fr;gap:3rem}
  .masonry-grid{grid-template-columns:repeat(3,1fr)}
  .product-feature{grid-template-columns:1fr;gap:2.5rem}
  .product-feature.reverse{direction:ltr}
}

@media(max-width:768px){
  .nav-links,.btn-header-cta{display:none}
  .hamburger{display:flex}
  .cat-grid{grid-template-columns:1fr}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr 1fr}
  .values-grid{grid-template-columns:1fr 1fr}
  .cta-inner{flex-direction:column;text-align:center}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-copy{text-align:left}
  .stat-divider{display:none}
  .masonry-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:1fr 1fr}
  .contact-form{grid-template-columns:1fr}
  .form-group.full,.full-btn{grid-column:span 1}
  .hero-scroll-hint{display:none}
}

@media(max-width:480px){
  .why-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .masonry-grid{grid-template-columns:1fr 1fr}
  .hero-ctas{flex-direction:column}
  .cta-btns{flex-direction:column;width:100%}
  .product-grid{grid-template-columns:1fr}
  .contact-social-btns{flex-direction:column}
}