/* 12 kolonluk form ızgarası. Kap: <div class="izgara">, alanlar: alan-1 .. alan-12.
   Kırılım KABIN kendi genişliğine bakıyor (@container), pencereli düzende ekran yanıltıyor.
     alan-std-N     her genişlikte N kolon (Bootstrap col-N)
     alan-orta-N    kap ≤ 900px      alan-dar-N    kap ≤ 620px
     alan-cokdar-N  kap ≤ 430px      alan-genis-N  kap ≥ 1200px
     alan-satirbasi yeni satırdan başlat   alan-kalan  tam satır   bosluk-N  soldan N kolon boş
   Öncelik dardan genişe: cokdar > dar > orta > std/alan. Eski duzenleme-alan-* sınıfları köprüden okunur.
   Izgara dar kapta çöküyorsa suclu ata: genişliğini içerikten alan ataya width:100% ver.
   Ayrıntı: docs/ai/PATTERNS.md — "Form düzeni: 12 kolonluk ızgara". */
/* Kırılma kabın kendi genişliğine bağlı; pencereli düzende ekran genişliği yanıltıyor (bkz. başlıktaki not). */
.izgara{container-type:inline-size; container-name:izgara; display:grid; grid-template-columns:repeat(var(--izgara-kolon, 12), 1fr); gap:var(--izgara-satir-bosluk, 15px) var(--izgara-kolon-bosluk, 12px); align-items:start; width:100%;}

/* Satır yüksekliği alanların en uzununa göre eşitlensin isteyen kart için. */
.izgara.esnek{align-items:stretch;}

/*#region Kolon genişlikleri*/
.izgara > .alan-1{grid-column-end:span 1;}
.izgara > .alan-2{grid-column-end:span 2;}
.izgara > .alan-3{grid-column-end:span 3;}
.izgara > .alan-4{grid-column-end:span 4;}
.izgara > .alan-5{grid-column-end:span 5;}
.izgara > .alan-6{grid-column-end:span 6;}
.izgara > .alan-7{grid-column-end:span 7;}
.izgara > .alan-8{grid-column-end:span 8;}
.izgara > .alan-9{grid-column-end:span 9;}
.izgara > .alan-10{grid-column-end:span 10;}
.izgara > .alan-11{grid-column-end:span 11;}
.izgara > .alan-12{grid-column-end:span 12;}
/*#endregion*/

/*#region Eski sınıf köprüsü*/
.izgara > .duzenleme-alan-cokkucuk{grid-column-end:span 2;}
.izgara > .duzenleme-alan-kucuk{grid-column-end:span 3;}
.izgara > .duzenleme-alan-orta{grid-column-end:span 4;}
.izgara > .duzenleme-alan-buyuk{grid-column-end:span 6;}
.izgara > .duzenleme-alan-cokbuyuk{grid-column-end:span 8;}
.izgara > .duzenleme-alan-sigdir{grid-column-end:span 4;}
.izgara > .duzenleme-alan{grid-column-end:span 4;}
.izgara > .duzenleme-alan-full, .izgara > .duzenleme-alan-genis{grid-column-end:span 12;}

/* Flex düzenindeki satır ayracı ızgarada işe yaramıyor; görünmez kalsın ki köprüyle çevrilen ekranlarda boş satır açmasın. */
.izgara > bol{display:none;}

/* Taban genişlikleri ızgarada kolon hesabını bozuyor: min-width kalkıyor. */
.izgara > [class*="duzenleme-alan"]{min-width:0;}
/*#endregion*/

/*#region Otomatik daralma*/

/* Ölçüldü: pencerede kap 789px ve orada DÖRT alan rahat sığıyor (~184px). Bu yüzden bu eşik yalnız gerçekten dar hücreleri (altıda bir) büyütüyor. */
@container izgara (max-width: 900px){
    .izgara > .duzenleme-alan-cokkucuk{grid-column-end:span 3;}
}

/* 620px altında çeyrek 150px'in altına iniyor; satırda en çok iki alan. */
@container izgara (max-width: 620px){
    .izgara > :is(.alan-1, .alan-2, .alan-3, .alan-4, .alan-5, .duzenleme-alan-cokkucuk, .duzenleme-alan-kucuk, .duzenleme-alan-orta, .duzenleme-alan-sigdir, .duzenleme-alan){grid-column-end:span 6;}
    .izgara > :is(.alan-7, .alan-8, .alan-9, .alan-10, .alan-11, .duzenleme-alan-cokbuyuk){grid-column-end:span 12;}
}

/* 430px altında AYRI bir eşik YOK. Önceden hepsi tek sütuna iniyordu; telefonda Cari Kod ile Muhasebe Kodu alt alta düşüyordu, oysa ikisi de kısa alan. */
/*#endregion*/

/*#region Otomatik daralmadan muaf genişlik*/
.izgara > .alan-std-1{grid-column-end:span 1;}
.izgara > .alan-std-2{grid-column-end:span 2;}
.izgara > .alan-std-3{grid-column-end:span 3;}
.izgara > .alan-std-4{grid-column-end:span 4;}
.izgara > .alan-std-5{grid-column-end:span 5;}
.izgara > .alan-std-6{grid-column-end:span 6;}
.izgara > .alan-std-7{grid-column-end:span 7;}
.izgara > .alan-std-8{grid-column-end:span 8;}
.izgara > .alan-std-9{grid-column-end:span 9;}
.izgara > .alan-std-10{grid-column-end:span 10;}
.izgara > .alan-std-11{grid-column-end:span 11;}
.izgara > .alan-std-12{grid-column-end:span 12;}
/*#endregion*/

