/* ==========================================================================
   Mobilde TEK SATIR — "Son yazilar" (.k-journal) + Instagram (.k-ig__grid)

   SORUN (390px'de olculdu, once):
     .k-journal   3 kart / 2 satir (2 + 1)  -> ikinci satirin sagi BOS kaliyordu
     .k-ig__grid  6 karo / 2 satir (3 + 3)
   Iki bolum de mobilde iki satir kapliyordu; istenen tek satir.

   ⚠ NEDEN GIZLEME DEGIL: fazlaligi `display:none` ile kaldirmak gorseli yine
     INDIRIR (mobil veri israfi) ve baglantiyi ekran okuyucuda/sekme sirasinda
     olu birakir. Bunun yerine izgara tek satira sabitlenip yataydan
     kaydirilabilir yapildi: butun icerik erisilebilir kalir, indirilen gorsel
     sayisi DEGISMEZ, sekme sirasi bozulmaz -- sadece dikey yer yariya iner.

   ⚠ r73 KAPSAM: `.k-journal` kurallari ANASAYFAYA (`body.home`) baglidir.
     Onceden `.k-site` ile her sayfada gecerliydi ve BLOG ARSIVI de ayni
     `.k-journal` sarmalayicisini kullandigi icin orada da tek satira
     sikisiyordu -- blog sayfasinda yanlis. `.k-ig__grid` bilerek KAPSAMSIZ:
     Instagram seridi blog detayinda da var, orada da tek satir dogru.

   ⚠ MASAUSTU DOKUNULMADI: butun kurallar `max-width: 767px` icinde.
     Kapsam `.k-site` (body sinifi) -- ozgulluk responsive.css'teki
     `.k-journal` / `.k-ig__grid` kurallarini gecmek icin gerekli, baska
     hicbir seyi etkilemez.

   Degerler tokens.css'ten (--space-*, --gutter).
   ========================================================================== */

@media (max-width: 767px) {

	/* Ortak serit davranisi -------------------------------------------- */
	.k-site.home .k-journal,
	.k-site .k-ig__grid {
		/* responsive.css mobilde 2/3 kolonluk sablon veriyor; sablon
		   sifirlanmazsa ogeler once o kolonlara yerlesir ve satir kirilir. */
		grid-template-columns: none;
		grid-auto-flow: column;

		overflow-x: auto;
		overflow-y: hidden;
		/* Serit sonuna gelince tarayicinin geri-kaydirma hareketi tetiklenmesin. */
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;

		/* Serit ekranin KENARINA kadar akar: kesilen kart "kirpilmis" degil
		   "devami var" okunur. Negatif kenar bosluk + esit dolgu = net
		   genislik degismez, yani sayfada yatay TASMA uretmez. */
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);

		/* ⚠ overflow-x:auto, overflow-y'yi de kaydirma kutusu yapar ve
		   :focus-visible halkasini (box-shadow 0 0 0 3px) KIRPARDI.
		   Dikey dolgu halkaya yer acar; ustteki bosluk margin'den ayni
		   kadar dusuruldugu icin gorsel ritim degismez. */
		padding-block: var(--space-3);
	}

	.k-site.home .k-journal > *,
	.k-site .k-ig__grid > * {
		scroll-snap-align: start;
	}

	/* Son yazilar: 3 kart ------------------------------------------------ */
	.k-site.home .k-journal {
		/* ~1.5 kart gorunur: ikincinin kenari ekranda kalir, seridin
		   kaydirilabildigi tiklamadan anlasilir. Ust sinir genis
		   telefonlarda kartin gereksiz sismesini keser. */
		grid-auto-columns: clamp(200px, 60vw, 280px);
		gap: var(--space-5);
		margin-top: calc(var(--space-7) - var(--space-3));
	}

	/* Instagram: 6 karo -------------------------------------------------- */
	.k-site .k-ig__grid {
		/* ~3.3 karo gorunur -- dorduncusu kesilir. Karolar bilerek kucuk:
		   Instagram seridi sayfanin en az onemli katmani. */
		grid-auto-columns: clamp(92px, 26vw, 128px);
		gap: var(--space-3);
		margin-top: calc(var(--space-5) - var(--space-3));
	}
}