:root {
  --pink-main: #D92A29;
  --pink-dark: #B41F1F;
  --bg-light: #F5F5F5;
  --text-main: #222222;
  --text-muted: #6F6F6F;
}

/* HEADER GENEL */

.site-header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.header-logo a {
  font-size: 24px;
  font-weight: 800;
  text-decoration: none;
  color: var(--pink-dark);
}

/* hesap + cart */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-link {
  font-size: 14px;
  text-decoration: none;
  color: var(--text-main);
}

.header-link:hover {
  text-decoration: underline;
}

.header-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--pink-dark);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.cart-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pink-dark);
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SHOP BUTONU + KÜÇÜK SEARCH BARI */

.header-ctrl-bar {
  background: linear-gradient(90deg, var(--pink-main), var(--pink-dark));
}

.header-ctrl-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
}

/* sol: shop butonu */

.shop-main-btn {
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.shop-main-btn:hover {
  background: #ffe7f3;
}

/* sağ: küçük search */

.header-search-small {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;   /* küçük */
  width: 100%;
}

.header-search-small input {
  flex: 1;
  padding: 6px 9px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
}

.header-search-small button {
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: var(--pink-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.header-search-small button:hover {
  background: #ffe7f3;
}

/* HERO SLIDER */

.hero-slider {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.hero-slider-inner {
  position: relative;
  max-width: 1400px;
  height: 420px;
  margin: 0 auto;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide.active {
  opacity: 1;
}

/* overlay: sol alt yazı + butonlar */

.hero-overlay {
  position: absolute;
  left: 32px;
  bottom: 32px;
  max-width: 380px;
  padding: 16px 18px;
  background: rgba(0,0,0,0.45);
  border-radius: 16px;
  color: #fff;
  backdrop-filter: blur(5px);
}

.hero-overlay h1 {
  font-size: 26px;
  margin-bottom: 8px;
}

.hero-overlay p {
  font-size: 14px;
  margin-bottom: 12px;
  color: #f5f5f5;
}

/* butonlar */

.hero-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.hero-btn-primary {
  background: var(--pink-main);
  color: #fff;
}

.hero-btn-ghost {
  background: #fff;
  color: var(--pink-dark);
}

/* slider okları */

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-prev {
  left: 12px;
}

.hero-next {
  right: 12px;
}

/* slider dotları */

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}

.hero-dots .dot.active {
  background: #fff;
}

/* mobile */

@media (max-width: 768px) {
  .hero-slider-inner {
    height: 300px;
  }

  .hero-overlay {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }

  .hero-overlay h1 {
    font-size: 20px;
  }

  .header-ctrl-inner {
    flex-direction: row;
  }
}

/* ===== ÜST ŞERİT (Free returns...) AYARLARI ===== */

.top-info-bar {
  background: var(--pink-main);  /* pembe arka plan */
  color: #000000;                /* siyah yazı */
}

.top-info-inner {
  justify-content: center;       /* ortala */
  font-size: 16px;               /* ~%250 daha büyük için yükselttik */
  padding: 16px 0;               /* yükseklik büyüsün diye */
}

.top-info-inner a {
  color: #000000;
  text-decoration: underline;
}

.top-info-inner a:hover {
  text-decoration: none;
}

.dot-separator {
  opacity: 0.9;
}

/* ===== MYSPREAD BAR ARKA PLAN (hafif gri) ===== */

.site-header {
  background: #f5f5f7;           /* çok açık gri */
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* ===== SEARCH (küçük bar) 2x daha büyük + dikdörtgen + ikon ===== */

.header-search-small {
  max-width: 260px;
}

.header-search-small input {
  flex: 1;
  padding: 12px 14px;            /* %100 daha büyük gibi */
  border-radius: 10px;           /* iPhone 6 kıvrımı gibi */
  border: none;
  font-size: 16px;
}

.header-search-small button {
  position: relative;
  padding: 12px 32px 12px 16px;  /* sağa ikon için boşluk */
  border-radius: 10px;
  border: none;
  background: #ffffff;
  color: var(--pink-dark);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* sağ tarafta arama ikonu */
.header-search-small button::after {
  content: "🔍";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* hover efekti */
.header-search-small button:hover {
  background: #ffe7f3;
}

/* ===== CREATE NOW / SHOP NOW butonları 2x + dikdörtgen ===== */

.hero-buttons .btn {
  border-radius: 10px;           /* dikdörtgen + curve */
  padding: 12px 24px;            /* %100 daha büyük hissi */
  font-size: 16px;
}

/* görünüşler aynı kalsın, sadece yeni boyut / şekle uysun */

.hero-btn-primary {
  background: var(--pink-main);
  color: #ffffff;
  border: none;
}

.hero-btn-ghost {
  background: #ffffff;
  color: var(--pink-dark);
  border: 1px solid var(--pink-dark);
}

/* === ÜST PEMBE ŞERİT AYARLARI (ORTALAMA + BOLD) === */

/* Yazıları tam ortaya hizala */
.top-info-inner {
  justify-content: center;
  text-align: center;
}

/* Nokta ayraçlar hariç span'leri bold yap (Free returns / Printed on demand) */
.top-info-inner span:not(.dot-separator) {
  font-weight: 700;
}

/* Link yine siyah kalsın */
.top-info-inner a {
  color: #000000;
  text-decoration: underline;
}
.top-info-inner a:hover {
  text-decoration: none;
}

/* === SHOP BUTONU (BEYAZ ARKA PLAN + DAHA BÜYÜK + FARKLI FONT) === */

.shop-main-btn {
  background: #ffffff; /* arka plan beyaz */
  color: var(--pink-dark);
  font-size: 18px;     /* biraz daha büyük */
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-family: "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.shop-main-btn:hover {
  background: #ffe7f3;
}

/* === SEARCH BUTONU SAĞA TAŞMA DÜZELTME === */

/* Formu biraz daralt, sağa taşmasın */
.header-search-small {
  max-width: 230px; /* daha küçük, içeri çekilmiş */
}

/* Input biraz küçülsün */
.header-search-small input {
  padding: 10px 12px;
  font-size: 14px;
}

/* Button padding'ini ve ikonu ayarla ki dışarı taşmasın */
.header-search-small button {
  padding: 10px 26px 10px 14px;  /* önceki 12/32 yerine biraz küçülttük */
  font-size: 14px;
}

/* İkon aynı kalsın ama buton daraldığı için taşma yapmayacak */
.header-search-small button::after {
  right: 8px;
  font-size: 16px;
}
/* === 1) ÜSTTE ve SOLDaKİ BEYAZ BOŞLUKLARI YOK ET === */
html,
body {
  margin: 0;
  padding: 0;
}

/* === 2) SLIDER GENİŞLİĞİNİ EKRANA UYDUR (SCROLL BAR GİTSİN) === */
.hero-slider-inner {
  max-width: 1200px;  /* 1400 çok genişti, küçülttük */
  width: 100%;
  margin: 0 auto;
}

/* === 3) SEARCH FORMU İÇERİ ÇEK, TAŞMASIN === */
.header-search-small {
  max-width: 200px;      /* biraz daha dar */
  flex: 0 0 200px;
}

.header-search-small input {
  padding: 8px 10px;
  font-size: 13px;
}

.header-search-small button {
  padding: 8px 24px 8px 12px;  /* sağdaki boşluğu biraz küçült */
  font-size: 13px;
}

.header-search-small button::after {
  right: 6px;
  font-size: 14px;
}

/* === 4) SHOP BUTONU SATIRINI BİRAZ DAHA TOPARLA === */
.header-ctrl-inner {
  padding: 8px 16px;          /* her iki tarafta 16px boşluk */
  gap: 16px;
}
/* === 1) ÜSTTE ve SOLDaKİ BEYAZ BOŞLUKLARI YOK ET === */
html,
body {
  margin: 0;
  padding: 0;
}

/* === 2) SLIDER GENİŞLİĞİNİ EKRANA UYDUR (SCROLL BAR GİTSİN) === */
.hero-slider-inner {
  max-width: 1200px;  /* 1400 çok genişti, küçülttük */
  width: 100%;
  margin: 0 auto;
}

/* === 3) SEARCH FORMU İÇERİ ÇEK, TAŞMASIN === */
.header-search-small {
  max-width: 200px;      /* biraz daha dar */
  flex: 0 0 200px;
}

.header-search-small input {
  padding: 8px 10px;
  font-size: 13px;
}

.header-search-small button {
  padding: 8px 24px 8px 12px;  /* sağdaki boşluğu biraz küçült */
  font-size: 13px;
}

.header-search-small button::after {
  right: 6px;
  font-size: 14px;
}

/* === 4) SHOP BUTONU SATIRINI BİRAZ DAHA TOPARLA === */
.header-ctrl-inner {
  padding: 8px 16px;          /* her iki tarafta 16px boşluk */
  gap: 16px;
}
/* === ÜST PROMO BAR ZATEN TAM ORTALI VE PEMBE, O KALSIN === */

/* Gri logo bar (MySpread satırı) Spreadshirt gibi çok açık gri olsun */
.site-header {
  background: #f5f5f5;
  box-shadow: none;
  border-bottom: 1px solid #e0e0e0;
}

/* İçindeki logo + sağdaki account kısmı */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
}

/* === CREATE / SHOP / PRO / B2B + SEARCH SATIRI === */

.nav-search-bar {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.nav-search-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 24px;
}

/* Sol taraftaki nav linkleri */
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 18px;
}

.nav-link {
  text-decoration: none;
  color: #3a3a3a;
}

.nav-link.active {
  font-weight: 600;
}

/* B2B sarı kutu */
.nav-b2b {
  background: #ffc400;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
}

/* Sağdaki büyük search bar */
.header-search-main {
  flex: 0 0 420px;          /* yaklaşık Spreadshirt genişliği */
  max-width: 420px;
  position: relative;
}

.header-search-main input {
  width: 100%;
  padding: 9px 40px 9px 12px;  /* sağda ikona yer */
  border: 1px solid #bdbdbd;
  border-radius: 3px;          /* hafif curve, iPhone 6 hissi */
  font-size: 14px;
  outline: none;
}

.header-search-main input:focus {
  border-color: #000;
}

/* Butonun kendisi görünmez, sadece ikon için kullanıyoruz */
.header-search-main button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Search ikonunu çizelim (basit büyüteç) */
.header-search-main button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #555;
}

.header-search-main button::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background: #555;
  right: -4px;
  bottom: -1px;
  transform: rotate(45deg);
}

/* Sayfanın kenar boşluklarını sıfırla, beyaz boşluk kalmasın */
html, body {
  margin: 0;
  padding: 0;
}

/* Responsive: ekran daralınca nav üstte, search altta olsun */
@media (max-width: 768px) {
  .nav-search-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-search-main {
    flex: 1 0 100%;
    max-width: 100%;
    width: 100%;
  }
}
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-main);
  background: #f4f4f7;
}
/* === CREATE / SHOP / PRO / B2B + SEARCH ORTADA, YAKIN VE BÜYÜK === */

.nav-search-inner {
  justify-content: center;    /* ortada buluşsunlar */
  gap: 56px;                  /* aralarındaki mesafe: bir arama barına yakın */
  padding: 12px 0;
}

/* Nav linkleri: biraz büyük ve Roboto ile */
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;            /* bir tık daha büyük */
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nav-link {
  text-decoration: none;
  color: #3a3a3a;
  font-weight: 400;
}

.nav-link.active {
  font-weight: 500;
}

/* B2B etiketi aynı fontla */
.nav-b2b {
  background: #ffc400;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Sağdaki büyük search bar: biraz daha büyük ve Roboto ile */
.header-search-main {
  flex: 0 0 460px;            /* genişliği büyüttük */
  max-width: 460px;
}

.header-search-main input {
  width: 100%;
  padding: 11px 42px 11px 14px;   /* boyu büyüdü */
  border: 1px solid #bdbdbd;
  border-radius: 3px;
  font-size: 15px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ikon aynı kalsın ama biraz daha ince görünüm için ufak dokunuş */
.header-search-main button::before {
  border: 2px solid #555;
}
.header-search-main button::after {
  width: 9px;
  height: 2px;
  background: #555;
}
/* LOGO alanı */

.header-logo a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* sadece logo resmi kullanıyorsan bile bu kalsın */
.header-logo img {
  height: 32px;          /* çok küçük büyük gelirse 40 yaparsın */
  display: block;
}

/* logo yanında yazı da kullanıyorsan */
.logo-text {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #e91e63;
}
.header-logo a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.header-logo img {
  height: 32px;   /* küçük geldiyse 40-48 yaparsın */
  display: block;
}
/* === SLIDER GENEL === */

.hero-slider {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.hero-slider-inner {
  position: relative;
  max-width: 1200px;
  width: 100%;
  height: 420px;
  margin: 0 auto;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide.active {
  opacity: 1;
}

/* Overlay (yazı + butonlar) altta solda kalsın */
.hero-overlay {
  position: absolute;
  left: 60px;
  bottom: 60px;
  max-width: 420px;
  color: #fff;
}

/* === OK BUTONLAR (Spreadshirt tarzı) === */

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-nav span {
  font-size: 20px;
  line-height: 1;
  color: #444;
}

.hero-prev {
  right: 80px;   /* iki buton yan yana sağda */
}

.hero-next {
  right: 30px;
}

.hero-nav:hover {
  background: #ffffff;
}

/* === NOKTALAR (alt ortada) === */

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #aaa;
  opacity: 0.5;
  cursor: pointer;
}

.hero-dot.active {
  background: #ffffff;
  opacity: 1;
}

/* responsive yükseklik */
@media (max-width: 768px) {
  .hero-slider-inner {
    height: 300px;
  }

  .hero-overlay {
    left: 20px;
    bottom: 30px;
    max-width: 80%;
  }

  .hero-prev {
    right: 70px;
  }

  .hero-next {
    right: 20px;
  }
}
/* === KATEGORİ PILL'LER + BESTSELLERS === */

.home-categories-products {
  padding: 40px 0 56px;
}

/* Üst Create Now + pill bar */
.home-category-bar {
  margin-bottom: 28px;
}

.home-category-label {
  display: inline-block;
  margin-right: 20px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #333;
  vertical-align: middle;
}

.home-category-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  vertical-align: middle;
}

/* kategori pill butonları */
.cat-pill {
  padding: 6px 18px;
  border-radius: 3px;                 /* search bar ile aynı hissiyat */
  border: 1px solid #bdbdbd;
  background: #ffffff;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}

.cat-pill.active {
  border-color: #111;
}

.cat-pill:hover {
  background: #f5f5f5;
}

/* Bestsellers başlık satırı */
.home-products-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 10px;
}

.home-products-header h2 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #222;
}

.home-show-all {
  font-size: 14px;
  color: #444;
  text-decoration: underline;
}

/* Ürün row + sağdaki ok */
.home-products-carousel {
  position: relative;
}

.home-products-row {
  display: flex;
  gap: 24px;
  overflow-x: auto;              /* yatay kaydırma */
  padding-bottom: 8px;
  scroll-behavior: smooth;
}

/* scrollbar'ı gizle (istemiyorsan silebilirsin) */
.home-products-row::-webkit-scrollbar {
  height: 0;
}
.home-products-row {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ürün kartları */
.product-card {
  min-width: 260px;
  max-width: 260px;
  flex: 0 0 auto;
  background: #f9f9f9;
  border-radius: 3px;
  overflow: hidden;
  padding-bottom: 14px;
}

.product-image {
  background: #eeeeee;
}

.product-image img {
  width: 100%;
  display: block;
}

.product-title {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin: 10px 10px 2px;
}

.product-subtitle {
  font-size: 13px;
  color: #666;
  margin: 0 10px 8px;
}

.product-price {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin: 0 10px;
}

/* sağdaki yuvarlak ok (ürün row slider hissi) */
.home-products-next {
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-products-next span {
  font-size: 22px;
  line-height: 1;
  color: #444;
}

/* küçük ekranlarda grid alta inip ok gerekmez */
@media (max-width: 768px) {
  .home-category-label {
    display: block;
    margin-bottom: 12px;
  }

  .home-products-carousel {
    padding-right: 0;
  }

  .home-products-next {
    display: none;
  }

  .product-card {
    min-width: 70%;
    max-width: 70%;
  }
}
/* CREATE NOW ve BESTSELLERS boyut + sağa kaydırma */
@media (min-width: 769px) {

  /* hafif sağa al */
  .home-category-bar,
  .home-products-header {
    padding-left: 40px;   /* çok gelirse 30'a düşür, az gelirse 50 yap */
  }

  /* Create Now biraz büyüsün */
  .home-category-label {
    font-size: 24px;      /* eskisi 22 idi */
    font-weight: 400;
  }

  /* Bestsellers da büyüsün */
  .home-products-header h2 {
    font-size: 26px;      /* eskisi 24 idi */
    font-weight: 500;
  }
}
/* === ÜRÜN KARTLARINI BÜYÜT + ORTADAN BAŞLAT === */
@media (min-width: 1024px) {

  /* row’u biraz içerden başlat, sola yapışmasın */
  .home-products-row {
    padding-left: 60px;   /* gerekirse 50–70 arası oynarız */
    padding-right: 80px;  /* sağdaki oka yer kalsın */
    gap: 28px;
  }

  /* kartları büyüt */
  .product-card {
    min-width: 310px;
    max-width: 310px;
    background: #ffffff;          /* daha temiz beyaz kart */
    border-radius: 3px;
    border: 1px solid #eeeeee;
  }

  .product-image {
    background: #f3f3f3;
  }

  .product-image img {
    width: 100%;
    height: 320px;                /* daha uzun görsel */
    object-fit: cover;
    display: block;
  }

  /* yazı boyutlarını da hafif büyütelim */
  .product-title {
    font-size: 16px;
    margin: 12px 12px 3px;
  }

  .product-subtitle {
    font-size: 13px;
    margin: 0 12px 8px;
  }

  .product-price {
    font-size: 17px;
    margin: 0 12px 12px;
  }
}
/* === GIFT CUSTOMIZATION BLOĞU === */

.gift-custom-section {
  background: #f3f3f3;          /* hafif gri arka plan */
  padding: 48px 0 56px;
}

.gift-custom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* sol büyük görsel */
.gift-custom-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* sağdaki yazı bloğu */
.gift-custom-content h2 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  color: #333;
  margin-bottom: 18px;
}

.gift-custom-content p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 14px;
}

.gift-custom-content .gift-lead {
  font-weight: 500;
}

/* dikdörtgen CREATE NOW butonu */
.gift-custom-btn {
  margin-top: 12px;
  padding: 10px 26px;
  border-radius: 4px;                 /* köşeler hafif kavisli */
  border: 1px solid #111;
  background: #ffffff;
  color: #111;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.gift-custom-btn:hover {
  background: #f0f0f0;
}

/* responsive: mobilde alt alta gelsin */
@media (max-width: 900px) {
  .gift-custom-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .gift-custom-content h2 {
    font-size: 30px;
  }
}
/* === GIFT BLOĞU DÜZELTME === */

/* Masaüstünde: GÖRSEL SOLDa, YAZI SAĞda kalsın */
@media (min-width: 900px) {
  .gift-custom-inner {
    /* komple bloğu biraz içeri alalım, resim sola yapışmasın */
    padding-left: 80px;   /* çok gelirse 70, az gelirse 90 yaparsın */
    padding-right: 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); /* resim + yazı oranı */
    gap: 48px;
  }

  /* sırayı eski haline çevir: önce resim, sonra yazı */
  .gift-custom-image {
    order: 1;
  }

  .gift-custom-content {
    order: 2;
  }
}
/* === TRUSTPILOT BENZERİ YORUM BLOĞU === */

.trust-section {
  padding: 56px 0 64px;
  background: #ffffff;
}

.trust-title {
  text-align: center;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #333;
  margin-bottom: 32px;
}

.trust-carousel {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 24px;
}

.trust-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 8px 40px;
  scroll-behavior: smooth;
}

/* scrollbar gizle */
.trust-row::-webkit-scrollbar {
  height: 0;
}
.trust-row {
  scrollbar-width: none;
}

/* kartlar */
.trust-card {
  min-width: 260px;
  max-width: 260px;
  flex: 0 0 auto;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
  padding: 18px 18px 14px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.trust-stars {
  color: #00b67a; /* yeşil yıldızlar */
  font-size: 16px;
  margin-bottom: 10px;
}

.trust-headline {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  margin-bottom: 8px;
}

.trust-text {
  font-size: 14px;
  color: #444;
  margin-bottom: 14px;
}

.trust-author {
  font-size: 13px;
  color: #666;
}

/* ok butonları */
.trust-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.trust-prev {
  left: 0;
}

.trust-next {
  right: 0;
}

/* alt yazı */
.trust-summary {
  text-align: center;
  font-size: 14px;
  color: #444;
  margin-bottom: 8px;
}

.trust-summary a {
  color: #444;
  text-decoration: underline;
}

/* trustpilot mini logo satırı */
.trust-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.trust-brand-star {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #00b67a;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.trust-brand-text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* küçük ekranlarda okları gizle, mobilde swipe ile gitsin */
@media (max-width: 768px) {
  .trust-row {
    padding: 8px 16px;
  }
  .trust-nav {
    display: none;
  }
}
/* --- TRUSTPILOT KART BOYUTU İNCE AYAR --- */

.trust-card {
  /* tonu eski haline döndürüyoruz */
  background: #f9f9f9;          /* önceki ton buydu */
  border: 1px solid #e2e2e2;

  /* boyutu bir tık küçült */
  min-width: 240px;
  max-width: 240px;
  padding: 16px 16px 12px;
}

/* büyük ekranda biraz daha sıkı dursun istersen */
@media (min-width: 1200px) {
  .trust-card {
    min-width: 230px;
    max-width: 230px;
  }
}

/* --- YILDIZ BARINI TRUSTPILOT GİBİ YAP --- */
.trust-stars {
  display: inline-block;
  background: #00b67a;      /* yeşil kutu */
  color: #ffffff;           /* yıldızlar beyaz */
  border-radius: 3px;
  padding: 3px 6px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;      /* yıldızlar arası boşluk */
}
/* --- TRUSTPILOT YILDIZLARINI ORJİNAL GİBİ YAP --- */

.trust-stars {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 10px;
}

.trust-star-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #00b67a;   /* Trustpilot yeşili */
  border-radius: 2px;
  color: #ffffff;        /* yıldız beyaz */
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
/* --- TRUSTPILOT YILDIZLAR FİNAL AYAR --- */

.trust-stars {
  display: inline-flex;
  gap: 3px;                    /* kutular arası beyaz çizgi */
  padding: 2px 3px;            /* etrafında da hafif beyaz çerçeve */
  background: #ffffff;         /* aradaki boşluklar beyaz görünsün */
  border-radius: 3px;
  margin-bottom: 10px;
}

.trust-star-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;                 /* daha büyük kutu */
  height: 22px;
  background: #00b67a;         /* Trustpilot yeşili */
  border-radius: 3px;
  color: #ffffff;              /* yıldız beyaz */
  font-size: 14px;             /* yıldız daha büyük */
  font-weight: 700;
  line-height: 1;
}
/* --- TRUSTPILOT KARTLARINI BİR TIK KÜÇÜLT + FONT AYARI --- */

.trust-card {
  min-width: 215px;          /* önce 230 civarıydı, biraz daralttık */
  max-width: 215px;
  padding: 14px 14px 10px;   /* iç boşluk da azaldı */
}

/* Başlık: hafif daha küçük, çok kalın değil */
.trust-headline {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;       /* önce 16 idi */
  font-weight: 500;      /* yarı kalın */
  margin-bottom: 6px;
}

/* Metin: daha ince ve ufak */
.trust-text {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* İsim + tarih: daha küçük ve soluk */
.trust-author {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #6b6b6b;
}
/* === ABOUT US BLOĞU === */

.about-section {
  background: #f3f3f3;           /* hafif gri arka plan */
  padding: 72px 0 80px;
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); /* sol yazı biraz daha geniş */
  gap: 56px;
  align-items: center;
}

/* sol yazı kısmı */
.about-label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #555;
  margin: 0 0 8px;
}

.about-heading {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 60px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #333333;
  margin: 0 0 40px;
}

/* Create / Shop satırları */
.about-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

.about-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-icon-mark {
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid #222;
  border-radius: 6px;
}

/* çok basit ikon taklidi – istersen sonra svg ile değiştirirsin */
.about-icon-pencil {
  border-radius: 999px;
  transform: rotate(-45deg);
}

.about-icon-shirt {
  border-radius: 4px;
}

/* satırdaki metinler */
.about-row-text h3 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0 6px;
  color: #333;
}

.about-row-text p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* butonlar */
.about-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.about-btn {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 28px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #111;
}

.about-btn-primary {
  background: #111111;
  color: #ffffff;
}

.about-btn-primary:hover {
  background: #000000;
}

.about-btn-ghost {
  background: transparent;
  color: #111111;
}

.about-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* sağdaki büyük resim – sağa yapışık değil, container içinde */
.about-image {
  justify-self: end;
}

.about-image img {
  display: block;
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* responsive – mobilde alt alta gelsin */
@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-heading {
    font-size: 40px;
  }

  .about-image {
    justify-self: center;
  }

  .about-image img {
    max-width: 100%;
  }
}
/* === ABOUT US – ORJİNALE YAKIN === */

.about-section {
  background: #f4f4f4;                  /* orjindeki griye yakın */
  padding: 80px 0 90px;
}

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;                      /* soldan sağdan boşluk */
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: center;
}

/* sol üst: Spreadshirt */
.about-label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #444;
  margin: 0 0 10px;
}

/* ABOUT US başlığı */
.about-heading {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #333;
  margin: 0 0 46px;
}

/* Create / Shop satırları */
.about-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}

/* beyaz yuvarlak ikon alanı */
.about-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* içindeki siyah outline ikon */
.about-icon-mark {
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid #222;
  border-radius: 8px;
}

.about-icon-pencil {
  border-radius: 999px;
  transform: rotate(-45deg);
}

.about-icon-shirt {
  border-radius: 4px;
}

/* satır textleri */
.about-row-text h3 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 8px 0 6px;
  color: #333;
}

.about-row-text p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* butonlar */
.about-buttons {
  display: flex;
  gap: 16px;
  margin-top: 36px;
}

.about-btn {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 30px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #111;
}

.about-btn-primary {
  background: #111;
  color: #fff;
}

.about-btn-primary:hover {
  background: #000;
}

.about-btn-ghost {
  background: transparent;
  color: #111;
}

.about-btn-ghost:hover {
  background: rgba(0,0,0,0.04);
}

/* sağdaki görsel – sağa yapışık değil, container içinde */
.about-image {
  justify-self: end;
}

.about-image img {
  display: block;
  max-width: 540px;
  width: 100%;
  height: auto;
}

/* mobilde alt alta */
@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
  }

  .about-heading {
    font-size: 42px;
  }

  .about-image {
    justify-self: center;
  }
}
/* --- ABOUT US ikonları: kalem + t-shirt --- */

/* Beyaz daire aynı kalsın, sadece SVG ile dolduruyoruz */
.about-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* İçteki SVG ikon */
.about-icon-svg {
  width: 34px;
  height: 34px;
  stroke: #222222;
  stroke-width: 20;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* T-shirt biraz dolu görünmesi için gövdeyi dolduralım */
.about-icon-shirt .about-icon-svg {
  fill: #ffffff;          /* içi beyaz, kenarları siyah */
  stroke-width: 1.8;
}

/* Kalem ikonunda içi boş, sadece kontur */
.about-icon-pencil .about-icon-svg {
  fill: none;
}
/* --- ABOUT US ikonlarını orjinale benzet --- */

/* Beyaz yuvarlak alan */
.about-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* İkonları çizebilmek için */
.about-icon-pencil::before,
.about-icon-pencil::after,
.about-icon-shirt::before,
.about-icon-shirt::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

/* KALEM İKONU */
.about-icon-pencil::before {
  /* gövde */
  width: 16px;
  height: 30px;
  border: 2px solid #111;
  border-radius: 4px;
  top: 26px;
}

.about-icon-pencil::after {
  /* uç */
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid #111;
  bottom: 21px;
}

/* üstteki küçük çizgi (kalem kapağı) */
.about-icon-pencil::marker,
.about-icon-pencil span {
  display: none;
}

/* T-SHIRT İKONU */
.about-icon-shirt::before {
  /* gövde + omuzlar */
  width: 30px;
  height: 26px;
  border: 2px solid #111;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  top: 26px;
}

/* yaka ve kollar */
.about-icon-shirt::after {
  width: 38px;
  height: 10px;
  border: 2px solid #111;
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  top: 22px;
}
/* --- ABOUT US ikon dairelerini düzelt --- */

.about-icon {
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  border-radius: 50% !important;   /* tam daire */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 80px;                  /* sıkışıp elipse dönmesin */
}
/* === USP (PAYMENT / RETURNS / DELIVERY) BLOĞU === */

.usp-section {
  background: #ffffff;
  padding: 40px 0 46px;
}

.usp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  text-align: center;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.usp-item {
  flex: 1 1 0;
}

/* üstteki ikon */
.usp-icon {
  margin-bottom: 10px;
}

.usp-icon-svg {
  width: 30px;
  height: 30px;
  stroke: #222;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* başlık */
.usp-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 0 14px;
}

/* orta metin / logo satırları */
.usp-text {
  font-size: 14px;
  color: #555;
  margin: 0 0 18px;
}

/* payment / shipping logoları (metinle taklit) */
.usp-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

.usp-logos-shipping {
  gap: 24px;
}

.usp-logo {
  font-size: 16px;
  font-weight: 700;
  color: #9a9a9a;
}

/* Read more linki */
.usp-link {
  font-size: 15px;
  font-weight: 500;
  color: #00a99d;            /* turkuaza yakın yeşil */
  text-decoration: none;
}

.usp-link-arrow {
  font-size: 17px;
  margin-left: 4px;
}

/* küçük ekranlarda alt alta */
@media (max-width: 900px) {
  .usp-inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 28px;
  }
}
/* --- USP başlık + logo boyut ayarı --- */

/* başlıkları büyüt */
.usp-title {
  font-size: 20px;      /* önce 18'di */
  font-weight: 500;
}

/* ikonları da bir tık büyüt */
.usp-icon-svg {
  width: 34px;          /* önce 30'du */
  height: 34px;
}

/* ödeme / kargo logolarını büyüt */
.usp-logo {
  font-size: 18px;      /* önce 16'ydı */
  font-weight: 700;
}
/* === NEWSLETTER + FOOTER COLUMNS BLOĞU === */

.footer-info-section {
  background: #f4f4f4;              /* gri arka plan */
  padding: 40px 0 50px;
}

.footer-info-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: 60px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* SOL – NEWSLETTER KARTI */

.newsletter-card {
  background: #c8f0ec;              /* açık turkuaz kutu */
  padding: 20px 24px 26px;
}

.newsletter-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #333;
}

.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-bottom: 10px;
}

.newsletter-input {
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.newsletter-btn {
  border: none;
  background: #00a99d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap;
}

.newsletter-more {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: #444;
  text-decoration: none;
}

/* SAĞ – 3 KOLON */

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.footer-col-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #333;
}

.footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col-list li {
  margin-bottom: 8px;
}

.footer-col-list a {
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.footer-col-list a:hover {
  text-decoration: underline;
}

.footer-small-text {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}

/* Basit ikon taklidi – solda küçük gri ikonlar */

.fi {
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 8px;
  color: #777;
  font-size: 14px;
}

/* Farklı iconlar için semboller */
.fi-order::before { content: "🧾"; }
.fi-help::before { content: "?"; }
.fi-mail::before { content: "✉"; }
.fi-phone::before { content: "☎"; }

.fi-fb::before { content: "f"; }
.fi-ig::before { content: "◎"; }
.fi-pin::before { content: "P"; }
.fi-yt::before { content: "▶"; }
.fi-blog::before { content: "≡"; }

/* Responsive */

@media (max-width: 900px) {
  .footer-info-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
}
/* --- FOOTER BLOĞU İNCE AYARLAR --- */

/* Turkuaz kutu ve genel blok çok aşağı uzamasın */
.footer-info-section {
  padding: 28px 0 32px;              /* üst–alt boşluğu küçülttük */
}}
/* --- FOOTER BLOĞU İNCE AYARLAR --- */

/* Turkuaz kutu ve genel blok çok aşağı uzamasın */
.footer-info-section {
  padding: 28px 0 32px;              /* üst–alt boşluğu küçülttük */
}

.newsletter-card {
  padding: 16px 20px 18px;           /* aşağı doğru uzunluğu kısaldı */
}

/* Follow Us ve Service ikonlarını büyüt */
.fi {
  width: 22px;                       /* ikon alanı genişledi */
  margin-right: 10px;
  font-size: 17px;                   /* ikon simgeleri daha iri */
}

/* Başlık ve link fontlarını orijinale daha yakın yapalım */
.footer-col-title {
  font-size: 19px;                   /* bir tık büyük */
  font-weight: 600;
}

.footer-col-list a {
  font-size: 15px;                   /* linkler de biraz büyüdü */
  line-height: 1.6;
}
/* --- Newsletter bloğunu orjinale yaklaştır --- */

/* Grid sütunlarının birbirini germesini engelle */
.footer-info-inner {
  align-items: flex-start;       /* artık kolonlar yüksekliğe göre uzamıyor */
}

/* Sol turkuaz kutu sadece içeriği kadar olsun */
.newsletter-card {
  align-self: flex-start;        /* grid'in stretch'ini override et */
}

/* Biraz daha orjinal yükseklik için padding ayarı */
.footer-info-section {
  padding: 32px 0 40px;         /* çok boşluk olmasın, hafif toparla */
}

.newsletter-card {
  padding: 18px 22px 18px;      /* alttaki boşluğu da kısalttık */
}
/* === EN ALT YAZI ŞERİDİ === */

.bottom-strip {
  background: #ffffff; /* arka plan beyaz */
  padding: 16px 0 18px;
  border-top: 1px solid #eeeeee; /* üstte ince çizgi olsun (istersen sil) */
}

.bottom-strip-text {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  color: #333333;
  line-height: 1.6;
}

.bottom-link {
  color: #00a99d;     /* üstlerde kullandığımız turkuaza yakın */
  text-decoration: none;
  font-weight: 500;
}

.bottom-link:hover {
  text-decoration: underline;
}

.bottom-heart {
  color: #ff4b6a;      /* pembe / kırmızımsı kalp */
  margin: 0 4px;
  font-size: 16px;
}

/* küçük ekranda padding’i biraz azaltalım */
@media (max-width: 600px) {
  .bottom-strip-text {
    padding: 0 20px;
    font-size: 14px;
  }
}
/* ===== BASİT DROPDOWN (CREATE / SHOP) ===== */

/* Create / Shop kapsayıcısı */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Alt menü – küçük kutu, default kapalı */
.nav-submenu {
  position: absolute;
  top: 100%;           /* linkin HEMEN altı, arada boşluk yok */
  left: 0;
  margin-top: 0;
  min-width: 180px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  display: none;       /* başta kapalı */
  z-index: 50;
}

/* Dropdown içindeki linkler */
.nav-sub-link {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #333;
  text-decoration: none;
}

.nav-sub-link:hover {
  background: #f5f5f5;
  color: #00a99d;
}

/* Create / Shop üzerinde veya içeriğinde iken MENÜ AÇIK */
.nav-item-create:hover .nav-submenu,
.nav-item-create:focus-within .nav-submenu {
  display: block;
}

.nav-item-shop:hover .nav-submenu,
.nav-item-shop:focus-within .nav-submenu {
  display: block;
}
.header-logo img {
  display: block;
  height: 58px;    /* logonun yüksekliği – istersen 50, 60 vs yapabilirsin */
  width: auto;     /* oranı bozulmasın diye */
  border: none;    /* debug’te koyduğumuz kırmızı çerçeveyi kaldır */
}
/* ================= HAKKIMIZDA SAYFASI ================= */

.about-hero {
  background-color: #ffffff;
  padding: 60px 16px 80px;
}

.about-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Üst görsel */
.about-hero-image {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.about-hero-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Alt yazı bloğu */
.about-hero-text {
  text-align: center;
  margin-top: 48px;
}

.about-hero-title {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
  color: var(--text-main, #222222);
}

.about-hero-body {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted, #6F6F6F);
}
/* USP kutusunun içindeki logo satırı */
.usp-logos {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;           /* logolar arası boşluk */
  flex-wrap: wrap;     /* dar ekranda alta geçsinler */
}

/* Tek tek logolar */
.usp-logo {
  height: 28px;        /* hepsinin boyu aynı olsun */
  max-width: 80px;     /* çok uzun olanları sınırlamak için */
  object-fit: contain;
  display: block;

  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.usp-logo:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-1px);
}
/* LOGO SATIRI */
.usp-logos {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* LOGOLAR – BÜYÜK VE RENKLİ */
.usp-logo {
  height: 40px;          /* önce 28px’ti, ~%40-50 daha büyük */
  max-width: 100px;
  object-fit: contain;
  display: block;

  /* renkli olsun diye filtreleri kaldırıyoruz */
  filter: none;
  opacity: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover efekti – hafif zıplasın */
.usp-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
/* ===========================
   TOPTAN SİPARİŞLER – HERO
   =========================== */

.bulk-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;          /* istersen oynarsın */
  object-fit: cover;
}

/* ===========================
   TOPTAN SİPARİŞLER – İLK BLOK
   =========================== */

.bulk-top-block {
  background-color: #ffffff;  /* üstte büyük görsel, altta beyaz blok */
  padding: 64px 0 56px;
}

/* Sende zaten container varsa bunu sil / düzenle.
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
*/

.bulk-top-features {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  text-align: center;
  margin-bottom: 40px;
}

.bulk-top-feature {
  flex: 1;
}

.bulk-top-feature-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #00b3a5;  /* ikonların turkuaz çerçevesi */
  font-size: 28px;
  color: #00b3a5;
  margin-bottom: 16px;
}

.bulk-top-feature-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.bulk-top-feature-text {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* ORTA BAŞLIK */

.bulk-top-heading {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  margin: 16px 0 32px;
}

/* ALTTAKİ İKİ KARTLIK SATIR */

.bulk-top-contact-row {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.bulk-top-contact-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 28px 32px;
  border-radius: 4px;
  border: 1px solid #e3e3e3;
  background-color: #fafafa;
}

.bulk-top-contact-icon {
  flex-shrink: 0;
  margin-right: 20px;
}

.bulk-top-contact-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 26px;
  color: #00b3a5;
}

.bulk-top-contact-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bulk-top-contact-content p {
  font-size: 14px;
  color: #555;
}

/* “Find answers…” satırı */

.bulk-top-faq-link {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.bulk-top-faq-link span {
  vertical-align: middle;
}

.bulk-top-faq-arrow {
  display: inline-block;
  margin-left: 6px;
  font-size: 18px;
  color: #00b3a5;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 900px) {
  .bulk-top-features {
    flex-direction: column;
    gap: 32px;
  }

  .bulk-top-contact-row {
    flex-direction: column;
  }

  .bulk-top-contact-card {
    padding: 22px 20px;
  }
}
/* BLOĞUN GENELİ */
.bulk-top-block {
  background-color: #ffffff;
  padding: 56px 0 64px;          /* üst–alt boşluk, yanlar container’dan gelecek */
}

/* İçerik genişliğini ortada ve daha dar tut */
.bulk-top-inner {
  max-width: 1040px;             /* 1000–1120 arası iyi durur, istersen oynarsın */
  margin: 0 auto;
  padding: 0 24px;               /* kenarlardan rahat nefes alsın */
}

/* ÜSTTEKİ 3 ÖZELLİK SATIRI */

.bulk-top-features {
  display: flex;
  justify-content: center;       /* kenarlara yapıştırma, ortaya topla */
  gap: 56px;                     /* kartlar arasında nefes */
  text-align: center;
  margin-bottom: 40px;
}

.bulk-top-feature {
  flex: 0 1 260px;               /* kartları biraz daralt, çok yayılmasın */
}

/* ikonları da biraz ufalt */
.bulk-top-feature-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 24px;
  color: #00b3a5;
  margin-bottom: 14px;
}

.bulk-top-feature-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.bulk-top-feature-text {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* ORTA BAŞLIK */

.bulk-top-heading {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  margin: 12px 0 28px;
}

/* ALTTAKİ İKİ KART */

.bulk-top-contact-row {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
}

.bulk-top-contact-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 24px 26px;            /* kartları biraz incelt */
  border-radius: 6px;
  border: 1px solid #e3e3e3;
  background-color: #fafafa;
}

.bulk-top-contact-icon {
  flex-shrink: 0;
  margin-right: 18px;
}

.bulk-top-contact-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 22px;
  color: #00b3a5;
}

.bulk-top-contact-content h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bulk-top-contact-content p {
  font-size: 14px;
  color: #555;
}

/* Find answers… satırı */

.bulk-top-faq-link {
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.bulk-top-faq-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 18px;
  color: #00b3a5;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .bulk-top-features {
    flex-direction: column;
    gap: 28px;
  }

  .bulk-top-contact-row {
    flex-direction: column;
  }

  .bulk-top-contact-card {
    padding: 20px 18px;
  }
}
/* ALTTAKİ İKİ KART – DAHA DAR VE ORTALI */
.bulk-top-contact-row {
  display: flex;
  justify-content: center;     /* ortala */
  gap: 24px;
  max-width: 880px;            /* iki kart için toplam genişlik */
  margin: 0 auto 28px;         /* ortala + alttan boşluk */
}

.bulk-top-contact-card {
  flex: 0 1 410px;             /* her kart ~400px civarı */
  display: flex;
  align-items: center;
  padding: 22px 24px;
  border-radius: 6px;
  border: 1px solid #e3e3e3;
  background-color: #fafafa;
}

.bulk-top-contact-icon {
  flex-shrink: 0;
  margin-right: 16px;
}

.bulk-top-contact-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 22px;
  color: #00b3a5;
}

.bulk-top-contact-content h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bulk-top-contact-content p {
  font-size: 14px;
  color: #555;
}

/* responsive tarafı aynı kalsın, ama şunu da ekleyebilirsin: */
@media (max-width: 900px) {
  .bulk-top-contact-row {
    flex-direction: column;
    max-width: 100%;
  }

  .bulk-top-contact-card {
    flex: 1 1 auto;
  }
}
/* FAQ SECTION */
.bulk-faq-section {
  background: #f5f5f5;             /* gri zemin */
  padding: 64px 0 72px;
}

.bulk-faq-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.bulk-faq-title {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 48px;
  color: var(--text-main, #222222);
}

/* GRID */
.bulk-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 0;
}

.bulk-faq-column {
  /* sadece grup; ekstra stil gerekmiyor */
}

/* ACCORDION ITEMS */
.faq-item {
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}

.faq-question {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-main, #222222);
}

/* Soru satırı zaten flex ise (sen de öyle kullanıyorsun) 
   bu ok sağda hizalı duracak */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Ok kapsayıcısı */
/* Küçük ˅ / ˄ oku */
.faq-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);                /* kapalıyken ˅ */
  transition: transform 0.2s ease;
}

/* Açıldığında oku yukarı çevir (˄) */
.faq-item.open .faq-arrow {
  transform: rotate(-135deg);
}



/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted, #555555);
  margin-top: 8px;
}

.faq-answer p {
  margin: 0 0 4px;
}

/* open class varken cevap görünsün */
.faq-item.open .faq-answer {
  max-height: 400px; /* yeterince büyük bir değer */
}

/* Responsive: tablet & altı tek sütun */
@media (max-width: 992px) {
  .bulk-faq-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}
/* ===== Bulk personalised info block ===== */

.bulk-personalised-section {
  background-color: #ffffff;          /* beyaz zemin */
}

.bulk-personalised-inner {
  max-width: 1200px;                  /* kenarlardan boşluk için */
  margin: 0 auto;
  padding: 80px 24px 96px;            /* yukarı / yanlar / aşağı */
}

.bulk-personalised-title {
  text-align: center;
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 56px;
  font-weight: 600;
  color: #222;
}

.bulk-personalised-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 40px;
}

.bulk-personalised-col h3 {
  font-size: 22px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #222;
}

.bulk-personalised-col p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* Tablet: 2 kolon */
@media (max-width: 1024px) {
  .bulk-personalised-inner {
    padding: 64px 24px 80px;
  }

  .bulk-personalised-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobil: 1 kolon */
@media (max-width: 768px) {
  .bulk-personalised-inner {
    padding: 48px 16px 64px;
  }

  .bulk-personalised-title {
    font-size: 26px;
    margin-bottom: 40px;
  }

  .bulk-personalised-columns {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .bulk-personalised-col h3 {
    font-size: 20px;
  }
}
/* ===== KANO Gizlilik Politikası orta blok ===== */

.legal-page {
  background-color: #ffffff;              /* beyaz zemin */
}

.legal-inner {
  max-width: 960px;                      /* kenarlardan boşluk */
  margin: 0 auto;
  padding: 80px 24px 96px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.legal-inner h1 {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 32px;
  text-align: center;
  font-weight: 600;
  color: #222;
}

.legal-inner h2 {
  font-size: 24px;
  margin: 40px 0 16px;
  font-weight: 600;
  color: #222;
}

.legal-inner h3 {
  font-size: 19px;
  margin: 24px 0 10px;
  font-weight: 600;
  color: #222;
}

.legal-inner h4 {
  font-size: 17px;
  margin: 16px 0 8px;
  font-weight: 600;
  color: #333;
}

.legal-inner p {
  margin: 0 0 12px;
}

.legal-inner ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal-inner li {
  margin-bottom: 6px;
}

.legal-updated {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}

/* Mobil uyum */
@media (max-width: 768px) {
  .legal-inner {
    padding: 48px 16px 64px;
  }

  .legal-inner h1 {
    font-size: 26px;
  }

  .legal-inner h2 {
    font-size: 21px;
  }
}
/* ===== KANO koşullar & gizlilik sayfaları ortak stil ===== */

.legal-page {
  background-color: #ffffff;
}

.legal-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.legal-inner h1 {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 32px;
  text-align: center;
  font-weight: 600;
  color: #222;
}

.legal-inner h2 {
  font-size: 24px;
  margin: 40px 0 16px;
  font-weight: 600;
  color: #222;
}

.legal-inner h3 {
  font-size: 19px;
  margin: 24px 0 10px;
  font-weight: 600;
  color: #222;
}

.legal-inner h4 {
  font-size: 17px;
  margin: 16px 0 8px;
  font-weight: 600;
  color: #333;
}

.legal-inner p {
  margin: 0 0 12px;
}

.legal-inner ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal-inner li {
  margin-bottom: 6px;
}

.legal-updated {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}

/* Mobil */
@media (max-width: 768px) {
  .legal-inner {
    padding: 48px 16px 64px;
  }

  .legal-inner h1 {
    font-size: 26px;
  }

  .legal-inner h2 {
    font-size: 21px;
  }
}
/* Ortaklık butonunu yan yana içerik alacak hale getir */
.nav-cta {
  display: inline-flex;        /* varsa mevcut display'i bununla değiştir */
  align-items: center;
  gap: 6px;                    /* Ortaklık ile B2B arası boşluk */
}

/* B2B rozeti */
.nav-b2b-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
/* Ortaklık menü item'ı: yazı + B2B yan yana */
.nav-item-partner .nav-link {
  display: inline-flex;      /* mevcut block/flex neyse bunu ezsin */
  flex-direction: row;
  align-items: center;
  gap: 6px;                  /* Ortaklık ile B2B arası boşluk */
  white-space: nowrap;       /* Alt satıra atmasın */
}

/* B2B rozeti küçük etiket gibi dursun */
.nav-b2b-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
/* Ortaklık + B2B menü item'i */
.nav-item-partner {
  display: inline-flex;
  align-items: center;
}

/* Ortaklık butonu: yazı + B2B yan yana */
.nav-item-partner .nav-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;           /* Ortaklık ile B2B arası boşluk */
  white-space: nowrap;
}

/* B2B rozeti */
.nav-b2b-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;

  background-color: #f1c40f;   
  color: #000;
  border: 1px solid #f1c40f;
  font-weight: 500;
}
/* ==== ORTAKLIK / CORPORATE SAYFASI ==== */

:root {
  /* Spreadshirt corporate sayfasındaki turkuaz CTA için */
  --partner-teal: #00b6b4;
  --partner-teal-dark: #00918f;
}

/* Sayfanın ana wrap'i (şimdilik ekstra bir şey yapmıyoruz) */
.partner-page {
  background: #f4f4f7; /* sitedeki genel fonda kalsın */
}

/* HERO BLOĞU */
.partner-hero {
  background: #cfe6ea;              /* o screenshot'taki açık mavi */
  padding: 40px 0 36px;
}

.partner-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* breadcrumb */
.partner-breadcrumb {
  font-size: 13px;
  color: #6f6f6f;
  margin-bottom: 18px;
}

.partner-breadcrumb a {
  color: #6f6f6f;
  text-decoration: none;
}

.partner-breadcrumb a:hover {
  text-decoration: underline;
}

.partner-breadcrumb span {
  margin-right: 4px;
}

/* Sol metin */
.partner-hero-title {
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #222222;
}

.partner-hero-sub {
  font-size: 20px;
  color: #333333;
  margin: 0 0 22px;
}

/* CTA buton */
.partner-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 28px;
  border-radius: 4px;
  background: var(--partner-teal);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.partner-hero-btn:hover {
  background: var(--partner-teal-dark);
}

/* Sağ görsel */
.partner-hero-image img {
  display: block;
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* Delivery bar (ince şerit) */
.partner-delivery-bar {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.partner-delivery-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #222222;
  text-align: center;
}

.partner-delivery-icon {
  font-size: 18px;
}

.partner-delivery-text a {
  color: #0073e6;
  text-decoration: underline;
}

.partner-delivery-text a:hover {
  text-decoration: none;
}

/* 3 ikonlu USP alanı */
.partner-benefits {
  background: #ffffff;
  padding: 40px 0 52px;
}

.partner-benefits-inner {
  max-width: 960px;                 /* ORTALAMA için genişliği daralttım */
  margin: 0 auto;                   /* tam ortada dursun */
  display: flex;
  justify-content: center;
  gap: 64px;                        /* aralarındaki boşluk */
  text-align: center;
}

.partner-benefit {
  flex: 0 1 260px;
}

/* üstte yuvarlak ikon alanı */
.partner-benefit-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid #dadada;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
  color: #333333;
}

.partner-benefit-icon span {
  display: inline-block;
}

/* başlık + metin */
.partner-benefit-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
  color: #222222;
}

.partner-benefit-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #6f6f6f;
}

/* Responsive ayarlar */
@media (max-width: 900px) {
  .partner-hero-inner {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
  }

  .partner-hero-image {
    order: -1; /* mobilde önce görsel, sonra yazı istersen bunu kaldırabilirsin */
  }

  .partner-hero-title {
    font-size: 30px;
  }

  .partner-hero-sub {
    font-size: 16px;
  }

  .partner-benefits-inner {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
  }
}
/* ==== SAVE BIG ON GROUP ORDERS – ORJİNAL GÖRÜNÜM ==== */

.volume-section {
  background: #ffffff;
  padding: 60px 0 70px;
}

.volume-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* başlıklar */
.volume-main-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.volume-main-text {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
}

.volume-sub-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 35px;
}

/* === GRID / FLEX HİZALAMA === */
/* solda ürün sabit, sağdaki kutular gittikçe genişliyor */

.volume-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  column-gap: 24px;
}

/* ürün solda sabit genişlik */
.volume-product {
  flex: 0 0 260px;
  text-align: center;
}

.volume-product-img {
  width: 100%;
  height: auto;
  display: block;
}

.volume-product-name {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
}

.volume-product-rating {
  margin-top: 6px;
  font-size: 16px;
  color: #f4b400;
}

.volume-product-rating span {
  color: #666;
  font-size: 14px;
  margin-left: 4px;
}

.volume-product-price {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
}

/* tüm kartların ortak stili */
.volume-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 40px 30px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* KUTU GENİŞLİKLERİ – SOLDAN SAĞA UZAYAN ETKİ BURADA */
.volume-grid > .volume-card:nth-of-type(1) {
  /* 10% off */
  flex: 1 1 24%;
}

.volume-grid > .volume-card:nth-of-type(2) {
  /* 40% off */
  flex: 1 1 28%;
}

.volume-grid > .volume-card:nth-of-type(3) {
  /* 60% off – en geniş */
  flex: 1 1 32%;
}

/* kart içi tipografi */
.volume-card-off {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 14px;
}

.volume-card-from {
  font-size: 16px;
  color: #666;
  margin-bottom: 14px;
}

.volume-card-price {
  font-size: 22px;
  font-weight: 700;
}

/* 60% kutusunun gri zemini */
.volume-card-highlight {
  background: #f3f3f3;
}

/* alt not */
.volume-note {
  margin-top: 26px;
  font-size: 14px;
  color: #777;
}

/* responsive – mobile’da hepsini alta alta yap */
@media (max-width: 960px) {
  .volume-container {
    padding: 0 16px;
  }

  .volume-grid {
    flex-direction: column;
    row-gap: 20px;
  }

  .volume-product,
  .volume-grid > .volume-card:nth-of-type(1),
  .volume-grid > .volume-card:nth-of-type(2),
  .volume-grid > .volume-card:nth-of-type(3) {
    flex: 1 1 auto;
  }
}
/* ==== VOLUME DISCOUNT BLOĞU – SPREADSHIRT STİLİ ==== */

.volume-section {
  background: #ffffff;
  padding: 60px 0 70px;
}

.volume-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Başlıklar */
.volume-main-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.volume-main-text {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
}

.volume-sub-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 35px;
}

/* === GRID: 1 ürün + 3 kutu, soldan sağa kutu genişliği artıyor === */

.volume-grid {
  display: grid;
  grid-template-columns: 260px 260px 320px 380px;
  column-gap: 24px;
  align-items: end;
  justify-content: center;
}

/* Ürün */
.volume-product {
  text-align: center;
}

.volume-product-img {
  width: 100%;
  height: auto;
  display: block;
}

.volume-product-name {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
}

.volume-product-rating {
  margin-top: 6px;
  font-size: 16px;
  color: #f4b400;
}

.volume-product-rating span {
  color: #666;
  font-size: 14px;
  margin-left: 4px;
}

.volume-product-price {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
}

/* Kartların ortak stili */
.volume-card {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 40px 30px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* SOLDAN SAĞA GENİŞLİK VE RENK – tam burada ayarlıyoruz */

/* 2. çocuk = 10% off (en küçük, beyaza yakın) */
.volume-grid > :nth-child(2) {
  background: #ffffff;
  padding-top: 26px;
  padding-bottom: 26px;
}

/* 3. çocuk = 40% off (orta genişlik, hafif gri) */
.volume-grid > :nth-child(3) {
  background: #f8f8f8;
  padding-top: 54px;
  padding-bottom: 54px;
}

/* 4. çocuk = 60% off (en geniş, daha koyu gri) */
.volume-grid > :nth-child(4) {
  background: #f1f1f1;
  padding-top: 74px;
  padding-bottom: 74px;
}

/* Kart içi tipografi */
.volume-card-off {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 14px;
}

.volume-card-from {
  font-size: 16px;
  color: #666;
  margin-bottom: 14px;
}

.volume-card-price {
  font-size: 22px;
  font-weight: 700;
}

/* Alt not */
.volume-note {
  margin-top: 26px;
  font-size: 14px;
  color: #777;
}

/* Mobile: hepsi alta alta */
@media (max-width: 960px) {
  .volume-container {
    padding: 0 16px;
  }

  .volume-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}
/* ==== 3'LÜ METİN BLOĞU – PROMO / GIFTS / MARKETING ==== */

.promo-section {
  background: #ffffff;
  padding: 60px 0 70px;
}

.promo-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;   /* ortala */
  gap: 80px;                 /* kolonlar arası nefes */
  text-align: left;
}

/* her kolon */
.promo-box {
  flex: 1 1 0;
  max-width: 340px;          /* sağa sola çok yayılmasın */
}

/* başlık */
.promo-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #222;
}

/* paragraf */
.promo-text {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* mobile'de alta alta gelsin */
@media (max-width: 960px) {
  .promo-inner {
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
  }

  .promo-box {
    max-width: none;
  }
}

/* Sepet rozetini biraz daha şık yapalım */
.header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.header-cart .cart-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #ffb400;
  color: #111;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ==========================
   MAĞAZA SAYFASI
   (.store-main, .product-card vs.)
========================== */

.store-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

.store-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.store-toolbar {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-filters label {
  font-size: 13px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.store-filters select {
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  background-color: #fff;
}

/* Ürün grid'i */

.store-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Ekran küçülünce kolon sayısını azalt */
@media (max-width: 1024px) {
  .store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}}

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Ürün kartı */

.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}}

/* Ürün kartı */

.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.product-image-wrap {
  width: 100%;
  padding-top: 100%; /* kare oran */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f0f0f0;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu kartta tam genişlik */

.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Boş mağaza mesajı */

.store-empty {
  margin: 24px 0;
  font-size: 14px;
  color: #666;
}

/* ==========================
   SEPET SAYFASI
   (.cart-main, .cart-table vs.)
========================== */

.cart-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

.cart-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.cart-empty {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 20px;
  font-size: 14px;
}

.cart-empty a {
  color: #111;
  font-weight: 500;
  text-decoration: underline;
}

.cart-content {
  display: flex;
  gap: 24px;
}

/* SOL taraf (ürünler) */
.cart-items-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* SAĞ taraf (özet) */
.cart-summary-card {
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
  align-self: flex-start;
}

.cart-summary-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}

.cart-summary-line,
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 4px 0;
}

.cart-summary-total {
  font-weight: 700;
  font-size: 15px;
}

.cart-checkout-btn {
  width: 100%;
  margin-top: 12px;
}

.cart-summary-note {
  font-size: 12px;
  color: #777;
  margin-top: 8px;
}

/* Sepet tablosu */

.cart-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e2e2;
}

.cart-table th,
.cart-table td {
  padding: 10px 8px;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}

.cart-table thead {
  background-color: #fafafa;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #666;
}

/* Son satır alt border'ı kaldır */
.cart-table tr:last-child td {
  border-bottom: none;
}

/* Ürün hücresi içinde görsel + yazı */

.cart-item-product {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-item-thumb {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item-name {
  font-size: 13px;
  font-weight: 500;
}

.cart-item-id {
  font-size: 11px;
  color: #777;
}

/* Adet kontrolü */

.cart-qty-control {
  display: inline-flex;
  align-items: center;
  border-radius: 16px;
  border: 1px solid #ddd;
  overflow: hidden;
}

.cart-qty-btn {
  background-color: #f6f6f6;
  padding: 2px 8px;
  font-size: 14px;
}

.cart-qty-btn:hover {
  background-color: #eaeaea;
}

.cart-qty-value {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-size: 13px;
}

/* Sil butonu */

.cart-remove-btn {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #fbe9e9;
  color: #b00020;
}

.cart-remove-btn:hover {
  background-color: #f5caca;
}

/* Sepeti temizle butonu */

.cart-clear-btn {
  margin-top: 10px;
  font-size: 13px;
}

/* Küçük ekranlarda sepet layout'u alt alta geçsin */

@media (max-width: 900px) {
  .cart-content {
    flex-direction: column;
  }

  .cart-summary-card {
    width: 100%;
  }

  .cart-table th:nth-child(1),
  .cart-table td:nth-child(1) {
    min-width: 180px;
  }
}

/* ==========================
   ÖDEME SAYFASI
   (.checkout-main vs.)
========================== */

.checkout-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

.checkout-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.checkout-empty {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 20px;
  font-size: 14px;
}

.checkout-empty a {
  color: #111;
  font-weight: 500;
  text-decoration: underline;
}

/* Form + özet layout */

.checkout-content {
  display: flex;
  gap: 24px;
}

/* Sol form alanı */

.checkout-form-wrap {
  flex: 1 1 auto;
  min-width: 0;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
}

.checkout-form-wrap h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-form label {
  font-size: 13px;
  font-weight: 500;
}

.checkout-form input,
.checkout-form textarea {
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

.checkout-form input:focus,
.checkout-form textarea:focus {
  outline: none;
  border-color: #111;
}

/* Sağ sipariş özeti */

.checkout-summary-wrap {
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
  align-self: flex-start;
}

.checkout-summary-wrap h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}

/* Ürün satırları */

.checkout-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.checkout-item-main {
  display: flex;
  gap: 8px;
}

.checkout-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.checkout-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkout-item-name {
  font-size: 13px;
  font-weight: 500;
}

.checkout-item-variant,
.checkout-item-qty {
  font-size: 11px;
  color: #777;
}

.checkout-item-total {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Özet toplam satırları */

.checkout-summary-line,
.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 4px 0;
}

.checkout-summary-total {
  font-weight: 700;
  font-size: 15px;
}

.checkout-submit-btn {
  margin-top: 10px;
  width: 100%;
}

.checkout-disclaimer {
  margin-top: 8px;
  font-size: 12px;
  color: #777;
}

/* Başarılı sipariş ekranı */

.checkout-success {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 24px;
  text-align: center;
}

.checkout-success h2 {
  margin-top: 0;
  font-size: 22px;
  margin-bottom: 8px;
}

.checkout-success p {
  margin: 4px 0;
}

/* Responsive: mobilde form ve özet alt alta */

@media (max-width: 900px) {
  .checkout-content {
    flex-direction: column;
  }

  .checkout-summary-wrap {
    width: 100%;
  }
}

/* Sadece yeni sayfaların içeriğini ortala ve daralt */
/* HEADER'DAKİ .container'A DOKUNMUYORUZ */

.store-main > .container,
.cart-main > .container,
.checkout-main > .container {
  max-width: 1200px;   /* içerik genişliği */
  margin: 0 auto;      /* ortalama */
  padding: 0 16px;     /* sağ/sol iç boşluk */
}
/* ==========================
   MAĞAZA SAYFASI YENİ LAYOUT
   Spreadshirt tarzı: sol sidebar + sağ grid
========================== */

/* Arka plan ve üstten boşluk */
.store-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

/* Sadece mağaza içeriğini ortalıyoruz */
.store-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* SOL: Sidebar */
.store-sidebar {
  width: 220px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
  font-size: 13px;
}

/* Sidebar bölümler */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 20px;
}

.store-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}

.store-sidebar-subtitle {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
}

.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.store-sidebar-list li {
  margin-bottom: 4px;
}

.store-sidebar-list a {
  color: #444;
  text-decoration: none;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* SAĞ: içerik alanı */
.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Üst filtre barı */
.store-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
}

.store-toolbar {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-filters label {
  font-size: 13px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.store-filters select {
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  background-color: #fff;
}

/* ÜRÜN GRID – Spreadshirt gibi nefes alan grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* Kartlar birbirine yapışmasın, sade kart stili */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Ürün görseli – Spreadshirt’tekine benzer büyük alan */
.product-image-wrap {
  width: 100%;
  padding-top: 110%;  /* hafif dikdörtgen */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* İsim + fiyat */
.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 4px 0 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 2px 0 4px;
}

/* Beden / renk */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu altta geniş */
.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Boş mağaza mesajı */
.store-empty {
  margin: 24px 0;
  font-size: 14px;
  color: #666;
}

/* Responsive: mobilde sidebar alta geçsin */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* ==========================
   MAĞAZA SAYFASI LAYOUT
========================== */

.store-main {
  padding: 32px 0 64px;
  background-color: #f7f7f7;
}

/* Sadece mağaza içeriğini ortala */
.store-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

/* SOL: Sidebar kutusu */
.store-sidebar {
  width: 240px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 18px 16px 28px;
  font-size: 14px;
  min-height: 420px; /* biraz daha uzun dursun */
}

/* Accordion bölüm */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 20px;
  border-top: 1px solid #f0f0f0;
  padding-top: 14px;
}

/* Başlık satırı (Categories / Products) */
.store-sidebar-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.store-sidebar-title {
  font-size: 15px;
  font-weight: 700;
}

.store-sidebar-chevron {
  font-size: 14px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

/* Liste (Men, Women, T-Shirts...) */
.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
  max-height: 500px;
  opacity: 1;
}

/* Satır */
.store-sidebar-list li {
  margin-bottom: 6px;
}

.store-sidebar-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  padding: 3px 0;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* KAPALI durum (accordion) */
.store-sidebar-section.collapsed .store-sidebar-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
}

.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}

/* SAĞ: içerik alanı */
.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Üst filtre barı */
.store-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
}

.store-toolbar {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-filters label {
  font-size: 13px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.store-filters select {
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  background-color: #fff;
}

/* ÜRÜN GRID – kartlar arasında daha fazla boşluk */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px; /* kartlar arası boşluk */
}

/* ÜRÜN KARTI */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Görsel */
.product-image-wrap {
  width: 100%;
  padding-top: 110%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Metinler */
.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 4px 0 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 2px 0 4px;
}

/* Beden / renk */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu altta geniş */
.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Boş mağaza mesajı */
.store-empty {
  margin: 24px 0;
  font-size: 14px;
  color: #666;
}

/* Responsive: mobilde sidebar alta geçsin */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* MAĞAZA – genel alan */
.store-main {
  padding: 32px 0 64px;
  background-color: #f7f7f7;
}

/* Header'a dokunmuyoruz, sadece mağaza içeriğini sola alıyoruz */
.store-container {
  max-width: none;        /* merkeze sıkışmasın */
  margin: 0;              /* left-align */
  padding: 0 48px;        /* soldan ve sağdan nefes */
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* SIDEBAR */
.store-sidebar {
  width: 230px;
  flex-shrink: 0;
  font-size: 14px;
  padding: 8px 0 40px;  /* aşağı doğru biraz uzun */
}

/* Bölümler arası çizgi */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e0e0e0;
}

/* Başlık satırı (Categories / Products) */
.store-sidebar-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.store-sidebar-title {
  font-size: 15px;
  font-weight: 700;
}

.store-sidebar-chevron {
  font-size: 14px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

/* Liste */
.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.store-sidebar-list li {
  margin-bottom: 6px;
}

.store-sidebar-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* Kapalı durum */
.store-sidebar-section.collapsed .store-sidebar-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}

/* SAĞ içerik */
.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Filtre barı aynı kalsın, sadece buraya dokunmuyorum */

/* Ürün grid – kartlar birbirine değmesin */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 40px;          /* kartlar arası boşluk */
  padding-top: 8px;
}

/* Kartın kendisi */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Görsel alanı biraz küçültelim */
.product-image-wrap {
  width: 100%;
  padding-top: 105%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive: mobilde sidebar alta */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* ==========================
   KANO Mağaza – Spreadshirt'e yakın layout
   (Sadece mağaza main içeriğini etkiler)
========================== */

/* Arka plan ve üstten boşluk */
.store-main {
  padding: 32px 0 64px;
  background-color: #f7f7f7;
}

/* İçeriği ortala ama biraz geniş bırak */
.store-container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 48px; /* sidebar ile ürünler arası boşluk */
}

/* ===== SIDEBAR ===== */

.store-sidebar {
  width: 240px;
  flex-shrink: 0;
  font-size: 15px;
  padding: 4px 0 40px;
}

/* Bölümler arası çizgi */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

/* Başlık satırı (Categories / Products) */
.store-sidebar-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.store-sidebar-title {
  font-size: 16px;
  font-weight: 700;
}

.store-sidebar-chevron {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

/* Liste (Men / Women / T-Shirts / Hoodies...) */
.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.store-sidebar-list li {
  margin-bottom: 8px;
}

.store-sidebar-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #222;
  text-decoration: none;
  padding: 3px 0;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* Kapalı (accordion) durum */
.store-sidebar-section.collapsed .store-sidebar-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}

/* ===== SAĞ İÇERİK (FİLTRE + ÜRÜNLER) ===== */

.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Filtre barı – çok kurcalamıyoruz, sadece biraz nefes */
.store-toolbar {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Ürün grid – satırda max 3 ürün */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* en fazla 3 sütun */
  gap: 32px; /* kartlar arası boşluk */
}

/* Daha küçük ekranlarda 2 / 1 kolona düşsün */
@media (max-width: 1100px) {
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .store-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Kartın kendisi – sade, orijinale yakın */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}}

/* Kartın kendisi – sade, orijinale yakın */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Görsel alanı – geniş ama kartın tamamını kaplamıyor */
.product-image-wrap {
  width: 100%;
  padding-top: 110%; /* kareye yakın */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Metinler */
.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 6px 0 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 2px 0 4px;
}

/* Beden / renk */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu altta tam genişlik */
.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Mobilde sidebar alta insin */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* ==== Sidebar ikon & yazı kalınlaştırma ==== */

/* Men / Women satır yazıları bir tık kalın olsun */
.store-sidebar-list a {
  font-weight: 600;   /* normalden bir tık kalın */
}
/* ==== Sidebar ince ayar – ikon ve yazı kalınlığı ==== */

/* Sidebar item yazıları:
   Başlıktan (700) bir tık daha hafif olsun */
.store-sidebar-list a {
  font-weight: 500;   /* 500 = medium */
}

/* ==== Sidebar ok ve hizalama ince ayarı ==== */

/* Sidebar'ı çok az içeri al */
.store-sidebar {
  padding-left: 10px;
  padding-right: 10px;
}

/* Başlık ve listeyi aynı hizadan başlat */
.store-sidebar-header {
  padding: 0 4px 6px 4px;
}

.store-sidebar-list {
  padding-left: 4px;
}

/* Ok'u (chevron) daha geniş ve şık yap */
.store-sidebar-chevron {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #c9c9c9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-left: 8px;
  background-color: #fff;
  transform: rotate(0deg);
  transition:
    transform 0.2s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* Hover’da hafif ton değişsin */
.store-sidebar-header:hover .store-sidebar-chevron {
  background-color: #f5f5f5;
  border-color: #aaa;
}

/* Kapatıldığında ok ters dönsün */
.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}
/* ==== Sidebar ok ikonunu gerçek chevron yap ==== */

/* Metni gizle, sadece çizilmiş ikon kullan */
.store-sidebar-chevron {
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 0;          /* içindeki karakteri görünmez yap */
  margin-left: 8px;
  border: none;          /* varsa daireyi iptal et */
  background: transparent;
  transform: rotate(0deg);
  display: inline-block;
}

/* Asıl oku çizen kısım */
.store-sidebar-chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: translate(-50%, -40%) rotate(-135deg); /* ^ şeklinde ince chevron */
}

/* Kapandığında oku ters çevir (aşağı baksın) */
.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}
/* ==========================
   KANO – Benefits / Avantajlar Bloğu
========================== */

.kano-benefits {
  padding: 40px 0 50px;
  background-color: #f7f7f7; /* istersen şeffaf yapabilirsin */
}

.kano-benefits-inner {
  max-width: 1200px;      /* sağa sola yapışmasın */
  margin: 0 auto;         /* ortala */
  padding: 0 24px;        /* kenarlardan boşluk */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* ortalı dursun */
  gap: 32px;              /* ikonlar arası mesafe */
}

.kano-benefit-item {
  flex: 0 1 180px;        /* max 5 tane yan yana, daralınca alta geçer */
  text-align: center;
}

/* Daire ikon alanı */
.kano-benefit-icon {
  width: 140px;
  aspect-ratio: 1 / 1;    /* her zaman tam daire */
  border-radius: 50%;
  background-color: #bfbfbf;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kano-benefit-icon img {
  max-width: 90%;
  max-height: 90%;
  display: block;
}

/* Alt yazı */
.kano-benefit-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

/* Responsive – tablet */
@media (max-width: 900px) {
  .kano-benefit-item {
    flex: 0 1 30%;
  }
}

/* Responsive – mobil */
@media (max-width: 600px) {
  .kano-benefit-item {
    flex: 0 1 45%;
  }
}

@media (max-width: 420px) {
  .kano-benefit-item {
    flex: 0 1 100%;
  }
}

/* Toptan alışveriş bloğu */
.bulk-top-block {
  text-align: center;    /* içindeki metni ortalar */

}}

/* Toptan alışveriş bloğu */
.bulk-top-block {
  text-align: center;    /* içindeki metni ortalar */

}

/* Ekstra garanti: sadece bu bloktaki p ve h2’leri ortala */
.bulk-top-block h2,
.bulk-top-block p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 20px;
}
/* Üst blok: resim + yazı yan yana */
.bulk-top-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;                /* resim ile yazı arasındaki boşluk */
  max-width: 1200px;
  margin: 0 auto 40px;      /* ortala, altta boşluk bırak */
}

/* Sol resim kutusu */
.bulk-top-image-wrap {
  flex: 0 0 320px;          /* yaklaşık 320px genişlik (isteğe göre değiştir) */
  margin-left: 40px;        /* sayfanın en solundan biraz içeri al */
}

.bulk-top-image-wrap img {
  width: 100%;
  display: block;
  border-radius: 8px;       /* istersen, köşeleri hafif yuvarlak */
}

/* Sağdaki yazı bloğu */
.bulk-top-text {
  flex: 1;
  max-width: 650px;         /* satır genişliği */
  text-align: center;       /* önceki gibi ortalı kalsın istersen */
}

/* Zaten vardıysa bunu koruyabilirsin */
.bulk-top-heading,
.bulk-top-block > p,
.bulk-top-text p {
  text-align: center;
}
@media (max-width: 768px) {
  .bulk-top-layout {
    flex-direction: column;
    gap: 24px;
  }

  .bulk-top-image-wrap {
    margin-left: 0;         /* mobilde sola boşluk bırakma */
    width: 70%;             /* istersen biraz daralt */
  }
}

/* Genel blok */
.designer-editor {
  display: flex;
  background: #f7f7f7;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  min-height: 560px;
  max-height: 720px;

  max-width: 1280px;
  margin: 24px auto;
  overflow: hidden;
}}

/* Genel blok */
.designer-editor {
  display: flex;
  background: #f7f7f7;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  min-height: 560px;
  max-height: 720px;

  max-width: 1280px;
  margin: 24px auto;
  overflow: hidden;
}

/* SOL TOOLBAR */
.designer-sidebar {
  width: 96px;
  background: #ffffff;
  border-right: 1px solid #dedede;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 0;
}

.designer-sidebar-top {
  display: flex;
  flex-direction: column;
}

.designer-tool-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}

.designer-tool-btn:hover {
  background: #f5f5f5;
}

.designer-tool-btn.is-active {
  background: #f0f8ff;
}

.designer-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designer-sidebar-bottom {
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.designer-history-btn {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
}

.designer-history-btn:hover {
  background: #f5f5f5;
}

.designer-history-icon {
  font-size: 14px;
}

/* ORTA ALAN */
.designer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.designer-product-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  position: relative;
}
/* Ürün görselini ve baskı alanını saran küçük kutu */
.designer-product-wrapper {
  position: relative;
  display: inline-block;   /* sadece ürün kadar genişlik */
}


.designer-main-product {
  max-height: 520px;
  max-width: 100%;
  object-fit: contain;
}

/* Alt görünüm şeridi */
.designer-views-strip {
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  padding: 8px 24px 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.designer-view-thumb {
  border: 1px solid transparent;
  background: #fff;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555;
}

.designer-view-thumb img {
  width: 40px;
  height: 50px;
  object-fit: cover;
}

.designer-view-thumb.is-selected {
  border-color: #00a886;
  box-shadow: 0 0 0 1px #00a886;
}

/* SAĞ PANEL */
.designer-right-panel {
  width: 360px;
  background: #ffffff;
  border-left: 1px solid #dedede;
  display: flex;
  flex-direction: column;
}

.designer-right-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #ededed;
}

.designer-back-arrow {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
}

.designer-right-header h2 {
  font-size: 18px;
  font-weight: 600;
}

/* Scroll alanı */
.designer-right-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 12px;
}

.designer-placement-block {
  margin-bottom: 20px;
}

.designer-placement-block h3 {
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 600;
}

.designer-dropzone {
  border: 1px dashed #c4c4c4;
  border-radius: 4px;
  height: 80px;
  background: #fafafa;
}

/* Alt CTA */
.designer-right-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid #ededed;
}

.designer-cta-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  background: #00a886;
  color: #ffffff;
}
.designer-cta-btn:hover {
  filter: brightness(0.95);
}
.designer-tool-svg {
  width: 33px;
  height: 33px;
}

.designer-tool-svg.small {
  width: 18px;
  height: 18px;
}


.designer-tool-img{
  width: 33px;
  height: 33px;
  display: block;
}

.designer-tool-img.small{
  width: 18px;
  height: 18px;
  display: block;
}

.designer-tool-svg path,
.designer-tool-svg rect,
.designer-tool-svg circle {
  stroke-width: 1.8 !important;  /* 1.4 → ~2.8 (2 kat) */
}
.designer-tool-icon {
  width: 38px;   /* 32 → 48 */
  height: 38px;  /* 32 → 48 */
}

/* SOL ŞERİT GENEL — artık arka plan gri */
.designer-sidebar {
  width: 96px;
  background: #f7f7f7;        /* sayfanın gri rengi */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

/* ÜSTTEKİ 4 BUTONUN PANELİ: BEYAZ ŞERİT */
.designer-sidebar-top {
  background: #ffffff;        /* sadece bunlar beyaz */
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #e6e6e6;
  padding: 16px 0;
}

/* UNDO / REDO BLOKU: ARKA PLAN GRİ KALSIN */
.designer-sidebar-bottom {
  background: transparent;    /* griyi alttaki editor’den alsın */
  border-top: none;
  padding: 24px 0 0 24px;     /* soldan hafif boşluk, ekranla aynı gibi dursun */
}

/* Undo / Redo yazılarının stili aynı kalsın istersen biraz daha silik */
.designer-history-btn {
  width: auto;
  background: transparent;
  border: none;
  cursor: default;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #b5b5b5;
}
.designer-history-btn:hover {
  background: transparent;
}
/* Sol kolon genel */
.designer-sidebar {
  width: 96px;
  background: #f7f7f7;            /* gri */
  display: flex;
  flex-direction: column;
}

/* Beyaz panel */
.designer-sidebar-top {
  background: #ffffff;
  border-right: 1px solid #dedede;
  padding: 16px 0;
}

/* 4 ana buton */
.designer-tool-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}

.designer-tool-btn:hover {
  background: #f5f5f5;
}

.designer-tool-btn.is-active {
  background: #f0f8ff;
}

.designer-tool-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designer-tool-svg {
  width: 28px;
  height: 28px;
}

.designer-tool-svg path,
.designer-tool-svg rect,
.designer-tool-svg circle {
  stroke-width: 1.8;
}

/* Undo / Redo bölümü: gri arka plan, upload'ın hemen altında */
.designer-sidebar-bottom {
  background: transparent;        /* griyi alttan alsın */
  padding-top: 8px;               /* upload'a yakın durması için */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.designer-history-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #b5b5b5;
}

.designer-history-btn:hover {
  background: transparent;
}

.designer-history-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designer-history-svg {
  width: 22px;
  height: 22px;
}


.designer-history-img{
  width: 22px;
  height: 22px;
  display: block;
}

.designer-sidebar {
  width: 96px;
  background: #ffffff;
  border-right: 1px solid #dedede;
  display: flex;
  flex-direction: column;
  /* BUNU SİL / EZ: justify-content: space-between;  */
  justify-content: space-between;   /* yeni satır */
  padding: 16px 0;
}
/* Üst Support / Save / Share bar */
.designer-topbar {
  background: #f7f7f7;
  padding: 10px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.designer-topbar-list {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.topbar-item {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #555;
}

.topbar-icon-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #cfcfcf;
}
/* Sağ taraf: ürün bilgisi paneli */
.designer-right-panel {
  width: 360px;
  background: #ffffff;
  border-left: 1px solid #dedede;
  display: flex;
  flex-direction: column;
}

.product-info-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Kart */
.product-info-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e4e4e4;
  margin: 32px 24px 16px;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Başlık ve eco badge */
.product-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.product-title {
  font-size: 20px;
  font-weight: 600;
}

.product-eco-badge {
  background: #d1ebe2;
  border-radius: 14px;
  padding: 4px 8px;
}

.eco-icon-circle {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #2d7b63;
}

/* Delivery time satırı */
.product-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #444;
}

.product-meta-icon {
  width: 20px;
  height: 20px;
}

.product-meta-text strong {
  font-weight: 600;
}

/* Rating */
.product-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.product-stars {
  color: #ffb400;
  letter-spacing: 1px;
}

.product-rating-count {
  color: #777;
}

/* Detay linki */
.product-details-link {
  font-size: 14px;
  color: #00a886;
  text-decoration: none;
}

.product-details-link::after {
  content: " ›";
}

/* Açıklama */
.product-description {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* Renk seçimi */
.product-color-section {
  margin-top: 10px;
}

.product-color-label {
  font-size: 14px;
  margin-bottom: 8px;
}

.product-color-name {
  font-weight: 600;
}

.product-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.color-swatch.is-selected {
  border-color: #00a886;
}

/* Alt CTA */
.designer-right-footer {
  padding: 0 24px 24px;
}

.designer-cta-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  background: #00a886;
  color: #ffffff;
}
.designer-cta-btn:hover {
  filter: brightness(0.95);
}
/* TAM EKRAN OVERLAY */
.product-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.28);
  display: none;              /* JS ile flex yapacağız */
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* KABUK */
.product-picker-shell {
  width: 95vw;
  max-width: 1200px;
  height: 80vh;
  max-height: 720px;
  background: #ffffff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 34px rgba(0,0,0,0.25);
}

/* ÜST BAR */
.product-picker-topbar {
  padding: 12px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-picker-topbar h2 {
  font-size: 18px;
  font-weight: 600;
}
.product-picker-close {
  position: absolute;
  right: 16px;
  top: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

/* İÇERİK 2 KOLON */
.product-picker-content {
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 0;
}

/* SOL PANEL */
.mini-store-sidebar {
  border-right: 1px solid #e5e5e5;
  background: #f7f7f7;
  padding: 16px 14px;
  overflow-y: auto;
}
.mini-store-panel {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e4e4e4;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.mini-store-panel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.mini-store-label {
  font-size: 12px;
  color: #555;
  display: block;
  margin-bottom: 4px;
}
.qty-row {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.qty-btn {
  width: 32px;
  height: 30px;
  border: none;
  background: #f3f3f3;
  cursor: pointer;
  font-size: 18px;
}
#miniStoreQty {
  width: 50px;
  height: 30px;
  border: none;
  text-align: center;
  font-size: 14px;
}
.mini-store-update-btn {
  width: 100%;
  margin: 6px 0 8px;
  padding: 8px 10px;
  background: #00a886;
  border-radius: 4px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mini-store-note {
  font-size: 11px;
  color: #666;
}

.mini-store-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-nav-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 6px 4px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.mini-nav-item:hover {
  background: #f5f5f5;
}
.mini-nav-item.is-active {
  background: #e5f7f2;
  color: #008c72;
}

/* SAĞ ANA KISIM */
.mini-store-main {
  padding: 16px 18px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mini-store-header-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.mini-store-title {
  font-size: 18px;
  font-weight: 600;
}
.mini-store-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mini-filter label {
  font-size: 11px;
  color: #555;
  display: block;
  margin-bottom: 2px;
}
.mini-filter select {
  font-size: 13px;
  padding: 4px 24px 4px 8px;
}

/* ÜRÜN GRID */
.mini-store-grid {
  flex: 1;
  overflow-y: auto;
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* ÜRÜN KARTI */
.mini-store-card {
  background: #f8f8f8;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e0e0e0;
  padding: 6px 6px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-store-card:hover {
  box-shadow: 0 0 0 2px #00a886;
}
.mini-store-card-thumb-wrap {
  background: #ffffff;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mini-store-card-thumb {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
}
.mini-store-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  background: #d1ebe2;
  font-size: 11px;
}
.mini-store-card-name {
  font-size: 13px;
  font-weight: 500;
}
.mini-store-card-rating {
  font-size: 11px;
  color: #777;
}
.mini-store-card-price {
  font-size: 12px;
  margin-top: 2px;
}
.mini-store-card-price strong {
  font-weight: 600;
}

/* Responsive biraz dar ekranlar için */
@media (max-width: 900px) {
  .product-picker-content {
    grid-template-columns: 1fr;
  }
  .mini-store-sidebar {
    display: none;  /* İstersen alt tarafa da alabiliriz */
  }
}
/* Ürünün üzerine gelecek tasarım katmanı */
.designer-product-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  position: relative;
}


/* Yüklenen tasarım */
.design-item {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  min-width: 10%;
  max-width: 80%;
  cursor: move;
  border: 1px dashed rgba(0,0,0,0.25);
  box-sizing: border-box;
  pointer-events: auto;   /* drag / resize için */
  background: transparent;
}

.design-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sağ alttaki büyüt/küçült tutacağı */
.design-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #00a886;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  cursor: nwse-resize;
}
/* ===========================
   DESIGNS POPUP (tasarla.html)
   =========================== */

/* HEADER */
.product-picker-header {
  padding: 12px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-picker-title span {
  font-size: 18px;
  font-weight: 600;
}

/* BODY 2 KOLON */
.design-picker-body {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

/* SOL PANEL */
.design-picker-sidebar {
  border-right: 1px solid #e5e5e5;
  background: #f7f7f7;
  padding: 16px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Arama kutusu */
.design-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  font-size: 14px;
  outline: none;
}
.design-search input:focus {
  border-color: #2bb5a8;
  box-shadow: 0 0 0 1px rgba(43, 181, 168, 0.2);
}

/* Filtre toggle'ları */
.design-filter-toggles {
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Checkbox'ı switch gibi göster */
.toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #e0e0e0;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease;
}
.toggle-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease;
}
.toggle-row input[type="checkbox"]:checked {
  background: #2bb5a8;
}
.toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}

/* Kategori listesi */
.design-category-list-wrap {
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
}
.design-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.design-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.design-category-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.design-category-item:hover {
  background: #eaeaea;
}
.design-category-item.active {
  background: #ffffff;
  box-shadow: 0 0 0 1px #2bb5a8;
}
.design-cat-thumb {
  width: 64px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.design-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design-cat-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    #f3f3f3,
    #f3f3f3 4px,
    #e4e4e4 4px,
    #e4e4e4 8px
  );
}
.design-cat-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.design-cat-empty {
  font-size: 13px;
  color: #666;
}

/* SAĞ TARAF: GRID */
.design-picker-main {
  background: #ffffff;
  padding: 16px 20px;
  overflow-y: auto;
}
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.design-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e5e5e5;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.design-card:hover {
  box-shadow: 0 0 0 2px #2bb5a8;
  transform: translateY(-1px);
}
.design-card-image {
  background: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.design-card-image img {
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
}
.design-card-meta {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.design-card-title {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}
.design-card-price {
  font-size: 12px;
  color: #777;
}
.design-empty {
  font-size: 13px;
  color: #666;
}

/* Küçük ekran uyumu */
@media (max-width: 900px) {
  .product-picker-shell {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
  .design-picker-body {
    grid-template-columns: 1fr;
  }
  .design-picker-sidebar {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    flex-direction: column;
  }
}
/* === TASARLA SAYFASI - PRODUCT POPUP GRID === */

/* Kartların yerleşimi */
.mini-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px;
  padding: 24px 0 32px;
}

/* Kartın kendisi */
.mini-store-card {
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.mini-store-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #00a884;
  transform: translateY(-2px);
}

/* Görsel alanı: sabit oran + içte contain */
.mini-store-card-img {
  position: relative;
  width: 100%;
  padding-top: 120%;          /* oranı belirleyen kısım (yükseklik ~ genişliğin %120'si) */
  background: #f5f5f5;
}

.mini-store-card-img img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Başlık + fiyat alanı */
.mini-store-card-body {
  padding: 12px 14px 14px;
}

.mini-store-card-title {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  margin: 0 0 6px;
}

.mini-store-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.mini-store-card-rating {
  white-space: nowrap;
}

.mini-store-card-price {
  font-weight: 600;
  color: #222;
}

/* “Bu filtrelere uygun ürün bulunamadı” mesajı için */
.mini-store-empty {
  font-size: 14px;
  color: #666;
  padding: 40px 0;
}
/* Kart yapısını zorla düzeltiyoruz: görsel + alt yazı */
.mini-store-card {
  display: flex;
  flex-direction: column;
}

/* Gövde normal akışta kalsın, gizlenmesin */
.mini-store-card-body {
  position: static !important;
  flex: 0 0 auto;
  background: #fafafa;
}

/* Metinler görünür olsun diye renkleri de netleştirelim */
.mini-store-card-title {
  color: #222 !important;
}

.mini-store-card-meta {
  color: #555 !important;
}
/* ---- MINI STORE KART YAZI/FİYAT ZORLA GÖRÜNSÜN ---- */

/* Kart: yüksekliği otomatik olsun, hiçbir şeyi kesmesin */
.mini-store-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  height: auto !important;
  box-sizing: border-box;
}

/* Görsel alanı sadece üst blok */
.mini-store-card-img {
  flex: 0 0 auto;
}

/* Gövde mutlaka görünsün */
.mini-store-card-body {
  display: block !important;
  position: static !important;
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  background: #fafafa;
  border-top: 1px solid #eee;
  min-height: 55px;      /* yazı + fiyat için garanti alan */
}

/* Metin renkleri */
.mini-store-card-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
  color: #222 !important;
}

.mini-store-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #555 !important;
}

.mini-store-card-price {
  font-weight: 600;
  color: #222 !important;
}
/* =====================
   TEXT CANVAS + ITEM
   ===================== */

.text-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;       /* sadece item'lar tıklanabilir */
}

.text-item {
  position: absolute;
  min-width: 80px;
  min-height: 40px;
  padding: 4px 8px;
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 60px;
  line-height: 1.1;
  text-align: center;
  cursor: move;
  pointer-events: auto;
}

.text-item-inner {
  display: inline-block;
  white-space: nowrap;
}

/* Seçili çerçeve (mavi kesik çizgi) */
.text-item.selected::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed #2da9ff;
  border-radius: 4px;
  pointer-events: none;
}

/* Sağ alt köşe resize handle */
.text-resize-handle {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #2da9ff;
  background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  cursor: se-resize;
}

/* =====================
   TEXT PANEL
   ===================== */

.text-controls-panel {
  margin-top: 16px;
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  font-family: inherit;
}

.text-controls-panel.hidden {
  display: none;
}

.text-controls-preview {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.text-controls-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  font-family: Arial, sans-serif;
  background: transparent;
}

.text-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.text-controls-label {
  font-size: 13px;
  color: #555;
  flex: 0 0 80px;
}

/* Renk + stil satırı */
.text-controls-style-row {
  align-items: center;
}

.text-color-picker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

#textColorInput {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ccc;
}

/* Bold/italic butonları */
.text-style-buttons,
.text-align-buttons {
  display: flex;
  gap: 4px;
}

.text-style-btn,
.text-align-btn,
.text-size-btn,
.text-layer-btn {
  border: 1px solid #d0d0d0;
  background: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
}

.text-style-btn:hover,
.text-align-btn:hover,
.text-size-btn:hover,
.text-layer-btn:hover {
  border-color: #00a884;
}

.text-style-btn {
  font-weight: 700;
}

.text-style-btn:nth-child(2) {
  font-style: italic;
}

.text-align-btn.is-active {
  background: #00a884;
  color: #fff;
  border-color: #00a884;
}

/* Font seçimi */
.text-font-select {
  flex: 1;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
}

/* Text size */
.text-size-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-size-number {
  width: 60px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
}

.text-bend-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

#textBendRange {
  flex: 1;
}

.text-bend-value {
  width: 32px;
  text-align: right;
  font-size: 13px;
  color: #555;
}

.text-layer-row {
  justify-content: flex-start;
}

.text-layer-btn {
  font-size: 12px;
}

.text-layer-btn.danger {
  color: #c0392b;
  border-color: #e57373;
}
/* ============================
   TASARLA SAYFASI – POPUP & CANVAS
   ============================ */

/* ---- ÜRÜN SEÇ POPUP (Choose product) ---- */

.product-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.product-picker-overlay.is-visible {
  display: flex;
}

.product-picker-shell {
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

.product-picker-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 0;
}

.product-picker-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}

.product-picker-close:hover {
  color: #000;
}

.product-picker-content {
  flex: 1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  border-top: 1px solid #eee;
  margin-top: 4px;
}

/* Sol panel (volume discount + kategori) */

.mini-store-sidebar {
  border-right: 1px solid #eee;
  background: #fafafa;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
}

.mini-store-panel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.mini-store-label {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 4px;
  color: #555;
}

.mini-store-qty-row {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d0d0d0;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f3f3f3;
  cursor: pointer;
}

.qty-input {
  width: 46px;
  text-align: center;
  border: none;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  font-size: 13px;
}

.mini-store-update-btn {
  margin-top: 10px;
  width: 100%;
  border-radius: 6px;
  border: none;
  padding: 8px 10px;
  background: #009e74;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

.mini-store-update-btn:hover {
  background: #008261;
}

.mini-store-note {
  margin-top: 6px;
  font-size: 11px;
  color: #777;
  line-height: 1.4;
}

.mini-store-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.mini-nav-item {
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: #333;
}

.mini-nav-item.is-active {
  background: #e3f5f0;
  color: #008261;
  font-weight: 600;
}

/* Sağ ana bölüm */

.mini-store-main {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  overflow: hidden;
}

.mini-store-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.mini-store-title {
  font-size: 20px;
  font-weight: 600;
}

.mini-store-filters-row {
  display: flex;
  gap: 10px;
}

.mini-store-select {
  min-width: 150px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
}

/* ÜRÜN GRID */

.mini-store-grid {
  flex: 1;
  overflow-y: auto;
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

/* ÜRÜN KARTI */

.mini-store-card {
  cursor: pointer;
  background: #f8f8f8;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e0e0e0;
  padding: 6px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mini-store-card:hover {
  box-shadow: 0 0 0 2px #00a886;
  transform: translateY(-1px);
}

.mini-store-card-thumb-wrap {
  background: #ffffff;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.mini-store-card-thumb {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* badge + metinler */

.mini-store-badge {
  align-self: flex-start;
  background: #d1ebe2;
  color: #008261;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 500;
}

.mini-store-card-name {
  font-size: 13px;
  font-weight: 500;
}

.mini-store-card-rating {
  font-size: 11px;
  color: #777;
}

.mini-store-card-price {
  font-size: 12px;
  margin-top: 2px;
}

.mini-store-card-price strong {
  font-weight: 600;
}

/* Biraz responsive: sidebar’ı dar ekranda sakla */

@media (max-width: 900px) {
  .product-picker-content {
    grid-template-columns: 1fr;
  }
  .mini-store-sidebar {
    display: none;
  }
}

/* ---- TASARIM CANVAS KATMANI (yazı / upload / design) ---- */

/* Ürünün üzerine gelecek tasarım katmanı */
.designer-product-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}


/* Ortaya eklenen her yazı / görsel */
.design-item {
  position: absolute;
  min-width: 80px;
  min-height: 30px;
  border: 1px dashed transparent;
  transform-origin: center center;
}

/* Seçilince mavi kutu çıksın */
.design-item.is-active {
  border-color: #00a886;
}

/* İçteki gerçek içerik (text ya da img) */
.design-item-content {
  width: 100%;
  height: 100%;
  pointer-events: auto; /* drag vs için */
}

/* Text katmanı için basic stil – JS ile inline style da basacağız */
.design-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  color: #000;
  white-space: pre;
}

/* Köşedeki silme butonu */
.design-remove-btn {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

/* Sağ alttaki büyüt/küçült tutacağı */
.design-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #00a886;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  cursor: nwse-resize;
}
/* =========================
   TEXT EDITOR (sağ panel)
   ========================= */

.text-editor-panel {
  /* JS zaten display:block / none ile açıp kapatıyor */
  padding: 0 16px 16px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px;
}

.text-editor-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e3e3e3;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Üstteki metin kutusu */
.text-editor-input-wrap {
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  padding: 6px 8px;
}

.text-editor-input {
  width: 100%;
  border: none;
  resize: vertical;
  min-height: 46px;
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
}

.text-editor-input:focus {
  outline: none;
}

/* Toolbar genel */
.text-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.text-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-toolbar-label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

/* Renk seçici */
#textColorInput {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #333;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
#textColorInput::-webkit-color-swatch {
  border-radius: 999px;
  border: none;
}
#textColorInput::-moz-color-swatch {
  border-radius: 999px;
  border: none;
}

/* B / I butonları */
.text-style-btn,
.text-align-btn {
  min-width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-style-btn.is-active,
.text-align-btn.is-active {
  background: #00a886;
  color: #ffffff;
  border-color: #00a886;
}

/* Satırlar (Font, Text size, Bend text) */
.text-editor-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.text-row-label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

/* Font select */
.text-select {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
}

/* Text size kontrolleri */
.text-size-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-size-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.text-size-controls input[type="range"],
.text-bend-controls input[type="range"] {
  flex: 1;
}

.text-size-value {
  width: 32px;
  text-align: right;
  font-size: 13px;
}

/* Bend text slider */
.text-bend-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Alt aksiyon butonları */
.text-editor-actions-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.text-layer-actions,
.text-dupdel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.text-layer-btn {
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

.text-layer-btn.text-delete {
  border-color: #e74c3c;
  color: #e74c3c;
}

.text-layer-btn.text-delete:hover {
  background: #ffecec;
}

.site-header {
  background: #ffffff;         /* gri yerine beyaz */
  box-shadow: none;
  border-bottom: 1px solid #e0e0e0;
}
/* HEADER: logo + nav + search + hesap tek satır */
.nav-search-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* sol logo, sağ hesap */
  gap: 32px;
  padding: 12px 24px;
}

/* Ortadaki nav + search’i yan yana tutan grup */
.nav-center {
  display: flex;
  align-items: center;
  gap: 40px; /* Tasarla ile arama çubuğu arası */
}

/* Tüm ürünler için ortak baskı alanı dikdörtgeni */
.design-canvas {
  position: absolute;

  /* Baskı alanı (print area) */
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 54%;

  border: 2px dashed #00a3ff;
  border-radius: 2px;
  box-sizing: border-box;
  background: transparent;

  z-index: 5;
  pointer-events: auto;
}




/* Alignment guides overlay (must NOT affect layout) */
.align-guides{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6; /* above product, below items toolbar if needed */
}
.align-guide{
  position: absolute;
  background: rgba(0,170,255,0.9);
  border-radius: 2px;
  opacity: 0.9;
  display: none; /* JS shows when needed */
}
.align-guide-v{ width: 2px; top: 0; bottom: 0; left: 0; transform: none; }

.align-guides.is-visible .align-guide{ display:block; }
.align-guide-h{ height: 2px; left: 0; right: 0; top: 0; transform: none; }
/* ===== Sağdan Açılan Sepet Paneli (Spreadshirt tarzı) ===== */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* arkadaki sayfayı karartan katman */
  display: none;
  justify-content: flex-end;
  z-index: 9999;
}

.cart-overlay.is-open {
  display: flex;
}

.cart-drawer {
  width: 420px;
  max-width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
  font-family: "Roboto", sans-serif;
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5e5;
}

.cart-drawer-title {
  font-size: 20px;
  font-weight: 700;
}

.cart-drawer-close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.cart-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 0 24px;
}

/* Ürün listesi Spreadshirt’e benzesin diye table başlığını gizleyip satırları kart gibi gösteriyoruz */
.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table thead {
  display: none;
}

.cart-item-row td {
  padding: 8px 0;
  border-bottom: 1px solid #eeeeee;
}

.cart-item-product {
  display: flex;
  gap: 12px;
}

.cart-item-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #e5e5e5;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.cart-item-id {
  font-size: 12px;
  color: #777777;
}

.cart-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 4px;
  overflow: hidden;
}

.cart-qty-btn {
  border: none;
  background: #f5f5f5;
  padding: 4px 8px;
  cursor: pointer;
}

.cart-qty-value {
  padding: 0 10px;
  min-width: 24px;
  text-align: center;
}

.cart-remove-btn {
  border: none;
  background: none;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* Alt özet kısmı */

.cart-drawer-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid #e5e5e5;
}

.cart-volume-line {
  font-size: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #222222;
  color: #ffffff;
  text-align: center;
}

.cart-volume-link {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 500;
}

.cart-summary-line,
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-top: 6px;
}

.cart-summary-total {
  font-weight: 700;
  margin-top: 12px;
  font-size: 16px;
}

.cart-checkout-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: #00a33b; /* Spreadshirt yeşiline yakın */
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.cart-checkout-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.cart-clear-link {
  margin-top: 10px;
  border: none;
  background: none;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* ==== TASARLA SAYFASI YENİ LAYOUT ==== */

/* Ana editör: sol toolbar + orta ürün + sağ ürün paneli yan yana */
.designer-editor {
  display: flex;
  background: #f7f7f7;
}

/* Orta alan: hoodie + altındaki görünüm butonları */
.designer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 32px 32px;
}

/* Hoodie alanı: butonlar alt alta gelsin diye column yaptık */
.designer-product-stage {
  flex: 1;
  display: flex;
  flex-direction: column;   /* ÖNEMLİ: hoodie yukarıda, views şeridi altında */
  align-items: center;
  justify-content: center;
  min-height: 360px;
  position: relative;
}

/* Sağ panel: ürün bilgisi */
.designer-right-panel {
  width: 360px;
  background: #ffffff;
  border-left: 1px solid #dedede;
  display: flex;
  flex-direction: column;
}

/* Mobile’de üst üste binsin istersen */
@media (max-width: 960px) {
  .designer-editor {
    flex-direction: column;
  }

  .designer-right-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid #dedede;
  }
}
/* ==== KANO Tasarla - Layout Fix Override ==== */

/* Ana editör: sol toolbar + orta ürün + sağ panel yan yana */
.designer-editor {
  display: flex;
  align-items: stretch;
  max-width: 1280px;
  margin: 24px auto;
  background: #f7f7f7;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

/* Sol dikey toolbar */
.designer-sidebar {
  width: 96px;
  flex-shrink: 0;
}

/* Orta alan: hoodie + altındaki Front/Back/Right/Left */
.designer-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 32px 32px;
}

/* Hoodie alanı */
.designer-product-stage {
  flex: 1;
  display: flex;
  flex-direction: column; /* Hoodie yukarıda, views şeridi altına gelecek */
  align-items: center;
  justify-content: center;
  min-height: 360px;
  position: relative;
}

/* View buton şeridi – hoodie'nin ALTINDA kalacak */
.designer-views-strip {
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  padding: 10px 24px 14px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Sağ panel: ürün bilgisi */
.designer-right-panel {
  width: 360px;
  flex-shrink: 0;
  background: #ffffff;
  border-left: 1px solid #dedede;
  display: flex;
  flex-direction: column;
}
/* === Tasarla sayfası layout override === */

/* Editör: sağ panel için içeride boşluk aç ve konumlandırma referansı ver */
.designer-editor {
  position: relative;
  padding-right: 360px;   /* sağdaki panel için yer bırak */
}

/* Sağ paneli editörün SAĞINA sabitle */
.designer-right-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 100%;
  border-left: 1px solid #dedede;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Orta alan yine flex içinde kalsın ama sağ panelin altına taşmasın diye */
.designer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 32px 32px;
}

/* ================================
   MAĞAZA SOL KATEGORİ PANELİ
   ================================ */

.store-sidebar {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 260px;
}

/* Başlık (Kategoriler) */
.store-sidebar-section[data-section="categories"] .store-sidebar-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 4px 0 10px;
  cursor: default;
}

.store-sidebar-title {
  font-weight: 700;
  font-size: 16px;
  color: #111827;
}

.store-sidebar-header .store-sidebar-chevron {
  font-size: 12px;
  color: #6b7280;
}

/* Kadın / Erkek / Unisex grup blokları */
.store-sidebar-group {
  margin-top: 10px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid rgba(209, 213, 219, 0.9);
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.store-sidebar-group:hover {
  background: #f3f4f6;
  border-color: #4f46e5;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.08);
}

/* Grup başlığı (Kadın / Erkek / Unisex butonu) */
.store-sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.store-sidebar-group-toggle span:first-child {
  letter-spacing: 0.01em;
}

.store-sidebar-group-toggle .store-sidebar-chevron {
  font-size: 11px;
  transform: rotate(180deg);
  transition: transform 0.15s ease;
}

/* Grup kapalıyken ok yönü */
.store-sidebar-group:not(.is-open) .store-sidebar-chevron {
  transform: rotate(0deg);
}

/* Alt kategori listesi */
.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 4px 4px 8px;
  border-top: 1px solid rgba(209, 213, 219, 0.8);
}

/* Alt kategori item’leri */
.store-sidebar-list li {
  margin: 2px 0;
}

/* Alt kategori linkleri */
.store-sidebar-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  color: #111827;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.store-sidebar-list a:hover {
  background: rgba(79, 70, 229, 0.06);
  color: #111827;
  transform: translateX(2px);
}

/* Seçili alt kategori */
.store-sidebar-list a.is-active {
  background: #4f46e5;
  color: #ffffff;
}

.icon-longsleeve::before {
  content: "L";
}

/* Sidebar collapse (en üstteki “Kategoriler” başlığına bağlı) */
.store-sidebar-section.collapsed .store-sidebar-group {
  display: none;
}

/* Küçük ekran uyumu */
@media (max-width: 1024px) {
  .store-sidebar {
    max-width: 100%;
    margin-bottom: 16px;
  }
}
/* ============================
   HOME – EN ÇOK SATANLAR
   ============================ */

.home-products-carousel {
  position: relative;
  margin-top: 16px;
  padding-bottom: 8px;
}

.home-products-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scroll-behavior: smooth;
}

/* Scrollbar çok kaba görünmesin */
.home-products-row::-webkit-scrollbar {
  height: 6px;
}
.home-products-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
}

/* SAĞDAKİ OK BUTONU */
.home-products-next {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-products-next span {
  font-size: 22px;
  line-height: 1;
}

/* Kartlar – mağazadaki product-card'ı bozma diye
   sadece home satırı içindekileri hedefliyoruz */
.home-products-row .product-card.product-card--home {
  flex: 0 0 220px;              /* Kart genişliği */
  max-width: 220px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Görsel oranı – hafif dikdörtgen kutu */
.home-products-row .product-card.product-card--home .product-image-wrap {
  position: relative;
  width: 100%;
  padding-top: 120%;            /* 5:6 oranına yakın */
  overflow: hidden;
  border-radius: 12px;
  background: #f7f7f7;
}

.home-products-row .product-card.product-card--home .product-image-wrap img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Başlık / fiyat mağaza ile uyumlu ama biraz daha kompakt */
.home-products-row .product-card.product-card--home .product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 10px 0 4px;
  color: #222;
}

.home-products-row .product-card.product-card--home .product-price {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

/* Link tüm kartı tıklanabilir yapsın */
.home-products-row .product-card.product-card--home .product-link {
  text-decoration: none;
  color: inherit;
}
.home-products-row .product-card.product-card--home .product-link:hover {
  text-decoration: none;
}

/* “Ürün yok” text’i için */
.home-products-empty {
  padding: 24px 0;
  color: #666;
  font-size: 14px;
}
/* === GENEL MOBİL DÜZENLEMELERİ (EK) === */

/* 768px ve altı telefon / küçük tablet */
@media (max-width: 768px) {

  /* Yatay scroll’u öldür */
  html,
  body {
    overflow-x: hidden;
  }

  /* Üst header biraz sıkılsın */
  .header-inner {
    padding: 8px 12px;
    gap: 8px;
  }

  /* CREATE / SHOP / PRO / B2B + search blokları alt alta gelsin */
  .nav-search-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 10px 16px;
  }

  /* Nav linkler tek satıra sığmazsa kaydırılabilir olsun */
  .nav-links {
    width: 100%;
    justify-content: space-between;
    font-size: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  /* Büyük arama çubuğu tam genişlik */
  .header-search-main {
    flex: 1 0 auto;
    max-width: 100%;
    width: 100%;
  }

  /* Kahraman slider yüksekliği ve overlay boyutları küçülsün */
  .hero-slider-inner {
    height: 260px;
  }

  .hero-overlay {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 100%;
    padding: 10px 12px;
  }

  .hero-overlay h1 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .hero-overlay p {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .hero-buttons .btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Ürün alanları ve grid’ler kenarlardan içeri girsin */
  .home-categories-products,
  .gift-custom-section,
  .trust-section,
  .about-section,
  .usp-section,
  .footer-info-section,
  .bulk-top-block {
    padding-left: 0;
    padding-right: 0;
  }

  .home-category-bar,
  .home-products-header,
  .gift-custom-inner,
  .about-inner,
  .usp-inner,
  .footer-info-inner,
  .bulk-top-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Bestsellers başlığı ve “Show all” alt alta gelsin */
  .home-products-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Ürün slider’ı telefonda daha geniş görünsün */
  .home-products-row {
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }

  .product-card {
    min-width: 78%;
    max-width: 78%;
  }

  /* About, USP, footer grid’lerini tek kolona düşür */
  .about-inner,
  .usp-inner,
  .footer-info-inner,
  .gift-custom-inner,
  .bulk-top-inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .about-image,
  .gift-custom-image {
    justify-self: center;
  }
}

/* Çok küçük telefonlar için ekstra sıkı ayar (480px ve altı) */
@media (max-width: 480px) {

  .hero-slider-inner {
    height: 220px;
  }

  .home-category-label {
    font-size: 18px;
  }

  .cat-pill {
    font-size: 13px;
    padding: 5px 12px;
  }

  .trust-card {
    min-width: 85%;
    max-width: 85%;
  }

  .about-heading {
    font-size: 32px;
  }

  .usp-title {
    font-size: 18px;
  }

  .footer-col-title {
    font-size: 17px;
  }
}

/* ===== PATCH (2025-12-23): Slider'ı aşağı doğru uzat + search büyüteci en sağa yapıştır ===== */

/* 1) HERO SLIDER: yükseklik büyüsün (aşağı doğru uzasın) */
.hero-slider-inner{
  height: 560px; /* önce 420px idi */
}
@media (max-width: 768px){
  .hero-slider-inner{
    height: 380px; /* önce 300px idi */
  }
}

/* 2) SEARCH: büyüteç ikonu input'un en sağına yapışsın */
.header-search-main{
  position: relative;
}

/* 2) SEARCH: büyüteç ikonu input'un en sağına yapışsın */
.header-search-main{
  position: relative;
}

/* ikon için sağ tarafta net boşluk bırak */
.header-search-main input{
  padding-right: 52px; /* ikon/klik alanı için */
}

/* butonu sağ kenara yapıştır, input yüksekliği boyunca uzat */
.header-search-main button{
  right: 0;             /* önce 10px idi */
  top: 0;
  bottom: 0;
  width: 46px;
  height: auto;
  transform: none;
}

/* ikon çizimini butonun ortasına oturt */
.header-search-main button::before{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #555;
  left: 50%;
  top: 50%;
  transform: translate(-60%, -60%);
}

.header-search-main button::after{
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: #555;
  left: 50%;
  top: 50%;
  transform: translate(1px, 2px) rotate(45deg);
}
/* === FIX: Arama kutusunda büyüteç en sağa, yazı üstüne gelmesin (override) === */
.header-search-main{
  position: relative;
}

.header-search-main input{
  box-sizing: border-box;
  padding-right: 58px !important; /* ikon alanı için net boşluk */
}

/* Sağdaki ikon alanını input'un en sağına yapıştır */
.header-search-main button{
  position: absolute;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  height: 100% !important;
  width: 46px !important;      /* tıklama alanı + ikon için alan */
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  border-radius: 0 3px 3px 0;  /* input sağ köşeleriyle uyumlu */
}

/* Hover'da eski 'buton güzel' hissi */
.header-search-main button:hover{
  background: rgba(0,0,0,0.05) !important;
}

/* İkonu butonun ortasına çiz (mevcut pseudo'ları override ediyoruz) */
.header-search-main button::before{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #555;
  left: 50%;
  top: 50%;
  transform: translate(-60%, -60%);
  inset: auto !important;
}

.header-search-main button::after{
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: #555;
  left: 50%;
  top: 50%;
  transform: translate(2px, 6px) rotate(45deg);
  right: auto !important;
  bottom: auto !important;
}


/* Topbar icons (Spreadshirt-like) */
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}
.topbar-item:hover { background: rgba(0,0,0,0.04); }

.topbar-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  stroke: #1f1f1f;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-label {
  font-size: 13px;
  color: #1f1f1f;
  font-weight: 500;
}

/* Hide stray close button near product (if present) */
.print-area-close, .product-close-x, .designer-float-close { display:none !important; }


/* Floating toolbar (Spreadshirt-like) */
.design-float-toolbar{
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 9999;
  pointer-events: auto;
}
.design-float-toolbar .tool-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.design-float-toolbar .tool-btn:hover{
  background: rgba(0,0,0,0.04);
}
.design-float-toolbar svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* inline toolbar (text item controls) */
.design-text-toolbar{ display:none !important; }

.design-item.is-selected{
  border: 2px dashed #00aaff;
}


/* Show toolbar only when a text item is selected (DISABLED: we only use the top 4-button toolbar) */
.design-text-item.is-text-selected .design-text-toolbar{
  display:none !important;
}

.design-text-toolbar .text-toolbar-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #e9e9e9;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}

.design-text-toolbar .text-toolbar-btn:hover{
  background:#f6f6f6;
}

/* Ensure selected text item is above others and has a clear outline */
.design-text-item.is-text-selected{
  outline:2px solid rgba(0,170,160,.35);
  outline-offset:2px;
}



/* =========================================================
   KANO Designer - Spreadshirt style selection & toolbar
   ========================================================= */
.design-item.is-selected{
  border: 2px solid #1e7aff;
  box-shadow: 0 0 0 1px rgba(30,122,255,0.15);
}

.design-item.is-selected .design-resize-handle{
  background: #ffffff;
  border: 2px solid #1e7aff;
}

.kano-item-toolbar{
  position: absolute;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  z-index: 9999;
  user-select: none;
}

.kano-item-toolbar button{
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.kano-item-toolbar button:hover{
  background: rgba(0,0,0,0.06);
}

.kano-item-toolbar svg{
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

/* cm tooltip while dragging */
.kano-measure-tooltip{
  position:absolute;
  padding: 4px 8px;
  font-size: 12px;
  background:#111827;
  color:#fff;
  border-radius:8px;
  opacity: 0.92;
  z-index: 9999;
  pointer-events:none;
  white-space: nowrap;
}


/* --- KANO CM position readout (Spreadshirt-like) --- */
.kano-pos-hline{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:rgba(0,160,255,0.45);
  pointer-events:none;
  z-index:9999;
}
.kano-pos-readout{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  padding:3px 8px;
  border-radius:8px;
  background:#fff;
  border:1px solid #e7e7e7;
  font-size:12px;
  color:#111;
  gap:6px;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:10000;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}


.kano-pos-readout{ opacity:0; transition: opacity 120ms ease; }
.kano-pos-readout.is-on{ opacity:1; }
/* === KANO PATCH: make #designCanvas interactive + stable border (non-destructive override) === */
#designCanvas.design-canvas{
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 54%;
  border: 2px dashed #00a3ff;
  border-radius: 2px;
  box-sizing: border-box;
  background: transparent;
  z-index: 5;
  pointer-events: auto;
}
/* dashed print-area border */
/* ensure canvas children stay interactive */
/* legacy class compatibility: some items are created as .design-text-item */
.design-text-item{
  position: absolute;
  cursor: move;
  user-select: none;
}
.design-text-content{
  display: inline-block;
  white-space: pre-wrap;
}

/* right panel must be a positioning context for #textEditorPanel */
.designer-right-body{
  position: relative;
}

/* text editor panel overlays the product info when shown */
#textEditorPanel.text-editor-panel{
  position: absolute;
  inset: 0;
  background: #fff;
  overflow: auto;
  z-index: 5;
}
/* =========================
   Ürün Detay Modal (ghost kutu fix)
   ========================= */

#productDetailModal {
  position: fixed;
  inset: 0;
  display: none;                 /* default gizli */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99999;
  padding: 24px;
  box-sizing: border-box;
}

/* JS açınca .is-open ekliyor */
#productDetailModal.is-open {
  display: flex;
}

/* aria-hidden ile ekstra garanti */
#productDetailModal[aria-hidden="true"] {
  display: none !important;
}
#productDetailModal[aria-hidden="false"] {
  display: flex !important;
}

/* iframe düzgün görünüm */
#productDetailFrame {
  width: min(1100px, 92vw);
  height: min(760px, 88vh);
  border: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* X kapatma butonu (id varsa) */
#productDetailModalClose {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

/* modal açıkken scroll kilitle */
body.modal-open {
  overflow: hidden;
}



/* ---------------------------------------------------------
   KANO Designer - Text should start "narin" (small + padding)
   --------------------------------------------------------- */
.design-item.design-text-item{
  min-width: 120px;
}

.design-text-content{
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}


/* =========================================================
   Topbar (Destek / Kaydet / Paylaş / Tam ekran) - polished
   ========================================================= */
.topbar-icon-dot{ display:none !important; }

.designer-topbar{
  background:#ffffff;
  border-bottom:1px solid #ececec;
  padding:10px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.designer-topbar-list{
  gap: 14px;
}

.topbar-item{
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2b2b2b;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.topbar-item:hover{
  border-color:#d7d7d7;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.topbar-item:active{
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.topbar-item:focus-visible{
  outline: 2px solid rgba(0,168,134,0.35);
  outline-offset: 2px;
}

.topbar-icon{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#222;
}

.topbar-icon svg{
  width: 18px;
  height: 18px;
  display:block;
}

/* Toast */
.kano-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(25,25,25,0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10000;
}
.kano-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Share sheet */
.kano-share-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10000;
}
.kano-share-sheet{
  width: min(520px, 96vw);
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -16px 40px rgba(0,0,0,0.18);
  padding: 14px 14px 12px;
  margin-bottom: 0;
}
.kano-share-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 10px;
}
.kano-share-title h3{
  margin:0;
  font-size: 15px;
  font-weight: 700;
}
.kano-share-close{
  border:none;
  background: transparent;
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}
.kano-share-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 4px 10px;
}
.kano-share-btn{
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  background: #fafafa;
  padding: 10px 8px;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color:#2b2b2b;
}
.kano-share-btn:hover{
  background:#fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.kano-share-btn .ico{
  width: 24px;
  height: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kano-share-btn .ico svg{ width:24px; height:24px; display:block; }
.kano-share-footer{
  padding: 6px 4px 2px;
  display:flex;
  gap: 10px;
}
.kano-share-wide{
  flex: 1;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.kano-share-wide:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

@media (max-width: 420px){
  .kano-share-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   KANO HOME: Spreadshirt hissi (PILLS + GIFT/NAKIŞ)
   -> style.css EN ALTINA EKLE (silme yok)
   ========================================================= */

/* ====== ŞİMDİ TASARLA PILL BAR (home-categories-products) ====== */
.home-categories-products{
  background:#fff;
}}

/* =========================================================
   KANO HOME: Spreadshirt hissi (PILLS + GIFT/NAKIŞ)
   -> style.css EN ALTINA EKLE (silme yok)
   ========================================================= */

/* ====== ŞİMDİ TASARLA PILL BAR (home-categories-products) ====== */
.home-categories-products{
  background:#fff;
}

.home-category-bar{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px; /* senin dosyada 28px, biraz sıkılaştır */
}

.home-category-label{
  font-size:18px;            /* daha “shop” hissi */
  font-weight:600;
  color:#111;
  letter-spacing:-0.01em;
  margin-right:6px;
}

.home-category-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Spreadshirt benzeri: soft border + capsule + hover lift */
.cat-pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #d8d8d8;
  background:#fff;
  color:#222;
  font-size:14px;
  font-weight:600;
  line-height:1;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.cat-pill:hover{
  transform:translateY(-1px);
  border-color:#cfcfcf;
  background:#fafafa;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
}

.cat-pill.active{
  background:#111;
  border-color:#111;
  color:#fff;
  box-shadow:0 12px 22px rgba(0,0,0,.14);
}

/* Mobil: label üstte, pill’ler alt satıra */
@media (max-width: 720px){
  .home-category-bar{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
}

/* ====== HEDİYE / NAKIŞ BLOĞU (gift-custom-section) ======
   Not: Bu senin index’te VAR. (gift-custom-section / gift-custom-inner)
*/
.gift-custom-section{
  background: linear-gradient(180deg,#f6f6f6 0%, #f2f2f2 100%);
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
}

.gift-custom-inner{
  border-radius:18px;
  padding:24px 24px; /* daha kompakt */
}

.gift-custom-image img{
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}

.gift-custom-content h2{
  font-size:38px;
  letter-spacing:-0.02em;
  color:#111;
}

.gift-custom-content p{
  color:#333;
}

.gift-custom-btn{
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  border:1px solid #111;
  background:#fff;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.gift-custom-btn:hover{
  background:#f7f7f7;
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}

/* ====== (Eğer senin eklediğin yeni bloklar BU class’larla geldiyse) ======
   Gift Card / Trend / Nakış CTA gibi eklediğimiz şeyler için “fail-safe” stiller.
   (Class isimleri farklıysa: ilgili HTML bloğundaki classları buna uyarlarsın.)
*/
.gift-card-section,
.trend-collections-section,
.embroidery-section{
  background:#fff;
  padding:28px 0;
}

.gift-card-section .container,
.trend-collections-section .container,
.embroidery-section .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.trend-collections-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.trend-collections-header h2{
  font-size:34px;
  letter-spacing:-0.02em;
  color:#111;
  margin:0;
}

.trend-nav{
  display:flex;
  gap:10px;
}

.trend-nav button{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid #d8d8d8;
  background:#fff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.trend-nav button:hover{
  transform:translateY(-1px);
  background:#fafafa;
  box-shadow:0 12px 22px rgba(0,0,0,.08);
}

/* Trend kart track */
.trend-track{
  display:flex;
  gap:16px;
  overflow:auto;
  scroll-behavior:smooth;
  padding-bottom:8px;
}

.trend-track::-webkit-scrollbar{ height:0; }
.trend-track{ scrollbar-width:none; }

.trend-card{
  min-width:240px;
  max-width:240px;
  border:1px solid #ececec;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease;
}

.trend-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(0,0,0,.10);
}

.trend-card .thumb{
  height:140px;
  background:linear-gradient(135deg,#f3f3f3,#e9e9e9);
}

.trend-card .title{
  padding:12px 14px 14px;
  font-weight:800;
  color:#111;
  font-size:16px;
}
/* =========================================================
   APPEND ONLY — GIFT CARD + TREND COLLECTIONS (PRO UI)
   Bu bloğu style.css EN ALTINA ekle.
   ========================================================= */

:root{
  --k-surface: #ffffff;
  --k-surface-2:#f6f6f8;
  --k-text:#151515;
  --k-muted:#6a6a6a;
  --k-border: rgba(0,0,0,.10);
  --k-border-2: rgba(0,0,0,.07);
  --k-shadow: 0 18px 45px rgba(0,0,0,.10);
  --k-shadow-soft: 0 10px 28px rgba(0,0,0,.08);
  --k-radius: 18px;
  --k-radius-sm: 14px;
  --k-radius-xs: 12px;
  --k-ring: 0 0 0 3px rgba(217,42,41,.18);
  --k-accent: var(--pink-main, #D92A29);
  --k-accent-dark: var(--pink-dark, #B41F1F);
}

/* Güvenli: sadece gift card sayfası/wrapper'ı varsa uygula */
:is(body.gift-card, body.giftcard, body.page-gift-card, body.page-giftcard){
  background: var(--k-surface-2);
}

/* Wrapper / main alanı (varsa) */
:is(.gift-card-page, .giftcard-page, main.gift-card, main.giftcard, .gift-card-wrapper, .giftcard-wrapper){
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

:is(.gift-card-page, .giftcard-page, main.gift-card, main.giftcard, .gift-card-wrapper, .giftcard-wrapper) h1,
:is(.gift-card-page, .giftcard-page, main.gift-card, main.giftcard, .gift-card-wrapper, .giftcard-wrapper) h2,
:is(.gift-card-page, .giftcard-page, main.gift-card, main.giftcard, .gift-card-wrapper, .giftcard-wrapper) h3{
  color: var(--k-text);
  letter-spacing: -0.02em;
}

:is(.gift-card-page, .giftcard-page, main.gift-card, main.giftcard, .gift-card-wrapper, .giftcard-wrapper) p{
  color: var(--k-muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Hediye Kartı Hero (başlık + alt metin + CTA)
--------------------------------------------------------- */
:is(.gift-card-hero, .giftcard-hero, .gift-card-header, .giftcard-header, .gift-hero){
  background:
    radial-gradient(1200px 500px at 12% 10%, rgba(217,42,41,.12), transparent 55%),
    radial-gradient(1000px 400px at 85% 20%, rgba(0,0,0,.08), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfbfc);
  border: 1px solid var(--k-border-2);
  border-radius: calc(var(--k-radius) + 6px);
  box-shadow: var(--k-shadow-soft);
  padding: 28px 28px 22px;
}

:is(.gift-card-hero, .giftcard-hero, .gift-card-header, .giftcard-header, .gift-hero) > :first-child{
  margin-top: 0;
}

/* Küçük üst etiket: "Hediye Kartı" gibi */
:is(.gift-card-kicker, .giftcard-kicker, .gift-kicker, .page-kicker){
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.70);
  margin-bottom: 10px;
}

:is(.gift-card-kicker, .giftcard-kicker, .gift-kicker, .page-kicker)::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--k-accent);
  box-shadow: 0 0 0 4px rgba(217,42,41,.12);
}

/* Başlık */
:is(.gift-card-title, .giftcard-title, .gift-title) {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  margin: 0 0 10px;
}

/* Alt satır: "Dijital gönderim • Anında teslim • ..." */
:is(.gift-card-meta, .giftcard-meta, .gift-meta, .gift-highlights){
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 18px;
  padding: 0;
  list-style: none;
}

:is(.gift-card-meta, .giftcard-meta, .gift-meta, .gift-highlights) > *{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--k-border-2);
  border-radius: 999px;
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.72);
  font-size: 13px;
  font-weight: 600;
}

/* CTA link/button: "Hediye Kartı Al / Tasarlamaya Başla" */
:is(.gift-card-cta, .giftcard-cta, .gift-cta, a.gift-card-cta, a.giftcard-cta){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(217,42,41,.22);
  background: linear-gradient(180deg, rgba(217,42,41,.12), rgba(217,42,41,.06));
  color: var(--k-accent-dark);
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(217,42,41,.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

:is(.gift-card-cta, .giftcard-cta, .gift-cta, a.gift-card-cta, a.giftcard-cta)::after{
  content:"›";
  font-size: 18px;
  line-height: 1;
  opacity: .9;
}

:is(.gift-card-cta, .giftcard-cta, .gift-cta, a.gift-card-cta, a.giftcard-cta):hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(217,42,41,.14);
  background: linear-gradient(180deg, rgba(217,42,41,.16), rgba(217,42,41,.08));
}

:is(.gift-card-cta, .giftcard-cta, .gift-cta, a.gift-card-cta, a.giftcard-cta):active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(217,42,41,.12);
}

:is(.gift-card-cta, .giftcard-cta, .gift-cta, a.gift-card-cta, a.giftcard-cta):focus-visible{
  outline: none;
  box-shadow: var(--k-ring), 0 14px 28px rgba(217,42,41,.14);
}

/* ---------------------------------------------------------
   Tutar butonları (25₺ / 50₺ / 100₺ / 250₺)
--------------------------------------------------------- */
:is(.gift-amounts, .giftcard-amounts, .gift-card-amounts, .amounts-row){
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

:is(.gift-amounts, .giftcard-amounts, .gift-card-amounts, .amounts-row) :is(button, a, input[type="button"]){
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--k-border);
  background: #fff;
  color: rgba(0,0,0,.82);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  text-decoration: none;
}

:is(.gift-amounts, .giftcard-amounts, .gift-card-amounts, .amounts-row) :is(button, a, input[type="button"]):hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.20);
  box-shadow: 0 12px 24px rgba(0,0,0,.09);
  background: rgba(0,0,0,.02);
}

:is(.gift-amounts, .giftcard-amounts, .gift-card-amounts, .amounts-row) :is(button, a, input[type="button"]):active{
  transform: translateY(0);
}

/* seçili state (varsa class eklenmişse yakalar) */
:is(.gift-amounts, .giftcard-amounts, .gift-card-amounts, .amounts-row) :is(.active, .selected, [aria-pressed="true"]){
  border-color: rgba(217,42,41,.35) !important;
  background: linear-gradient(180deg, rgba(217,42,41,.14), rgba(217,42,41,.06)) !important;
  color: var(--k-accent-dark) !important;
  box-shadow: 0 14px 28px rgba(217,42,41,.13) !important;
}

/* ---------------------------------------------------------
   Gift code / küçük bilgi bloğu (KANO STORE / GIFT-XXXX...)
--------------------------------------------------------- */
:is(.gift-code-card, .giftcard-code, .gift-card-info, .giftcard-info, .gift-card-mini){
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--k-border-2);
  border-radius: var(--k-radius);
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
  padding: 16px 16px 14px;
}

:is(.gift-code-card, .giftcard-code, .gift-card-info, .giftcard-info, .gift-card-mini) :is(.brand, .title, .store){
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(0,0,0,.82);
}

:is(.gift-code-card, .giftcard-code, .gift-card-info, .giftcard-info, .gift-card-mini) :is(.code, .gift-code){
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.20);
  background: rgba(0,0,0,.02);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  color: rgba(0,0,0,.78);
}

/* ---------------------------------------------------------
   Trend Koleksiyonlar (pill slider + oklar)
--------------------------------------------------------- */
:is(.trend-collections, .trend-collection-section, .collections-trending, .trend-section){
  margin-top: 28px;
}

:is(.trend-collections, .trend-collection-section, .collections-trending, .trend-section) :is(h2, .title){
  font-size: 26px;
  margin: 0 0 14px;
}

/* Dış çerçeve: pill bar + oklar */
:is(.trend-bar, .trend-nav-wrap, .collections-bar, .trend-controls){
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ok butonları */
:is(.trend-nav, .trend-arrow, .collections-arrow, .trend-btn){
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--k-border-2);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

:is(.trend-nav, .trend-arrow, .collections-arrow, .trend-btn):hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

:is(.trend-nav, .trend-arrow, .collections-arrow, .trend-btn):active{
  transform: translateY(0);
}

:is(.trend-nav, .trend-arrow, .collections-arrow, .trend-btn):focus-visible{
  outline: none;
  box-shadow: var(--k-ring), 0 14px 30px rgba(0,0,0,.10);
}

/* Ok ikonları yoksa metinle de güzel dursun */
:is(.trend-nav, .trend-arrow, .collections-arrow, .trend-btn) span,
:is(.trend-nav, .trend-arrow, .collections-arrow, .trend-btn) i{
  font-size: 18px;
  line-height: 1;
  color: rgba(0,0,0,.75);
}

/* Pill container */
:is(.trend-pills, .trend-pill-row, .collections-pills, .collections-row){
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
:is(.trend-pills, .trend-pill-row, .collections-pills, .collections-row)::-webkit-scrollbar{ height: 0; }

/* Pill'ler (a veya button olabilir) */
:is(.trend-pills, .trend-pill-row, .collections-pills, .collections-row) :is(a, button){
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--k-border-2);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.82);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

:is(.trend-pills, .trend-pill-row, .collections-pills, .collections-row) :is(a, button):hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

/* aktif pill (varsa) */
:is(.trend-pills, .trend-pill-row, .collections-pills, .collections-row) :is(.active, .selected, [aria-current="page"], [aria-pressed="true"]){
  border-color: rgba(217,42,41,.32) !important;
  background: linear-gradient(180deg, rgba(217,42,41,.14), rgba(217,42,41,.06)) !important;
  color: var(--k-accent-dark) !important;
  box-shadow: 0 14px 28px rgba(217,42,41,.12) !important;
}

/* ---------------------------------------------------------
   Responsive polish
--------------------------------------------------------- */
@media (max-width: 900px){
  :is(.gift-card-hero, .giftcard-hero, .gift-card-header, .giftcard-header, .gift-hero){
    padding: 20px;
  }
}

@media (max-width: 600px){
  :is(.gift-card-page, .giftcard-page, main.gift-card, main.giftcard, .gift-card-wrapper, .giftcard-wrapper){
    padding: 18px 14px 44px;
  }

  :is(.trend-nav, .trend-arrow, .collections-arrow, .trend-btn){
    width: 40px;
    height: 40px;
  }
}
* ============================================================
   KANO PRO POLISH (append-only)
   Hedef: Hediye Kartı / Trend Koleksiyonlar alanını daha premium
   - Mevcut HTML'e dokunmadan, sadece daha iyi spacing/typography/UI
   ============================================================ */

/* Global: daha "app" hissi (çok agresif değil) */
html { text-rendering: optimizeLegibility; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Yeni tasarım değişkenleri (mevcut :root'u BOZMADAN sadece ek) */
:root{
  --kano-bg: #f6f7f8;
  --kano-surface: #ffffff;
  --kano-text: #111111;
  --kano-muted: rgba(17,17,17,.68);
  --kano-border: rgba(17,17,17,.10);
  --kano-border-strong: rgba(17,17,17,.16);
  --kano-shadow-sm: 0 1px 0 rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06);
  --kano-shadow-md: 0 2px 0 rgba(17,17,17,.04), 0 14px 40px rgba(17,17,17,.10);
  --kano-radius: 18px;
  --kano-radius-sm: 12px;
  --kano-focus: 0 0 0 4px rgba(217,42,41,.18);
  --kano-cta: var(--pink-main, #D92A29);
  --kano-cta-dark: var(--pink-dark, #B41F1F);
}}
* ============================================================
   KANO PRO POLISH (append-only)
   Hedef: Hediye Kartı / Trend Koleksiyonlar alanını daha premium
   - Mevcut HTML'e dokunmadan, sadece daha iyi spacing/typography/UI
   ============================================================ */

/* Global: daha "app" hissi (çok agresif değil) */
html { text-rendering: optimizeLegibility; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Yeni tasarım değişkenleri (mevcut :root'u BOZMADAN sadece ek) */
:root{
  --kano-bg: #f6f7f8;
  --kano-surface: #ffffff;
  --kano-text: #111111;
  --kano-muted: rgba(17,17,17,.68);
  --kano-border: rgba(17,17,17,.10);
  --kano-border-strong: rgba(17,17,17,.16);
  --kano-shadow-sm: 0 1px 0 rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06);
  --kano-shadow-md: 0 2px 0 rgba(17,17,17,.04), 0 14px 40px rgba(17,17,17,.10);
  --kano-radius: 18px;
  --kano-radius-sm: 12px;
  --kano-focus: 0 0 0 4px rgba(217,42,41,.18);
  --kano-cta: var(--pink-main, #D92A29);
  --kano-cta-dark: var(--pink-dark, #B41F1F);
}

/* =========================
   1) Gift Custom section (index'teki blok)
   ========================= */

.gift-custom-section{
  background:
    radial-gradient(1200px 520px at 15% 20%, rgba(217,42,41,.06), transparent 55%),
    radial-gradient(900px 480px at 85% 60%, rgba(17,17,17,.05), transparent 58%),
    var(--kano-bg);
  border-top: 1px solid rgba(17,17,17,.06);
  border-bottom: 1px solid rgba(17,17,17,.06);
}

.gift-custom-inner{
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
}

.gift-custom-image img{
  border-radius: var(--kano-radius);
  box-shadow: var(--kano-shadow-md);
  border: 1px solid rgba(17,17,17,.08);
}

.gift-custom-content{
  padding: 14px 6px;
}

.gift-custom-content h2{
  color: var(--kano-text);
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.06;
  margin-bottom: 14px;
}

.gift-custom-content p{
  color: var(--kano-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 62ch;
}

.gift-custom-btn{
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: linear-gradient(180deg, #fff, #f7f7f7);
  box-shadow: var(--kano-shadow-sm);
  padding: 11px 20px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.gift-custom-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--kano-shadow-md);
  border-color: rgba(17,17,17,.20);
  background: linear-gradient(180deg, #fff, #f2f2f2);
}

.gift-custom-btn:active{
  transform: translateY(0px);
  box-shadow: 0 1px 0 rgba(17,17,17,.04), 0 10px 28px rgba(17,17,17,.08);
}

.gift-custom-btn:focus-visible{
  outline: none;
  box-shadow: var(--kano-shadow-md), var(--kano-focus);
}

/* Mobilde görselin aşırı “full” görünmesini toparla */
@media (max-width: 900px){
  .gift-custom-inner{ padding-top: 34px; padding-bottom: 40px; }
  .gift-custom-content{ padding: 4px 2px; }
  .gift-custom-image img{ border-radius: 16px; }
}

/* =========================
   2) Hediye Kartı sayfası (screenshot’taki blok)
   HTML class isimlerini bilmiyoruz → geniş ama güvenli selector seti.
   ========================= */

/* Sayfa wrapper’ı muhtemel isimler (herhangi biri varsa devreye girer) */
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti, .giftcard-wrap, .gift-card-wrap){
  color: var(--kano-text);
}

/* Üst hero: başlık / alt metin */
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti) h1{
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 72px);
  margin: 10px 0 14px;
}

:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti) p{
  color: var(--kano-muted);
  line-height: 1.6;
  font-size: 16px;
  max-width: 78ch;
}

/* “Dijital gönderim • Anında teslim...” satırı */
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti) :where(.meta, .sub, .subtitle, .gift-meta, .gift-subtitle, .desc){
  color: rgba(17,17,17,.62);
  font-size: 14px;
}

/* CTA linki (Hediye Kartı Al / Tasarlamaya Başla) */
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti) a{
  text-decoration: none;
}

:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti) a:focus-visible{
  outline: none;
  box-shadow: var(--kano-focus);
  border-radius: 10px;
}

/* CTA’yı “buton” gibi göstermek için muhtemel sınıflar */
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(.gift-cta, .gift-cta-link, .gift-link, .cta, .primary-link){
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.12);
  background: linear-gradient(180deg, #fff, #f7f7f7);
  box-shadow: var(--kano-shadow-sm);
  color: var(--kano-text);
  font-weight: 600;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(.gift-cta, .gift-cta-link, .gift-link, .cta, .primary-link):hover{
  transform: translateY(-1px);
  box-shadow: var(--kano-shadow-md);
  border-color: rgba(17,17,17,.20);
}

/* Miktar pill’leri (25₺ / 50₺ / 100₺ / 250₺) için geniş selector */
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(.amounts, .gift-amounts, .gift-values, .value-pills, .gift-pills, .pill-row, .price-row, .price-pills){
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(.amounts, .gift-amounts, .gift-values, .value-pills, .gift-pills, .pill-row, .price-row, .price-pills)
:where(button, a){
  appearance: none;
  border: 1px solid rgba(17,17,17,.14);
  background: #fff;
  color: var(--kano-text);
  border-radius: 999px;
  padding: 10px 14px;
  min-width: 64px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(17,17,17,.04);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(.amounts, .gift-amounts, .gift-values, .value-pills, .gift-pills, .pill-row, .price-row, .price-pills)
:where(button, a):hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.22);
  box-shadow: var(--kano-shadow-sm);
}

:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(.amounts, .gift-amounts, .gift-values, .value-pills, .gift-pills, .pill-row, .price-row, .price-pills)
:where(button, a):focus-visible{
  outline: none;
  box-shadow: var(--kano-shadow-sm), var(--kano-focus);
}

:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(.amounts, .gift-amounts, .gift-values, .value-pills, .gift-pills, .pill-row, .price-row, .price-pills)
:where(.active, .is-active, [aria-current="true"], [aria-selected="true"]){
  border-color: rgba(217,42,41,.38);
  background: rgba(217,42,41,.10);
}

/* Kod input’u / uzun kutu */
:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(input[type="text"], input[type="email"], input[type="number"], input[type="search"], textarea){
  width: min(820px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.85);
  padding: 14px 16px;
  font-size: 16px;
  color: var(--kano-text);
  box-shadow: var(--kano-shadow-sm);
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

:where(.gift-card, .giftcard, .gift-card-page, .giftcard-page, .page-gift-card, .page-hediye-karti, .hediye-karti)
:where(input[type="text"], input[type="email"], input[type="number"], input[type="search"], textarea):focus{
  outline: none;
  background: #fff;
  border-color: rgba(217,42,41,.35);
  box-shadow: var(--kano-shadow-md), var(--kano-focus);
}

/* =========================
   3) Trend Koleksiyonlar (kategori pill’leri + oklar)
   ========================= */

/* Muhtemel wrapper’lar: "trend", "collection", "carousel" gibi */
:where(.trend-collections, .trend-collection, .collections, .collection-section, .collection-carousel, .trend-section){
  padding-top: 6px;
}

/* Başlık */
:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section) h2,
:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section) h3{
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--kano-text);
}

/* Kategori “pill” linkleri (Yeni Yıl / Minimal / Retro / Meme / Spor / Aşk) */
:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section)
:where(.tabs, .tab-row, .pill-row, .category-row, .categories, .collections-tabs, .collections-pills, .trend-pills)
:where(a, button){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.12);
  background: #fff;
  color: rgba(17,17,17,.82);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(17,17,17,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section)
:where(.tabs, .tab-row, .pill-row, .category-row, .categories, .collections-tabs, .collections-pills, .trend-pills)
:where(a, button):hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.20);
  box-shadow: var(--kano-shadow-sm);
  color: var(--kano-text);
}

:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section)
:where(.tabs, .tab-row, .pill-row, .category-row, .categories, .collections-tabs, .collections-pills, .trend-pills)
:where(.active, .is-active, [aria-current="true"], [aria-selected="true"]){
  border-color: rgba(217,42,41,.36);
  background: rgba(217,42,41,.10);
  color: var(--kano-text);
}

/* Oklar (küçük daireler) */
:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section)
:where(.nav, .arrow, .slider-arrow, .carousel-arrow, .prev, .next, .left, .right, .collection-prev, .collection-next)
:where(button){
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.92);
  box-shadow: var(--kano-shadow-sm);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section)
:where(.nav, .arrow, .slider-arrow, .carousel-arrow, .prev, .next, .left, .right, .collection-prev, .collection-next)
:where(button):hover{
  transform: translateY(-1px);
  box-shadow: var(--kano-shadow-md);
  border-color: rgba(17,17,17,.22);
}

/* Eğer oklar sadece metin (‹ ›) ise ortala */
:where(.trend-collections, .trend-collection, .collections, .collection-section, .trend-section)
:where(.nav, .arrow, .slider-arrow, .carousel-arrow, .prev, .next, .left, .right, .collection-prev, .collection-next)
:where(button) > *{
  display: inline-block;
  transform: translateY(-1px);
  font-size: 20px;
  line-height: 1;
}

/* =========================
   4) Erişilebilirlik / mikro detaylar
   ========================= */

/* Mouse ile basılınca mavi outline görmek istemiyorsan (ama klavyede kalsın) */
:where(button, a, input, textarea):focus{ outline: none; }
:where(button, a, input, textarea):focus-visible{ outline: none; }

/* Reduced motion kullanıcılarına saygı */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}
:root {
  --pink-main: #D92A29;
  --pink-dark: #B41F1F;
  --bg-light: #F5F5F5;
  --text-main: #222222;
  --text-muted: #6F6F6F;
}

/* HEADER GENEL */

.site-header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.header-logo a {
  font-size: 24px;
  font-weight: 800;
  text-decoration: none;
  color: var(--pink-dark);
}

/* hesap + cart */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-link {
  font-size: 14px;
  text-decoration: none;
  color: var(--text-main);
}

.header-link:hover {
  text-decoration: underline;
}

.header-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--pink-dark);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.cart-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pink-dark);
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SHOP BUTONU + KÜÇÜK SEARCH BARI */

.header-ctrl-bar {
  background: linear-gradient(90deg, var(--pink-main), var(--pink-dark));
}

.header-ctrl-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
}

/* sol: shop butonu */

.shop-main-btn {
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.shop-main-btn:hover {
  background: #ffe7f3;
}

/* sağ: küçük search */

.header-search-small {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;   /* küçük */
  width: 100%;
}

.header-search-small input {
  flex: 1;
  padding: 6px 9px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
}

.header-search-small button {
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: var(--pink-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.header-search-small button:hover {
  background: #ffe7f3;
}

/* HERO SLIDER */

.hero-slider {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.hero-slider-inner {
  position: relative;
  max-width: 1400px;
  height: 420px;
  margin: 0 auto;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide.active {
  opacity: 1;
}

/* overlay: sol alt yazı + butonlar */

.hero-overlay {
  position: absolute;
  left: 32px;
  bottom: 32px;
  max-width: 380px;
  padding: 16px 18px;
  background: rgba(0,0,0,0.45);
  border-radius: 16px;
  color: #fff;
  backdrop-filter: blur(5px);
}

.hero-overlay h1 {
  font-size: 26px;
  margin-bottom: 8px;
}

.hero-overlay p {
  font-size: 14px;
  margin-bottom: 12px;
  color: #f5f5f5;
}

/* butonlar */

.hero-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.hero-btn-primary {
  background: var(--pink-main);
  color: #fff;
}

.hero-btn-ghost {
  background: #fff;
  color: var(--pink-dark);
}

/* slider okları */

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-prev {
  left: 12px;
}

.hero-next {
  right: 12px;
}

/* slider dotları */

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}

.hero-dots .dot.active {
  background: #fff;
}

/* mobile */

@media (max-width: 768px) {
  .hero-slider-inner {
    height: 300px;
  }

  .hero-overlay {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }

  .hero-overlay h1 {
    font-size: 20px;
  }

  .header-ctrl-inner {
    flex-direction: row;
  }
}

/* ===== ÜST ŞERİT (Free returns...) AYARLARI ===== */

.top-info-bar {
  background: var(--pink-main);  /* pembe arka plan */
  color: #000000;                /* siyah yazı */
}

.top-info-inner {
  justify-content: center;       /* ortala */
  font-size: 16px;               /* ~%250 daha büyük için yükselttik */
  padding: 16px 0;               /* yükseklik büyüsün diye */
}

.top-info-inner a {
  color: #000000;
  text-decoration: underline;
}

.top-info-inner a:hover {
  text-decoration: none;
}

.dot-separator {
  opacity: 0.9;
}

/* ===== MYSPREAD BAR ARKA PLAN (hafif gri) ===== */

.site-header {
  background: #f5f5f7;           /* çok açık gri */
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* ===== SEARCH (küçük bar) 2x daha büyük + dikdörtgen + ikon ===== */

.header-search-small {
  max-width: 260px;
}

.header-search-small input {
  flex: 1;
  padding: 12px 14px;            /* %100 daha büyük gibi */
  border-radius: 10px;           /* iPhone 6 kıvrımı gibi */
  border: none;
  font-size: 16px;
}

.header-search-small button {
  position: relative;
  padding: 12px 32px 12px 16px;  /* sağa ikon için boşluk */
  border-radius: 10px;
  border: none;
  background: #ffffff;
  color: var(--pink-dark);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* sağ tarafta arama ikonu */
.header-search-small button::after {
  content: "🔍";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* hover efekti */
.header-search-small button:hover {
  background: #ffe7f3;
}

/* ===== CREATE NOW / SHOP NOW butonları 2x + dikdörtgen ===== */

.hero-buttons .btn {
  border-radius: 10px;           /* dikdörtgen + curve */
  padding: 12px 24px;            /* %100 daha büyük hissi */
  font-size: 16px;
}

/* görünüşler aynı kalsın, sadece yeni boyut / şekle uysun */

.hero-btn-primary {
  background: var(--pink-main);
  color: #ffffff;
  border: none;
}

.hero-btn-ghost {
  background: #ffffff;
  color: var(--pink-dark);
  border: 1px solid var(--pink-dark);
}

/* === ÜST PEMBE ŞERİT AYARLARI (ORTALAMA + BOLD) === */

/* Yazıları tam ortaya hizala */
.top-info-inner {
  justify-content: center;
  text-align: center;
}

/* Nokta ayraçlar hariç span'leri bold yap (Free returns / Printed on demand) */
.top-info-inner span:not(.dot-separator) {
  font-weight: 700;
}

/* Link yine siyah kalsın */
.top-info-inner a {
  color: #000000;
  text-decoration: underline;
}
.top-info-inner a:hover {
  text-decoration: none;
}

/* === SHOP BUTONU (BEYAZ ARKA PLAN + DAHA BÜYÜK + FARKLI FONT) === */

.shop-main-btn {
  background: #ffffff; /* arka plan beyaz */
  color: var(--pink-dark);
  font-size: 18px;     /* biraz daha büyük */
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-family: "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.shop-main-btn:hover {
  background: #ffe7f3;
}

/* === SEARCH BUTONU SAĞA TAŞMA DÜZELTME === */

/* Formu biraz daralt, sağa taşmasın */
.header-search-small {
  max-width: 230px; /* daha küçük, içeri çekilmiş */
}

/* Input biraz küçülsün */
.header-search-small input {
  padding: 10px 12px;
  font-size: 14px;
}

/* Button padding'ini ve ikonu ayarla ki dışarı taşmasın */
.header-search-small button {
  padding: 10px 26px 10px 14px;  /* önceki 12/32 yerine biraz küçülttük */
  font-size: 14px;
}

/* İkon aynı kalsın ama buton daraldığı için taşma yapmayacak */
.header-search-small button::after {
  right: 8px;
  font-size: 16px;
}
/* === 1) ÜSTTE ve SOLDaKİ BEYAZ BOŞLUKLARI YOK ET === */
html,
body {
  margin: 0;
  padding: 0;
}

/* === 2) SLIDER GENİŞLİĞİNİ EKRANA UYDUR (SCROLL BAR GİTSİN) === */
.hero-slider-inner {
  max-width: 1200px;  /* 1400 çok genişti, küçülttük */
  width: 100%;
  margin: 0 auto;
}

/* === 3) SEARCH FORMU İÇERİ ÇEK, TAŞMASIN === */
.header-search-small {
  max-width: 200px;      /* biraz daha dar */
  flex: 0 0 200px;
}

.header-search-small input {
  padding: 8px 10px;
  font-size: 13px;
}

.header-search-small button {
  padding: 8px 24px 8px 12px;  /* sağdaki boşluğu biraz küçült */
  font-size: 13px;
}

.header-search-small button::after {
  right: 6px;
  font-size: 14px;
}

/* === 4) SHOP BUTONU SATIRINI BİRAZ DAHA TOPARLA === */
.header-ctrl-inner {
  padding: 8px 16px;          /* her iki tarafta 16px boşluk */
  gap: 16px;
}
/* === 1) ÜSTTE ve SOLDaKİ BEYAZ BOŞLUKLARI YOK ET === */
html,
body {
  margin: 0;
  padding: 0;
}

/* === 2) SLIDER GENİŞLİĞİNİ EKRANA UYDUR (SCROLL BAR GİTSİN) === */
.hero-slider-inner {
  max-width: 1200px;  /* 1400 çok genişti, küçülttük */
  width: 100%;
  margin: 0 auto;
}

/* === 3) SEARCH FORMU İÇERİ ÇEK, TAŞMASIN === */
.header-search-small {
  max-width: 200px;      /* biraz daha dar */
  flex: 0 0 200px;
}

.header-search-small input {
  padding: 8px 10px;
  font-size: 13px;
}

.header-search-small button {
  padding: 8px 24px 8px 12px;  /* sağdaki boşluğu biraz küçült */
  font-size: 13px;
}

.header-search-small button::after {
  right: 6px;
  font-size: 14px;
}

/* === 4) SHOP BUTONU SATIRINI BİRAZ DAHA TOPARLA === */
.header-ctrl-inner {
  padding: 8px 16px;          /* her iki tarafta 16px boşluk */
  gap: 16px;
}
/* === ÜST PROMO BAR ZATEN TAM ORTALI VE PEMBE, O KALSIN === */

/* Gri logo bar (MySpread satırı) Spreadshirt gibi çok açık gri olsun */
.site-header {
  background: #f5f5f5;
  box-shadow: none;
  border-bottom: 1px solid #e0e0e0;
}

/* İçindeki logo + sağdaki account kısmı */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
}

/* === CREATE / SHOP / PRO / B2B + SEARCH SATIRI === */

.nav-search-bar {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.nav-search-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 24px;
}

/* Sol taraftaki nav linkleri */
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 18px;
}

.nav-link {
  text-decoration: none;
  color: #3a3a3a;
}

.nav-link.active {
  font-weight: 600;
}

/* B2B sarı kutu */
.nav-b2b {
  background: #ffc400;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
}

/* Sağdaki büyük search bar */
.header-search-main {
  flex: 0 0 420px;          /* yaklaşık Spreadshirt genişliği */
  max-width: 420px;
  position: relative;
}

.header-search-main input {
  width: 100%;
  padding: 9px 40px 9px 12px;  /* sağda ikona yer */
  border: 1px solid #bdbdbd;
  border-radius: 3px;          /* hafif curve, iPhone 6 hissi */
  font-size: 14px;
  outline: none;
}

.header-search-main input:focus {
  border-color: #000;
}

/* Butonun kendisi görünmez, sadece ikon için kullanıyoruz */
.header-search-main button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Search ikonunu çizelim (basit büyüteç) */
.header-search-main button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #555;
}

.header-search-main button::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background: #555;
  right: -4px;
  bottom: -1px;
  transform: rotate(45deg);
}

/* Sayfanın kenar boşluklarını sıfırla, beyaz boşluk kalmasın */
html, body {
  margin: 0;
  padding: 0;
}

/* Responsive: ekran daralınca nav üstte, search altta olsun */
@media (max-width: 768px) {
  .nav-search-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-search-main {
    flex: 1 0 100%;
    max-width: 100%;
    width: 100%;
  }
}
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-main);
  background: #f4f4f7;
}
/* === CREATE / SHOP / PRO / B2B + SEARCH ORTADA, YAKIN VE BÜYÜK === */

.nav-search-inner {
  justify-content: center;    /* ortada buluşsunlar */
  gap: 56px;                  /* aralarındaki mesafe: bir arama barına yakın */
  padding: 12px 0;
}

/* Nav linkleri: biraz büyük ve Roboto ile */
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;            /* bir tık daha büyük */
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nav-link {
  text-decoration: none;
  color: #3a3a3a;
  font-weight: 400;
}

.nav-link.active {
  font-weight: 500;
}

/* B2B etiketi aynı fontla */
.nav-b2b {
  background: #ffc400;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Sağdaki büyük search bar: biraz daha büyük ve Roboto ile */
.header-search-main {
  flex: 0 0 460px;            /* genişliği büyüttük */
  max-width: 460px;
}

.header-search-main input {
  width: 100%;
  padding: 11px 42px 11px 14px;   /* boyu büyüdü */
  border: 1px solid #bdbdbd;
  border-radius: 3px;
  font-size: 15px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ikon aynı kalsın ama biraz daha ince görünüm için ufak dokunuş */
.header-search-main button::before {
  border: 2px solid #555;
}
.header-search-main button::after {
  width: 9px;
  height: 2px;
  background: #555;
}
/* LOGO alanı */

.header-logo a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* sadece logo resmi kullanıyorsan bile bu kalsın */
.header-logo img {
  height: 32px;          /* çok küçük büyük gelirse 40 yaparsın */
  display: block;
}

/* logo yanında yazı da kullanıyorsan */
.logo-text {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #e91e63;
}
.header-logo a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.header-logo img {
  height: 32px;   /* küçük geldiyse 40-48 yaparsın */
  display: block;
}
/* === SLIDER GENEL === */

.hero-slider {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.hero-slider-inner {
  position: relative;
  max-width: 1200px;
  width: 100%;
  height: 420px;
  margin: 0 auto;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide.active {
  opacity: 1;
}

/* Overlay (yazı + butonlar) altta solda kalsın */
.hero-overlay {
  position: absolute;
  left: 60px;
  bottom: 60px;
  max-width: 420px;
  color: #fff;
}

/* === OK BUTONLAR (Spreadshirt tarzı) === */

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-nav span {
  font-size: 20px;
  line-height: 1;
  color: #444;
}

.hero-prev {
  right: 80px;   /* iki buton yan yana sağda */
}

.hero-next {
  right: 30px;
}

.hero-nav:hover {
  background: #ffffff;
}

/* === NOKTALAR (alt ortada) === */

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #aaa;
  opacity: 0.5;
  cursor: pointer;
}

.hero-dot.active {
  background: #ffffff;
  opacity: 1;
}

/* responsive yükseklik */
@media (max-width: 768px) {
  .hero-slider-inner {
    height: 300px;
  }

  .hero-overlay {
    left: 20px;
    bottom: 30px;
    max-width: 80%;
  }

  .hero-prev {
    right: 70px;
  }

  .hero-next {
    right: 20px;
  }
}
/* === KATEGORİ PILL'LER + BESTSELLERS === */

.home-categories-products {
  padding: 40px 0 56px;
}

/* Üst Create Now + pill bar */
.home-category-bar {
  margin-bottom: 28px;
}

.home-category-label {
  display: inline-block;
  margin-right: 20px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #333;
  vertical-align: middle;
}

.home-category-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  vertical-align: middle;
}

/* kategori pill butonları */
.cat-pill {
  padding: 6px 18px;
  border-radius: 3px;                 /* search bar ile aynı hissiyat */
  border: 1px solid #bdbdbd;
  background: #ffffff;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}

.cat-pill.active {
  border-color: #111;
}

.cat-pill:hover {
  background: #f5f5f5;
}

/* Bestsellers başlık satırı */
.home-products-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 10px;
}

.home-products-header h2 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #222;
}

.home-show-all {
  font-size: 14px;
  color: #444;
  text-decoration: underline;
}

/* Ürün row + sağdaki ok */
.home-products-carousel {
  position: relative;
}

.home-products-row {
  display: flex;
  gap: 24px;
  overflow-x: auto;              /* yatay kaydırma */
  padding-bottom: 8px;
  scroll-behavior: smooth;
}

/* scrollbar'ı gizle (istemiyorsan silebilirsin) */
.home-products-row::-webkit-scrollbar {
  height: 0;
}
.home-products-row {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ürün kartları */
.product-card {
  min-width: 260px;
  max-width: 260px;
  flex: 0 0 auto;
  background: #f9f9f9;
  border-radius: 3px;
  overflow: hidden;
  padding-bottom: 14px;
}

.product-image {
  background: #eeeeee;
}

.product-image img {
  width: 100%;
  display: block;
}

.product-title {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin: 10px 10px 2px;
}

.product-subtitle {
  font-size: 13px;
  color: #666;
  margin: 0 10px 8px;
}

.product-price {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin: 0 10px;
}

/* sağdaki yuvarlak ok (ürün row slider hissi) */
.home-products-next {
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-products-next span {
  font-size: 22px;
  line-height: 1;
  color: #444;
}

/* küçük ekranlarda grid alta inip ok gerekmez */
@media (max-width: 768px) {
  .home-category-label {
    display: block;
    margin-bottom: 12px;
  }

  .home-products-carousel {
    padding-right: 0;
  }

  .home-products-next {
    display: none;
  }

  .product-card {
    min-width: 70%;
    max-width: 70%;
  }
}
/* CREATE NOW ve BESTSELLERS boyut + sağa kaydırma */
@media (min-width: 769px) {

  /* hafif sağa al */
  .home-category-bar,
  .home-products-header {
    padding-left: 40px;   /* çok gelirse 30'a düşür, az gelirse 50 yap */
  }

  /* Create Now biraz büyüsün */
  .home-category-label {
    font-size: 24px;      /* eskisi 22 idi */
    font-weight: 400;
  }

  /* Bestsellers da büyüsün */
  .home-products-header h2 {
    font-size: 26px;      /* eskisi 24 idi */
    font-weight: 500;
  }
}
/* === ÜRÜN KARTLARINI BÜYÜT + ORTADAN BAŞLAT === */
@media (min-width: 1024px) {

  /* row’u biraz içerden başlat, sola yapışmasın */
  .home-products-row {
    padding-left: 60px;   /* gerekirse 50–70 arası oynarız */
    padding-right: 80px;  /* sağdaki oka yer kalsın */
    gap: 28px;
  }

  /* kartları büyüt */
  .product-card {
    min-width: 310px;
    max-width: 310px;
    background: #ffffff;          /* daha temiz beyaz kart */
    border-radius: 3px;
    border: 1px solid #eeeeee;
  }

  .product-image {
    background: #f3f3f3;
  }

  .product-image img {
    width: 100%;
    height: 320px;                /* daha uzun görsel */
    object-fit: cover;
    display: block;
  }

  /* yazı boyutlarını da hafif büyütelim */
  .product-title {
    font-size: 16px;
    margin: 12px 12px 3px;
  }

  .product-subtitle {
    font-size: 13px;
    margin: 0 12px 8px;
  }

  .product-price {
    font-size: 17px;
    margin: 0 12px 12px;
  }
}
/* === GIFT CUSTOMIZATION BLOĞU === */

.gift-custom-section {
  background: #f3f3f3;          /* hafif gri arka plan */
  padding: 48px 0 56px;
}

.gift-custom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* sol büyük görsel */
.gift-custom-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* sağdaki yazı bloğu */
.gift-custom-content h2 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  color: #333;
  margin-bottom: 18px;
}

.gift-custom-content p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 14px;
}

.gift-custom-content .gift-lead {
  font-weight: 500;
}

/* dikdörtgen CREATE NOW butonu */
.gift-custom-btn {
  margin-top: 12px;
  padding: 10px 26px;
  border-radius: 4px;                 /* köşeler hafif kavisli */
  border: 1px solid #111;
  background: #ffffff;
  color: #111;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.gift-custom-btn:hover {
  background: #f0f0f0;
}

/* responsive: mobilde alt alta gelsin */
@media (max-width: 900px) {
  .gift-custom-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .gift-custom-content h2 {
    font-size: 30px;
  }
}
/* === GIFT BLOĞU DÜZELTME === */

/* Masaüstünde: GÖRSEL SOLDa, YAZI SAĞda kalsın */
@media (min-width: 900px) {
  .gift-custom-inner {
    /* komple bloğu biraz içeri alalım, resim sola yapışmasın */
    padding-left: 80px;   /* çok gelirse 70, az gelirse 90 yaparsın */
    padding-right: 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); /* resim + yazı oranı */
    gap: 48px;
  }

  /* sırayı eski haline çevir: önce resim, sonra yazı */
  .gift-custom-image {
    order: 1;
  }

  .gift-custom-content {
    order: 2;
  }
}
/* === TRUSTPILOT BENZERİ YORUM BLOĞU === */

.trust-section {
  padding: 56px 0 64px;
  background: #ffffff;
}

.trust-title {
  text-align: center;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #333;
  margin-bottom: 32px;
}

.trust-carousel {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 24px;
}

.trust-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 8px 40px;
  scroll-behavior: smooth;
}

/* scrollbar gizle */
.trust-row::-webkit-scrollbar {
  height: 0;
}
.trust-row {
  scrollbar-width: none;
}

/* kartlar */
.trust-card {
  min-width: 260px;
  max-width: 260px;
  flex: 0 0 auto;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
  padding: 18px 18px 14px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.trust-stars {
  color: #00b67a; /* yeşil yıldızlar */
  font-size: 16px;
  margin-bottom: 10px;
}

.trust-headline {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  margin-bottom: 8px;
}

.trust-text {
  font-size: 14px;
  color: #444;
  margin-bottom: 14px;
}

.trust-author {
  font-size: 13px;
  color: #666;
}

/* ok butonları */
.trust-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.trust-prev {
  left: 0;
}

.trust-next {
  right: 0;
}

/* alt yazı */
.trust-summary {
  text-align: center;
  font-size: 14px;
  color: #444;
  margin-bottom: 8px;
}

.trust-summary a {
  color: #444;
  text-decoration: underline;
}

/* trustpilot mini logo satırı */
.trust-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.trust-brand-star {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #00b67a;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.trust-brand-text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* küçük ekranlarda okları gizle, mobilde swipe ile gitsin */
@media (max-width: 768px) {
  .trust-row {
    padding: 8px 16px;
  }
  .trust-nav {
    display: none;
  }
}
/* --- TRUSTPILOT KART BOYUTU İNCE AYAR --- */

.trust-card {
  /* tonu eski haline döndürüyoruz */
  background: #f9f9f9;          /* önceki ton buydu */
  border: 1px solid #e2e2e2;

  /* boyutu bir tık küçült */
  min-width: 240px;
  max-width: 240px;
  padding: 16px 16px 12px;
}

/* büyük ekranda biraz daha sıkı dursun istersen */
@media (min-width: 1200px) {
  .trust-card {
    min-width: 230px;
    max-width: 230px;
  }
}

/* --- YILDIZ BARINI TRUSTPILOT GİBİ YAP --- */
.trust-stars {
  display: inline-block;
  background: #00b67a;      /* yeşil kutu */
  color: #ffffff;           /* yıldızlar beyaz */
  border-radius: 3px;
  padding: 3px 6px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;      /* yıldızlar arası boşluk */
}
/* --- TRUSTPILOT YILDIZLARINI ORJİNAL GİBİ YAP --- */

.trust-stars {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 10px;
}

.trust-star-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #00b67a;   /* Trustpilot yeşili */
  border-radius: 2px;
  color: #ffffff;        /* yıldız beyaz */
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
/* --- TRUSTPILOT YILDIZLAR FİNAL AYAR --- */

.trust-stars {
  display: inline-flex;
  gap: 3px;                    /* kutular arası beyaz çizgi */
  padding: 2px 3px;            /* etrafında da hafif beyaz çerçeve */
  background: #ffffff;         /* aradaki boşluklar beyaz görünsün */
  border-radius: 3px;
  margin-bottom: 10px;
}

.trust-star-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;                 /* daha büyük kutu */
  height: 22px;
  background: #00b67a;         /* Trustpilot yeşili */
  border-radius: 3px;
  color: #ffffff;              /* yıldız beyaz */
  font-size: 14px;             /* yıldız daha büyük */
  font-weight: 700;
  line-height: 1;
}
/* --- TRUSTPILOT KARTLARINI BİR TIK KÜÇÜLT + FONT AYARI --- */

.trust-card {
  min-width: 215px;          /* önce 230 civarıydı, biraz daralttık */
  max-width: 215px;
  padding: 14px 14px 10px;   /* iç boşluk da azaldı */
}

/* Başlık: hafif daha küçük, çok kalın değil */
.trust-headline {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;       /* önce 16 idi */
  font-weight: 500;      /* yarı kalın */
  margin-bottom: 6px;
}

/* Metin: daha ince ve ufak */
.trust-text {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* İsim + tarih: daha küçük ve soluk */
.trust-author {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #6b6b6b;
}
/* === ABOUT US BLOĞU === */

.about-section {
  background: #f3f3f3;           /* hafif gri arka plan */
  padding: 72px 0 80px;
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); /* sol yazı biraz daha geniş */
  gap: 56px;
  align-items: center;
}

/* sol yazı kısmı */
.about-label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #555;
  margin: 0 0 8px;
}

.about-heading {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 60px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #333333;
  margin: 0 0 40px;
}

/* Create / Shop satırları */
.about-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

.about-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-icon-mark {
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid #222;
  border-radius: 6px;
}

/* çok basit ikon taklidi – istersen sonra svg ile değiştirirsin */
.about-icon-pencil {
  border-radius: 999px;
  transform: rotate(-45deg);
}

.about-icon-shirt {
  border-radius: 4px;
}

/* satırdaki metinler */
.about-row-text h3 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0 6px;
  color: #333;
}

.about-row-text p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* butonlar */
.about-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.about-btn {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 28px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #111;
}

.about-btn-primary {
  background: #111111;
  color: #ffffff;
}

.about-btn-primary:hover {
  background: #000000;
}

.about-btn-ghost {
  background: transparent;
  color: #111111;
}

.about-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* sağdaki büyük resim – sağa yapışık değil, container içinde */
.about-image {
  justify-self: end;
}

.about-image img {
  display: block;
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* responsive – mobilde alt alta gelsin */
@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-heading {
    font-size: 40px;
  }

  .about-image {
    justify-self: center;
  }

  .about-image img {
    max-width: 100%;
  }
}
/* === ABOUT US – ORJİNALE YAKIN === */

.about-section {
  background: #f4f4f4;                  /* orjindeki griye yakın */
  padding: 80px 0 90px;
}

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;                      /* soldan sağdan boşluk */
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: center;
}

/* sol üst: Spreadshirt */
.about-label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #444;
  margin: 0 0 10px;
}

/* ABOUT US başlığı */
.about-heading {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #333;
  margin: 0 0 46px;
}

/* Create / Shop satırları */
.about-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}

/* beyaz yuvarlak ikon alanı */
.about-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* içindeki siyah outline ikon */
.about-icon-mark {
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid #222;
  border-radius: 8px;
}

.about-icon-pencil {
  border-radius: 999px;
  transform: rotate(-45deg);
}

.about-icon-shirt {
  border-radius: 4px;
}

/* satır textleri */
.about-row-text h3 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 8px 0 6px;
  color: #333;
}

.about-row-text p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* butonlar */
.about-buttons {
  display: flex;
  gap: 16px;
  margin-top: 36px;
}

.about-btn {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 30px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #111;
}

.about-btn-primary {
  background: #111;
  color: #fff;
}

.about-btn-primary:hover {
  background: #000;
}

.about-btn-ghost {
  background: transparent;
  color: #111;
}

.about-btn-ghost:hover {
  background: rgba(0,0,0,0.04);
}

/* sağdaki görsel – sağa yapışık değil, container içinde */
.about-image {
  justify-self: end;
}

.about-image img {
  display: block;
  max-width: 540px;
  width: 100%;
  height: auto;
}

/* mobilde alt alta */
@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
  }

  .about-heading {
    font-size: 42px;
  }

  .about-image {
    justify-self: center;
  }
}
/* --- ABOUT US ikonları: kalem + t-shirt --- */

/* Beyaz daire aynı kalsın, sadece SVG ile dolduruyoruz */
.about-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* İçteki SVG ikon */
.about-icon-svg {
  width: 34px;
  height: 34px;
  stroke: #222222;
  stroke-width: 20;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* T-shirt biraz dolu görünmesi için gövdeyi dolduralım */
.about-icon-shirt .about-icon-svg {
  fill: #ffffff;          /* içi beyaz, kenarları siyah */
  stroke-width: 1.8;
}

/* Kalem ikonunda içi boş, sadece kontur */
.about-icon-pencil .about-icon-svg {
  fill: none;
}
/* --- ABOUT US ikonlarını orjinale benzet --- */

/* Beyaz yuvarlak alan */
.about-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* İkonları çizebilmek için */
.about-icon-pencil::before,
.about-icon-pencil::after,
.about-icon-shirt::before,
.about-icon-shirt::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

/* KALEM İKONU */
.about-icon-pencil::before {
  /* gövde */
  width: 16px;
  height: 30px;
  border: 2px solid #111;
  border-radius: 4px;
  top: 26px;
}

.about-icon-pencil::after {
  /* uç */
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid #111;
  bottom: 21px;
}

/* üstteki küçük çizgi (kalem kapağı) */
.about-icon-pencil::marker,
.about-icon-pencil span {
  display: none;
}

/* T-SHIRT İKONU */
.about-icon-shirt::before {
  /* gövde + omuzlar */
  width: 30px;
  height: 26px;
  border: 2px solid #111;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  top: 26px;
}

/* yaka ve kollar */
.about-icon-shirt::after {
  width: 38px;
  height: 10px;
  border: 2px solid #111;
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  top: 22px;
}
/* --- ABOUT US ikon dairelerini düzelt --- */

.about-icon {
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  border-radius: 50% !important;   /* tam daire */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 80px;                  /* sıkışıp elipse dönmesin */
}
/* === USP (PAYMENT / RETURNS / DELIVERY) BLOĞU === */

.usp-section {
  background: #ffffff;
  padding: 40px 0 46px;
}

.usp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  text-align: center;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.usp-item {
  flex: 1 1 0;
}

/* üstteki ikon */
.usp-icon {
  margin-bottom: 10px;
}

.usp-icon-svg {
  width: 30px;
  height: 30px;
  stroke: #222;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* başlık */
.usp-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 0 14px;
}

/* orta metin / logo satırları */
.usp-text {
  font-size: 14px;
  color: #555;
  margin: 0 0 18px;
}

/* payment / shipping logoları (metinle taklit) */
.usp-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

.usp-logos-shipping {
  gap: 24px;
}

.usp-logo {
  font-size: 16px;
  font-weight: 700;
  color: #9a9a9a;
}

/* Read more linki */
.usp-link {
  font-size: 15px;
  font-weight: 500;
  color: #00a99d;            /* turkuaza yakın yeşil */
  text-decoration: none;
}

.usp-link-arrow {
  font-size: 17px;
  margin-left: 4px;
}

/* küçük ekranlarda alt alta */
@media (max-width: 900px) {
  .usp-inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 28px;
  }
}
/* --- USP başlık + logo boyut ayarı --- */

/* başlıkları büyüt */
.usp-title {
  font-size: 20px;      /* önce 18'di */
  font-weight: 500;
}

/* ikonları da bir tık büyüt */
.usp-icon-svg {
  width: 34px;          /* önce 30'du */
  height: 34px;
}

/* ödeme / kargo logolarını büyüt */
.usp-logo {
  font-size: 18px;      /* önce 16'ydı */
  font-weight: 700;
}
/* === NEWSLETTER + FOOTER COLUMNS BLOĞU === */

.footer-info-section {
  background: #f4f4f4;              /* gri arka plan */
  padding: 40px 0 50px;
}

.footer-info-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: 60px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* SOL – NEWSLETTER KARTI */

.newsletter-card {
  background: #c8f0ec;              /* açık turkuaz kutu */
  padding: 20px 24px 26px;
}

.newsletter-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #333;
}

.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-bottom: 10px;
}

.newsletter-input {
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.newsletter-btn {
  border: none;
  background: #00a99d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap;
}

.newsletter-more {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: #444;
  text-decoration: none;
}

/* SAĞ – 3 KOLON */

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.footer-col-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #333;
}

.footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col-list li {
  margin-bottom: 8px;
}

.footer-col-list a {
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.footer-col-list a:hover {
  text-decoration: underline;
}

.footer-small-text {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}

/* Basit ikon taklidi – solda küçük gri ikonlar */

.fi {
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 8px;
  color: #777;
  font-size: 14px;
}

/* Farklı iconlar için semboller */
.fi-order::before { content: "🧾"; }
.fi-help::before { content: "?"; }
.fi-mail::before { content: "✉"; }
.fi-phone::before { content: "☎"; }

.fi-fb::before { content: "f"; }
.fi-ig::before { content: "◎"; }
.fi-pin::before { content: "P"; }
.fi-yt::before { content: "▶"; }
.fi-blog::before { content: "≡"; }

/* Responsive */

@media (max-width: 900px) {
  .footer-info-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
}
/* --- FOOTER BLOĞU İNCE AYARLAR --- */

/* Turkuaz kutu ve genel blok çok aşağı uzamasın */
.footer-info-section {
  padding: 28px 0 32px;              /* üst–alt boşluğu küçülttük */
}}
/* --- FOOTER BLOĞU İNCE AYARLAR --- */

/* Turkuaz kutu ve genel blok çok aşağı uzamasın */
.footer-info-section {
  padding: 28px 0 32px;              /* üst–alt boşluğu küçülttük */
}

.newsletter-card {
  padding: 16px 20px 18px;           /* aşağı doğru uzunluğu kısaldı */
}

/* Follow Us ve Service ikonlarını büyüt */
.fi {
  width: 22px;                       /* ikon alanı genişledi */
  margin-right: 10px;
  font-size: 17px;                   /* ikon simgeleri daha iri */
}

/* Başlık ve link fontlarını orijinale daha yakın yapalım */
.footer-col-title {
  font-size: 19px;                   /* bir tık büyük */
  font-weight: 600;
}

.footer-col-list a {
  font-size: 15px;                   /* linkler de biraz büyüdü */
  line-height: 1.6;
}
/* --- Newsletter bloğunu orjinale yaklaştır --- */

/* Grid sütunlarının birbirini germesini engelle */
.footer-info-inner {
  align-items: flex-start;       /* artık kolonlar yüksekliğe göre uzamıyor */
}

/* Sol turkuaz kutu sadece içeriği kadar olsun */
.newsletter-card {
  align-self: flex-start;        /* grid'in stretch'ini override et */
}

/* Biraz daha orjinal yükseklik için padding ayarı */
.footer-info-section {
  padding: 32px 0 40px;         /* çok boşluk olmasın, hafif toparla */
}

.newsletter-card {
  padding: 18px 22px 18px;      /* alttaki boşluğu da kısalttık */
}
/* === EN ALT YAZI ŞERİDİ === */

.bottom-strip {
  background: #ffffff; /* arka plan beyaz */
  padding: 16px 0 18px;
  border-top: 1px solid #eeeeee; /* üstte ince çizgi olsun (istersen sil) */
}

.bottom-strip-text {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  color: #333333;
  line-height: 1.6;
}

.bottom-link {
  color: #00a99d;     /* üstlerde kullandığımız turkuaza yakın */
  text-decoration: none;
  font-weight: 500;
}

.bottom-link:hover {
  text-decoration: underline;
}

.bottom-heart {
  color: #ff4b6a;      /* pembe / kırmızımsı kalp */
  margin: 0 4px;
  font-size: 16px;
}

/* küçük ekranda padding’i biraz azaltalım */
@media (max-width: 600px) {
  .bottom-strip-text {
    padding: 0 20px;
    font-size: 14px;
  }
}
/* ===== BASİT DROPDOWN (CREATE / SHOP) ===== */

/* Create / Shop kapsayıcısı */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Alt menü – küçük kutu, default kapalı */
.nav-submenu {
  position: absolute;
  top: 100%;           /* linkin HEMEN altı, arada boşluk yok */
  left: 0;
  margin-top: 0;
  min-width: 180px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  display: none;       /* başta kapalı */
  z-index: 50;
}

/* Dropdown içindeki linkler */
.nav-sub-link {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #333;
  text-decoration: none;
}

.nav-sub-link:hover {
  background: #f5f5f5;
  color: #00a99d;
}

/* Create / Shop üzerinde veya içeriğinde iken MENÜ AÇIK */
.nav-item-create:hover .nav-submenu,
.nav-item-create:focus-within .nav-submenu {
  display: block;
}

.nav-item-shop:hover .nav-submenu,
.nav-item-shop:focus-within .nav-submenu {
  display: block;
}
.header-logo img {
  display: block;
  height: 58px;    /* logonun yüksekliği – istersen 50, 60 vs yapabilirsin */
  width: auto;     /* oranı bozulmasın diye */
  border: none;    /* debug’te koyduğumuz kırmızı çerçeveyi kaldır */
}
/* ================= HAKKIMIZDA SAYFASI ================= */

.about-hero {
  background-color: #ffffff;
  padding: 60px 16px 80px;
}

.about-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Üst görsel */
.about-hero-image {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.about-hero-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Alt yazı bloğu */
.about-hero-text {
  text-align: center;
  margin-top: 48px;
}

.about-hero-title {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
  color: var(--text-main, #222222);
}

.about-hero-body {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted, #6F6F6F);
}
/* USP kutusunun içindeki logo satırı */
.usp-logos {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;           /* logolar arası boşluk */
  flex-wrap: wrap;     /* dar ekranda alta geçsinler */
}

/* Tek tek logolar */
.usp-logo {
  height: 28px;        /* hepsinin boyu aynı olsun */
  max-width: 80px;     /* çok uzun olanları sınırlamak için */
  object-fit: contain;
  display: block;

  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.usp-logo:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-1px);
}
/* LOGO SATIRI */
.usp-logos {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* LOGOLAR – BÜYÜK VE RENKLİ */
.usp-logo {
  height: 40px;          /* önce 28px’ti, ~%40-50 daha büyük */
  max-width: 100px;
  object-fit: contain;
  display: block;

  /* renkli olsun diye filtreleri kaldırıyoruz */
  filter: none;
  opacity: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover efekti – hafif zıplasın */
.usp-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
/* ===========================
   TOPTAN SİPARİŞLER – HERO
   =========================== */

.bulk-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;          /* istersen oynarsın */
  object-fit: cover;
}

/* ===========================
   TOPTAN SİPARİŞLER – İLK BLOK
   =========================== */

.bulk-top-block {
  background-color: #ffffff;  /* üstte büyük görsel, altta beyaz blok */
  padding: 64px 0 56px;
}

/* Sende zaten container varsa bunu sil / düzenle.
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
*/

.bulk-top-features {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  text-align: center;
  margin-bottom: 40px;
}

.bulk-top-feature {
  flex: 1;
}

.bulk-top-feature-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #00b3a5;  /* ikonların turkuaz çerçevesi */
  font-size: 28px;
  color: #00b3a5;
  margin-bottom: 16px;
}

.bulk-top-feature-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.bulk-top-feature-text {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* ORTA BAŞLIK */

.bulk-top-heading {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  margin: 16px 0 32px;
}

/* ALTTAKİ İKİ KARTLIK SATIR */

.bulk-top-contact-row {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.bulk-top-contact-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 28px 32px;
  border-radius: 4px;
  border: 1px solid #e3e3e3;
  background-color: #fafafa;
}

.bulk-top-contact-icon {
  flex-shrink: 0;
  margin-right: 20px;
}

.bulk-top-contact-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 26px;
  color: #00b3a5;
}

.bulk-top-contact-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bulk-top-contact-content p {
  font-size: 14px;
  color: #555;
}

/* “Find answers…” satırı */

.bulk-top-faq-link {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.bulk-top-faq-link span {
  vertical-align: middle;
}

.bulk-top-faq-arrow {
  display: inline-block;
  margin-left: 6px;
  font-size: 18px;
  color: #00b3a5;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 900px) {
  .bulk-top-features {
    flex-direction: column;
    gap: 32px;
  }

  .bulk-top-contact-row {
    flex-direction: column;
  }

  .bulk-top-contact-card {
    padding: 22px 20px;
  }
}
/* BLOĞUN GENELİ */
.bulk-top-block {
  background-color: #ffffff;
  padding: 56px 0 64px;          /* üst–alt boşluk, yanlar container’dan gelecek */
}

/* İçerik genişliğini ortada ve daha dar tut */
.bulk-top-inner {
  max-width: 1040px;             /* 1000–1120 arası iyi durur, istersen oynarsın */
  margin: 0 auto;
  padding: 0 24px;               /* kenarlardan rahat nefes alsın */
}

/* ÜSTTEKİ 3 ÖZELLİK SATIRI */

.bulk-top-features {
  display: flex;
  justify-content: center;       /* kenarlara yapıştırma, ortaya topla */
  gap: 56px;                     /* kartlar arasında nefes */
  text-align: center;
  margin-bottom: 40px;
}

.bulk-top-feature {
  flex: 0 1 260px;               /* kartları biraz daralt, çok yayılmasın */
}

/* ikonları da biraz ufalt */
.bulk-top-feature-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 24px;
  color: #00b3a5;
  margin-bottom: 14px;
}

.bulk-top-feature-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.bulk-top-feature-text {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* ORTA BAŞLIK */

.bulk-top-heading {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  margin: 12px 0 28px;
}

/* ALTTAKİ İKİ KART */

.bulk-top-contact-row {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
}

.bulk-top-contact-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 24px 26px;            /* kartları biraz incelt */
  border-radius: 6px;
  border: 1px solid #e3e3e3;
  background-color: #fafafa;
}

.bulk-top-contact-icon {
  flex-shrink: 0;
  margin-right: 18px;
}

.bulk-top-contact-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 22px;
  color: #00b3a5;
}

.bulk-top-contact-content h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bulk-top-contact-content p {
  font-size: 14px;
  color: #555;
}

/* Find answers… satırı */

.bulk-top-faq-link {
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.bulk-top-faq-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 18px;
  color: #00b3a5;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .bulk-top-features {
    flex-direction: column;
    gap: 28px;
  }

  .bulk-top-contact-row {
    flex-direction: column;
  }

  .bulk-top-contact-card {
    padding: 20px 18px;
  }
}
/* ALTTAKİ İKİ KART – DAHA DAR VE ORTALI */
.bulk-top-contact-row {
  display: flex;
  justify-content: center;     /* ortala */
  gap: 24px;
  max-width: 880px;            /* iki kart için toplam genişlik */
  margin: 0 auto 28px;         /* ortala + alttan boşluk */
}

.bulk-top-contact-card {
  flex: 0 1 410px;             /* her kart ~400px civarı */
  display: flex;
  align-items: center;
  padding: 22px 24px;
  border-radius: 6px;
  border: 1px solid #e3e3e3;
  background-color: #fafafa;
}

.bulk-top-contact-icon {
  flex-shrink: 0;
  margin-right: 16px;
}

.bulk-top-contact-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #00b3a5;
  font-size: 22px;
  color: #00b3a5;
}

.bulk-top-contact-content h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bulk-top-contact-content p {
  font-size: 14px;
  color: #555;
}

/* responsive tarafı aynı kalsın, ama şunu da ekleyebilirsin: */
@media (max-width: 900px) {
  .bulk-top-contact-row {
    flex-direction: column;
    max-width: 100%;
  }

  .bulk-top-contact-card {
    flex: 1 1 auto;
  }
}
/* FAQ SECTION */
.bulk-faq-section {
  background: #f5f5f5;             /* gri zemin */
  padding: 64px 0 72px;
}

.bulk-faq-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.bulk-faq-title {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 48px;
  color: var(--text-main, #222222);
}

/* GRID */
.bulk-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 0;
}

.bulk-faq-column {
  /* sadece grup; ekstra stil gerekmiyor */
}

/* ACCORDION ITEMS */
.faq-item {
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}

.faq-question {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-main, #222222);
}

/* Soru satırı zaten flex ise (sen de öyle kullanıyorsun) 
   bu ok sağda hizalı duracak */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Ok kapsayıcısı */
/* Küçük ˅ / ˄ oku */
.faq-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);                /* kapalıyken ˅ */
  transition: transform 0.2s ease;
}

/* Açıldığında oku yukarı çevir (˄) */
.faq-item.open .faq-arrow {
  transform: rotate(-135deg);
}



/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted, #555555);
  margin-top: 8px;
}

.faq-answer p {
  margin: 0 0 4px;
}

/* open class varken cevap görünsün */
.faq-item.open .faq-answer {
  max-height: 400px; /* yeterince büyük bir değer */
}

/* Responsive: tablet & altı tek sütun */
@media (max-width: 992px) {
  .bulk-faq-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}
/* ===== Bulk personalised info block ===== */

.bulk-personalised-section {
  background-color: #ffffff;          /* beyaz zemin */
}

.bulk-personalised-inner {
  max-width: 1200px;                  /* kenarlardan boşluk için */
  margin: 0 auto;
  padding: 80px 24px 96px;            /* yukarı / yanlar / aşağı */
}

.bulk-personalised-title {
  text-align: center;
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 56px;
  font-weight: 600;
  color: #222;
}

.bulk-personalised-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 40px;
}

.bulk-personalised-col h3 {
  font-size: 22px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #222;
}

.bulk-personalised-col p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* Tablet: 2 kolon */
@media (max-width: 1024px) {
  .bulk-personalised-inner {
    padding: 64px 24px 80px;
  }

  .bulk-personalised-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobil: 1 kolon */
@media (max-width: 768px) {
  .bulk-personalised-inner {
    padding: 48px 16px 64px;
  }

  .bulk-personalised-title {
    font-size: 26px;
    margin-bottom: 40px;
  }

  .bulk-personalised-columns {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .bulk-personalised-col h3 {
    font-size: 20px;
  }
}
/* ===== KANO Gizlilik Politikası orta blok ===== */

.legal-page {
  background-color: #ffffff;              /* beyaz zemin */
}

.legal-inner {
  max-width: 960px;                      /* kenarlardan boşluk */
  margin: 0 auto;
  padding: 80px 24px 96px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.legal-inner h1 {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 32px;
  text-align: center;
  font-weight: 600;
  color: #222;
}

.legal-inner h2 {
  font-size: 24px;
  margin: 40px 0 16px;
  font-weight: 600;
  color: #222;
}

.legal-inner h3 {
  font-size: 19px;
  margin: 24px 0 10px;
  font-weight: 600;
  color: #222;
}

.legal-inner h4 {
  font-size: 17px;
  margin: 16px 0 8px;
  font-weight: 600;
  color: #333;
}

.legal-inner p {
  margin: 0 0 12px;
}

.legal-inner ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal-inner li {
  margin-bottom: 6px;
}

.legal-updated {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}

/* Mobil uyum */
@media (max-width: 768px) {
  .legal-inner {
    padding: 48px 16px 64px;
  }

  .legal-inner h1 {
    font-size: 26px;
  }

  .legal-inner h2 {
    font-size: 21px;
  }
}
/* ===== KANO koşullar & gizlilik sayfaları ortak stil ===== */

.legal-page {
  background-color: #ffffff;
}

.legal-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.legal-inner h1 {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 32px;
  text-align: center;
  font-weight: 600;
  color: #222;
}

.legal-inner h2 {
  font-size: 24px;
  margin: 40px 0 16px;
  font-weight: 600;
  color: #222;
}

.legal-inner h3 {
  font-size: 19px;
  margin: 24px 0 10px;
  font-weight: 600;
  color: #222;
}

.legal-inner h4 {
  font-size: 17px;
  margin: 16px 0 8px;
  font-weight: 600;
  color: #333;
}

.legal-inner p {
  margin: 0 0 12px;
}

.legal-inner ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal-inner li {
  margin-bottom: 6px;
}

.legal-updated {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}

/* Mobil */
@media (max-width: 768px) {
  .legal-inner {
    padding: 48px 16px 64px;
  }

  .legal-inner h1 {
    font-size: 26px;
  }

  .legal-inner h2 {
    font-size: 21px;
  }
}
/* Ortaklık butonunu yan yana içerik alacak hale getir */
.nav-cta {
  display: inline-flex;        /* varsa mevcut display'i bununla değiştir */
  align-items: center;
  gap: 6px;                    /* Ortaklık ile B2B arası boşluk */
}

/* B2B rozeti */
.nav-b2b-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
/* Ortaklık menü item'ı: yazı + B2B yan yana */
.nav-item-partner .nav-link {
  display: inline-flex;      /* mevcut block/flex neyse bunu ezsin */
  flex-direction: row;
  align-items: center;
  gap: 6px;                  /* Ortaklık ile B2B arası boşluk */
  white-space: nowrap;       /* Alt satıra atmasın */
}

/* B2B rozeti küçük etiket gibi dursun */
.nav-b2b-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
/* Ortaklık + B2B menü item'i */
.nav-item-partner {
  display: inline-flex;
  align-items: center;
}

/* Ortaklık butonu: yazı + B2B yan yana */
.nav-item-partner .nav-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;           /* Ortaklık ile B2B arası boşluk */
  white-space: nowrap;
}

/* B2B rozeti */
.nav-b2b-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;

  background-color: #f1c40f;   
  color: #000;
  border: 1px solid #f1c40f;
  font-weight: 500;
}
/* ==== ORTAKLIK / CORPORATE SAYFASI ==== */

:root {
  /* Spreadshirt corporate sayfasındaki turkuaz CTA için */
  --partner-teal: #00b6b4;
  --partner-teal-dark: #00918f;
}

/* Sayfanın ana wrap'i (şimdilik ekstra bir şey yapmıyoruz) */
.partner-page {
  background: #f4f4f7; /* sitedeki genel fonda kalsın */
}

/* HERO BLOĞU */
.partner-hero {
  background: #cfe6ea;              /* o screenshot'taki açık mavi */
  padding: 40px 0 36px;
}

.partner-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* breadcrumb */
.partner-breadcrumb {
  font-size: 13px;
  color: #6f6f6f;
  margin-bottom: 18px;
}

.partner-breadcrumb a {
  color: #6f6f6f;
  text-decoration: none;
}

.partner-breadcrumb a:hover {
  text-decoration: underline;
}

.partner-breadcrumb span {
  margin-right: 4px;
}

/* Sol metin */
.partner-hero-title {
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #222222;
}

.partner-hero-sub {
  font-size: 20px;
  color: #333333;
  margin: 0 0 22px;
}

/* CTA buton */
.partner-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 28px;
  border-radius: 4px;
  background: var(--partner-teal);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.partner-hero-btn:hover {
  background: var(--partner-teal-dark);
}

/* Sağ görsel */
.partner-hero-image img {
  display: block;
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* Delivery bar (ince şerit) */
.partner-delivery-bar {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.partner-delivery-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #222222;
  text-align: center;
}

.partner-delivery-icon {
  font-size: 18px;
}

.partner-delivery-text a {
  color: #0073e6;
  text-decoration: underline;
}

.partner-delivery-text a:hover {
  text-decoration: none;
}

/* 3 ikonlu USP alanı */
.partner-benefits {
  background: #ffffff;
  padding: 40px 0 52px;
}

.partner-benefits-inner {
  max-width: 960px;                 /* ORTALAMA için genişliği daralttım */
  margin: 0 auto;                   /* tam ortada dursun */
  display: flex;
  justify-content: center;
  gap: 64px;                        /* aralarındaki boşluk */
  text-align: center;
}

.partner-benefit {
  flex: 0 1 260px;
}

/* üstte yuvarlak ikon alanı */
.partner-benefit-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid #dadada;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
  color: #333333;
}

.partner-benefit-icon span {
  display: inline-block;
}

/* başlık + metin */
.partner-benefit-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
  color: #222222;
}

.partner-benefit-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #6f6f6f;
}

/* Responsive ayarlar */
@media (max-width: 900px) {
  .partner-hero-inner {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
  }

  .partner-hero-image {
    order: -1; /* mobilde önce görsel, sonra yazı istersen bunu kaldırabilirsin */
  }

  .partner-hero-title {
    font-size: 30px;
  }

  .partner-hero-sub {
    font-size: 16px;
  }

  .partner-benefits-inner {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
  }
}
/* ==== SAVE BIG ON GROUP ORDERS – ORJİNAL GÖRÜNÜM ==== */

.volume-section {
  background: #ffffff;
  padding: 60px 0 70px;
}

.volume-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* başlıklar */
.volume-main-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.volume-main-text {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
}

.volume-sub-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 35px;
}

/* === GRID / FLEX HİZALAMA === */
/* solda ürün sabit, sağdaki kutular gittikçe genişliyor */

.volume-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  column-gap: 24px;
}

/* ürün solda sabit genişlik */
.volume-product {
  flex: 0 0 260px;
  text-align: center;
}

.volume-product-img {
  width: 100%;
  height: auto;
  display: block;
}

.volume-product-name {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
}

.volume-product-rating {
  margin-top: 6px;
  font-size: 16px;
  color: #f4b400;
}

.volume-product-rating span {
  color: #666;
  font-size: 14px;
  margin-left: 4px;
}

.volume-product-price {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
}

/* tüm kartların ortak stili */
.volume-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 40px 30px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* KUTU GENİŞLİKLERİ – SOLDAN SAĞA UZAYAN ETKİ BURADA */
.volume-grid > .volume-card:nth-of-type(1) {
  /* 10% off */
  flex: 1 1 24%;
}

.volume-grid > .volume-card:nth-of-type(2) {
  /* 40% off */
  flex: 1 1 28%;
}

.volume-grid > .volume-card:nth-of-type(3) {
  /* 60% off – en geniş */
  flex: 1 1 32%;
}

/* kart içi tipografi */
.volume-card-off {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 14px;
}

.volume-card-from {
  font-size: 16px;
  color: #666;
  margin-bottom: 14px;
}

.volume-card-price {
  font-size: 22px;
  font-weight: 700;
}

/* 60% kutusunun gri zemini */
.volume-card-highlight {
  background: #f3f3f3;
}

/* alt not */
.volume-note {
  margin-top: 26px;
  font-size: 14px;
  color: #777;
}

/* responsive – mobile’da hepsini alta alta yap */
@media (max-width: 960px) {
  .volume-container {
    padding: 0 16px;
  }

  .volume-grid {
    flex-direction: column;
    row-gap: 20px;
  }

  .volume-product,
  .volume-grid > .volume-card:nth-of-type(1),
  .volume-grid > .volume-card:nth-of-type(2),
  .volume-grid > .volume-card:nth-of-type(3) {
    flex: 1 1 auto;
  }
}
/* ==== VOLUME DISCOUNT BLOĞU – SPREADSHIRT STİLİ ==== */

.volume-section {
  background: #ffffff;
  padding: 60px 0 70px;
}

.volume-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Başlıklar */
.volume-main-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.volume-main-text {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
}

.volume-sub-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 35px;
}

/* === GRID: 1 ürün + 3 kutu, soldan sağa kutu genişliği artıyor === */

.volume-grid {
  display: grid;
  grid-template-columns: 260px 260px 320px 380px;
  column-gap: 24px;
  align-items: end;
  justify-content: center;
}

/* Ürün */
.volume-product {
  text-align: center;
}

.volume-product-img {
  width: 100%;
  height: auto;
  display: block;
}

.volume-product-name {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
}

.volume-product-rating {
  margin-top: 6px;
  font-size: 16px;
  color: #f4b400;
}

.volume-product-rating span {
  color: #666;
  font-size: 14px;
  margin-left: 4px;
}

.volume-product-price {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
}

/* Kartların ortak stili */
.volume-card {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 40px 30px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* SOLDAN SAĞA GENİŞLİK VE RENK – tam burada ayarlıyoruz */

/* 2. çocuk = 10% off (en küçük, beyaza yakın) */
.volume-grid > :nth-child(2) {
  background: #ffffff;
  padding-top: 26px;
  padding-bottom: 26px;
}

/* 3. çocuk = 40% off (orta genişlik, hafif gri) */
.volume-grid > :nth-child(3) {
  background: #f8f8f8;
  padding-top: 54px;
  padding-bottom: 54px;
}

/* 4. çocuk = 60% off (en geniş, daha koyu gri) */
.volume-grid > :nth-child(4) {
  background: #f1f1f1;
  padding-top: 74px;
  padding-bottom: 74px;
}

/* Kart içi tipografi */
.volume-card-off {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 14px;
}

.volume-card-from {
  font-size: 16px;
  color: #666;
  margin-bottom: 14px;
}

.volume-card-price {
  font-size: 22px;
  font-weight: 700;
}

/* Alt not */
.volume-note {
  margin-top: 26px;
  font-size: 14px;
  color: #777;
}

/* Mobile: hepsi alta alta */
@media (max-width: 960px) {
  .volume-container {
    padding: 0 16px;
  }

  .volume-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}
/* ==== 3'LÜ METİN BLOĞU – PROMO / GIFTS / MARKETING ==== */

.promo-section {
  background: #ffffff;
  padding: 60px 0 70px;
}

.promo-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;   /* ortala */
  gap: 80px;                 /* kolonlar arası nefes */
  text-align: left;
}

/* her kolon */
.promo-box {
  flex: 1 1 0;
  max-width: 340px;          /* sağa sola çok yayılmasın */
}

/* başlık */
.promo-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #222;
}

/* paragraf */
.promo-text {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* mobile'de alta alta gelsin */
@media (max-width: 960px) {
  .promo-inner {
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
  }

  .promo-box {
    max-width: none;
  }
}

/* Sepet rozetini biraz daha şık yapalım */
.header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.header-cart .cart-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #ffb400;
  color: #111;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ==========================
   MAĞAZA SAYFASI
   (.store-main, .product-card vs.)
========================== */

.store-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

.store-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.store-toolbar {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-filters label {
  font-size: 13px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.store-filters select {
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  background-color: #fff;
}

/* Ürün grid'i */

.store-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Ekran küçülünce kolon sayısını azalt */
@media (max-width: 1024px) {
  .store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}}

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Ürün kartı */

.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}}

/* Ürün kartı */

.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.product-image-wrap {
  width: 100%;
  padding-top: 100%; /* kare oran */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f0f0f0;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu kartta tam genişlik */

.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Boş mağaza mesajı */

.store-empty {
  margin: 24px 0;
  font-size: 14px;
  color: #666;
}

/* ==========================
   SEPET SAYFASI
   (.cart-main, .cart-table vs.)
========================== */

.cart-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

.cart-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.cart-empty {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 20px;
  font-size: 14px;
}

.cart-empty a {
  color: #111;
  font-weight: 500;
  text-decoration: underline;
}

.cart-content {
  display: flex;
  gap: 24px;
}

/* SOL taraf (ürünler) */
.cart-items-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* SAĞ taraf (özet) */
.cart-summary-card {
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
  align-self: flex-start;
}

.cart-summary-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}

.cart-summary-line,
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 4px 0;
}

.cart-summary-total {
  font-weight: 700;
  font-size: 15px;
}

.cart-checkout-btn {
  width: 100%;
  margin-top: 12px;
}

.cart-summary-note {
  font-size: 12px;
  color: #777;
  margin-top: 8px;
}

/* Sepet tablosu */

.cart-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e2e2;
}

.cart-table th,
.cart-table td {
  padding: 10px 8px;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}

.cart-table thead {
  background-color: #fafafa;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #666;
}

/* Son satır alt border'ı kaldır */
.cart-table tr:last-child td {
  border-bottom: none;
}

/* Ürün hücresi içinde görsel + yazı */

.cart-item-product {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-item-thumb {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item-name {
  font-size: 13px;
  font-weight: 500;
}

.cart-item-id {
  font-size: 11px;
  color: #777;
}

/* Adet kontrolü */

.cart-qty-control {
  display: inline-flex;
  align-items: center;
  border-radius: 16px;
  border: 1px solid #ddd;
  overflow: hidden;
}

.cart-qty-btn {
  background-color: #f6f6f6;
  padding: 2px 8px;
  font-size: 14px;
}

.cart-qty-btn:hover {
  background-color: #eaeaea;
}

.cart-qty-value {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-size: 13px;
}

/* Sil butonu */

.cart-remove-btn {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #fbe9e9;
  color: #b00020;
}

.cart-remove-btn:hover {
  background-color: #f5caca;
}

/* Sepeti temizle butonu */

.cart-clear-btn {
  margin-top: 10px;
  font-size: 13px;
}

/* Küçük ekranlarda sepet layout'u alt alta geçsin */

@media (max-width: 900px) {
  .cart-content {
    flex-direction: column;
  }

  .cart-summary-card {
    width: 100%;
  }

  .cart-table th:nth-child(1),
  .cart-table td:nth-child(1) {
    min-width: 180px;
  }
}

/* ==========================
   ÖDEME SAYFASI
   (.checkout-main vs.)
========================== */

.checkout-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

.checkout-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.checkout-empty {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 20px;
  font-size: 14px;
}

.checkout-empty a {
  color: #111;
  font-weight: 500;
  text-decoration: underline;
}

/* Form + özet layout */

.checkout-content {
  display: flex;
  gap: 24px;
}

/* Sol form alanı */

.checkout-form-wrap {
  flex: 1 1 auto;
  min-width: 0;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
}

.checkout-form-wrap h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-form label {
  font-size: 13px;
  font-weight: 500;
}

.checkout-form input,
.checkout-form textarea {
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

.checkout-form input:focus,
.checkout-form textarea:focus {
  outline: none;
  border-color: #111;
}

/* Sağ sipariş özeti */

.checkout-summary-wrap {
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
  align-self: flex-start;
}

.checkout-summary-wrap h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}

/* Ürün satırları */

.checkout-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.checkout-item-main {
  display: flex;
  gap: 8px;
}

.checkout-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.checkout-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkout-item-name {
  font-size: 13px;
  font-weight: 500;
}

.checkout-item-variant,
.checkout-item-qty {
  font-size: 11px;
  color: #777;
}

.checkout-item-total {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Özet toplam satırları */

.checkout-summary-line,
.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 4px 0;
}

.checkout-summary-total {
  font-weight: 700;
  font-size: 15px;
}

.checkout-submit-btn {
  margin-top: 10px;
  width: 100%;
}

.checkout-disclaimer {
  margin-top: 8px;
  font-size: 12px;
  color: #777;
}

/* Başarılı sipariş ekranı */

.checkout-success {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 24px;
  text-align: center;
}

.checkout-success h2 {
  margin-top: 0;
  font-size: 22px;
  margin-bottom: 8px;
}

.checkout-success p {
  margin: 4px 0;
}

/* Responsive: mobilde form ve özet alt alta */

@media (max-width: 900px) {
  .checkout-content {
    flex-direction: column;
  }

  .checkout-summary-wrap {
    width: 100%;
  }
}

/* Sadece yeni sayfaların içeriğini ortala ve daralt */
/* HEADER'DAKİ .container'A DOKUNMUYORUZ */

.store-main > .container,
.cart-main > .container,
.checkout-main > .container {
  max-width: 1200px;   /* içerik genişliği */
  margin: 0 auto;      /* ortalama */
  padding: 0 16px;     /* sağ/sol iç boşluk */
}
/* ==========================
   MAĞAZA SAYFASI YENİ LAYOUT
   Spreadshirt tarzı: sol sidebar + sağ grid
========================== */

/* Arka plan ve üstten boşluk */
.store-main {
  padding: 32px 0 48px;
  background-color: #f7f7f7;
}

/* Sadece mağaza içeriğini ortalıyoruz */
.store-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* SOL: Sidebar */
.store-sidebar {
  width: 220px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 16px;
  font-size: 13px;
}

/* Sidebar bölümler */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 20px;
}

.store-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}

.store-sidebar-subtitle {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
}

.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.store-sidebar-list li {
  margin-bottom: 4px;
}

.store-sidebar-list a {
  color: #444;
  text-decoration: none;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* SAĞ: içerik alanı */
.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Üst filtre barı */
.store-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
}

.store-toolbar {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-filters label {
  font-size: 13px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.store-filters select {
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  background-color: #fff;
}

/* ÜRÜN GRID – Spreadshirt gibi nefes alan grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* Kartlar birbirine yapışmasın, sade kart stili */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Ürün görseli – Spreadshirt’tekine benzer büyük alan */
.product-image-wrap {
  width: 100%;
  padding-top: 110%;  /* hafif dikdörtgen */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* İsim + fiyat */
.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 4px 0 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 2px 0 4px;
}

/* Beden / renk */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu altta geniş */
.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Boş mağaza mesajı */
.store-empty {
  margin: 24px 0;
  font-size: 14px;
  color: #666;
}

/* Responsive: mobilde sidebar alta geçsin */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* ==========================
   MAĞAZA SAYFASI LAYOUT
========================== */

.store-main {
  padding: 32px 0 64px;
  background-color: #f7f7f7;
}

/* Sadece mağaza içeriğini ortala */
.store-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

/* SOL: Sidebar kutusu */
.store-sidebar {
  width: 240px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 18px 16px 28px;
  font-size: 14px;
  min-height: 420px; /* biraz daha uzun dursun */
}

/* Accordion bölüm */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 20px;
  border-top: 1px solid #f0f0f0;
  padding-top: 14px;
}

/* Başlık satırı (Categories / Products) */
.store-sidebar-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.store-sidebar-title {
  font-size: 15px;
  font-weight: 700;
}

.store-sidebar-chevron {
  font-size: 14px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

/* Liste (Men, Women, T-Shirts...) */
.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
  max-height: 500px;
  opacity: 1;
}

/* Satır */
.store-sidebar-list li {
  margin-bottom: 6px;
}

.store-sidebar-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  padding: 3px 0;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* KAPALI durum (accordion) */
.store-sidebar-section.collapsed .store-sidebar-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
}

.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}

/* SAĞ: içerik alanı */
.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Üst filtre barı */
.store-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
}

.store-toolbar {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-filters label {
  font-size: 13px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.store-filters select {
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  background-color: #fff;
}

/* ÜRÜN GRID – kartlar arasında daha fazla boşluk */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px; /* kartlar arası boşluk */
}

/* ÜRÜN KARTI */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Görsel */
.product-image-wrap {
  width: 100%;
  padding-top: 110%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Metinler */
.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 4px 0 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 2px 0 4px;
}

/* Beden / renk */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu altta geniş */
.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Boş mağaza mesajı */
.store-empty {
  margin: 24px 0;
  font-size: 14px;
  color: #666;
}

/* Responsive: mobilde sidebar alta geçsin */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* MAĞAZA – genel alan */
.store-main {
  padding: 32px 0 64px;
  background-color: #f7f7f7;
}

/* Header'a dokunmuyoruz, sadece mağaza içeriğini sola alıyoruz */
.store-container {
  max-width: none;        /* merkeze sıkışmasın */
  margin: 0;              /* left-align */
  padding: 0 48px;        /* soldan ve sağdan nefes */
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* SIDEBAR */
.store-sidebar {
  width: 230px;
  flex-shrink: 0;
  font-size: 14px;
  padding: 8px 0 40px;  /* aşağı doğru biraz uzun */
}

/* Bölümler arası çizgi */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e0e0e0;
}

/* Başlık satırı (Categories / Products) */
.store-sidebar-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.store-sidebar-title {
  font-size: 15px;
  font-weight: 700;
}

.store-sidebar-chevron {
  font-size: 14px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

/* Liste */
.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.store-sidebar-list li {
  margin-bottom: 6px;
}

.store-sidebar-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* Kapalı durum */
.store-sidebar-section.collapsed .store-sidebar-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}

/* SAĞ içerik */
.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Filtre barı aynı kalsın, sadece buraya dokunmuyorum */

/* Ürün grid – kartlar birbirine değmesin */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 40px;          /* kartlar arası boşluk */
  padding-top: 8px;
}

/* Kartın kendisi */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Görsel alanı biraz küçültelim */
.product-image-wrap {
  width: 100%;
  padding-top: 105%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive: mobilde sidebar alta */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* ==========================
   KANO Mağaza – Spreadshirt'e yakın layout
   (Sadece mağaza main içeriğini etkiler)
========================== */

/* Arka plan ve üstten boşluk */
.store-main {
  padding: 32px 0 64px;
  background-color: #f7f7f7;
}

/* İçeriği ortala ama biraz geniş bırak */
.store-container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Sol sidebar + sağ içerik */
.store-layout {
  display: flex;
  align-items: flex-start;
  gap: 48px; /* sidebar ile ürünler arası boşluk */
}

/* ===== SIDEBAR ===== */

.store-sidebar {
  width: 240px;
  flex-shrink: 0;
  font-size: 15px;
  padding: 4px 0 40px;
}

/* Bölümler arası çizgi */
.store-sidebar-section + .store-sidebar-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

/* Başlık satırı (Categories / Products) */
.store-sidebar-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.store-sidebar-title {
  font-size: 16px;
  font-weight: 700;
}

.store-sidebar-chevron {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

/* Liste (Men / Women / T-Shirts / Hoodies...) */
.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.store-sidebar-list li {
  margin-bottom: 8px;
}

.store-sidebar-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #222;
  text-decoration: none;
  padding: 3px 0;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

/* Kapalı (accordion) durum */
.store-sidebar-section.collapsed .store-sidebar-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}

/* ===== SAĞ İÇERİK (FİLTRE + ÜRÜNLER) ===== */

.store-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Filtre barı – çok kurcalamıyoruz, sadece biraz nefes */
.store-toolbar {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Ürün grid – satırda max 3 ürün */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* en fazla 3 sütun */
  gap: 32px; /* kartlar arası boşluk */
}

/* Daha küçük ekranlarda 2 / 1 kolona düşsün */
@media (max-width: 1100px) {
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .store-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Kartın kendisi – sade, orijinale yakın */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}}

/* Kartın kendisi – sade, orijinale yakın */
.product-card {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.product-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Görsel alanı – geniş ama kartın tamamını kaplamıyor */
.product-image-wrap {
  width: 100%;
  padding-top: 110%; /* kareye yakın */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Metinler */
.product-name {
  font-size: 14px;
  font-weight: 500;
  margin: 6px 0 0;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  margin: 2px 0 4px;
}

/* Beden / renk */
.product-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.product-variants label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-variants select {
  min-width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
}

/* Sepete ekle butonu altta tam genişlik */
.product-card .btn-add-to-cart {
  margin-top: auto;
  width: 100%;
  font-size: 13px;
}

/* Mobilde sidebar alta insin */
@media (max-width: 900px) {
  .store-layout {
    flex-direction: column;
  }

  .store-sidebar {
    width: 100%;
  }
}
/* ==== Sidebar ikon & yazı kalınlaştırma ==== */

/* Men / Women satır yazıları bir tık kalın olsun */
.store-sidebar-list a {
  font-weight: 600;   /* normalden bir tık kalın */
}
/* ==== Sidebar ince ayar – ikon ve yazı kalınlığı ==== */

/* Sidebar item yazıları:
   Başlıktan (700) bir tık daha hafif olsun */
.store-sidebar-list a {
  font-weight: 500;   /* 500 = medium */
}

/* ==== Sidebar ok ve hizalama ince ayarı ==== */

/* Sidebar'ı çok az içeri al */
.store-sidebar {
  padding-left: 10px;
  padding-right: 10px;
}

/* Başlık ve listeyi aynı hizadan başlat */
.store-sidebar-header {
  padding: 0 4px 6px 4px;
}

.store-sidebar-list {
  padding-left: 4px;
}

/* Ok'u (chevron) daha geniş ve şık yap */
.store-sidebar-chevron {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #c9c9c9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-left: 8px;
  background-color: #fff;
  transform: rotate(0deg);
  transition:
    transform 0.2s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* Hover’da hafif ton değişsin */
.store-sidebar-header:hover .store-sidebar-chevron {
  background-color: #f5f5f5;
  border-color: #aaa;
}

/* Kapatıldığında ok ters dönsün */
.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}
/* ==== Sidebar ok ikonunu gerçek chevron yap ==== */

/* Metni gizle, sadece çizilmiş ikon kullan */
.store-sidebar-chevron {
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 0;          /* içindeki karakteri görünmez yap */
  margin-left: 8px;
  border: none;          /* varsa daireyi iptal et */
  background: transparent;
  transform: rotate(0deg);
  display: inline-block;
}

/* Asıl oku çizen kısım */
.store-sidebar-chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: translate(-50%, -40%) rotate(-135deg); /* ^ şeklinde ince chevron */
}

/* Kapandığında oku ters çevir (aşağı baksın) */
.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}
/* ==========================
   KANO – Benefits / Avantajlar Bloğu
========================== */

.kano-benefits {
  padding: 40px 0 50px;
  background-color: #f7f7f7; /* istersen şeffaf yapabilirsin */
}

.kano-benefits-inner {
  max-width: 1200px;      /* sağa sola yapışmasın */
  margin: 0 auto;         /* ortala */
  padding: 0 24px;        /* kenarlardan boşluk */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* ortalı dursun */
  gap: 32px;              /* ikonlar arası mesafe */
}

.kano-benefit-item {
  flex: 0 1 180px;        /* max 5 tane yan yana, daralınca alta geçer */
  text-align: center;
}

/* Daire ikon alanı */
.kano-benefit-icon {
  width: 140px;
  aspect-ratio: 1 / 1;    /* her zaman tam daire */
  border-radius: 50%;
  background-color: #bfbfbf;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kano-benefit-icon img {
  max-width: 90%;
  max-height: 90%;
  display: block;
}

/* Alt yazı */
.kano-benefit-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

/* Responsive – tablet */
@media (max-width: 900px) {
  .kano-benefit-item {
    flex: 0 1 30%;
  }
}

/* Responsive – mobil */
@media (max-width: 600px) {
  .kano-benefit-item {
    flex: 0 1 45%;
  }
}

@media (max-width: 420px) {
  .kano-benefit-item {
    flex: 0 1 100%;
  }
}

/* Toptan alışveriş bloğu */
.bulk-top-block {
  text-align: center;    /* içindeki metni ortalar */

}}

/* Toptan alışveriş bloğu */
.bulk-top-block {
  text-align: center;    /* içindeki metni ortalar */

}

/* Ekstra garanti: sadece bu bloktaki p ve h2’leri ortala */
.bulk-top-block h2,
.bulk-top-block p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 20px;
}
/* Üst blok: resim + yazı yan yana */
.bulk-top-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;                /* resim ile yazı arasındaki boşluk */
  max-width: 1200px;
  margin: 0 auto 40px;      /* ortala, altta boşluk bırak */
}

/* Sol resim kutusu */
.bulk-top-image-wrap {
  flex: 0 0 320px;          /* yaklaşık 320px genişlik (isteğe göre değiştir) */
  margin-left: 40px;        /* sayfanın en solundan biraz içeri al */
}

.bulk-top-image-wrap img {
  width: 100%;
  display: block;
  border-radius: 8px;       /* istersen, köşeleri hafif yuvarlak */
}

/* Sağdaki yazı bloğu */
.bulk-top-text {
  flex: 1;
  max-width: 650px;         /* satır genişliği */
  text-align: center;       /* önceki gibi ortalı kalsın istersen */
}

/* Zaten vardıysa bunu koruyabilirsin */
.bulk-top-heading,
.bulk-top-block > p,
.bulk-top-text p {
  text-align: center;
}
@media (max-width: 768px) {
  .bulk-top-layout {
    flex-direction: column;
    gap: 24px;
  }

  .bulk-top-image-wrap {
    margin-left: 0;         /* mobilde sola boşluk bırakma */
    width: 70%;             /* istersen biraz daralt */
  }
}

/* Genel blok */
.designer-editor {
  display: flex;
  background: #f7f7f7;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  min-height: 560px;
  max-height: 720px;

  max-width: 1280px;
  margin: 24px auto;
  overflow: hidden;
}}

/* Genel blok */
.designer-editor {
  display: flex;
  background: #f7f7f7;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  min-height: 560px;
  max-height: 720px;

  max-width: 1280px;
  margin: 24px auto;
  overflow: hidden;
}

/* SOL TOOLBAR */
.designer-sidebar {
  width: 96px;
  background: #ffffff;
  border-right: 1px solid #dedede;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 0;
}

.designer-sidebar-top {
  display: flex;
  flex-direction: column;
}

.designer-tool-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}

.designer-tool-btn:hover {
  background: #f5f5f5;
}

.designer-tool-btn.is-active {
  background: #f0f8ff;
}

.designer-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designer-sidebar-bottom {
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.designer-history-btn {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
}

.designer-history-btn:hover {
  background: #f5f5f5;
}

.designer-history-icon {
  font-size: 14px;
}

/* ORTA ALAN */
.designer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.designer-product-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  position: relative;
}
/* Ürün görselini ve baskı alanını saran küçük kutu */
.designer-product-wrapper {
  position: relative;
  display: inline-block;   /* sadece ürün kadar genişlik */
}


.designer-main-product {
  max-height: 520px;
  max-width: 100%;
  object-fit: contain;
}

/* Alt görünüm şeridi */
.designer-views-strip {
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  padding: 8px 24px 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.designer-view-thumb {
  border: 1px solid transparent;
  background: #fff;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555;
}

.designer-view-thumb img {
  width: 40px;
  height: 50px;
  object-fit: cover;
}

.designer-view-thumb.is-selected {
  border-color: #00a886;
  box-shadow: 0 0 0 1px #00a886;
}

/* SAĞ PANEL */
.designer-right-panel {
  width: 360px;
  background: #ffffff;
  border-left: 1px solid #dedede;
  display: flex;
  flex-direction: column;
}

.designer-right-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #ededed;
}

.designer-back-arrow {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
}

.designer-right-header h2 {
  font-size: 18px;
  font-weight: 600;
}

/* Scroll alanı */
.designer-right-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 12px;
}

.designer-placement-block {
  margin-bottom: 20px;
}

.designer-placement-block h3 {
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 600;
}

.designer-dropzone {
  border: 1px dashed #c4c4c4;
  border-radius: 4px;
  height: 80px;
  background: #fafafa;
}

/* Alt CTA */
.designer-right-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid #ededed;
}

.designer-cta-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  background: #00a886;
  color: #ffffff;
}
.designer-cta-btn:hover {
  filter: brightness(0.95);
}
.designer-tool-svg {
  width: 33px;
  height: 33px;
}

.designer-tool-svg.small {
  width: 18px;
  height: 18px;
}
.designer-tool-svg path,
.designer-tool-svg rect,
.designer-tool-svg circle {
  stroke-width: 1.8 !important;  /* 1.4 → ~2.8 (2 kat) */
}
.designer-tool-icon {
  width: 38px;   /* 32 → 48 */
  height: 38px;  /* 32 → 48 */
}

/* SOL ŞERİT GENEL — artık arka plan gri */
.designer-sidebar {
  width: 96px;
  background: #f7f7f7;        /* sayfanın gri rengi */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

/* ÜSTTEKİ 4 BUTONUN PANELİ: BEYAZ ŞERİT */
.designer-sidebar-top {
  background: #ffffff;        /* sadece bunlar beyaz */
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #e6e6e6;
  padding: 16px 0;
}

/* UNDO / REDO BLOKU: ARKA PLAN GRİ KALSIN */
.designer-sidebar-bottom {
  background: transparent;    /* griyi alttaki editor’den alsın */
  border-top: none;
  padding: 24px 0 0 24px;     /* soldan hafif boşluk, ekranla aynı gibi dursun */
}

/* Undo / Redo yazılarının stili aynı kalsın istersen biraz daha silik */
.designer-history-btn {
  width: auto;
  background: transparent;
  border: none;
  cursor: default;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #b5b5b5;
}
.designer-history-btn:hover {
  background: transparent;
}
/* Sol kolon genel */
.designer-sidebar {
  width: 96px;
  background: #f7f7f7;            /* gri */
  display: flex;
  flex-direction: column;
}

/* Beyaz panel */
.designer-sidebar-top {
  background: #ffffff;
  border-right: 1px solid #dedede;
  padding: 16px 0;
}

/* 4 ana buton */
.designer-tool-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}

.designer-tool-btn:hover {
  background: #f5f5f5;
}

.designer-tool-btn.is-active {
  background: #f0f8ff;
}

.designer-tool-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designer-tool-svg {
  width: 28px;
  height: 28px;
}

.designer-tool-svg path,
.designer-tool-svg rect,
.designer-tool-svg circle {
  stroke-width: 1.8;
}

/* Undo / Redo bölümü: gri arka plan, upload'ın hemen altında */
.designer-sidebar-bottom {
  background: transparent;        /* griyi alttan alsın */
  padding-top: 8px;               /* upload'a yakın durması için */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.designer-history-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #b5b5b5;
}

.designer-history-btn:hover {
  background: transparent;
}

.designer-history-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designer-history-svg {
  width: 22px;
  height: 22px;
}
.designer-sidebar {
  width: 96px;
  background: #ffffff;
  border-right: 1px solid #dedede;
  display: flex;
  flex-direction: column;
  /* BUNU SİL / EZ: justify-content: space-between;  */
  justify-content: space-between;   /* yeni satır */
  padding: 16px 0;
}
/* Üst Support / Save / Share bar */
.designer-topbar {
  background: #f7f7f7;
  padding: 10px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.designer-topbar-list {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.topbar-item {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #555;
}

.topbar-icon-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #cfcfcf;
}
/* Sağ taraf: ürün bilgisi paneli */
.designer-right-panel {
  width: 360px;
  background: #ffffff;
  border-left: 1px solid #dedede;
  display: flex;
  flex-direction: column;
}

.product-info-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Kart */
.product-info-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e4e4e4;
  margin: 32px 24px 16px;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Başlık ve eco badge */
.product-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.product-title {
  font-size: 20px;
  font-weight: 600;
}

.product-eco-badge {
  background: #d1ebe2;
  border-radius: 14px;
  padding: 4px 8px;
}

.eco-icon-circle {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #2d7b63;
}

/* Delivery time satırı */
.product-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #444;
}

.product-meta-icon {
  width: 20px;
  height: 20px;
}

.product-meta-text strong {
  font-weight: 600;
}

/* Rating */
.product-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.product-stars {
  color: #ffb400;
  letter-spacing: 1px;
}

.product-rating-count {
  color: #777;
}

/* Detay linki */
.product-details-link {
  font-size: 14px;
  color: #00a886;
  text-decoration: none;
}

.product-details-link::after {
  content: " ›";
}

/* Açıklama */
.product-description {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* Renk seçimi */
.product-color-section {
  margin-top: 10px;
}

.product-color-label {
  font-size: 14px;
  margin-bottom: 8px;
}

.product-color-name {
  font-weight: 600;
}

.product-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.color-swatch.is-selected {
  border-color: #00a886;
}

/* Alt CTA */
.designer-right-footer {
  padding: 0 24px 24px;
}

.designer-cta-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  background: #00a886;
  color: #ffffff;
}
.designer-cta-btn:hover {
  filter: brightness(0.95);
}
/* TAM EKRAN OVERLAY */
.product-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.28);
  display: none;              /* JS ile flex yapacağız */
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* KABUK */
.product-picker-shell {
  width: 95vw;
  max-width: 1200px;
  height: 80vh;
  max-height: 720px;
  background: #ffffff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 34px rgba(0,0,0,0.25);
}

/* ÜST BAR */
.product-picker-topbar {
  padding: 12px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-picker-topbar h2 {
  font-size: 18px;
  font-weight: 600;
}
.product-picker-close {
  position: absolute;
  right: 16px;
  top: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

/* İÇERİK 2 KOLON */
.product-picker-content {
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 0;
}

/* SOL PANEL */
.mini-store-sidebar {
  border-right: 1px solid #e5e5e5;
  background: #f7f7f7;
  padding: 16px 14px;
  overflow-y: auto;
}
.mini-store-panel {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e4e4e4;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.mini-store-panel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.mini-store-label {
  font-size: 12px;
  color: #555;
  display: block;
  margin-bottom: 4px;
}
.qty-row {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.qty-btn {
  width: 32px;
  height: 30px;
  border: none;
  background: #f3f3f3;
  cursor: pointer;
  font-size: 18px;
}
#miniStoreQty {
  width: 50px;
  height: 30px;
  border: none;
  text-align: center;
  font-size: 14px;
}
.mini-store-update-btn {
  width: 100%;
  margin: 6px 0 8px;
  padding: 8px 10px;
  background: #00a886;
  border-radius: 4px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mini-store-note {
  font-size: 11px;
  color: #666;
}

.mini-store-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-nav-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 6px 4px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.mini-nav-item:hover {
  background: #f5f5f5;
}
.mini-nav-item.is-active {
  background: #e5f7f2;
  color: #008c72;
}

/* SAĞ ANA KISIM */
.mini-store-main {
  padding: 16px 18px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mini-store-header-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.mini-store-title {
  font-size: 18px;
  font-weight: 600;
}
.mini-store-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mini-filter label {
  font-size: 11px;
  color: #555;
  display: block;
  margin-bottom: 2px;
}
.mini-filter select {
  font-size: 13px;
  padding: 4px 24px 4px 8px;
}

/* ÜRÜN GRID */
.mini-store-grid {
  flex: 1;
  overflow-y: auto;
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* ÜRÜN KARTI */
.mini-store-card {
  background: #f8f8f8;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e0e0e0;
  padding: 6px 6px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-store-card:hover {
  box-shadow: 0 0 0 2px #00a886;
}
.mini-store-card-thumb-wrap {
  background: #ffffff;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mini-store-card-thumb {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
}
.mini-store-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  background: #d1ebe2;
  font-size: 11px;
}
.mini-store-card-name {
  font-size: 13px;
  font-weight: 500;
}
.mini-store-card-rating {
  font-size: 11px;
  color: #777;
}
.mini-store-card-price {
  font-size: 12px;
  margin-top: 2px;
}
.mini-store-card-price strong {
  font-weight: 600;
}

/* Responsive biraz dar ekranlar için */
@media (max-width: 900px) {
  .product-picker-content {
    grid-template-columns: 1fr;
  }
  .mini-store-sidebar {
    display: none;  /* İstersen alt tarafa da alabiliriz */
  }
}
/* Ürünün üzerine gelecek tasarım katmanı */
.designer-product-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  position: relative;
}


/* Yüklenen tasarım */
.design-item {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  min-width: 10%;
  max-width: 80%;
  cursor: move;
  border: 1px dashed rgba(0,0,0,0.25);
  box-sizing: border-box;
  pointer-events: auto;   /* drag / resize için */
  background: transparent;
}

.design-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sağ alttaki büyüt/küçült tutacağı */
.design-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #00a886;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  cursor: nwse-resize;
}
/* ===========================
   DESIGNS POPUP (tasarla.html)
   =========================== */

/* HEADER */
.product-picker-header {
  padding: 12px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-picker-title span {
  font-size: 18px;
  font-weight: 600;
}

/* BODY 2 KOLON */
.design-picker-body {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

/* SOL PANEL */
.design-picker-sidebar {
  border-right: 1px solid #e5e5e5;
  background: #f7f7f7;
  padding: 16px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Arama kutusu */
.design-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  font-size: 14px;
  outline: none;
}
.design-search input:focus {
  border-color: #2bb5a8;
  box-shadow: 0 0 0 1px rgba(43, 181, 168, 0.2);
}

/* Filtre toggle'ları */
.design-filter-toggles {
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Checkbox'ı switch gibi göster */
.toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #e0e0e0;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease;
}
.toggle-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease;
}
.toggle-row input[type="checkbox"]:checked {
  background: #2bb5a8;
}
.toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}

/* Kategori listesi */
.design-category-list-wrap {
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
}
.design-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.design-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.design-category-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.design-category-item:hover {
  background: #eaeaea;
}
.design-category-item.active {
  background: #ffffff;
  box-shadow: 0 0 0 1px #2bb5a8;
}
.design-cat-thumb {
  width: 64px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.design-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design-cat-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    #f3f3f3,
    #f3f3f3 4px,
    #e4e4e4 4px,
    #e4e4e4 8px
  );
}
.design-cat-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.design-cat-empty {
  font-size: 13px;
  color: #666;
}

/* SAĞ TARAF: GRID */
.design-picker-main {
  background: #ffffff;
  padding: 16px 20px;
  overflow-y: auto;
}
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.design-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e5e5e5;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.design-card:hover {
  box-shadow: 0 0 0 2px #2bb5a8;
  transform: translateY(-1px);
}
.design-card-image {
  background: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.design-card-image img {
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
}
.design-card-meta {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.design-card-title {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}
.design-card-price {
  font-size: 12px;
  color: #777;
}
.design-empty {
  font-size: 13px;
  color: #666;
}

/* Küçük ekran uyumu */
@media (max-width: 900px) {
  .product-picker-shell {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
  .design-picker-body {
    grid-template-columns: 1fr;
  }
  .design-picker-sidebar {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    flex-direction: column;
  }
}
/* === TASARLA SAYFASI - PRODUCT POPUP GRID === */

/* Kartların yerleşimi */
.mini-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px;
  padding: 24px 0 32px;
}

/* Kartın kendisi */
.mini-store-card {
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.mini-store-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #00a884;
  transform: translateY(-2px);
}

/* Görsel alanı: sabit oran + içte contain */
.mini-store-card-img {
  position: relative;
  width: 100%;
  padding-top: 120%;          /* oranı belirleyen kısım (yükseklik ~ genişliğin %120'si) */
  background: #f5f5f5;
}

.mini-store-card-img img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Başlık + fiyat alanı */
.mini-store-card-body {
  padding: 12px 14px 14px;
}

.mini-store-card-title {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  margin: 0 0 6px;
}

.mini-store-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.mini-store-card-rating {
  white-space: nowrap;
}

.mini-store-card-price {
  font-weight: 600;
  color: #222;
}

/* “Bu filtrelere uygun ürün bulunamadı” mesajı için */
.mini-store-empty {
  font-size: 14px;
  color: #666;
  padding: 40px 0;
}
/* Kart yapısını zorla düzeltiyoruz: görsel + alt yazı */
.mini-store-card {
  display: flex;
  flex-direction: column;
}

/* Gövde normal akışta kalsın, gizlenmesin */
.mini-store-card-body {
  position: static !important;
  flex: 0 0 auto;
  background: #fafafa;
}

/* Metinler görünür olsun diye renkleri de netleştirelim */
.mini-store-card-title {
  color: #222 !important;
}

.mini-store-card-meta {
  color: #555 !important;
}
/* ---- MINI STORE KART YAZI/FİYAT ZORLA GÖRÜNSÜN ---- */

/* Kart: yüksekliği otomatik olsun, hiçbir şeyi kesmesin */
.mini-store-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  height: auto !important;
  box-sizing: border-box;
}

/* Görsel alanı sadece üst blok */
.mini-store-card-img {
  flex: 0 0 auto;
}

/* Gövde mutlaka görünsün */
.mini-store-card-body {
  display: block !important;
  position: static !important;
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  background: #fafafa;
  border-top: 1px solid #eee;
  min-height: 55px;      /* yazı + fiyat için garanti alan */
}

/* Metin renkleri */
.mini-store-card-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
  color: #222 !important;
}

.mini-store-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #555 !important;
}

.mini-store-card-price {
  font-weight: 600;
  color: #222 !important;
}
/* =====================
   TEXT CANVAS + ITEM
   ===================== */

.text-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;       /* sadece item'lar tıklanabilir */
}

.text-item {
  position: absolute;
  min-width: 80px;
  min-height: 40px;
  padding: 4px 8px;
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 60px;
  line-height: 1.1;
  text-align: center;
  cursor: move;
  pointer-events: auto;
}

.text-item-inner {
  display: inline-block;
  white-space: nowrap;
}

/* Seçili çerçeve (mavi kesik çizgi) */
.text-item.selected::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed #2da9ff;
  border-radius: 4px;
  pointer-events: none;
}

/* Sağ alt köşe resize handle */
.text-resize-handle {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #2da9ff;
  background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  cursor: se-resize;
}

/* =====================
   TEXT PANEL
   ===================== */

.text-controls-panel {
  margin-top: 16px;
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  font-family: inherit;
}

.text-controls-panel.hidden {
  display: none;
}

.text-controls-preview {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.text-controls-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  font-family: Arial, sans-serif;
  background: transparent;
}

.text-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.text-controls-label {
  font-size: 13px;
  color: #555;
  flex: 0 0 80px;
}

/* Renk + stil satırı */
.text-controls-style-row {
  align-items: center;
}

.text-color-picker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

#textColorInput {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ccc;
}

/* Bold/italic butonları */
.text-style-buttons,
.text-align-buttons {
  display: flex;
  gap: 4px;
}

.text-style-btn,
.text-align-btn,
.text-size-btn,
.text-layer-btn {
  border: 1px solid #d0d0d0;
  background: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
}

.text-style-btn:hover,
.text-align-btn:hover,
.text-size-btn:hover,
.text-layer-btn:hover {
  border-color: #00a884;
}

.text-style-btn {
  font-weight: 700;
}

.text-style-btn:nth-child(2) {
  font-style: italic;
}

.text-align-btn.is-active {
  background: #00a884;
  color: #fff;
  border-color: #00a884;
}

/* Font seçimi */
.text-font-select {
  flex: 1;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
}

/* Text size */
.text-size-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-size-number {
  width: 60px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
}

.text-bend-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

#textBendRange {
  flex: 1;
}

.text-bend-value {
  width: 32px;
  text-align: right;
  font-size: 13px;
  color: #555;
}

.text-layer-row {
  justify-content: flex-start;
}

.text-layer-btn {
  font-size: 12px;
}

.text-layer-btn.danger {
  color: #c0392b;
  border-color: #e57373;
}
/* ============================
   TASARLA SAYFASI – POPUP & CANVAS
   ============================ */

/* ---- ÜRÜN SEÇ POPUP (Choose product) ---- */

.product-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.product-picker-overlay.is-visible {
  display: flex;
}

.product-picker-shell {
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

.product-picker-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 0;
}

.product-picker-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}

.product-picker-close:hover {
  color: #000;
}

.product-picker-content {
  flex: 1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  border-top: 1px solid #eee;
  margin-top: 4px;
}

/* Sol panel (volume discount + kategori) */

.mini-store-sidebar {
  border-right: 1px solid #eee;
  background: #fafafa;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
}

.mini-store-panel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.mini-store-label {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 4px;
  color: #555;
}

.mini-store-qty-row {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d0d0d0;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f3f3f3;
  cursor: pointer;
}

.qty-input {
  width: 46px;
  text-align: center;
  border: none;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  font-size: 13px;
}

.mini-store-update-btn {
  margin-top: 10px;
  width: 100%;
  border-radius: 6px;
  border: none;
  padding: 8px 10px;
  background: #009e74;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

.mini-store-update-btn:hover {
  background: #008261;
}

.mini-store-note {
  margin-top: 6px;
  font-size: 11px;
  color: #777;
  line-height: 1.4;
}

.mini-store-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.mini-nav-item {
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: #333;
}

.mini-nav-item.is-active {
  background: #e3f5f0;
  color: #008261;
  font-weight: 600;
}

/* Sağ ana bölüm */

.mini-store-main {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  overflow: hidden;
}

.mini-store-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.mini-store-title {
  font-size: 20px;
  font-weight: 600;
}

.mini-store-filters-row {
  display: flex;
  gap: 10px;
}

.mini-store-select {
  min-width: 150px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
}

/* ÜRÜN GRID */

.mini-store-grid {
  flex: 1;
  overflow-y: auto;
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

/* ÜRÜN KARTI */

.mini-store-card {
  cursor: pointer;
  background: #f8f8f8;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e0e0e0;
  padding: 6px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mini-store-card:hover {
  box-shadow: 0 0 0 2px #00a886;
  transform: translateY(-1px);
}

.mini-store-card-thumb-wrap {
  background: #ffffff;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.mini-store-card-thumb {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* badge + metinler */

.mini-store-badge {
  align-self: flex-start;
  background: #d1ebe2;
  color: #008261;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 500;
}

.mini-store-card-name {
  font-size: 13px;
  font-weight: 500;
}

.mini-store-card-rating {
  font-size: 11px;
  color: #777;
}

.mini-store-card-price {
  font-size: 12px;
  margin-top: 2px;
}

.mini-store-card-price strong {
  font-weight: 600;
}

/* Biraz responsive: sidebar’ı dar ekranda sakla */

@media (max-width: 900px) {
  .product-picker-content {
    grid-template-columns: 1fr;
  }
  .mini-store-sidebar {
    display: none;
  }
}

/* ---- TASARIM CANVAS KATMANI (yazı / upload / design) ---- */

/* Ürünün üzerine gelecek tasarım katmanı */
.designer-product-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}


/* Ortaya eklenen her yazı / görsel */
.design-item {
  position: absolute;
  min-width: 80px;
  min-height: 30px;
  border: 1px dashed transparent;
  transform-origin: center center;
}

/* Seçilince mavi kutu çıksın */
.design-item.is-active {
  border-color: #00a886;
}

/* İçteki gerçek içerik (text ya da img) */
.design-item-content {
  width: 100%;
  height: 100%;
  pointer-events: auto; /* drag vs için */
}

/* Text katmanı için basic stil – JS ile inline style da basacağız */
.design-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  color: #000;
  white-space: pre;
}

/* Köşedeki silme butonu */
.design-remove-btn {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

/* Sağ alttaki büyüt/küçült tutacağı */
.design-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #00a886;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  cursor: nwse-resize;
}
/* =========================
   TEXT EDITOR (sağ panel)
   ========================= */

.text-editor-panel {
  /* JS zaten display:block / none ile açıp kapatıyor */
  padding: 0 16px 16px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px;
}

.text-editor-card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e3e3e3;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Üstteki metin kutusu */
.text-editor-input-wrap {
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  padding: 6px 8px;
}

.text-editor-input {
  width: 100%;
  border: none;
  resize: vertical;
  min-height: 46px;
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
}

.text-editor-input:focus {
  outline: none;
}

/* Toolbar genel */
.text-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.text-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-toolbar-label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

/* Renk seçici */
#textColorInput {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #333;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
#textColorInput::-webkit-color-swatch {
  border-radius: 999px;
  border: none;
}
#textColorInput::-moz-color-swatch {
  border-radius: 999px;
  border: none;
}

/* B / I butonları */
.text-style-btn,
.text-align-btn {
  min-width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-style-btn.is-active,
.text-align-btn.is-active {
  background: #00a886;
  color: #ffffff;
  border-color: #00a886;
}

/* Satırlar (Font, Text size, Bend text) */
.text-editor-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.text-row-label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

/* Font select */
.text-select {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
}

/* Text size kontrolleri */
.text-size-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-size-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.text-size-controls input[type="range"],
.text-bend-controls input[type="range"] {
  flex: 1;
}

.text-size-value {
  width: 32px;
  text-align: right;
  font-size: 13px;
}

/* Bend text slider */
.text-bend-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Alt aksiyon butonları */
.text-editor-actions-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.text-layer-actions,
.text-dupdel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.text-layer-btn {
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

.text-layer-btn.text-delete {
  border-color: #e74c3c;
  color: #e74c3c;
}

.text-layer-btn.text-delete:hover {
  background: #ffecec;
}

.site-header {
  background: #ffffff;         /* gri yerine beyaz */
  box-shadow: none;
  border-bottom: 1px solid #e0e0e0;
}
/* HEADER: logo + nav + search + hesap tek satır */
.nav-search-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* sol logo, sağ hesap */
  gap: 32px;
  padding: 12px 24px;
}

/* Ortadaki nav + search’i yan yana tutan grup */
.nav-center {
  display: flex;
  align-items: center;
  gap: 40px; /* Tasarla ile arama çubuğu arası */
}

/* Tüm ürünler için ortak baskı alanı dikdörtgeni */
.design-canvas {
  position: absolute;

  /* Konum: göğüs hizasına ortalı */
  top: 18%;              /* gerekirse 16–22 arasında oynarsın */
  left: 50%;
  transform: translateX(-50%);

  /* Boyut: biraz aşağı doğru uzun dikdörtgen */
  width: 55%;            /* ürün genişliğinin ~yarısı */
  height: 60%;           /* alta doğru uzun */

  border: 2px dashed #00aaff;
  box-sizing: border-box;
  pointer-events: none;
}

/* ===== Sağdan Açılan Sepet Paneli (Spreadshirt tarzı) ===== */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* arkadaki sayfayı karartan katman */
  display: none;
  justify-content: flex-end;
  z-index: 9999;
}

.cart-overlay.is-open {
  display: flex;
}

.cart-drawer {
  width: 420px;
  max-width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
  font-family: "Roboto", sans-serif;
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5e5;
}

.cart-drawer-title {
  font-size: 20px;
  font-weight: 700;
}

.cart-drawer-close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.cart-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 0 24px;
}

/* Ürün listesi Spreadshirt’e benzesin diye table başlığını gizleyip satırları kart gibi gösteriyoruz */
.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table thead {
  display: none;
}

.cart-item-row td {
  padding: 8px 0;
  border-bottom: 1px solid #eeeeee;
}

.cart-item-product {
  display: flex;
  gap: 12px;
}

.cart-item-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #e5e5e5;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.cart-item-id {
  font-size: 12px;
  color: #777777;
}

.cart-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 4px;
  overflow: hidden;
}

.cart-qty-btn {
  border: none;
  background: #f5f5f5;
  padding: 4px 8px;
  cursor: pointer;
}

.cart-qty-value {
  padding: 0 10px;
  min-width: 24px;
  text-align: center;
}

.cart-remove-btn {
  border: none;
  background: none;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* Alt özet kısmı */

.cart-drawer-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid #e5e5e5;
}

.cart-volume-line {
  font-size: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #222222;
  color: #ffffff;
  text-align: center;
}

.cart-volume-link {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 500;
}

.cart-summary-line,
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-top: 6px;
}

.cart-summary-total {
  font-weight: 700;
  margin-top: 12px;
  font-size: 16px;
}

.cart-checkout-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: #00a33b; /* Spreadshirt yeşiline yakın */
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.cart-checkout-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.cart-clear-link {
  margin-top: 10px;
  border: none;
  background: none;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}


/* ===========================
   SPREADSHIRT-LIKE: PROMO BAR + UTILITY BAR
   =========================== */

.promo-bar{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #111;
  color: #fff;
}

.promo-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}

.promo-left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.promo-badge{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.promo-text{
  font-size: 14px;
  opacity: 0.95;
}

.dot-sep{
  opacity: 0.65;
}

.promo-timer{
  font-size: 14px;
  opacity: 0.95;
}

.promo-timer-label{
  font-size: 12px;
  opacity: 0.8;
  margin-right: 4px;
}

.promo-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.promo-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.promo-cta:hover{
  opacity: 0.92;
}

.promo-close{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.promo-close:hover{
  border-color: rgba(255,255,255,0.45);
}

/* Utility bar (en üst küçük link satırı) */
.utility-bar{
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.utility-inner{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
}

.utility-link{
  color: #333;
  text-decoration: none;
}

.utility-link:hover{
  text-decoration: underline;
}

.utility-dot{
  opacity: 0.5;
}

@media (max-width: 768px){
  .promo-inner{
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0 12px;
  }
  .promo-right{
    width: 100%;
    justify-content: space-between;
  }
  .utility-inner{
    justify-content: center;
    flex-wrap: wrap;
  }
}



/* ===== Spreadshirt-like UI Enhancements ===== */

/* Header search suggestions */
.header-search-main{ position: relative; }



/* ===== Spreadshirt-like UI Enhancements ===== */

/* Header search suggestions */
.header-search-main{ position: relative; }
.search-suggestions{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  padding:10px;
  display:none;
  z-index: 60;
}
.search-suggestions.is-open{ display:block; }
.search-suggestion{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#111;
  text-decoration:none;
  font-weight:600;
}
.search-suggestion:hover{ background: rgba(0,0,0,.05); }
.search-suggestions.is-empty::after{
  content:"Öneri bulunamadı";
  display:block;
  padding:12px;
  color: rgba(0,0,0,.55);
  font-weight:600;
}

/* Gift voucher section */
.gift-voucher-section{ padding: 44px 0; }
.gift-voucher-card{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 24px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(0,0,0,.02), rgba(0,0,0,.00));
  border-radius: 22px;
  padding: 24px;
  overflow:hidden;
}
.gift-voucher-text h2{ margin: 10px 0 8px; font-size: 28px; line-height: 1.15; }
.gift-voucher-text p{ margin: 0 0 14px; color: rgba(0,0,0,.65); font-weight: 600; }
.gift-voucher-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.gift-voucher-meta{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.gift-voucher-meta span{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 700;
  color: rgba(0,0,0,.7);
}
.gift-voucher-visual{ display:flex; align-items:center; justify-content:center; }
.voucher-mock{
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16/10;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
  padding: 16px;
  position: relative;
}
.voucher-top{ display:flex; align-items:center; justify-content:space-between; }
.voucher-brand{ font-weight: 900; letter-spacing: .5px; }
.voucher-chip{ width: 44px; height: 30px; border-radius: 10px; border:1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.35); }
.voucher-mid{
  margin-top: 14px;
  height: 44%;
  border-radius: 14px;
  background: rgba(255,255,255,.35);
  border: 1px dashed rgba(0,0,0,.20);
}
.voucher-bottom{
  position:absolute; left:16px; right:16px; bottom: 14px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}
.voucher-code{ font-weight: 900; }
.voucher-note{ font-weight: 700; color: rgba(0,0,0,.65); }

/* Trending carousel */
.trending-carousel-section{ padding: 44px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; margin-bottom: 16px; }
.section-title{ font-size: 26px; margin:0; }
.section-actions{ display:flex; gap: 10px; }
.carousel-btn{
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  font-size: 22px;
  font-weight: 900;
  cursor:pointer;
}
.carousel-btn:hover{ background: rgba(0,0,0,.04); }

.trend-carousel{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.trend-card{
  flex: 0 0 260px;
  scroll-snap-align: start;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  overflow:hidden;
  text-decoration:none;
  color:#111;
}
.trend-card-hero{ height: 140px; background: rgba(0,0,0,.06); }
.trend-card-body{ padding: 14px; }
.trend-card-body h3{ margin:0 0 6px; font-size: 18px; }
.trend-card-body p{ margin:0; color: rgba(0,0,0,.65); font-weight: 600; }
.tc1{ background: linear-gradient(135deg, rgba(0,0,0,.12), rgba(0,0,0,.02)); }
.tc2{ background: linear-gradient(135deg, rgba(0,0,0,.10), rgba(0,0,0,.00)); }
.tc3{ background: linear-gradient(135deg, rgba(0,0,0,.14), rgba(0,0,0,.02)); }
.tc4{ background: linear-gradient(135deg, rgba(0,0,0,.11), rgba(0,0,0,.01)); }
.tc5{ background: linear-gradient(135deg, rgba(0,0,0,.13), rgba(0,0,0,.02)); }
.tc6{ background: linear-gradient(135deg, rgba(0,0,0,.09), rgba(0,0,0,.00)); }

/* Embroidery CTA */
.embroidery-cta-section{ padding: 44px 0; }
.embroidery-cta{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  padding: 24px;
}
.embroidery-text h2{ margin: 10px 0 8px; font-size: 28px; line-height: 1.15; }
.embroidery-text p{ margin: 0 0 12px; color: rgba(0,0,0,.65); font-weight: 600; max-width: 56ch; }
.embroidery-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.embroidery-bullets{ margin: 14px 0 0; padding-left: 18px; color: rgba(0,0,0,.75); font-weight: 700; }
.embroidery-bullets li{ margin: 6px 0; }
.embroidery-visual{ display:flex; align-items:center; justify-content:center; }
.stitch-card{
  width: min(360px, 100%);
  aspect-ratio: 4/3;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.00));
  overflow:hidden;
  position: relative;
}
.stitch-top{ height: 28%; background: rgba(0,0,0,.06); }
.stitch-mid{ height: 52%; margin: 14px; border-radius: 18px; border: 1px dashed rgba(0,0,0,.22); background: rgba(255,255,255,.55); }
.stitch-bot{
  position:absolute; left:16px; right:16px; bottom: 14px;
  display:flex; gap: 8px;
}
.stitch-dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(0,0,0,.25); }

/* Footer locale */
.footer-locale-bar{
  margin-top: 16px;
  display:flex;
  justify-content:flex-end;
}
.locale-btn{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  cursor:pointer;
  font-weight: 800;
}
.locale-btn:hover{ background: rgba(0,0,0,.04); }
.locale-flag{ font-size: 18px; }
.locale-text{ color: rgba(0,0,0,.75); }
.locale-caret{ color: rgba(0,0,0,.55); }

/* Modal */
body.modal-open{ overflow: hidden; }
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 120;
}
.modal-backdrop.is-open{ display:flex; }
.modal{
  width: min(520px, 100%);
  background:#fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.modal-head h3{ margin:0; font-size: 18px; }
.modal-close{
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  font-size: 22px;
  font-weight: 900;
  cursor:pointer;
}
.modal-close:hover{ background: rgba(0,0,0,.04); }
.modal-body{ padding: 14px 16px 4px; display:grid; gap: 12px; }
.modal-field{ display:grid; gap: 6px; font-weight: 800; color: rgba(0,0,0,.75); }
.modal-field select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight: 700;
}
.modal-actions{ padding: 12px 16px 16px; display:flex; justify-content:flex-end; gap: 10px; }
.modal-hint{ margin: 0; padding: 0 16px 16px; color: rgba(0,0,0,.55); font-weight: 700; }

/* Responsive */
@media (max-width: 900px){
  .gift-voucher-card{ grid-template-columns: 1fr; }
  .embroidery-cta{ grid-template-columns: 1fr; }
  .section-head{ align-items:center; }
}
/* ================================
   GLOBAL CONTAINER (ORTALAMA + GUTTER)
   ================================ */

:root{
  --kano-container-max: 1200px; /* içerik maksimum genişlik */
  --kano-gutter: 24px;          /* sağ/sol boşluk */
}

.container{
  width: 100%;
  max-width: var(--kano-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--kano-gutter);
  padding-right: var(--kano-gutter);
  box-sizing: border-box;
}

/* Mobilde biraz daha sıkı boşluk */
@media (max-width: 768px){
  :root{ --kano-gutter: 16px; }
}
/* =========================================================
   KANO Premium Centering + Gift Card + Trend Icons + Premium Embroidery
   (CSS'i en alta ekle)
   ========================================================= */

/* 1) Sağa-sola yapışmayı kes: sadece bu bölümlere "gutter" ver */
:where(.home-categories-products,
       .gift-voucher-section,
       .trending-carousel-section,
       .embroidery-cta-section) > .container{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* Çok geniş ekranlarda biraz daha nefes */
@media (min-width: 1280px){
  :where(.home-categories-products,
         .gift-voucher-section,
         .trending-carousel-section,
         .embroidery-cta-section) > .container{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 2) Hediye Kartı: sağdaki kart görselini premium yap */
.gift-voucher-visual{ perspective: 900px; } /* mevcut yapıya uyumlu :contentReference[oaicite:4]{index=4} */

.voucher-mock{
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,12);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,55), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(0,0,0,10), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, rgba(0,0,0,06), rgba(0,0,0,01));
  box-shadow:
    0 18px 50px rgba(0,0,0,18),
    0 2px 0 rgba(255,255,255,70) inset;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow: hidden;
  position: relative;
}

.voucher-mock::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,35) 18%,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,0) 100%);
  transform: translateX(-55%);
  opacity: .75;
  pointer-events:none;
}

.voucher-mock::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,10) 0px,
      rgba(255,255,255,10) 2px,
      rgba(255,255,255,0) 6px,
      rgba(255,255,255,0) 12px
    );
  mix-blend-mode: overlay;
  opacity: .25;
  pointer-events:none;
}

.gift-voucher-card:hover .voucher-mock{
  transform: rotateY(-6deg) rotateX(3deg) translateY(-2px);
  box-shadow:
    0 26px 70px rgba(0,0,0,22),
    0 2px 0 rgba(255,255,255,72) inset;
  filter: saturate(1.05);
}

.gift-voucher-card:hover .voucher-mock::before{
  transform: translateX(55%);
  transition: transform .85s ease;
}

/* Kart iç detaylar */
.voucher-brand{
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 950;
}

.voucher-chip{
  background:
    linear-gradient(135deg, rgba(255,255,255,65), rgba(255,255,255,15));
  box-shadow:
    0 10px 24px rgba(0,0,0,14),
    0 1px 0 rgba(255,255,255,80) inset;
  border: 1px solid rgba(0,0,0,18);
  position: relative;
  overflow: hidden;
}

.voucher-chip::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 120% at 20% 20%, rgba(255,255,255,45), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(0,0,0,10), rgba(0,0,0,0));
  opacity:.75;
}

.voucher-mid{
  background:
    linear-gradient(180deg, rgba(255,255,255,42), rgba(255,255,255,26));
  border: 1px dashed rgba(0,0,0,18);
  box-shadow: 0 1px 0 rgba(255,255,255,70) inset;
}

.voucher-code{
  font-weight: 950;
  letter-spacing: .06em;
}

.voucher-note{
  opacity: .9;
}

/* 3) Trend Koleksiyonlar: kartları premium + ikon ekle (HTML'e dokunmadan) */
.trend-card{
  box-shadow: 0 12px 34px rgba(0,0,0,10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.trend-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,0,0,16);
  box-shadow: 0 22px 60px rgba(0,0,0,14);
}

/* hero alanına “premium glow” + ikon rozet */
.trend-card-hero{
  position: relative;
  overflow: hidden;
}

.trend-card-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,45), rgba(255,255,255,0) 55%),
    radial-gradient(120% 120% at 90% 90%, rgba(0,0,0,10), rgba(0,0,0,0) 60%);
  pointer-events:none;
}

.trend-card-hero::after{
  content:"";
  position:absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,85);
  border: 1px solid rgba(0,0,0,10);
  box-shadow: 0 12px 26px rgba(0,0,0,14);
  display:grid;
  place-items:center;
  font-size: 20px;
  font-weight: 900;
}

/* İkon mapping (tc1..tc6 var :contentReference[oaicite:5]{index=5}) */
.trend-card-hero.tc1::after{ content:"🎄"; } /* Yeni Yıl */
.trend-card-hero.tc2::after{ content:"⬜"; } /* Minimal */
.trend-card-hero.tc3::after{ content:"📼"; } /* Retro */
.trend-card-hero.tc4::after{ content:"😂"; } /* Meme */
.trend-card-hero.tc5::after{ content:"🏃"; } /* Spor */
.trend-card-hero.tc6::after{ content:"❤️"; } /* Aşk */

/* Kart başlığının yanında da küçük ikon (hero + body ardışık :contentReference[oaicite:6]{index=6}) */
.trend-card-hero + .trend-card-body h3{
  display:flex;
  align-items:center;
  gap: 10px;
}

.trend-card-hero.tc1 + .trend-card-body h3::before{ content:"🎄"; }
.trend-card-hero.tc2 + .trend-card-body h3::before{ content:"⬜"; }
.trend-card-hero.tc3 + .trend-card-body h3::before{ content:"📼"; }
.trend-card-hero.tc4 + .trend-card-body h3::before{ content:"😂"; }
.trend-card-hero.tc5 + .trend-card-body h3::before{ content:"🏃"; }
.trend-card-hero.tc6 + .trend-card-body h3::before{ content:"❤️"; }

.trend-card-hero + .trend-card-body h3::before{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,04);
  border: 1px solid rgba(0,0,0,08);
  box-shadow: 0 6px 14px rgba(0,0,0,08);
  font-size: 16px;
}

/* 4) Premium (Nakış) bölümünü daha "premium" hissettir + madde ikonları */
.embroidery-cta{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0,0,0,03), rgba(0,0,0,0) 55%),
    #fff;
  box-shadow: 0 14px 44px rgba(0,0,0,10);
  overflow: hidden;
  position: relative;
}

.embroidery-cta::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,40) 18%,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,0) 100%);
  transform: translateX(-60%);
  opacity: .55;
  pointer-events:none;
}

.embroidery-cta:hover::after{
  transform: translateX(60%);
  transition: transform .9s ease;
}

/* Stitch görselini premium doku yap */
.stitch-card{
  background:
    radial-gradient(90% 120% at 20% 20%, rgba(255,255,255,55), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,05) 0px,
      rgba(0,0,0,05) 2px,
      rgba(0,0,0,0) 7px,
      rgba(0,0,0,0) 14px
    ),
    linear-gradient(135deg, rgba(0,0,0,08), rgba(0,0,0,02));
  box-shadow: 0 20px 60px rgba(0,0,0,16);
  position: relative;
  overflow: hidden;
}

.stitch-card::after{
  content:"🧵";
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,85);
  border: 1px solid rgba(0,0,0,10);
  box-shadow: 0 12px 26px rgba(0,0,0,14);
  display:grid;
  place-items:center;
  font-size: 20px;
}

/* bullet'lara ikon */
.embroidery-bullets{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.embroidery-bullets li{
  position: relative;
  padding-left: 30px;
}

.embroidery-bullets li::before{
  content:"✔";
  position:absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,05);
  border: 1px solid rgba(0,0,0,10);
  font-weight: 900;
}

/* her maddeye özel ikon */
.embroidery-bullets li:nth-child(1)::before{ content:"🧵"; } /* Kalın iplik dokusu */
.embroidery-bullets li:nth-child(2)::before{ content:"⏳"; } /* Uzun ömürlü */
.embroidery-bullets li:nth-child(3)::before{ content:"🏢"; } /* Kurumsal siparişe uygun */
/* =========================================================
   Spreadshirt-uyumlu (Kırmızı/Beyaz/Gri/Siyah) LIGHT Premium Fix
   - Gift Card karaltıyı azaltır
   - Trend hero alanlarına "resim placeholder" altyapısı ekler (sonra görsel koyarsın)
   - Embroidery görselini aydınlatır
   ========================================================= */

:root{
  --kano-red: var(--pink-main);
  --kano-red-dark: var(--pink-dark);
  --kano-bg: #f4f4f7;
  --kano-card: #ffffff;
  --kano-border: #e6e6ea;
  --kano-text: #222;
  --kano-muted: #6f6f6f;
  --kano-shadow: 0 18px 50px rgba(0,0,0,.08);
  --kano-shadow-soft: 0 10px 30px rgba(0,0,0,.06);
}

/* ---------- GIFT VOUCHER: karaltıyı kaldır + daha clean premium ---------- */

.gift-voucher-section{ background: transparent; }

.gift-voucher-card{
  background: linear-gradient(180deg, #ffffff, #fafafb);
  border: 1px solid var(--kano-border);
  box-shadow: var(--kano-shadow-soft);
}

/* sağdaki kart */
.voucher-mock{
  border-radius: 18px;
  border: 1px solid var(--kano-border);
  background:
    radial-gradient(120% 120% at 12% 12%, rgba(217,42,41,.10), rgba(217,42,41,0) 55%),
    radial-gradient(120% 120% at 90% 90%, rgba(0,0,0,.06), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #ffffff, #f3f3f6);
  box-shadow: 0 24px 60px rgba(0,0,0,.10);
  position: relative;
  overflow: hidden;
}

/* hafif premium sheen */
.voucher-mock::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 18%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-60%);
  opacity: .6;
  pointer-events:none;
}
.gift-voucher-card:hover .voucher-mock::before{
  transform: translateX(60%);
  transition: transform .9s ease;
}

/* üst şerit: daha temiz */
.voucher-top{
  background: transparent;
}
.voucher-brand{
  color: var(--kano-text);
  font-weight: 900;
  letter-spacing: .08em;
}

/* chip: light, metal hissi */
.voucher-chip{
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, #ffffff, #e9e9ef);
  box-shadow: 0 10px 22px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9) inset;
}

/* orta alan: beyaz placeholder kalsın ama daha temiz */
.voucher-mid{
  background: #ffffff;
  border: 1px dashed rgba(0,0,0,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

/* alt şerit: koyu değil, net */
.voucher-bottom{
  background: transparent;
}
.voucher-code{
  color: #111;
  font-weight: 900;
  letter-spacing: .06em;
}
.voucher-note{
  color: var(--kano-muted);
}

/* ---------- TREND KOLEKSİYONLAR: hero alanlarına "resim placeholder" ---------- */

/* kartların genel tonu Spreadshirt gibi */
.trend-card{
  background: var(--kano-card);
  border: 1px solid var(--kano-border);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.trend-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.10);
}

/* hero artık karanlık gradient değil -> "görsel alanı" */
.trend-card-hero{
  position: relative;
  overflow: hidden;
  background-color: #f1f1f4;

  /* 1) Üstte görsel (sonra sen koyacaksın)
     2) Altta çok hafif doku/gradient fallback */
  background-image:
    var(--trend-img),
    radial-gradient(120% 120% at 20% 15%, rgba(217,42,41,.10), rgba(217,42,41,0) 55%),
    linear-gradient(180deg, #f7f7f9, #efeff4);

  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* Şu URL'leri sen üreteceğin görsellerle değiştir:
   (Dosyaları ekleyince otomatik dolu görünecek) */
.trend-card-hero.tc1{ --trend-img: url("assets/img/trends/newyear.jpg"); }
.trend-card-hero.tc2{ --trend-img: url("assets/img/trends/minimal.jpg"); }
.trend-card-hero.tc3{ --trend-img: url("assets/img/trends/retro.jpg"); }
.trend-card-hero.tc4{ --trend-img: url("assets/img/trends/meme.jpg"); }
.trend-card-hero.tc5{ --trend-img: url("assets/img/trends/sport.jpg"); }
.trend-card-hero.tc6{ --trend-img: url("assets/img/trends/love.jpg"); }

/* hero üstüne çok hafif “cam” katmanı (karartmadan) */
.trend-card-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 15% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 90% 90%, rgba(0,0,0,.06), rgba(0,0,0,0) 65%);
  pointer-events:none;
}

/* ikon rozeti: beyaz + kırmızı outline (Spreadshirt hissi) */
.trend-card-hero::after{
  content:"";
  position:absolute;
  right: 12px;
  top: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  font-size: 18px;
  font-weight: 900;
  color: #111;
}

/* ikon mapping (emoji şimdilik; istersen SVG’ye geçeriz) */
.trend-card-hero.tc1::after{ content:"🎄"; }
.trend-card-hero.tc2::after{ content:"⬜"; }
.trend-card-hero.tc3::after{ content:"📼"; }
.trend-card-hero.tc4::after{ content:"😄"; }
.trend-card-hero.tc5::after{ content:"🏃"; }
.trend-card-hero.tc6::after{ content:"❤"; }

/* başlık önündeki küçük ikon chip’i: kırmızı değil -> sade */
.trend-card-hero + .trend-card-body h3::before{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* ---------- EMBROIDERY: karaltıyı azalt + kumaş hissini light yap ---------- */

.embroidery-cta{
  background: linear-gradient(180deg, #ffffff, #fafafb);
  border: 1px solid var(--kano-border);
  box-shadow: var(--kano-shadow-soft);
}

/* sağdaki kart: siyah yerine light fabric */
.stitch-card{
  border-radius: 18px;
  border: 1px solid var(--kano-border);
  background:
    radial-gradient(120% 120% at 18% 18%, rgba(217,42,41,.10), rgba(217,42,41,0) 55%),
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.04) 0px,
      rgba(0,0,0,.04) 2px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 18px
    ),
    linear-gradient(180deg, #ffffff, #f2f2f6);
  box-shadow: 0 24px 60px rgba(0,0,0,.10);
  position: relative;
  overflow: hidden;
}

/* sağ alt rozet */
.stitch-card::after{
  content:"🧵";
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  font-size: 18px;
}

/* bullet ikonları daha sade (karartmasın) */
.embroidery-bullets li::before{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
/* --- FIX: Trend görselleri path (append only) --- */
/* CSS dosyan assets/css içinde olduğu için url("assets/...") yanlış kalıyor.
   Root absolute kullan: /assets/img/... */

.trend-card-hero.tc1{ --trend-img: url("/assets/img/trends/newyear.jpg"); }
.trend-card-hero.tc2{ --trend-img: url("/assets/img/trends/minimal.jpg"); }
.trend-card-hero.tc3{ --trend-img: url("/assets/img/trends/retro.jpg"); }
.trend-card-hero.tc4{ --trend-img: url("/assets/img/trends/meme.jpg"); }
.trend-card-hero.tc5{ --trend-img: url("/assets/img/trends/sport.jpg"); }
.trend-card-hero.tc6{ --trend-img: url("/assets/img/trends/love.jpg"); }
/* =========================
   EMBROIDERY (Nakış) Premium Polish — append only
   Targets: .embroidery-cta-section / .embroidery-actions / .stitch-card
   ========================= */

/* Layout: kartı biraz daha premium nefeslendirelim */
.embroidery-cta-section { padding: 54px 0; } /* mevcut 44px üstüne override */ /* :contentReference[oaicite:1]{index=1} */
.embroidery-cta{
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  padding: 28px;
  gap: 28px;
  overflow: hidden;
  position: relative;
}

/* Üstte hafif “shine” */
.embroidery-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 18%, rgba(255,255,255,0) 38%);
  opacity: .55;
  pointer-events:none;
  transform: translateX(-55%);
  transition: transform .9s ease;
}
.embroidery-cta:hover::before{ transform: translateX(55%); }

/* Metin okunurluğu */
.embroidery-text h2{
  font-size: 30px;
  letter-spacing: -0.2px;
}
.embroidery-text p{
  color: rgba(0,0,0,.62);
  font-weight: 600;
}

/* -------- Buttons: “Nakışla Tasarla / Nakış Ürünleri” pill buton gibi olsun -------- */
/* HTML: .embroidery-actions içinde iki adet <a class="btn btn-primary"> / <a class="btn btn-ghost"> var :contentReference[oaicite:2]{index=2} */
.embroidery-actions{
  gap: 12px;
  margin-top: 14px;
}

.embroidery-actions .btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.embroidery-actions .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.embroidery-actions .btn:active{
  transform: translateY(0px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* ikon chip */
.embroidery-actions .btn::before{
  content:"";
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  flex: 0 0 28px;
}

/* Primary: kırmızı pill + beyaz yazı */
.embroidery-actions .btn.btn-primary{
  background: linear-gradient(180deg, var(--pink-main, #D92A29), var(--pink-dark, #B41F1F));
  border-color: rgba(0,0,0,.10);
  color: #fff;
}
.embroidery-actions .btn.btn-primary::before{
  content:"🧵"; /* istersen sonra SVG’ye çeviririz */
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  font-size: 16px;
}

/* Ghost: beyaz/outline premium */
.embroidery-actions .btn.btn-ghost{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.82);
}
.embroidery-actions .btn.btn-ghost::before{
  content:"🪡"; /* nakış iğnesi */
  font-size: 16px;
}

/* -------- Bullet’lar: daha clean ikon + hizalama -------- */
.embroidery-bullets{
  list-style: none;
  padding-left: 0;
  margin: 18px 0 0;
}
.embroidery-bullets li{
  position: relative;
  padding-left: 32px;
  margin: 8px 0;
  color: rgba(0,0,0,.74);
  font-weight: 800;
}
.embroidery-bullets li::before{
  content:"✓";
  position:absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  color: rgba(0,0,0,.75);
}

/* -------- Right Visual: Stitch Card premium embroidery look -------- */
/* mevcut .stitch-card/.stitch-top/.stitch-mid/.stitch-bot yapısını güzelleştiriyoruz :contentReference[oaicite:3]{index=3} */
.embroidery-visual{ justify-content: center; }

.stitch-card{
  width: min(380px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(120% 120% at 18% 18%, rgba(217,42,41,.10), rgba(217,42,41,0) 55%),
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.035) 0px,
      rgba(0,0,0,.035) 2px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 18px
    ),
    linear-gradient(180deg, #ffffff, #f2f2f6);
  box-shadow: 0 26px 70px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}

/* hoop (kasnak) halkası efekti */
.stitch-card::before{
  content:"";
  position:absolute;
  inset: 18% 14%;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,.55),
    inset 0 0 0 12px rgba(0,0,0,.05),
    0 18px 40px rgba(0,0,0,.10);
  pointer-events:none;
}

/* sağ alt “rozet” daha premium */
.stitch-card::after{
  content:"🧵";
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  font-size: 18px;
}

/* üst alan: light header (kart gibi) */
.stitch-top{
  height: 28%;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0));
}

/* orta alan: “embroidery area” daha net */
.stitch-mid{
  height: 52%;
  margin: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(0,0,0,.20);
  background:
    radial-gradient(120% 120% at 25% 25%, rgba(255,255,255,.95), rgba(255,255,255,.55) 60%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

/* alt dotlar: slider hissi gibi */
.stitch-bot{
  left: 18px;
  right: 18px;
  bottom: 16px;
  gap: 10px;
}
.stitch-dot{
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,.20);
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
}

/* Mobil: sağ kart biraz küçülsün */
@media (max-width: 900px){
  .embroidery-cta{
    grid-template-columns: 1fr;
  }
  .stitch-card{
    width: min(420px, 100%);
    margin-top: 8px;
  }
}
/* =========================
   EMBROIDERY Right Card — EXTRA PREMIUM (append only)
   ========================= */

/* Kart: daha “product mockup” hissi */
.stitch-card{
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 40px 90px rgba(0,0,0,.14),
    0 10px 26px rgba(0,0,0,.10);
  background:
    radial-gradient(140% 120% at 18% 18%, rgba(217,42,41,.14), rgba(217,42,41,0) 60%),
    radial-gradient(120% 120% at 80% 22%, rgba(0,0,0,.06), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.035) 0px,
      rgba(0,0,0,.035) 2px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 18px
    ),
    linear-gradient(180deg, #ffffff 0%, #f2f2f6 100%);
  overflow: hidden;
  position: relative;
}

/* üst “cam” parlama katmanı */
.stitch-card::marker{ content:""; } /* bazı browserlarda pseudo noise engeli */
.stitch-card::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 22px;
  pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.55) 18%, rgba(255,255,255,0) 40%),
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%);
  opacity: .65;
  transform: translateX(-30%);
  transition: transform .8s ease, opacity .4s ease;
}
.stitch-card:hover::before{
  transform: translateX(30%);
  opacity: .78;
}

/* 3D “kasnak” (hoop) — daha gerçekçi halka + gölge */
.stitch-card::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 52%;
  width: 76%;
  height: 56%;
  transform: translate(-50%, -50%);
  border-radius: 28px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    inset 0 0 0 12px rgba(255,255,255,.55),
    inset 0 0 0 14px rgba(0,0,0,.06),
    0 20px 45px rgba(0,0,0,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.25));
  opacity: .95;
}

/* Üst area: daha “premium” header hissi */
.stitch-top{
  height: 26%;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0));
}

/* Ortadaki nakış alanı: kumaş + thread dokusu + inner shadow */
.stitch-mid{
  height: 52%;
  margin: 16px;
  border-radius: 20px;
  border: 1px dashed rgba(0,0,0,.20);
  position: relative;
  background:
    radial-gradient(140% 120% at 35% 25%, rgba(255,255,255,.92), rgba(255,255,255,.55) 65%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

/* thread pattern overlay (çok low contrast) */
.stitch-mid::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.028) 0px,
      rgba(0,0,0,.028) 1px,
      rgba(0,0,0,0) 6px,
      rgba(0,0,0,0) 12px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 18px
    );
  opacity: .45;
}

/* “embroidery sample” — minik nakış izi (kırmızı vurgu) */
.stitch-mid::after{
  content:"";
  position:absolute;
  left: 16%;
  top: 18%;
  width: 68%;
  height: 50%;
  border-radius: 16px;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 40%, rgba(217,42,41,.0) 0 8px, rgba(217,42,41,.18) 9px 10px, rgba(217,42,41,0) 11px),
    radial-gradient(circle at 34% 55%, rgba(217,42,41,.0) 0 8px, rgba(217,42,41,.18) 9px 10px, rgba(217,42,41,0) 11px),
    radial-gradient(circle at 50% 42%, rgba(217,42,41,.0) 0 8px, rgba(217,42,41,.18) 9px 10px, rgba(217,42,41,0) 11px),
    radial-gradient(circle at 66% 58%, rgba(217,42,41,.0) 0 8px, rgba(217,42,41,.18) 9px 10px, rgba(217,42,41,0) 11px),
    radial-gradient(circle at 82% 45%, rgba(217,42,41,.0) 0 8px, rgba(217,42,41,.18) 9px 10px, rgba(217,42,41,0) 11px),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,0) 55%);
  opacity: .55;
}

/* Sağ alt rozet: daha premium “chip” + ikon */
.stitch-card .emb-badge,
.stitch-card .stitch-badge{ display:none; } /* varsa eski badge’i bastır */

.stitch-card{
  padding-bottom: 10px; /* dotlar için nefes */
}

/* Yeni rozet (CSS ile) */
.stitch-card .stitch-bot{ z-index: 2; }
.stitch-card .stitch-bot::after{
  content:"🧵";
  position:absolute;
  right: -2px;
  bottom: 44px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
  display:grid;
  place-items:center;
  font-size: 18px;
}

/* Minik “Premium Embroidery” label (çok hafif) */
.stitch-card .stitch-top::after{
  content:"Premium • Embroidery";
  position:absolute;
  left: 18px;
  top: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18px;
  color: rgba(0,0,0,.45);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* Dotlar: daha premium slider dot */
.stitch-bot{
  left: 18px;
  right: 18px;
  bottom: 16px;
  gap: 10px;
}
.stitch-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  opacity: .75;
}
.stitch-dot:first-child{
  background: rgba(0,0,0,.32);
  opacity: 1;
}

/* Hover: kart biraz “float” etsin */
@media (hover:hover){
  .stitch-card{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .stitch-card:hover{
    transform: translateY(-2px);
    box-shadow:
      0 48px 110px rgba(0,0,0,.16),
      0 14px 30px rgba(0,0,0,.12);
  }
}
/* === HERO SLIDER: daha uzun (eni sabit, sadece yükseklik) === */
.hero-slider .hero-slider-inner{
  height: 560px !important; /* 420px -> daha uzun */
}

/* Tablet / mobilde de dengeli kalsın */
@media (max-width: 1024px){
  .hero-slider .hero-slider-inner{
    height: 500px !important;
  }
}
@media (max-width: 768px){
  .hero-slider .hero-slider-inner{
    height: 380px !important; /* 300px -> daha uzun */
  }
}
@media (max-width: 480px){
  .hero-slider .hero-slider-inner{
    height: 330px !important;
  }
}}
@media (max-width: 480px){
  .hero-slider .hero-slider-inner{
    height: 330px !important;
  }
}
/* ================================
   GIFT VOUCHER — 더 PREMIUM (append-only)
   ================================ */

.gift-voucher-section{
  padding: 56px 0;
}}
/* ================================
   GIFT VOUCHER — 더 PREMIUM (append-only)
   ================================ */

.gift-voucher-section{
  padding: 56px 0;
}

.gift-voucher-card{
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(1200px 420px at 18% 25%, rgba(217,42,41,.08), rgba(217,42,41,0) 55%),
    radial-gradient(900px 520px at 85% 40%, rgba(0,0,0,.06), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:
    0 28px 70px rgba(0,0,0,.10),
    0 2px 0 rgba(255,255,255,.75) inset;
  overflow: hidden;
}

.gift-voucher-card::before{
  /* çok hafif “premium texture” */
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.045) 1px, transparent 1.6px);
  background-size: 18px 18px;
  opacity:.10;
  pointer-events:none;
  mix-blend-mode: multiply;
}

.gift-voucher-card::after{
  /* ince kırmızı vurgu çizgisi */
  content:"";
  position:absolute;
  left: 26px;
  top: 26px;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217,42,41,.95), rgba(217,42,41,.15));
  opacity:.9;
  pointer-events:none;
}

.gift-voucher-text{
  align-self: center;
}

.gift-voucher-text .badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(217,42,41,.22);
  background: rgba(217,42,41,.06);
  color: rgba(217,42,41,.95);
  font-weight: 900;
  letter-spacing: .02em;
}

/* Başlık ve açıklama daha “clean” */
.gift-voucher-text h2{
  font-size: 30px;
  letter-spacing: -.02em;
  margin-top: 12px;
}

.gift-voucher-text p{
  color: rgba(0,0,0,.62);
  font-weight: 650;
}

/* Butonlar: daha premium, sabit yükseklik, hover */
.gift-voucher-actions .btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.gift-voucher-actions .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  filter: saturate(1.02);
}

/* Fiyat pill’leri: daha “selectable” görünüm */
.gift-voucher-meta span{
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.gift-voucher-meta span:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.14);
}

/* ---------- Sağ kart mockup: daha gerçekçi ---------- */
.gift-voucher-visual{
  perspective: 1100px;
}

.voucher-mock{
  max-width: 360px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 58%),
    radial-gradient(120% 140% at 100% 100%, rgba(0,0,0,.14), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.015));
  box-shadow:
    0 22px 70px rgba(0,0,0,.18),
    0 2px 0 rgba(255,255,255,.75) inset;
  transform: rotateY(-4deg) rotateX(2deg);
  overflow:hidden;
}

/* Kart üzerinde çok hafif diagonal “premium foil” */
.voucher-mock::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.14) 0px,
      rgba(255,255,255,.14) 2px,
      rgba(255,255,255,0) 7px,
      rgba(255,255,255,0) 14px
    );
  opacity:.22;
  pointer-events:none;
  mix-blend-mode: overlay;
}

.voucher-mock::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.40) 18%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-60%);
  opacity:.80;
  pointer-events:none;
  transition: transform .9s ease;
}

.gift-voucher-card:hover .voucher-mock::before{
  transform: translateX(60%);
}

/* Brand daha premium + kırmızı mikro nokta */
.voucher-brand{
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  position: relative;
}

.voucher-brand::after{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #D92A29;
  display:inline-block;
  margin-left: 8px;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(217,42,41,.25);
}

/* Chip daha “metallic” */
.voucher-chip{
  width: 48px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.18));
  box-shadow:
    0 12px 28px rgba(0,0,0,.16),
    0 1px 0 rgba(255,255,255,.85) inset;
  position: relative;
  overflow:hidden;
}

.voucher-chip::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 120% at 20% 20%, rgba(255,255,255,.50), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  opacity:.75;
}

/* Orta alan: daha “embossed” */
.voucher-mid{
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.24));
  border: 1px dashed rgba(0,0,0,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 14px 30px rgba(0,0,0,.10);
}

/* Kod + açıklama daha okunur */
.voucher-bottom{
  gap: 12px;
}

.voucher-code{
  font-weight: 950;
  letter-spacing: .08em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
}

.voucher-note{
  font-weight: 800;
  color: rgba(0,0,0,.60);
}

/* Mobil: kart daha ferah */
@media (max-width: 900px){
  .gift-voucher-card{
    padding: 20px;
    border-radius: 22px;
  }
  .voucher-mock{
    transform: none;
    max-width: 420px;
  }
}
/* =========================================================
   GIFT CARD – ekstra premium (sadece CSS, altta override)
   ========================================================= */

/* Kartın genel “pro” hissi */
.gift-voucher-card{
  position: relative;
  overflow: hidden;
}

/* Sağ kart: biraz daha “real card” derinliği + kenar highlight */
.gift-voucher-visual .voucher-mock{
  box-shadow:
    0 28px 80px rgba(0,0,0,0.20),
    0 2px 0 rgba(255,255,255,0.78) inset,
    0 -1px 0 rgba(0,0,0,0.05) inset;
}

/* Orta boş alan: emboss + ikon + çok hafif doku */
.voucher-mid{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* subtle inner shine */
.voucher-mid::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 80% at 20% 15%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%),
    radial-gradient(120% 90% at 85% 75%, rgba(0,0,0,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
  opacity: .9;
  pointer-events:none;
}

/* Gift ikon watermark (SVG – kırmızı vurgu #D92A29) */
.voucher-mid::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360' viewBox='0 0 720 360'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.03'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='186' y='132' width='348' height='160' rx='22' stroke='url(%23g)' stroke-width='10'/%3E%3Crect x='210' y='160' width='300' height='110' rx='18' stroke='%23000' stroke-opacity='.10' stroke-width='6'/%3E%3Cpath d='M360 132v160' stroke='%23D92A29' stroke-opacity='.30' stroke-width='12'/%3E%3Cpath d='M186 182h348' stroke='%23D92A29' stroke-opacity='.18' stroke-width='10'/%3E%3Cpath d='M330 118c-18-26-68-10-52 22 10 20 52 22 82 18' stroke='%23D92A29' stroke-opacity='.26' stroke-width='10'/%3E%3Cpath d='M390 118c18-26 68-10 52 22-10 20-52 22-82 18' stroke='%23D92A29' stroke-opacity='.26' stroke-width='10'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 55%;
  background-size: min(92%, 520px);
  opacity: .55;
  filter: blur(.1px);
  pointer-events:none;
  mix-blend-mode: multiply;
}

/* Dikiş/texture hissi: çok hafif nokta grid */
.voucher-mid{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.055) 1px, transparent 1.6px);
  background-size: 18px 18px;
  background-blend-mode: multiply;
}

/* Brand ve kod satırı daha premium okunur */
.voucher-brand{
  letter-spacing: .12em;
}
.voucher-code{
  letter-spacing: .10em;
}

/* Alt kısım (kod/not) daha “badge” gibi */
.voucher-bottom{
  gap: 12px;
}
.voucher-code{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.75) inset;
}
.voucher-note{
  opacity: .92;
}

/* Fiyat pill’leri: daha “selectable”, hover’da premium */
.gift-voucher-meta span{
  background: rgba(255,255,255,0.70);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.80) inset;
}
.gift-voucher-meta span:active{
  transform: translateY(0);
  filter: saturate(1.05);
}

/* CTA butonlar: daha net hover + focus ring */
.gift-voucher-actions .btn{
  outline: none;
}
.gift-voucher-actions .btn:focus-visible{
  box-shadow:
    0 18px 44px rgba(0,0,0,0.12),
    0 0 0 4px rgba(217,42,41,0.16);
}
/* ================================
   Footer locale: newsletter altına al + daha kare/premium yap
   (CSS'i EN ALTA ekle)
================================ */

/* Grid içinde 1. kolona (newsletter tarafı) sabitle */
.footer-locale-bar{
  grid-column: 1 / 2;
  justify-content: flex-start !important;  /* sağa yaslamayı kapat */
  padding-left: 24px;                      /* newsletter iç padding hizası */
  margin-top: 12px !important;
}

/* Masaüstünde biraz daha "newsletter’a yakın" dursun */
@media (min-width: 900px){
  .footer-locale-bar{
    margin-top: -6px !important;           /* kartın altına daha yakın */
  }
}

/* Daha kare + profesyonel buton */
.locale-btn{
  border-radius: 14px !important;          /* pill değil, modern rounded */
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.locale-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,12);
  background: rgba(255,255,255,98) !important;
}

.locale-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(0,0,0,10);
}

.locale-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(217,42,41,18), 0 14px 34px rgba(0,0,0,12);
}

/* Tipografi ufak cilalar */
.locale-flag{ font-size: 18px; }
.locale-text{
  color: rgba(0,0,0,80) !important;
  font-weight: 800 !important;
  letter-spacing: .1px;
}
.locale-caret{
  color: rgba(0,0,0,55) !important;
  font-size: 12px;
}
/* =========================================================
   SPREADSHIRT PREMIUM TOUCH: CHIP + PILL ACTIVE STATE
   (CSS'i en alta ekle)
========================================================= */

/* --- 1) Chip'i daha gerçekçi "metallic" yap --- */
.gift-voucher-card .voucher-chip{
  width: 52px;
  height: 34px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;

  /* metal katmanlar */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.25) 32%,
      rgba(0,0,0,.10) 55%,
      rgba(255,255,255,.20) 78%,
      rgba(255,255,255,.70) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.70),
      rgba(0,0,0,.10));

  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(0,0,0,.08) inset;
  transform: translateY(-1px);
}

/* iç çizgiler + mikro parlama */
.gift-voucher-card .voucher-chip::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.0) 0px,
      rgba(255,255,255,.0) 6px,
      rgba(255,255,255,.18) 10px,
      rgba(255,255,255,.0) 16px
    );
  opacity:.35;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* hotspot + "contact" izleri */
.gift-voucher-card .voucher-chip::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 120% at 18% 18%,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.0) 55%),
    radial-gradient(12px 10px at 65% 55%,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.0) 70%),
    radial-gradient(12px 10px at 80% 55%,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.0) 70%),
    linear-gradient(90deg,
      rgba(0,0,0,.10),
      rgba(0,0,0,.0) 55%);
  opacity:.85;
  pointer-events:none;
}

/* --- 2) Fiyat pill'leri: premium görünüm + selected state --- */
.gift-voucher-card .gift-voucher-meta span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  min-width: 64px;
  border-radius: 999px;

  background: linear-gradient(180deg, #ffffff, #f6f6f7);
  border: 1px solid rgba(17,17,17,.14);
  box-shadow:
    0 1px 0 rgba(17,17,17,.06),
    0 10px 24px rgba(0,0,0,.06);

  font-weight: 800;
  letter-spacing: .01em;
  color: rgba(0,0,0,.78);

  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.gift-voucher-card .gift-voucher-meta span:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.22);
  box-shadow:
    0 1px 0 rgba(17,17,17,.06),
    0 14px 30px rgba(0,0,0,.10);
}

/* Default selected: ilk pill seçili dursun */
.gift-voucher-card .gift-voucher-meta span:first-child{
  background: linear-gradient(180deg, rgba(217,42,41,.16), rgba(217,42,41,.08));
  border-color: rgba(217,42,41,.35);
  color: rgba(120,0,0,.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 14px 30px rgba(217,42,41,.14);
}

/* Basılı (click) hissi */
.gift-voucher-card .gift-voucher-meta span:active{
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(17,17,17,.06),
    0 10px 24px rgba(0,0,0,.08);
}

/* :has() varsa: hover edilen pill aktif görünsün (Spreadshirt hissi) */
@supports(selector(:has(*))){
  .gift-voucher-card .gift-voucher-meta:has(span:hover) span:first-child{
    /* hover varken default aktifliği kapat */
    background: linear-gradient(180deg, #ffffff, #f6f6f7);
    border-color: rgba(17,17,17,.14);
    color: rgba(0,0,0,.78);
    box-shadow:
      0 1px 0 rgba(17,17,17,.06),
      0 10px 24px rgba(0,0,0,.06);
  }

  /* Hangi span hover ise onu aktif göster (4 pill için) */
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(1):hover) span:nth-child(1),
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(2):hover) span:nth-child(2),
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(3):hover) span:nth-child(3),
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(4):hover) span:nth-child(4){
    background: linear-gradient(180deg, rgba(217,42,41,.16), rgba(217,42,41,.08));
    border-color: rgba(217,42,41,.35);
    color: rgba(120,0,0,.95);
    box-shadow:
      0 1px 0 rgba(255,255,255,.8) inset,
      0 14px 30px rgba(217,42,41,.14);
  }
}
/* =========================================================
   SPREADSHIRT PREMIUM V2: Gift card cam derinlik + chip metal
   + fiyat pill sparkle/₺ + hover active (:has)
   (APPEND-ONLY)
========================================================= */

/* 1) Sağ kart: "glass + depth + vignette" */
.gift-voucher-visual{
  perspective: 1200px;
}

.gift-voucher-card .voucher-mock{
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;

  /* daha premium derinlik */
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.14);

  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.70), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(0,0,0,.20), rgba(0,0,0,0) 58%),
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.12));

  box-shadow:
    0 30px 90px rgba(0,0,0,.22),
    0 2px 0 rgba(255,255,255,.70) inset,
    0 -1px 0 rgba(0,0,0,.08) inset;

  transform: rotateY(-6deg) rotateX(2.5deg) translateZ(0);
}

/* Kenar highlight + vignette */
.gift-voucher-card .voucher-mock::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(110% 90% at 12% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    radial-gradient(120% 120% at 90% 85%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.08));
  opacity:.95;
  pointer-events:none;
  mix-blend-mode: multiply;
}

/* Cam sheen sweep (hover) */
.gift-voucher-card .voucher-mock::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.52) 18%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-70%);
  opacity:.85;
  pointer-events:none;
  transition: transform .9s ease;
  mix-blend-mode: overlay;
}

.gift-voucher-card:hover .voucher-mock::after{
  transform: translateX(70%);
}

/* 2) Chip: daha gerçek metal + mikro çizgiler */
.gift-voucher-card .voucher-chip{
  width: 52px;
  height: 34px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.30) 28%,
      rgba(0,0,0,.14) 55%,
      rgba(255,255,255,.22) 78%,
      rgba(255,255,255,.76) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.75),
      rgba(0,0,0,.12));

  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(0,0,0,.08) inset;
  transform: translateY(-1px);
}

.gift-voucher-card .voucher-chip::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 7px,
      rgba(255,255,255,.22) 11px,
      rgba(255,255,255,0) 17px
    );
  opacity:.35;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.gift-voucher-card .voucher-chip::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 120% at 18% 18%,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,0) 55%),
    radial-gradient(12px 10px at 65% 55%,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,0) 70%),
    radial-gradient(12px 10px at 80% 55%,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,0) 70%);
  opacity:.85;
  pointer-events:none;
}

/* 3) Fiyat pill: seçili görünüm + minik ₺ + sparkle */
.gift-voucher-card .gift-voucher-meta span{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  min-width: 66px;
  border-radius: 999px;

  background: linear-gradient(180deg, #ffffff, #f6f6f7);
  border: 1px solid rgba(17,17,17,.14);
  box-shadow:
    0 1px 0 rgba(17,17,17,.06),
    0 12px 26px rgba(0,0,0,.06);

  font-weight: 850;
  letter-spacing: .01em;
  color: rgba(0,0,0,.78);

  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease, filter .16s ease;
}

/* minik ₺ badge */
.gift-voucher-card .gift-voucher-meta span::before{
  content:"₺";
  position:absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.36);
  opacity: .85;
  pointer-events:none;
}

/* sparkle */
.gift-voucher-card .gift-voucher-meta span::after{
  content:"";
  position:absolute;
  right: 9px;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%);
  opacity: .0;
  transform: scale(.9);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

.gift-voucher-card .gift-voucher-meta span:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.22);
  box-shadow:
    0 1px 0 rgba(17,17,17,.06),
    0 16px 34px rgba(0,0,0,.10);
}

.gift-voucher-card .gift-voucher-meta span:hover::after{
  opacity: .9;
  transform: scale(1);
}

/* default selected: ilk pill */
.gift-voucher-card .gift-voucher-meta span:first-child{
  background: linear-gradient(180deg, rgba(217,42,41,.18), rgba(217,42,41,.08));
  border-color: rgba(217,42,41,.38);
  color: rgba(120,0,0,.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 16px 34px rgba(217,42,41,.14);
  filter: saturate(1.02);
}

.gift-voucher-card .gift-voucher-meta span:first-child::before{
  color: rgba(217,42,41,.55);
}

.gift-voucher-card .gift-voucher-meta span:active{
  transform: translateY(0);
  filter: saturate(1.06);
}

/* :has() varsa: hover edilen pill aktif görünsün (4 pill) */
@supports(selector(:has(*))){
  .gift-voucher-card .gift-voucher-meta:has(span:hover) span:first-child{
    background: linear-gradient(180deg, #ffffff, #f6f6f7);
    border-color: rgba(17,17,17,.14);
    color: rgba(0,0,0,.78);
    box-shadow:
      0 1px 0 rgba(17,17,17,.06),
      0 12px 26px rgba(0,0,0,.06);
    filter: none;
  }

  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(1):hover) span:nth-child(1),
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(2):hover) span:nth-child(2),
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(3):hover) span:nth-child(3),
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(4):hover) span:nth-child(4){
    background: linear-gradient(180deg, rgba(217,42,41,.18), rgba(217,42,41,.08));
    border-color: rgba(217,42,41,.38);
    color: rgba(120,0,0,.95);
    box-shadow:
      0 1px 0 rgba(255,255,255,.8) inset,
      0 16px 34px rgba(217,42,41,.14);
    filter: saturate(1.02);
  }

  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(1):hover) span:nth-child(1)::before,
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(2):hover) span:nth-child(2)::before,
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(3):hover) span:nth-child(3)::before,
  .gift-voucher-card .gift-voucher-meta:has(span:nth-child(4):hover) span:nth-child(4)::before{
    color: rgba(217,42,41,.55);
  }
}

/* Mobil: kart eğimi kapansın daha clean */
@media (max-width: 900px){
  .gift-voucher-card .voucher-mock{
    transform: none;
  }
}

/* =========================================================
   KANO – MAĞAZA (Premium Override)
   En sona yapıştır. (store.js hangi class'ı üretirse üretsin
   kartları ve içindeki form elemanlarını premiumlaştırır)
========================================================= */

:root{
  --kano-bg: #F4F4F7;
  --kano-card: #FFFFFF;
  --kano-text: #111111;
  --kano-muted: #6B7280;
  --kano-border: rgba(15, 23, 42, 0.10);
  --kano-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --kano-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* sayfa zemin */
.store-main{
  background: var(--kano-bg) !important;
}

/* layout biraz daha “Spreadshirt premium” nefes */
.store-container{
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.store-layout{
  gap: 28px !important;
  align-items: flex-start !important;
}

/* SIDEBAR: daha modern kart */
.store-sidebar{
  width: 260px !important;
  border-radius: 18px !important;
  background: var(--kano-card) !important;
  border: 1px solid var(--kano-border) !important;
  box-shadow: var(--kano-shadow) !important;
  padding: 18px !important;
}

/* Sidebar başlık */
.store-sidebar-title{
  font-size: 16px !important;
  color: var(--kano-text) !important;
}

/* Kadın/Erkek/Unisex grup kartları – palette RED uyum */
.store-sidebar-group{
  background: #FAFAFB !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
}

.store-sidebar-group:hover{
  border-color: rgba(217,42,41,0.45) !important; /* --pink-main */
  box-shadow: 0 10px 26px rgba(217,42,41,0.10) !important;
  background: #FFFFFF !important;
}

.store-sidebar-group-toggle{
  padding: 10px 12px !important;
  font-weight: 700 !important;
  color: var(--kano-text) !important;
}

.store-sidebar-list{
  padding: 6px 6px 10px !important;
}

.store-sidebar-list a{
  border-radius: 12px !important;
  color: var(--kano-text) !important;
}

.store-sidebar-list a:hover{
  background: rgba(217,42,41,0.06) !important;
  transform: translateX(2px);
}

.store-sidebar-list a.is-active{
  background: var(--pink-main, #D92A29) !important;
  color: #fff !important;
}

/* CONTENT üst bar: daha premium */
.store-toolbar{
  background: var(--kano-card) !important;
  border: 1px solid var(--kano-border) !important;
  border-radius: 18px !important;
  padding: 16px 16px 14px !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06) !important;
  gap: 12px !important;
}

.store-title{
  font-size: 34px !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
  color: var(--kano-text) !important;
}

/* Filtre alanları daha “UI kit” */
.store-filters{
  gap: 12px !important;
}

.store-filters label{
  font-size: 12px !important;
  color: var(--kano-muted) !important;
  font-weight: 600;
  text-transform: none;
}

.store-filters select{
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  padding: 0 42px 0 12px !important;
  font-size: 14px !important;
  color: var(--kano-text) !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.store-filters select:focus{
  border-color: rgba(217,42,41,0.65) !important;
  box-shadow: 0 0 0 4px rgba(217,42,41,0.10) !important;
}

/* GRID: daha dengeli kartlar */
.store-grid{
  gap: 22px !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* store.js farklı class üretse bile: store-grid içindeki “kart” adaylarını yakala */
.store-grid > *{
  background: var(--kano-card) !important;
  border: 1px solid var(--kano-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06) !important;
  padding: 14px !important;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.store-grid > *:hover{
  transform: translateY(-3px);
  box-shadow: var(--kano-shadow-hover) !important;
  border-color: rgba(0,0,0,0.16) !important;
}

/* Eğer kartlara .product-card geliyorsa onu da güçlendir */
.store-grid .product-card{
  padding: 14px !important;
}

/* Ürün görseli: taşmasın, premium “frame” */
.store-grid img{
  max-width: 100%;
  height: auto;
  display: block;
}

.store-grid > * img:first-of-type{
  width: 100%;
  background: linear-gradient(180deg, #F7F7F8, #F1F1F3) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  object-fit: contain !important;
}

/* Başlık linkleri: mavi/altı çizili default'u kaldır */
.store-grid a{
  color: var(--kano-text) !important;
  text-decoration: none !important;
}

.store-grid a:hover{
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Kart içi “başlık” metinleri */
.store-grid .product-name,
.store-grid .product-title,
.store-grid h3, .store-grid h4{
  margin: 10px 0 6px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em;
  color: var(--kano-text) !important;
}

/* Fiyat */
.store-grid .product-price,
.store-grid .price,
.store-grid strong{
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--kano-text) !important;
}

/* Variant alanları: label + select (kart içinde ne varsa yakala) */
.store-grid label{
  font-size: 12px !important;
  color: var(--kano-muted) !important;
  font-weight: 650 !important;
}

.store-grid select{
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  padding: 0 36px 0 10px !important;
  font-size: 13px !important;
  color: var(--kano-text) !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 17px,
    calc(100% - 10px) 17px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.store-grid select:focus{
  border-color: rgba(217,42,41,0.65) !important;
  box-shadow: 0 0 0 4px rgba(217,42,41,0.10) !important;
}

/* Sepete Ekle butonu (hangi class gelirse gelsin) */
.store-grid button{
  border: 0;
  border-radius: 14px;
  height: 44px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.store-grid .btn-add-to-cart,
.store-grid button[type="submit"],
.store-grid button{
  width: 100%;
  margin-top: 10px !important;
  background: var(--pink-main, #D92A29) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(217,42,41,0.22) !important;
}

.store-grid .btn-add-to-cart:hover,
.store-grid button:hover{
  background: var(--pink-dark, #B41F1F) !important;
}

/* Mobil düzen */
@media (max-width: 900px){
  .store-layout{
    flex-direction: column !important;
  }
  .store-sidebar{
    width: 100% !important;
  }
  .store-title{
    font-size: 28px !important;
  }
}
/* === PREMIUM OVERRIDES START === */

/* 1) Design tokens */
:root{
  --bg:#F4F4F7;
  --surface:#ffffff;
  --surface-2:#F7F7FA;
  --text:#111827;
  --muted:#6B7280;
  --border:rgba(17,24,39,.12);

  --accent:#D92A29;
  --accent-600:#B41F1F;

  --radius:14px;
  --radius-lg:20px;

  --shadow-1:0 10px 24px rgba(15,23,42,.06);
  --shadow-2:0 16px 40px rgba(15,23,42,.10);

  --focus:0 0 0 4px rgba(217,42,41,.18);

  --container:1240px;
  --gap:22px;
}

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1,h2,h3){
  letter-spacing:-0.01em;
}
:where(p,li,span,small,label,button,input,select){
  font-feature-settings: "kern","liga";
}

:where(.store-title){
  font-size: clamp(22px, 1.6vw, 28px);
  line-height: 1.15;
  margin: 0;
}

/* 2) Layout + spacing */
:where(.store-main){
  background:var(--bg) !important;
  padding: clamp(22px, 3vw, 40px) 0 clamp(48px, 4.5vw, 72px) !important;
}

:where(.store-container){
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: 0 clamp(14px, 3vw, 28px) !important;
}

:where(.store-layout){
  gap: clamp(16px, 3vw, 28px) !important;
}

:where(.store-content){
  min-width: 0;
}

/* Sidebar = card-within-card */
:where(.store-sidebar){
  width: 280px !important;
  max-width: 280px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 16px 14px 18px !important;
}

:where(.store-sidebar-section + .store-sidebar-section){
  border-top: 1px solid rgba(17,24,39,.08) !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
}

:where(.store-sidebar-header){
  padding: 6px 6px 10px !important;
  cursor: default !important;
}

:where(.store-sidebar-title){
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

:where(.store-sidebar-group){
  background: var(--surface-2) !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

:where(.store-sidebar-group:hover){
  border-color: rgba(217,42,41,.22) !important;
  box-shadow: 0 10px 24px rgba(217,42,41,.08) !important;
  background: #fff !important;
}

:where(.store-sidebar-group-toggle){
  padding: 11px 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

:where(.store-sidebar-list){
  padding: 6px 6px 10px !important;
  border-top: 1px solid rgba(17,24,39,.08) !important;
}

:where(.store-sidebar-list a){
  padding: 8px 10px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: var(--text) !important;
  transform: none !important;
}

:where(.store-sidebar-list a:hover){
  background: rgba(217,42,41,.06) !important;
}

:where(.store-sidebar-list a.is-active){
  background: var(--accent) !important;
  color: #fff !important;
}

/* 3) Toolbar card + form controls */
:where(.store-toolbar){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 16px 16px 14px !important;
  margin-bottom: 18px !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

:where(.store-filters){
  gap: 12px !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

:where(.store-filters label){
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: .02em !important;
}

:where(.store-filters label > :is(select,input)){
  height: 46px !important;
  min-width: 180px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.02) !important;
}

:where(.store-filters label > :is(select,input)):hover{
  border-color: rgba(17,24,39,.22) !important;
}

:where(.store-filters label > :is(select,input)):focus{
  border-color: rgba(217,42,41,.35) !important;
  box-shadow: var(--focus) !important;
}

:where(select){
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(17,24,39,.55) 50%),
    linear-gradient(135deg, rgba(17,24,39,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 34px !important;
}

/* 4) Product grid + award-worthy cards */
:where(.store-grid){
  gap: var(--gap) !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}

/* Card base (works even if JS changes inner classes) */
:where(.store-grid > *){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: clamp(18px, 1.8vw, 22px) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px !important;

  transform: translateY(0);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}

:where(.store-grid > *:hover){
  transform: translateY(-3px);
  box-shadow: var(--shadow-2) !important;
  border-color: rgba(17,24,39,.16) !important;
}

/* Subtle highlight (very light, no dark gradients) */
:where(.store-grid > *)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:.35;
}
:where(.store-grid > *){
  position: relative;
}

/* Image area: more premium + less “empty” */
:where(.product-image-wrap){
  border-radius: 16px !important;
  background: var(--surface-2) !important;
  border: 1px solid rgba(17,24,39,.06) !important;
  overflow: hidden !important;
}

:where(.product-image-wrap){
  padding-top: 110% !important; /* keep your ratio but premium */
}

:where(.product-image-wrap img){
  object-fit: contain !important;
  transform: translateZ(0);
}

/* Typography inside cards */
:where(.product-name){
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 2px 0 0 !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

:where(.product-price){
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* Variants = pill-like */
:where(.product-variants){
  gap: 10px !important;
  margin: 2px 0 6px !important;
}

:where(.product-variants label){
  font-size: 11px !important;
  color: var(--muted) !important;
  letter-spacing: .02em !important;
}

:where(.product-variants select){
  height: 38px !important;
  min-width: 120px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,24,39,.12) !important;
  background: #fff !important;
  box-shadow: none !important;
}

:where(.product-variants select:hover){
  border-color: rgba(17,24,39,.22) !important;
}

:where(.product-variants select:focus){
  box-shadow: var(--focus) !important;
  border-color: rgba(217,42,41,.35) !important;
}

/* CTA button */
:where(.product-card .btn-add-to-cart){
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,42,41,.18) !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 10px 22px rgba(217,42,41,.18) !important;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}

:where(.product-card .btn-add-to-cart:hover){
  background: var(--accent-600) !important;
  box-shadow: 0 14px 28px rgba(217,42,41,.22) !important;
  transform: translateY(-1px);
}

:where(.product-card .btn-add-to-cart:active){
  transform: translateY(0);
}

:where(.product-card .btn-add-to-cart:disabled),
:where(.product-card .btn-add-to-cart[aria-disabled="true"]){
  background: rgba(17,24,39,.12) !important;
  color: rgba(17,24,39,.55) !important;
  border-color: rgba(17,24,39,.10) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* 5) Micro details + accessibility */
:where(a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible){
  outline: none !important;
  box-shadow: var(--focus) !important;
  border-color: rgba(217,42,41,.35) !important;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 6) Responsive */
@media (max-width: 980px){
  :where(.store-layout){
    flex-direction: column !important;
  }
  :where(.store-sidebar){
    width: 100% !important;
    max-width: none !important;
  }
}}

/* 6) Responsive */
@media (max-width: 980px){
  :where(.store-layout){
    flex-direction: column !important;
  }
  :where(.store-sidebar){
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 720px){
  :where(.store-toolbar){
    padding: 14px !important;
  }
  :where(.store-filters label > :is(select,input)){
    min-width: 160px !important;
  }
  :where(.store-grid){
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px){
  :where(.store-grid){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}}

@media (min-width: 721px) and (max-width: 1100px){
  :where(.store-grid){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1101px){
  :where(.store-grid){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}}

@media (min-width: 1101px){
  :where(.store-grid){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* === PREMIUM OVERRIDES END === */
/* === PRODUCTS SPACING FIX (APPEND) === */

/* Grid kartlar birbirine yapışmasın */
:where(.store-grid){
  gap: 26px !important;                 /* kartlar arası boşluk */
  padding: 6px 6px 2px !important;      /* grid kenarlara yapışmasın */
}}

/* === PREMIUM OVERRIDES END === */
/* === PRODUCTS SPACING FIX (APPEND) === */

/* Grid kartlar birbirine yapışmasın */
:where(.store-grid){
  gap: 26px !important;                 /* kartlar arası boşluk */
  padding: 6px 6px 2px !important;      /* grid kenarlara yapışmasın */
}

/* Bazı browser/legacy layoutlarda gap çalışmazsa güvenlik: */
:where(.store-grid > *){
  margin: 0 !important;                 /* çift boşluk olmasın */
}
@supports not (gap: 1rem){
  :where(.store-grid > *){
    margin: 0 0 26px 0 !important;      /* alt boşlukla ayır */
  }
  :where(.store-grid > * + *){
    margin-top: 26px !important;
  }
}

/* Kartların dış çizgisi “birleşmiş” gibi görünmesin */
:where(.store-grid > *){
  border-radius: 22px !important;
  overflow: hidden !important;
}}

/* Kartların dış çizgisi “birleşmiş” gibi görünmesin */
:where(.store-grid > *){
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* Eğer sayfada flex/row ile dizilen ürünler de varsa (güvenli) */
:where(.products-grid, .product-grid, .product-list, .items-grid, .grid){
  gap: 26px !important;
}

/* Mobilde nefes biraz daha az ama yine ayrık */
@media (max-width: 720px){
  :where(.store-grid){
    gap: 18px !important;
    padding: 4px !important;
  }
}
/* === PREMIUM OVERRIDES START === */

/* 1) Design tokens */
:root{
  --bg:#F4F4F7;
  --surface:#ffffff;
  --surface-2:#F7F7FA;
  --text:#0f172a;
  --muted:rgba(15,23,42,.62);
  --border:rgba(15,23,42,.10);

  --shadow-1: 0 6px 16px rgba(15,23,42,.06);
  --shadow-2: 0 14px 30px rgba(15,23,42,.10);

  --radius:14px;
  --radius-lg:22px;

  --accent:#D92A29;
  --accent-600:#C82322;
  --focus:0 0 0 4px rgba(217,42,41,.18);

  --gap:28px; /* grid aralığı (kartlar yapışmasın) */

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

html, body{
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

/* güvenli box sizing */
*, *::before, *::after{ box-sizing:border-box; }

/* 2) Layout + spacing */
:where(.store-main){
  background: var(--bg) !important;
}

:where(.store-container){
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 44px);
}

:where(.store-layout){
  gap: clamp(20px, 3vw, 48px) !important;
}

/* Sidebar = card within a card */
:where(.store-sidebar){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 18px 16px 18px !important;
}

/* Sidebar içindeki bölümler/divider */
:where(.store-sidebar-section + .store-sidebar-section){
  border-top-color: rgba(15,23,42,.08) !important;
}

/* Toolbar / üst bar = card */
:where(.store-toolbar, .store-topbar, .store-header, .store-controls){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 14px 16px !important;
}

/* filters hizalama */
:where(.store-filters){
  gap: 12px !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
}

/* label hiyerarşisi */
:where(.store-filters label){
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: .02em;
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

:where(.store-title, h1, h2){
  letter-spacing: -0.02em;
}
:where(.store-title){
  font-size: clamp(18px, 1.2vw + 14px, 26px) !important;
  font-weight: 800 !important;
}

/* 3) Inputs / selects / buttons */
:where(input, select, textarea){
  font-family: var(--font);
}

:where(.store-filters label > :is(select,input), .store-filters :is(select,input)){
  height: 46px !important;
  min-width: 180px;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
}

:where(.store-filters label > :is(select,input), .store-filters :is(select,input)):hover{
  border-color: rgba(15,23,42,.22) !important;
}

:where(.store-filters label > :is(select,input), .store-filters :is(select,input)):focus{
  border-color: rgba(217,42,41,.35) !important;
  box-shadow: var(--focus) !important;
}

/* select ok ikonu (sade, karartma yok) */
:where(select){
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px !important;
}

/* 4) Product grid + spacing FIX (kartlar yapışmasın) */
:where(.store-grid){
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: var(--gap) !important;
  column-gap: var(--gap) !important;
  row-gap: var(--gap) !important;

  /* kart gölgeleri arada “boğulmasın” */
  padding: 6px 2px !important;
  margin: 0 !important;
  background: transparent !important;
  isolation: isolate; /* hover z-index düzgün */
}

/* Kartlar: margin/width reset + premium */
:where(.store-grid > *, .store-grid .product-card){
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;

  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: clamp(18px, 1.8vw, 22px) !important;
  box-shadow: var(--shadow-1) !important;

  overflow: hidden !important;
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px !important;

  transform: none !important;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
  z-index: 0;
}

/* Hover: hafif yükselme + daha premium shadow */
:where(.store-grid > *:hover, .store-grid .product-card:hover){
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-2) !important;
  border-color: rgba(15,23,42,.16) !important;
  z-index: 2;
}

/* Subtle highlight (çok hafif) */
:where(.store-grid > *, .store-grid .product-card)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:.22;
}

/* Görsel alanı: daha dolu, contain */
:where(.product-image-wrap){
  border-radius: 16px !important;
  background: var(--surface-2) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  overflow: hidden !important;
  padding-top: 110% !important;
}

:where(.product-image-wrap img){
  object-fit: contain !important;
  transform: translateZ(0);
}

/* Ürün adı / fiyat */
:where(.product-name){
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  margin: 2px 0 0 !important;
  letter-spacing: -0.01em;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

:where(.product-price){
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* Varyant alanları: pill görünüm */
:where(.product-variants){
  gap: 10px !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

:where(.product-variants label){
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: .02em;
  gap: 6px !important;
}

:where(.product-variants select){
  height: 44px !important;
  min-width: 120px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(15,23,42,.03) !important;
  color: var(--text) !important;
}

:where(.product-variants select):hover{
  border-color: rgba(15,23,42,.22) !important;
}

:where(.product-variants select):focus{
  box-shadow: var(--focus) !important;
  border-color: rgba(217,42,41,.35) !important;
}

/* CTA: Sepete Ekle */
:where(.btn-add-to-cart, button.btn-add-to-cart, .product-card .btn-add-to-cart){
  height: 52px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,0) !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  box-shadow: 0 10px 18px rgba(217,42,41,.18) !important;
  transition: transform .14s ease, box-shadow .16s ease, background-color .16s ease;
}

:where(.btn-add-to-cart:hover, button.btn-add-to-cart:hover){
  background: var(--accent-600) !important;
  box-shadow: 0 14px 24px rgba(217,42,41,.22) !important;
  transform: translateY(-1px);
}

:where(.btn-add-to-cart:active, button.btn-add-to-cart:active){
  transform: translateY(0);
}

:where(.btn-add-to-cart:disabled, button.btn-add-to-cart:disabled){
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 5) Mikro detaylar + motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 6) Responsive: toolbar wrap + grid kolon */
@media (max-width: 900px){
  :where(.store-layout){
    flex-direction: column !important;
  }
  :where(.store-sidebar){
    width: 100% !important;
  }
}

@media (max-width: 520px){
  :where(.store-grid){
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  :where(.store-filters label > :is(select,input), .store-filters :is(select,input)){
    min-width: 220px;
    width: 100%;
  }
}

/* === PREMIUM OVERRIDES END === */
/* === PREMIUM OVERRIDES START === */

/* 1) Design tokens */
:root{
  --bg: #F4F4F7;
  --surface: #ffffff;
  --surface-2: #F7F7FA;
  --text: #0F172A;
  --muted: rgba(15, 23, 42, .62);
  --border: rgba(15, 23, 42, .12);
  --shadow-1: 0 10px 26px rgba(15, 23, 42, .06);
  --shadow-2: 0 18px 46px rgba(15, 23, 42, .10);
  --radius: 14px;
  --radius-lg: 22px;

  --accent: #D92A29;
  --accent-600: #C62524;
  --focus: 0 0 0 4px rgba(217,42,41,.18);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}}

/* === PREMIUM OVERRIDES END === */
/* === PREMIUM OVERRIDES START === */

/* 1) Design tokens */
:root{
  --bg: #F4F4F7;
  --surface: #ffffff;
  --surface-2: #F7F7FA;
  --text: #0F172A;
  --muted: rgba(15, 23, 42, .62);
  --border: rgba(15, 23, 42, .12);
  --shadow-1: 0 10px 26px rgba(15, 23, 42, .06);
  --shadow-2: 0 18px 46px rgba(15, 23, 42, .10);
  --radius: 14px;
  --radius-lg: 22px;

  --accent: #D92A29;
  --accent-600: #C62524;
  --focus: 0 0 0 4px rgba(217,42,41,.18);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

html, body{
  font-family: var(--font-sans) !important;
  color: var(--text);
  background: var(--bg);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1,h2,h3,h4){
  letter-spacing: -0.02em;
  color: var(--text);
}
:where(p,li,label,small,span){
  color: var(--muted);
}

/* 2) Layout + breathing room */
:where(.store-main, main){
  background: var(--bg) !important;
}

:where(.store-container, .container){
  max-width: 1240px !important;
  padding-left: clamp(16px, 3vw, 28px) !important;
  padding-right: clamp(16px, 3vw, 28px) !important;
}

:where(.store-layout){
  gap: clamp(18px, 3vw, 40px) !important;
}

/* Sidebar: card-within-card */
:where(.store-sidebar){
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 18px 16px 20px !important;
}

:where(.store-sidebar-section + .store-sidebar-section){
  border-top: 1px solid rgba(15,23,42,.08) !important;
}

/* Right content: keep canvas clean */
:where(.store-content){
  min-width: 0;
}

/* Toolbar / filters: look like a toolbar card (safe targeting) */
:where(.store-filters, .store-toolbar, .toolbar, .filters, .filter-bar){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 14px !important;
}

/* 3) Inputs / selects */
:where(input, select, textarea){
  font-family: var(--font-sans);
  color: var(--text);
}

:where(.store-filters select, .store-filters input, select, input[type="text"], input[type="search"]){
  height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  padding: 10px 12px !important;
  outline: none !important;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

:where(.store-filters select:hover, .store-filters input:hover, select:hover, input:hover){
  border-color: rgba(15,23,42,.20) !important;
}

:where(.store-filters select:focus, .store-filters input:focus, select:focus, input:focus){
  border-color: rgba(217,42,41,.55) !important;
  box-shadow: var(--focus) !important;
}

:where(label, .label){
  font-size: 12px !important;
  font-weight: 650 !important;
  color: rgba(15,23,42,.62) !important;
}

/* 4) PRODUCT GRID — spacing fix (your issue) */
/* Grid “yapışıklık” 2 sebepten olur:
   - gap küçük kalır
   - arka plan beyaz olduğunda boşluk görünmez
   -> gap’i büyüt + grid’e hafif bg/padding ver */
:where(.store-grid){
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;

  /* DAHA UZAK: gap’i büyüt */
  column-gap: clamp(22px, 3.2vw, 48px) !important;
  row-gap: clamp(22px, 3.2vw, 48px) !important;

  /* boşluğu görünür kıl */
  background: var(--bg) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(12px, 2vw, 22px) !important;

  /* bazı temalarda shadow’u kesen overflow olur */
  overflow: visible !important;
  margin: 0 !important;
}

/* Card candidates inside grid */
:where(.store-grid > *){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: clamp(18px, 2vw, 22px) !important;
  box-shadow: var(--shadow-1) !important;

  /* kartların birbirine “yakın” görünmesine neden olan dış margin/padding reset */
  margin: 0 !important;

  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

:where(.store-grid > *:hover){
  transform: translateY(-3px);
  box-shadow: var(--shadow-2) !important;
  border-color: rgba(15,23,42,.18) !important;
}

/* Product image frame */
:where(.store-grid .product-image-wrap){
  background: var(--surface-2) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}

:where(.store-grid .product-image-wrap img),
:where(.store-grid > * img:first-of-type){
  object-fit: contain !important;
}

/* Title & price polish */
:where(.store-grid .product-name, .store-grid .product-title, .store-grid h3, .store-grid h4){
  font-size: clamp(14px, 1.1vw, 16px) !important;
  font-weight: 760 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:where(.store-grid .product-price, .store-grid .price, .store-grid strong){
  font-size: clamp(15px, 1.2vw, 18px) !important;
  font-weight: 820 !important;
  color: var(--text) !important;
}

/* Variant controls: pill-like */
:where(.store-grid select){
  height: 44px !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
}

/* CTA button */
:where(.store-grid button, .store-grid .btn, .store-grid .add-to-cart, button[type="submit"]){
  height: 48px !important;
  border-radius: 18px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 22px rgba(217,42,41,.18) !important;
  font-weight: 780 !important;
  letter-spacing: .01em;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

:where(.store-grid button:hover, .store-grid .btn:hover, .store-grid .add-to-cart:hover, button[type="submit"]:hover){
  background: var(--accent-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(217,42,41,.22) !important;
}

:where(.store-grid button:disabled, .store-grid .btn:disabled, .store-grid .add-to-cart:disabled){
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 5) Motion + responsive */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 980px){
  :where(.store-layout){
    flex-direction: column !important;
  }
  :where(.store-sidebar){
    width: 100% !important;
  }
  :where(.store-grid){
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 560px){
  :where(.store-grid){
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  :where(.store-filters, .store-toolbar, .toolbar, .filters, .filter-bar){
    padding: 12px !important;
  }
}}

@media (max-width: 560px){
  :where(.store-grid){
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  :where(.store-filters, .store-toolbar, .toolbar, .filters, .filter-bar){
    padding: 12px !important;
  }
}

/* === PREMIUM OVERRIDES END === */
/* === NO-TOUCH PRODUCT CARDS (APPEND) === */
/* Kartlar fiziksel olarak değmese bile “beyaz-beyaz” yüzünden yapışık görünür.
   Çözüm: grid aralığını büyüt + her karta bg renginde “separation ring” ver. */

:where(.store-grid){
  background: var(--bg, #F4F4F7) !important;  /* aradaki boşluk kesin bg olsun */
  padding: clamp(18px, 2.2vw, 32px) !important;
  column-gap: clamp(28px, 4vw, 64px) !important;
  row-gap: clamp(28px, 4vw, 64px) !important;
}}

/* === PREMIUM OVERRIDES END === */
/* === NO-TOUCH PRODUCT CARDS (APPEND) === */
/* Kartlar fiziksel olarak değmese bile “beyaz-beyaz” yüzünden yapışık görünür.
   Çözüm: grid aralığını büyüt + her karta bg renginde “separation ring” ver. */

:where(.store-grid){
  background: var(--bg, #F4F4F7) !important;  /* aradaki boşluk kesin bg olsun */
  padding: clamp(18px, 2.2vw, 32px) !important;
  column-gap: clamp(28px, 4vw, 64px) !important;
  row-gap: clamp(28px, 4vw, 64px) !important;
}

/* separation ring: kartlar ASLA temas etmiyor gibi görünür */
:where(.store-grid > *){
  /* 1. gölge = bg rengiyle halka (arayı açar gibi) */
  /* 2. gölge = gerçek premium shadow */
  box-shadow:
    0 0 0 16px var(--bg, #F4F4F7),
    var(--shadow-1, 0 10px 26px rgba(15,23,42,.06)) !important;
}

/* Hover’da da halka kalsın */
:where(.store-grid > *:hover){
  box-shadow:
    0 0 0 16px var(--bg, #F4F4F7),
    var(--shadow-2, 0 18px 46px rgba(15,23,42,.10)) !important;
}

/* Mobilde halka biraz küçülsün */
@media (max-width: 720px){
  :where(.store-grid > *){
    box-shadow:
      0 0 0 12px var(--bg, #F4F4F7),
      var(--shadow-1, 0 10px 26px rgba(15,23,42,.06)) !important;
  }
  :where(.store-grid > *:hover){
    box-shadow:
      0 0 0 12px var(--bg, #F4F4F7),
      var(--shadow-2, 0 18px 46px rgba(15,23,42,.10)) !important;
  }
}
/* === PREMIUM OVERRIDES START === */

/* 1) Design tokens */
:root{
  --bg:#F4F4F7;
  --surface:#ffffff;
  --surface-2:#F7F7FA;
  --text:#0F172A;
  --muted:rgba(15,23,42,.62);
  --border:rgba(15,23,42,.10);
  --shadow-1:0 10px 24px rgba(15,23,42,.08);
  --shadow-2:0 18px 44px rgba(15,23,42,.12);
  --radius:14px;
  --radius-lg:22px;

  --accent:#D92A29;
  --accent-600:#C42423;
  --focus:0 0 0 4px rgba(217,42,41,.18);

  /* Kartlar asla temas etmesin diye “gutter” */
  --gutter:18px;
  --gap:clamp(28px, 3.8vw, 56px);
}

html, body{
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
}

.store-main{
  background:var(--bg) !important;
}

/* 2) Grid: gerçek boşluk + nefes + taşma/overlap engeli */
:where(.store-content) { min-width: 0 !important; }

:where(.store-grid, #product-list){
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;

  /* ASIL MESAFE */
  gap: var(--gap) !important;
  column-gap: var(--gap) !important;
  row-gap: var(--gap) !important;

  /* Boşluğu görünür kıl */
  background: var(--bg) !important;
  padding: clamp(14px, 2vw, 24px) !important;
  border-radius: var(--radius-lg) !important;

  /* Kart gölgeleri kesilmesin */
  overflow: visible !important;

  align-content:start !important;
  justify-items:stretch !important;
}

/* 3) Kartlar: “gutter ring” + shadow (temas sıfır) */
:where(.store-grid > .product-card, #product-list > .product-card){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: clamp(18px, 2vw, 22px) !important;
  overflow: hidden !important;

  /* Bu ring sayesinde gap çalışmasa bile kartlar “görsel olarak” asla temas etmez */
  box-shadow:
    0 0 0 var(--gutter) var(--bg),
    var(--shadow-1) !important;

  /* Bazı temalarda negatif margin vs. varsa ez */
  margin: 0 !important;

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  will-change: transform;
}

:where(.store-grid > .product-card:hover, #product-list > .product-card:hover){
  transform: translateY(-3px);
  border-color: rgba(15,23,42,.16) !important;
  box-shadow:
    0 0 0 var(--gutter) var(--bg),
    var(--shadow-2) !important;
}

/* Kart iç padding (mevcutta küçükse büyüt) */
:where(.store-grid > .product-card, #product-list > .product-card){
  padding: clamp(12px, 1.4vw, 18px) !important;
  display:flex !important;
  flex-direction:column !important;
  gap: 10px !important;
}

/* 4) Görsel alanı: premium frame */
:where(.product-image-wrap){
  background: var(--surface-2) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

:where(.product-image-wrap img){
  object-fit: contain !important;
}

/* 5) Tipografi */
:where(.product-name){
  font-size: clamp(14px, 1.05vw, 16px) !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  margin: 2px 0 0 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

:where(.product-price){
  font-size: clamp(15px, 1.15vw, 18px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* 6) Variant alanları */
:where(.product-variants){
  gap: 10px !important;
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}

:where(.product-variants label){
  font-size: 12px !important;
  color: var(--muted) !important;
  gap: 6px !important;
}

:where(.product-variants select){
  height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  outline: none !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}

:where(.product-variants select:hover){
  border-color: rgba(15,23,42,.18) !important;
}

:where(.product-variants select:focus){
  box-shadow: var(--focus) !important;
  border-color: rgba(217,42,41,.55) !important;
}

/* 7) CTA */
:where(.btn-add-to-cart, .product-card button){
  height: 52px !important;
  border-radius: 18px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

:where(.btn-add-to-cart:hover, .product-card button:hover){
  background: var(--accent-600) !important;
  box-shadow: 0 10px 20px rgba(217,42,41,.16) !important;
  transform: translateY(-1px);
}

:where(.btn-add-to-cart:disabled, .product-card button:disabled){
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 8) Toolbar premium */
:where(.store-toolbar){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  padding: clamp(14px, 1.8vw, 20px) !important;
  gap: 12px !important;
}

:where(.store-title){
  font-size: clamp(18px, 1.6vw, 26px) !important;
  font-weight: 860 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

:where(.store-filters){
  gap: 12px !important;
}

:where(.store-filters label){
  font-size: 12px !important;
  color: var(--muted) !important;
  gap: 6px !important;
}

:where(.store-filters select){
  height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  outline: none !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
:where(.store-filters select:hover){ border-color: rgba(15,23,42,.18) !important; }
:where(.store-filters select:focus){ box-shadow: var(--focus) !important; border-color: rgba(217,42,41,.55) !important; }

/* 9) Sidebar premium */
:where(.store-sidebar){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
}

/* 10) Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 11) Responsive: gap/gutter küçültsün ama temas olmasın */
@media (max-width: 900px){
  :root{ --gap: clamp(20px, 4vw, 34px); --gutter: 14px; }
}
@media (max-width: 520px){
  :root{ --gap: 18px; --gutter: 12px; }
  :where(.store-grid, #product-list){ padding: 12px !important; }
}

/* === PREMIUM OVERRIDES END === */
/* === PREMIUM OVERRIDES START === */

/* Kesin ayrışma (kartlar ASLA temas etmesin): grid gap + “bg halo” */
:root{
  --gutter: clamp(22px, 2.6vw, 44px);     /* kartlar arası gerçek boşluk */
  --halo:   clamp(10px, 1.4vw, 18px);     /* kartın etrafındaki görünür ayırıcı (bg rengi) */
}}

/* === PREMIUM OVERRIDES END === */
/* === PREMIUM OVERRIDES START === */

/* Kesin ayrışma (kartlar ASLA temas etmesin): grid gap + “bg halo” */
:root{
  --gutter: clamp(22px, 2.6vw, 44px);     /* kartlar arası gerçek boşluk */
  --halo:   clamp(10px, 1.4vw, 18px);     /* kartın etrafındaki görünür ayırıcı (bg rengi) */
}

/* Grid alanı: boşluğu görünür kıl + daha fazla nefes */
:where(.store-grid){
  display: grid !important;
  gap: var(--gutter) !important;
  background: var(--bg, #F4F4F7) !important;
  padding: clamp(14px, 2vw, 26px) !important;
  border-radius: var(--radius-lg, 24px) !important;
  overflow: visible !important;   /* halo / shadow kırpılmasın */
  isolation: isolate !important;  /* z-index düzeni */
}

/* Kart adayları: halo ile “temassız” garanti */
:where(.store-grid > *) {
  position: relative !important;
  z-index: 0 !important;

  /* HALO: 1. gölge bg rengiyle dış çerçeve gibi çalışır => kartlar asla birbirine değmiş görünmez */
  box-shadow:
    0 0 0 var(--halo) var(--bg, #F4F4F7),
    var(--shadow-1, 0 10px 26px rgba(15,23,42,.06)) !important;

  /* bazı temalarda child’lar negatif margin verebiliyor, sıfırla */
  margin: 0 !important;
}

/* Hover’da sadece yükselt, halo sabit kalsın */
:where(.store-grid > *:hover){
  z-index: 2 !important;
  box-shadow:
    0 0 0 var(--halo) var(--bg, #F4F4F7),
    var(--shadow-2, 0 18px 40px rgba(15,23,42,.10)) !important;
}

/* Eğer kartın kendisi .product-card ise ek güvenlik */
:where(.store-grid .product-card){
  box-shadow:
    0 0 0 var(--halo) var(--bg, #F4F4F7),
    var(--shadow-1, 0 10px 26px rgba(15,23,42,.06)) !important;
}
:where(.store-grid .product-card:hover){
  box-shadow:
    0 0 0 var(--halo) var(--bg, #F4F4F7),
    var(--shadow-2, 0 18px 40px rgba(15,23,42,.10)) !important;
}

/* Çok dar ekranlarda da temas etmesin: boşluğu koru */
@media (max-width: 520px){
  :where(.store-grid){
    gap: clamp(18px, 4vw, 28px) !important;
  }
  :root{
    --halo: clamp(8px, 2.8vw, 14px);
  }
}

/* === PREMIUM OVERRIDES END === */
/* === PREMIUM OVERRIDES START === */

/* Design tokens */
:root{
  --bg: #F4F4F7;
  --surface: #ffffff;
  --surface-2: #f7f7fa;
  --text: #0b0f19;
  --muted: rgba(11, 15, 25, .62);
  --border: rgba(15, 23, 42, .10);

  --accent: #D92A29;
  --accent-600: #c62322;

  --radius: 14px;
  --radius-lg: 22px;

  --shadow-1: 0 10px 26px rgba(15, 23, 42, .08);
  --shadow-2: 0 16px 44px rgba(15, 23, 42, .12);

  --focus: 0 0 0 4px rgba(217,42,41,.18);

  /* THE FIX: “never touch” visual separation ring thickness */
  --card-sep: clamp(12px, 1.6vw, 18px);

  --gap: clamp(24px, 3.2vw, 56px);
}

/* Base */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout containers */
:where(.store-main, .store-container, .store-layout, .store-content){
  background: var(--bg) !important;
}

:where(.store-container){
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: clamp(14px, 2vw, 22px) !important;
}

:where(.store-main){
  padding-block: clamp(14px, 2vw, 26px) !important;
}

/* Sidebar card */
:where(.store-sidebar){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  padding: clamp(12px, 1.6vw, 18px) !important;
}

/* Toolbar / filters */
:where(.store-topbar, .store-filters){
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06) !important;
  padding: clamp(10px, 1.6vw, 16px) !important;
}

:where(.store-filters){
  gap: 12px !important;
  align-items: end !important;
}

/* Inputs / selects / buttons */
:where(input[type="text"], input[type="search"], input[type="email"], input[type="number"], select, textarea){
  min-height: 46px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  outline: none !important;
}

:where(select){
  appearance: none;
}

:where(input::placeholder, textarea::placeholder){
  color: rgba(11, 15, 25, .42) !important;
}

:where(input:hover, select:hover, textarea:hover){
  border-color: rgba(15, 23, 42, .18) !important;
}

:where(input:focus, select:focus, textarea:focus){
  border-color: rgba(217,42,41,.35) !important;
  box-shadow: var(--focus) !important;
}

/* ================================
   PRODUCT GRID — HARD “NO TOUCH”
   ================================ */

:where(.store-grid){
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;

  /* real spacing */
  column-gap: var(--gap) !important;
  row-gap: var(--gap) !important;

  /* make whitespace visible */
  background: var(--bg) !important;
  padding: clamp(14px, 2.2vw, 26px) !important;
  border-radius: var(--radius-lg) !important;

  /* prevent any parent from clipping our separation ring/shadow */
  overflow: visible !important;
}

/* If any wrapper is clipping shadows, force visible */
:where(.store-content, .store-main){
  overflow: visible !important;
}

/* Card base */
:where(.store-grid > *, .store-grid .product-card){
  position: relative !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: clamp(18px, 2vw, 22px) !important;

  /* THE FIX: a bg-colored ring that visually guarantees separation (rounded) */
  box-shadow:
    0 0 0 var(--card-sep) var(--bg),
    0 12px 28px rgba(15, 23, 42, .10) !important;

  overflow: hidden !important;

  transform: translateY(0);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover (keep ring, upgrade shadow slightly) */
:where(.store-grid > *:hover, .store-grid .product-card:hover){
  transform: translateY(-3px);
  box-shadow:
    0 0 0 var(--card-sep) var(--bg),
    0 18px 44px rgba(15, 23, 42, .13) !important;
  border-color: rgba(15, 23, 42, .16) !important;
}

/* Subtle highlight (very light) */
:where(.store-grid > *, .store-grid .product-card)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,0));
  opacity:.28;
}

/* Image frame */
:where(.store-grid .product-image-wrap){
  border-radius: 16px !important;
  background: var(--surface-2) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  overflow: hidden !important;
}

:where(.store-grid .product-image-wrap img){
  object-fit: contain !important;
}

/* Title & price */
:where(.store-grid .product-name, .store-grid .product-title, .store-grid h3, .store-grid h4){
  font-size: clamp(14px, 1.1vw, 16px) !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  margin: 2px 0 0 !important;
  color: var(--text) !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

:where(.store-grid .product-price, .store-grid .price){
  font-size: clamp(15px, 1.2vw, 18px) !important;
  font-weight: 820 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  margin: 0 !important;
}

/* Variant labels + selects */
:where(.store-grid .product-variants label){
  font-size: 12px !important;
  color: var(--muted) !important;
  gap: 6px !important;
}

:where(.store-grid .product-variants select){
  min-height: 44px !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
}

/* CTA */
:where(.store-grid .btn-add-to-cart, .store-grid button, .store-grid .btn){
  min-height: 48px !important;
  border-radius: 18px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 22px rgba(217,42,41,.16) !important;
}

:where(.store-grid .btn-add-to-cart:hover, .store-grid button:hover, .store-grid .btn:hover){
  background: var(--accent-600) !important;
  box-shadow: 0 14px 30px rgba(217,42,41,.18) !important;
}

:where(.store-grid .btn-add-to-cart:disabled, .store-grid button:disabled){
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 1024px){
  :where(.store-grid){
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    column-gap: clamp(18px, 3vw, 34px) !important;
    row-gap: clamp(18px, 3vw, 34px) !important;
  }
}
@media (max-width: 720px){
  :where(.store-grid){
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    padding: 14px !important;
  }
  :where(.store-filters){
    flex-wrap: wrap !important;
  }
  :root{
    --card-sep: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Notes:
   - Multi-shadow order: first shadow is drawn on top (we use that to “carve” a bg ring).
   :contentReference[oaicite:0]{index=0}
   - Your existing grid/card base is defined in style.css (.store-grid, .product-card)
   :contentReference[oaicite:1]{index=1}
*/

/* === PREMIUM OVERRIDES END === */
/* =========================
   PRODUCT MODAL (POPUP)
   ========================= */
.product-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.product-modal.is-open{
  display: block;
}

.product-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.product-modal-dialog{
  position: relative;
  margin: 40px auto;
  width: min(1100px, calc(100% - 32px));
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 80px rgba(0,0,0,.25);
  overflow: hidden;
}

.product-modal-body{
  padding: 18px;
}

.product-modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  cursor: pointer;
  font-size: 26px;
  line-height: 40px;
}

body.is-modal-open{
  overflow: hidden;
}

/* Grid içi düzen (çok taşarsa bile çalışsın) */
.product-modal-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 18px;
}

@media (max-width: 900px){
  .product-modal-dialog{ margin: 16px auto; }
  .product-modal-grid{ grid-template-columns: 1fr; }
}
/* =========================
   PRODUCT MODAL (POPUP) FIX
   (style.css EN ALTINA EKLE)
   ========================= */

/* Overlay */
#product-modal.product-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}}
/* =========================
   PRODUCT MODAL (POPUP) FIX
   (style.css EN ALTINA EKLE)
   ========================= */

/* Overlay */
#product-modal.product-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

#product-modal.product-modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

/* Blur + karartı (rgba hatalarını düzelt) */
#product-modal .product-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Dialog */
#product-modal .product-modal-dialog{
  position: relative;
  width: min(1180px, 100%);
  max-height: min(88vh, 920px);
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 90px rgba(0,0,0,.25);
  margin: 0;
}

/* İç boşlukları kontrol et */
#product-modal .product-modal-body{
  padding: 0;
}

/* Close (X) */
#product-modal .product-modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #111;
  cursor: pointer;
  font-size: 28px;
  line-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
#product-modal .product-modal-close:hover{
  background: rgba(0,0,0,.10);
}

/* 2 kolon düzen (sol: görsel, sağ: bilgi) */
#product-modal .product-modal-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 22px;
  padding: 22px;
  align-items: start;
}

/* Sol galeri */
#product-modal .product-modal-gallery{
  min-width: 0;
}
#product-modal .product-modal-main-image{
  width: 100%;
  background: #f6f6f7;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  max-height: calc(min(88vh, 920px) - 44px - 44px);
}
#product-modal .product-modal-main-image img{
  width: 100%;
  height: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
}

/* Thumbnail bar */
#product-modal .product-modal-thumbs{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
#product-modal .product-modal-thumb{
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
#product-modal .product-modal-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#product-modal .product-modal-thumb.is-active{
  border-color: rgba(0,0,0,.45);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Sağ panel (scroll burada olsun) */
#product-modal .product-modal-info{
  min-width: 0;
  max-height: calc(min(88vh, 920px) - 44px);
  overflow: auto;
  padding-right: 6px;
}

/* Başlık/meta/fiyat */
#product-modal .product-modal-title{
  margin: 4px 0 10px;
  font-size: 26px;
  line-height: 1.15;
  color: #111;
}
#product-modal .product-modal-meta{
  color: rgba(0,0,0,.60);
  font-size: 13px;
  margin-bottom: 10px;
}
#product-modal .product-modal-price{
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
}
#product-modal .product-modal-shipping{
  color: rgba(0,0,0,.70);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Form alanları */
#product-modal .product-modal-form label{
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.65);
}
#product-modal .product-modal-select,
#product-modal .product-modal-input{
  width: 100%;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 0 12px;
  outline: none;
}
#product-modal .product-modal-select:focus,
#product-modal .product-modal-input:focus{
  border-color: rgba(0,0,0,.55);
}

/* Aksiyon butonları */
#product-modal .product-modal-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
#product-modal .pm-btn-primary,
#product-modal .pm-btn-secondary{
  height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  font-weight: 800;
}
#product-modal .pm-btn-primary{
  background: #d92a29;
  color: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(217,42,41,.18);
}
#product-modal .pm-btn-primary:hover{
  box-shadow: 0 14px 30px rgba(217,42,41,.22);
}
#product-modal .pm-btn-secondary{
  background: #fff;
  color: #111;
}

/* Açıklama */
#product-modal .product-modal-desc{
  margin-top: 16px;
  color: rgba(0,0,0,.80);
  line-height: 1.55;
  white-space: pre-line;
}

/* Modal açıkken scroll kilidi */
body.is-modal-open{
  overflow: hidden !important;
}

/* Mobil */
@media (max-width: 900px){
  #product-modal.product-modal.is-open{
    padding: 12px;
  }
  #product-modal .product-modal-grid{
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 14px;
  }
  #product-modal .product-modal-info{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  #product-modal .product-modal-main-image img{
    max-height: 44vh;
  }
}
/* =========================================================
   KANO BENEFITS — Spreadshirt benzeri (HTML'e dokunmadan)
   Sadece style.css ALTINA EKLE
   ========================================================= */
.kano-benefits{
  background:#ffffff;
  padding:54px 0 58px;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.kano-benefits-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:56px;
}

/* Her benefit */
.kano-benefit-item{
  flex:1 1 0;
  min-width:180px;
  max-width:240px;
  text-align:center;
  position:relative;
}

/* İkon alanı (üstte büyük, “floating” hissi) */
.kano-benefit-icon{
  width:150px;
  height:150px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* İkon görseli */
.kano-benefit-icon img{
  width:105px;
  height:105px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
  transform: translateY(2px);
}

/* Spreadshirt'teki küçük “sparkle/cross” hissi (süs) */
.kano-benefit-item::before,
.kano-benefit-item::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  opacity:.55;
  pointer-events:none;
  background:
    linear-gradient(#111,#111) center/10px 2px no-repeat,
    linear-gradient(#111,#111) center/2px 10px no-repeat;
  border-radius:2px;
}
.kano-benefit-item::before{ top:18px; left:14px; transform:rotate(12deg); }
.kano-benefit-item::after { top:42px; right:18px; transform:rotate(-18deg); }

/* Alttaki gri kart */
.kano-benefit-text{
  margin:0 auto;
  width:100%;
  background: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 100%);
  padding:18px 14px 16px;
  border-radius:0;                 /* Spreadshirt gibi “düz kart” */
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);

  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.15;
  color:#111;
}

/* Metin uzun olunca daha iyi kırpılsın */
.kano-benefit-text{
  word-break:break-word;
}

/* Hover: hafif premium hareket */
@media (hover:hover){
  .kano-benefit-item:hover .kano-benefit-icon img{
    transform: translateY(0px) scale(1.02);
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.14));
  }
  .kano-benefit-item:hover .kano-benefit-text{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0,0,0,.12);
  }
}

/* Responsive */
@media (max-width: 1024px){
  .kano-benefits-inner{
    gap:34px;
    padding:0 24px;
  }
  .kano-benefit-item{
    max-width:220px;
  }
}

@media (max-width: 780px){
  .kano-benefits{
    padding:34px 0 38px;
  }
  .kano-benefits-inner{
    flex-wrap:wrap;
    justify-content:center;
    gap:22px;
  }
  .kano-benefit-item{
    flex:0 1 calc(50% - 22px);
    min-width:240px;
    max-width:260px;
  }
  .kano-benefit-icon{
    width:140px;
    height:140px;
  }
  .kano-benefit-icon img{
    width:98px;
    height:98px;
  }
  .kano-benefit-text{
    font-size:17px;
  }
}

@media (max-width: 420px){
  .kano-benefit-item{
    flex:1 1 100%;
    min-width:auto;
    max-width:320px;
  }
}}

@media (max-width: 420px){
  .kano-benefit-item{
    flex:1 1 100%;
    min-width:auto;
    max-width:320px;
  }
}
/* =========================================================
   BENEFITS: Spreadshirt gibi slider + kare kart (CSS only)
   -> style.css en altına ekle
   ========================================================= */

/* Section arka planını temizle (istersen #fff yerine #f7f7f7 bırakabilirsin) */
.kano-benefits{
  background:#fff;
  padding: 38px 0 44px;
}}
/* =========================================================
   BENEFITS: Spreadshirt gibi slider + kare kart (CSS only)
   -> style.css en altına ekle
   ========================================================= */

/* Section arka planını temizle (istersen #fff yerine #f7f7f7 bırakabilirsin) */
.kano-benefits{
  background:#fff;
  padding: 38px 0 44px;
}

/* Yatay slider */
.kano-benefits-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 12px;

  display: flex;
  flex-wrap: nowrap !important;           /* aşağı düşmeyi bitir */
  justify-content: flex-start !important;
  gap: 24px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  scroll-padding-left: 40px;
}

/* Scrollbar (çok göze batmasın) */
.kano-benefits-inner::-webkit-scrollbar{ height: 8px; }
.kano-benefits-inner::-webkit-scrollbar-track{ background: transparent; }
.kano-benefits-inner::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

/* Kartlar (kare kutucuk hissi) */
.kano-benefit-item{
  flex: 0 0 320px;                 /* görünümde 3-4 kart + kaydırma */
  scroll-snap-align: start;

  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);

  padding: 22px 18px 18px;
  text-align: center;
  position: relative;
  min-height: 210px;
}

/* Daha önce eklenen “+ sparkle” süslerini kapat (senin SS’te dağılıyor) */
.kano-benefit-item::before,
.kano-benefit-item::after{
  display:none !important;
}

/* İkonu kartın içinde kare bir “badge” gibi yap */
.kano-benefit-icon{
  width: 96px !important;
  height: 96px !important;
  border-radius: 18px !important;       /* kare + yumuşak köşe */
  background: linear-gradient(180deg,#f2f2f2 0%, #e9e9e9 100%) !important;

  margin: 2px auto 14px !important;
  display:flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.07);
}

.kano-benefit-icon img{
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.14));
}

/* Alt yazıyı kartın içine al (gri ayrı kutu olmasın) */
.kano-benefit-text{
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;

  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.15;
  color:#111;
}

/* Hover (premium ama abartısız) */
@media (hover:hover){
  .kano-benefit-item{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .kano-benefit-item:hover{
    transform: translateY(-3px);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 18px 38px rgba(0,0,0,.12);
  }
  .kano-benefit-item:hover .kano-benefit-icon img{
    transform: none !important; /* eski hover zıplamasını öldür */
  }
}

/* Responsive: kart genişliği düşsün, kaydırma daha rahat olsun */
@media (max-width: 1024px){
  .kano-benefits-inner{
    padding: 0 24px 12px;
    scroll-padding-left: 24px;
    gap: 18px;
  }
  .kano-benefit-item{ flex-basis: 280px; }
}
@media (max-width: 780px){
  .kano-benefits-inner{
    padding: 0 16px 12px;
    scroll-padding-left: 16px;
  }
  .kano-benefit-item{
    flex-basis: 240px;
    min-height: 200px;
  }
}
/* ===============================
   SEARCH ICON FIX (düzgün büyüteç)
   style.css ALTINA EKLE
   =============================== */

/* Konteyner garanti */
.header-search-main{ position: relative; }
/* ===============================
   SEARCH ICON FIX (düzgün büyüteç)
   style.css ALTINA EKLE
   =============================== */

/* Konteyner garanti */
.header-search-main{ position: relative; }

/* Input sağda butona yer bıraksın */
.header-search-main input{
  padding-right: 56px !important;
}

/* Sağdaki ikon butonu: düzgün kutu + ortalı ikon */
.header-search-main button{
  right: 10px !important;
  width: 40px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Eski çizimi sıfırla */
.header-search-main button::before,
.header-search-main button::after{
  content: "" !important;
  position: absolute !important;
  background: transparent !important;
}

/* Lens (çember) */
.header-search-main button::before{
  width: 14px !important;
  height: 14px !important;
  border: 2px solid #333 !important;
  border-radius: 50% !important;
  left: 12px !important;
  top: 9px !important;
}

/* Sap (handle) */
.header-search-main button::after{
  width: 10px !important;
  height: 2px !important;
  background: #333 !important;
  left: 23px !important;
  top: 22px !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
  border-radius: 2px !important;
}

/* Hover */
@media (hover:hover){
  .header-search-main button:hover{
    border-color: rgba(0,0,0,.18) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.14) !important;
  }
}
/* ===============================
   SEARCH ICON - FIX (geri al + düzgün SVG)
   style.css EN ALTINA EKLE
   =============================== */

/* input sağda ikona yer bıraksın */
.header-search-main input{
  padding-right: 46px !important;
}

/* butonu tekrar “küçük şeffaf ikon” haline getir */
.header-search-main button{
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;

  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* önceki büyüteç çizimlerini komple iptal et */
.header-search-main button::before,
.header-search-main button::after{
  content: none !important;
}

/* düzgün, ortalı SVG büyüteç */
.header-search-main button{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

/* hover çok hafif */
@media (hover:hover){
  .header-search-main button:hover{
    opacity: .85 !important;
  }
}
/* ===============================
   SEARCH ICON: KAYBOLMAYAN DÜZGÜN SVG (override)
   style.css EN ALTINA EKLE
   =============================== */

.header-search-main{ position: relative; }

/* input sağda ikona yer bıraksın */
.header-search-main input{
  padding-right: 46px !important;
}

/* buton konumu + boyutu */
.header-search-main button{
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 22px !important;
  height: 22px !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer !important;

  display: grid !important;
  place-items: center !important;
}

/* eski çizimleri tamamen EZ */
.header-search-main button::after{
  content: none !important;
}

/* ikon artık tek parça: ::before içine SVG */
.header-search-main button::before{
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") !important;
}

@media (hover:hover){
  .header-search-main button:hover{ opacity:.85 !important; }
}
/* ===============================
   SEARCH ICON FINAL (tek parça, düzgün)
   style.css EN ALTINA EKLE
   =============================== */

.header-search-main { position: relative; }
/* ===============================
   SEARCH ICON FINAL (tek parça, düzgün)
   style.css EN ALTINA EKLE
   =============================== */

.header-search-main { position: relative; }

.header-search-main input{
  padding-right: 46px !important;
}

/* buton sadece tıklanabilir alan */
.header-search-main button{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* eski CSS’in çizdiği her şeyi KAPAT */
.header-search-main button::after{
  content: none !important;
}

/* eski “çember border”ı da dahil her şeyi sıfırla, sonra SVG koy */
.header-search-main button::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 18px !important;
  height: 18px !important;

  /* eski rule’dan gelen çember çizimini öldür */
  inset: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;

  /* düzgün büyüteç */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") !important;
}
/* Search ikonunu büyüt (minnak kaldı) */
.header-search-main button{
  width: 32px !important;
  height: 32px !important;
}

.header-search-main button::before{
  width: 22px !important;
  height: 22px !important;
  background-size: 22px 22px !important;
}
/* ===============================
   Search ikonunu barı dolduracak yap + sağ-alt hizala
   =============================== */

/* input: sağda ve altta ikona yer aç */
.header-search-main input{
  padding-right: 6px !important;   /* ikon büyüdü -> yer aç */
  padding-bottom: 1px !important;  /* alt hizalama nefes */
}

/* buton: sağ-alt köşeye oturt */
.header-search-main button{
  top: auto !important;
  bottom: 1px !important;           /* EN ALTA */
  right: 1px !important;           /* EN SAĞA */
  transform: none !important;

  width: 40px !important;           /* barı doldursun */
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
}

/* SVG ikonun boyutu */
.header-search-main button::before{
  width: 36px !important;
  height: 36px !important;
  background-size: 36px 36px !important;
}
/* ===============================
   Search icon hover background'u input'a YAPIŞTIR
   =============================== */

/* Input: sağda buton alanı bırak */
.header-search-main input{
  padding-right: 56px !important;
  padding-bottom: 9px !important;   /* senin eski pad’leri normale çek */
}

/* Button: input'un sağında, TAM yüksekliğe yapışık */
.header-search-main button{
  top: 1px !important;
  bottom: 1px !important;
  right: 1px !important;
  transform: none !important;

  width: 50px !important;
  height: auto !important;          /* top/bottom ile yükseklik */
  display: grid !important;
  place-items: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* input radius 3px => sağ taraf aynı olsun */
  border-radius: 0 3px 3px 0 !important;
}

/* Hover: arka plan artık input’un içine “yapışık” */
@media (hover:hover){
  .header-search-main button:hover{
    background: #f3f3f3 !important;
  }
}

/* SVG boyutu (barı daha iyi doldursun) */
.header-search-main button::before{
  width: 24px !important;
  height: 24px !important;
  background-size: 24px 24px !important;
}


/* ===== KANO: Product Modal - 3 buton (Tasarla / Sepete Ekle / Sepeti Görüntüle) hizalama ===== */
#product-modal .product-modal-actions{
  flex-wrap: nowrap;               /* desktop tek satır */
}
#product-modal .product-modal-actions .pm-btn-primary,
#product-modal .product-modal-actions .pm-btn-secondary{
  flex: 1 1 0;
  min-width: 0;
  border-radius: 999px;            /* pill */
  height: 46px;
}

/* Tasarla butonu ikon + yazı */
#product-modal .pm-btn-design{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#product-modal .pm-btn-design .pm-btn-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#product-modal .pm-btn-design .pm-btn-ico svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Mobilde alt alta */
@media (max-width: 640px){
  #product-modal .product-modal-actions{
    flex-wrap: wrap;
  }
  #product-modal .product-modal-actions .pm-btn-primary,
  #product-modal .product-modal-actions .pm-btn-secondary{
    width: 100%;
  }
}


/* =========================================================
   MOBILE OVERRIDE (Tasarla) — Spreadshirt-benzeri akış
   Not: Sadece tasarla.html'de <body class="page-designer"> ile çalışır.
   ========================================================= */

@media (max-width: 820px) {
  .page-designer, .page-designer body { overflow-x: hidden; }

  /* Desktop'taki "sağ panel absolute + padding-right" kurgusunu mobile'da iptal et */
  .page-designer .designer-editor{
    flex-direction: column !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
  }

  .page-designer .designer-right-panel{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    border-left: none !important;
    border-top: 1px solid #dedede !important;
    box-shadow: none !important;
    padding-bottom: 92px; /* fixed CTA için alan */
  }

  /* Sol toolbar: mobile'da üstte yatay toolbar */
  .page-designer .designer-sidebar{
    width: 100% !important;
    flex-direction: row !important;
    align-items: stretch;
    border-right: none !important;
    border-bottom: 1px solid #dedede;
  }

  .page-designer .designer-sidebar-top{
    width: 100%;
    display: flex;
    gap: 6px;
    justify-content: space-around;
    padding: 8px 6px;
    border-right: none !important;
    border-bottom: none !important;
  }

  .page-designer .designer-tool-btn{
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
  }
  .page-designer .designer-tool-btn span{
    font-size: 10px;
    line-height: 1.1;
  }

  /* Undo/Redo bloğu: mobile'da kapat (çok yer yiyor) */
  .page-designer .designer-sidebar-bottom{
    display: none !important;
  }

  /* Orta sahne */
  .page-designer .designer-center{
    padding: 12px 12px 0 !important;
  }

  .page-designer .designer-product-stage{
    width: 100%;
    min-height: 52dvh;
    padding-bottom: 8px;
  }

  /* Ürün görseli taşmasın */
  .page-designer .designer-product-wrapper{
    width: min(520px, 94vw) !important;
  }
  .page-designer .designer-main-product{
    width: 100% !important;
    height: auto !important;
    max-height: 48dvh;
    object-fit: contain;
  }

  /* Tasarım kanvası: dokunmatik sürükleme sırasında sayfa kaymasın */
  .page-designer .design-canvas,
  .page-designer .design-item,
  .page-designer .design-item *{
    touch-action: none;
  }

  /* Alt view şeridi: yatay kaydırılabilir */
  .page-designer .designer-views-strip{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px 14px;
  }
  .page-designer .designer-view-thumb{
    flex: 0 0 auto;
    min-width: 92px;
  }
  .page-designer .designer-view-thumb img{
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  /* Sipariş butonu: Spreadshirt tarzı altta sabit CTA */
  .page-designer .designer-right-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e6e6e6;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  .page-designer .designer-cta-btn{
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
  }

  /* Sağ panel içindeki form elemanları: iOS zoom engellemek için */
  .page-designer input,
  .page-designer select,
  .page-designer textarea,
  .page-designer button{
    font-size: 16px;
  }

  /* Products overlay (mini store) mobile full-screen */
  .page-designer .product-picker-overlay{
    align-items: stretch;
  }
  .page-designer .product-picker-shell{
    width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  .page-designer .product-picker-topbar{
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .page-designer .product-picker-content{
    flex-direction: column;
    overflow-y: auto;
  }
  .page-designer .mini-store-sidebar{
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #eeeeee;
  }
}

@media (max-width: 420px) {
  .page-designer .designer-product-wrapper{
    width: 96vw !important;
  }
  .page-designer .designer-view-thumb{
    min-width: 84px;
  }
}


/* =========================================================
   KANO PRO (2026-01): Spreadshirt-like start modal + ruler + smart guides
   Non-destructive overrides only.
   ========================================================= */

/* --- Start modal + dim editor --- */
body.kano-start-modal-open .designer-editor{
  filter: grayscale(0.05);
}}


/* =========================================================
   KANO PRO (2026-01): Spreadshirt-like start modal + ruler + smart guides
   Non-destructive overrides only.
   ========================================================= */

/* --- Start modal + dim editor --- */
body.kano-start-modal-open .designer-editor{
  filter: grayscale(0.05);
}
body.kano-start-modal-open .designer-layout,
body.kano-start-modal-open .designer-product-wrapper,
body.kano-start-modal-open .designer-left-sidebar,
body.kano-start-modal-open .designer-right-panel{
  opacity: 0.35; /* why: mimic Spreadshirt dim background */
  pointer-events: none; /* why: prevent accidental edits behind modal */
  transition: opacity 160ms ease;
}
body.kano-start-modal-open #kanoStartModal{
  pointer-events: auto;
  opacity: 1;
}

.kano-start-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100000;
}
.kano-start-modal[aria-hidden="false"]{ display:block; }
.kano-start-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.46);
}
.kano-start-modal-card{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  padding: 18px 18px 14px;
}
.kano-start-modal-card h3{
  margin: 6px 0 14px;
  font-size: 18px;
  font-weight: 800;
  color:#111;
}
.kano-start-modal-close{
  position:absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background:#fff;
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
}
.kano-start-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kano-start-action{
  border: 1px solid rgba(0,0,0,0.10);
  background: #fafafa;
  border-radius: 14px;
  padding: 12px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kano-start-action:hover{
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.kano-start-action-title{ font-weight: 800; font-size: 14px; color:#111; display:block; }
.kano-start-action-sub{ font-size: 12px; color:#6b7280; display:block; margin-top:4px; }

/* --- Rulers (canvas-based) --- */
.designer-product-wrapper{ position: relative; }
.kano-ruler-x,
.kano-ruler-y{
  position:absolute;
  pointer-events:none;
  opacity: 0;
  transform: translateY(-2px) scale(0.985);
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 40;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}
.kano-ruler-x{ height: 26px; }
.kano-ruler-y{ width: 26px; }

.kano-ruler-cursor-x,
.kano-ruler-cursor-y{
  position:absolute;
  pointer-events:none;
  z-index: 41;
  opacity: 0;
  transition: opacity 80ms ease;
}
.kano-ruler-cursor-x{
  height: 26px;
  width: 1px;
  background: rgba(30,122,255,0.95);
  top: 0;
}
.kano-ruler-cursor-y{
  width: 26px;
  height: 1px;
  background: rgba(30,122,255,0.95);
  left: 0;
}
body.kano-dragging .kano-ruler-cursor-x,
body.kano-dragging .kano-ruler-cursor-y{ opacity: 1; }

/* --- Units / grid toggle pill --- */
.kano-units-toggle{
  position:absolute;
  z-index: 42;
  display:flex;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  pointer-events: auto;
}
.kano-units-toggle button{
  border: 1px solid rgba(0,0,0,0.10);
  background:#fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor:pointer;
}
.kano-units-toggle button.is-active{
  border-color: rgba(30,122,255,0.55);
  box-shadow: 0 0 0 3px rgba(30,122,255,0.12);
}

/* --- Grid overlay (very subtle) --- */
.kano-grid{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 12;
  opacity: 0;
  transition: opacity 120ms ease;
}
.kano-grid.is-on{ opacity: 1; }
.kano-grid{
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: var(--kano-grid-step, 40px) var(--kano-grid-step, 40px);
  mix-blend-mode: multiply;
}

/* --- Selection handles (Spreadshirt-like) --- */
.design-item .kano-handle{
  position:absolute;
  width: 10px; height: 10px;
  background:#fff;
  border: 2px solid #1e7aff;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  display:none;
}
.design-item.is-selected .kano-handle{ display:block; }
/* corners */
.design-item .kano-handle[data-pos="nw"]{ left:-7px; top:-7px; cursor:nwse-resize; }
.design-item .kano-handle[data-pos="ne"]{ right:-7px; top:-7px; cursor:nesw-resize; }
.design-item .kano-handle[data-pos="sw"]{ left:-7px; bottom:-7px; cursor:nesw-resize; }
.design-item .kano-handle[data-pos="se"]{ right:-7px; bottom:-7px; cursor:nwse-resize; }
/* edges */
.design-item .kano-handle[data-pos="n"]{ left:50%; top:-7px; transform:translateX(-50%); cursor:ns-resize; }
.design-item .kano-handle[data-pos="s"]{ left:50%; bottom:-7px; transform:translateX(-50%); cursor:ns-resize; }
.design-item .kano-handle[data-pos="w"]{ left:-7px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.design-item .kano-handle[data-pos="e"]{ right:-7px; top:50%; transform:translateY(-50%); cursor:ew-resize; }

/* --- Right panel generic item editor --- */
.item-editor-panel{
  position:absolute;
  inset:0;
  background:#fff;
  z-index: 6; /* above productInfoPanel */
  padding: 14px;
  overflow:auto;
}
.item-editor-header{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
}
.item-editor-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.item-action-btn{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background:#fafafa;
  font-weight: 800;
  cursor:pointer;
}
.item-action-btn.danger{
  background: rgba(217,42,41,0.08);
  border-color: rgba(217,42,41,0.22);
  color: #b91c1c;
}
.item-editor-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:end;
}
.item-field{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 10px;
  background:#fff;
}
.item-field span{ width: 50px; font-weight: 800; font-size: 12px; color:#374151; }
.item-field input{
  width: 100%;
  border: 0;
  outline: none;
  font-weight: 800;
}
.item-apply-btn{
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(30,122,255,0.35);
  background: rgba(30,122,255,0.08);
  font-weight: 900;
  cursor:pointer;
}
.item-editor-hints{
  margin-top: 12px;
  color:#6b7280;
  font-size: 12px;
  display:grid;
  gap: 4px;
}

/* --- Readout: allow inline-flex --- */
.kano-pos-readout{ display:none; }
body.kano-dragging .kano-pos-readout{ display:inline-flex; }


/* === KANO PATCH (2026-01): Ölçü birimi sabit CM, birim butonları kaldırıldı === */
.kano-units-toggle{ display:none !important; }

body.kano-dragging .kano-ruler-x,
body.kano-dragging .kano-ruler-y{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* === KANO PATCH: Baskı alanı aşağı taşma uyarısı (opsiyonel) === */
#designCanvas.kano-overflow{
  outline: 2px dashed rgba(217,42,41,0.75);
  outline-offset: 2px;
}
#designCanvas.kano-overflow::after{
  content: "Aşağı taşma var";
  position: absolute;
  left: 10px;
  bottom: -28px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(217,42,41,0.95);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(217,42,41,0.25);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}
@media (max-width: 820px){
  #designCanvas.kano-overflow::after{ display:none; }
}


/* =========================================================
   KANO PATCH v3: Seçimde handle + legacy küçük kareyi kaldır
   - Küçük "design-resize-handle" kareleri tamamen kapatılır
   - Handle'lar sadece seçiliyken görünür (mavi seçim çerçevesi üstünde)
   ========================================================= */
.design-resize-handle,
.text-resize-handle{
  display:none !important;
  pointer-events:none !important;
}}


/* =========================================================
   KANO PATCH v3: Seçimde handle + legacy küçük kareyi kaldır
   - Küçük "design-resize-handle" kareleri tamamen kapatılır
   - Handle'lar sadece seçiliyken görünür (mavi seçim çerçevesi üstünde)
   ========================================================= */
.design-resize-handle,
.text-resize-handle{
  display:none !important;
  pointer-events:none !important;
}

.design-item.is-selected,
.design-text-item.is-selected,
.design-image-item.is-selected{
  border: 2px solid rgba(0,170,255,0.95) !important;
  box-shadow: 0 0 0 2px rgba(0,170,255,0.15) !important;
}

/* Handle base for all item types */
.design-item .kano-handle,
.design-text-item .kano-handle,
.design-image-item .kano-handle{
  position:absolute;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: #fff;
  border: 2px solid rgba(0,170,255,0.95);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  display:none;
  z-index: 5;
}
.design-item.is-selected .kano-handle,
.design-text-item.is-selected .kano-handle,
.design-image-item.is-selected .kano-handle{
  display:block;
}

/* Reuse existing positioning rules (works because dataset.pos is same) */
.design-text-item .kano-handle[data-pos="nw"],
.design-image-item .kano-handle[data-pos="nw"]{ left:-7px; top:-7px; cursor:nwse-resize; }
.design-text-item .kano-handle[data-pos="ne"],
.design-image-item .kano-handle[data-pos="ne"]{ right:-7px; top:-7px; cursor:nesw-resize; }
.design-text-item .kano-handle[data-pos="sw"],
.design-image-item .kano-handle[data-pos="sw"]{ left:-7px; bottom:-7px; cursor:nesw-resize; }
.design-text-item .kano-handle[data-pos="se"],
.design-image-item .kano-handle[data-pos="se"]{ right:-7px; bottom:-7px; cursor:nwse-resize; }
.design-text-item .kano-handle[data-pos="n"],
.design-image-item .kano-handle[data-pos="n"]{ left:50%; top:-7px; transform:translateX(-50%); cursor:ns-resize; }
.design-text-item .kano-handle[data-pos="s"],
.design-image-item .kano-handle[data-pos="s"]{ left:50%; bottom:-7px; transform:translateX(-50%); cursor:ns-resize; }
.design-text-item .kano-handle[data-pos="w"],
.design-image-item .kano-handle[data-pos="w"]{ left:-7px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.design-text-item .kano-handle[data-pos="e"],
.design-image-item .kano-handle[data-pos="e"]{ right:-7px; top:50%; transform:translateY(-50%); cursor:ew-resize; }

/* Align guides: görünürlük .is-visible + JS ile yönetilir (container gizlenmez) */
.align-guides{
  display:block;
}
/* === SMART ALIGNMENT GUIDES === */
.smart-guide {
  position: absolute;
  background: #1e88ff;
  z-index: 9999;
  pointer-events: none;
}
.smart-guide.vertical { width:1px; top:0; bottom:0; }
.smart-guide.horizontal { height:1px; left:0; right:0; }

/* ===========================================
   MODERN MAĞAZA SAYFASI TASARIMI
   (Ek CSS - 2026)
=========================================== */

/* Genel yapı */
.shop-container {
  display: flex;
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 24px;
  gap: 32px;
  background-color: #f6f7f9;
}

/* Sidebar */
.shop-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.shop-sidebar .category-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.shop-sidebar .category-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.shop-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-sidebar li {
  margin-bottom: 8px;
}

.shop-sidebar a {
  color: #555;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s;
}

.shop-sidebar a:hover {
  color: #000;
}

/* Sağ içerik alanı */
.shop-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Başlık */
.shop-content h1 {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 600;
  color: #222;
  margin: 0;
}

/* Filtre alanı */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shop-filters label {
  font-size: 14px;
  color: #777;
  display: block;
  margin-bottom: 4px;
}

.shop-filters select,
.shop-filters input {
  height: 46px;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 15px;
  background: #fff;
  transition: border-color 0.2s;
}

.shop-filters select:focus,
.shop-filters input:focus {
  border-color: #000;
  outline: none;
}

/* Ürün grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.product-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 14px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-card:hover {
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.product-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

.product-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 6px 0;
  text-align: center;
}

.product-card .price {
  font-size: 17px;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}

.product-card .options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.product-card .options select {
  height: 36px;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 0 10px;
  font-size: 14px;
}

/* Mobil uyum */
@media (max-width: 1024px) {
  .shop-container {
    flex-direction: column;
  }
  .shop-sidebar {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .shop-filters {
    overflow-x: auto;
    padding-bottom: 6px;
  }
}}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .shop-filters {
    overflow-x: auto;
    padding-bottom: 6px;
  }
}
/* ===========================================
   ÜRÜN KARTLARI - Minimal Görünüm (2026)
=========================================== */

.product-card {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}}
/* ===========================================
   ÜRÜN KARTLARI - Minimal Görünüm (2026)
=========================================== */

.product-card {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.product-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 8px;
}

.product-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  margin: 4px 0;
}

.product-card .price {
  font-size: 17px;
  font-weight: 700;
  color: #000;
  margin-top: 2px;
}

/* Gereksiz elemanları tamamen gizle */
.product-card .options,
.product-card .size,
.product-card .color,
.product-card .add-to-cart,
.product-card button,
.product-card .btn {
  display: none !important;
  visibility: hidden !important;
}

/* Grid düzeni korunur */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
/* ===========================================
   ÜRÜN KARTLARI – TAMAMEN CONTAINER'SIZ
   SADECE: GÖRSEL + İSİM + FİYAT
=========================================== */

/* Kart, link, wrapper ne varsa sıfırla */
.product-card,
.product-card *,
.product-item,
.product,
.product-wrapper,
.product-inner,
.product-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Kartın kendisi */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Shopify / varyant / form / buton TEMİZLE */
.product-card form,
.product-card button,
.product-card select,
.product-card option,
.product-card .options,
.product-card .variants,
.product-card .variant,
.product-card .size,
.product-card .sizes,
.product-card .color,
.product-card .colors,
.product-card .swatch,
.product-card .add-to-cart,
.product-card .add-cart,
.product-card .cart,
.product-card .btn,
.product-card .product-actions,
.product-card .product-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ÜRÜN GÖRSELİ – tek başına, kutusuz */
.product-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 0 8px 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

/* ÜRÜN ADI */
.product-card h3,
.product-card .product-title,
.product-card .title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #222 !important;
  margin: 4px 0 2px 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* FİYAT – kalın */
.product-card .price,
.product-card .product-price,
.product-card .amount {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Grid düzeni (kutusuz ama aralıklı) */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 24px !important;
}

/* Hover’da BİLE kart çıkmasın */
.product-card:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* =========================================================
   ZARA / APPLE STORE – TAM MİNİMAL ÜRÜN GRID
   SADECE: GÖRSEL + İSİM + FİYAT
========================================================= */

/* 1️⃣ Kart hissi veren TÜM şeyleri ÖLDÜR */
article.product-card,
article.product-card * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 2️⃣ ASIL SORUN: pseudo-card'i YOK ET */
article.product-card::before,
article.product-card::after {
  content: none !important;
  display: none !important;
}

/* 3️⃣ Kartın kendisi: sade kolon */
article.product-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4️⃣ GÖRSEL – edge, kutusuz, premium */
article.product-card img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
}

/* 5️⃣ ÜRÜN ADI – sade, Zara stili */
article.product-card h3,
article.product-card .product-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #111 !important;
  margin: 4px 0 2px 0 !important;
  text-align: center !important;
}

/* 6️⃣ FİYAT – kalın ama bağırmayan */
article.product-card .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 !important;
}

/* 7️⃣ BEDEN / RENK / SEPET / FORM = TAMAMEN SİL */
.product-variants,
.product-variants *,
.btn-add-to-cart,
article.product-card button,
article.product-card select,
article.product-card form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 8️⃣ GRID – Apple Store spacing */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 28px !important;
}

/* 9️⃣ Hover: SADECE görsel zoom */
article.product-card img {
  transition: transform 0.35s ease !important;
}
article.product-card:hover img {
  transform: scale(1.04);
}
/* =========================================================
   TAM ORTALI – BÜYÜK FOTOĞRAF – MİNİMAL GRID
   Apple Store / Zara hissi
========================================================= */

/* GRID: tam ortalı */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 36px !important;
  justify-items: center !important;   /* kartları ortala */
  align-items: start !important;
}

/* Ürün kartı: max genişlik ver → ortalı durur */
article.product-card {
  width: 100% !important;
  max-width: 320px !important;  /* foto büyük ama dengeli */
  text-align: center !important;
}

/* GÖRSEL: DAHA BÜYÜK + PREMİUM */
article.product-card img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 12px !important;

  transition: transform 0.45s cubic-bezier(.2,.8,.2,1) !important;
  will-change: transform;
}

/* Hover: SADECE FOTO BÜYÜSÜN */
article.product-card:hover img {
  transform: scale(1.08);
}

/* Ürün adı */
article.product-card h3,
article.product-card .product-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #111 !important;
  margin: 6px 0 2px 0 !important;
}

/* Fiyat */
article.product-card .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 !important;
}

/* Mobil ayar */
@media (max-width: 768px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  article.product-card {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FULL WIDTH – EDGE TO EDGE – MINIMAL GRID
   Apple Store / Zara
========================================================= */

/* Sayfa ve container’ları genişlet */
.store-content,
.store-grid,
#product-list {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}}

/* =========================================================
   FULL WIDTH – EDGE TO EDGE – MINIMAL GRID
   Apple Store / Zara
========================================================= */

/* Sayfa ve container’ları genişlet */
.store-content,
.store-grid,
#product-list {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Grid: tam boy, ortalama yok */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 40px !important;
  justify-items: stretch !important;
  align-items: start !important;
}

/* Ürün kartı: container yok, edge’e yayılır */
article.product-card {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Kart hissi veren her şeyi öldür */
article.product-card,
article.product-card * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Pseudo element (asıl beyaz/mavi kart) */
article.product-card::before,
article.product-card::after {
  content: none !important;
  display: none !important;
}

/* ÜRÜN GÖRSELİ – BÜYÜK + PREMİUM */
article.product-card img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 14px !important;

  transition: transform 0.5s cubic-bezier(.2,.8,.2,1) !important;
  will-change: transform;
}

/* Hover: sadece foto */
article.product-card:hover img {
  transform: scale(1.08);
}

/* Ürün adı */
article.product-card h3,
article.product-card .product-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #111 !important;
  margin: 6px 0 2px 0 !important;
}

/* Fiyat */
article.product-card .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 !important;
}

/* Beden / renk / sepete ekle = TAMAMEN SİL */
.product-variants,
.product-variants *,
.btn-add-to-cart,
article.product-card button,
article.product-card select,
article.product-card form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobil */
@media (max-width: 768px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .store-content,
  #product-list {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   🚨 KESİN FULL-WIDTH FIX
   Parent container’ları da kır
========================================================= */

/* Genel sayfa genişliği KIR */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
}}

/* =========================================================
   🚨 KESİN FULL-WIDTH FIX
   Parent container’ları da kır
========================================================= */

/* Genel sayfa genişliği KIR */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
}

/* Tüm olası wrapper’ları serbest bırak */
.container,
.page,
.section,
.store-content,
.store-grid-wrapper,
#product-list,
section.store-grid {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* =========================================================
   GRID – TAM BOY, ORTALAMA YOK
========================================================= */

.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 48px !important;
  justify-items: stretch !important;
  align-items: start !important;
  width: 100% !important;
}

/* =========================================================
   ÜRÜN KARTI – CONTAINER YOK
========================================================= */

article.product-card {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  background: transparent !important;
}

/* Kart hissi veren HER ŞEYİ YOK ET */
article.product-card,
article.product-card * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* En büyük suçlu: pseudo kart */
article.product-card::before,
article.product-card::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   GÖRSEL – BÜYÜK + ZOOM + HOVER 1️⃣
========================================================= */

article.product-card img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 14px !important;

  transition: transform .55s cubic-bezier(.2,.8,.2,1),
              opacity .35s ease !important;
  will-change: transform;
}

article.product-card:hover img {
  transform: scale(1.1);
}

/* =========================================================
   METİN – ZARA / APPLE
========================================================= */

article.product-card h3,
article.product-card .product-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #111 !important;
  margin: 6px 0 2px 0 !important;
  letter-spacing: .02em;
}

article.product-card .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
}

/* =========================================================
   BEDEN / RENK / SEPET = YOK
========================================================= */

.product-variants,
.product-variants *,
.btn-add-to-cart,
article.product-card button,
article.product-card select,
article.product-card form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   2️⃣ SCROLL REVEAL (CSS-only, hafif)
========================================================= */

article.product-card {
  animation: fadeUp .6s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   3️⃣ MOBİL
========================================================= */

@media (max-width: 768px) {
  .container,
  .store-content,
  #product-list {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}}

/* =========================================================
   3️⃣ MOBİL
========================================================= */

@media (max-width: 768px) {
  .container,
  .store-content,
  #product-list {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   ESSENTIALS.COM.TR STİLİ – FULL WIDTH GRID
========================================================= */

/* 🔴 GERÇEK SUÇLU PARENT’LARI SERBEST BIRAK */
.store-main,
.store-container,
.store-layout,
.store-content,
#product-list {
  max-width: none !important;
  width: 100vw !important;
  margin: 0 !important;
}}
/* =========================================================
   ESSENTIALS.COM.TR STİLİ – FULL WIDTH GRID
========================================================= */

/* 🔴 GERÇEK SUÇLU PARENT’LARI SERBEST BIRAK */
.store-main,
.store-container,
.store-layout,
.store-content,
#product-list {
  max-width: none !important;
  width: 100vw !important;
  margin: 0 !important;
}

/* Grid: tam boy, kenarlara yapışık */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 48px !important;
  padding: 0 48px !important;
}

/* Ürün kartı: KUTU YOK */
article.product-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center;
}

/* pseudo card varsa öldür */
article.product-card::before,
article.product-card::after {
  display: none !important;
  content: none !important;
}

/* Görsel alanı */
.product-image-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Görseller */


/* hover görseli gizli başlar */
.product-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* hover */
article.product-card:hover .product-img-main {
  opacity: 0;
  transform: scale(1.06);
}
article.product-card:hover .product-img-hover {
  opacity: 1;
  transform: scale(1.06);
}

/* isim */
.product-name {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #111;
}

/* fiyat */
.product-price {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* beden / renk / sepete ekle YOK */
.product-variants,
.btn-add-to-cart {
  display: none !important;
}

/* Mobil */
@media (max-width: 768px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 16px !important;
    gap: 24px !important;
  }
}
@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================
   MAĞAZA: ÜST BAŞLIK YOK, TOOLBAR VAR
========================================= */

/* Mağaza başlığını gizle (varsa) */
.store-title,
.store-toolbar h1{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}}

/* =========================================
   MAĞAZA: ÜST BAŞLIK YOK, TOOLBAR VAR
========================================= */

/* Mağaza başlığını gizle (varsa) */
.store-title,
.store-toolbar h1{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Toolbar görünür kalsın */
.store-toolbar{
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

/* Sayfa tamamen beyaz */
html, body { background: #fff !important; }
.store-layout,
.store-main,
.store-content { background: #fff !important; }

/* Ürün görsel arka planı beyaz kalsın */
.product-media,
.product-image,
.product-image-wrap,
.product-card .product-img-wrap,
.product-card .product-image-wrap{ background: #fff !important; }

/* Kategori sidebar biraz daha yukarı */
.store-sidebar{
  top: 84px !important;
  margin-top: 0 !important;
}


/* =====================================================
   ESSENTIALS TARZI – SADE ÜRÜN KARTI
===================================================== */

/* GRID: geniş, nefes alan */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 64px !important;
  padding: 0 56px !important;
}

/* Kart: görünmez container */
article.product-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* Görsel alanı */
.product-image-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f5f5f5;
  overflow: hidden;
}

/* Ürün görseli */


/* Ürün adı */
.product-name {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 400;
  color: #111;
  line-height: 1.4;
}

/* Fiyat */
.product-price {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 700;
  color: #000;
}

/* Hover: SADECE çok hafif zoom */
article.product-card img {
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
article.product-card:hover img {
  transform: scale(1.04);
}

/* Mobil */
@media (max-width: 768px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
    padding: 0 16px !important;
  }
}

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   ESSENTIALS OUTLET – BİREBİR GRID KİLİDİ
===================================================== */

/* Sayfa arka planı saf beyaz */
.store-content,
.store-main,
body {
  background: #ffffff !important;
}}
/* =====================================================
   ESSENTIALS OUTLET – BİREBİR GRID KİLİDİ
===================================================== */

/* Sayfa arka planı saf beyaz */
.store-content,
.store-main,
body {
  background: #ffffff !important;
}

/* GRID: daha geniş kolon + daha büyük boşluk */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  gap: 72px !important;
  padding: 0 64px !important;
}

/* Kart: metinler sola yaslı */
article.product-card {
  text-align: left !important;
}

/* Görsel alanı: referanstaki gibi UZUN */
.product-image-wrap {
  aspect-ratio: 2 / 3 !important; /* kilit nokta */
  background: #ffffff !important;
}

/* Görsel davranışı */


/* Ürün adı: daha hafif ve küçük */
.product-name {
  margin-top: 16px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #111 !important;
}

/* Fiyat: net ama bağırmıyor */
.product-price {
  margin-top: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Hover: Essentials’ta neredeyse yok */
article.product-card:hover img {
  transform: none !important;
}

/* Mobil: referanstaki gibi 2 kolon */
@media (max-width: 768px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
    padding: 0 16px !important;
  }
}
/* =====================================================
   OPTİK BÜYÜTME HACK (ESSENTIALS İLLÜZYONU)
===================================================== */

/* Görsel alanını bilinçli olarak daralt → obje büyür */
.product-image-wrap {
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Görseli container’dan BÜYÜK çiz */


/* Hover’da minicik yaklaşma (neredeyse fark edilmez) */
article.product-card:hover 

/* Görsel ile yazı arasındaki mesafeyi azalt */
.product-name {
  margin-top: 10px !important;
}

/* Grid nefesi: daha büyük ürün hissi */
.store-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  gap: 72px !important;
}

/* Mobilde aşırı büyümesin */
@media (max-width: 768px) {
  
}
/* =====================================================
   ESSENTIALS SEVİYESİ AGRESİF KADRAJ HACK
===================================================== */

/* Grid daha da yayılıyor */
.store-grid {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
  gap: 80px !important;
  padding: 0 72px !important;
}

/* Görsel alan: daha uzun ve temiz */
.product-image-wrap {
  aspect-ratio: 2 / 3 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

/* ÜRÜNÜ GERÇEKTEN BÜYÜTEN KISIM */


/* Hoodie / uzun ürünler biraz daha yukarı */
.product-img[src*="hoodie"],
.product-img[src*="sweat"] {
  top: -14%;
}

/* Hover’da hareket yok (Essentials’ta da yok gibi) */
article.product-card:hover img {
  transform: none !important;
}

/* Metinler referans gibi sakin */
.product-name {
  margin-top: 18px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.product-price {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Arka plan tamamen beyaz algı */
.store-content,
.store-main {
  background: #ffffff !important;
}

/* =====================================================
   SPREADSHIRT BİREBİR GRID
===================================================== */

/* Arka plan TAM beyaz */
body,
.store-content,
.store-main {
  background: #ffffff !important;
}

/* GRID: SPREADSHIRT = 3 KOLON */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px !important;
  padding: 0 48px !important;
}

/* Kart yok */
.store-grid article.product-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Görsel alanı (Spreadshirt gibi TAM KARE tile) */
.store-grid .spreadshirt-image{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Görsel yerleşimi (kırpma yok, daha dolu) */
.store-grid .spreadshirt-image 

/* Ürün adı (bir tık daha açık ton) */
.store-grid .product-name{
  margin-top: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #555 !important;
}

/* Alt açıklama satırı (daha açık, daha küçük) */
.store-grid .product-subline{
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #777 !important;
}

/* Fiyat (koyu + güçlü) */
.store-grid .product-price{
  margin-top: 6px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111 !important;
}


/* Mobil */
@media (max-width: 1024px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .store-grid {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   BOŞLUK + AŞAĞI KAYMA FIX
===================================================== */

/* Grid: kolonları makul seviyeye çek */
.store-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 56px !important;
  align-items: start !important;
}}
/* =====================================================
   BOŞLUK + AŞAĞI KAYMA FIX
===================================================== */

/* Grid: kolonları makul seviyeye çek */
.store-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 56px !important;
  align-items: start !important;
}

/* Kart yukarıdan başlasın */
article.product-card {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Görsel alan: yukarı yapış */
.product-image-wrap {
  aspect-ratio: 3 / 4 !important;   /* biraz daha kısa */
  overflow: hidden !important;
}

/* Görseli daha az kaydır → boşluk kalkar */


/* Ürünler grid içinde yukarı hizalansın */
.store-grid > article {
  align-self: start !important;
}

/* İlk satırda ekstra boşluk varsa öldür */
.store-content {
  padding-top: 0 !important;
}

/* Hover’da hareket yok */
article.product-card:hover img {
  transform: none !important;
}

/* ================================
   GRID TAM BOY + YUKARI YAPIŞ FIX
================================ */

/* Ana içerik boşluğunu öldür */
.store-content,
.store-main,
#product-list {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* GRID: gerçek mağaza düzeni */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 64px !important;
  align-items: start !important;
}

/* Kart: hiçbir gizli boşluk kalmasın */
article.product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: unset !important;
}

/* Görsel alan: büyük + yukarı yapış */
.product-image-wrap {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* GÖRSEL ASIL DÜZELTME */


/* Metinler: aşağı sabit */
.product-title {
  margin-top: 16px !important;
  font-size: 15px !important;
  text-align: center !important;
}

.product-price {
  margin-top: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Hover’da zıplama olmasın */
article.product-card:hover {
  transform: none !important;
}

/* ================================
   SPREADSHIRT / ESSENTIALS GRID
   FINAL FIX
================================ */

/* Ana içerik yukarı yapışsın */
.store-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* GRID */
.store-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 96px !important;
  align-items: start !important;
}

/* ÜRÜN KARTI = HİÇBİR ŞEY */
.product-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* GÖRSEL ALANI */
.product-image-wrap {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* GÖRSEL GERÇEK BOY */


/* HOVER */
.product-img-hover {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}

.product-image-wrap:hover .product-img-hover {
  opacity: 1 !important;
}

/* METİN */
.product-name {
  margin-top: 18px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.product-price {
  margin-top: 6px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
/* ====== GRID ANA ALAN ====== */
.store-page,
.store-container,
.products-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 32px !important;
}

/* ====== GRID ====== */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 48px 32px !important;
  align-items: start !important;
}

/* ====== PRODUCT CARD ====== */
.product-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ====== IMAGE CONTAINER ====== */
.product-image-wrapper {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f6f6f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* ====== IMAGE ====== */
.product-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}

/* Hover grow (Spreadshirt hissi) */
.product-card:hover img {
  transform: scale(1.05);
}

/* ====== TITLE ====== */
.product-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 14px !important;
  text-align: left !important;
}

/* ====== PRICE ====== */
.product-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
  text-align: left !important;
}

/* ====== SOLD / DISCOUNT HER ŞEYİ KAPAT ====== */
.tukendi,
.discount,
.old-price {
  display: none !important;
}
/* ====== ANA SAHNEYİ SERBEST BIRAK ====== */
.store-page,
.store-container,
.store-content,
.products-area {
  min-height: auto !important;
  height: auto !important;
  padding-top: 0 !important;
  margin-top: 0 !important;

  display: block !important;
}

/* Flex ile ortalama varsa öldür */
.store-page *,
.store-container * {
  align-items: unset !important;
  justify-content: unset !important;
}

/* ====== GRID GERÇEKTEN YUKARIDAN BAŞLASIN ====== */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 40px !important;

  align-content: start !important;
  align-items: start !important;
}

/* ====== KART ====== */
.product-card {
  margin: 0 !important;
  padding: 0 !important;
}

/* ====== GÖRSEL ====== */
.product-image-wrapper {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f5f5f5 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-image-wrapper img {
  width: 90% !important;
  height: 90% !important;
  object-fit: contain !important;
}

/* ====== SOLD / DISCOUNT TEMİZLE ====== */
.tukendi,
.discount,
.old-price {
  display: none !important;
}
/* ===== KANO STORE GRID: BOŞLUK + MİNİCİK GÖRSEL FIX ===== */

/* 1) Grid'in yukarıdan başlamasını garanti et */
section#product-list.store-grid{
  align-content: start !important;
  grid-auto-rows: auto !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2) Asıl suçlu: product-card::before alan basıyor → tamamen öldür */
section#product-list.store-grid article.product-card::before{
  content: none !important;
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Kartı sadeleştir (grid satırını şişirmesin) */
section#product-list.store-grid article.product-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  align-self: start !important;
}

/* 4) Link wrapper'ı: gerçek "image box" yap (Spreadshirt tarzı) */
section#product-list.store-grid article.product-card > a.product-link{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;      /* kare */
  background: #f3f4f6 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 5) Görselleri box’a tamamen doldur (minicik kalmasın) */
section#product-list.store-grid article.product-card > a.product-link img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;       /* istersen cover yaparız */
  display: block !important;
}

/* 6) Hover görseli (3 yoksa 2 zaten JS seçiyor) */
section#product-list.store-grid .product-img-hover{
  opacity: 0 !important;
  transition: opacity .2s ease !important;
}
section#product-list.store-grid a.product-link:hover .product-img-hover{
  opacity: 1 !important;
}

/* 7) Başlık + fiyat (kutusuz, düzgün aralık) */
section#product-list.store-grid .product-title{
  margin: 14px 0 0 !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
section#product-list.store-grid .product-price{
  margin: 6px 0 0 !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* 8) Beden/renk/sepete ekle tamamen gizle */
section#product-list.store-grid .product-variants,
section#product-list.store-grid .btn-add-to-cart{
  display: none !important;
}
/* ====== SAYFAYA SIĞDIR (OVERFLOW / DEVASA GÖRSEL FIX) ====== */

/* Grid sütunlarını biraz daralt – ekrana daha çok ürün sığsın */
section#product-list.store-grid{
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 32px 28px !important;
}

/* Görsel kutusu: kare yerine daha dengeli oran + max yükseklik */
section#product-list.store-grid article.product-card > a.product-link{
  aspect-ratio: 4 / 5 !important;        /* daha “mağaza” oranı */
  max-height: 420px !important;          /* devasa olmasın */
}

/* Görsel: taşma yok, sığdır */
section#product-list.store-grid article.product-card > a.product-link img{
  object-fit: contain !important;
}

/* Çok büyük ürünlerde de taşmasın diye güvenlik */
section#product-list.store-grid article.product-card{
  overflow: hidden !important;
}
/* ====== DESKTOP: 3 KOLON SABİT ====== */
section#product-list.store-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Responsive kırılımlar */
@media (max-width: 1100px){
  section#product-list.store-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  section#product-list.store-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* ==============================
   MAĞAZA ÜRÜN GRID: 3 SÜTUN + İSİM(İNCE) / FİYAT(KALIN)
   En alta ekle
============================== */

/* Grid'i yakala (senin sayfada: section#product-list.store-grid) */
#product-list.store-grid,
.store-grid,
.product-grid {
  display: grid !important;
  gap: 24px !important;
  align-content: start !important;
}}

/* ==============================
   MAĞAZA ÜRÜN GRID: 3 SÜTUN + İSİM(İNCE) / FİYAT(KALIN)
   En alta ekle
============================== */

/* Grid'i yakala (senin sayfada: section#product-list.store-grid) */
#product-list.store-grid,
.store-grid,
.product-grid {
  display: grid !important;
  gap: 24px !important;
  align-content: start !important;
}

/* MASAÜSTÜ: 3 sütun */
@media (min-width: 1024px) {
  #product-list.store-grid,
  .store-grid,
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* TABLET: 2 sütun */
@media (max-width: 1023px) and (min-width: 601px) {
  #product-list.store-grid,
  .store-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* MOBİL: 1 sütun */
@media (max-width: 600px) {
  #product-list.store-grid,
  .store-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Kart içi hizalama (görsel + metinler ortalı kalsın) */
.product-card,
article.product-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Ürün adı: ince font */
.product-card h3,
.product-card .product-title,
.product-card .title,
article.product-card h3,
article.product-card .product-title {
  font-weight: 300 !important;   /* ince */
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  color: #222 !important;
  margin: 10px 0 4px 0 !important;
  text-align: center !important;
}

/* Fiyat: kalın font */
.product-card .price,
.product-card .product-price,
.product-card .amount,
article.product-card .price,
article.product-card .product-price,
article.product-card .amount {
  font-weight: 800 !important;   /* kalın */
  font-size: 15px !important;
  color: #000 !important;
  margin: 0 !important;
  text-align: center !important;
}
/* ==============================
   KANO MAĞAZA: 3 SÜTUN + KART TILE + İSİM(İNCE) / FİYAT(KALIN)
   En alta ekle
============================== */

/* 3 sütun (desktop) */
#product-list.store-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* tablet 2, mobil 1 */
@media (max-width: 1024px){
  #product-list.store-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px){
  #product-list.store-grid{ grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* Grid içindeki her item = kart gibi davransın (HTML ne olursa olsun) */
#product-list.store-grid > *{
  background: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 16px !important;
  padding: 14px !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  /* devasa yükseklikleri ez */
  height: auto !important;
  min-height: 0 !important;
}}

/* Grid içindeki her item = kart gibi davransın (HTML ne olursa olsun) */
#product-list.store-grid > *{
  background: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 16px !important;
  padding: 14px !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  /* devasa yükseklikleri ez */
  height: auto !important;
  min-height: 0 !important;
}

/* Kart içindeki görselleri kare tile yap */
#product-list.store-grid > * img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;      /* kare */
  object-fit: contain !important;       /* t-shirt kesilmesin */
  display: block !important;

  background: #f4f4f4 !important;
  border-radius: 14px !important;
}

/* İsim: ince font (hangi class gelirse gelsin yakala) */
#product-list.store-grid :is(.product-name,.product-title,.title,h3,h2,.name){
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  color: #222 !important;
  margin: 6px 0 0 0 !important;
  text-align: center !important;

  /* gizlenmişse zorla göster */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fiyat: kalın font (hangi class gelirse gelsin yakala) */
#product-list.store-grid :is(.product-price,.price,.amount,.money,.current-price){
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #000 !important;
  margin: 0 !important;
  text-align: center !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* ==============================
   FINAL OVERRIDE: 3 KOLON + (data-title / data-price) GÖSTER
   style.css EN ALT
============================== */

#product-list.store-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 48px !important;
  padding: 0 48px !important;
  align-items: start !important;
}

@media (max-width: 1024px){
  #product-list.store-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px){
  #product-list.store-grid{ grid-template-columns: 1fr !important; padding: 0 16px !important; gap: 24px !important; }
}}
@media (max-width: 600px){
  #product-list.store-grid{ grid-template-columns: 1fr !important; padding: 0 16px !important; gap: 24px !important; }
}

/* Kartı toparla (dosyada all:unset vb. var, bunu sabitle) */
#product-list.store-grid article.product-card{
  display:block !important;
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
}}

/* Kartı toparla (dosyada all:unset vb. var, bunu sabitle) */
#product-list.store-grid article.product-card{
  display:block !important;
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
}

/* Link blok olsun */
#product-list.store-grid a.product-link{
  display:block !important;
  text-decoration:none !important;
  color:inherit !important;
}

/* Görsel alanı: tile gibi, sabit oran */
#product-list.store-grid .product-image-wrap.spreadshirt-image{
  width:100% !important;
  aspect-ratio: 3 / 4 !important;
  background:#f5f5f5 !important;
  border-radius: 18px !important;
  overflow:hidden !important;
  position:relative !important;
  display:block !important;
}

/* Görselleri normalleştir (dosyada 115% vs. var) :contentReference[oaicite:1]{index=1} */
#product-list.store-grid .product-image-wrap.spreadshirt-image img

/* Hover resmi mevcutsa */
#product-list.store-grid .product-img-hover{ opacity:0 !important; transition: opacity .25s ease !important; }
#product-list.store-grid .product-image-wrap:hover .product-img-hover{ opacity:1 !important; }

/* ====== METİNİ PSEUDO İLE BAS ====== */
/* Başlık (ince) */
#product-list.store-grid article.product-card::before{
  content: attr(data-title) !important;
  display:block !important;
  margin-top: 12px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  color:#111 !important;
  text-align:center !important;
  white-space: nowrap !important;
  overflow:hidden !important;
  text-overflow: ellipsis !important;
}

/* Fiyat (kalın) */
#product-list.store-grid article.product-card::after{
  content: attr(data-price) !important;
  display:block !important;
  margin-top: 6px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color:#000 !important;
  text-align:center !important;
}

/* === FIX: İSİM + FİYAT GÖRÜNMÜYOR (a.product-link overflow/ratio kırpıyordu) === */

/* Kart taşırmasın ama metni kırpmasın */
section#product-list.store-grid article.product-card{
  overflow: visible !important; /* senin CSS'te hidden vardı -> metni yutuyordu */
}

/* Link artık "tile" değil: metin de taşıyacak */
section#product-list.store-grid article.product-card > a.product-link{
  aspect-ratio: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: static !important;
  background: transparent !important;
}

/* a.product-link img için yazdığın absolute kuralını iptal et (sadece wrap içinde yapacağız) */
section#product-list.store-grid article.product-card > a.product-link img{
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: unset !important;
}

/* Görsel kutusu gerçek "tile" */
section#product-list.store-grid .product-image-wrap.spreadshirt-image{
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 5 !important;
  max-height: 420px !important;
  background: #f3f4f6 !important;
  border-radius: 18px !important;
}

/* Görseller tile içine tam otursun */
section#product-list.store-grid .product-image-wrap.spreadshirt-image img

/* Hover 3. görsel */
section#product-list.store-grid .product-img-hover{
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}
section#product-list.store-grid a.product-link:hover .product-img-hover{
  opacity: 1 !important;
}

/* İsim ince, fiyat kalın */
section#product-list.store-grid .product-name{
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  font-weight: 300 !important;  /* ince */
  line-height: 1.35 !important;
  color: #111 !important;
}
section#product-list.store-grid .product-price{
  margin: 6px 0 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;  /* kalın */
  color: #000 !important;
}

/* Desktop: 3 kolon */
section#product-list.store-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px 28px !important;
}

/* Responsive */
@media (max-width: 1100px){
  section#product-list.store-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px){
  section#product-list.store-grid{ grid-template-columns: 1fr !important; }
}
/* === SAYFAYA SIĞDIR (3 kolon aynı kalsın, daha kompakt) === */

/* Sağ içerik alanını biraz daha dar/derli toplu yap */
.store-content{
  padding-right: 24px !important;
}}
/* === SAYFAYA SIĞDIR (3 kolon aynı kalsın, daha kompakt) === */

/* Sağ içerik alanını biraz daha dar/derli toplu yap */
.store-content{
  padding-right: 24px !important;
}

/* Grid: daha az yatay boşluk + daha küçük gap */
section#product-list.store-grid{
  width: 100% !important;
  max-width: 1180px !important;     /* sayfaya sığdır */
  margin: 0 auto !important;
  padding: 0 24px !important;       /* 48 çok büyüktü */
  gap: 22px 18px !important;
}

/* Görsel kutusu: küçült (asıl sığdıran kısım) */
section#product-list.store-grid .product-image-wrap.spreadshirt-image{
  max-height: 320px !important;     /* 420 -> 320 */
  aspect-ratio: 4 / 5 !important;
}

/* Görsel padding’i azaltsın (daha küçük görünür) */
section#product-list.store-grid .product-image-wrap.spreadshirt-image img

/* Metinler çok aşağı düşmesin */
section#product-list.store-grid .product-name{
  margin-top: 10px !important;
  font-size: 13px !important;
}
section#product-list.store-grid .product-price{
  margin-top: 4px !important;
  font-size: 15px !important;
}

/* Büyük ekranlarda biraz daha sıkı */
@media (min-width: 1400px){
  section#product-list.store-grid{
    max-width: 1260px !important;
  }
}

/* Mobil zaten iyi ama padding’i dengeli tut */
@media (max-width: 640px){
  section#product-list.store-grid{
    padding: 0 14px !important;
  }
}

/* === FİYAT, ÜRÜN İSMİNİN TAM ALTINA HİZALANSIN === */

/* İsim + fiyat aynı kolon, ortalı */
section#product-list.store-grid article.product-card{
  text-align: center !important;
}

/* DOM'da price/name muhtemelen flex ile dağıtılıyor, bunu iptal et */
section#product-list.store-grid article.product-card > a.product-link{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* İsim */
section#product-list.store-grid .product-name{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 12px 0 0 !important;
}

/* Fiyat: isimle aynı hizaya, tam altına */
section#product-list.store-grid .product-price{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 6px 0 0 !important;
}

/* Eğer bir yerde price'ı sola/sağa iten kural varsa bunu ez */
section#product-list.store-grid .product-price{
  align-self: center !important;
  justify-self: center !important;
}

/* ================================
   KANO Store Sidebar (Spreadshirt-like)
   Sadece stil — HTML/JS dokunma
================================ */

/* Sidebar kutu hissini kaldır, daha “temiz panel” yap */
.store-sidebar{
  width: 260px !important;
  max-width: 260px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: unset !important;
}

/* Bölümler arası ayırıcı (Categories / Products) */
.store-sidebar-section{
  padding: 0 0 18px !important;
}

.store-sidebar-section + .store-sidebar-section{
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e6e6e6 !important;
}

/* Başlık satırı */
.store-sidebar-header{
  padding: 10px 0 10px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.store-sidebar-title{
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
  letter-spacing: .01em !important;
}

/* Sağdaki chevron: daha “UI” gibi görünsün */
.store-sidebar-chevron{
  font-size: 0 !important;              /* metin/karakter varsa gizle */
  width: 18px !important;
  height: 18px !important;
  position: relative !important;
  transform: rotate(0deg) !important;
  transition: transform .18s ease !important;
  opacity: .75 !important;
}

.store-sidebar-chevron::before{
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 6px !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 2px solid #111 !important;
  border-bottom: 2px solid #111 !important;
  transform: rotate(45deg) !important;
}

/* collapsed durumunda ok yönü (senin yapına göre) */
.store-sidebar-section.collapsed .store-sidebar-chevron{
  transform: rotate(180deg) !important;
}

/* Liste */
.store-sidebar-list{
  padding: 2px 0 0 !important;
  margin: 0 !important;
  max-height: 800px !important;
  opacity: 1 !important;
}

/* Satırlar: Spreadshirt gibi full-width “row” */
.store-sidebar-list li{
  margin: 0 !important;
}

.store-sidebar-list a{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;

  padding: 10px 12px !important;
  border-radius: 10px !important;

  color: #111 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;

  transition: background-color .12s ease, transform .06s ease !important;
}

/* Hover: underline değil, arka plan */
.store-sidebar-list a:hover{
  background: #f3f3f3 !important;
  text-decoration: none !important;
}

/* “aktif/selected” hissi istersen (senin JS active class veriyorsa çalışır) */
.store-sidebar-list a.active,
.store-sidebar-list a[aria-current="page"]{
  background: #111 !important;
  color: #fff !important;
}

/* Mobilde sidebar zaten width:100 oluyordu — sadece padding verelim */
@media (max-width: 900px){
  .store-sidebar{
    width: 100% !important;
    max-width: 100% !important;
  }

  .store-sidebar-list a{
    padding: 12px 12px !important;
  }
}

/* Hover/aktif durumlarda ikon rengi, mevcut color kuralıyla akar */


/* =====================================================
   SIDEBAR: Spreadshirt'e daha yakın (dropdown KAPALI)
   - Kadın/Erkek/Unisex başlık + alt kategoriler sürekli açık
   - Kart görünümü yok, düz liste
   - İkon çemberi yok
   - Font / tipografi Spreadshirt hissi
===================================================== */

.store-sidebar,
.store-sidebar *{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
}

/* Üst "Kategoriler" başlığını sabitle (tıklanabilir değil gibi) */
.store-sidebar-section[data-section="categories"]{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.store-sidebar-section[data-section="categories"] .store-sidebar-header{
  cursor: default !important;
  padding: 0 0 10px !important;
}

.store-sidebar-section[data-section="categories"] .store-sidebar-header .store-sidebar-chevron{
  display: none !important;
}

/* Cinsiyet grupları: kart/box yok */
.store-sidebar-group{
  margin: 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.store-sidebar-group:hover{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Grup başlığı: sadece heading satırı */
.store-sidebar-group-toggle{
  padding: 6px 0 !important;
  background: transparent !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 0 !important;
}

.store-sidebar-group-toggle span:first-child{
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
  letter-spacing: .01em !important;
}

/* Grup içindeki ok/chevron tamamen kapalı */
.store-sidebar-group-toggle .store-sidebar-chevron{
  display: none !important;
}

/* Grup listesi hep açık ve düz */
.store-sidebar-group .store-sidebar-list{
  display: block !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
  max-height: none !important;
}

/* Link tipografi */
.store-sidebar-list a{
  padding: 10px 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #111 !important;
}

.store-sidebar-list a:hover{
  background: #f3f3f3 !important;
}

/* AKTİF */
.store-sidebar-list a.is-active{
  background: #ededed !important;
}

/* Gender icon (Kadın/Erkek/Unisex) */
.store-sidebar-gender-icon{
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111 !important;
  opacity: .9 !important;
}

.store-sidebar-gender-icon svg{
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
  display: block !important;
}

/* Mobilde spacing */
@media (max-width: 900px){
  .store-sidebar-group-toggle span:first-child{
    font-size: 16px !important;
  }
}

/* SADECE SAĞ-SOL BOŞLUK (genel şemaya dokunmaz) */
.store-container{
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (min-width: 1200px){
  .store-container{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
.store-main{ overflow-x: hidden !important; }}
.store-main{ overflow-x: hidden !important; }

/* SADECE sağ-sol boşluk: layout'a dokunmaz */
.store-main{
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (min-width: 1200px){
  .store-main{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
/* 1) Tüm sayfa arka plan: bembeyaz */
html, body{
  background: #fff !important;
}}
/* 1) Tüm sayfa arka plan: bembeyaz */
html, body{
  background: #fff !important;
}

/* bazen wrapper/ana alan gri basıyor olabilir */
.store-main, .store-container, .store-layout, .store-content{
  background: #fff !important;
}

/* 2) Sağ içerik alanını biraz sola al (sadece sağ içerik) */
.store-content{
  margin-left: -12px !important; /* 8-16 arası ideal; yetmezse -16 yap */
}

/* mobilde negatif kaydırma yapmayalım */
@media (max-width: 900px){
  .store-content{ margin-left: 0 !important; }
}

/* === GIFT VOUCHER FIXES (EN ALTA EKLE) === */

/* 1) "Hediye Kartı" badge üstündeki küçük kırmızı çizgiyi kaldır */
.gift-voucher-card::after{
  display: none !important;
}

/* 2) Fiyat pill'lerinde soldaki ₺ pseudo-ikonunu kaldır (sağdaki 500₺ vs kalsın) */
.gift-voucher-card .gift-voucher-meta span::before{
  content: "" !important;
  display: none !important;
}
.gift-voucher-card .gift-voucher-meta span{
  padding-left: 14px !important; /* temiz hizalama */
}

/* 3) Sadece sağdaki kart görselini kırmızı yap */
.gift-voucher-card .voucher-mock{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.32), rgba(255,255,255,0) 58%),
    radial-gradient(120% 140% at 100% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, rgba(217,42,41,.96), rgba(140,0,0,.92)) !important;

  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.22),
    0 2px 0 rgba(255,255,255,.20) inset !important;
}

/* kırmızı kart üstünde yazılar okunur olsun */
.gift-voucher-card .voucher-brand,
.gift-voucher-card .voucher-note{
  color: rgba(255,255,255,.85) !important;
}

/* kod pill'i kırmızı üstünde beyaz */
.gift-voucher-card .voucher-code{
  color: #fff !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
}

/* brand yanındaki küçük nokta kırmızıda kaybolmasın */
.gift-voucher-card .voucher-brand::after{
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 6px 14px rgba(255,255,255,.20) !important;
}

/* =========================
   HERO: tam genişlik + daha uzun + overlay kutusunu kaldır
   ========================= */

/* Slider alanı artık container'a sıkışmasın, full width olsun */
.hero-slider-inner{
  max-width: none !important;
  width: 100% !important;
  height: 1860px !important; /* aşağı doğru biraz uzasın */
}

/* Resim zaten cover; garanti olsun */
.hero-slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Siyah arkaplanlı/blur kutuyu kaldır: sadece yazı + buton kalsın */
.hero-overlay{
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* konum kalsın */
  left: 60px !important;
  bottom: 60px !important;
  max-width: 520px !important;
}

/* Yazı okunurluğu için hafif gölge (kutu yokken gerekli) */
.hero-overlay h1,
.hero-overlay p{
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Butonları Spreadshirt gibi daha büyük yap */
.hero-buttons .btn{
  padding: 14px 28px !important;
  font-size: 17px !important;
  border-radius: 4px !important; /* daha “kutu” hissi */
}

/* Mobilde de biraz uzat */
@media (max-width: 768px){
  .hero-slider-inner{ height: 360px !important; }
  .hero-overlay{
    left: 20px !important;
    right: 20px !important;
    bottom: 24px !important;
    max-width: none !important;
  }
  .hero-buttons .btn{
    padding: 12px 22px !important;
    font-size: 16px !important;
  }
}

/* Desktop / genel */
.hero-slider,
.hero-slider-inner,
.hero-slide{
  height: 660px !important; /* burayı artır */
}

/* 1024 ve altı (sende şu an burası aktif) */
@media (max-width: 1024px){
  .hero-slider,
  .hero-slider-inner,
  .hero-slide{
    height: 260px !important; /* burayı artır */
  }
}

/* =========================================================
   KANO MAĞAZA – Spreadshirt benzeri hover çizgisi + %15 küçük kart
========================================================= */

/* Kartlar ~%15 küçülsün: grid konteynerini daralt */
section#product-list.store-grid{
  max-width: 900px !important;   /* 1180 -> ~%15 daha küçük */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dar ekranlarda gereksiz daraltma yapmasın */
@media (max-width: 1100px){
  section#product-list.store-grid{
    max-width: 100% !important;
  }
}

/* Hover'da kart etrafında ince çizgi (hover değilken görünmez) */
section#product-list.store-grid article.product-card{
  outline: 0 solid transparent !important;
  outline-offset: 10px; /* çizgi karttan biraz dışarıda dursun */
  transition: outline-color .18s ease, outline-width .18s ease;
}

section#product-list.store-grid article.product-card:hover{
  outline-width: 1px !important;
  outline-color: rgba(15, 23, 42, .18) !important;
}

/* MAĞAZA: store-content arka planı saf beyaz */
.store-main,
.store-container,
.store-layout,
.store-content {
  background: #fff !important;
}

/* === FORCE STORE BACKGROUND PURE WHITE (FINAL OVERRIDE) === */
:root{
  --bg: #fff !important;
}

/* her ihtimale karşı direkt de boya */
html, body,
.store-main, .store-container, .store-layout, .store-content,
.store-grid{
  background: #fff !important;
}


/* KANO PATCH: view thumbnail preview (front/back) */
.designer-view-thumb{position:relative;overflow:hidden;}
.designer-view-thumb img.kano-thumb-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  opacity:1;
  border-radius:8px;
}
.designer-view-thumb:not(.has-design) img.kano-thumb-preview{display:none;}


/* =========================================================
   KANO STORE — Spreadshirt Shop look&feel (scoped override)
   Not: Global reset yok. Sadece mağaza sayfasına etki eder.
========================================================= */

.store-main {
  background: #fff !important;
  padding: 20px 0 64px !important;
}

.store-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.store-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* Sidebar — sticky */
.store-sidebar {
  position: sticky;
  top: 92px; /* header altında */
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 14px 14px 18px;
}

/* Sidebar section header */
.store-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 6px 0 10px;
  cursor: pointer;
}

.store-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #111;
}

.store-sidebar-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform 160ms ease;
  color: #444;
}

.store-sidebar-section.collapsed .store-sidebar-chevron {
  transform: rotate(180deg);
}

.store-sidebar-section + .store-sidebar-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}

/* Gender group toggle */
.store-sidebar-group-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #111;
}

.store-sidebar-gender-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
}

.store-sidebar-gender-icon svg {
  width: 20px;
  height: 20px;
}

.store-sidebar-group.is-open .store-sidebar-group-toggle .store-sidebar-chevron {
  transform: rotate(0deg);
}
.store-sidebar-group:not(.is-open) .store-sidebar-group-toggle .store-sidebar-chevron {
  transform: rotate(180deg);
}

.store-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.store-sidebar-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #111;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.2;
}

.store-sidebar-list a:hover {
  text-decoration: underline;
}

.store-sidebar-list a.is-active {
  font-weight: 600;
}

/* Content */
.store-content {
  min-width: 0;
}

/* Toolbar */
.store-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.store-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.store-results {
  font-size: 13px;
  color: #444;
}

.store-results-sep {
  margin: 0 6px;
  color: #888;
}

.store-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.store-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
}

.store-select-label {
  white-space: nowrap;
}

.store-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 9px 30px 9px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  line-height: 1;
  color: #111;
}

/* filter button (mobile) */
.store-filters-btn {
  display: inline-flex;
  border: 1px solid #d6d6d6;
  background: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: #111;
}

.store-filters-btn:hover {
  border-color: #111;
}

/* Grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 18px;
}

/* Card */
.store-main .product-card {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 12px 12px 12px;
  background: #fff;
  box-shadow: none;
  transform: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.store-main .product-card:hover {
  border-color: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.store-main .product-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.store-main .product-image-wrap {
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 0 !important;
}

.store-main .product-image-stage {
  position: absolute;
  inset: 0;
}

.store-main .product-image-wrap 

.store-main .product-img-placeholder {
  position: absolute;
  inset: 0;
  background: #f3f3f3;
}

.store-main .product-img-hover {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .store-main .product-card:hover .product-img-hover {
    opacity: 1;
  }
  .store-main .product-card:hover .product-img-main {
    opacity: 0;
  }
}

/* Title + price */
.store-main .product-name {
  font-size: 14px;
  font-weight: 400;
  margin: 10px 0 2px;
  color: #111;
  line-height: 1.25;
}}

/* Title + price */
.store-main .product-name {
  font-size: 14px;
  font-weight: 400;
  margin: 10px 0 2px;
  color: #111;
  line-height: 1.25;
}

.store-main .product-price {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #111;
}

/* Variants + button daha minimal (Spreadshirt grid'e yakın) */
.store-main .product-variants {
  margin-top: 8px;
  gap: 10px;
}

.store-main .product-variants label span {
  color: #666;
  font-size: 11px;
}

.store-main .product-variants select {
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid #d6d6d6;
  font-size: 12px;
  background: #fff;
}

.store-main .btn-add-to-cart {
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  padding: 10px 12px;
  font-size: 13px;
}

/* Responsive grid breakpoints */
@media (max-width: 1280px) {
  .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .store-layout {
    grid-template-columns: 1fr;
  }

  .store-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Sidebar drawer */
  .store-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    max-height: none;
    width: min(360px, 92vw);
    border-radius: 0;
    transform: translateX(-110%);
    transition: transform 220ms ease;
    z-index: 10020;
  }

  body.store-filters-open .store-sidebar {
    transform: translateX(0);
  }

  .store-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10010;
  }
}
@media (max-width: 768px) {
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}}
@media (max-width: 768px) {
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .store-container { padding: 0 16px; }
  .store-grid { grid-template-columns: 1fr; }
}}
@media (max-width: 420px) {
  .store-container { padding: 0 16px; }
  .store-grid { grid-template-columns: 1fr; }
}

/* ===============================
   MAĞAZA: HER ŞEY ORTALI DURSUN
   (EN ALTA EKLE)
   =============================== */

/* Sayfa genel konteyner: gerçek merkez */
.store-container{
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}}

/* ===============================
   MAĞAZA: HER ŞEY ORTALI DURSUN
   (EN ALTA EKLE)
   =============================== */

/* Sayfa genel konteyner: gerçek merkez */
.store-container{
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Sidebar + içerik bloğunu komple ortala */
.store-layout{
  width: 100% !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important; /* flex'te toplam bloğu ortalar */
  gap: 48px !important;              /* nefes */
}

/* Sağ içerik: negatifi / kaymaları öldür */
.store-content{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Grid: sağa-sola iten paddingleri kaldır, grid'i ortala */
.store-grid,
section#product-list.store-grid{
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;  /* grid track’lerini ortalar */
}

/* =========================================
   MAĞAZA: ÜRÜNLER ARASI BOŞLUĞU MİNİMİZE ET
   (EN ALTA EKLE)
   ========================================= */

:where(.store-grid, #product-list.store-grid){
  /* devasa gap'leri ez */
  gap: 14px !important;
  column-gap: 18px !important;
  row-gap: 18px !important;

  /* grid iç padding'i küçült (48/56px gibi değerleri ez) */
  padding: 12px !important;
}

/* Kartın kendi iç boşluklarını biraz sıkılaştır */
:where(.store-grid > *, .store-grid .product-card, article.product-card){
  margin: 0 !important;
  padding: 10px !important;
}

/* Kart içi başlık/fiyat dikey boşluklarını azalt */
:where(.store-grid .product-name, .store-grid .product-title, .store-grid h3, .store-grid h4){
  margin-top: 8px !important;   /* 12+ ise azalt */
}

:where(.store-grid .product-price, .store-grid .price){
  margin-top: 4px !important;
}

/* =========================================
   MAĞAZA: ÜRÜNLER ARASI BOŞLUĞU MİNİMİZE ET
   (EN ALTA EKLE)
   ========================================= */

:where(.store-grid, #product-list.store-grid){
  /* büyük gap/padding'leri ez */
  gap: 14px !important;
  column-gap: 12px !important;
  row-gap: 14px !important;

  padding: 6px !important;
}

/* Kart iç boşluklarını da sıkılaştır */
:where(.store-grid > *, .store-grid .product-card, article.product-card){
  margin: 0 !important;
  padding: 8px !important;
}

/* İsim/fiyat arası dikey boşluğu azalt */
:where(.store-grid .product-name, .store-grid .product-title, .store-grid h3, .store-grid h4){
  margin: 6px 0 0 !important;
}
:where(.store-grid .product-price, .store-grid .price){
  margin: 2px 0 0 !important;
}

/* =========================================
   MAĞAZA: ÜRÜNLERİ ~%15 KÜÇÜLT (KOLON GENİŞLİĞİ LİMİTİ)
   (EN ALTA EKLE)
   ========================================= */

@media (min-width: 1100px) {
  /* Grid çok genişleyip kartları büyütmesin */
  #product-list.store-grid {
    max-width: 1180px !important;   /* gerekirse 1120-1240 arası oynat */
    margin-left: auto !important;
    margin-right: auto !important;

    /* 3 kolon: her kolon max 320px -> kartlar küçülür */
    grid-template-columns: repeat(3, minmax(0, 250px)) !important;
    justify-content: center !important;

    column-gap: 12px !important;
    row-gap: 14px !important;
    padding: 6px !important;
  }

  /* Kartın iç boşlukları biraz daha sıkı */
  #product-list.store-grid > * {
    padding: 6px !important;
    margin: 0 !important;
  }

  /* Görsel alanı “şişiyorsa” onu da kıs */
  #product-list.store-grid img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =========================================
   MAĞAZA: ÜRÜNLERİ ~%15 KÜÇÜLT (DESKTOP)
   ========================================= */
@media (min-width: 1100px){
  /* 3 kolon ama her kolon max 300px (kartlar küçülür) */
  #product-list.store-grid{
    grid-template-columns: repeat(3, minmax(0, 300px)) !important;
    justify-content: center !important;

    column-gap: 12px !important;
    row-gap: 14px !important;
    padding: 6px !important;
  }

  /* Kart iç boşluklarını da kıs */
  #product-list.store-grid > *{
    padding: 6px !important;
    margin: 0 !important;
  }

  /* Görsel alanı fazla şişiyorsa maksimum yükseklik ver */
  #product-list.store-grid img{
    max-height: 280px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* =========================================
   MAĞAZA: KARTLARI ~%15 KÜÇÜLT (GENİŞLİK + GÖRSEL ALANI)
   (EN ALTA EKLE)
   ========================================= */

@media (min-width: 1100px){
  /* 3 kolon - her kolona üst limit */
  #product-list.store-grid{
    grid-template-columns: repeat(3, minmax(0, 285px)) !important;
    justify-content: center !important;

    column-gap: 12px !important;
    row-gap: 14px !important;
    padding: 6px !important;
  }

  /* Kartların kendisi de max 285px olsun */
  :where(#product-list.store-grid > *, #product-list.store-grid .product-card, #product-list.store-grid article){
    max-width: 285px !important;
  }

  /* Görsel kutusu kartı şişiriyorsa: yüksekliği kıs */
  :where(
    #product-list .product-image,
    #product-list .product-image-wrap,
    #product-list .product-thumb,
    #product-list .product-media,
    #product-list .card-image,
    #product-list .image-wrap
  ){
    height: 260px !important;      /* 260 = ~%15 küçülme; gerekirse 240/280 */
    padding: 10px !important;      /* iç boşluğu küçült */
  }

  /* Resim: taşmasın, kutuya otursun */
  #product-list.store-grid img{
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ==============================
   STORE OVERRIDE (sidebar spacing + full white background)
   En sona ekle
============================== */

/* 1) Tüm sayfa arka planı kesin beyaz */
html, body {
  background: #fff !important;
}

/* Sayfada olası wrapper'ların arkaplanını da beyaza zorla */
#MainContent,
main,
.page-width,
.shopify-section,
.section,
.container,
.store-page,
.store-content,
.store-wrapper {
  background: #fff !important;
}

/* 2) Ürün kartlarında / görsel çevresinde otomatik gelen gri arkaplanı kapat
   (Spreadshirt benzeri için: kart/görsel alanı beyaz/şeffaf) */
.product-card,
.product-grid-item,
.product-tile,
.card,
.collection-product-card,
.product-item,
.product-image,
.product-image-wrapper,
.product-media,
.product-media-wrapper,
.product__media,
.product__media-wrapper,
.media,
.media > img {
  background: #fff !important;
}

/* Bazı temalarda img yerine wrapper’a gradient/placeholder basılıyor */
.product-image-wrapper::before,
.product-media-wrapper::before,
.media::before {
  background: transparent !important;
  content: none !important;
}

/* 3) Sidebar ekranda ortalı dursun + sol ile mesafe olsun
   - Sayfa genişliğini ortalar (max-width ile kontrol)
   - Sidebar’ın soldan yapışmasını engeller
*/
.store-layout,
.store-grid,
.store-container,
.collection-layout,
.collection-grid,
.shop-layout {
  width: min(1200px, calc(100% - 32px)) !important; /* ortalı görünüm */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sidebar soldan biraz içeri, ürün alanından da boşluk */
.store-sidebar,
.sidebar,
.collection-sidebar,
.filters-sidebar,
.facets,
#store-sidebar {
  margin-left: 12px !important;  /* sol kenardan mesafe */
  padding-left: 4px !important;
}

/* Sidebar ile ürünler arası mesafe (gap) */
.store-sidebar + .store-products,
.sidebar + .store-products,
.collection-sidebar + .collection-products,
.filters-sidebar + .collection-products,
.facets + .collection-products,
#store-sidebar + #store-products {
  margin-left: 18px !important;
}

/* Eğer layout flex/grid ise aradaki boşluğu garantiye al */
.store-layout,
.store-container,
.collection-layout,
.shop-layout {
  column-gap: 18px !important;
}

/* Bazı durumlarda sağa/sola yapışma “padding:0” yüzünden olur */
.store-layout,
.store-container,
.collection-layout,
.shop-layout {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* ==============================
   STORE OVERRIDE (white bg + centered layout + sidebar spacing)
   EN SONA EKLE
============================== */

/* 1) Full white background everywhere */
html, body { background:#fff !important; }

#MainContent, main, .page-width, .container, .section,
.store-page, .store-content, .store-wrapper,
.collection, .collection-page, .shopify-section {
  background:#fff !important;
}

/* 2) Product image/card gray auto background OFF */
.product-card, .product-grid-item, .product-tile, .card,
.collection-product-card, .product-item,
.product-image, .product-image-wrapper,
.product-media, .product-media-wrapper,
.product__media, .product__media-wrapper,
.media {
  background:#fff !important;
  background-image:none !important;
}

/* Bazı temalarda pseudo ile placeholder basılıyor */
.product-image-wrapper::before,
.product-media-wrapper::before,
.media::before {
  background:transparent !important;
  content:none !important;
}

/* 3) Center the whole store layout + keep breathing room */
.store-layout, .store-container, .store-grid,
.collection-layout, .collection-grid, .shop-layout {
  width: min(1200px, calc(100% - 32px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:16px !important;
  padding-right:16px !important;
  column-gap:18px !important;
}

/* Sidebar: not glued to left + spaced from products */
.store-sidebar, .sidebar, .collection-sidebar, .filters-sidebar, .facets, #store-sidebar {
  margin-left:12px !important;
  padding-left:4px !important;
}

/* Sidebar + products gap (works if they are siblings) */
.store-sidebar + .store-products,
.sidebar + .store-products,
.collection-sidebar + .collection-products,
.filters-sidebar + .collection-products,
.facets + .collection-products,
#store-sidebar + #store-products {
  margin-left:18px !important;
}
/* KATEGORİ (SIDEBAR) DAHA SAĞA */
.store-sidebar,
.sidebar,
.collection-sidebar,
.filters-sidebar,
.facets,
#store-sidebar {
  margin-left: 232px !important; /* 12px -> 32px */
}

/* Eğer yetmezse 40-48 yap */


/* =========================================================
   KANO STORE - Spreadshirt eşleştirme patch (08.01.2026)
   - Tasarım/Ürün görünümünde otomatik görsel (3. / 1.)
   - Mobil filtreler butonu sidebar drawer
   - Arka plan tamamen beyaz
   - Sidebar kategoriler biraz yukarı
   ========================================================= */

/* Tam beyaz arka plan (sayfa + kart görsel arkası) */
body, .store-page, .store-main, .store-content, .store-container {
  background: #fff !important;
}
.store-main .product-image-wrap,
.store-main .spreadshirt-image,
.store-main .product-img-placeholder {
  background: #fff !important;
}

/* Design view: hover görseli sanki hover varmış gibi hep açık */
.store-main.is-design-view .product-card.has-hover .product-img-hover { opacity: 1 !important; }
.store-main.is-design-view .product-card.has-hover .product-img-main  { opacity: 0 !important; }

/* Mobil: Filtreler butonu → sidebar drawer */
.store-filters-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
}
@media (max-width: 900px){
  body.store-filters-open .store-filters-backdrop{ display:block; }

  /* Sidebar drawer */
  .store-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width: min(92vw, 420px) !important;
    max-width: 92vw !important;
    background:#fff !important;
    z-index: 9999;
    transform: translateX(-110%);
    transition: transform 200ms ease;
    overflow:auto;
    padding: 14px 12px 22px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
  }
  body.store-filters-open .store-sidebar{
    transform: translateX(0);
  }
}

/* Sidebar kategori bloğu biraz daha yukarı (desktop) */
@media (min-width: 901px){
  .store-sidebar{
    margin-top: -8px !important;
  }
}}

/* Sidebar kategori bloğu biraz daha yukarı (desktop) */
@media (min-width: 901px){
  .store-sidebar{
    margin-top: -8px !important;
  }
}



/* =========================================================
   STORE TOOLBAR (Spreadshirt-like, flat + pill controls)
   ========================================================= */

/* Toolbar should NOT be a big card */
.store-toolbar{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 12px 0 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.store-toolbar-left{
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-width: 520px !important;
  flex: 1 1 auto !important;
}

.store-results{
  font-size: 14px !important;
  color: rgba(17,24,39,.60) !important;
  white-space: nowrap !important;
}

.store-toolbar-controls{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* pill base */
.store-pill{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(17,24,39,.20) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.store-pill:hover{
  border-color: rgba(17,24,39,.35) !important;
}

.store-pill:focus-within{
  border-color: rgba(17,24,39,.55) !important;
  box-shadow: 0 0 0 3px rgba(17,24,39,.08) !important;
}

/* select pill: make native select clickable but invisible */
.store-pill--select select{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  border: 0 !important;
  background: transparent !important;
}

/* chevron */
.store-pill-chevron{
  width: 10px !important;
  height: 10px !important;
  margin-left: 2px !important;
  display: inline-block !important;
  border-right: 2px solid rgba(17,24,39,.55) !important;
  border-bottom: 2px solid rgba(17,24,39,.55) !important;
  transform: rotate(45deg) !important;
}

/* icon on filters */
.store-pill-icon{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  color: rgba(17,24,39,.75) !important;
}

/* view toggle on the right like "Change view: Products | Design" */
.store-view-toggle{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

.store-view-label{
  font-size: 14px !important;
  color: rgba(17,24,39,.70) !important;
}

.store-view-btn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: rgba(17,24,39,.72) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.store-view-btn.is-active{
  color: #111827 !important;
  font-weight: 700 !important;
}

.store-view-sep{
  color: rgba(17,24,39,.35) !important;
  padding: 0 2px !important;
}

/* keep toolbar from wrapping too early */
@media (max-width: 920px){
  .store-toolbar-left{ min-width: 0 !important; }
  .store-results{ display:none !important; } /* Spreadshirt görünümü için mobilde gizle */
}

/* Sidebar a bit higher on desktop (as requested) */
@media (min-width: 901px){
  .store-sidebar{ margin-top: -12px !important; }
}




/* === KANO STORE - FINAL LAYOUT + TOOLBAR OVERRIDES (09.01.2026) === */
body::before{content:none !important;display:none !important;}

main.store-main .store-container{max-width:1200px !important;margin:0 auto !important;padding:0 24px !important;}
main.store-main .store-layout{width:100% !important;margin:0 !important;padding:0 !important;display:flex !important;align-items:flex-start !important;gap:40px !important;}
main.store-main .store-sidebar{flex:0 0 260px !important;margin:-8px 0 0 0 !important;}
main.store-main .store-content{flex:1 1 auto !important;min-width:0 !important;padding-right:24px !important;padding-left:0 !important;}

main.store-main .store-toolbar{width:100% !important;display:flex !important;justify-content:space-between !important;align-items:center !important;gap:16px !important;margin:14px 0 18px !important;padding:0 12px 0 0 !important;}
main.store-main .store-toolbar-left{display:flex !important;align-items:center !important;gap:18px !important;min-width:0 !important;padding-left:12px !important;}
main.store-main .store-toolbar-controls{display:flex !important;align-items:center !important;gap:12px !important;flex-wrap:wrap !important;}
main.store-main .store-results{white-space:nowrap !important;font-size:14px !important;color:#6b7280 !important;}

main.store-main .store-pill{position:relative !important;display:inline-flex !important;align-items:center !important;gap:8px !important;height:40px !important;padding:0 14px !important;border:1px solid #d1d5db !important;border-radius:10px !important;background:#fff !important;color:#111827 !important;font-size:14px !important;line-height:1 !important;}
main.store-main .store-pill--select select{position:absolute !important;inset:0 !important;opacity:0 !important;cursor:pointer !important;}
main.store-main .store-pill-chevron{width:10px !important;height:10px !important;display:inline-block !important;border-right:2px solid #6b7280 !important;border-bottom:2px solid #6b7280 !important;transform:rotate(45deg) !important;margin-left:2px !important;}

main.store-main .store-view-toggle{display:inline-flex !important;align-items:center !important;gap:8px !important;white-space:nowrap !important;}
main.store-main .store-view-label{font-size:14px !important;color:#6b7280 !important;}
main.store-main .store-view-btn{border:1px solid #d1d5db !important;background:#fff !important;border-radius:6px !important;padding:4px 10px !important;font-size:14px !important;cursor:pointer !important;}
main.store-main .store-view-btn.is-active{border-color:#111827 !important;box-shadow:inset 0 0 0 1px #111827 !important;}
main.store-main .store-view-sep{color:#6b7280 !important;}

#store-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9998;}
@media (max-width:900px){
  main.store-main .store-layout{gap:0 !important;}
  main.store-main .store-content{padding-right:0 !important;}
  main.store-main .store-sidebar{
    position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;
    width:min(92vw,420px) !important;background:#fff !important;z-index:9999 !important;
    transform:translateX(-105%) !important;transition:transform .25s ease !important;
    margin:0 !important;padding:16px 14px !important;overflow:auto !important;
  }
  body.store-filters-open main.store-main .store-sidebar{transform:translateX(0) !important;}
  body.store-filters-open #store-sidebar-backdrop{display:block !important;}
}



/* ===== KANO CART DRAWER V2 (2026-01) ===== */
/* Sepet (drawer) - Spreadshirt benzeri responsive layout
   Not: cart.js artık table yerine div list kullanıyor. */

.cart-drawer-body { overflow-x: hidden; }}



/* ===== KANO CART DRAWER V2 (2026-01) ===== */
/* Sepet (drawer) - Spreadshirt benzeri responsive layout
   Not: cart.js artık table yerine div list kullanıyor. */

.cart-drawer-body { overflow-x: hidden; }
.cart-items-wrap { width: 100%; }
#cart-items.cart-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 16px;
}

.cart-item-row {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 14px;
}

.cart-item-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cart-item-img {
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.cart-item-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cart-item-meta {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 2px 0 6px 0;
}

.cart-item-sub {
  font-size: 13px;
  color: #666666;
  margin: 0 0 10px 0;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-remove-btn {
  border: none;
  background: transparent;
  color: #d60000;
  text-decoration: underline;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
}

.cart-remove-btn:hover { opacity: .8; }

.cart-item-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

.cart-col-label {
  font-size: 12px;
  color: #666666;
  font-weight: 600;
  margin-bottom: 6px;
}

.cart-col-value {
  font-size: 14px;
  font-weight: 600;
}

.cart-col-sub {
  font-size: 12px;
  color: #888888;
  margin-top: 4px;
}

.cart-qty-control {
  display: flex;
  align-items: center;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  overflow: hidden;
  width: 120px;
  max-width: 100%;
  background: #ffffff;
}

.cart-qty-btn {
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.cart-qty-btn:hover { background: rgba(0,0,0,0.04); }

.cart-qty-value {
  flex: 1;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 520px) {
  .cart-drawer { width: 100%; max-width: 100%; }
  .cart-drawer-body { padding: 14px 16px 0; }
  .cart-drawer-footer { padding: 14px 16px 20px; }
  .cart-item-img { width: 96px; height: 96px; flex-basis: 96px; }
  .cart-item-title { font-size: 17px; }
}

@media (max-width: 360px) {
  .cart-item-grid { grid-template-columns: 1fr 1fr; }
  .cart-col-price { grid-column: 1 / -1; }
}}

@media (max-width: 360px) {
  .cart-item-grid { grid-template-columns: 1fr 1fr; }
  .cart-col-price { grid-column: 1 / -1; }
}

/* === KANO STORE FIX - orta yol hizalama ===
   Sidebar/kategoriler sola yapışmasın ama sayfa da sağa kaymasın.
*/
@media (min-width: 901px){
  main.store-main #store-sidebar,
  main.store-main .store-sidebar{
    /* solda nefes, ama abartmadan (16px - 72px arası) */
    margin-left: clamp(16px, 2.5vw, 72px) !important;
  }

  main.store-main .store-layout{
    width: 100% !important;
    justify-content: flex-start !important;
  }
}}

/* === KANO STORE FIX - orta yol hizalama ===
   Sidebar/kategoriler sola yapışmasın ama sayfa da sağa kaymasın.
*/
@media (min-width: 901px){
  main.store-main #store-sidebar,
  main.store-main .store-sidebar{
    /* solda nefes, ama abartmadan (16px - 72px arası) */
    margin-left: clamp(16px, 2.5vw, 72px) !important;
  }

  main.store-main .store-layout{
    width: 100% !important;
    justify-content: flex-start !important;
  }
}


/* 2) Kadın/Erkek başlık ikonlarını da pseudo'suz yap (double'ı kökten bitir) */
/* =========================================
   RESET: Gender header pseudo-icons OFF
   HTML now provides <img> icons for Kadın/Erkek headers.
   This prevents any remaining CSS icon drawings from stacking.
========================================= */
.store-sidebar-group-toggle > .store-sidebar-group-label::before,
.store-sidebar-group-toggle > .store-sidebar-group-label::after,
.store-sidebar-group-toggle > span:first-child::before,
.store-sidebar-group-toggle > span:first-child::after,
.store-sidebar-group-toggle::before,
.store-sidebar-group-toggle::after,
.store-sidebar-group[data-gender] .store-sidebar-group-toggle::before,
.store-sidebar-group[data-gender] .store-sidebar-group-toggle::after{
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}


/* === KANO PATCH: GENDER HEADER ICONS — SINGLE SOURCE ===
   HTML renders <span class="store-sidebar-gender-icon"> (svg/img inside).
   Kill any leftover CSS-drawn icons/backgrounds so it never doubles.
*/
.store-sidebar-group-toggle > .store-sidebar-gender-icon{
  padding-left: 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.store-sidebar-group-toggle > .store-sidebar-gender-icon::before,
.store-sidebar-group-toggle > .store-sidebar-gender-icon::after{
  content: none !important;
  display: none !important;
}


/* =========================================================
   Spreadshirt Product Card Overrides (20260114_heart_big)
   - Kare görsel alanı
   - Sol hizalı isim/fiyat
   - Büyük favori kalbi (üstte)
   - Kartların Spreadshirt'e yakın büyümesi (container genişletme)
   ========================================================= */
.store-container {
  max-width: 1560px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.store-layout {
  gap: 40px !important;
}

.store-sidebar {
  width: 260px !important;
}

.store-main {
  background: #ffffff !important;
}

#product-list.store-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: start !important;
}

#product-list.store-grid .product-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
  position: relative !important;
}

#product-list.store-grid .product-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

#product-list.store-grid .product-image-wrap.spreadshirt-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f3f3f3 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
}

#product-list.store-grid 

#product-list.store-grid .product-name {
  margin: 12px 0 4px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  text-align: left !important;
}

#product-list.store-grid .product-price {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-align: left !important;
}

#product-list.store-grid .fav-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(0,0,0,0.7) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

#product-list.store-grid .fav-btn svg {
  width: 22px !important;
  height: 22px !important;
}

#product-list.store-grid .fav-btn.is-faved {
  background: rgba(0,0,0,0.92) !important;
  color: #ffffff !important;
}

#product-list.store-grid .fav-btn:hover {
  transform: scale(1.04);
}

/* =======================================================================
   SPREADSHIRT-STYLE PRODUCT CARDS (KANO) — single-pass override
   Date: 2026-01-14
   Target: Products grid in mağaza (section#product-list.store-grid)
   ======================================================================= */

.store-main .store-container{
  max-width: 1380px;
  padding-left: 28px;
  padding-right: 28px;
}

/* 3 columns desktop like Spreadshirt */
section#product-list.store-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 34px !important;
  row-gap: 44px !important;
  justify-content: start !important;
  align-content: start !important;
}

/* breakpoints */
@media (max-width: 1100px){
  section#product-list.store-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 26px !important;
    row-gap: 36px !important;
  }
}
@media (max-width: 640px){
  section#product-list.store-grid{
    grid-template-columns: 1fr !important;
    row-gap: 28px !important;
  }
}

/* Card shell should be invisible (Spreadshirt) */
section#product-list.store-grid article.product-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Whole card clickable */
section#product-list.store-grid article.product-card > a.product-link{
  display: block !important;
  position: relative !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Image tile: slightly tall + light gray panel */
section#product-list.store-grid article.product-card .product-image-wrap{
  aspect-ratio: 4 / 5 !important;
  background: #f2f2f2 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* Image fills the tile (contain) with small breathing room */
section#product-list.store-grid article.product-card .product-image-wrap img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Hover: thin border on tile (Spreadshirt feel) */
@media (hover:hover) and (pointer:fine){
  section#product-list.store-grid article.product-card:hover .product-image-wrap{
    box-shadow: inset 0 0 0 1px #111 !important;
  }
}

/* Typography: approximate Spreadshirt (guess) */
section#product-list.store-grid .product-name,
section#product-list.store-grid .product-price{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

section#product-list.store-grid .product-name{
  margin: 12px 0 0 !important;
  text-align: left !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #111 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

section#product-list.store-grid .product-price{
  margin: 6px 0 0 !important;
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Favorites button styled like Spreadshirt (SVG later is OK) */
section#product-list.store-grid .fav-btn{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

section#product-list.store-grid .fav-btn svg{
  width: 22px !important;
  height: 22px !important;
}

/* In Products grid: hide quick-add UI to match Spreadshirt */
section#product-list.store-grid .product-variants,
section#product-list.store-grid .btn-add-to-cart{
  display: none !important;
}
/* =========================================================
   TASARLA  MOBILE HEADER (index ile ayn layout)
   Top row: Logo + Search
   Second row: Nav links + (right) Fav + Cart
   ========================================================= */
@media (max-width: 430px){

  /* Yatay kayma olmasn */
  html, body{ overflow-x: hidden; }

  /* Ana grid */
  .site-header .nav-search-bar .nav-search-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    grid-template-areas:
      "logo  search search search"
      "nav   nav    fav    cart" !important;
    align-items: center !important;
    gap: 10px 10px !important;
  }

  /* form+fav+cart ayn container iindeydi -> grid item gibi davran */
  .site-header .nav-search-bar .header-actions.header-right{
    display: contents !important;
  }

  /* Grid alanlar */
  .site-header .header-logo{ grid-area: logo !important; }
  .site-header form.header-search-main{ grid-area: search !important; width: 100% !important; margin: 0 !important; }
  .site-header .nav-center{ grid-area: nav !important; min-width: 0 !important; }
  .site-header a.header-fav{ grid-area: fav !important; justify-self: end !important; }
  .site-header button.header-cart{ grid-area: cart !important; justify-self: end !important; }

  /* Logo */
  .site-header .header-logo img{
    height: 26px !important;
    width: auto !important;
    display: block !important;
  }

  /* Search usable */
  .site-header form.header-search-main input{
    height: 40px !important;
    font-size: 14px !important;
    padding: 0 44px 0 14px !important;
  }
  .site-header form.header-search-main button{
    width: 44px !important;
    height: 40px !important;
  }

  /* Nav linkleri: tek satr + swipe */
  .site-header .nav-links{
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    min-width: 0 !important;
  }
  .site-header .nav-links::-webkit-scrollbar{ display:none; }

  /* Mobilde submenu kapat (hover samalamasn) */
  .site-header .nav-submenu{ display: none !important; }

  /* Kalp + Sepet tap alan */
  .site-header .header-icon,
  .site-header .header-cart{
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
  }
  .site-header .header-icon .ui-ico,
  .site-header .header-cart .ui-ico{
    width: 22px !important;
    height: 22px !important;
  }
}

/* =========================================================
   KANO PATCH — Footer Instagram icon: CSS yerine SVG kullan
   Hedef: <span class="fi fi-ig"></span> (footer içinde)
   SVG: /assets/img/icons/instagramicon.svg
   Not: CSS dosyan assets/css altındaysa url doğru: ../img/...
   ========================================================= */

.footer-info-section .footer-col-list a{
  display: flex;
  align-items: center;
}

/* Instagram icon span'ini SVG mask ile çiz (renk = currentColor) */
.footer-info-section .footer-col-list .fi.fi-ig{
  width: 26px;
  height: 26px;
  display: inline-block;
  flex: 0 0 18px;
  margin-right: 10px;

  /* eski font/icon çizimini etkisizleştir */
  font-size: 0 !important;
  line-height: 0 !important;

  /* SVG'yi ikon olarak bas */
  background-color: currentColor; /* ikon rengi link rengiyle aynı olur */
  -webkit-mask: url("../img/icons/instagramicon.svg") center / contain no-repeat;
  mask: url("../img/icons/instagramicon.svg") center / contain no-repeat;
}

/* Bazı ikon sistemleri ::before ile çiziyor, onu kapat */
.footer-info-section .footer-col-list .fi.fi-ig::before,
.footer-info-section .footer-col-list .fi.fi-ig::after{
  content: none !important;
}

/* Mask desteklemeyen eski tarayıcı fallback (SVG kendi rengiyle görünür) */
@supports not ((-webkit-mask: url("x") center/contain no-repeat) or (mask: url("x") center/contain no-repeat)) {
  .footer-info-section .footer-col-list .fi.fi-ig{
    background: url("img/icons/instagramicon.svg") center / contain no-repeat;
    background-color: transparent;
  }
}
/* Footer Instagram ikonunu büyüt */
.footer-info-section .footer-col-list .fi.fi-ig{
  width: 35px !important;
  height: 35px !important;
  flex: 0 0 24px !important;
  margin-right: 12px !important;
}

/* =========================================================
   KANO PATCH — Footer Facebook icon: CSS yerine SVG kullan
   Hedef: <span class="fi fi-ig"></span> (footer içinde)
   SVG: /assets/img/icons/instagramicon.svg
   Not: CSS dosyan assets/css altındaysa url doğru: ../img/...
   ========================================================= */

.footer-info-section .footer-col-list a{
  display: flex;
  align-items: center;
}

/* Instagram icon span'ini SVG mask ile çiz (renk = currentColor) */
.footer-info-section .footer-col-list .fi.fi-fb{
  width: 26px;
  height: 26px;
  display: inline-block;
  flex: 0 0 18px;
  margin-right: 10px;

  /* eski font/icon çizimini etkisizleştir */
  font-size: 0 !important;
  line-height: 0 !important;

  /* SVG'yi ikon olarak bas */
  background-color: currentColor; /* ikon rengi link rengiyle aynı olur */
  -webkit-mask: url("../img/icons/facebookicon.svg") center / contain no-repeat;
  mask: url("../img/icons/facebookicon.svg") center / contain no-repeat;
}

/* Bazı ikon sistemleri ::before ile çiziyor, onu kapat */
.footer-info-section .footer-col-list .fi.fi-fb::before,
.footer-info-section .footer-col-list .fi.fi-fb::after{
  content: none !important;
}

/* Mask desteklemeyen eski tarayıcı fallback (SVG kendi rengiyle görünür) */
@supports not ((-webkit-mask: url("x") center/contain no-repeat) or (mask: url("x") center/contain no-repeat)) {
  .footer-info-section .footer-col-list .fi.fi-fb{
    background: url("img/icons/facebookicon.svg") center / contain no-repeat;
    background-color: transparent;
  }
}
/* Footer Instagram ikonunu büyüt */
.footer-info-section .footer-col-list .fi.fi-fb{
  width: 35px !important;
  height: 35px !important;
  flex: 0 0 24px !important;
  margin-right: 12px !important;
}

/* =========================================================
   KANO FIX — Ürün görseli sağa/sola kayma düzeltme (2026-01)
   Sebep: style.css içinde tekrar eden `.product-img { left/top + width>100% }` hack'leri,
          store.js'deki `inset:0` inline stilini `!important` ile ezip görseli kaydırıyordu.
   Çözüm: Görseli wrapper içine tam oturt, offset/zoom yok, merkezde.
========================================================= */
#product-list.store-grid .product-image-wrap.spreadshirt-image{
  position: relative !important;
  overflow: hidden !important;
}

#product-list.store-grid .product-image-wrap.spreadshirt-image img.product-img{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;

  object-fit: cover !important;          /* kutuyu doldursun */
  object-position: 50% 50% !important;   /* tam merkez */
  display: block !important;
}

/* Hover görseli aynı ölçüde kalsın */
#product-list.store-grid .product-image-wrap.spreadshirt-image img.product-img-hover{
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}
#product-list.store-grid a.product-link:hover .product-image-wrap.spreadshirt-image img.product-img-hover{
  opacity: 1 !important;
}

/* Cart badge'i ikonun üstüne bindir */
.header-cart{
  position: relative;
}

.header-cart .cart-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  pointer-events: none;
}
/* cart badge: biraz daha sağ-üst */
.header-cart { position: relative; }

.header-cart .cart-badge{
  top: -5px !important;
  right: -10px !important;
}
/* ONLY: fav button size lock (do not touch icon styles) */
@media (max-width: 480px){
  html body.page-magaza section#product-list.store-grid button.fav-btn{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

    /* 44x48 genelde padding/line-height yüzünden olur -> bunu sıfırlamak şart */
    padding: 0 !important;
    line-height: 0 !important;
  }
}
/* fav icon size (inside 32x32 button) */
@media (max-width: 480px){
  button.fav-btn svg,
  button.fav-btn img,
  button.fav-btn img.fav-ico{
    width: 48px !important;
    height: 48px !important;
    display: block !important;
  }
}
@media (max-width: 480px){
  html body.page-magaza section#product-list.store-grid button.fav-btn{
    background-size: 26px 26px !important;
  }
  html body.page-magaza section#product-list.store-grid button.fav-btn::before{
    width: 48px !important;
    height: 48px !important;
    background-size: 48px 48px !important;
  }
}