@charset "UTF-8";
/* ========================================================================== 
   METİN BOYA — ULTRA MODERN CORPORATE UI
   Brand palette is intentionally preserved. No rebranding colors introduced.
   ========================================================================== */

:root {
  --color-primary: #690075;
  --color-primary-container: #852490;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #fda6ff;
  --color-primary-fixed: #ffd6fb;
  --color-primary-fixed-dim: #fda9ff;
  --color-on-primary-fixed: #36003d;
  --color-on-primary-fixed-variant: #781584;

  --color-secondary: #a04100;
  --color-secondary-container: #fc772a;
  --color-on-secondary-container: #5e2300;
  --color-secondary-fixed: #ffdbcc;
  --color-secondary-fixed-dim: #ffb693;

  --color-tertiary: #003f59;
  --color-tertiary-container: #00577a;
  --color-on-tertiary-container: #7bcdff;

  --color-background: #fcf9f8;
  --color-surface: #fcf9f8;
  --color-surface-bright: #fcf9f8;
  --color-surface-dim: #dcd9d9;
  --color-surface-container: #f0eded;
  --color-surface-container-low: #f6f3f2;
  --color-surface-container-high: #eae7e7;
  --color-surface-container-highest: #e5e2e1;
  --color-surface-container-lowest: #ffffff;
  --color-on-background: #1c1b1b;
  --color-on-surface: #1c1b1b;
  --color-on-surface-variant: #50424f;
  --color-outline: #827280;
  --color-outline-variant: #d4c1d0;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;

  --container: 1360px;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --shadow-sm: 0 6px 20px rgba(28, 27, 27, .05);
  --shadow-md: 0 18px 55px rgba(28, 27, 27, .08);
  --shadow-primary: 0 28px 80px rgba(105, 0, 117, .18);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-background); }
body.metin-modern {
  margin: 0;
  color: var(--color-on-background);
  background:
    radial-gradient(circle at 84% 8%, rgba(253, 169, 255, .13), transparent 24rem),
    radial-gradient(circle at 8% 44%, rgba(252, 119, 42, .055), transparent 23rem),
    var(--color-background);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}
