/* ============================================================
   Lider Kozmetik — katalog secim sayfasi
   Tek dosya, harici bagimlilik YOK (yazi tipi de dahil): statik
   hosting'de ve zayif baglantida ilk acilista bir sey beklemesin.
   Mobil once yazildi; genis ekranda iki sutuna gecer.
   ============================================================ */

:root {
  --metin: #1c1c1e;
  --metin-ikincil: #5b5b60;
  --zemin: #f6f6f4;
  --kart: #ffffff;
  --cizgi: #e4e4e0;
  --koyu: #17181a;
  --vurgu: #b8912f;          /* kataloglardaki altin tonuyla uyumlu */
  --vurgu-koyu: #96741f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sinir { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* ── Ust ── */
.ust { background: var(--koyu); color: #fff; padding: 22px 0; }
.marka { display: flex; flex-direction: column; gap: 2px; }
.marka-ad { font-size: 1.15rem; font-weight: 700; letter-spacing: .14em; }
.marka-alt { font-size: .82rem; color: #b9bcc0; letter-spacing: .04em; }

/* ── Icerik ── */
.icerik { padding: 28px 20px 40px; }

/* TELEFONDA DA YAN YANA (02.10.2026, kullanici karari). Dar ekranda iki
   sutun demek, her kartin ~165 px kalmasi demek: olculer buna gore kucultuldu,
   yoksa baslik ve dugme tasardi. */
.kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Kapak: PDF'in ilk sayfasindan uretildi (araclar/kapak-uret.py).
   En-boy orani sabit verildi ki gorsel yuklenirken sayfa ziplamasin. */
.kart-gorsel { display: block; background: #eceae5; line-height: 0; }
.kart-gorsel img { width: 100%; height: auto; display: block; }

.kart-govde { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.kart-govde h2 { margin: 0; font-size: .98rem; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
.yil { color: var(--vurgu); }
.kart-not { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--metin-ikincil); }
.kart-bilgi { margin: 0 0 10px; font-size: .72rem; color: #85858b; }

.dugme {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Telefonda parmakla rahat basilsin: 48 px dokunma hedefi. */
  min-height: 46px; padding: 10px 12px;
  background: var(--koyu); color: #fff;
  border-radius: 10px; text-decoration: none;
  font-size: .84rem; font-weight: 600;
  transition: background .18s ease, transform .18s ease;
}
.dugme:hover { background: var(--vurgu-koyu); }
.dugme:active { transform: translateY(1px); }
.dugme:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; }


/* ── Alt ── */
.alt { border-top: 1px solid var(--cizgi); padding: 20px 0; margin-top: 10px; }
.alt a { color: var(--metin-ikincil); text-decoration: none; font-size: .87rem; }
.alt a:hover { color: var(--metin); text-decoration: underline; }

/* ── Genis ekran ── */
@media (min-width: 720px) {
  .kartlar { gap: 24px; }
  .kart-govde { padding: 18px 18px 20px; gap: 6px; }
  .kart-govde h2 { font-size: 1.18rem; }
  .kart-not { font-size: .86rem; }
  .kart-bilgi { font-size: .8rem; }
  .dugme { min-height: 48px; padding: 12px 20px; font-size: .95rem; }
  .ust { padding: 26px 0; }
  .marka-ad { font-size: 1.3rem; }
  .icerik { padding: 34px 20px 48px; }
}

/* Hareketi azalt tercihine saygi. */
@media (prefers-reduced-motion: reduce) {
  .dugme { transition: none; }
}