/* ============================================================
   08-arama.css — Arama: header pill input + anlık (live) sonuç paneli
   Flatsome'in GERÇEK canlı-arama (live search) sınıflarını hedefler:
     input.search-field / .ux-search-box / form.searchform
     .live-search-results / a.suggestion / .search-name / .search-price
   + tam-genişlik Sephora paneli için .bks-search-* yardımcıları.

   GERÇEK ÖLÇÜLER — YENİDEN DOĞRULANDI (sephora.com.tr, Chrome computed-style,
   GERÇEK AÇIK panel: "ruj" sorgusu klavyeyle yazılıp açıldı; vw1920):

   ⟳ RE-DOĞRULAMA 2026-06-01 19:15 ("en-eski bölüm" rotasyonu; CANLI "ruj" paneli
     GERÇEK klavyeyle açıldı; Chrome computed-style + URL-sanitize; vw1920):
     • TÜM ÖLÇÜLER BİREBİR DOĞRULANDI — DEĞİŞİKLİK YOK. Panel 1920 #fff radius0 gölge-yok
       bd0; iç 1440 ORTALI (x240) pad32/40; kolon-arası 40 (sol bölüm sonu x1216 → sağ
       sütun x1256). 3 başlık ("Ürünler" x280 · "Öneriler" x1256/y148 · "Kategoriler"
       x1256/y260) HEPSİ 18/700 ls.45 lh24 #000 — off-screen 16/500 düğümü YİNE göz ardı
       edildi. Satır flex align gap16 pad8/0 bd0 h84; görsel 64×64 fill r0; marka 16/700
       ls.4; ad 14/500 lh20 ls.35; fiyat 16/700 ls.4 (üst-sağ, marka satırıyla y204).
       Öneri/kategori link 14/500 ls.35 altçizgili. CTA 202×48 #000/#f2f2f2 16/400 ls.4
       r8 2px#000 pad10/18. Kapat × 32×32 #000 @x1608,y148. Pill FORM #f2f2f2 rad-pill
       (159984px) bd0 gölge-yok pad8/12 flex gap12; ikon svg 32×32; input 16/400 ls.4 #000.
     • İYİLEŞTİRME (ölçü değil): bölüm interaktif öğelerine :focus-visible Bisso-kırmızı
       odak halkası eklendi (bkz. §8; outline:2px offset:2px; input :focus outline:none'u
       kaynak-sırasıyla geçersiz kılar → klavyede halka, fareyle temiz).

   ⟳ RE-DOĞRULAMA 2026-06-01 13:48 ("en-eski bölüm" rotasyonu; canlı panel
     DOM computed-style, sanitize-URL ile ölçüldü):
     • EN ÖNEMLİ DÜZELTME → sağ sütun "KATEGORİLER" başlığı **18/700 ls.45 lh24**
       (bölüm başlığıyla AYNI) — eski "16/500 alt-başlık" YANLIŞTI (off-screen yanlış
       düğüm ölçülmüştü). Sephora sağ sütunda İKİ EŞİT 18/700 başlık yığar:
       "Öneriler" (y148) + "Kategoriler" (y260); ikisinin de altındaki link 14/500
       altçizgili. → `.bks-search-subtitle` artık tam başlık stiline çekildi.
     • DÜZELTME → ürün satırında FİYAT marka SATIRINA hizalı (üst-sağ, y204 = marka
       y204; ad y232 alt satır) — eski "dikey ortalı" yerine `align-items:flex-start`
       + görsel `align-self:center` + fiyat üst-sağ.
     • DÜZELTME → kapat × marka/başlık satırıyla AYNI HİZADA (ölçülen x1608 y148 =
       içerik üst-sağ köşe, 40px sağ-boşluğa saygılı) → top:32/right:40 (eski 24/0).
     • DOĞRULANAN (DEĞİŞMEDİ): panel w1920 #fff KARE köşe GÖLGE-YOK border-top-YOK
       (bs:none/bd0/rad0); scrim rgba(0,0,0,.5) (Bisso 10,10,10); iç kapsayıcı 1440
       ORTALI (x240) pad 32/40 kolon-arası 40; pill FORM rad~∞ #f2f2f2 bd0 bs:none
       pad8/12, input 16/400 lh24 ls.4 #000 bg#f2f2f2 h49; bölüm başlığı 18/700 ls.45
       lh24; ürün satırı flex gap16 pad8/0 KENARLIK-YOK h84; görsel 64×64 rad0 fill;
       marka 16/700 #000 ls.4; ad 14/500 #000 lh20 ls.35; fiyat 16/700 #000 ls.4;
       öneri/kategori link 14/500 #000 ALTÇİZGİLİ; CTA "Tüm ürünleri İncele" 202×48
       bg#000 yazı#f2f2f2 16/400 ls.4 r8 2px#000 pad10/18; kapat × 32×32 #000.

   NOT: "Mağaza bul" flyout'u (1440 ortalı, 2px #1a1a1a border-top, hafif gölge)
   AYRI bir bileşendir; ARAMA paneli ondan farklıdır (yukarıdaki ölçüler aramanındır).

   • Arama kutusu (FORM = pill): yükseklik 48px; köşe TAM pill
     (rounded-infinity = border-radius ~159984px); KENARLIK YOK; GÖLGE YOK;
     zemin #f2f2f2 (rgb 242); iç boşluk 8px 12px; flex-row gap 12px;
     büyüteç ikonu (svg) 32×32 SİYAH; görünür alan genişliği ~548px h49.
     input: 16px/400, satır 24px, harf-aralığı .4px, renk #000, zemin şeffaf;
     placeholder "Ürün,marka,kategori ara...".
   • Panel: header'ın hemen ALTINA (y=116) yapışık; DIŞ katman
     TAM-VIEWPORT (1920) ŞEFFAF overlay (sayfa scrim'i). İçindeki BEYAZ kutu
     TAM GENİŞLİK (#fff), **KARE köşe (radius 0)**, **GÖLGE YOK**, **border-top YOK**.
     Beyaz kutu içeriği ORTALAR → iç kapsayıcı **max 1440px**, ORTALI,
     **iç boşluk 32px 40px** (DÜZELTİLDİ: eski 28/24), flex, **kolon arası 40px**.
   • Düzen: solda ÜRÜNLER bölgesi (geniş ~1288), sağda ÖNERİLER/KATEGORİLER;
     sağ-üstte kapat (×). (Ürünler SOLDA doğrulandı.)
   • Bölüm başlığı ("Ürünler"/"Öneriler"/"Kategoriler"): 18px/700, ls .45px, lh24,
     BÜYÜK-HARF YOK, #000. (Sağ sütundaki "Kategoriler" de TAM başlıktır — alt-başlık DEĞİL.)
   • Ürün satırı (a): flex, ortalı, gap 16px, iç boşluk 8px 0, **KENARLIK YOK**, h~84;
     görsel **64×64 (radius 0, object-fit fill)**. Marka **16px/700 SİYAH** (içerik
     büyük-harf, ls .4px). Ad 14px/500 #000 lh20 ls.35. Fiyat 16px/700 #000
     (indirimli KIRMIZI — çıkarım; bu sorguda indirimli ürün yoktu).
   • Öneri/kategori link metni: **14px/500 #000, ALT ÇİZGİLİ**, hover kırmızı.
     (Sarmalayan <a> 16/400 görünür ama RENDER EDİLEN metin span'i 14/500 altçizgili.)
   • "Tüm ürünleri İncele" CTA (BUTTON): genişlik 202, **yükseklik 48**, SİYAH zemin
     (#000), yazı **#f2f2f2**, **16px/400**, ls .4px, radius **8px**, iç boşluk
     **10px 18px**, **2px kenarlık #000**, cümle düzeni; ürünlerin altında SOLA hizalı;
     hover → Bisso kırmızı.
   • Kapat (×): **32×32 SİYAH**, şeffaf zemin, sağ-üst (panel üstünden ~32px); hover kırmızı.
   ============================================================ */

