/* ═══════════════════════════════════════════════════════════
   Tasarım belirteçleri
   
   Değerler theme.json'dan gelir ve sunucu tarafında :root'a
   yazılır. Buradakiler yalnızca varsayılan — tema ayarı
   yoksa devreye girer.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Yazı */
  --text-base:           15px;
  --text-small:          13px;
  --text-h1:             32px;
  --text-h2:             22px;
  --text-h3:             16px;
  --text-line-height:    1.6;
  --text-letter-spacing: 0;

  /* Buton */
  --btn-font-size: 14px;
  --btn-padding-y: 11px;
  --btn-padding-x: 22px;
  --btn-radius:    8px;
  --btn-weight:    600;
  --btn-transform: none;

  /* Düzen */
  --layout-radius:      8px;
  --layout-gap:         20px;
  --layout-section-pad: 32px;
  --container:          1400px;
}

/* ── Belirteçleri uygulayan sınıflar ────────────────── */
/* Modüller bu sınıfları kullanır; boyut değişince her yerde
   birden değişir. */

body {
  font-size:   var(--text-base);
  line-height: var(--text-line-height);
  letter-spacing: var(--text-letter-spacing);
}

.t-h1 { font-size: var(--text-h1); }
.t-h2 { font-size: var(--text-h2); }
.t-h3 { font-size: var(--text-h3); }
.t-sm { font-size: var(--text-small); }

/* Tema butonu — tüm modüllerde ortak */
.btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size:      var(--btn-font-size);
  font-weight:    var(--btn-weight);
  padding:        var(--btn-padding-y) var(--btn-padding-x);
  border-radius:  var(--btn-radius);
  text-transform: var(--btn-transform);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, background .15s;
}

.btn-theme:hover { opacity: .88; }

.btn-primary-theme {
  background: var(--primary);
  color: #fff;
}

.btn-accent-theme {
  background: var(--accent);
  color: #fff;
}

.btn-outline-theme {
  background: transparent;
  border-color: currentColor;
}

/* Kart ve kutular */
.card-theme {
  border-radius: var(--layout-radius);
  overflow: hidden;
}

/* Bölüm sarmalayıcı */
.section-theme {
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--layout-section-pad);
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .section-theme { padding-inline: 32px; }
}


/* ═══════════════════════════════════════════════════════════
   Storefront — tema temel stilleri
   Renkler storefront.js tarafından :root'a yazılır.
   ═══════════════════════════════════════════════════════════ */


/* ── Modül kapsamı ──────────────────────────────────── */
/* Bir modülün kendi stil ayarı varsa sarmalayıcısına satır içi
   CSS değişkeni yazılır; içerideki her şey onu devralır.
   Ayar verilmeyen değerler tema genelinden gelmeye devam eder. */

.module-scope {
  /* Sarmalayıcı düzeni etkilemesin: kendi kutusu yok gibi
     davranır ama CSS değişkenleri içeriye geçer. */
  display: block;
  margin: 0;
  padding: 0;
}

/* ── Hero yükseklikleri ─────────────────────────────── */
.hero-small  { height: 320px; }
.hero-medium { height: 440px; }
.hero-large  { height: 560px; }

@media (max-width: 768px) {
  .hero-small  { height: 240px; }
  .hero-medium { height: 320px; }
  .hero-large  { height: 380px; }
}

.hero-slide { pointer-events: none; }
.hero-slide.is-active { pointer-events: auto; }

/* ── Kategori görsel biçimleri ──────────────────────── */
.cat-circle { border-radius: 50%; }
.cat-square { border-radius: 10px; }
.cat-card   { border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* ── Duyuru şeridi görünümleri ──────────────────────── */
.cta-accent {
  background: var(--accent);
  color: #fff;
}

.cta-surface {
  background: var(--surface);
  color: var(--text);
}

.cta-dark {
  background: var(--primary);
  color: #fff;
}

/* ── Yatay kaydırma çubuğu ──────────────────────────── */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

.scrollbar-thin::-webkit-scrollbar { height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
  opacity: .4;
}

/* ── Satır kırpma ───────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Sayfalama ──────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s, border-color .15s;
}

.pagination a:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.pagination .is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.pagination .is-gap {
  border: none;
  min-width: 20px;
  color: var(--muted);
}

/* ── Sıralama seçici ────────────────────────────────── */
.sort-select {
  padding: 7px 12px;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  cursor: pointer;
}

.sort-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Modül hata durumu ──────────────────────────────── */
[data-error] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Zengin metin — ürün açıklaması, blog yazısı, içerik sayfası

   Panelde editörle yazılan HTML buraya düşüyor. Tailwind'in
   sıfırlaması <strong>, <ul>, <h2> gibi etiketlerin görünümünü
   kaldırdığı için biçimlendirme düz metin gibi çıkıyordu.
   ═══════════════════════════════════════════════════════════ */

.prose-content > *:first-child { margin-top: 0; }
.prose-content > *:last-child  { margin-bottom: 0; }

.prose-content p {
  margin: 0 0 1em;
  line-height: 1.75;
}

.prose-content strong,
.prose-content b { font-weight: 700; color: var(--text); }

.prose-content em,
.prose-content i { font-style: italic; }

.prose-content u { text-decoration: underline; }
.prose-content s { text-decoration: line-through; opacity: .7; }

.prose-content h2,
.prose-content h3,
.prose-content h4 {
  margin: 1.6em 0 .6em;
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
}

.prose-content h2 { font-size: 1.35em; }
.prose-content h3 { font-size: 1.18em; }
.prose-content h4 { font-size: 1.05em; }

/* Listeler: Tailwind list-style'ı sıfırlıyor, geri veriyoruz */
.prose-content ul,
.prose-content ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin-bottom: .4em; }

.prose-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose-content blockquote {
  margin: 1.2em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--primary);
  color: var(--text);
  font-style: italic;
}

.prose-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--layout-radius, 6px);
  margin: 1em 0;
}

.prose-content hr {
  margin: 1.6em 0;
  border: 0;
  border-top: 1px solid var(--line, rgba(0,0,0,.1));
}

.prose-content table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  font-size: .95em;
}

.prose-content th,
.prose-content td {
  padding: .6em .8em;
  border: 1px solid rgba(0,0,0,.1);
  text-align: left;
}

.prose-content th { font-weight: 600; background: rgba(0,0,0,.03); }

.prose-content code {
  padding: .15em .4em;
  border-radius: 4px;
  background: rgba(0,0,0,.05);
  font-size: .9em;
}