/* Shared theme colors and motion for every Maker Ticaret page. */
html{color-scheme:light;scroll-behavior:smooth}
html[data-theme="dark"]{color-scheme:dark}
body,header,footer,.mobile,.mobilemenu,.navsearch,.search,.theme,.card,.contact-card,.value,.error{
  transition-property:background-color,color,border-color,box-shadow,transform;
  transition-duration:.32s;
  transition-timing-function:ease;
}

/* Mobile navigation follows the active theme. */
.mobilemenu,.mobile{background-color:var(--bg,var(--cream,var(--paper)))!important;color:var(--ink)}
.mobilemenu{box-shadow:0 12px 28px rgba(25,20,12,.12)}
.mobile{width:100%;box-sizing:border-box;align-items:stretch;text-align:left;opacity:0;transform:translateY(-7px);visibility:hidden;backdrop-filter:none;transition:max-height .38s cubic-bezier(.2,.7,.2,1),opacity .25s ease,transform .32s ease,padding .3s ease,visibility 0s linear .34s}
.mobile.open{opacity:1;transform:translateY(0);visibility:visible;transition-delay:0s}
.mobilemenu a,.mobile a{display:block;width:100%;box-sizing:border-box;text-align:left;color:var(--ink)!important;border-color:var(--line)}
.menu-theme-row,.menu-theme-row span{color:var(--ink)!important}
.switch{background:var(--line)!important;transition:background-color .3s ease,box-shadow .3s ease}
.switch .knob{background:var(--paper)!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s ease}
.switch.active{background:var(--copper)!important}
.switch.active .knob{background:#fff!important}

/* Animated three-line menu icon. */
.navrow .burger,.tools .burger,.burger{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--paper);color:var(--ink);font-size:0;line-height:0;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.burger span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease,width .2s ease}
.burger.open{transform:none!important}
.burger.open span:first-child{transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger.open span:last-child{transform:translateY(-6px) rotate(-45deg)}
.burger:hover{transform:scale(1.06)}
.burger.open:hover{transform:none}
.burger:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* Stagger links into view as the mobile menu opens. */
.mobilemenu a,.mobile a{opacity:0;transform:translateX(-9px);transition:opacity .24s ease,transform .32s cubic-bezier(.2,.7,.2,1),color .3s ease,border-color .3s ease}
.mobilemenu.open a,.mobile.open a{opacity:1;transform:translateX(0)}
.mobilemenu.open a:nth-child(1),.mobile.open a:nth-child(1){transition-delay:.04s}
.mobilemenu.open a:nth-child(2),.mobile.open a:nth-child(2){transition-delay:.08s}
.mobilemenu.open a:nth-child(3),.mobile.open a:nth-child(3){transition-delay:.12s}
.mobilemenu.open a:nth-child(4),.mobile.open a:nth-child(4){transition-delay:.16s}
.mobilemenu.open a:nth-child(5),.mobile.open a:nth-child(5){transition-delay:.20s}
.mobilemenu.open a:nth-child(6),.mobile.open a:nth-child(6){transition-delay:.24s}
.mobilemenu.open a:nth-child(7),.mobile.open a:nth-child(7){transition-delay:.28s}
.menu-theme-row{transition:opacity .25s ease,transform .3s ease,color .3s ease}
.mobilemenu .menu-theme-row{opacity:0;transform:translateX(-9px)}
.mobilemenu.open .menu-theme-row{opacity:1;transform:translateX(0);transition-delay:.32s}

/* Animate moon and sun between themes on the smaller product pages too. */
.theme{position:relative;overflow:hidden;transition:transform .32s ease,background-color .32s ease,color .32s ease,border-color .32s ease}
.theme svg{position:absolute;inset:0;margin:auto;transition:opacity .24s ease,transform .42s cubic-bezier(.2,.8,.2,1)}
.theme .moon{display:block;opacity:1;transform:rotate(0) scale(1)}
.theme .sun{display:block;opacity:0;transform:rotate(-90deg) scale(.55)}
html[data-theme="dark"] .theme .moon{opacity:0;transform:rotate(90deg) scale(.55)}
html[data-theme="dark"] .theme .sun{opacity:1;transform:rotate(0) scale(1)}

/* Small motion cue on desktop navigation links. */
.menu a{position:relative;transition:color .2s ease}
.menu a::after{content:"";position:absolute;right:0;bottom:-5px;left:0;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,header,footer,.mobile,.mobilemenu,.navsearch,.search,.theme,.card,.contact-card,.value,.error,
  .burger,.burger span,.mobilemenu a,.mobile a,.menu-theme-row,.theme svg,.menu a::after{transition:none!important}
}
@media(min-width:1180px){.burger{display:none!important}}

/* Make the mobile menu's opening unmistakable, including pages with legacy
   inline menu styles that otherwise override the shared transitions. */
@keyframes maker-menu-drop{
  0%{opacity:0;transform:translateY(-16px) scaleY(.96);transform-origin:top;box-shadow:0 0 0 rgba(25,20,12,0)}
  100%{opacity:1;transform:translateY(0) scaleY(1);transform-origin:top;box-shadow:0 16px 32px rgba(25,20,12,.16)}
}
@keyframes maker-menu-link-in{
  0%{opacity:0;transform:translateX(-14px)}
  100%{opacity:1;transform:translateX(0)}
}
.mobilemenu.open,.mobile.open{
  max-height:600px!important;
  animation:maker-menu-drop .42s cubic-bezier(.2,.75,.25,1) both;
}
.mobile.open{padding-left:clamp(20px,4vw,32px)!important;padding-right:clamp(20px,4vw,32px)!important}
.mobile.open a{padding:12px 0!important;border-top:0!important;border-bottom:1px solid var(--line)!important}
.mobile.open a:last-child{border-bottom:0!important}
.mobilemenu.open a,.mobile.open a{
  animation:maker-menu-link-in .34s cubic-bezier(.2,.75,.25,1) both;
}
.mobilemenu.open a:nth-child(1),.mobile.open a:nth-child(1){animation-delay:.06s}
.mobilemenu.open a:nth-child(2),.mobile.open a:nth-child(2){animation-delay:.11s}
.mobilemenu.open a:nth-child(3),.mobile.open a:nth-child(3){animation-delay:.16s}
.mobilemenu.open a:nth-child(4),.mobile.open a:nth-child(4){animation-delay:.21s}
.mobilemenu.open a:nth-child(5),.mobile.open a:nth-child(5){animation-delay:.26s}
.mobilemenu.open a:nth-child(6),.mobile.open a:nth-child(6){animation-delay:.31s}
.mobilemenu.open a:nth-child(7),.mobile.open a:nth-child(7){animation-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .mobilemenu.open,.mobile.open,.mobilemenu.open a,.mobile.open a{animation:none!important}
}