/* ---- 0) Yerel ölçü değişkenleri (bu bölüme özel) ---- */
:root{
  --bks-search-field-bg:#f2f2f2;   /* ölçülen nötr gri (rgb 242) */
  --bks-search-h:48px;
  --bks-search-icon:32px;
  --bks-search-maxw:1440px;        /* iç kapsayıcı ölçülen max genişlik */
  --bks-search-pad:32px 40px;      /* iç kapsayıcı ölçülen iç boşluk (DÜZELTİLDİ) */
}

/* ============================================================
   1) HEADER PILL ARAMA KUTUSU
   (Header Builder'a "Arama Formu" eklenince render olur)
   FORM = pill (8px 12px iç boşluk); input kenarlıksız/şeffaf.
   ============================================================ */
.header input.search-field,
.header .searchform input[type="search"],
.ux-search-box input[type="search"],
.ux-search-box .ux-search-box__input,
form.searchform input[type="search"]{
  height:var(--bks-search-h) !important;
  border-radius:var(--bks-r-pill) !important;
  background:var(--bks-search-field-bg) !important;
  border:0 !important;                 /* Sephora: KENARLIK YOK */
  box-shadow:none !important;          /* Sephora: GÖLGE YOK */
  padding:8px 16px 8px 44px !important; /* sol: ikon payı */
  font-size:16px !important;
  font-weight:400 !important;
  line-height:24px !important;
  letter-spacing:.4px !important;
  color:var(--bks-black) !important;
  -webkit-appearance:none;appearance:none;
  transition:background var(--bks-t-fast),border-color var(--bks-t-fast),box-shadow var(--bks-t-fast);
}
.header input.search-field::placeholder,
.ux-search-box input[type="search"]::placeholder,
form.searchform input[type="search"]::placeholder{
  color:var(--bks-grey) !important;opacity:1;letter-spacing:.4px;
}
/* Odak: beyaz zemin + ince siyah kenarlık (Sephora aktif hali) */
.header input.search-field:focus,
.ux-search-box input[type="search"]:focus,
.ux-search-box .ux-search-box__input:focus,
form.searchform input[type="search"]:focus{
  background:#fff !important;
  border:1px solid var(--bks-black) !important;
  box-shadow:none !important;outline:none !important;
}

