/* Özellikler + Ürün Vitrini — base.css token'ları üzerine bölüm katmanı */

/* ---------- ÖZELLİKLER — modül ızgarası (4×3 bento) ----------
   Geometri simprasuite.com.tr'deki "tek çözüm" bölümünden ölçülerek alındı:
   4 sütun × 3 satır, 40px boşluk, ilk sütunun 1-2. satırını görselli uzun kart
   yutar → 11 hücre = 1 uzun + 10 özellik. Ölçü ve oranlar referanstan,
   renkler Luma paletinden.

   MOBİL ÖNCE yazılmıştır: taban kural 2 sütundur, 4 sütunlu referans düzeni
   aşağıdaki (min-width: 1081px) bloğunda kurulur. Böylece dar ekranda
   grid-area'ları `!important` ile geri almak gerekmez. */
.feat {
  position: relative; padding: var(--sp-6) 0; overflow: hidden;
  /* tema token'ları YALNIZ bu bölümde açık; sayfanın geri kalanı koyu kalır */
  --panel: #ffffff;
  --line: rgba(26, 18, 6, 0.10);
  --ink: #1a1206;
  --ink-dim: #5b5545;
  --ink-faint: #8a8271;
  --bg-1: #f7f4ee;
  --bg-2: #efeae1;
  /* ızgaraya özel token'lar */
  --fcard-line: rgba(26, 18, 6, 0.13);
  --fconn: rgba(26, 18, 6, 0.30);
  color: var(--ink);
  /* ZEMİN BURADA VERİLMEZ: closing.css SONRA yükleniyor ve
     `.stats, .feat, .vit, .cards3, .pk, .ab, .mobil, .sss, .join { background:#fff }`
     ile tüm açık bölümleri beyaza sabitliyor (aynı özgüllük, sonra gelen kazanır).
     Buraya `background: #f7f4ee` yazmak sessizce ölü bir bildirim bırakır —
     eskiden öyleydi. Kartlar bu yüzden zemine göre HAFİF TONLU: referansta da
     ilişki böyle (beyaz bölüm + #F8F9FA kart). */
}
.feat-orb { display: none; }
.feat-head { max-width: 60rem; margin: 0 auto var(--sp-5); text-align: center; }
.feat-head .kicker::before { display: none; }
.feat .sec-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.8vw, 3.6rem); line-height: 1.05; color: var(--ink);
}
.feat .sec-title .hl { color: #c8890a; }
.feat .sec-lead { color: var(--ink-dim); margin: var(--sp-2) auto 0; }

/* ---- ızgara ---- */
.feat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-2);
  max-width: 620px; margin-inline: auto;
}
.fcell { position: relative; display: flex; }
.fcell--hero { grid-column: 1 / -1; }

/* ---- kart ---- */
.fcard {
  position: relative; z-index: 1;           /* bağlayıcı çizginin ÜSTÜNDE */
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2);
  background: linear-gradient(158deg, #faf8f3, #f5f2ea);
  border: 1px solid var(--fcard-line); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(26, 18, 6, 0.04);
  color: var(--ink);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s;
}
/* Referansın imzası: yumuşak gölge DEĞİL, sert ofset gölge. Yumuşak bir
   gölgeye çevirmek bölümü sıradan bir kart ızgarasına döndürür. */
.fcard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.fcard:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.fcard-ico { display: block; width: 42px; height: 42px; flex: none; transition: transform 0.28s var(--ease-out); }
.fcard-ico svg { display: block; width: 100%; height: 100%; }
.fcard:hover .fcard-ico { transform: translateY(-1px) scale(1.06); }

.fcard-text { display: block; }
/* Kart başlığı GÖVDE yazı tipiyle (Manrope), bölüm başlığı ise Unbounded ile.
   Unbounded çok geniş bir display yüzü: 265px'lik kartta "QR Menü & Masadan
   Sipariş" üç satıra kırılıyor ve alt metni aşağı itiyordu. Referans da kart
   başlıklarında düz bir grotesk kullanıyor (20/700). */
.fcard-tt {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: 1.06rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink);
  margin-bottom: 0.28rem;
}
.fcard-tx { display: block; font-size: 0.79rem; line-height: 1.45; color: var(--ink-dim); }

/* ---- uzun tanıtım kartı (referanstaki görselli POS kartının karşılığı) ---- */
.fcard--hero { padding: 0; gap: 0; overflow: hidden; }
/* KUTU ORANI = KAYNAK ORANI (13 Ağustos 2026). Eskiden yükseklik yalnızca
   `flex: 1` + `min-height: 190px` ile yerleşimden geliyordu; yani kutunun oranı
   kırılma noktasına göre 1.67:1 ile 3.26:1 arasında dolaşıyor, `object-fit:
   cover` ise 3:2'lik kareyi her seferinde başka yerinden kırpıyordu — mobilde
   monitörün solu ve şefin sağı kesiliyordu. Oranı kaynağa sabitlemek kırpmayı
   tamamen kaldırır; "ortalansın" isteğinin gerçek çözümü budur, object-position
   ayarı değil (o yalnızca kırpmanın nereye düşeceğini seçer).

   `flex: none` ŞART: sütun yönlü flex kabında `flex: 1` flex-basis'i 0 yapıp
   yüksekliği ele geçirir ve `aspect-ratio` hiç uygulanmaz. */
