/* =============================================================
   STBalloonAtelier — Iskelet katmani
   =============================================================

   Yerlesimin tamami Bootstrap 5.3'e ait. Bu dosya yalnizca
   Bootstrap'te karsiligi olmayan, projede tekrar eden birkac
   kalibi tanimlar. Konteyner, satir, sutun, bosluk, hizalama,
   oran kutusu ve gorunurluk yardimcilari icin Bootstrap
   siniflari kullanilir; burada tekrarlanmaz.

   KIRILIM OLCEGI — Bootstrap'in kendi degerleri, baskasi yazilmaz
     sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400

   YENI BOLUM YAZARKEN
     <section class="stba-bolum">
       <div class="container">
         <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
           <div class="col"> ... </div>
         </div>
       </div>
     </section>

   Elle @media yazmak istisnadir.
   ============================================================= */

/* -------------------------------------------------------------
   1. Konteyner genisligi
   ------------------------------------------------------------- */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
	padding-inline: var(--stba-yan-bosluk);
}

@media (min-width: 1200px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl {
		max-width: var(--stba-konteyner);
	}
}

@media (min-width: 1400px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: var(--stba-konteyner);
	}
}

/* Temanin eski konteyner sinifi Bootstrap konteyneri ile ayni
   davranir; sablonlar kademeli olarak .container'a geciyor. */
.stba-konteyner {
	width: 100%;
	max-width: var(--stba-konteyner);
	margin-inline: auto;
	padding-inline: var(--stba-yan-bosluk);
}

.stba-konteyner--dar   { max-width: 820px; }
.stba-konteyner--genis { max-width: 1400px; }

/* -------------------------------------------------------------
   2. Bolum — dikey ritim
   ------------------------------------------------------------- */

.stba-bolum {
	padding-block: var(--stba-bolum-mobil);
}

@media (min-width: 768px) {
	.stba-bolum {
		padding-block: var(--stba-bolum);
	}
}

.stba-bolum--sik    { padding-block: calc(var(--stba-bolum-mobil) * .6); }
.stba-bolum--ustsuz { padding-block-start: 0; }
.stba-bolum--altsiz { padding-block-end: 0; }

.stba-bolum--acik  { background: var(--stba-pearl); }
.stba-bolum--blush { background: var(--stba-blush); }
.stba-bolum--beyaz { background: var(--stba-white); }

/* -------------------------------------------------------------
   3. Otomatik izgara
   -------------------------------------------------------------
   Sutun sayisi ogenin en dar haline gore kendiliginden ayarlanir;
   kirilim noktasi gerektirmez.
     <div class="stba-oto" style="--oge:260px">
   ------------------------------------------------------------- */

.stba-oto {
	display: grid;
	gap: var(--bosluk, var(--stba-izgara));
	grid-template-columns: repeat(auto-fit, minmax(min(var(--oge, 240px), 100%), 1fr));
}

.stba-oto--yasli {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--oge, 240px), 100%), 1fr));
}

/* -------------------------------------------------------------
   4. Bolum basligi — solda baslik, sagda eylem
   ------------------------------------------------------------- */

.stba-bolum-baslik {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.stba-bolum-baslik > :last-child { margin-bottom: 0; }

.stba-bolum-baslik h2,
.stba-bolum-baslik h3 { margin: 0; }

.stba-bolum-baslik--ortali {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* -------------------------------------------------------------
   5. Sutun ici kartlar ve tasma korumasi
   ------------------------------------------------------------- */

/*
 * Sutundaki kart satirdaki en uzun karta esitlenir.
 *
 * ":only-child" sart: kural once her sutun cocuguna uygulaniyordu ve
 * icinde birden cok parca olan sutunlarda (orn. iletisim sayfasinda
 * kart satiri + altindaki adres karti) alttaki kart sutunun tamamina
 * uzayip altta buyuk bir bosluk birakiyordu. Esit yukseklik yalnizca
 * kartin sutundaki tek oge oldugu durumda anlamli.
 *
 * Bilerek esit yukseklik istenen yerlerde Bootstrap'in kendi "h-100"
 * sinifi kullaniliyor; bu kural ona karismaz.
 */
.col > .card:only-child,
.col > .stba-kart:only-child,
[class*="col-"] > .card:only-child,
[class*="col-"] > .stba-kart:only-child {
	height: 100%;
}

.row > *,
.stba-oto > * {
	min-width: 0;
}

/* Yatay tasmayi keser. "hidden" degil "clip": hidden bir kaydirma
   kabi yaratir ve icindeki position: sticky ogeleri (ustlik, sepet
   ozeti) calismaz hale getirir. */
body {
	overflow-x: clip;
}