/* Arama formu kabı: pill, taşmayı kes (ikon/sonuç hizası) */
.header .searchform,
.ux-search-box,
form.searchform{
  position:relative;border-radius:var(--bks-r-pill);
}

/* Büyüteç ikonu / gönder düğmesi — solda, 32×32, sade */
.ux-search-box .ux-search-submit,
.searchform .ux-search-submit,
form.searchform button[type="submit"],
.searchform .icon-search{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  color:var(--bks-black) !important;
  width:var(--bks-search-icon) !important;height:var(--bks-search-icon) !important;
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:2;
}
.ux-search-box .ux-search-submit i,
.searchform .icon-search:before,
form.searchform button[type="submit"] i{ font-size:18px !important;color:var(--bks-black) !important; }

/* "Sil"/temizle bağlantısı (varsa) — sağda küçük metin link */
.ux-search-box .ux-search-clear,
.searchform .search-clear{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:14px !important;font-weight:500 !important;color:var(--bks-black) !important;
  text-decoration:underline;cursor:pointer;
}

/* ============================================================
   2) ANLIK SONUÇ PANELİ (live-search dropdown)
   Sephora: header altına (y=116) yapışık; TAM-VIEWPORT ŞEFFAF overlay (scrim)
   + içinde TAM GENİŞLİK beyaz kutu (KARE köşe, GÖLGE YOK, border-top YOK).
   • .bks-search-scrim → Sephora tam-viewport karartma katmanı (opsiyonel)
   • .bks-search-panel  → tam-genişlik beyaz panel (Sephora 1:1, önerilen markup)
   • .live-search-results → Flatsome'in kendi açılır kutusu (kompakt; gölge korunur)
   ============================================================ */

/* 2a) Tam-viewport scrim (Sephora overlay) — sayfayı karartır, panel altında kalır */
.bks-search-scrim{
  position:fixed;left:0;right:0;top:0;bottom:0;
  background:rgba(10,10,10,.5);
  z-index:var(--bks-z-overlay,8990);
  opacity:0;visibility:hidden;transition:opacity var(--bks-t),visibility var(--bks-t);
}
.bks-search-scrim.is-open{ opacity:1;visibility:visible; }