.fcard-shot { display: block; flex: none; aspect-ratio: 3 / 2; overflow: hidden; }
.fcard-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 0.6s var(--ease-out);
}
.fcard--hero:hover .fcard-shot img { transform: scale(1.045); }
.fcard--hero .fcard-text { padding: var(--sp-2); }

/* ---- öne çıkan kart: e-kağıt etiket (farkımız) ---- */
.fcell--star .fcard { border-color: color-mix(in srgb, var(--amber) 62%, var(--fcard-line)); }
.fcell--star .fcard:hover { border-color: var(--amber); box-shadow: 5px 5px 0 0 var(--amber); }

/* ---- 4 sütunlu referans düzeni + kesikli bağlayıcılar ----
   Çizgi TAM BİR SÜTUN boyunda çizilir ve kartın altında kalır; göze yalnız iki
   kart arasındaki boşluğa denk gelen parça çarpar. Referans bunu z-index:-1 ile
   yapıyor — bölümün kendi zemini olduğu için burada negatif katman yerine kartı
   (.fcard) yukarı alıyoruz; görsel sonuç aynı, zemin kaybolmuyor. */
@media (min-width: 1081px) {
  .feat-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(150px, auto));
    gap: var(--sp-4);
    max-width: none; margin-inline: 0;
  }
  /* DOM sırası görsel okuma sırası; yerleşim referans düzeni */
  .fcell:nth-child(1)  { grid-area: 1 / 1 / 3 / 2; }   /* uzun kart */
  .fcell:nth-child(2)  { grid-area: 1 / 2 / 2 / 3; }
  .fcell:nth-child(3)  { grid-area: 1 / 3 / 2 / 4; }
  .fcell:nth-child(4)  { grid-area: 1 / 4 / 2 / 5; }
  .fcell:nth-child(5)  { grid-area: 2 / 2 / 3 / 3; }
  .fcell:nth-child(6)  { grid-area: 2 / 3 / 3 / 4; }
  .fcell:nth-child(7)  { grid-area: 2 / 4 / 3 / 5; }
  .fcell:nth-child(8)  { grid-area: 3 / 1 / 4 / 2; }   /* uzun kartın altı */
  .fcell:nth-child(9)  { grid-area: 3 / 2 / 4 / 3; }
  .fcell:nth-child(10) { grid-area: 3 / 3 / 4 / 4; }
  .fcell:nth-child(11) { grid-area: 3 / 4 / 4 / 5; }

  .fcell::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: 50%; left: -50%; width: 100%; height: 0;
    border-top: 1.5px dashed var(--fconn);
  }
  .fcell--hero::before { content: none; }              /* başlangıç noktası */
  .fcell--down::before {                                /* uzun karttan aşağı inen dikey hat */
    top: 0; left: 25%; width: 50%;
    transform: rotate(90deg);
  }
  /* 4 sütunlu düzende uzun kart İKİ SATIR boyunda; oranı sabit bırakmak kartın
     altında ölü boşluk üretirdi. Burada, ve yalnız burada, görsel kalan alanı
     doldurur — kutu ~1:1'e yaklaştığı için kenarlardan kırpılır, `center` ile
     monitör ve şef ikisi de karede kalır. */
  .fcard-shot { flex: 1; aspect-ratio: auto; min-height: 0; }
}

@media (max-width: 560px) {
  .feat-grid { grid-template-columns: 1fr; }
  /* min-height YOK: 3:2 oranı yüksekliği zaten veriyor. Sabit bir alt sınır
     (eski 210px) dar telefonlarda kutuyu kaynaktan daha uzun yapıp kırpmayı
     geri getiriyordu. */
}

/* ---------- ÜRÜN VİTRİNİ ---------- */
.vit { position: relative; padding: var(--sp-6) 0 calc(var(--sp-6) + 1rem); overflow: hidden; }
.vit-orb { width: 520px; height: 520px; bottom: -220px; left: -160px; background: color-mix(in srgb, var(--copper) 40%, transparent); opacity: 0.45; }
.vit-head { max-width: 52rem; margin-bottom: var(--sp-5); }

.vit-stage { position: relative; max-width: 920px; margin-inline: auto; }
.vit-window {
  position: relative; border-radius: var(--radius); overflow: visible;
  background: linear-gradient(165deg, var(--panel), var(--bg-1));
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), 0 24px 80px -30px var(--glow);
}
.vit-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--line);
}
.vit-dots { display: inline-flex; gap: 6px; }
.vit-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); opacity: 0.5; }
.vit-dots i:first-child { background: var(--err); opacity: 0.8; }
.vit-dots i:nth-child(2) { background: var(--amber); opacity: 0.8; }
.vit-dots i:last-child { background: var(--ok); opacity: 0.8; }
.vit-url {
  font-size: 0.72rem; color: var(--ink-dim); background: var(--bg-0);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.9rem;
}
.vit-bar-sp { flex: 1; }

