/* Luma Label — Çözüm detay sayfaları (interior solution pages)
   base.css + simpra.css ÜZERİNE yüklenir. Her sayfa gövdesine
   .sol-page + .sol-accent-{renk} gelir; tüm vurgu rengi --sol-accent'ten türer.
   Yalnız token kullanılır; ham renk sadece accent haritasında tanımlıdır. */

/* ---- accent haritası (mega ikon renkleriyle birebir) ---- */
.sol-accent-blue   { --sol-accent: #2f6bff; --sol-accent-soft: rgba(47,107,255,.15); }
.sol-accent-pink   { --sol-accent: #ff4f8b; --sol-accent-soft: rgba(255,79,139,.15); }
.sol-accent-emer   { --sol-accent: #22b573; --sol-accent-soft: rgba(34,181,115,.15); }
.sol-accent-amber  { --sol-accent: #f0a81e; --sol-accent-soft: rgba(240,168,30,.17); }
.sol-accent-green  { --sol-accent: #10b981; --sol-accent-soft: rgba(16,185,129,.15); }
.sol-accent-purple { --sol-accent: #8b5cf6; --sol-accent-soft: rgba(139,92,246,.16); }
.sol-accent-cyan   { --sol-accent: #12b5c9; --sol-accent-soft: rgba(18,181,201,.15); }
.sol-accent-orange { --sol-accent: #ff7a1a; --sol-accent-soft: rgba(255,122,26,.15); }
.sol-accent-indigo { --sol-accent: #6366f1; --sol-accent-soft: rgba(99,102,241,.16); }
.sol-accent-teal   { --sol-accent: #0ea5a5; --sol-accent-soft: rgba(14,165,165,.16); }

/* ---- AÇIK TEMA: tema token'ları yalnız çözüm sayfalarına (.sol-page) override edilir.
   Böylece header/footer/kart/çizgi/metin dahil tüm bölümler açık temaya döner;
   koyu landing (index.html) etkilenmez. ---- */
.sol-page {
  padding-top: var(--header-h);
  --bg-0: #f7f4ee;   /* sıcak kağıt beyazı — sayfa zemini + header */
  --bg-1: #efeae1;   /* alt bölümler + footer — hafif sıcak gri */
  --bg-2: #e7e1d6;   /* gradyan derinliği */
  --panel: #ffffff;  /* kartlar — zemine karşı belirginleşir */
  --line: rgba(26, 18, 6, 0.12);  /* espresso ince çizgi */
  --ink: #1a1206;    /* espresso koyu metin */
  --ink-dim: #575142;
  --ink-faint: #8a8271;
}
/* açık footer'da okunur marka vurgusu: amber yerine sayfa accent'i */
.sol-page .ft-logo-hl { color: var(--sol-accent); }

/* açık gövdedeki ghost butonlar ("Tüm çözümler", "Paketleri gör") hover'da
   sararmasın — beyaz zeminde okunmaz oluyordu. Metin koyu kalır; hover geri
   bildirimi ince accent kenarlık + hafif kalkışla verilir. Koyu header'daki
   ghost buton (#sol-main dışında) etkilenmez, amber hover'ını korur. */
.sol-page #sol-main .btn-ghost:hover {
  color: var(--ink);
  border-color: var(--sol-accent);
}

/* ---- HEADER anasayfayla birebir kalsın: token'lar header alt ağacında yeniden KOYU.
   Mega-menü'ler header'ın DOM çocuğu olduğundan onlar da koyu kalır; içerik açık. ---- */
.sol-page .site-header {
  --bg-0: #0a0a0c;
  --bg-1: #101014;
  --bg-2: #17171d;
  --panel: #141419;
  --line: rgba(255, 255, 255, 0.10);
  --ink: #f5f5f7;
  --ink-dim: #b6b6c0;
  --ink-faint: #7e7e8a;
}
@media (max-width: 900px){ }

/* ---- breadcrumb ---- */
.sol-crumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding: var(--sp-3) 0 0; font-family: var(--font-display);
  font-size:.8rem; letter-spacing:.01em; color: var(--ink-faint); }
.sol-crumb a { color: var(--ink-dim); transition: color .2s; }
.sol-crumb a:hover { color: var(--amber); }
.sol-crumb [aria-current] { color: var(--ink); }
.sol-crumb .sep { opacity:.5; }
/* Kullanıcı isteği: çözüm sayfalarındaki ekmek-kırıntısı (breadcrumb) gizli.
   Geri almak için bu kuralı silin. */
.sol-crumb { display: none !important; }

/* ---- HERO ---- */
.sol-hero { position: relative; overflow: hidden; padding: var(--sp-4) 0 var(--sp-5); }
.sol-hero::before {
  content:''; position:absolute; top:-30%; right:-8%; width:58%; height:150%;
  background: radial-gradient(48% 48% at 50% 50%, var(--sol-accent-soft), transparent 72%);
  filter: blur(24px); pointer-events:none; z-index:0;
}
.sol-hero-grid { position:relative; z-index:1;
  display:grid; grid-template-columns: 1.08fr .92fr; gap: var(--sp-5); align-items:center; }
.sol-hero .kicker { color: var(--sol-accent); }
.sol-hero .kicker::before { background: var(--sol-accent); }
.sol-h1 { font-family: var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size: clamp(2rem, 5vw, 3.25rem); line-height:1.06; margin:.7rem 0 var(--sp-2); }
.sol-lead { color: var(--ink-dim); font-size: 1.12rem; line-height:1.6; max-width: 35rem; margin: 0 0 var(--sp-3); }
.sol-hero-cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom: var(--sp-4); }
.sol-stats { list-style:none; margin:0; padding:0; display:flex; gap: var(--sp-4); flex-wrap:wrap; }
.sol-stat-n { display:block; font-family: var(--font-display); font-weight:700;
  font-size: 1.55rem; line-height:1; letter-spacing:-.01em; color: var(--ink); }
.sol-stat-n em { font-style:normal; color: var(--sol-accent); }
.sol-stat-l { display:block; font-size:.8rem; color: var(--ink-faint); margin-top:.3rem; }

/* ---- hero görsel: ürün panel mock ---- */
.sol-hero-art { position:relative; display:grid; place-items:center; min-height: 300px; }
.sol-panel { width: min(370px, 100%);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line); border-radius: 22px; padding: var(--sp-3);
  box-shadow: 0 30px 60px -30px rgba(26,18,6,.22); transform: rotate(-1.4deg); }
.sol-panel-top { display:flex; align-items:center; gap:.75rem; margin-bottom: var(--sp-3); }
.sol-badge { flex:none; width: 52px; height:52px; border-radius:14px; display:grid; place-items:center;
  color:#fff; background: var(--sol-accent); box-shadow: 0 14px 30px -12px var(--sol-accent); }
.sol-badge svg { width: 27px; height:27px; }
.sol-panel-meta { display:flex; flex-direction:column; }
.sol-panel-code { font-family: var(--font-display); font-size:.66rem; letter-spacing:.14em; color: var(--ink-faint); }
.sol-panel-title { font-family: var(--font-display); font-weight:600; font-size:1rem; color: var(--ink); }
.sol-panel-rows { display:grid; gap:.55rem; }
.sol-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background: rgba(26,18,6,.04); border:1px solid var(--line); border-radius:12px; padding:.62rem .8rem; }
.sol-row b { font-weight:600; font-size:.88rem; color: var(--ink); }
.sol-row i { font-style:normal; font-family: var(--font-display); font-weight:700; font-size:.85rem; color: var(--sol-accent); }
.sol-row.is-muted i { color: var(--ink-faint); }

/* ---- ortak bölüm başlığı ---- */
.sol-section { padding: var(--sp-5) 0; }
.sol-section.alt { background: var(--bg-1); }
.sol-section .kicker { color: var(--sol-accent); }
.sol-section .kicker::before { background: var(--sol-accent); }
.sol-section .sec-title { max-width: 30rem; }

/* ---- öne çıkanlar (feature grid) ---- */
.sol-feat-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.sol-feat { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3); transition: transform .3s var(--ease-out), border-color .3s; }
.sol-feat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sol-accent) 45%, var(--line)); }
.sol-feat-ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background: var(--sol-accent-soft); color: var(--sol-accent); margin-bottom: var(--sp-2); }
.sol-feat-ic svg { width:23px; height:23px; }

/* renkli emoji-ikon (.is-flat): rozet yok — ikon kendi renklerini taşır.
   simpra.css'teki `#mega-cozumler .mega-ico` deseniyle birebir aynı yaklaşım.
   nasil-calisir kartları çok renkli DOLU SVG'ye geçti; saturasyonlu bir rozet
   zemininin üzerinde bu renkler çakışıp okunurluğu düşürüyordu.

   DİKKAT — modifier ŞART, global kural yazılmamalı: cozumler/ altındaki 9
   sayfa aynı .sol-feat-ic / .sol-more-ic sınıflarını hâlâ ÇİZGİ ikonla
   (stroke=currentColor, beyaz) kullanıyor. Rozet global kaldırılsaydı oradaki
   beyaz çizgi ikonlar beyaz zeminde tamamen görünmez olurdu. */
.sol-feat-ic.is-flat, .sol-more-ic.is-flat {
  background: none; box-shadow: none; border-radius: 0;
}
.sol-feat-ic.is-flat svg { width: 40px; height: 40px; }
.sol-more-ic.is-flat svg { width: 34px; height: 34px; }
.sol-feat h3 { font-family: var(--font-display); font-weight:600; font-size:1.08rem; margin:0 0 .4rem; color: var(--ink); }
.sol-feat p { color: var(--ink-dim); font-size:.96rem; line-height:1.55; margin:0; }

/* ---- tıklanabilir akış kartı (nasil-calisir "on modül") ----
   .sol-feat zaten <article> için tasarlanmıştı; burada aynı kart bir <a>
   oluyor. Link rengini ve alt çizgiyi SIFIRLAMAK şart: kart içindeki h3/p
   kendi renklerini taşıyor, sıfırlanmazsa tarayıcının mavi link rengi
   başlığı eziyordu. */
.sol-feat-link { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.sol-feat-link p { flex:1 1 auto; }
.sol-feat-link:hover .sol-feat-go { transform: translateX(3px); opacity:1; }
.sol-feat-go { margin-top: var(--sp-2); font-size:.88rem; font-weight:600;
  color: var(--sol-accent); opacity:.75; transition: transform .25s var(--ease-out), opacity .25s; }
/* Adım numarası başlığın İÇİNDE: ayrı bir mutlak konumlu rozet, 10. kartta
   iki haneye çıkınca ikonun üstüne biniyordu. */
.sol-feat-n { display:inline-grid; place-items:center; min-width:1.55em; height:1.55em;
  margin-right:.5rem; padding:0 .35em; border-radius:.5em; font-size:.78em; font-weight:700;
  background: var(--sol-accent-soft); color: var(--sol-accent); vertical-align:.08em; }
/* 10 kart 2 sütunda 5 sıra eder; geniş ekranda 3'e çıkarmak son sırayı tek
   kart bırakıyordu (10 = 3+3+3+1). 2 sütunda simetrik duruyor. */
@media (min-width: 1100px) { .sol-feat-grid.is-flow { gap: var(--sp-3); } }

/* ---- nasıl çalışır (steps) ---- */
.sol-steps-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.sol-step { position:relative; padding: var(--sp-3); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); border:1px solid var(--line); }
.sol-step-n { width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background: var(--sol-accent-soft); color: var(--sol-accent);
  font-family: var(--font-display); font-weight:700; font-size:1.1rem; margin-bottom: var(--sp-2); }
.sol-step h3 { font-family: var(--font-display); font-weight:600; font-size:1.05rem; margin:0 0 .4rem; color: var(--ink); }
.sol-step p { color: var(--ink-dim); font-size:.94rem; line-height:1.55; margin:0; }

/* ---- kazanımlar (benefits) ---- */
.sol-benefit-list { list-style:none; margin: var(--sp-4) 0 0; padding:0;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4); }
.sol-benefit-list li { display:flex; gap:.75rem; align-items:flex-start; color: var(--ink-dim); font-size:1rem; line-height:1.5; }
.sol-check { flex:none; width:24px; height:24px; border-radius:50%;
  background: var(--sol-accent-soft); color: var(--sol-accent);
  display:grid; place-items:center; font-size:.78rem; font-weight:700; margin-top:.12rem; }

