/*
  SÜTTAD product pages (urunler.html, urun.html)
  Builds on style.css + suttad.css; uses the same type scale and brand tokens.
*/
:root {
  --urun-line: #e6ebf2;
  --urun-soft: #f4f8fc;
  --urun-text: #586a7e;
  --urun-radius: 2px;
  --urun-ease: cubic-bezier(.22, .61, .36, 1);
}


/* page hero background */
.swiper-slide-inner-bg.suttad-hero-urunler {
background-image: url(../img/hero/slide-2-tepsi-boregi.webp);
}

.swiper-slide-inner-bg.suttad-hero-urun {
background-image: url(../img/hero/slide-4-pizza.webp);
}


/* shared bits */
.urun-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand, var(--suttad-blue));
}

.urun-eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: currentColor;
}

.urun-intro {
max-width: 720px;
margin: 0 auto;
text-align: center!important;
}

.urun-intro + .urun-intro {
margin-top: 14px;
}


/* filter bar */
.urun-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 26px;
margin: 0 auto;
}

.urun-filter-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
}

.urun-filter-label {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #8fa1b3;
margin-right: 4px;
}

.urun-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--suttad-navy);
background: #fff;
border: 1px solid var(--urun-line);
border-radius: 40px;
cursor: pointer;
transition: color .35s var(--urun-ease), background .35s var(--urun-ease), border-color .35s var(--urun-ease), transform .35s var(--urun-ease);
}

.urun-chip:hover {
border-color: var(--suttad-blue);
transform: translateY(-2px);
}

.urun-chip.is-active {
color: #fff;
background: var(--suttad-navy);
border-color: var(--suttad-navy);
}

.urun-chip .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand, var(--suttad-blue));
}

.urun-chip:focus-visible,
.urun-card a:focus-visible,
.urun-variant:focus-visible,
.urun-tab:focus-visible {
outline: 2px solid var(--suttad-blue);
outline-offset: 3px;
}

.urun-count {
margin-top: 22px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #8fa1b3;
}


/* product grid + card */
.urun-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}

@media only screen and (max-width: 995px) {
  .urun-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media only screen and (max-width: 600px) {
  .urun-grid {
    grid-template-columns: 1fr;
  }
}

.urun-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--urun-line);
border-radius: var(--urun-radius);
overflow: hidden;
transition: box-shadow .5s var(--urun-ease), transform .5s var(--urun-ease), border-color .5s var(--urun-ease);
}

.urun-card::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: var(--brand, var(--suttad-blue));
transform: scaleX(0);
transform-origin: left center;
transition: transform .6s var(--urun-ease);
}

.urun-card:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: 0 24px 50px -24px rgba(8, 53, 115, .35);
}

.urun-card:hover::after {
transform: scaleX(1);
}

.urun-card-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
background: radial-gradient(circle at 50% 42%, #fff 0%, var(--urun-soft) 62%, #e9f1f9 100%);
overflow: hidden;
}

.urun-card-media::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 70%;
height: 70%;
border-radius: 50%;
background: var(--brand, var(--suttad-blue));
opacity: .07;
transform: translate(-50%, -50%) scale(.8);
transition: transform .8s var(--urun-ease), opacity .8s var(--urun-ease);
}

.urun-card:hover .urun-card-media::before {
opacity: .14;
transform: translate(-50%, -50%) scale(1.05);
}

.urun-card-media img {
position: absolute;
inset: 8%;
width: 84%;
height: 84%;
object-fit: contain;
filter: drop-shadow(0 18px 22px rgba(8, 53, 115, .16));
transition: transform .8s var(--urun-ease);
}

.urun-card:hover .urun-card-media img {
transform: scale(1.06) translateY(-4px);
}

.urun-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
padding: 6px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
background: var(--suttad-navy);
border-radius: 30px;
}

.urun-badge.is-light {
color: var(--suttad-navy);
background: #fff;
box-shadow: 0 4px 14px -6px rgba(8, 53, 115, .35);
}

