:root{
  --brand: #0B5ED7;
  --accent:#12B886;
  --ink:#0F172A;
  --muted:#64748B;
  --bg0:#F6F8FB;
  --bg1: #f8f9fa;
  --panel: rgba(255,255,255,.85);
  --panelSolid:#FFFFFF;
  --border: rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow2: 0 14px 40px rgba(2,6,23,.12);
  --ring: rgba(11,94,215,.22);
  --radius: 18px;
}

body{
  color: var(--ink);
  background:
    radial-gradient(900px 380px at 10% 10%, rgba(18,184,134,.10), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(11,94,215,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  /* Bazı tarayıcılarda uzun sayfalarda gradient "tiling" (tekrar) yapabiliyor.
     Bunu kapatıp tek parça görünüm sağlıyoruz. */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Analiz kartı: Detayları Gör ikon animasyonu */
.details-toggle .details-icon{
  display:inline-block;
  transition: transform .18s ease;
}
.details-toggle.is-open .details-icon{
  transform: rotate(180deg);
}

:root[data-theme="dark"] body{ color-scheme: dark; }
:root[data-theme="light"] body{ color-scheme: light; }

/* Dark theme */
:root[data-theme="dark"]{
  --ink:#E5E7EB;
  --muted:#9CA3AF;
  --bg0:#070B12;
  --bg1:#0B1220;
  --panel: rgba(17,24,39,.72);
  --panelSolid:#0F172A;
  --border: rgba(148,163,184,.18);
  --shadow: 0 16px 44px rgba(0,0,0,.45);
  --shadow2: 0 22px 60px rgba(0,0,0,.55);
  --ring: rgba(18,184,134,.22);

  --bs-body-bg: var(--bg1);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: rgba(229,231,235,.78);
  --bs-border-color: var(--border);
  --bs-link-color: rgba(18,184,134,.95);
  --bs-link-hover-color: rgba(18,184,134,1);
  --bs-tertiary-bg: rgba(15,23,42,.95);
  --bs-secondary-bg: rgba(15,23,42,.78);
  --bs-primary-bg-subtle: rgba(11,94,215,.18);
  --bs-success-bg-subtle: rgba(18,184,134,.16);
}

a{ color: inherit; }
.text-muted{ color: var(--muted) !important; }

.nav-glass{
  background: var(--panel) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .nav-glass{
  background: rgba(15,23,42,.78) !important;
}

.text-clamp-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.product-card .card-title{
  line-height: 1.25;
  min-height: 3.75em;
}

.brand-bg{ background: var(--brand) !important; }
.accent-bg{ background: var(--accent) !important; }

.card, .offcanvas, .modal-content{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--panelSolid);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .offcanvas,
:root[data-theme="dark"] .modal-content{
  background: var(--panelSolid);
}

.btn{
  border-radius: 14px;
}
.btn:focus, .btn:focus-visible,
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem var(--ring) !important;
  border-color: rgba(11,94,215,.35) !important;
}

/* Product card micro-interactions + typography hierarchy */
.product-card{
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background: var(--panelSolid) !important;
}
.product-card .card-body{ gap: .35rem; }
.product-card .card-title{
  font-weight: 650;
  letter-spacing: -0.2px;
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: .1rem;
}
.product-card .price{
  font-weight: 700;
  letter-spacing: -0.2px;
  font-size: 1.08rem;
  color: var(--ink);
}
.product-card .meta{
  font-size: .92rem;
  color: var(--muted);
}
.product-card .card-img-top{
  border-bottom: 1px solid var(--border);
  object-fit: cover !important;
  transition: transform .35s ease;
  background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.00));
}
.product-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
  border-color: rgba(18,184,134,.28);
}
.product-card:hover .card-img-top{
  transform: scale(1.03);
}
.product-card a:focus-visible{
  outline: none;
}

.featured-card{
  height: 100%;
}

.featured-card .card-body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.featured-card .card-title{
  line-height: 1.25;
  height: 3.75em;
  overflow: hidden;
}