body.metin-modern::selection { background: var(--color-primary-fixed); color: var(--color-on-primary-fixed); }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(105, 0, 117, .22);
  outline-offset: 3px;
}
h1,h2,h3,h4,h5,h6 { font-family: "Inter", sans-serif; text-wrap: balance; letter-spacing: -.03em; }
p,li { text-wrap: pretty; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 420, 'GRAD' 0, 'opsz' 24; vertical-align: middle; line-height: 1; }
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 420, 'GRAD' 0, 'opsz' 24; }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--color-surface-container-low); }
::-webkit-scrollbar-thumb { background: rgba(130,114,128,.58); border: 2px solid var(--color-surface-container-low); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* --------------------------------------------------------------------------
   Corporate top bar + navigation
   -------------------------------------------------------------------------- */
.site-topbar {
  max-width: none !important;
  padding-inline: max(32px, calc((100vw - var(--container)) / 2 + 24px)) !important;
  height: 34px !important;
  background: var(--color-on-primary-fixed) !important;
  font-size: 11px !important;
  letter-spacing: .045em;
}
.site-topbar > * { max-width: var(--container); }
.site-header {
  top: 0;
  border: 0 !important;
  background: rgba(252,249,248,.91) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 1px 0 rgba(212,193,208,.55), 0 12px 32px rgba(28,27,27,.035) !important;
}
.site-header > div {
  max-width: var(--container) !important;
  height: 84px !important;
  padding-inline: 24px !important;
}
.site-brand { min-width: 176px; }
.site-brand img { height: 48px !important; width: auto; transform: none !important; }
.site-brand > span { display: none !important; }
.site-nav { gap: 6px !important; }
.site-nav a {
  position: relative;
  border: 0 !important;
  padding: 10px 11px !important;
  color: var(--color-on-surface-variant) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  border-radius: 999px;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  background: var(--color-primary);
  border-radius: 99px;
  transform: translateX(-50%);
  transition: width .22s var(--ease-out);
}
.site-nav a:hover { color: var(--color-primary) !important; background: rgba(105,0,117,.055); }
.site-nav a:hover::after { width: 18px; }
.site-nav a:nth-child(1), .site-nav a:nth-child(5), .site-nav a:nth-child(8) { display: none; }
.header-search input {
  width: 172px !important;
  height: 40px;
  border: 1px solid rgba(212,193,208,.78) !important;
  background: rgba(255,255,255,.72) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.header-search input:focus { width: 205px !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(105,0,117,.08); }
.header-cta {
  border-radius: 999px !important;
  padding: 11px 17px !important;
  box-shadow: 0 10px 24px rgba(105,0,117,.16) !important;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease !important;
}
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(105,0,117,.22) !important; }

/* --------------------------------------------------------------------------
   Hero — premium brand block
   -------------------------------------------------------------------------- */
.hero-shell {
  max-width: var(--container) !important;
  margin-top: 26px !important;
  margin-bottom: 28px !important;
  padding: 76px 68px !important;
  min-height: 650px;
  border-radius: var(--radius-xl);
  isolation: isolate;
  box-shadow: var(--shadow-primary);
}
.hero-backdrop {
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  background:
    linear-gradient(115deg, rgba(28,27,27,.98) 0%, rgba(54,0,61,.98) 43%, rgba(105,0,117,.98) 100%) !important;
}
.hero-shell::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.13);
  z-index: -1;
}
.hero-orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.hero-orbit-one { width: 520px; height: 520px; right: -190px; top: -270px; }
.hero-orbit-two { width: 360px; height: 360px; right: 33%; bottom: -280px; border-color: rgba(253,169,255,.12); }
.hero-spectrum {
  position: absolute;
  width: 176px;
  height: 5px;
  left: 68px;
  top: 38px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 5px;
  z-index: 2;
}
.hero-spectrum span { border-radius: 99px; }
.hero-spectrum span:nth-child(1) { background: var(--color-primary-fixed-dim); }
.hero-spectrum span:nth-child(2) { background: var(--color-secondary-container); }
.hero-spectrum span:nth-child(3) { background: var(--color-on-tertiary-container); }
.hero-grid { gap: 64px !important; }
.hero-copy { color: white; }
.hero-eyebrow {
  color: var(--color-primary-fixed) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px !important;
  letter-spacing: .065em;
}
.hero-title {
  max-width: 720px;
  color: #fff !important;
  font-size: clamp(42px, 4.1vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.052em !important;
  font-weight: 790 !important;
}
.hero-title .text-primary { color: var(--color-primary-fixed-dim) !important; }
.hero-lede {
  max-width: 650px !important;
  color: rgba(255,255,255,.74) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}
.hero-primary-cta, .hero-secondary-cta {
  min-height: 52px;
  border-radius: 999px !important;
  padding-inline: 24px !important;
  font-size: 12px;
  letter-spacing: .045em;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background .22s ease !important;
}
.hero-primary-cta {
  color: #351000 !important;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 15px 32px rgba(252,119,42,.22) !important;
}
.hero-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(252,119,42,.30) !important; }
.hero-secondary-cta {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.25) !important;
  backdrop-filter: blur(10px);
}
.hero-secondary-cta:hover { transform: translateY(-2px); background: rgba(255,255,255,.12) !important; }
.hero-metrics {
  margin-top: 7px;
  padding-top: 22px !important;
  border-color: rgba(255,255,255,.13) !important;
}
.hero-metrics strong { color: #fff !important; font-size: 19px !important; letter-spacing: -.02em; }
.hero-metrics span { color: rgba(255,255,255,.57) !important; line-height: 1.4; }

/* Wizard */
.wizard-card {
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 26px !important;
  padding: 28px !important;
  background: rgba(255,255,255,.965) !important;
  box-shadow: 0 32px 90px rgba(20,0,24,.30), inset 0 1px 0 #fff !important;
  overflow: hidden;
}
.wizard-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--color-primary), var(--color-secondary-container));
}
.wizard-card > .absolute { opacity: .65; }
.wizard-card h2 { letter-spacing: -.035em; }
.wizard-card input, .wizard-card select {
  min-height: 44px;
  border-color: rgba(212,193,208,.9) !important;
  border-radius: 12px !important;
  background: var(--color-surface-container-low) !important;
}
.wizard-card input:focus, .wizard-card select:focus {
  background: #fff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(105,0,117,.07) !important;
}
.wizard-card #wizard-btn-next, .wizard-card #wizard-btn-whatsapp-submit {
  min-height: 48px;
  border-radius: 999px !important;
}
.wizard-card #wizard-btn-prev { border-radius: 999px !important; min-height: 44px; }
.step-indicator-btn { position: relative; z-index: 1; }
.step-indicator-circle { transition: all .24s var(--ease-out); box-shadow: 0 0 0 3px #fff; }
.wizard-step { display: none; opacity: 0; transform: translateY(8px); transition: opacity .24s ease, transform .24s var(--ease-out); }
.wizard-step.active { display: flex; opacity: 1; transform: translateY(0); }
.brand-select-btn { transition: all .16s var(--ease-out); }
.brand-select-btn:hover { transform: translateY(-1px); }
.brand-select-btn.selected { border-color: var(--color-primary) !important; background: rgba(105,0,117,.075) !important; color: var(--color-primary) !important; font-weight: 700; }
.format-option-card { cursor: pointer; transition: transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s ease; }
.format-option-card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.format-option-card.selected { border-color: var(--color-secondary-container) !important; background: rgba(252,119,42,.055) !important; }

/* --------------------------------------------------------------------------
   Brand band
   -------------------------------------------------------------------------- */
.brand-strip {
  padding-block: 34px !important;
  border: 0 !important;
  background: transparent !important;
}
.brand-strip > div:first-child span { color: rgba(80,66,79,.65) !important; font-size: 10px !important; letter-spacing: .15em !important; }
.marquee-container { display: flex; overflow: hidden; user-select: none; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-content { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: 12px !important; animation: marquee-scroll 34s linear infinite; }
.marquee-content > span {
  min-width: 126px;
  text-align: center;
  padding: 13px 18px !important;
  border-radius: 999px !important;
  border-color: rgba(212,193,208,.66) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
  font-size: 11px;
  letter-spacing: .08em;
}
.marquee-container:hover .marquee-content { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Shared section architecture
   -------------------------------------------------------------------------- */
.corporate-section, .catalog-section, .mix-section, .branches-section, .docs-section, .faq-section, .contact-section {
  max-width: var(--container) !important;
  padding: 96px 48px !important;
}
.corporate-section h2, .catalog-section h2, .mix-section h2, .branches-section h2, .docs-section h2, .faq-section h2, .contact-section h2 {
  font-size: clamp(32px, 3vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  font-weight: 760 !important;
}
.corporate-section p, .catalog-section p, .mix-section p, .branches-section p, .docs-section p, .faq-section p, .contact-section p { line-height: 1.72; }
.corporate-section .rounded-full, .mix-section .rounded-full, .contact-section .rounded-full { border: 1px solid rgba(105,0,117,.10); }

/* Corporate */
.corporate-section { position: relative; }
.corporate-section > .grid { gap: 72px !important; }
.corporate-section .lg\:col-span-6.bg-surface-bright {
  border-radius: var(--radius-lg) !important;
  border-color: rgba(212,193,208,.66) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 34px !important;
  background: rgba(255,255,255,.78) !important;
}
.corporate-section .grid.grid-cols-2 > div {
  padding: 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(212,193,208,.58) !important;
  background: rgba(255,255,255,.66) !important;
}

/* Catalog */
.catalog-section {
  max-width: none !important;
  padding-inline: max(48px, calc((100vw - var(--container)) / 2 + 48px)) !important;
  background: var(--color-surface-container-low) !important;
  border-block: 1px solid rgba(212,193,208,.45);
}
.catalog-section > * { max-width: calc(var(--container) - 96px); margin-inline: auto; }
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento-grid > div { grid-column: span 3; min-width: 0; border-radius: 24px !important; border-color: rgba(212,193,208,.65) !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 4px 0 rgba(255,255,255,.65); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease !important; }
.bento-grid > div:hover { transform: translateY(-7px); box-shadow: 0 24px 55px rgba(28,27,27,.10) !important; border-color: rgba(105,0,117,.22) !important; }
.bento-grid > div .h-48 { height: 220px !important; }
.bento-grid > div .bg-cover::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(28,27,27,.34) 100%); }
.bento-grid > div h3 { font-size: 21px !important; letter-spacing: -.03em; }
.bento-grid > div button { border-radius: 999px !important; background: var(--color-surface-container-low) !important; border-color: transparent !important; }
.bento-grid > div button:hover { background: var(--color-primary) !important; }

/* Mix calculator */
.mix-section {
  margin-block: 42px !important;
  border: 0 !important;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-on-primary-fixed), var(--color-primary)) !important;
  box-shadow: var(--shadow-primary);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.mix-section::after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.1); border-radius:50%; right:-280px; bottom:-280px; pointer-events:none; }
