/* ===== İstanbul İL Sayfası — Ek Stiller ===== */
/* Base: styles.css yüklü olmalı */

/* --- Breadcrumb --- */
.breadcrumb{padding:14px 0; font-size:13px; color:var(--muted)}
.breadcrumb ol{display:flex; gap:8px; align-items:center; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.breadcrumb li{display:inline-flex; align-items:center; gap:8px}
.breadcrumb a{color:var(--muted); font-weight:500; transition:color .2s; text-decoration:none}
.breadcrumb a:hover{color:var(--teal-500)}
.breadcrumb__sep{color:var(--border); font-size:11px}
.breadcrumb__current{color:var(--navy-900); font-weight:600}

/* --- Hero Override: 2-column (no illustration) --- */
.hero--page .hero__inner{grid-template-columns:1.2fr 1fr; align-items:start}
.hero--compact{padding:32px 0 24px}
.hero--compact .hero__bg{opacity:.5}

/* --- Districts Grid (4×2) --- */
.districts{padding:64px 0}
.districts__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px}
.district-card{display:flex; flex-direction:column; gap:8px; padding:18px 16px; background:#fff; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s; text-decoration:none; color:inherit}
.district-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--teal-400)}
.district-card:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px; border-color:var(--teal-400)}
.district-card__ic{width:40px; height:40px; border-radius:12px; background:var(--teal-50); color:var(--teal-500); display:inline-flex !important; align-items:center; justify-content:center; flex:none}
.district-card__ic .ic{width:18px; height:18px; flex:none; display:inline-block !important}
.district-card__name{font-size:15px; font-weight:700; color:var(--navy-900)}
.district-card__link{font-size:12px; font-weight:600; color:var(--teal-500); display:inline-flex; align-items:center; gap:4px}
.district-card__link .ic{width:12px; height:12px; flex:none; display:inline-block !important}

/* --- Blog Cards (3 kart, ikon üstlü) --- */
.blog-il{padding:64px 0}
.blog-il__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px}
.blog-il-card{background:#fff; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .25s, box-shadow .25s; text-decoration:none; color:inherit; display:block}
.blog-il-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.blog-il-card:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px}
.blog-il-card__visual{width:100%; height:160px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.blog-il-card__visual--blue{background:linear-gradient(135deg,#E6F6F6,#CFE7E9)}
.blog-il-card__visual--rose{background:linear-gradient(135deg,#FDE8E8,#FECACA)}
.blog-il-card__visual--amber{background:linear-gradient(135deg,#FEF3C7,#FDE68A)}
.blog-il-card__visual .ic{width:48px; height:48px; opacity:.5}
.blog-il-card__body{padding:16px}
.blog-il-card__title{font-size:14px; font-weight:700; color:var(--navy-900); margin-bottom:6px; line-height:1.4}
.blog-il-card__desc{font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:10px}
.blog-il-card__link{font-size:13px; font-weight:600; color:var(--teal-500); display:inline-flex; align-items:center; gap:4px}
.blog-il-card__link .ic{width:12px; height:12px; flex:none; display:inline-block !important}

/* --- FAQ 2-Column --- */
.faq-il{padding:64px 0}
.faq-il__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 24px; margin-top:32px}
.faq-il__item{border-bottom:1px solid var(--border)}
.faq-il__q{display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:14px; font-weight:600; color:var(--navy-900); cursor:pointer; background:none; width:100%; text-align:left; gap:12px; border:none; font-family:inherit}
.faq-il__q .ic{width:18px; height:18px; flex:none; color:var(--muted); transition:color .2s, transform .3s; display:inline-block !important}
.faq-il__q:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px; border-radius:4px}
.faq-il__item.is-open .faq-il__q .ic{color:var(--teal-500); transform:rotate(45deg)}
.faq-il__a{overflow:hidden; max-height:0; transition:max-height .35s ease}
.faq-il__item.is-open .faq-il__a{max-height:300px; padding-bottom:16px}
.faq-il__a p{font-size:13.5px; color:var(--muted); line-height:1.6}

/* --- İL Page Responsive --- */
@media(max-width:1100px){
  .hero--page .hero__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero--page .hero__inner{grid-template-columns:1fr}
  .hero--page .hero__form{order:2}
  .districts__grid{grid-template-columns:repeat(2,1fr)}
  .blog-il__grid{display:flex; overflow-x:auto; overflow-y:hidden; gap:14px; scroll-snap-type:x mandatory; scrollbar-width:none; padding:8px 4px 12px; cursor:grab; touch-action:pan-x; max-width:100%}
  .blog-il__grid.is-grabbing{cursor:grabbing}
  .blog-il__grid::-webkit-scrollbar{display:none}
  .blog-il-card{min-width:260px; flex:none; scroll-snap-align:start}
  .faq-il__grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .districts__grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .blog-il-card{min-width:240px}
  .district-card__name{font-size:14px}
}
@media(max-width:375px){
  .districts__grid{gap:10px}
  .district-card{padding:14px 12px}
  .blog-il-card{min-width:220px}
  .faq-il__q{font-size:13px; padding:14px 0}
}