.urun-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 24px 26px 26px;
}

.urun-card-title {
margin: 10px 0 6px;
font-family: 'Montserrat', sans-serif;
font-size: 19px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.02em;
color: var(--suttad-navy);
}

.urun-card-title a {
color: inherit!important;
text-decoration: none;
}

.urun-card-type {
font-size: 13px!important;
line-height: 1.6!important;
margin: 0 0 16px;
color: #8597a9!important;
}

.urun-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}

.urun-tag {
padding: 5px 9px;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--suttad-navy);
background: var(--urun-soft);
border-radius: 3px;
}

.urun-card-more {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--suttad-navy)!important;
text-decoration: none;
}

.urun-card-more .arrow {
display: inline-block;
width: 28px;
height: 1px;
background: currentColor;
position: relative;
transition: width .45s var(--urun-ease);
}

.urun-card-more .arrow::after {
content: "";
position: absolute;
right: 0;
top: -3px;
width: 7px;
height: 7px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
}

.urun-card:hover .urun-card-more {
color: var(--suttad-blue)!important;
}

.urun-card:hover .urun-card-more .arrow {
width: 44px;
}

/* whole card clickable through the title link */
.urun-card-title a::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}

.urun-empty {
grid-column: 1 / -1;
padding: 60px 20px;
text-align: center!important;
}


/* brands strip */
.urun-brands {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--urun-line);
border-left: 1px solid var(--urun-line);
}

@media only screen and (max-width: 768px) {
  .urun-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.urun-brand {
position: relative;
padding: 34px 20px;
text-align: center;
background: #fff;
border-right: 1px solid var(--urun-line);
border-bottom: 1px solid var(--urun-line);
cursor: pointer;
overflow: hidden;
transition: background .5s var(--urun-ease);
}

.urun-brand::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 0;
background: var(--brand);
opacity: .08;
transition: height .6s var(--urun-ease);
}

.urun-brand:hover::before,
.urun-brand.is-active::before {
height: 100%;
}

.urun-brand-slogan {
display: block;
font-family: 'Raleway', sans-serif;
font-style: italic;
font-size: 14px;
font-weight: 600;
color: var(--brand);
}

.urun-brand-name {
display: block;
margin-top: 4px;
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 800;
letter-spacing: -.02em;
text-transform: uppercase;
color: var(--brand);
}

@media only screen and (max-width: 480px) {
  .urun-brand {
    padding: 26px 10px;
  }

  .urun-brand-name {
    font-size: 16px;
  }
}

.urun-brand-count {
display: block;
margin-top: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #8fa1b3;
}


/* uses */
.urun-uses {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}

.urun-use {
flex: 0 1 calc(25% - 23px);
text-align: center;
}

@media only screen and (max-width: 768px) {
  .urun-uses {
    gap: 20px;
  }

  .urun-use {
    flex-basis: calc(50% - 10px);
  }
}

.urun-use-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
margin-bottom: 18px;
font-size: 30px;
color: var(--suttad-navy);
border: 1px solid var(--urun-line);
border-radius: 50%;
transition: color .4s var(--urun-ease), background .4s var(--urun-ease), border-color .4s var(--urun-ease), transform .6s var(--urun-ease);
}

.urun-use:hover .urun-use-icon {
color: #fff;
background: var(--suttad-navy);
border-color: var(--suttad-navy);
transform: rotate(-8deg) scale(1.05);
}

.urun-use h4 {
text-align: center;
margin-bottom: 10px;
}

.urun-use p {
text-align: center!important;
font-size: 13px!important;
line-height: 1.7!important;
}


/* call to action band */
.urun-cta {
position: relative;
padding: 70px 40px;
text-align: center;
color: #fff;
background: var(--suttad-navy);
overflow: hidden;
}

.urun-cta::before,
.urun-cta::after {
content: "";
position: absolute;
border-radius: 50%;
background: var(--suttad-blue);
opacity: .14;
}