.vit-body { display: grid; grid-template-columns: 64px 1fr; min-height: 380px; }
.vit-side {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 1.1rem 0; border-right: 1px solid var(--line);
}
.vit-logo { width: 26px; height: 26px; border-radius: 8px; background: var(--amber); box-shadow: 0 0 16px -2px var(--glow); margin-bottom: 6px; }
.vit-side i { width: 26px; height: 8px; border-radius: 4px; background: var(--bg-2); }
.vit-side i.on { background: color-mix(in srgb, var(--amber) 70%, transparent); }

.vit-main { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.vit-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.vit-metric {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-1);
  padding: 0.8rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.vit-metric i { width: 46%; height: 7px; border-radius: 4px; background: var(--bg-2); }
.vit-metric b { width: 68%; height: 14px; border-radius: 5px; background: linear-gradient(90deg, var(--amber), var(--copper)); opacity: 0.85; }
.vit-metric:nth-child(2) b, .vit-metric:nth-child(4) b { background: var(--ink-faint); opacity: 0.55; }

.vit-panels { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.9rem; flex: 1; }
.vit-rows { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-1); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.75rem; }
.vit-row { display: flex; align-items: center; gap: 0.7rem; }
.vit-row s { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-2); text-decoration: none; flex: none; }
.vit-row i { height: 9px; border-radius: 4px; background: var(--bg-2); flex: 1; }
.vit-row:nth-child(1) i { flex: 0.9; } .vit-row:nth-child(2) i { flex: 0.7; }
.vit-row:nth-child(3) i { flex: 1; }   .vit-row:nth-child(4) i { flex: 0.55; }
.vit-row em { width: 48px; height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 30%, transparent); flex: none; }
.vit-row:nth-child(2) em { background: color-mix(in srgb, var(--amber) 32%, transparent); }
.vit-row:nth-child(4) em { background: color-mix(in srgb, var(--err) 28%, transparent); }

.vit-chart {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-1);
  padding: 0.9rem; display: flex; align-items: flex-end; gap: 8px;
}
.vit-chart i {
  flex: 1; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--amber), color-mix(in srgb, var(--copper) 70%, transparent));
  opacity: 0.85; animation: vit-bar-in 1s var(--ease-out) both;
}
.vit-chart i:nth-child(1) { height: 34%; } .vit-chart i:nth-child(2) { height: 52%; }
.vit-chart i:nth-child(3) { height: 44%; } .vit-chart i:nth-child(4) { height: 66%; }
.vit-chart i:nth-child(5) { height: 58%; } .vit-chart i:nth-child(6) { height: 82%; }
.vit-chart i:nth-child(7) { height: 92%; }
@keyframes vit-bar-in { from { transform: scaleY(0); transform-origin: bottom; } }

/* yüzen kartlar */
.vit-float {
  position: absolute; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.85);
  animation: vit-float 7s ease-in-out infinite;
}
.vit-float-order {
  top: -24px; right: -34px; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem; font-size: 0.8rem;
}
.vit-float-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); flex: none; }
.vit-float-txt { display: flex; flex-direction: column; line-height: 1.3; color: var(--ink-dim); }
.vit-float-txt strong { color: var(--ink); font-size: 0.84rem; }
.vit-float-tag {
  bottom: -30px; left: -40px; padding: 0.8rem 1rem; width: 180px;
  display: flex; flex-direction: column; gap: 0.15rem;
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  animation-delay: 1.6s;
}
.vit-tag-name { font-size: 0.78rem; color: var(--ink-dim); }
.vit-tag-price { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.vit-tag-meta { font-size: 0.66rem; color: var(--amber); letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes vit-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- mobil ----------
   .feat-grid'in sütun sayısı artık YUKARIDA yönetiliyor (mobil önce: 2 sütun,
   ≥1081px'te 4 sütun, ≤560px'te 1 sütun). Buraya sütun kuralı eklenmemeli;
   eskiden buradaki 860px kuralı taban düzeni sessizce eziyordu. */
@media (max-width: 860px) {
  .feat, .vit { padding: var(--sp-5) 0; }
  .vit-metrics { grid-template-columns: repeat(2, 1fr); }
  .vit-panels { grid-template-columns: 1fr; }
  .vit-float-order, .vit-float-tag { display: none; }
  .vit-body { grid-template-columns: 48px 1fr; min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .vit-float, .vit-chart i { animation: none; }
  .fcard, .fcard-ico, .fcard-shot img { transition: none; }
  .fcard:hover { transform: none; }
  .fcard:hover .fcard-ico { transform: none; }
  .fcard--hero:hover .fcard-shot img { transform: none; }
}