.mix-section > .grid { gap: 68px !important; position:relative; z-index:1; }
.mix-section .lg\:col-span-5 { border: 1px solid rgba(255,255,255,.64) !important; border-radius: 26px !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 30px 70px rgba(20,0,24,.27) !important; }
.mix-section .lg\:col-span-7 h2 { color: #fff !important; }
.mix-section .lg\:col-span-7 > p { color: rgba(255,255,255,.72) !important; }
.mix-section .lg\:col-span-7 > div:first-child { color: var(--color-secondary-fixed) !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12); }
.mix-section .lg\:col-span-7 .space-y-2\.5 > div { color: rgba(255,255,255,.86) !important; background: rgba(255,255,255,.075) !important; border-color: rgba(255,255,255,.12) !important; border-radius: 16px !important; backdrop-filter: blur(8px); }
.mix-section .lg\:col-span-7 .space-y-2\.5 strong { color: white; }

/* Branches */
.branches-section > .bg-surface-bright { border-radius: 28px !important; border-color: rgba(212,193,208,.60) !important; box-shadow: var(--shadow-md) !important; }
.branch-tab-btn { position: relative; border-right-color: rgba(212,193,208,.42) !important; padding-block: 17px !important; }
.branch-tab-btn.active, .branch-tab-btn.bg-primary { background: var(--color-primary) !important; color: #fff !important; }
.branches-section #branch-display-directions, .branches-section #branch-display-whatsapp { border-radius: 999px !important; min-height: 46px; }

/* Docs + FAQ */
.docs-section {
  max-width: none !important;
  padding-inline: max(48px, calc((100vw - var(--container)) / 2 + 48px)) !important;
  background: var(--color-surface-container-low) !important;
  border-color: rgba(212,193,208,.45) !important;
}
.docs-section > div { max-width: 880px !important; }
.docs-section .bg-surface-bright, details.accordion-item {
  border-radius: 18px !important;
  border-color: rgba(212,193,208,.64) !important;
  box-shadow: 0 4px 0 rgba(255,255,255,.72);
  overflow: hidden;
}
.docs-section button { border-radius: 999px !important; }
.faq-section { max-width: 980px !important; }
details.accordion-item { background: rgba(255,255,255,.78) !important; transition: border-color .2s ease, background .2s ease, transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
details.accordion-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
details.accordion-item[open] { border-color: rgba(105,0,117,.35) !important; background: #fff !important; }
details.accordion-item summary::-webkit-details-marker { display:none; }
details.accordion-item summary { list-style:none; cursor:pointer; user-select:none; }
details.accordion-item[open] .accordion-icon { transform: rotate(180deg); color: var(--color-primary); }
.accordion-content { animation: details-fade .26s var(--ease-out); }
@keyframes details-fade { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }

/* Contact CTA */
.contact-section > div {
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  padding: 56px !important;
  color: #fff;
  background: linear-gradient(125deg, var(--color-tertiary), var(--color-on-primary-fixed)) !important;
  box-shadow: 0 28px 75px rgba(0,63,89,.16) !important;
  position: relative;
  overflow: hidden;
}
.contact-section > div::after { content:""; position:absolute; width:320px; height:320px; right:-130px; top:-150px; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.contact-section h2 { color: #fff !important; }
.contact-section .lg\:col-span-7 > p { color: rgba(255,255,255,.72) !important; }
.contact-section .lg\:col-span-7 > div:first-child { color: var(--color-secondary-fixed) !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12); }
.contact-section .lg\:col-span-5 { background: rgba(255,255,255,.96) !important; border-color: rgba(255,255,255,.7) !important; border-radius: 22px !important; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.contact-section a { border-radius: 999px !important; }

/* Footer */
.site-footer {
  margin-top: 62px !important;
  padding-block: 72px 36px !important;
  background: var(--color-on-background) !important;
  border-top: 5px solid var(--color-primary);
}
.site-footer > div { max-width: calc(var(--container) - 96px) !important; }
.site-footer .footer-logo { height: 44px !important; padding: 7px 10px; background: #fff; border-radius: 10px; }
.site-footer .footer-logo + span { display: none; }
.site-footer h5 { letter-spacing: .12em; }
.site-footer a { text-decoration: none !important; }
.site-footer a:hover { opacity: 1 !important; color: var(--color-primary-fixed-dim) !important; }

/* Modal + toast + floating action */
.custom-modal { display:none; position:fixed; inset:0; z-index:9999; background:rgba(28,27,27,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); align-items:center; justify-content:center; opacity:0; transition:opacity .25s ease; padding:20px; }
.custom-modal.show { display:flex; opacity:1; }
.modal-content-box { transform:translateY(8px) scale(.985); transition:transform .3s var(--ease-out); border-radius:26px !important; border-color:rgba(212,193,208,.72) !important; box-shadow:0 30px 100px rgba(0,0,0,.28) !important; }
.custom-modal.show .modal-content-box { transform:translateY(0) scale(1); }
.tag-pin-btn { transition:all .2s var(--ease-out); }
.tag-pin-btn.selected { border-color:var(--color-primary)!important; background:var(--color-primary)!important; color:#fff!important; }
#toast-container { position:fixed; bottom:24px; right:24px; z-index:10000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { pointer-events:auto; min-width:280px; max-width:390px; background:rgba(28,27,27,.96); backdrop-filter:blur(16px); color:#fff; border:1px solid rgba(255,255,255,.1); border-left:4px solid var(--color-secondary-container); padding:14px 18px; border-radius:14px; box-shadow:0 18px 55px rgba(0,0,0,.18); display:flex; align-items:center; gap:12px; font-size:14px; animation:slide-in-toast .3s var(--ease-out) forwards; }
@keyframes slide-in-toast { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.floating-contact { width:58px !important; height:58px !important; color:#351000 !important; border:1px solid rgba(255,255,255,.65); box-shadow:0 18px 38px rgba(252,119,42,.28) !important; }
.floating-contact:hover { transform:translateY(-4px) scale(1.03) !important; }
.hide-scrollbar::-webkit-scrollbar { display:none; }
.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
@keyframes pulse-gentle { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.035); opacity:.92; } }
.animate-pulse-gentle { animation:pulse-gentle 2.5s infinite ease-in-out; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.animate-float { animation:float 3.3s ease-in-out infinite; }
.glass-card { background:rgba(255,255,255,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(212,193,208,.50); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .site-nav a:nth-child(7) { display:none; }
  .header-search { display:none !important; }
  .hero-shell { margin-inline:20px !important; padding-inline:50px !important; }
  .hero-spectrum { left:50px; }
  .bento-grid > div { grid-column:span 6; }
}
@media (max-width: 1023px) {
  .site-nav { display:none !important; }
  .site-header > div { height:76px !important; }
  .hero-shell { min-height:0; padding:66px 38px 42px !important; border-radius:30px; }
  .hero-grid { gap:42px !important; }
  .hero-copy { align-items:flex-start; }
  .hero-title { max-width:800px; }
  .wizard-card { max-width:760px; width:100%; }
  .corporate-section, .catalog-section, .mix-section, .branches-section, .docs-section, .faq-section, .contact-section { padding:78px 28px !important; }
  .catalog-section, .docs-section { padding-inline:28px !important; }
  .catalog-section > * { max-width:100%; }
  .mix-section { margin-inline:20px !important; }
  .contact-section > div { padding:38px !important; }
}
@media (max-width: 767px) {
  body.metin-modern { background:var(--color-background); }
  .site-header > div { padding-inline:16px !important; }
  .site-brand { min-width:0; }
  .site-brand img { height:40px !important; }
  .header-cta { display:none !important; }
  .hero-shell { margin:12px 10px 18px !important; padding:60px 20px 22px !important; border-radius:24px; }
  .hero-backdrop, .hero-shell::after { border-radius:24px !important; }
  .hero-spectrum { left:20px; top:28px; width:120px; }
  .hero-title { font-size:clamp(38px, 11vw, 50px) !important; line-height:1.03 !important; }
  .hero-lede { font-size:15px !important; line-height:1.65 !important; }
  .hero-primary-cta, .hero-secondary-cta { width:100%; }
  .hero-metrics { gap:8px !important; }
  .hero-metrics strong { font-size:16px !important; }
  .hero-metrics span { font-size:10px; }
  .wizard-card { padding:21px 17px !important; border-radius:20px !important; }
  .wizard-card h2 { font-size:20px !important; }
  .wizard-card > .flex.items-center.justify-between.gap-3.mb-6 > span { display:none; }
  .step-indicator-btn span { display:none; }
  .brand-strip { padding-block:26px !important; }
  .corporate-section, .catalog-section, .mix-section, .branches-section, .docs-section, .faq-section, .contact-section { padding:64px 18px !important; }
  .mix-section { margin:18px 10px !important; padding:52px 18px !important; border-radius:24px; }
  .bento-grid { grid-template-columns:1fr; }
  .bento-grid > div { grid-column:auto; }
  .bento-grid > div .h-48 { height:200px !important; }
  .contact-section > div { padding:30px 22px !important; border-radius:24px !important; }
  .site-footer { padding:56px 20px 30px !important; }
  .floating-contact { right:16px !important; bottom:16px !important; }
  #toast-container { right:14px; left:14px; bottom:84px; }
  .toast { min-width:0; max-width:none; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}