/* Supara storefront, adapted from the KitapBurada visual language. */
:root {
  --az-blue: #277fb8;
  --az-blue-dark: #176da8;
  --az-soft-blue: #e6f2fa;
  --asilzade-primary: #277fb8;
  --asilzade-primary-dark: #176da8;
  --color-brand: #277fb8;
  --primary-color: #277fb8;
  --color-brand-dark: #176da8;
  --color-heading: #292d33;
  --color-text: #444b55;
  --color-grey-9: #f7f8fa;
}
html { scroll-behavior: smooth; }
body { color: #30343a; background: #fff; font-family: Arial, Helvetica, sans-serif; }
body h1, body h2, body h3, body h4, body .font-heading { font-family: Arial, Helvetica, sans-serif; }
a, button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #277fb8; outline-offset: 2px; }
.supara-skip { position: absolute; top: -60px; left: 10px; z-index: 99999; background: #292d33; color: #fff; padding: 9px 14px; }
.supara-skip:focus { top: 10px; color: #fff; }
.supara-announcement { background: linear-gradient(105deg, #277fb8, #277fb8); color: #fff; }
.supara-announcement .container { max-width: 1200px; min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.supara-announcement strong { font-size: 13px; letter-spacing: .4px; white-space: nowrap; }
.supara-announcement strong span { color: #e6f2fa; }
.supara-announcement .container > span { font-size: 12px; color: #f4f9fd; }
.supara-announcement a { color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.supara-announcement a:hover { color: #292d33; }
.header-area { box-shadow: none; background: #fff; }
.header-area .container { max-width: 1200px; }
.header-area .header-top { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 4px 0 !important; }
.header-area .header-top a, .header-area .header-top span, .header-area .header-top strong { color: #6e737b; font-size: 11px; }
.header-area .header-middle { padding: 13px 0 !important; min-height: 93px; }
.header-area .header-middle .header-wrap { align-items: center; }
.header-area .header-middle .logo img { width: auto; max-width: 176px; max-height: 62px; object-fit: contain; }
.header-area .header-right { gap: 12px; }
.header-area .search-style-2 { margin-right: 12px; }
.header-area .search-style-2 form { border: 2px solid #277fb8 !important; border-radius: 6px !important; min-height: 46px; overflow: hidden; }
.header-area .search-style-2 select { color: #565d66; border-right: 1px solid #e8e8e8; font-size: 12px; }
.header-area .search-style-2 input { color: #292d33; font-size: 13px; }
.header-area .search-style-2 button { background: #277fb8 !important; color: #fff !important; border-radius: 0 !important; min-width: 55px; }
.header-area .search-style-2 button:hover { background: #176da8 !important; }
.header-area .header-action-2 .header-action-icon-2 a { color: #292d33; }
.header-area .header-action-2 .header-action-icon-2 a:hover, .header-area .header-action-2 .header-action-icon-2 a:hover span { color: #277fb8; }
.header-area .header-bottom { background: #fff !important; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; box-shadow: 0 2px 6px #16202a08; }
.header-area .header-bottom .header-wrap { min-height: 51px; }
.header-area .header-bottom .hotline { display: none !important; }
.header-area .header-bottom .header-nav, .header-area .header-bottom .main-menu { width: 100%; }
.header-area .header-bottom .main-menu > nav > ul { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.header-area .header-bottom .main-menu > nav > ul > li { flex: 0 1 auto; }
.header-area .main-menu > nav > ul > li > a { color: #292d33; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1px; padding-top: 16px; padding-bottom: 16px; }
.header-area .header-bottom .main-menu > nav > ul > li > a { min-height: 50px; padding-left: 7px; padding-right: 7px; white-space: nowrap; }
.header-area .main-menu > nav > ul > li > a:hover, .header-area .main-menu > nav > ul > li.active > a { color: #277fb8; }
.header-area .hotline p, .header-area .hotline p span { color: #292d33; }
.header-area .hotline strong { color: #277fb8; }
.header-area .search-style-2 form button.btn { background: #277fb8 !important; border-radius: 3px !important; }
.header-area .search-style-2 form button.btn:hover { background: #176da8 !important; }
.button.button-buy-now { background: #30343a !important; border-color: #30343a !important; color: #fff !important; }
.button.button-buy-now:hover { background: #277fb8 !important; border-color: #277fb8 !important; }

.supara-store { max-width: 1200px; margin: 0 auto; padding-top: 22px; }
.supara-showcase-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 19px; margin-bottom: 16px; }
.supara-showcase-tab { min-width: 0; text-align: center; color: #292d33; font-size: 15px; font-weight: 700; }
.supara-showcase-tab:hover { color: #277fb8; }
.supara-showcase-tab > span:last-child { display: block; padding: 11px 3px 8px; }
.supara-showcase-tab.is-active > span:last-child { border-bottom: 3px solid #277fb8; }
.supara-showcase-photo { display: block; height: 110px; border: 3px solid #e4e4e4; border-radius: 8px; padding: 3px; background: #fff; overflow: hidden; position: relative; box-shadow: 0 1px 6px #20252b0d; }
.supara-showcase-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.supara-showcase-tab:hover .supara-showcase-photo { border-color: #277fb8; }
.supara-tile-vitrin::after { display:none; }
.supara-tile-vitrin b { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; color: #fff; font-size: 21px; font-weight: 900; line-height: 1.1; }
.supara-tile-ayt img { object-position: 85% 50%; }
.supara-tile-ekstrem img { object-position: 50% 85%; transform: scale(1.18); }
.supara-store-columns { display: grid; grid-template-columns: minmax(0, 3.65fr) minmax(222px, 1fr); gap: 17px; }
.supara-store-main, .supara-store-sidebar { min-width: 0; }
.supara-section-bar { background: #30343a; color: #fff; border-bottom: 3px solid #277fb8; border-radius: 7px; min-height: 47px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.supara-section-bar h2 { color: #fff; margin: 0; font-size: 15px; font-weight: 800; }
.supara-shop-lead { position: relative; aspect-ratio: 960 / 250; min-height: 237px; background: #c4e1f3; border-radius: 8px; overflow: hidden; }
.supara-shop-lead:has(.supara-original-slides){aspect-ratio:1536 / 850;min-height:0;background:#532283}
.supara-original-slides,.supara-original-slides>a{position:absolute;inset:0}
.supara-original-slides>a{display:block;opacity:0;visibility:hidden;transition:opacity .4s ease}
.supara-original-slides>a.is-active{opacity:1;visibility:visible}
.supara-original-slides>a img{display:block;width:100%;height:100%;object-fit:contain}
.supara-slide-controls{position:absolute;left:50%;bottom:12px;display:flex;gap:7px;transform:translateX(-50%);z-index:2}
.supara-slide-controls button{width:22px;height:7px;padding:0;border:0;border-radius:9px;background:#ffffffaa;cursor:pointer}
.supara-slide-controls button.is-active{width:36px;background:#277fb8}
.supara-shop-lead > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.supara-lead-copy { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px 30px; }
.supara-lead-copy > span { padding: 5px 11px; border-radius: 30px; background: #277fb8; color: #fff; font-size: 10px; font-weight: 800; }
.supara-lead-copy h2 { margin: 8px 0 13px; color: #292d33; font-size: clamp(25px, 2.2vw, 35px); line-height: 1.06; font-weight: 900; }
.supara-lead-copy h2 b { color: #277fb8; }
.supara-lead-copy > a { display: inline-flex; align-items: center; gap: 12px; padding: 9px 12px; background: #30343a; color: #fff; font-size: 11px; font-weight: 800; }
.supara-lead-copy > a:hover { background: #277fb8; color: #fff; }
.supara-lead-label { position: absolute; right: 18px; bottom: 14px; padding: 8px 12px; background: #ffffffda; color: #292d33; text-align: right; font-size: 14px; line-height: 1.1; backdrop-filter: blur(8px); }
.supara-lead-label small { display: block; margin-top: 4px; color: #6b6e73; font-size: 10px; }
.supara-series-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.supara-series-grid a { display: flex; flex-direction: column; justify-content: center; min-height: 112px; padding: 16px; border: 1px solid #c4e1f3; border-radius: 7px; background: linear-gradient(125deg, #f4f9fd, #e6f2fa); color: #292d33; }
.supara-series-grid a:nth-child(2) { background: linear-gradient(125deg, #f4f9fd, #e6f2fa); }
.supara-series-grid a:nth-child(3) { background: linear-gradient(125deg, #fbfbfc, #e9edf2); border-color: #e0e5ea; }
.supara-series-grid a:hover { border-color: #277fb8; transform: translateY(-2px); }
.supara-series-grid span { color: #176da8; font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.supara-series-grid strong { margin: 5px 0; color: #292d33; font-size: 19px; line-height: 1.1; }
.supara-series-grid em { color: #555d66; font-size: 10px; font-style: normal; }
.supara-ranked-book { display: grid; grid-template-columns: 13px 61px minmax(0,1fr); gap: 6px; align-items: center; min-height: 102px; margin-bottom: 8px; padding: 7px 8px; border: 1px solid #e8e9eb; border-radius: 7px; color: #30343a; box-shadow: 0 2px 8px #1824340a; }
.supara-ranked-book:hover { border-color: #277fb8; color: #30343a; }
.supara-ranked-book > img { display: block; width: 61px; height: 83px; object-fit: contain; }
.supara-rank { align-self: start; color: #277fb8; font-size: 13px; font-weight: 800; }
.supara-ranked-book strong { display: block; font-size: 10px; line-height: 1.35; }
.supara-ranked-book small { display: block; margin-top: 4px; color: #7d858c; font-size: 9px; }
.supara-ranked-book em { display: block; margin-top: 5px; color: #176da8; font-size: 10px; font-style: normal; font-weight: 800; }
.supara-sidebar-links { padding: 15px; border-radius: 8px; background: #e6f2fa; }
.supara-sidebar-links > span { color: #176da8; font-size: 10px; font-weight: 800; }
.supara-sidebar-links h3 { margin: 5px 0 10px; color: #292d33; font-size: 19px; }
.supara-sidebar-links a { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #c4e1f3; color: #30343a; font-size: 12px; font-weight: 800; }
.supara-sidebar-links a:hover { color: #176da8; }
.supara-original-campaigns{margin-top:22px;content-visibility:auto;contain-intrinsic-size:auto 360px}
.supara-original-campaigns .supara-section-bar{justify-content:flex-start;padding-left:20px}
.supara-original-campaign-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.supara-original-campaign-grid a{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e8e8e8;border-radius:8px;background:#fff;color:#30343a;box-shadow:0 5px 18px #29303a0b}
.supara-original-campaign-grid a:hover{border-color:#277fb8;color:#176da8}
.supara-original-campaign-grid img{display:block;width:100%;height:230px;object-fit:cover;object-position:center 23%;background:#f8f8f8}
.supara-original-campaign-grid span{padding:11px 13px;font-size:12px;font-weight:800}

.supara-catalog { margin-top: 32px; }
.supara-catalog > .ck-content > section { padding-top: 27px !important; padding-bottom: 27px !important; }
.supara-catalog .container { max-width: 1200px; }
.supara-catalog .bg-grey-9 { background: #f8f8f8 !important; }
.supara-catalog .heading-tab { align-items: center; justify-content: space-between; margin-bottom: 17px; padding: 11px 15px; border-bottom: 3px solid #277fb8; border-radius: 7px; background: #30343a; }
.supara-catalog .heading-tab .section-title { margin: 0 !important; color: #fff; font-size: 19px; }
.supara-catalog .heading-tab .nav-link { color: #fff; background: transparent; font-size: 12px; }
.supara-catalog .heading-tab .nav-link:hover { color: #80b9dc; }
.supara-catalog .product-cart-wrap { border: 1px solid #e8e9eb; border-radius: 8px; box-shadow: 0 2px 8px #111b2709; background: #fff; }
.supara-catalog .product-cart-wrap:hover { border-color: #277fb8; box-shadow: 0 6px 19px #176da81b; }
.supara-catalog .product-cart-wrap .product-img { padding: 10px; }
.supara-catalog .product-cart-wrap .product-content-wrap h2 a { color: #292d33; font-size: 13px; font-weight: 800; }
.supara-catalog .product-cart-wrap .product-content-wrap h2 a:hover { color: #277fb8; }
.supara-catalog .product-cart-wrap .product-price > span:first-child { color: #277fb8; font-weight: 800; }
.supara-catalog .product-cart-wrap .add-to-cart-button { background: #277fb8 !important; border-color: #277fb8 !important; color: #fff !important; }
.supara-catalog .product-cart-wrap .add-to-cart-button:hover { background: #176da8 !important; }
.supara-catalog .section-flash-sale-products .banner-img.style-2 { display: none; }
.supara-catalog .section-flash-sale-products .col-xl-3.d-none.d-xl-flex { display: none !important; }
.supara-catalog .section-flash-sale-products .col-xl-9 { flex: 0 0 100%; max-width: 100%; }
.supara-catalog .section-flash-sale-products .section-title:has(h2:empty) { display: none; }
.supara-catalog .section-flash-sale-products .section-title h2 { color: #292d33; font-size: 19px; }
.supara-catalog .section-flash-sale-products .section-title h2:empty { display: none; }
footer.main { background: #fff; border-top: 4px solid #277fb8; }
footer.main .featured { background: #f4f9fd; }
footer.main .banner-left-icon { border: 1px solid #e6f2fa; border-radius: 8px; background: #fff; padding: 12px; }
footer.main .icon-box-title { color: #292d33; }
footer.main a:hover { color: #277fb8; }

@media (max-width: 1199px) {
  .header-area .container, .supara-announcement .container, .supara-store, .supara-catalog .container { max-width: 960px; }
  .supara-showcase-tabs { gap: 12px; }
  .supara-showcase-photo { height: 92px; }
  .supara-store-columns { grid-template-columns: minmax(0,3fr) minmax(220px,1fr); }
  .supara-lead-copy h2 { font-size: 27px; }
}
@media (max-width: 991px) {
  .supara-announcement .container { min-height: 36px; }
  .supara-announcement .container > span { display: none; }
  .supara-store { padding-top: 14px; }
  .supara-showcase-tabs { gap: 9px; }
  .supara-showcase-photo { height: 78px; }
  .supara-showcase-tab { font-size: 12px; }
  .supara-tile-vitrin b { font-size: 14px; }
  .supara-shop-lead { min-height: 210px; }
  .supara-store-columns { grid-template-columns: minmax(0,1fr); }
  .supara-store-sidebar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .supara-store-sidebar .supara-section-bar { grid-column: 1/-1; margin-bottom: 0; }
  .supara-ranked-book { min-height: 100px; }
  .supara-sidebar-links { grid-column: 1/-1; }
}
@media (max-width: 767px) {
  .supara-original-campaign-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .supara-original-campaign-grid img{height:190px}
  .supara-shop-lead:has(.supara-original-slides){height:auto;aspect-ratio:1536 / 900}
  .supara-announcement .container { padding: 5px 15px; gap: 8px; }
  .supara-announcement strong { font-size: 10px; white-space: normal; }
  .supara-announcement a { font-size: 9px; }
  .supara-store { padding-left: 12px; padding-right: 12px; }
  .supara-showcase-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .supara-showcase-photo { height: 90px; }
  .supara-showcase-tab > span:last-child { padding-top: 6px; }
  .supara-shop-lead { height: 215px; min-height: 0; aspect-ratio: auto; }
  .supara-shop-lead > img { object-position: 62% 50%; }
  .supara-lead-copy { padding: 14px 17px; background: linear-gradient(90deg,#e6f2fad9,#e6f2fa73 75%,transparent); }
  .supara-lead-copy h2 { font-size: 25px; }
  .supara-lead-label { display: none; }
  .supara-series-grid { grid-template-columns: 1fr 1fr; }
  .supara-series-grid a:last-child { grid-column: 1/-1; }
  .supara-store-sidebar { grid-template-columns: 1fr 1fr; }
  .supara-store-sidebar .supara-ranked-book:nth-of-type(3) { display: none; }
  .supara-catalog { margin-top: 20px; }
  .supara-catalog .heading-tab .section-title { font-size: 15px; }
}
@media (max-width: 480px) {
  .supara-showcase-photo { height: 65px; }
  .supara-showcase-tab { font-size: 10px; }
  .supara-tile-vitrin b { font-size: 11px; }
  .supara-store-sidebar { grid-template-columns: 1fr; }
  .supara-store-sidebar .supara-ranked-book:nth-of-type(3) { display: grid; }
  .supara-series-grid strong { font-size: 15px; }
  .supara-series-grid a { min-height: 100px; padding: 12px; }
}