.featured-card .meta{
  line-height: 1.2;
  height: 1.2em;
  overflow: hidden;
}

.featured-card .card-footer,
.featured-card .price,
.featured-card .actions{
  margin-top: auto;
}

.panel-soft{
  background: var(--panel) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.footer-glass{
  background: var(--panel) !important;
  border-top: 1px solid var(--border);
}

#themeToggle{
  border-color: var(--border) !important;
  background: transparent;
}
:root[data-theme="dark"] #themeToggle{
  color: var(--ink);
}

:root[data-theme="dark"] .text-dark{ color: var(--ink) !important; }
:root[data-theme="dark"] .bg-white{ background: var(--panelSolid) !important; }

:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-body,
:root[data-theme="dark"] .bg-body-tertiary,
:root[data-theme="dark"] .bg-body-secondary{
  background-color: var(--bg1) !important;
}
:root[data-theme="dark"] .bg-secondary,
:root[data-theme="dark"] .bg-secondary-subtle{
  background-color: rgba(15,23,42,.85) !important;
}
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end{
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-body-emphasis,
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .offcanvas,
:root[data-theme="dark"] .modal{
  color: var(--ink) !important;
}
:root[data-theme="dark"] .dropdown-menu{
  background-color: var(--panelSolid) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .dropdown-item{ color: var(--ink) !important; }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus{
  background-color: rgba(18,184,134,.12) !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text{
  background-color: rgba(15,23,42,.92) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .form-control::placeholder{ color: rgba(156,163,175,.85) !important; }
:root[data-theme="dark"] .form-check-input{
  background-color: rgba(15,23,42,.92) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-outline-secondary{
  background-color: rgba(15,23,42,.92) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .btn-light:hover,
:root[data-theme="dark"] .btn-outline-secondary:hover{
  background-color: rgba(18,184,134,.12) !important;
  border-color: rgba(18,184,134,.35) !important;
}

:root[data-theme="dark"] .table{ --bs-table-bg: transparent; --bs-table-color: var(--ink); }
:root[data-theme="dark"] .list-group-item{
  background-color: rgba(15,23,42,.92) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

.gallery-col{ position: sticky; top: 92px; align-self: flex-start; }
@media (max-width: 991.98px){
  .gallery-col{ position: static; }
}

.sticky-thumbs{
  position: sticky;
  top: 92px;
  z-index: 4;
  padding: .35rem 0;
  background: linear-gradient(180deg, rgba(246,248,251,.92), rgba(246,248,251,.65));
  backdrop-filter: blur(10px);
  border-top: 1px solid transparent;
}
:root[data-theme="dark"] .sticky-thumbs{
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.65));
}

:root[data-theme="dark"] body.bg-light,
:root[data-theme="dark"] body{
  background-color: var(--bg1) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] .bg-white{ background-color: var(--panelSolid) !important; }
:root[data-theme="dark"] .text-dark{ color: var(--ink) !important; }

:root[data-theme="dark"] .navbar{
  --bs-navbar-color: rgba(255,255,255,.86);
  --bs-navbar-hover-color: rgba(255,255,255,.98);
  --bs-navbar-active-color: rgba(255,255,255,.98);
  --bs-navbar-brand-color: rgba(255,255,255,.95);
  --bs-navbar-brand-hover-color: rgba(255,255,255,1);
  --bs-navbar-toggler-border-color: rgba(255,255,255,.25);
}
:root[data-theme="dark"] .navbar .nav-link,
:root[data-theme="dark"] .navbar .navbar-brand{
  color: rgba(255,255,255,.92) !important;
}
:root[data-theme="dark"] .navbar .nav-link:hover,
:root[data-theme="dark"] .navbar .nav-link:focus{
  color: rgba(255,255,255,1) !important;
}
:root[data-theme="dark"] .navbar-toggler-icon{
  filter: invert(1) grayscale(1) brightness(1.6);
}

:root[data-theme="dark"] .nav-glass{
  background: color-mix(in srgb, var(--panelSolid) 88%, transparent) !important;
  border-bottom-color: var(--border) !important;
}