/* ==========================================================================
   Katalog sitesine ozel eklemeler.
   atelier.css DEMO ile birebir ayni kalsin diye ayri dosyada tutuluyor;
   burada sadece demoda karsiligi olmayan durumlar var.
   atelier.css'ten SONRA yukleniyor.
   ========================================================================== */

/* --------------------------------------------------------- alt alan (footer)
   atelier.css'te .fcol a { display: block; padding: 5px 0 } var; o kural
   MENU kolonu icin yazilmis. Iletisim kolonunda telefon ve e-posta da
   baglanti oldugu icin oraya da uyguluyor ve satirlar blok haline gelip
   <br/> ile birlikte cift araliga dusuyordu. Ayrica .fcol a (0,1,1)
   ozgullukte .walink (0,1,0) ve .iconbtn (0,1,0) kurallarini yendigi icin
   WhatsApp ikonunun hizasi ve bulten okunun bicimi de bozuluyordu.

   Cozum !important degil, DAHA OZGUL secici: .fcol .fcontact a = 0,2,1  */

.fcol .fcontact a {
  display: inline;
  padding: 0;
}
/* Alti cizili OLMASIN - ne normalde ne uzerine gelince.
   Vurgu yalnizca renk koyulasmasiyla veriliyor. */
.fcol .fcontact a,
.fcol .fcontact a:hover,
.fcol .fcontact a:focus { text-decoration: none; }
.fcol .fcontact a:hover { color: var(--ink); }

/* WhatsApp satiri: ikon ile yazinin dikey hizasi icin yine inline-flex. */
.fcol .fcontact a.walink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Uzun satir tasmasin: "WhatsApp +90 ..." tek parca kutu olmaktan cikiyor. */
  flex-wrap: wrap;
}

/* Bulten kutusundaki ok dugmesi: .fcol a onu da blok yapiyordu. */
.fcol .field a.iconbtn {
  display: grid;
  place-items: center;
  padding: 0;
  width: 40px;
  height: 40px;
  flex: none;
}

/* Alt alandaki sosyal baglantilar .linkline; .fcol a onlari da blok
   yapiyor ve alt cizgi tum genisligi kapliyordu. */
.fcol .fsocial a.linkline {
  display: inline-flex;
  padding-bottom: 5px;
}

/* ------------------------------------------------------------------ arama
   searchfield flex; gonder dugmesi buyuk yazi alanini ezmesin diye
   kucultulmuyor, sadece daralmasi engelleniyor. */
.ksearch .searchfield { display: flex; align-items: center; gap: 12px; }
.ksearch .searchfield input { flex: 1; min-width: 0; }
.ksearch .searchfield button { flex: none; }

/* ------------------------------------------------- kullanim alanlari izgarasi
   atelier.css'te ince cizgiler su teknikle yapiliyor: KAP gri zeminli,
   ogeler arasi 1px bosluk birakiliyor ve gri o bosluklardan siziyor.
   4 ogede kusursuz calisiyor.

   Ancak oge sayisi kolon sayisinin kati degilse (2 ya da 3 oge / 4 kolon,
   ya da mobilde 3 oge / 2 kolon) BOS hucreler kaliyor ve kabin gri zemini
   koca bir blok olarak goruniyor.

   Kolon sayisini oge sayisina esitlemek yetmiyor: mobil ve masaustu kolon
   sayilari farkli, her ikisinde de bos hucre cikabiliyor. Bu yuzden gri
   kaptan alinip OGELERE veriliyor - boyle boş hucre hic gorunmuyor ve
   cozum oge sayisindan bagimsiz.

   Tek gorunur fark: blogun dis kenarinda da ince cizgi olusuyor. Kasitli;
   bolumu cerceveliyor ve tasarima aykiri durmuyor. */
.usecases { background: transparent; }
.usecase { box-shadow: 0 0 0 1px var(--line); }

/* Kolon sayisi OGE SAYISINA esitleniyor. atelier.css masaustunde sabit
   4 kolon veriyor; 2 ogede kartlar solda kalip sagda kocaman bosluk
   biraktigi icin "siginti" gibi duruyordu. Artik kac oge varsa satiri
   birlikte dolduruyorlar.

   Tek oge tam genislige yayilmiyor, 420px'de duruyor: tek bir kartin
   sayfa boyunca uzamasi garip duruyor. */
.usecases.k-1 { grid-template-columns: minmax(0, 420px); }

@media (min-width: 780px) {
  .usecases.k-2 { grid-template-columns: repeat(2, 1fr); }
  .usecases.k-3 { grid-template-columns: repeat(3, 1fr); }
  /* 4 ve uzeri: atelier.css'teki 4 kolon gecerli kaliyor. */
}
/* ===========================================================================
   RENK ISARETLERI ARTIK GORSEL

   Musteri renk kartelasina hex girmek istemedi; renkler yalnizca isimden
   olusuyor. Bu yuzden hem liste kartinin altindaki noktalar hem detay
   sayfasindaki renk cipleri o rengin GORSELINI gosteriyor.

   Iki secici de atelier.css'te ZATEN kare/yuvarlak kutu olarak tanimli
   (aspect-ratio ya da sabit olcu + overflow:hidden). Eksik olan tek sey,
   icine giren gercek <img> icin object-fit kurali. atelier.css demo ile
   birebir kalsin diye o kural burada.
   =========================================================================== */

/* Liste karti: .card__dots .dot zaten 16px, yuvarlak, overflow:hidden. */
.card__dots .dot--img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Detay sayfasi renk cipi: .swatch__chip zaten aspect-ratio:1, overflow:hidden.
   Eskiden inline "background: hex" ile duz renk boyaniyordu. */
.swatch__chip img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}