.urun-cta::before {
width: 360px;
height: 360px;
top: -180px;
right: -80px;
}

.urun-cta::after {
width: 220px;
height: 220px;
bottom: -120px;
left: 6%;
background: var(--suttad-sky);
}

.urun-cta h3 {
position: relative;
z-index: 1;
margin: 0 0 14px;
font-family: 'Montserrat', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: -.03em;
color: #fff;
}

.urun-cta p {
position: relative;
z-index: 1;
max-width: 620px;
margin: 0 auto 30px;
text-align: center!important;
color: rgba(255, 255, 255, .78)!important;
}

.urun-cta-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}

.urun-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--suttad-navy)!important;
background: #fff;
border: 1px solid #fff;
border-radius: 40px;
text-decoration: none;
transition: background .35s var(--urun-ease), color .35s var(--urun-ease), transform .35s var(--urun-ease);
}

.urun-btn:hover {
transform: translateY(-2px);
background: var(--suttad-blue);
border-color: var(--suttad-blue);
color: #fff!important;
}

.urun-btn.is-ghost {
color: #fff!important;
background: transparent;
border-color: rgba(255, 255, 255, .45);
}

.urun-btn.is-dark {
color: #fff!important;
background: var(--suttad-navy);
border-color: var(--suttad-navy);
}

.urun-btn.is-dark:hover {
background: var(--suttad-blue);
border-color: var(--suttad-blue);
}


/* ---------- detail page ---------- */
.urun-crumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 40px;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #8fa1b3;
}

.urun-crumbs a {
color: var(--suttad-navy)!important;
text-decoration: none;
}

.urun-crumbs a:hover {
color: var(--suttad-blue)!important;
}

.urun-detail {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 70px;
align-items: start;
}

@media only screen and (max-width: 995px) {
  .urun-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

.urun-stage {
position: sticky;
top: 90px;
aspect-ratio: 1 / 1;
background: radial-gradient(circle at 50% 45%, #fff 0%, var(--urun-soft) 60%, #e6eef8 100%);
border: 1px solid var(--urun-line);
overflow: hidden;
}

@media only screen and (max-width: 995px) {
  .urun-stage {
    position: relative;
    top: 0;
  }
}

.urun-stage::before {
content: "";
position: absolute;
left: 50%;
top: 52%;
width: 72%;
height: 72%;
border-radius: 50%;
background: var(--brand, var(--suttad-blue));
opacity: .1;
transform: translate(-50%, -50%);
}

.urun-stage img {
position: absolute;
inset: 7%;
width: 86%;
height: 86%;
object-fit: contain;
filter: drop-shadow(0 30px 34px rgba(8, 53, 115, .2));
}

.urun-stage .urun-badge {
top: 22px;
left: 22px;
}

.urun-title {
margin: 16px 0 10px;
font-family: 'Montserrat', sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -.04em;
color: var(--suttad-navy);
}

@media only screen and (max-width: 768px) {
  .urun-title {
    font-size: 32px;
  }
}

.urun-subtitle {
margin: 0 0 24px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--suttad-blue);
}

.urun-specs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 34px 0;
border-top: 1px solid var(--urun-line);
border-left: 1px solid var(--urun-line);
}

.urun-spec {
padding: 18px 20px;
border-right: 1px solid var(--urun-line);
border-bottom: 1px solid var(--urun-line);
}

.urun-spec-label {
display: block;
margin-bottom: 6px;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #8fa1b3;
}

.urun-spec-value {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--suttad-navy);
}

.urun-variants {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 34px;
}

.urun-variant {
padding: 12px 20px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--suttad-navy)!important;
border: 1px solid var(--urun-line);
border-radius: 40px;
text-decoration: none;
transition: border-color .3s var(--urun-ease), background .3s var(--urun-ease), color .3s var(--urun-ease);
}

.urun-variant:hover {
border-color: var(--suttad-blue);
}