/* ---- tüm çözümler (cross-link grid) ---- */
/* Izgara artık 10 çözümün TAMAMINI taşıyor (bulunulan sayfa dahil, .is-current
   ile işaretli). 10 kart yalnız 5 ve 2 sütuna tam bölünür: 4 sütun 4+4+2,
   3 sütun 3+3+3+1 bırakırdı. Bu yüzden ara adım yok — 5 sütundan doğrudan
   2'ye iniliyor, her kırılımda satırlar tam dolu. */
.sol-more-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }
@media (max-width: 1000px){ .sol-more-grid { grid-template-columns: repeat(2, 1fr); } }
.sol-more-card { display:flex; flex-direction:column; gap:.55rem; padding: var(--sp-3);
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-sm);
  transition: transform .25s var(--ease-out), border-color .25s; }
.sol-more-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sol-accent) 40%, var(--line)); }
.sol-more-ic { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:#fff; }
.sol-more-ic svg { width:22px; height:22px; }
.sol-more-card b { font-family: var(--font-display); font-weight:600; font-size:.92rem; color: var(--ink); line-height:1.25; }
.sol-more-card span { font-size:.78rem; color: var(--ink-faint); line-height:1.35; }
/* Bulunulan sayfanın kartı. Izgaradan çıkarılmıyor (10'un tamamı görünsün
   diye) ama kendine giden bağlantı olduğu için sessizce ayrışıyor: accent
   kenarlık + hafif accent zemin, hover'da yükselme yok. Ekran okuyucuya
   ayrımı aria-current="page" veriyor, renk tek başına taşımıyor. */
.sol-more-card.is-current { border-color: color-mix(in srgb, var(--sol-accent) 55%, var(--line));
  background: color-mix(in srgb, var(--sol-accent) 7%, var(--panel)); }
.sol-more-card.is-current:hover { transform: none; }

/* ---- kapanış CTA bandı ---- */
.sol-cta { position:relative; overflow:hidden; padding: var(--sp-6) 0; text-align:center; }
.sol-cta::before { content:''; position:absolute; inset:0;
  background: radial-gradient(60% 120% at 50% 0%, var(--sol-accent-soft), transparent 70%); pointer-events:none; }
.sol-cta-inner { position:relative; z-index:1; }
.sol-cta h2 { font-family: var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size: clamp(1.7rem, 4vw, 2.7rem); line-height:1.14; margin:0 auto; max-width: 22rem; }
.sol-cta p { color: var(--ink-dim); max-width: 34rem; margin: var(--sp-2) auto var(--sp-3); }
.sol-cta .sol-hero-cta { justify-content:center; margin:0; }

/* ---- responsive ---- */
@media (max-width: 900px){
  .sol-hero-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .sol-hero-art { order:-1; min-height: 0; }
  .sol-steps-grid { grid-template-columns: 1fr; }
  /* .sol-more-grid kuralı yukarı, kendi bloğunun yanına taşındı (1000px). */
}
@media (max-width: 620px){
  .sol-feat-grid { grid-template-columns: 1fr; }
  .sol-benefit-list { grid-template-columns: 1fr; }
  /* .sol-stats flex+wrap idi. Üç değerin genişliği çok farklı ("1" ~10px,
     "Dakikalar" ~130px) olduğu için satırlara düzensiz bölünüyor, alt
     etiketler birbirini tutmuyordu. Eşit iki sütunlu grid hem sayıyı hem
     etiketi aynı sol kenara oturtur; minmax(0,1fr) uzun kelimenin sütunu
     şişirip taşırmasını engeller (auto olsaydı içerik genişliği kazanırdı). */
  .sol-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
  .sol-stat-n { font-size: 1.35rem; overflow-wrap: anywhere; }
}

/* ✓ (U+2713) ve → (U+2192) birer METİN sembolü — emoji değil. Ancak iOS bu
   kod noktalarını emoji fontuna düşürüp çevre yazıdan farklı ağırlık ve taban
   hizasıyla çiziyor; ekranda "bozuk emoji" gibi duruyor. font-variant-emoji
   metin sunumunu zorlar, böylece glifler gövde yazısıyla aynı ailede kalır. */
.sol-check, .sol-row i, .arr { font-variant-emoji: text; }