/* Toast notifications */
.toast-container{position:fixed;top:80px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{padding:14px 20px;border-radius:10px;color:#fff;font-size:.9rem;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,0.15);animation:toastIn .3s ease;max-width:350px;}
.toast.success{background:linear-gradient(135deg,#10b981,#059669);}
.toast.error{background:linear-gradient(135deg,#ef4444,#dc2626);}
.toast.info{background:linear-gradient(135deg,#6366f1,#4f46e5);}
.toast.warning{background:linear-gradient(135deg,#f59e0b,#d97706);}
@keyframes toastIn{from{opacity:0;transform:translateX(100px);}to{opacity:1;transform:translateX(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(100px);}}

/* Typography system */
:root {
  --header-height: 66px;      /* Header sabit yüksekliği */
  --font-size-xs: 0.65rem;    /* 10.4px */
  --font-size-sm: 0.8rem;     /* 12.8px */
  --font-size-md: 0.9rem;     /* 14.4px */
  --font-size-lg: 1rem;       /* 16px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.45rem;   /* 23.2px */
}

html.page-alisveris { 
  font-size: 18px; 
}

@media (max-width: 900px) { 
  html.page-alisveris { 
    font-size: 18.5px; 
  } 
}

@media (max-width: 640px) { 
  html.page-alisveris { 
    font-size: 19px; 
  } 
}

/* Küçük yazı boyutları */
.page-alisveris .sidebar-promo a,
.page-alisveris [style*="font-size:.55rem"] {
  font-size: var(--font-size-xs) !important;
}

.page-alisveris .sidebar-promo p,
.page-alisveris [style*="font-size:.58rem"],
.page-alisveris [style*="font-size:.6rem"] {
  font-size: 0.72rem !important;
}

/* Orta yazı boyutları */
.page-alisveris .variant-actions button,
.page-alisveris .variant-thumb::after,
.page-alisveris .variant-meta > span,
.page-alisveris [style*="font-size:.65rem"],
.page-alisveris [style*="font-size:.68rem"] {
  font-size: 0.78rem !important;
}

.page-alisveris .feature-bullets,
.page-alisveris [style*="font-size:.7rem"] {
  font-size: 0.82rem !important;
}

.page-alisveris .preview-details p,
.page-alisveris [style*="font-size:.75rem"] {
  font-size: 0.85rem !important;
}

.page-alisveris .category-list,
.page-alisveris .cart-indicator,
.page-alisveris [style*="font-size:.8rem"] {
  font-size: var(--font-size-md) !important;
}

.page-alisveris .variant-meta h3,
.page-alisveris .sidebar-promo h3,
.page-alisveris [style*="font-size:.85rem"] {
  font-size: 0.95rem !important;
}

/* Başlık boyutları */
.page-alisveris .shop-header h1 {
  font-size: var(--font-size-xl);
}

/* Bu sayfa zaten mağaza: header'daki mağaza ikonunu gizle */
html.page-alisveris #header-cta [data-role="icon-shop"]{
  display:none !important;
}

/* Sayfa üstündeki gereksiz boşluğu düzelt: global section padding'i bu bölümde kapat */
html.page-alisveris section.shop-main { padding:0 0 1rem; }
/* Liste okunabilirliği */
html.page-alisveris .feature-bullets li { line-height:1.5; }

/* Shop Layout */
:root { --shop-sidebar-width: 250px; }

body.shop{
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.shop-layout{display:flex;align-items:flex-start;gap:2rem;padding:1rem 0;}
.shop-sidebar{width:var(--shop-sidebar-width);flex:0 0 var(--shop-sidebar-width);position:sticky;top:calc(var(--header-height, 66px) + 14px);align-self:flex-start;display:flex;flex-direction:column;gap:1rem;background:var(--color-surface);border:1px solid var(--color-border);padding:1.25rem 1rem;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);} 
.shop-sidebar h2{font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-light);text-align:left;} 
/* Category buttons */
.category-list{display:flex;flex-direction:column;gap:.6rem;font-size:.8rem;}
.category-list button{width:100%;text-align:left;padding:.8rem 1rem;border:2px solid transparent;border-radius:12px;background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);color:#475569;font-weight:600;transition:all 0.3s ease;position:relative;overflow:hidden;display:flex;align-items:center;gap:.8rem;font-size:.85rem;}
.category-list button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);transition:left 0.5s;}
.category-list button:hover::before{left:100%;}
.category-list button:hover,.category-list button.active{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;border-color:#667eea;transform:translateY(-2px);box-shadow:0 8px 25px rgba(102, 126, 234, 0.3);}
.category-list button i{font-size:1.1rem;opacity:0.8;}
.category-list button:hover i,.category-list button.active i{opacity:1;transform:scale(1.1);} 
.shop-main{flex:1;min-width:0;}
.shop-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;}
.shop-header h1{font-size:1.4rem;letter-spacing:-.5px;}
.variant-grid{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;}
/* Product card */
.variant-card {
  --card-padding: 0.9rem;
  --card-gap: 0.6rem;
  --card-radius: var(--radius-md, 12px);
  
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  width: 200px;
  flex-shrink: 0;
  overflow: hidden; /* Rozet için taşma gizleme */
}

.variant-card:hover {
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
  border-color: var(--color-border-strong, #d1d5db);
  transform: translateY(-2px);
}

/* Category warning box */
.cat-note {
  display: none;
  margin: -0.5rem 0 1.1rem;
  padding: 0.75rem 0.85rem;
  font-size: 0.58rem;
  line-height: 1.35;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #854d0e;
  border-radius: 8px;
}

.cat-note strong {
  font-weight: 600;
}

/* ============================================ */
/* AÇIKLAMA: Kart önizleme alanı - ürünün görsel temsili */
/* Dijital kartlar için 9:19 oranında dikey iframe */
/* ============================================ */
.variant-thumb {
  --thumb-radius: 16px;
  
  position: relative;
  aspect-ratio: 9/19;
  border-radius: var(--thumb-radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary, #3b82f6), var(--color-accent, #8b5cf6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.variant-thumb.variant-thumb--square {
  aspect-ratio: 1/1;
  border-radius: 12px;
  background: #ffffff;
}

.variant-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* İç çerçeve */
.variant-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px #000;
  z-index: 1;
}

/* Hover durumunda gözüken inceleme yazısı */
.variant-thumb::after {
  content: "İncele";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  font-size: 0.65rem;
  border-radius: inherit;
  z-index: 2;
}
/* Hover/Focus anında kapsama alanına siyah iç çerçeve göster */
.variant-card:hover .variant-thumb::after,
.variant-card:focus-within .variant-thumb::after{ opacity:1; }
.variant-meta h3{font-size:.85rem;margin-bottom:.15rem;}
.variant-meta .title-row{display:flex;flex-direction:column;gap:.25rem;}
.variant-meta .title-row h3{margin:0;}
.variant-meta > span{display:block;font-size:.65rem;color:var(--color-text-light);} 
/* Stock badge */
.stock-badge{display:inline-block;margin-top:.25rem;padding:.2rem .5rem;border-radius:999px;font-size:.62rem;font-weight:700;border:1px solid transparent;}
.stock-badge.in{background:#dcfce7;color:#166534;border-color:#bbf7d0;}
.stock-badge.out{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
/* ============================================ */
/* AÇIKLAMA: Buton stilleri - önizleme, sepete ekle ve hızlı başlangıç butonları */
/* Her butonun kendine özel renk şeması var */
/* ============================================ */
.variant-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  justify-content: center;
}

/* Temel ikon buton stili */
.variant-actions .icon-btn {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 0;
}

/* Quick Start button: allow text label */
.variant-actions .icon-btn[data-action="quickstart"]{
  width: auto;
  padding: 0 0.6rem;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.78rem;
}

/* Add to cart button: same style as quickstart for text label */
.variant-actions .icon-btn[data-action="add"] span {
  font-weight: 700;
  font-size: 0.78rem;
}

.variant-actions .icon-btn[data-action="add"]:has(span) {
  width: auto;
  padding: 0 0.6rem;
  gap: 0.35rem;
}

/* Buton renkleri ve durumları */
.variant-actions .icon-btn[data-action="preview"] {
  --btn-bg: #e0f2fe;
  --btn-color: #0369a1;
  --btn-border: #bae6fd;
  --btn-hover-bg: #0284c7;
  --btn-hover-color: #fff;
}

.variant-actions .icon-btn[data-action="add"] {
  --btn-bg: #fed7aa;
  --btn-color: #9a3412;
  --btn-border: #fdba74;
  --btn-hover-bg: #fb923c;
  --btn-hover-color: #fff;
}

.variant-actions .icon-btn[data-action="quickstart"] {
  --btn-bg: #dcfce7;
  --btn-color: #166534;
  --btn-border: #bbf7d0;
  --btn-hover-bg: #10b981;
  --btn-hover-color: #fff;
}



/* Temel buton stillerini uygula */
.variant-actions .icon-btn {
  background-color: var(--btn-bg);
  color: var(--btn-color);
  border-color: var(--btn-border);
}

/* Hover ve focus durumları */
.variant-actions .icon-btn:hover,
.variant-actions .icon-btn:focus-visible {
  background-color: var(--btn-hover-bg, var(--btn-bg));
  color: var(--btn-hover-color, var(--btn-color));
  border-color: var(--btn-hover-border, var(--btn-hover-bg));
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Aktif durum */
.variant-actions .icon-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ============================================ */
/* AÇIKLAMA: Dijital Davetiye Tanıtım Kutusu (Sidebar) */
/* Sol menüdeki gradient tanıtım kutusu */
/* ============================================ */
.sidebar-promo {
  margin-top: .75rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  color: #fff;
  padding: 1rem .9rem 1.1rem;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.25);
}
.sidebar-promo:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.35), transparent 60%),
              radial-gradient(circle at 15% 80%, rgba(255,255,255,.15), transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sidebar-promo h3 {
  margin: 0;
  font-size: .85rem;
  letter-spacing: -.3px;
}
.sidebar-promo p {
  margin: 0;
  font-size: .6rem;
  line-height: 1.45;
  opacity: .95;
}
.sidebar-promo a {
  align-self: flex-start;
  margin-top: .2rem;
  background: #fff;
  color: var(--color-primary);
  padding: .45rem .75rem;
  font-size: .58rem;
  font-weight: 600;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  box-shadow: 0 3px 10px -4px rgba(0,0,0,.25);
}
.sidebar-promo a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

/* ============================================ */
/* AÇIKLAMA: Yardımcı CSS sınıfları - inline stillerin yerine kullanılan hazır sınıflar */
/* ============================================ */
.nav-start {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.logo-img-wrap{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 4px -1px rgba(0,0,0,.12);}
.logo-img{width:100%;height:100%;object-fit:cover;}
.site-footer{margin-top:4rem;}
.footer-content{padding:2rem 0;font-size:.65rem;color:var(--color-text-light);text-align:center;}
.mock-default span{background:#fff;border-radius:4px;}

/* AÇIKLAMA: Yıldız rating gösterimi - ürün değerlendirme yıldızları */
.stars-inline {
  display: inline-flex;
  gap: 2px;
}
.stars-inline .star {
  vertical-align: middle;
  color: #fbbf24;
  font-size: 1em;
}
.stars-inline .star.empty {
  color: #d1d5db;
}

/* ============================================ */
/* AÇIKLAMA: Responsive düzen - ekran boyutuna göre layout değişiklikleri */
/* ============================================ */
@media (max-width:960px){
}
/* AÇIKLAMA: 860px altı - tablet ve mobil layout */
/* Sidebar alta geçer, kategoriler yatay sıralanır */
@media (max-width:860px){
  .shop-layout{flex-direction:column;}
  .shop-sidebar{width:100%;position:static;flex-direction:row;flex-wrap:wrap;}
  .category-list{flex-direction:row;flex-wrap:wrap;}
  .category-list button{flex:1 1 calc(33.33% - .5rem);} 
}
@media (max-width:520px){
  .variant-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}
@media (prefers-reduced-motion: reduce){
  .variant-thumb::after{transition:none;}
}
/* AÇIKLAMA: Sepet göstergesi - üst menüdeki sepetteki ürün sayısını gösterir */
.cart-indicator{position:relative;display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:500;}
.cart-indicator span{display:inline-block;min-width:20px;text-align:center;padding:.25rem .4rem;border-radius:1rem;background:var(--color-primary);color:#fff;font-size:.65rem;}
/* ============================================ */
/* AÇIKLAMA: Bayi/Kurumsal Satış Linki - bayi başvuru sayfasına yönlendiren buton */
/* Sidebar'da kategorilerin altında görünür */
/* ============================================ */
.dealer-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  margin-top: .75rem;
  text-decoration: none;
}
.dealer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}
.dealer-btn i { font-size: 1.1rem; }
/* ============================================ */
/* AÇIKLAMA: Özel Tasarım Linki - /cepteweb-net/ sayfasına yönlendiren buton */
/* Sidebar'da kategorilerin altında görünür */
/* ============================================ */
.custom-design-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
  margin-top: .75rem;
  text-decoration: none;
}
.custom-design-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}
.custom-design-btn i { font-size: 1.1rem; }

/* ============================================ */
/* Action buttons styling (from body section) */
/* ============================================ */
body.shop .variant-actions{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:nowrap;
}
body.shop .variant-actions .icon-btn{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--color-border,#e5e7eb);
  background: var(--color-surface,#fff);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease, opacity .2s;
}
body.shop .variant-actions .icon-btn:hover{
  background: var(--color-bg-hover,#f6f7f9);
  border-color: var(--color-border-strong,#dfe3e8);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
body.shop .variant-actions .icon-btn:active{
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
body.shop .variant-actions .icon-btn:focus-visible{
  outline: 2px solid var(--color-primary,#2563eb);
  outline-offset: 2px;
}
body.shop .variant-actions .icon-btn[disabled],
body.shop .variant-actions .icon-btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
body.shop .variant-actions .icon-btn img{
  width:20px;
  height:20px;
  display:block;
}

/* Optional success state */
body.shop .variant-actions .icon-btn.added{
  background: rgba(34,197,94,.10);
  border-color: #86efac;
}

/* Shop header styling */
body.shop .shop-header{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:1rem 1.05rem;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.14) 0%, rgba(118, 75, 162, 0.12) 100%);
  border: 1px solid var(--color-border, #e5e7eb);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  margin-bottom: 1rem;
}
body.shop .shop-header h1{
  margin:0;
  line-height:1.15;
  font-size: 1.35rem;
  letter-spacing: -.4px;
}
body.shop .shop-subtitle{
  margin:0;
  color: var(--color-text-light, #64748b);
  font-size: .86rem;
  line-height: 1.4;
}