/* ==========================================================================
   ESSENTIALS BANDI -- TEK KATEGORIK ISARET

   ⛔⛔ URUN URUN TEKNIK CIZIM REDDEDILDI (24.08.2026, kullanici karari):
      "bunlari birebir cizmene gerek yoktu ... urun urun olmasina gerek yok
      kategorik grafik olurdu". Once 13 ayri cizim jeneratoru + 18 urunluk
      slug haritasi vardi; hepsi kaldirildi. TEKRAR ONERME.
   ⛔⛔ ARDINDAN URUN KARTLARI DA REDDEDILDI: "hayir sadece svg olacak 1 tane
      o kadar urun isimlerine gerek yok". Uc kartlik izgara, urun adlari ve
      urun baglantilari GITTI. Bandin gorsel tarafinda TEK isaret var.
      Katalog girisi zaten "Essentials katalogu" dugmesinde.

   Isaret: pergel -- assets/img/ess-compass.svg (kullanicinin verdigi dosya;
   Noun Project atif metni ve 100x125 viewBox temizlendi).

   ⚠ Renk dosyaya GOMULU DEGIL. `mask` + `background-color: var(--...)`:
     isaret token rengiyle boyaniyor, SVG'de tek bir hex yok.
   ⚠ Isaret CSS sozde-ogesi -- erisilebilirlik agacinda GORUNMEZ, yani
     dekoratif. Zaten hicbir bilgi tasimiyor (urun adi kalmadi).
   ⚠ Kartlar `display: none` -- baglantilar sekme sirasindan ve ekran
     okuyucudan da cikiyor, "gorunmez ama odaklanabilir link" birakilmiyor.
   ⚠ Kapsam `.k-line--ess` -- PREMIUM bandina (`k-line--prem`) dokunmaz;
     orada gercek urun fotografi dogru.
   ⚠ Ayri dosya: theme.css / v13-fixes.css bu oturumda baska ajanlarda acik.
   ⛔ Ayirac/altcizgi yok, hover yukselme/golge yok, prefers-color-scheme yok.
   ========================================================================== */

/* Uc kart komple gidiyor: gorsel, ad, baglanti. */
.k-line--ess .k-line__card { display: none; }

/* Kartlarin yerini TEK isaret aliyor. Izgaranin kendisi tasiyici oluyor --
   yeni bir sarmalayici gerekmedigi icin front-page.php'ye DOKUNULMADI. */
.k-line--ess .k-line__grid {
  display: grid;
  /* ⚠ theme.css/responsive.css izgaraya 3 (mobilde 2) SUTUN veriyor. Sutun
     sayisi ezilmezse tek isaret ilk hucreye dusuyor ve sagda kaliyordu --
     render'da goruldu, olculdu (778px kolonda isaret x~920'de). */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  /* ⚠ Sol kolondaki metin blogu ~250px. Isaret ondan buyuk durmasin diye
     ust sinir 200px; tek basina kaldigi icin de uc kucuk ikondan buyuk. */
  min-height: clamp(140px, 18vw, 230px);
}
.k-line--ess .k-line__grid::before {
  content: "";
  display: block;
  width: clamp(120px, 15vw, 200px);
  aspect-ratio: 1;
  background-color: var(--text-tertiary);
  -webkit-mask: url("../img/ess-compass.svg") no-repeat center / contain;
  mask: url("../img/ess-compass.svg") no-repeat center / contain;
}

/* === R59: bandin PAFTA zemini =============================================
   Desen Essentials arsivinden birebir (essentials.css `.k-ess-sheet`):
   16px ince nokta modulu + 96px kaba modul isareti, ayni rgba degerleri.
   ⚠ theme.css:1232 bandi `--surface-page` yapiyordu -- sayfa zeminiyle ayni
     renk, yani bant hic okunmuyordu. Burada `--grey-25` ile ayrisiyor.
   ⚠ Desen SAG KOLONA degil BANDIN TAMAMINA veriliyor: onceki plakali varyant
     deseni sadece isaretin arkasina koymus ve genis bos kutu uretmisti.
   ⚠ Yatayda `center`: bant tam genislik, modul sayfa ekseninde simetrik
     kaliyor. Arsivdeki "modul sifiri = icerik sol-ust kosesi" kurali tam
     genislikte bir bantta uygulanamiyor.
   ========================================================================== */
.k-line--ess {
  background-color: var(--grey-25);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(29, 27, 25, .07) 1px, transparent 1.6px),
    radial-gradient(circle at 2px 2px, rgba(29, 27, 25, .13) 1.4px, transparent 2.2px);
  background-size: 16px 16px, 96px 96px;
  background-position: center top, center top;
}

/* Dort kose register (kesim) isareti -- ICERIK kutusuna, bandin dis kenarina
   degil. Tek ogede sekiz katman = dort adet "L".
   ⚠ `position:absolute` sart: `.k-line__inner` bir izgara ve mutlak konumlu
     cocuk izgara akisina katilmaz -- iki kolonluk duzen kaymaz. */
.k-line--ess .k-line__inner { position: relative; }
.k-line--ess .k-line__inner::before {
  content: "";
  position: absolute;
  inset: calc(var(--section-y) - 14px) 0;
  pointer-events: none;
  --rc: var(--grey-300);
  background-image:
    linear-gradient(var(--rc), var(--rc)), linear-gradient(var(--rc), var(--rc)),
    linear-gradient(var(--rc), var(--rc)), linear-gradient(var(--rc), var(--rc)),
    linear-gradient(var(--rc), var(--rc)), linear-gradient(var(--rc), var(--rc)),
    linear-gradient(var(--rc), var(--rc)), linear-gradient(var(--rc), var(--rc));
  background-repeat: no-repeat;
  background-size:
    14px 1px, 1px 14px, 14px 1px, 1px 14px,
    14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
}