/* ═══ TEK İKON — kapat · geri · ok TEK yerden çizilir ══════════════════════
   (7 Eyl 2026, kullanıcı kararı: "büyük çarpı butonlar göze durmuyor".)

   VAKA: Masalar ekranının sağ üstündeki çarpı, yanındaki ay ikonundan kalın
   duruyordu. Sebep: ay bir ÇİZİM, çarpı ise klavyeden yazılmış bir HARF.
   Harfi telefon kendi yazı tipinden çiziyor — her cihazda başka kalınlıkta,
   bizim çizgi kalınlığımızla hiç uyuşmuyor. Üstelik üründe ÜÇ ayrı çarpı
   harfi kullanılmıştı: ✕ (69) · × (30) · ✖ (10). Üçü üç ayrı ağırlıkta.
   `×` zaten çarpı değil, matematikteki ÇARPMA işareti.

   🔑 ÇÖZÜM CSS'te, JS'te değil: maske ile çizilen ikon hem HTML'de hem JS'in
   kurduğu düğmede aynı sınıfla çalışır, geç yüklenme sorunu olmaz ve tanım
   TEK yerde kalır. Düğmenin içine artık harf YAZILMAZ — `aria-label` kalır,
   ekran okuyucu ondan okur.

   🔴 DOKUNMA ALANI 44: görünen daire 30 px kalır (tasarım değişmesin), ama
   `::after` ile 44x44'lük görünmez bir alan serilir. Büyüyen şey görüntü
   değil, parmağın bulduğu yer. Ölçülen hâl 30x34'tü — kare bile değildi.

   ⚠️ `-webkit-mask` ŞART: iPhone'da maske ön ekli sürümü ister; onsuz ikon
   hiç çizilmez ve düğme BOŞ görünür (öğrencinin elinde kapı kalmaz).
*/

:root {
    --ss-ikon-boy: 16px;      /* çizimin boyu */
    --ss-dokunak: 44px;       /* parmağın bulduğu alan */
}

/* ── DOKUNMA PAYI ─────────────────────────────────────────────────────────
   ⏳ SIRADAKİ İŞ (bu turda YAPILMADI): yuvarlak kapatma düğmesinin kendisi
   dört ayrı defterde birebir aynı tanımlı (masam.css · kumem.css ·
   programim.css · sarmal.css — hepsinde 30x30 daire, aynı renkler). Bu tur
   ÇİZİMİ ve DOKUNMA ALANINI tekleştiriyor; dairenin dört kopyasını tek
   sınıfa indirmek ayrı bir iş olarak duruyor. */

/* Görünmez dokunma payı — görüntüyü büyütmeden parmağı büyütür.
   🔴 `z-index` ŞART (7 Eyl, ekranda ölçüldü): pay saydam olduğu için komşu
   yazı onun ÜSTÜNE boyanıyor ve dokunuşu kapıyordu — `elementFromPoint`
   düğmeyi değil yandaki yazıyı döndürüyordu. Yani pay ekranda vardı ama
   parmak için yoktu.
   ⚠️ Bu sınıf YALNIZ tek başına duran düğmeye konur (başlıktaki yuvarlak
   kapatma gibi). Dar bir satırın içindeki düğmeye konursa komşusunun
   dokunuşunu yer; orada pay `padding` + eksi `margin` ile açılır. */
.ss-dokunak { position: relative; z-index: 2; }

.ss-dokunak::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ss-dokunak);
    height: var(--ss-dokunak);
    transform: translate(-50%, -50%);
}

/* ── İkonun kendisi ───────────────────────────────────────────────────────
   Maske currentColor ile boyanır: düğmenin rengi neyse ikon o renk olur. */
.ss-kapat::before,
.ss-geri::before,
.ss-ileri::before,
.ss-sil::before {
    content: '';
    display: block;
    width: var(--ss-ikon-boy);
    height: var(--ss-ikon-boy);
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* KAPAT — iki çizgi, 1.6 kalınlık, yuvarlak uç (ürünün çizgi dili). */
.ss-kapat::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* GERİ — tek ok başı. "‹" harfi de aynı dertten muzdaripti: kimi yerde
   kıl gibi ince, kimi yerde kalın. */
.ss-geri::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}

.ss-ileri::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* SİL / ÇIKAR — kapatmanın küçüğü. AYRI SINIF, çünkü ayrı iş:
   "bu ekranı kapat" ile "bu satırı listeden çıkar" aynı şey değildir.
   Aynı çizim, küçük boy — akrabalar benzer, ikiz değil. */
.ss-sil::before {
    width: 12px;
    height: 12px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}