/* 2b) Tam-genişlik Sephora paneli (yardımcı markup) */
.bks-search-panel{
  position:absolute;top:100%;left:0;right:0;
  width:100%;
  background:#fff;
  border:0;                                  /* Sephora: KENARLIK YOK */
  border-radius:0;                           /* Sephora: KARE köşe */
  box-shadow:none;                           /* Sephora: GÖLGE YOK (ayrım scrim ile) */
  z-index:var(--bks-z-overlay,9000);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--bks-t),transform var(--bks-t),visibility var(--bks-t);
}
.bks-search-panel.is-open{ opacity:1;visibility:visible;transform:translateY(0); }

/* 2c) Flatsome kompakt açılır kutu — yüzen kutu okunması için yumuşak gölge */
.live-search-results,
.ux-search-box .live-search-results,
.search-results-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:#fff;
  border:0;
  border-radius:0;                       /* Sephora: KARE köşe */
  box-shadow:var(--bks-shadow-pop);      /* yüzen kompakt kutu okunsun (Bisso uyarlaması) */
  padding:24px 28px;
  max-height:74vh;overflow-y:auto;
  z-index:var(--bks-z-overlay,9000);
}

/* İç kapsayıcı: beyaz kutu içeriği 1440px ORTALI, iç boşluk 32px 40px (Sephora) */
.bks-search-inner{
  max-width:var(--bks-search-maxw);
  margin:0 auto;
  padding:var(--bks-search-pad);
  position:relative;
}

/* ---- Bölüm başlığı ("Ürünler" / "Öneriler") 18/700 ls.45 lh24 ---- */
.live-search-results .suggestions-title,
.live-search-results .group-title,
.bks-search-section-title,
.bks-search-left-title{
  font-size:18px !important;font-weight:700 !important;
  letter-spacing:.45px !important;line-height:24px !important;
  text-transform:none !important;color:var(--bks-black) !important;
  margin:0 0 14px !important;
}
/* ---- Sağ sütun 2. grup başlığı ("Kategoriler") = TAM bölüm başlığı 18/700 ls.45 lh24 ----
   (Ölçüm 13:48: Sephora "Kategoriler"i de 18/700 gösterir; üstte öneri listesinden
   ayırmak için margin-top korunur. Eski 16/500 "küçük alt-başlık" DÜZELTİLDİ.) */
.bks-search-subtitle,
.live-search-results .categories-title{
  font-size:18px !important;font-weight:700 !important;
  letter-spacing:.45px !important;line-height:24px !important;
  text-transform:none !important;color:var(--bks-black) !important;
  margin:28px 0 14px !important;
}

/* ============================================================
   3) ÜRÜN SONUÇ SATIRI  (a.suggestion)
   flex / ortalı / gap 16px / iç boşluk 8px 0 / KENARLIK YOK / h~84
   ============================================================ */
.live-search-results a.suggestion,
.live-search-results .suggestion,
.bks-search-product{
  display:flex;align-items:flex-start;gap:16px;  /* ÜST hiza: marka+fiyat aynı satırda (Sephora) */
  padding:8px 0;
  border:0 !important;border-bottom:0 !important;  /* Sephora: ayraç YOK */
  color:var(--bks-black) !important;text-decoration:none !important;
  transition:background var(--bks-t-fast);
}
.live-search-results a.suggestion:hover,
.bks-search-product:hover{ background:var(--bks-soft); }

/* Görsel 64×64, kare. Sephora=fill (bozar); Bisso=contain (bozulmasın) */
.live-search-results a.suggestion img,
.live-search-results .search-image img,
.bks-search-product img{
  width:64px !important;height:64px !important;
  object-fit:contain !important;background:#fff;
  border-radius:0 !important;flex:0 0 64px;
  align-self:center;            /* satır üst-hizalı olsa da görsel dikey ortalı kalsın */
}

/* Metin bloğu (marka + ad) */
.live-search-results .search-text,
.bks-search-product-info{ flex:1 1 auto;min-width:0; }

/* Marka satırı: 16px/700 SİYAH, ls .4px (içerik büyük-harf görünür) */
.live-search-results .search-brand,
.bks-search-product-brand{
  font-size:16px !important;font-weight:700 !important;
  text-transform:uppercase !important;letter-spacing:.4px !important;
  line-height:24px !important;color:var(--bks-black) !important;
  margin:0 0 2px !important;
}

