/* ─────────────────────────────────────────────────────────────────────────
   İNCELİK — sitenin genel, küçük görsel dokunuşları (2026-09-26)
   ---------------------------------------------------------------------------
   Kullanıcı: "köklü değişiklik yapma, genel ufak minik güzelleştirmeler".
   Bu dosya SADECE ekleme yapar; hiçbir sayfa yapısını değiştirmez. En sona
   yüklenir (layouts/main.php). Bir dokunuş beğenilmezse ilgili bloğu silmek,
   hepsi beğenilmezse <link> satırını kaldırmak yeterli.
   Header'a bilerek dokunulmadı.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1) Ürün kartı ─────────────────────────────────────────────────────── */

/* Ürün adı tek satırda kesiliyordu ("Dönence Altın…"). İki satıra kadar
   gösterilir; tek satırlık adlar da iki satırlık yer tutar ki yan yana
   kartların fiyat çizgileri aynı hizada kalsın. */
.p-card h3.line-clamp-1 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: calc(2em * 1.375);
}

/* Kategori etiketi olmayan kartta ad bir satır yukarı kayıyordu; etiket
   boş olsa da kendi satırını korur. */
.p-card .eyebrow {
  min-height: 1.45em;
}

/* Fiyat "24.900,50" / "TL" diye ikiye bölünüyordu. Fiyat artık hiç
   bölünmez; yer kalmazsa ayar·gram bilgisi kendi satırına, sağa iner. */
.p-card .mt-auto.border-t {
  flex-wrap: wrap;
  row-gap: 2px;
}
.p-card .mt-auto.border-t > div:first-child > span:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.p-card .mt-auto.border-t > span:last-child {
  margin-left: auto;
}
/* Dar kartta (telefon, 5 sütunlu anasayfa) ayar·gram bazı kartlarda alt
   satıra inip bazılarında inmeyince fiyat çizgileri hizasız kalıyordu.
   Kart gerçekten darsa ayar·gram HER kartta fiyatın altına alınır ve satır
   yüksekliği sabitlenir. Kartın kendi genişliğine göre (container query);
   geniş ekranda hiçbir şey değişmez. */
.p-card > .flex.flex-col.flex-1 {
  container-type: inline-size;
}
@container (max-width: 180px) {
  .p-card .mt-auto.border-t {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 3.35em;
  }
  .p-card .mt-auto.border-t > span:last-child {
    margin-left: 0;
  }
}

/* Kart üzerine gelince çok hafif, sıcak bir gölge ve altın kenar. */
.p-card {
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
@media (hover: hover) {
  .p-card:hover {
    border-color: rgba(176, 137, 48, .28);
    box-shadow: 0 14px 34px -18px rgba(60, 40, 10, .28);
  }
}

/* ── 1b) Anasayfa kategorileri ─────────────────────────────────────────── */

/* Masaüstünde 8 kategori 2 sıra × 4. Telefonda 2 sütunda 8 kategori 4 sıra
   olup sayfayı uzatıyordu; orada ilk 4 (2 × 2) gösterilir. */
@media (max-width: 767px) {
  .cat-grid > .cat-card:nth-child(n+5) { display: none; }
}

/* ── 2) Genel ──────────────────────────────────────────────────────────── */

/* Seçili metin marka altınıyla. */
::selection {
  background: rgba(176, 137, 48, .22);
  color: inherit;
}

/* Klavyeyle gezinirken altın odak halkası (fareyle tıklayınca görünmez). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #8c2745;
  outline-offset: 3px;
}

/* Sayfa içi bağlantılarda (#sss vb.) yumuşak kaydırma. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── 3) Sıkça Sorulan Sorular ──────────────────────────────────────────── */

/* Safari/Chrome'un kendi üçgen işareti artı simgesinin yanında çift
   görünüyordu. */
#sss details > summary { list-style: none; }
#sss details > summary::-webkit-details-marker { display: none; }
#sss details > summary > span:first-child { transition: color .25s ease; }
@media (hover: hover) {
  #sss details > summary:hover > span:first-child { color: #9a7428; }
}
/* Cevap birden belirmek yerine yumuşakça süzülür. */
@media (prefers-reduced-motion: no-preference) {
  #sss details[open] > p { animation: incelikSuzul .35s ease both; }
}
@keyframes incelikSuzul {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── 4) Şans Çarkı yüzen düğmesi ───────────────────────────────────────── */

/* Orta genişlikte (tablet / küçük dizüstü) sol kenardaki ürün kartının
   fiyatının üstüne biniyordu. Bu genişlikte yalnızca dönen ikon kalır;
   geniş ekranda eskisi gibi yazılı. (Stil bloğu gövdede sonradan geldiği
   için seçiciler bir kademe daha özgül.) */
@media (max-width: 1279px) {
  html .cark-fab-wrap .cark-fab-text { display: none; }
  html .cark-fab-wrap .cark-fab { padding: 11px 9px; }
}