/* =====================================================
   Ofisimo Belediyesi - Ana Stil Dosyası
   ===================================================== */

:root{
    --lacivert:#0b3a7a;
    --lacivert-koyu:#072a5c;
    --lacivert-acik:#12509d;
    --mavi:#1668c3;
    --mavi-zemin:#eaf2fb;
    --yesil:#22a24c;
    --yesil-koyu:#1b8b40;
    --metin:#33465f;
    --gri:#6b7f99;
    --zemin:#f3f7fc;
    --kenar:#e4ecf6;
    --beyaz:#fff;
    --golge:0 10px 30px rgba(11,58,122,.08);
    --golge-guclu:0 18px 40px rgba(11,58,122,.16);
    --r:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{
    margin:0;
    font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    font-size:15px;
    line-height:1.65;
    color:var(--metin);
    background:var(--beyaz);
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--mavi);text-decoration:none;transition:.2s}
a:hover{color:var(--lacivert)}
h1,h2,h3,h4,h5{margin:0 0 12px;color:var(--lacivert);font-weight:700;line-height:1.25}
p{margin:0 0 14px}
ul{margin:0;padding:0}
.kap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.gizle{display:none !important}

/* ---------- Butonlar ---------- */
.btn{
    display:inline-flex;align-items:center;gap:8px;justify-content:center;
    padding:12px 22px;border-radius:8px;border:0;cursor:pointer;
    font-size:13px;font-weight:600;letter-spacing:.3px;transition:.25s;
    text-transform:uppercase;
}
.btn-lacivert{background:var(--lacivert);color:#fff}
.btn-lacivert:hover{background:var(--lacivert-koyu);color:#fff;transform:translateY(-2px)}
.btn-yesil{background:var(--yesil);color:#fff}
.btn-yesil:hover{background:var(--yesil-koyu);color:#fff;transform:translateY(-2px)}
.btn-mavi{background:var(--mavi);color:#fff}
.btn-mavi:hover{background:var(--lacivert);color:#fff;transform:translateY(-2px)}
.btn-beyaz{background:#fff;color:var(--lacivert)}
.btn-beyaz:hover{background:#f0f5fc;color:var(--lacivert-koyu)}
.btn-cizgi{background:transparent;border:1px solid var(--kenar);color:var(--lacivert)}
.btn-cizgi:hover{border-color:var(--mavi);color:var(--mavi)}
.btn-kucuk{padding:8px 14px;font-size:11px;border-radius:6px}

/* =====================================================
   ÜST BAR
   ===================================================== */
.ust-bar{background:var(--lacivert-koyu);color:rgba(255,255,255,.8);font-size:12.5px}
.ust-bar a{color:rgba(255,255,255,.8)}
.ust-bar a:hover{color:#fff}
.ust-bar .kap{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px;flex-wrap:wrap}
.ust-sol,.ust-sag{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ust-bar i{color:var(--yesil);font-size:14px;vertical-align:middle;margin-right:5px}
.ust-sosyal{display:flex;gap:12px;margin-left:6px}
.ust-sosyal a{font-size:14px;opacity:.85}
.ust-sosyal a:hover{opacity:1}
.ust-ayrac{width:1px;height:16px;background:rgba(255,255,255,.18)}

/* =====================================================
   HEADER
   ===================================================== */
.ana-header{background:#fff;border-bottom:1px solid var(--kenar);position:relative;z-index:60}
.ana-header.sabit{position:sticky;top:0;box-shadow:0 4px 20px rgba(11,58,122,.08)}
.header-ic{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:52px;width:auto}
.logo-yazi{display:flex;flex-direction:column;line-height:1.05}
.logo-yazi strong{font-size:21px;color:var(--lacivert);font-weight:800;letter-spacing:.5px}
.logo-yazi span{font-size:11px;color:var(--gri);letter-spacing:3.4px;font-weight:600}

.ana-menu{display:flex;align-items:center;gap:4px;list-style:none}
.ana-menu>li{position:relative}
.ana-menu>li>a{
    display:flex;align-items:center;gap:5px;
    padding:30px 13px;font-size:13px;font-weight:600;color:var(--lacivert);
    text-transform:uppercase;letter-spacing:.2px;position:relative;
}
.ana-menu>li>a:after{
    content:'';position:absolute;left:13px;right:13px;bottom:22px;height:3px;border-radius:3px;
    background:var(--mavi);transform:scaleX(0);transition:.25s;
}
.ana-menu>li:hover>a,.ana-menu>li.aktif>a{color:var(--mavi)}
.ana-menu>li:hover>a:after,.ana-menu>li.aktif>a:after{transform:scaleX(1)}
.ana-menu .ok{font-size:11px;opacity:.6}
.alt-menu{
    position:absolute;top:100%;left:0;min-width:238px;background:#fff;list-style:none;
    border-radius:0 0 10px 10px;box-shadow:var(--golge-guclu);padding:8px 0;
    opacity:0;visibility:hidden;transform:translateY(12px);transition:.22s;border-top:3px solid var(--mavi);
}
.ana-menu>li:hover .alt-menu{opacity:1;visibility:visible;transform:translateY(0)}
.alt-menu a{display:block;padding:9px 18px;font-size:13.5px;color:var(--metin);font-weight:500}
.alt-menu a:hover{background:var(--mavi-zemin);color:var(--mavi);padding-left:23px}

.header-arac{display:flex;align-items:center;gap:14px}
.arama-ac{background:none;border:0;font-size:19px;color:var(--lacivert);cursor:pointer;padding:4px}
.arama-ac:hover{color:var(--mavi)}
.menu-ac{display:none;background:none;border:0;font-size:26px;color:var(--lacivert);cursor:pointer}

/* arama kutusu */
.arama-katman{
    position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--kenar);
    box-shadow:var(--golge);padding:18px 0;display:none;
}
.arama-katman.acik{display:block}
.arama-katman form{display:flex;gap:10px;max-width:640px;margin:0 auto}
.arama-katman input{
    flex:1;padding:12px 16px;border:1px solid var(--kenar);border-radius:8px;font-size:14px;font-family:inherit;
}
.arama-katman input:focus{outline:none;border-color:var(--mavi)}

/* mobil menü */
.mobil-menu{
    position:fixed;top:0;right:-320px;width:300px;height:100%;background:#fff;z-index:200;
    box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:.3s;overflow-y:auto;padding:18px 0 40px;
}
.mobil-menu.acik{right:0}
.mobil-ust{display:flex;align-items:center;justify-content:space-between;padding:0 18px 14px;border-bottom:1px solid var(--kenar)}
.mobil-kapat{background:none;border:0;font-size:26px;color:var(--lacivert);cursor:pointer;line-height:1}
.mobil-menu ul{list-style:none}
.mobil-menu>ul>li{border-bottom:1px solid #f0f4f9}
.mobil-menu>ul>li>a{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;font-size:14px;font-weight:600;color:var(--lacivert);text-transform:uppercase}
.mobil-menu .alt{display:none;background:#f7fafd}
.mobil-menu .alt.acik{display:block}
.mobil-menu .alt a{display:block;padding:10px 30px;font-size:13.5px;color:var(--metin)}
.mobil-menu .mobil-btn{margin:16px 18px 0}
.mobil-menu .mobil-btn .btn{width:100%}
.perde{position:fixed;inset:0;background:rgba(7,25,55,.45);z-index:190;opacity:0;visibility:hidden;transition:.3s}
.perde.acik{opacity:1;visibility:visible}

/* =====================================================
   HERO SLIDER
   ===================================================== */
.hero{position:relative;background:linear-gradient(180deg,#e9f1fa 0%,#f5f9fd 100%);overflow:hidden}
.hero-slayt{display:none;position:relative}
.hero-slayt.aktif{display:block;animation:soluk .7s ease}
@keyframes soluk{from{opacity:0}to{opacity:1}}
.hero-ic{position:relative;display:flex;align-items:center;min-height:430px;padding:56px 0 96px}
.hero-yazi{width:50%;position:relative;z-index:3}
.hero-yazi h1{font-size:44px;line-height:1.18;font-weight:800;color:var(--lacivert);margin-bottom:20px;max-width:520px}
.hero-yazi p{font-size:15px;color:var(--metin);max-width:470px;margin-bottom:26px}
.hero-butonlar{display:flex;gap:12px;flex-wrap:wrap}
.hero-gorsel{
    position:absolute;right:-40px;top:0;bottom:0;width:58%;
    background-size:cover;background-position:center;
    clip-path:ellipse(92% 145% at 100% 50%);
}
.hero-gorsel:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(233,241,250,.55),transparent 38%)}
.hero-oklar{position:absolute;right:26px;bottom:120px;z-index:5;display:flex;align-items:center;gap:10px}
.hero-nokta{display:flex;gap:6px;align-items:center}
.hero-nokta span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.2s}
.hero-nokta span.aktif{background:#fff;width:22px;border-radius:5px}
.hero-sayac{color:#fff;font-size:13px;font-weight:600;margin-left:6px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.yuvarlak-btn{
    width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.9);color:var(--lacivert);font-size:17px;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:.2s;
}
.yuvarlak-btn:hover{background:#fff;color:var(--mavi);transform:scale(1.06)}

/* =====================================================
   HIZLI HİZMET ŞERİDİ
   ===================================================== */
.hizli-alan{position:relative;z-index:20;margin-top:-72px}
.hizli-serit{
    background:linear-gradient(120deg,var(--lacivert) 0%,var(--lacivert-acik) 100%);
    border-radius:var(--r);box-shadow:0 18px 38px rgba(11,58,122,.28);
    display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden;
}
.hizli-oge{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;
    padding:20px 8px 18px;text-align:center;color:#fff;position:relative;transition:.25s;min-height:104px;
}
.hizli-oge+.hizli-oge:before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.16)}
.hizli-oge i{font-size:25px;color:#fff;opacity:.95}
.hizli-oge span{font-size:11.5px;font-weight:600;line-height:1.35;color:#fff;letter-spacing:.1px}
.hizli-oge:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-3px)}

/* =====================================================
   BÖLÜM BAŞLIKLARI
   ===================================================== */
.bolum{padding:52px 0}
.bolum-ince{padding:34px 0}
.bolum-baslik{text-align:center;margin-bottom:34px}
.bolum-baslik h2{font-size:26px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-bottom:12px}
.bolum-baslik .cizgi{width:64px;height:4px;background:var(--mavi);border-radius:3px;margin:0 auto;position:relative}
.bolum-baslik .cizgi:after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:26px;height:4px;border-radius:3px;background:var(--yesil)}
.bolum-baslik p{margin-top:18px;color:var(--gri);max-width:620px;margin-left:auto;margin-right:auto}

.kart-baslik{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.kart-baslik h3{font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0}

/* =====================================================
   DUYURULAR + BANNER
   ===================================================== */
.duyuru-banner{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:stretch}
.duyuru-kart{background:#fff;border:1px solid var(--kenar);border-radius:var(--r);padding:20px;height:100%}
.duyuru-liste{list-style:none}
.duyuru-liste li{display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed var(--kenar)}
.duyuru-liste li:last-child{border-bottom:0;padding-bottom:0}
.tarih-kutu{
    flex-shrink:0;width:52px;text-align:center;background:var(--mavi-zemin);border-radius:8px;padding:7px 4px;line-height:1.15;
}
.tarih-kutu b{display:block;font-size:19px;font-weight:800;color:var(--lacivert)}
.tarih-kutu span{display:block;font-size:11px;color:var(--gri);font-weight:600}
.tarih-kutu small{display:block;font-size:10px;color:var(--gri)}
.duyuru-liste h4{font-size:13.5px;font-weight:600;margin:0 0 3px;color:var(--lacivert);line-height:1.4}
.duyuru-liste a:hover h4{color:var(--mavi)}
.duyuru-liste p{font-size:12px;color:var(--gri);margin:0}

.banner-slider{position:relative;border-radius:var(--r);overflow:hidden;min-height:255px;background:var(--lacivert)}
.banner-slayt{
    display:none;min-height:255px;height:100%;background-size:cover;background-position:center;position:relative;
}
.banner-slayt.aktif{display:block;animation:soluk .6s ease}
.banner-slayt:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,32,72,.82) 0%,rgba(6,32,72,.45) 55%,rgba(6,32,72,.12) 100%)}
.banner-ic{position:relative;z-index:2;padding:38px 36px;max-width:60%}
.banner-ic h3{color:#fff;font-size:31px;font-weight:800;line-height:1.15;margin-bottom:12px;text-transform:uppercase}
.banner-ic p{color:rgba(255,255,255,.9);font-size:14.5px;margin-bottom:20px;max-width:330px}
.banner-oklar{position:absolute;right:20px;bottom:20px;z-index:4;display:flex;gap:10px}

/* =====================================================
   HİZMET KARTLARI
   ===================================================== */
.hizmet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.hizmet-kart{
    background:#fff;border:1px solid var(--kenar);border-radius:10px;padding:26px 14px 22px;
    text-align:center;transition:.25s;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:130px;
}
.hizmet-kart i{font-size:33px;line-height:1}
.hizmet-kart span{font-size:13.5px;font-weight:600;color:var(--lacivert);line-height:1.4}
.hizmet-kart:hover{border-color:var(--mavi);box-shadow:var(--golge);transform:translateY(-5px)}

/* =====================================================
   PROJELER
   ===================================================== */
.proje-panel{background:var(--zemin);border-radius:14px;padding:24px}
.proje-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proje-kart{background:transparent;border-radius:10px;overflow:hidden;display:block}
.proje-gorsel{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:16/10;background:#dbe6f3}
.proje-gorsel img{width:100%;height:100%;object-fit:cover;transition:.5s}
.proje-kart:hover .proje-gorsel img{transform:scale(1.07)}
.proje-etiket{
    position:absolute;left:10px;top:10px;background:rgba(11,58,122,.9);color:#fff;
    font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px;
}
.proje-kart h4{font-size:14.5px;font-weight:700;margin:13px 0 3px;color:var(--lacivert)}
.proje-kart p{font-size:12.5px;color:var(--gri);margin:0}
.proje-kart:hover h4{color:var(--mavi)}

/* =====================================================
   İSTATİSTİK ŞERİDİ
   ===================================================== */
.istatistik{background:linear-gradient(120deg,var(--lacivert-koyu),var(--lacivert));padding:34px 0;margin:52px 0}
.istatistik-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.istatistik-oge{text-align:center;color:#fff;position:relative;padding:6px 10px}
.istatistik-oge+.istatistik-oge:before{content:'';position:absolute;left:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.16)}
.istatistik-oge i{font-size:24px;opacity:.85;display:block;margin-bottom:8px}
.istatistik-oge b{display:block;font-size:26px;font-weight:800;line-height:1.2}
.istatistik-oge span{font-size:12.5px;opacity:.78}

/* =====================================================
   BAŞKAN + ETKİNLİK
   ===================================================== */
.baskan-etkinlik{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:start}
.baskan-kart{display:flex;gap:22px;align-items:flex-start}
.baskan-foto{width:210px;flex-shrink:0;border-radius:10px;overflow:hidden;background:#e6eef8}
.baskan-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/3.4}
.baskan-metin h4{font-size:16px;margin-bottom:10px}
.baskan-metin p{font-size:13.5px;color:var(--metin);margin-bottom:14px}
.baskan-imza{font-size:14px;font-weight:700;color:var(--lacivert);margin:0}
.baskan-unvan{font-size:12.5px;color:var(--gri);margin:0 0 14px}

.etkinlik-kart{background:#fff;border:1px solid var(--kenar);border-radius:var(--r);padding:20px}
.etkinlik-liste{list-style:none}
.etkinlik-liste li{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--kenar)}
.etkinlik-liste li:last-child{border-bottom:0;padding-bottom:0}
.etkinlik-liste h4{font-size:13.5px;margin:0 0 3px;font-weight:600;color:var(--lacivert)}
.etkinlik-liste p{font-size:12px;color:var(--gri);margin:0}
.etkinlik-liste a:hover h4{color:var(--mavi)}

/* =====================================================
   E-BELEDİYE CTA
   ===================================================== */
.cta-serit{
    background:linear-gradient(100deg,var(--lacivert) 0%,var(--mavi) 45%,var(--yesil) 100%);
    border-radius:var(--r);padding:26px 30px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
    box-shadow:var(--golge);
}
.cta-sol{display:flex;align-items:center;gap:16px;flex:1;min-width:280px}
.cta-sol i{font-size:36px;color:#fff;opacity:.9}
.cta-sol h3{color:#fff;font-size:20px;margin:0;font-weight:700;line-height:1.3}
.cta-serit p{color:rgba(255,255,255,.92);font-size:13.5px;margin:0;max-width:340px;flex:1;min-width:240px}

/* =====================================================
   FOOTER
   ===================================================== */
.footer{background:var(--lacivert-koyu);color:rgba(255,255,255,.72);padding:52px 0 0;margin-top:52px;font-size:13.5px}
.footer h4{color:#fff;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:18px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:28px}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:#fff}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-logo img{height:46px}
.footer-logo strong{color:#fff;font-size:19px;font-weight:800;display:block;line-height:1.05}
.footer-logo span{font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.6);font-weight:600}
.footer-liste{list-style:none}
.footer-liste li{margin-bottom:9px}
.footer-iletisim{list-style:none}
.footer-iletisim li{display:flex;gap:10px;margin-bottom:13px;align-items:flex-start}
.footer-iletisim i{color:var(--yesil);font-size:15px;margin-top:3px}
.footer-sosyal{display:flex;gap:10px;margin-top:16px}
.footer-sosyal a{
    width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;
}
.footer-sosyal a:hover{background:var(--mavi)}
.footer-alt{
    margin-top:38px;border-top:1px solid rgba(255,255,255,.12);padding:16px 0;
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;
}
.footer-alt ul{list-style:none;display:flex;gap:18px}

/* =====================================================
   İÇ SAYFALAR
   ===================================================== */
.sayfa-ust{
    background:linear-gradient(115deg,var(--lacivert) 0%,var(--lacivert-acik) 100%);
    padding:44px 0;color:#fff;position:relative;overflow:hidden;
}
.sayfa-ust:before{
    content:'';position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;
    background:rgba(255,255,255,.06);
}
.sayfa-ust:after{
    content:'';position:absolute;right:120px;bottom:-140px;width:240px;height:240px;border-radius:50%;
    background:rgba(255,255,255,.05);
}
.sayfa-ust h1{color:#fff;font-size:29px;margin:0 0 8px;position:relative;z-index:2}
.yol{display:flex;gap:8px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.75);position:relative;z-index:2;flex-wrap:wrap}
.yol a{color:rgba(255,255,255,.75)}
.yol a:hover{color:#fff}

.icerik-govde{font-size:15px;line-height:1.8;color:var(--metin)}
.icerik-govde h2,.icerik-govde h3{margin-top:26px}
.icerik-govde img{border-radius:10px;margin:16px 0}
.icerik-govde ul,.icerik-govde ol{padding-left:22px;margin-bottom:16px}
.icerik-govde li{margin-bottom:7px}
.icerik-govde table{width:100%;border-collapse:collapse;margin:16px 0}
.icerik-govde th,.icerik-govde td{border:1px solid var(--kenar);padding:10px 12px;font-size:14px}
.icerik-govde blockquote{border-left:4px solid var(--mavi);background:var(--mavi-zemin);margin:16px 0;padding:14px 18px;border-radius:0 8px 8px 0}

.iki-kolon{display:grid;grid-template-columns:1fr 310px;gap:30px;align-items:start}
.yan-kart{background:#fff;border:1px solid var(--kenar);border-radius:var(--r);padding:20px;margin-bottom:22px}
.yan-kart h3{font-size:14px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--kenar)}
.yan-liste{list-style:none}
.yan-liste li{padding:9px 0;border-bottom:1px dashed var(--kenar);font-size:13.5px}
.yan-liste li:last-child{border-bottom:0}
.yan-liste a{color:var(--metin);display:flex;gap:8px}
.yan-liste a:hover{color:var(--mavi)}
.yan-liste i{color:var(--yesil);font-size:14px;margin-top:3px}

/* liste kartları */
.liste-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.liste-kart{background:#fff;border:1px solid var(--kenar);border-radius:var(--r);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.liste-kart:hover{box-shadow:var(--golge);transform:translateY(-4px);border-color:#d3e2f4}
.liste-gorsel{aspect-ratio:16/10;overflow:hidden;background:#e6eef8}
.liste-gorsel img{width:100%;height:100%;object-fit:cover;transition:.5s}
.liste-kart:hover .liste-gorsel img{transform:scale(1.06)}
.liste-govde{padding:18px;flex:1;display:flex;flex-direction:column}
.liste-tarih{font-size:12px;color:var(--gri);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.liste-tarih i{color:var(--mavi);font-size:13px}
.liste-govde h3{font-size:16px;margin-bottom:8px;line-height:1.4}
.liste-govde p{font-size:13.5px;color:var(--gri);margin-bottom:14px;flex:1}
.liste-govde .devam{font-size:12.5px;font-weight:600;color:var(--mavi);display:inline-flex;align-items:center;gap:6px}

/* sayfalama */
.bld-sayfalama{margin-top:34px;display:flex;justify-content:center}
.bld-sayfalama ul{list-style:none;display:flex;gap:7px}
.bld-sayfalama a{
    display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;
    border:1px solid var(--kenar);border-radius:8px;font-size:13.5px;color:var(--lacivert);background:#fff;font-weight:600;
}
.bld-sayfalama a:hover{border-color:var(--mavi);color:var(--mavi)}
.bld-sayfalama li.aktif a{background:var(--lacivert);border-color:var(--lacivert);color:#fff}
.bld-sayfalama li.pasif a{opacity:.45;pointer-events:none}

/* form */
.form-kart{background:#fff;border:1px solid var(--kenar);border-radius:var(--r);padding:26px}
.form-satir{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-alan{margin-bottom:16px}
.form-alan label{display:block;font-size:13px;font-weight:600;color:var(--lacivert);margin-bottom:7px}
.form-alan input,.form-alan select,.form-alan textarea{
    width:100%;padding:12px 14px;border:1px solid var(--kenar);border-radius:8px;font-size:14px;
    font-family:inherit;color:var(--metin);background:#fff;
}
.form-alan textarea{min-height:140px;resize:vertical}
.form-alan input:focus,.form-alan textarea:focus,.form-alan select:focus{outline:none;border-color:var(--mavi);box-shadow:0 0 0 3px rgba(22,104,195,.1)}
.uyari-kutu{padding:13px 16px;border-radius:8px;font-size:13.5px;margin-bottom:18px}
.uyari-basari{background:#e9f8ef;border:1px solid #b7e6c9;color:#136c37}
.uyari-hata{background:#fdecef;border:1px solid #f7c2cc;color:#a01430}

/* galeri */
.foto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.foto-grid a{display:block;border-radius:9px;overflow:hidden;aspect-ratio:4/3;background:#e6eef8}
.foto-grid img{width:100%;height:100%;object-fit:cover;transition:.4s}
.foto-grid a:hover img{transform:scale(1.07)}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.video-kutu{border-radius:var(--r);overflow:hidden;border:1px solid var(--kenar);background:#fff}
.video-kutu .oran{position:relative;padding-top:56.25%;background:#000}
.video-kutu iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-kutu h3{font-size:14.5px;margin:0;padding:14px 16px}

/* iletişim */
.iletisim-grid{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start}
.iletisim-bilgi{background:var(--zemin);border-radius:var(--r);padding:24px}
.iletisim-bilgi li{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--kenar);list-style:none;font-size:13.5px}
.iletisim-bilgi li:last-child{border-bottom:0}
.iletisim-bilgi i{font-size:18px;color:var(--mavi);margin-top:2px}
.iletisim-bilgi b{display:block;color:var(--lacivert);font-size:13px;margin-bottom:2px}
.harita{border-radius:var(--r);overflow:hidden;border:1px solid var(--kenar);margin-top:26px}
.harita iframe{width:100%;height:340px;border:0;display:block}

/* hizmet detay ikonu */
.hizmet-ikon-buyuk{
    width:76px;height:76px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    font-size:36px;background:var(--mavi-zemin);color:var(--mavi);margin-bottom:18px;
}

/* boş içerik */
.bos-kutu{background:var(--zemin);border:1px dashed var(--kenar);border-radius:var(--r);padding:40px;text-align:center;color:var(--gri)}

/* yukarı çık */
.yukari{
    position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:10px;border:0;cursor:pointer;
    background:var(--lacivert);color:#fff;font-size:20px;display:none;align-items:center;justify-content:center;z-index:120;
    box-shadow:var(--golge-guclu);
}
.yukari.gorunur{display:flex}
.yukari:hover{background:var(--mavi)}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1199px){
    .hero-yazi h1{font-size:38px}
    .hizli-serit{grid-template-columns:repeat(4,1fr)}
    .hizli-oge:nth-child(4n+1):before{display:none}
    .hizmet-grid{grid-template-columns:repeat(4,1fr)}
    .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:24px}
    .footer-grid>div:nth-child(4){display:none}
}
@media (max-width:991px){
    .ana-menu,.arama-ac{display:none}
    .menu-ac{display:block}
    .header-ic{min-height:70px}
    .hero-ic{flex-direction:column;align-items:flex-start;min-height:auto;padding:34px 0 90px}
    .hero-yazi{width:100%}
    .hero-yazi h1{font-size:31px}
    .hero-gorsel{position:relative;width:100%;margin:26px 0 -30px;height:250px;right:auto;left:auto;clip-path:none;border-radius:0}
    .hero-gorsel:after{display:none}
    .hero-oklar{bottom:112px;right:20px}
    .duyuru-banner{grid-template-columns:1fr}
    .proje-grid{grid-template-columns:repeat(2,1fr)}
    .istatistik-grid{grid-template-columns:repeat(3,1fr);gap:22px 0}
    .istatistik-oge:nth-child(3n+1):before{display:none}
    .baskan-etkinlik{grid-template-columns:1fr}
    .iki-kolon{grid-template-columns:1fr}
    .liste-grid{grid-template-columns:repeat(2,1fr)}
    .iletisim-grid{grid-template-columns:1fr}
    .foto-grid{grid-template-columns:repeat(3,1fr)}
    .video-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
    .footer-grid>div:nth-child(4){display:block}
    .banner-ic{max-width:80%}
}
@media (max-width:767px){
    body{font-size:14.5px}
    .header-arac .btn{display:none}
    .kap{padding:0 14px}
    .ust-bar .kap{justify-content:center;min-height:auto;padding-top:7px;padding-bottom:7px;gap:10px}
    .ust-sol .ust-gizle,.ust-sag .ust-gizle{display:none}
    .hero-yazi h1{font-size:26px}
    .hizli-serit{grid-template-columns:repeat(2,1fr)}
    .hizli-oge:before{display:none !important}
    .hizli-oge{border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12)}
    .hizmet-grid{grid-template-columns:repeat(2,1fr)}
    .bolum{padding:38px 0}
    .bolum-baslik h2{font-size:21px}
    .banner-ic{max-width:100%;padding:26px 22px}
    .banner-ic h3{font-size:23px}
    .istatistik-grid{grid-template-columns:repeat(2,1fr)}
    .istatistik-oge:before{display:none !important}
    .baskan-kart{flex-direction:column}
    .baskan-foto{width:100%;max-width:230px}
    .liste-grid{grid-template-columns:1fr}
    .foto-grid{grid-template-columns:repeat(2,1fr)}
    .video-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-alt{flex-direction:column;text-align:center}
    .form-satir{grid-template-columns:1fr}
    .cta-serit{padding:22px}
    .cta-sol h3{font-size:17px}
    .sayfa-ust{padding:30px 0}
    .sayfa-ust h1{font-size:22px}
    .proje-grid{grid-template-columns:1fr}
}

@media (max-width:991px){
    .hero-oklar{position:static;justify-content:flex-end;padding:0 16px 6px;margin-top:-6px}
    .hero-sayac{color:var(--lacivert);text-shadow:none}
    .hero-nokta span{background:rgba(11,58,122,.28)}
    .hero-nokta span.aktif{background:var(--lacivert)}
    .yuvarlak-btn{background:#fff;box-shadow:0 3px 10px rgba(11,58,122,.18)}
}

/* =====================================================
   KADRO (KİŞİ) LİSTESİ
   ===================================================== */
.kadro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.kadro-kart{
    background:#fff;border:1px solid var(--kenar);border-radius:var(--r);overflow:hidden;
    text-align:center;padding-bottom:18px;transition:.25s;
}
.kadro-kart:hover{box-shadow:var(--golge);transform:translateY(-4px);border-color:#d3e2f4}
.kadro-foto{aspect-ratio:4/4.6;overflow:hidden;background:#e9f0f8}
.kadro-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:.5s}
.kadro-kart:hover .kadro-foto img{transform:scale(1.05)}
.kadro-kart h4{font-size:16px;margin:16px 12px 4px;color:var(--lacivert)}
.kadro-kart span{display:block;font-size:13px;color:var(--gri);padding:0 12px}
@media (max-width:991px){.kadro-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.kadro-grid{grid-template-columns:repeat(2,1fr);gap:14px}.kadro-kart h4{font-size:14px}}

/* ---------- Kategori filtre şeridi ---------- */
.kategori-serit{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.kategori-cip{
    display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:30px;
    border:1px solid var(--kenar);background:#fff;color:var(--lacivert);
    font-size:13.5px;font-weight:600;transition:.2s;
}
.kategori-cip span{
    background:var(--mavi-zemin);color:var(--mavi);font-size:11.5px;font-weight:700;
    padding:1px 8px;border-radius:20px;
}
.kategori-cip:hover{border-color:var(--mavi);color:var(--mavi)}
.kategori-cip.aktif{background:var(--lacivert);border-color:var(--lacivert);color:#fff}
.kategori-cip.aktif span{background:rgba(255,255,255,.22);color:#fff}

/* üst bardaki slogan */
.ust-slogan{max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ust-slogan i{color:#ffc94d}
@media (max-width:1199px){.ust-slogan{max-width:220px}}

/* =====================================================
   BELGE LİSTESİ (meclis kararları / faaliyet raporları)
   ===================================================== */
.belge-liste{display:flex;flex-direction:column;gap:12px}
.belge-satir{
    display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--kenar);
    border-radius:var(--r);padding:14px 18px;transition:.22s;
}
.belge-satir:hover{border-color:var(--mavi);box-shadow:var(--golge);transform:translateY(-2px)}
.belge-ikon{
    flex-shrink:0;width:52px;height:52px;border-radius:12px;background:var(--mavi-zemin);
    display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--mavi);
}
.belge-satir:hover .belge-ikon{background:var(--lacivert);color:#fff}
.belge-govde{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.belge-baslik{font-size:15.5px;font-weight:600;color:var(--lacivert);line-height:1.4}
.belge-no{font-size:12.5px;color:var(--gri)}
.belge-tarih{font-size:12.5px;color:var(--gri);display:flex;align-items:center;gap:6px}
.belge-tarih i{color:var(--mavi);font-size:14px}
.belge-ok{color:var(--gri);font-size:22px;flex-shrink:0}
.belge-satir:hover .belge-ok{color:var(--mavi)}

.belge-indir{
    display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--kenar);
    border-left:4px solid #e0364b;border-radius:var(--r);padding:16px 18px;margin-bottom:22px;transition:.2s;
}
.belge-indir:hover{box-shadow:var(--golge);border-color:#e0364b}
.belge-indir-ikon{
    width:48px;height:48px;border-radius:10px;background:#fdecef;color:#e0364b;
    display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
}
.belge-indir span{display:flex;flex-direction:column;flex:1}
.belge-indir b{font-size:14.5px;color:var(--lacivert)}
.belge-indir small{font-size:12px;color:var(--gri)}
.belge-indir > i{font-size:22px;color:#e0364b}
@media (max-width:575px){
    .belge-satir{padding:12px 14px;gap:12px}
    .belge-ikon{width:44px;height:44px;font-size:22px}
    .belge-baslik{font-size:14px}
}