/* =========================================================
   Hizmet Bölgeleri (Liste) Sayfası
   File: assets/css/pages/bolgeler.css
   Prefix: ak-
========================================================= */

:root{
  --ak-bol-bg: rgba(12,22,38,.55);
  --ak-bol-panel: rgba(12,22,38,.72);
  --ak-bol-stroke: rgba(120,210,255,.18);
  --ak-bol-stroke-2: rgba(120,210,255,.32);
  --ak-bol-text: rgba(235,246,255,.92);
  --ak-bol-muted: rgba(200,225,245,.72);
  --ak-bol-accent: rgba(120,210,255,.95);
  --ak-bol-shadow: 0 14px 40px rgba(0,0,0,.35);
  --ak-bol-radius: 18px;
}

/* Wrapper: regions.css etkisini izole etmek için */
.ak-bolgeler{
  position: relative;
  padding: clamp(18px, 3vw, 34px) 0 64px;
}

.ak-bolgeler .ak-container{
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* Üst intro */
.ak-bolgelerTop{
  border: 1px solid var(--ak-bol-stroke);
  background: linear-gradient(180deg, rgba(10,18,30,.64), rgba(10,18,30,.28));
  border-radius: calc(var(--ak-bol-radius) + 6px);
  box-shadow: var(--ak-bol-shadow);
  overflow: hidden;
}

.ak-bolgelerTop__inner{
  padding: clamp(16px, 2.4vw, 26px);
}

.ak-bolgelerBadge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ak-bol-stroke);
  background: rgba(12,22,38,.55);
  color: var(--ak-bol-accent);
  font-weight: 650;
  font-size: 13px;
}

.ak-bolgelerTitle{
  margin: 12px 0 10px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  color: var(--ak-bol-text);
  letter-spacing: -.02em;
}

.ak-bolgelerLead{
  margin: 0;
  color: var(--ak-bol-muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 92ch;
}

/* Filtre bar */
.ak-bolgelerFilters{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--ak-bol-stroke);
  background: rgba(12,22,38,.42);
}

@media (max-width: 640px){
  .ak-bolgelerFilters{ grid-template-columns: 1fr; }
}

.ak-bolgelerSearch{
  display:flex;
  gap:10px;
  align-items:center;
}

.ak-bolgelerSearch__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: radial-gradient(120px 60px at 30% 20%, rgba(120,210,255,.22), rgba(255,255,255,0));
  border: 1px solid rgba(120,210,255,.18);
  color: rgba(120,210,255,.95);
  flex: 0 0 auto;
}

.ak-bolgelerSearch input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120,210,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--ak-bol-text);
  outline: none;
}

.ak-bolgelerSearch input::placeholder{
  color: rgba(200,225,245,.52);
}

.ak-bolgelerJump{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--ak-bol-stroke-2);
  background: linear-gradient(135deg, rgba(120,210,255,.26), rgba(120,210,255,.08));
  color: var(--ak-bol-text);
  text-decoration: none;
  font-weight: 750;
  font-size: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}
.ak-bolgelerJump:hover{
  transform: translateY(-1px);
  border-color: rgba(120,210,255,.55);
  background: linear-gradient(135deg, rgba(120,210,255,.32), rgba(120,210,255,.10));
}

/* Sayfa grid */
.ak-bolgelerGrid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr .42fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px){
  .ak-bolgelerGrid{ grid-template-columns: 1fr; }
}

/* Liste kartları */
.ak-bolgelerList{
  border: 1px solid var(--ak-bol-stroke);
  background: rgba(12,22,38,.42);
  border-radius: var(--ak-bol-radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.ak-bolgelerList__head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.ak-bolgelerList__h2{
  margin: 0;
  font-size: 16px;
  color: var(--ak-bol-text);
  letter-spacing: -.01em;
}

.ak-bolgelerList__count{
  font-size: 13px;
  opacity: .75;
}

.ak-bolgelerItems{
  display: grid;
}

.ak-bolgeItem{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.ak-bolgeItem:first-child{ border-top: 0; }

.ak-bolgeItem__icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: radial-gradient(120px 60px at 30% 20%, rgba(120,210,255,.22), rgba(255,255,255,0));
  border: 1px solid rgba(120,210,255,.18);
  color: rgba(120,210,255,.95);
}

.ak-bolgeItem__title{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 820;
  color: var(--ak-bol-text);
}

.ak-bolgeItem__desc{
  margin: 0;
  color: var(--ak-bol-muted);
  font-size: 14px;
  line-height: 1.65;
}

.ak-bolgeItem__actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ak-bolgeLink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  color: rgba(120,210,255,.95);
  text-decoration: none;
}

.ak-bolgeLink:hover{ opacity: .92; }

/* Sağ sticky iletişim */
.ak-bolgelerAside{
  position: sticky;
  top: 90px;
}

@media (max-width: 980px){
  .ak-bolgelerAside{ position: static; }
}

.ak-bolgelerAside__box{
  border: 1px solid var(--ak-bol-stroke);
  background: rgba(12,22,38,.55);
  border-radius: var(--ak-bol-radius);
  padding: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.ak-bolgelerAside__h3{
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--ak-bol-text);
}

.ak-bolgelerAside__meta{
  margin: 0 0 12px;
  color: var(--ak-bol-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.ak-bolgelerAside__cta{
  display: grid;
  gap: 10px;
}

/* global .ak-btn varsa kullan, yoksa küçük fallback */
.ak-bolgeler .ak-btn{
  width: 100%;
  justify-content: center;
}

/* küçük not */
.ak-bolgelerNote{
  margin-top: 12px;
  color: rgba(200,225,245,.72);
  font-size: 13.5px;
  line-height: 1.65;
  border-left: 3px solid rgba(120,210,255,.35);
  padding-left: 12px;
}