/*#region Kırılıma göre kolon*/
@container izgara (max-width: 900px){
    .izgara > .alan-orta-1{grid-column-end:span 1;}
    .izgara > .alan-orta-2{grid-column-end:span 2;}
    .izgara > .alan-orta-3{grid-column-end:span 3;}
    .izgara > .alan-orta-4{grid-column-end:span 4;}
    .izgara > .alan-orta-5{grid-column-end:span 5;}
    .izgara > .alan-orta-6{grid-column-end:span 6;}
    .izgara > .alan-orta-7{grid-column-end:span 7;}
    .izgara > .alan-orta-8{grid-column-end:span 8;}
    .izgara > .alan-orta-9{grid-column-end:span 9;}
    .izgara > .alan-orta-10{grid-column-end:span 10;}
    .izgara > .alan-orta-11{grid-column-end:span 11;}
    .izgara > .alan-orta-12{grid-column-end:span 12;}
}

@container izgara (max-width: 620px){
    .izgara > .alan-dar-1{grid-column-end:span 1;}
    .izgara > .alan-dar-2{grid-column-end:span 2;}
    .izgara > .alan-dar-3{grid-column-end:span 3;}
    .izgara > .alan-dar-4{grid-column-end:span 4;}
    .izgara > .alan-dar-5{grid-column-end:span 5;}
    .izgara > .alan-dar-6{grid-column-end:span 6;}
    .izgara > .alan-dar-7{grid-column-end:span 7;}
    .izgara > .alan-dar-8{grid-column-end:span 8;}
    .izgara > .alan-dar-9{grid-column-end:span 9;}
    .izgara > .alan-dar-10{grid-column-end:span 10;}
    .izgara > .alan-dar-11{grid-column-end:span 11;}
    .izgara > .alan-dar-12{grid-column-end:span 12;}
}

@container izgara (max-width: 430px){
    .izgara > .alan-cokdar-1{grid-column-end:span 1;}
    .izgara > .alan-cokdar-2{grid-column-end:span 2;}
    .izgara > .alan-cokdar-3{grid-column-end:span 3;}
    .izgara > .alan-cokdar-4{grid-column-end:span 4;}
    .izgara > .alan-cokdar-5{grid-column-end:span 5;}
    .izgara > .alan-cokdar-6{grid-column-end:span 6;}
    .izgara > .alan-cokdar-7{grid-column-end:span 7;}
    .izgara > .alan-cokdar-8{grid-column-end:span 8;}
    .izgara > .alan-cokdar-9{grid-column-end:span 9;}
    .izgara > .alan-cokdar-10{grid-column-end:span 10;}
    .izgara > .alan-cokdar-11{grid-column-end:span 11;}
    .izgara > .alan-cokdar-12{grid-column-end:span 12;}
}

/* Tek min-width kırılımı: geniş pencerede daha çok alan yan yana sığsın diye (Bootstrap col-xl-*). En altta, çünkü yalnız 1200px üstünde iş görmeli. */
@container izgara (min-width: 1200px){
    .izgara > .alan-genis-1{grid-column-end:span 1;}
    .izgara > .alan-genis-2{grid-column-end:span 2;}
    .izgara > .alan-genis-3{grid-column-end:span 3;}
    .izgara > .alan-genis-4{grid-column-end:span 4;}
    .izgara > .alan-genis-5{grid-column-end:span 5;}
    .izgara > .alan-genis-6{grid-column-end:span 6;}
    .izgara > .alan-genis-7{grid-column-end:span 7;}
    .izgara > .alan-genis-8{grid-column-end:span 8;}
    .izgara > .alan-genis-9{grid-column-end:span 9;}
    .izgara > .alan-genis-10{grid-column-end:span 10;}
    .izgara > .alan-genis-11{grid-column-end:span 11;}
    .izgara > .alan-genis-12{grid-column-end:span 12;}
}
/*#endregion*/

/*#region Satır kontrolü*/

/* Tam satır, satır başından. */
.izgara > .alan-kalan{grid-column:1 / -1;}

/* Bu alan yeni satırdan başlasın (flex düzenindeki <bol> karşılığı). */
.izgara > .alan-satirbasi{grid-column-start:1;}

/* Soldan boş kolon bırak (Bootstrap offset karşılığı). */
.izgara > .bosluk-1{grid-column-start:2;}
.izgara > .bosluk-2{grid-column-start:3;}
.izgara > .bosluk-3{grid-column-start:4;}
.izgara > .bosluk-4{grid-column-start:5;}
.izgara > .bosluk-6{grid-column-start:7;}
/*#endregion*/

/* Kap sorgusu tanınmayan eski tarayıcıda düzen bozulmasın diye aynı daralma dar EKRANDA medya sorgusuyla da yapılıyor; 620 eşiğinin aynısı. */
@supports not (container-type: inline-size){
    @media (max-width: 700px){
        .izgara > :is(.alan-1, .alan-2, .alan-3, .alan-4, .alan-5, .duzenleme-alan-cokkucuk, .duzenleme-alan-kucuk, .duzenleme-alan-orta, .duzenleme-alan-sigdir, .duzenleme-alan){grid-column-end:span 6;}
        .izgara > :is(.alan-7, .alan-8, .alan-9, .alan-10, .alan-11, .duzenleme-alan-cokbuyuk){grid-column-end:span 12;}
    }
}