/* ═══════════════════════════════════════════════════════════════════
   HUKUK KATMANI · FİLİGRAN — ikon işaret değil ZEMİN
   -------------------------------------------------------------------
   İkon rozetten de çıktı, satır başından da: hücrenin sağ üstünde
   büyük ve çok soluk duruyor, metin onun üstüne yazılıyor. Böylece
   ızgara "ikon + yazı" listesi gibi değil, dört sayfa gibi okunuyor.

   DÖRT KUTU TEK RENK (26 Ağu, Beyefendi): dördüncü gözün ayrı toprak
   zemini, ayrı filigran rengi ve turuncu oku kaldırıldı. Kutular arasında
   hiçbir renk farkı yok; ayrımı yalnız içerik yapıyor.

   İKONLAR DEĞİŞTİ. Mühür · hilal · çokgen · yer imi soyut kaldı, ne
   anlattıkları okunmuyordu. Yerlerine doğrudan karşılıkları kondu:
   anahtar (mülkiyet) · pasaport (vize ve kalış) · işaretli harita
   (belirlenmiş alan) · liste (sıradaki yer). Ağırlık light 300 → solid:
   %12 opaklıkta ince çizgi filigran olarak kayboluyordu.

   Filigran metnin ALTINDA kalmak zorunda: z-index yerine DOM sırası ve
   pointer-events:none kullanıldı; opaklık %12'de tutuldu — ölçüldü,
   daha yükseğinde gövde metninin kontrastı AA sınırına iniyor.

   HOVER · iki şey değişir: hücrenin ZEMİNİ ve FİLİGRANIN duruşu.
   Kart yerinden zıplamaz, gölge almaz, kenarlık rengi değişmez — üçü de
   bu projede yasak ve üçü de aynı sebeple: derinlik numarayla değil
   katmanla kurulur. Filigran içeri doğru kayıp hafifçe döner, opaklığı
   %7'den %13'e çıkar; kart bir yaprak gibi "aydınlanır".
   Hover YALNIZ işaretçili cihazlarda (@media hover:hover) — dokunmatikte
   ilk dokunuş hover'ı yapıştırıp kartı kalıcı koyu bırakıyor.
   Kartlar bağlantı DEĞİL: imleç değişmez, efekt tıklanabilirlik
   vaat etmez; yalnız okunan hücreyi öne alır.
   Görünür bölüm başlığı yok: kutular doğrudan başlar.
   Sıfır betik.
   ═══════════════════════════════════════════════════════════════════ */
/* BOŞLUK ORTAK TOKEN'DAN: ızgara oluğu site genelinde --bo-3'tür
   (taban.css: "ızgara oluğu — referans"). Kendi clamp'ini yazan bölüm
   komşularından kopar; kutular arası da, alttaki bölümle arası da
   aynı token'dan beslenir. */
.hkk{background:var(--z1);
  padding-block:var(--blm-pd) 0;
  /* AVANTAJLAR BÖLÜMÜYLE ARASI da gap kadar. Ölçüldü: bu bölümün 76 px
     alt dolgusu + avantajların 76 px üst dolgusu = 152 px açıklık vardı.
     Avantajlar (prj3) BAŞKA parçanın sahipliğinde, dolgusuna dokunulmaz;
     bu yüzden boşluk buradan geri alınır: alt dolgu sıfırlanır ve komşunun
     üst dolgusu negatif kenar boşluğuyla gap'e indirilir.
     DİKKAT: hesap komşunun --blm-pd kadar üst dolgusu olduğunu varsayar.
     Alttaki bölüm değişirse bu satır yeniden ölçülmeli. */
  margin-block-end:calc(var(--bo-3) - var(--blm-pd))}

.hkk-iz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--bo-3)}
.hkk-oge{position:relative;overflow:clip;
  padding:var(--kart-pd);border-radius:var(--yr-l);
  background:color-mix(in oklab, var(--z2) 55%, var(--z1));
  transition:background-color var(--gecis) var(--egri)}
/* Glif viewBox'ın SAĞ-ALT köşesine çapalı (ikon-cikar.py kuralı), bu
   yüzden dar glifler (pasaport, liste) negatif kenar payında kutunun
   dışına taşıp kesiliyordu. Pay içeri alındı; geniş glifler de
   (anahtar, harita) aynı hizada duruyor. */
.hkk-filigran{position:absolute;inset-block-start:0;inset-inline-end:2%;
  inline-size:clamp(8rem,15vw,12rem);block-size:auto;
  color:var(--aksan);opacity:.12;pointer-events:none;
  /* translate · rotate · scale AYRI özellikler: tek transform olsaydı
     üçü birbirini ezerdi ve her geçişte hepsi yeniden başlardı. */
  translate:0 0;rotate:0deg;scale:1;transform-origin:70% 30%;
  transition:translate var(--sahne) var(--egri),rotate var(--sahne) var(--egri),
             scale var(--sahne) var(--egri),opacity var(--gecis) var(--egri)}
.hkk-obsl{position:relative;font-size:var(--blm-bsl);font-weight:800;
  letter-spacing:-.032em;line-height:var(--sy-bsl);margin-block-end:var(--bo-1);text-wrap:balance;max-inline-size:17ch}
.hkk-oz{position:relative;margin:0;color:var(--mrk2);font-size:var(--yz-gir);
  line-height:var(--sy-gvd);max-inline-size:42ch}
.hkk-cta{position:relative;display:inline-flex;align-items:center;gap:.55rem;margin-block-start:var(--bo-1);
  font-size:var(--yz-dgm);font-weight:700;color:var(--mrk);
  border-block-end:1px solid var(--mrk);padding-block-end:.25rem;
  transition:gap var(--mikro) var(--egri)}
.hkk-cta:hover{gap:.95rem}
/* Ok da kutuların ortak mürekkebini kullanır: dördü de aynı renk. */
.hkk-ok{inline-size:.9rem;block-size:.9rem;color:currentColor;flex:none}
html[dir="rtl"] .hkk-ok{scale:-1 1}
/* ── HOVER ── yalnız işaretçili cihazda */
@media(hover:hover){
  .hkk-oge:hover{background:color-mix(in oklab, var(--z2) 100%, var(--z1))}
  .hkk-oge:hover .hkk-filigran{opacity:.19;translate:-.7rem .45rem;rotate:-4deg;scale:1.07}
  .hkk-oge[data-cta]:hover .hkk-cta{gap:.95rem}
}
/* Klavyeyle gezen kullanıcı da görsün: CTA odaklandığında hücre aynı
   hâli alır (odak halkası ayrıca duruyor). */
.hkk-oge:focus-within{background:color-mix(in oklab, var(--z2) 100%, var(--z1))}
.hkk-oge:focus-within .hkk-filigran{opacity:.19;translate:-.7rem .45rem;rotate:-4deg;scale:1.07}

@media(max-width:900px){.hkk-iz{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hkk-cta{transition:none}
  /* Hareket kapalı: zemin yine değişir, filigran yerinde kalır. */
  .hkk-filigran{transition:opacity var(--gecis) var(--egri)}
  .hkk-oge:hover .hkk-filigran,.hkk-oge:focus-within .hkk-filigran{translate:0 0;rotate:0deg;scale:1}
}