/* ============================================================
   ÇEVİKOĞLU LOJİSTİK — regions.css
   Bölgeler hub (şehir/ülke ızgarası) + bölge detay (içerik + harita).
   ============================================================ */

/* ---- Hub: şehir / ülke kart ızgarası ---- */
.region-cards{display:grid; grid-template-columns:1fr; gap:var(--space-md);}
@media(min-width:380px){.region-cards{grid-template-columns:repeat(2,1fr);}}
@media(min-width:600px){.region-cards{grid-template-columns:repeat(3,1fr);}}
@media(min-width:992px){.region-cards{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1200px){.region-cards--wide{grid-template-columns:repeat(5,1fr);}}

.region-link{display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-width:0; overflow-wrap:break-word; padding:1rem 1.2rem; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); font-family:var(--font-heading); font-weight:600; font-size:.98rem; color:var(--color-heading); box-shadow:var(--shadow-sm); transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),color var(--transition);}
.region-link:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-primary); color:var(--color-primary-dark);}
.region-link i{color:var(--color-primary); transition:transform var(--transition-fast);}
.region-link:hover i{transform:translateX(3px);}

/* ---- Detay: içerik + harita ---- */
.region-grid{display:grid; gap:var(--space-xl); align-items:start;}
@media(min-width:992px){.region-grid{grid-template-columns:1.1fr .9fr;} .region-map{position:sticky; top:96px;}}

.region-map{min-height:320px;}
.region-map iframe{width:100%; height:100%; min-height:360px; border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:block;}

/* ---- Detay: yerel bilgi kutusu ---- */
.region-facts{display:grid; gap:var(--space-md); grid-template-columns:1fr;}
@media(min-width:600px){.region-facts{grid-template-columns:repeat(2,1fr);}}
.region-fact{display:flex; gap:.8rem; align-items:flex-start; padding:var(--space-md); background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);}
.region-fact i{flex:0 0 auto; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:rgba(201,154,59,.12); color:var(--color-primary-dark);}
.region-fact strong{display:block; font-family:var(--font-heading); font-size:.95rem; margin-bottom:.15rem;}
.region-fact span{font-size:.9rem; color:var(--color-text-soft);}