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

/* Breadcrumb styles unified in styles.css */

/* --- Hero Override: 2-column (no illustration) --- */
.hero--page .hero__inner{grid-template-columns:1.2fr 1fr; align-items:start}

/* --- Hero Eyebrow Pill --- */
.hero__eyebrow{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:var(--teal-50); color:var(--teal-600); font-size:12px; font-weight:700; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px}
.hero__eyebrow .ic{width:14px; height:14px; flex:none; display:inline-block !important}

/* --- Form Location Tag --- */
.form__loc-tag{display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--teal-50); border-radius:10px; font-size:13px; font-weight:600; color:var(--teal-600); width:100%; box-sizing:border-box; margin-bottom:12px}
.form__loc-tag .ic{width:14px; height:14px; flex:none; display:inline-block !important}

/* --- Districts/Services Grid --- */
.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}

/* --- Nearby Bölgeler Grid (yeniden yapılandı) --- */
.nearby{padding:64px 0; background:var(--bg); overflow:clip}
.nearby__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px}
.nearby__grid > *{min-width:0}
.nearby-card{display:flex; align-items:center; gap:14px; padding:18px 18px; background:#fff; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:transform .25s, box-shadow .25s, border-color .25s}
.nearby-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--teal-400)}
.nearby-card:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px; border-color:var(--teal-400)}
.nearby-card__ic{width:46px; height:46px; min-width:46px; border-radius:12px; background:var(--teal-50); color:var(--teal-500); display:inline-flex !important; align-items:center; justify-content:center; flex:none; transition:background .25s, color .25s}
.nearby-card:hover .nearby-card__ic{background:var(--teal-500); color:#fff}
.nearby-card__ic .ic{width:20px; height:20px; flex:none; display:inline-block !important}
.nearby-card__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.nearby-card__name{font-size:15px; font-weight:700; color:var(--navy-900); line-height:1.2}
.nearby-card__sub{font-size:12px; color:var(--muted); line-height:1.3}
.nearby-card__link{font-size:12px; font-weight:600; color:var(--teal-500); display:inline-flex; align-items:center; gap:4px; flex:none; white-space:nowrap}
.nearby-card__link .ic{width:12px; height:12px; flex:none; display:inline-block !important; transition:transform .2s}
.nearby-card:hover .nearby-card__link .ic{transform:translateX(3px)}

/* --- Blog Cards (4 kart, ikon üstlü) --- */
.blog-il{padding:64px 0}
.blog-il__grid{display:grid; grid-template-columns:repeat(4,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--teal{background:linear-gradient(135deg,#CCFBF1,#99F6E4)}
.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ÇE Page Responsive --- */
@media(max-width:1100px){
  .hero--page .hero__inner{grid-template-columns:1fr 1fr}
  .blog-il__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero--page .hero__inner{grid-template-columns:1fr; gap:20px; min-height:auto}
  .hero--page .hero__copy{order:0}
  .hero--page .hero__media{display:none !important}
  .hero--page .hero__form{order:2; max-width:100%; margin:0}
  .hero--page .hero__ctas{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .hero--page .hero__ctas .btn{min-width:0; padding:13px 12px; font-size:13px; white-space:nowrap; justify-content:center}
  .hero--page .hero__ctas .btn--navy{grid-column:1 / -1}
  .districts__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .district-card{padding:14px 12px; gap:6px}
  .district-card__name{font-size:14px}
  .blog-il__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .blog-il-card{min-width:0}
  .blog-il-card__visual{height:120px}
  .blog-il-card__visual .ic{width:36px; height:36px}
  .blog-il-card__body{padding:12px}
  .blog-il-card__title{font-size:13px; line-height:1.35}
  .blog-il-card__desc{display:none}
  .blog-il-card__link{font-size:12px}
  .faq-il__grid{grid-template-columns:1fr}
  .nearby__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
}
@media(max-width:700px){
  .nearby__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .nearby-card{padding:12px; gap:10px; min-width:0}
  .nearby-card__ic{width:38px; height:38px; min-width:38px; border-radius:10px}
  .nearby-card__ic .ic{width:18px; height:18px}
  .nearby-card__name{font-size:13px}
  .nearby-card__sub{font-size:11px}
  .nearby-card__link{font-size:11px; gap:3px}
  .nearby-card__link .ic{width:10px; height:10px}
}
@media(max-width:560px){
  .hero--page .hero__ctas .btn{padding:12px 10px; font-size:12px; gap:4px}
  .hero--page .hero__ctas{gap:6px}
  .districts__grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .district-card{padding:14px 12px; gap:6px}
  .district-card__name{font-size:14px}
  .district-card__ic{width:34px; height:34px; border-radius:10px}
  .district-card__ic .ic{width:16px; height:16px}
  .blog-il-card__visual{height:110px}
  .blog-il-card__body{padding:10px}
}
@media(max-width:375px){
  .hero--page .hero__ctas .btn{padding:11px 8px; font-size:11px}
  .hero--page .hero__ctas{gap:6px}
  .districts__grid{gap:8px}
  .district-card{padding:12px 10px; gap:5px}
  .district-card__name{font-size:13px}
  .district-card__link{font-size:11px}
  .blog-il__grid{gap:10px}
  .blog-il-card__visual{height:96px}
  .blog-il-card__visual .ic{width:30px; height:30px}
  .blog-il-card__title{font-size:12.5px}
  .faq-il__q{font-size:13px; padding:14px 0}
  .nearby__grid{gap:8px}
  .nearby-card{padding:10px; gap:8px}
  .nearby-card__ic{width:34px; height:34px; min-width:34px}
  .nearby-card__ic .ic{width:16px; height:16px}
  .nearby-card__sub{display:none}
  .nearby-card__link{font-size:10px}
}