/* Ürün adı: 14px/500 #000, lh20, ls.35; 2 satır kırp; eşleşen terim kalın */
.live-search-results a.suggestion .search-name,
.live-search-results .search-name,
.bks-search-product-name{
  font-size:14px !important;font-weight:500 !important;
  line-height:20px !important;letter-spacing:.35px !important;
  color:var(--bks-black) !important;margin:0 !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.live-search-results .search-name strong,
.bks-search-product-name strong{ font-weight:700; }

/* Fiyat: 16px/700 #000, ls.4; indirimli KIRMIZI (çıkarım) */
.live-search-results .search-price,
.bks-search-product-price{
  font-size:16px !important;font-weight:700 !important;
  letter-spacing:.4px !important;line-height:24px !important;
  color:var(--bks-black) !important;
  white-space:nowrap;margin-left:auto;flex-shrink:0;
  align-self:flex-start;       /* fiyat marka satırına hizalı (üst-sağ, Sephora y204) */
}
.live-search-results .search-price del,
.bks-search-product-price del{ color:var(--bks-grey);font-weight:400;font-size:14px;margin-right:6px; }
.live-search-results .search-price ins,
.live-search-results .search-price .amount.is-discounted,
.bks-search-product-price ins,
.bks-search-product-price .ins{ color:var(--bks-red) !important;text-decoration:none; }

/* ============================================================
   4) ÖNERİ / KATEGORİ METİN LİNKLERİ (sağ sütun)
   Render edilen metin: 14px/500 #000, ALT ÇİZGİLİ, hover kırmızı.
   ============================================================ */
.live-search-results a.suggestion-category,
.live-search-results .suggestions_term a,
.bks-search-trend,
.bks-search-term{
  display:inline-block;padding:6px 0;
  font-size:14px !important;font-weight:500 !important;
  line-height:20px !important;letter-spacing:.35px;
  color:var(--bks-black) !important;
  text-decoration:underline !important;text-underline-offset:2px;
  border-bottom:0 !important;
  transition:color var(--bks-t-fast);
}
.live-search-results a.suggestion-category:hover,
.live-search-results .suggestions_term a:hover,
.bks-search-trend:hover,
.bks-search-term:hover{ color:var(--bks-red) !important;text-decoration:underline !important; }
.bks-search-trend strong,.bks-search-term strong{ font-weight:700; }
/* Öneri linkleri yatay sarmalı dizilebilir */
.bks-search-terms{ display:flex;flex-wrap:wrap;gap:6px 16px; }

/* ============================================================
   5) "TÜM ÜRÜNLERİ İNCELE" CTA — siyah buton
   w~202 / h48 / bg #000 / yazı #f2f2f2 / 16px/400 ls.4 / radius8 / pad10/18 / 2px kenar
   ============================================================ */
.live-search-results .all-results,
.live-search-results a.show-all-results,
.bks-search-all{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:10px 18px;margin-top:16px;
  background:var(--bks-black) !important;color:#f2f2f2 !important;
  font-size:16px !important;font-weight:400 !important;letter-spacing:.4px !important;
  line-height:1 !important;text-transform:none !important;   /* cümle düzeni */
  border:2px solid var(--bks-black) !important;border-radius:8px !important;
  text-decoration:none !important;cursor:pointer;
  transition:background var(--bks-t),border-color var(--bks-t),color var(--bks-t);
}
.live-search-results .all-results:hover,
.live-search-results a.show-all-results:hover,
.bks-search-all:hover{
  background:var(--bks-red) !important;border-color:var(--bks-red) !important;color:#fff !important;
}

/* Kapat (×): 32×32 siyah, sağ-üst (panel üstünden ~32px), hover kırmızı */
.bks-search-close,
.live-search-results .search-close{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--bks-black);
  font-size:20px;line-height:1;cursor:pointer;
  /* Ölçüm 13:48: × başlık satırıyla aynı hizada (içerik üst-sağ köşe, 40px sağ-boşluk) */
  position:absolute;top:32px;right:40px;
  transition:color var(--bks-t-fast);
}
.bks-search-close:hover,
.live-search-results .search-close:hover{ color:var(--bks-red); }