.urun-variant.is-active {
color: #fff!important;
background: var(--suttad-navy);
border-color: var(--suttad-navy);
}

/* tabs */
.urun-tabs {
display: flex;
gap: 26px;
border-bottom: 1px solid var(--urun-line);
margin-bottom: 26px;
overflow-x: auto;
}

@media only screen and (max-width: 480px) {
  .urun-tabs {
    gap: 14px;
  }

  .urun-tabs .urun-tab {
    font-size: 10px;
    letter-spacing: .04em;
  }
}

.urun-tab {
position: relative;
padding: 0 0 14px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
color: #8fa1b3;
background: none;
border: 0;
cursor: pointer;
transition: color .3s var(--urun-ease);
}

.urun-tab::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: var(--suttad-blue);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s var(--urun-ease);
}

.urun-tab:hover,
.urun-tab.is-active {
color: var(--suttad-navy);
}

.urun-tab.is-active::after {
transform: scaleX(1);
}

.urun-panel[hidden],
.urun-card[hidden],
.urun-empty[hidden] {
display: none!important;
}

.urun-panel p {
font-size: 14px!important;
line-height: 1.9!important;
}

/* nutrition */
.urun-nutrition {
width: 100%;
border-collapse: collapse;
font-family: 'Montserrat', sans-serif;
}

.urun-nutrition caption {
padding-bottom: 12px;
text-align: left;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #8fa1b3;
}

.urun-nutrition th,
.urun-nutrition td {
padding: 12px 0;
border-bottom: 1px solid var(--urun-line);
font-size: 13px;
text-align: left;
vertical-align: middle;
}

.urun-nutrition th {
font-weight: 600;
color: var(--urun-text);
width: 36%;
}

.urun-nutrition td.value {
width: 28%;
font-weight: 700;
color: var(--suttad-navy);
text-align: right;
white-space: nowrap;
}

.urun-nutrition td.bar {
padding-left: 18px;
}

.urun-bar {
display: block;
height: 4px;
background: var(--urun-soft);
border-radius: 4px;
overflow: hidden;
}

.urun-bar span {
display: block;
height: 100%;
width: var(--w, 0%);
background: linear-gradient(90deg, var(--suttad-navy), var(--suttad-blue));
border-radius: 4px;
transform-origin: left center;
}

.urun-note {
margin-top: 12px;
font-size: 12px!important;
color: #8fa1b3!important;
}

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

.urun-facts li {
position: relative;
padding: 12px 0 12px 26px;
border-bottom: 1px solid var(--urun-line);
font-size: 14px;
line-height: 1.7;
color: var(--urun-text);
}

.urun-facts li::before {
content: "";
position: absolute;
left: 0;
top: 21px;
width: 10px;
height: 10px;
border: 2px solid var(--suttad-blue);
border-radius: 50%;
}

.urun-facts strong {
color: var(--suttad-navy);
}

.urun-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}

.urun-missing {
padding: 80px 20px;
text-align: center;
}

.urun-missing p {
text-align: center!important;
}

/*
  package palettes: every card / detail page takes the colours of its own package
  (set inline from SUTTAD_PALETTES: --brand, --brand-deep, --brand-accent, --brand-soft, --brand-glow)
*/
.urun-card {
--tone-deep: var(--brand-deep, var(--suttad-navy));
--tone-accent: var(--brand-accent, var(--suttad-sky));
--tone-soft: var(--brand-soft, var(--urun-soft));
}

.urun-card-media {
background: radial-gradient(circle at 50% 42%, #fff 0%, var(--tone-soft) 64%, var(--tone-soft) 100%);
}

.urun-card-media::before {
background: radial-gradient(circle, var(--tone-accent) 0%, var(--brand, var(--suttad-blue)) 70%);
opacity: .12;
}

.urun-card:hover .urun-card-media::before {
opacity: .24;
}

/* light sweep across the package on hover, in the package highlight colour */
.urun-card-media::after {
content: "";
position: absolute;
top: 0;
left: -60%;
z-index: 1;
width: 45%;
height: 100%;
background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 45%, var(--tone-accent) 50%, rgba(255, 255, 255, .55) 55%, transparent 100%);
opacity: 0;
transform: skewX(-12deg);
pointer-events: none;
mix-blend-mode: soft-light;
}