/* ============================================================
   6) İKİ BÖLGELİ DÜZEN YARDIMCISI (sol ürünler / sağ öneriler)
   Sephora: sol "Ürünler" geniş (flex-grow), sağ "Öneriler/Kategoriler".
   İç kapsayıcı flex, kolon arası 40px (ölçülen).
   ============================================================ */
.bks-search-panel-grid{ display:flex;gap:40px;align-items:flex-start; }
.bks-search-left{ flex:3 1 0;min-width:0; }
.bks-search-right{ flex:1 1 260px;min-width:220px; }
.bks-search-section{ margin-bottom:20px; }
/* Sol ürün ızgarası iki sütun (Sephora) — satır arası ~16px / sütun ~40px */
.bks-search-products{ display:grid;grid-template-columns:1fr 1fr;gap:16px 40px; }

/* Boş durum */
.live-search-results .no-results,
.bks-search-empty{
  padding:28px;text-align:center;color:var(--bks-mid);font-size:14px;
}

/* ============================================================
   7) MOBİL: tek sütun + tam ekran arama overlay (Sephora mobil davranışı)
   ============================================================ */
@media (max-width:849px){
  .bks-search-panel-grid,.bks-search-products{ display:block; }
  .bks-search-products{ grid-template-columns:1fr; }
  .bks-search-right{ padding-left:0;border-left:0;border-top:1px solid var(--bks-line);padding-top:16px;margin-top:8px; }
  .bks-search-inner{ padding:20px 16px; }
}
@media (max-width:767px){
  .live-search-results,
  .bks-search-panel{
    position:fixed;top:0;left:0;right:0;bottom:0;
    border-radius:0;max-height:100vh;padding:16px;
  }
}

/* ============================================================
   8) ERİŞİLEBİLİRLİK — klavye odak halkası (Bisso kırmızı)
   05/06/07/09/10/11 ile tutarlı: outline 2px solid var(--bks-red) + offset 2px;
   eleman kendi köşe yarıçapını korur. :focus-visible yalnız klavyede eşleşir →
   fareyle temiz, klavyede net halka. Arama input'unun :focus outline:none'unu
   kaynak-sırasıyla (bu blok dosyanın sonunda) geçersiz kılar.
   Re-doğrulama 2026-06-01 19:15 — tüm ölçüler canlı panelle birebir doğrulandı;
   yalnız bu a11y bloğu eklendi (hiçbir ölçü değişmedi).
   ============================================================ */
.header input.search-field:focus-visible,
.ux-search-box input[type="search"]:focus-visible,
.ux-search-box .ux-search-box__input:focus-visible,
form.searchform input[type="search"]:focus-visible,
.live-search-results a.suggestion:focus-visible,
.bks-search-product:focus-visible,
.live-search-results a.suggestion-category:focus-visible,
.live-search-results .suggestions_term a:focus-visible,
.bks-search-trend:focus-visible,
.bks-search-term:focus-visible,
.live-search-results .all-results:focus-visible,
.live-search-results a.show-all-results:focus-visible,
.bks-search-all:focus-visible,
.bks-search-close:focus-visible,
.live-search-results .search-close:focus-visible{
  outline:2px solid var(--bks-red) !important;
  outline-offset:2px !important;
}

/* 08-arama.css sonu — ölçüm: sephora.com.tr GERÇEK açık arama paneli ("ruj"),
   re-doğrulama 2026-06-01 19:15 (TÜM ölçüler birebir doğrulandı: panel tam-genişlik
   #fff radius0 gölge-yok bd0; iç 1440 ORTALI pad32/40; kolon-arası 40; 3 başlık
   18/700 ls.45 lh24 — off-screen 16/500 düğümü YİNE atlandı; satır flex gap16 pad8/0
   h84; görsel 64×64 fill r0; marka 16/700 ls.4; ad 14/500 lh20 ls.35; fiyat 16/700
   ls.4; öneri/kategori 14/500 ls.35 altçizgili; CTA 202×48 #000/#f2f2f2 16/400 r8
   2px#000 pad10/18; × 32×32 #000 @top32/right40; pill FORM #f2f2f2 rad-pill bd0
   gölge-yok pad8/12 flex gap12, ikon 32×32, input 16/400 ls.4. Yeni: :focus-visible). */