.urun-card:hover .urun-card-media::after {
-webkit-animation: urun-sweep 1.1s var(--urun-ease) forwards;
        animation: urun-sweep 1.1s var(--urun-ease) forwards;
}

@-webkit-keyframes urun-sweep {
  0% { left: -60%; opacity: 0; }
  20% { opacity: .9; }
  100% { left: 120%; opacity: 0; }
}

@keyframes urun-sweep {
  0% { left: -60%; opacity: 0; }
  20% { opacity: .9; }
  100% { left: 120%; opacity: 0; }
}

.urun-card::after {
height: 4px;
background: linear-gradient(90deg, var(--tone-deep), var(--brand, var(--suttad-blue)) 55%, var(--tone-accent));
}

.urun-card:hover {
box-shadow: 0 26px 50px -24px var(--brand-glow, rgba(8, 53, 115, .35));
}

.urun-card .urun-badge {
background: var(--tone-deep);
}

/* retail sizes: metallic ribbon like the package label */
.urun-card .urun-badge.is-light {
color: #fff;
background: linear-gradient(135deg, var(--tone-deep) 0%, var(--brand, var(--suttad-blue)) 55%, var(--tone-deep) 100%);
box-shadow: 0 4px 14px -6px var(--brand-glow, rgba(8, 53, 115, .35));
}

.urun-card .urun-tag {
color: var(--tone-deep);
background: var(--tone-soft);
}

.urun-card-title a {
transition: color .35s var(--urun-ease);
}

.urun-card:hover .urun-card-title a {
color: var(--brand, var(--suttad-navy))!important;
}

.urun-card-more {
color: var(--tone-deep)!important;
}

/* detail page */
[data-urun-detail] {
--tone-deep: var(--brand-deep, var(--suttad-navy));
--tone-accent: var(--brand-accent, var(--suttad-sky));
--tone-soft: var(--brand-soft, var(--urun-soft));
}

[data-urun-detail] .urun-stage {
background: radial-gradient(circle at 50% 45%, #fff 0%, var(--tone-soft) 62%, var(--tone-soft) 100%);
}

[data-urun-detail] .urun-stage::before {
background: radial-gradient(circle, var(--tone-accent) 0%, var(--brand, var(--suttad-blue)) 70%);
opacity: .16;
}

[data-urun-detail] .urun-badge {
background: var(--tone-deep);
}

[data-urun-detail] .urun-variant:hover {
border-color: var(--brand, var(--suttad-blue));
}

[data-urun-detail] .urun-variant.is-active {
background: var(--tone-deep);
border-color: var(--tone-deep);
}

[data-urun-detail] .urun-tab::after {
background: var(--brand, var(--suttad-blue));
}

[data-urun-detail] .urun-tab:hover,
[data-urun-detail] .urun-tab.is-active {
color: var(--tone-deep);
}

[data-urun-detail] .urun-bar {
background: var(--tone-soft);
}

[data-urun-detail] .urun-bar span {
background: linear-gradient(90deg, var(--tone-deep), var(--brand, var(--suttad-blue)) 60%, var(--tone-accent));
}

/* items hidden until GSAP reveals them (only when motion is allowed) */
.urun-js-reveal .urun-reveal {
visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .urun-card,
  .urun-card-media img,
  .urun-card-media::before,
  .urun-chip,
  .urun-use-icon,
  .urun-brand::before {
    transition: none!important;
  }

  .urun-card:hover,
  .urun-card:hover .urun-card-media img {
    transform: none;
  }

  .urun-card:hover .urun-card-media::after {
    -webkit-animation: none;
            animation: none;
  }
}