/* ===========================================================================
   Anaokulu Web Sitesi - Ana Stil
   Estetik, sıcak ve modern renk paleti
   =========================================================================== */

:root {
    --ana-renk: #ff7a59;        /* sıcak mercan */
    --ana-koyu: #ed5e3c;
    --ikincil: #2ec4b6;         /* turkuaz */
    --ikincil-koyu: #1aa295;
    --vurgu: #ffc24b;           /* altın sarı */
    --mor: #3d5a80;             /* kurumsal lacivert */
    --lacivert: #293d5e;
    --yesil: #06b6a4;
    --metin: #2b3447;
    --metin-acik: #6a7489;
    --arka: #f7fafc;
    --beyaz: #ffffff;
    --acik-gri: #eef3f7;
    --kenar: #e4ebf1;
    --golge: 0 10px 30px rgba(41, 61, 94, 0.08);
    --golge-hover: 0 18px 44px rgba(41, 61, 94, 0.15);
    --radius: 18px;
    --gecis: all .3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    color: var(--metin);
    background: var(--arka);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
}
/* Mobilde taşan gömülü içerik (harita/video) güvenliği */
iframe { max-width: 100%; }

/* ----------------------------- Yükleme ekranı --------------------------- */
.yukleniyor {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #f3f6fb 100%);
    transition: opacity .5s ease, visibility .5s ease;
}
.yukleniyor.gizle { opacity: 0; visibility: hidden; }
.yukleniyor-ic { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.yukleniyor-halka {
    position: relative; width: 104px; height: 104px;
    display: flex; align-items: center; justify-content: center;
}
/* Dönen renkli halka */
.yukleniyor-halka::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 4px solid var(--kenar);
    border-top-color: var(--ana-renk);
    border-right-color: var(--ikincil);
    animation: yukDon .9s linear infinite;
}
.yukleniyor-halka img {
    width: 58px; height: 58px; object-fit: contain; display: block;
    animation: yukNabiz 1.6s ease-in-out infinite;
}
.yukleniyor-yazi {
    font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px;
    color: var(--lacivert); letter-spacing: .5px;
    opacity: 0; animation: yukYazi 1.6s ease-in-out infinite;
}
@keyframes yukDon { to { transform: rotate(360deg); } }
@keyframes yukNabiz { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes yukYazi { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

h1, h2, h3, h4, h5 {
    font-family: 'Baloo 2', 'Segoe UI', cursive;
    font-weight: 700;
    line-height: 1.25;
    color: var(--metin);
}

a { color: var(--ana-renk); text-decoration: none; transition: var(--gecis); }
a:hover { color: var(--ana-koyu); }
img { max-width: 100%; height: auto; display: block; }

.kapsayici { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ----------------------------- Üst bar ----------------------------------- */
.ust-bar {
    background: linear-gradient(90deg, var(--lacivert), var(--mor));
    color: #fff;
    font-size: 14px;
    padding: 9px 0;
}
.ust-bar-ic { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.ust-iletisim { display: flex; align-items: center; gap: 26px; }
.ust-iletisim a {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; font-weight: 600; letter-spacing: .2px; transition: var(--gecis);
}
.ust-iletisim a:hover { color: var(--vurgu); }
.ust-iletisim a i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px; font-size: 12px;
    background: rgba(255,255,255,.14); color: var(--vurgu);
}
.ust-sag { display: flex; align-items: center; gap: 16px; }
.ust-sosyal { display: flex; align-items: center; gap: 6px; }
.ust-sosyal a {
    color: #fff; font-size: 13px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); transition: var(--gecis);
}
.ust-sosyal a:hover { background: var(--ana-renk); color: #fff; }

/* ----------------------------- Ana menü ---------------------------------- */
.ana-menu {
    background: var(--beyaz);
    box-shadow: 0 2px 20px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.ana-menu-ic { display: flex; justify-content: space-between; align-items: center; min-height: 108px; gap: 14px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Baloo 2'; font-size: 21px; font-weight: 700; color: var(--lacivert); flex-shrink: 0; }
.logo-amblem { width: 48px; height: 48px; }
.logo-resim { height: 88px; width: auto; max-width: 380px; object-fit: contain; display: block; }
.logo-yazi { line-height: 1.05; white-space: nowrap; }

.menu-liste { list-style: none; display: flex; align-items: center; gap: 0; margin-left: auto; flex-wrap: nowrap; }

/* Arama ikonu (sağ) - mimari: ince çerçeveli, az yuvarlak */
.menu-arama { background: none; border: 1.5px solid var(--kenar); color: var(--lacivert); width: 46px; height: 46px; border-radius: 10px; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: var(--gecis); flex-shrink: 0; }
.menu-arama:hover { border-color: var(--ana-renk); background: var(--ana-renk); color: #fff; box-shadow: 0 8px 18px rgba(255,122,89,.3); }

/* Arama kutusu - kurumsal, ortalı, geniş alan */
.arama-kutu { max-height: 0; overflow: hidden; transition: max-height .4s ease; background: var(--lacivert); }
.arama-kutu.acik { max-height: 180px; }
.arama-kutu .kapsayici { max-width: 760px; }
.arama-kutu form { display: flex; align-items: stretch; gap: 0; padding: 26px 0; }
.arama-kutu form > i { display: flex; align-items: center; justify-content: center; width: 56px; background: #fff; color: var(--ana-renk); font-size: 20px; border-radius: 10px 0 0 10px; }
.arama-kutu input { flex: 1; border: none; background: #fff; font-size: 17px; padding: 16px 8px; color: var(--metin); outline: none; }
.arama-kutu input::placeholder { color: var(--metin-acik); }
.arama-kutu button { background: var(--ana-renk); color: #fff; border: none; padding: 0 34px; border-radius: 0 10px 10px 0; font-weight: 700; font-size: 16px; letter-spacing: .3px; cursor: pointer; transition: var(--gecis); }
.arama-kutu button:hover { background: var(--ana-koyu); }
.menu-oge { position: relative; }
.menu-oge > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 42px 16px;
    color: var(--lacivert);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .2px;
    white-space: nowrap;
    position: relative;
}
/* Mimari tarz: hover/aktif durumunda alttan ince çizgi (underline) */
.menu-oge > a::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 34px;
    height: 2px;
    background: var(--ana-renk);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .28s ease;
}
.menu-oge > a:hover, .menu-oge.aktif > a { color: var(--ana-koyu); }
.menu-oge > a:hover::after, .menu-oge.aktif > a::after { transform: scaleX(1); }
.menu-oge i { font-size: 11px; transition: transform .25s ease; }
.menu-oge.acilir:hover > a i { transform: rotate(180deg); }

.alt-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    background: var(--beyaz);
    min-width: 248px;
    box-shadow: 0 24px 48px rgba(41,61,94,.16);
    border-radius: 4px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    border-top: 3px solid var(--ana-renk);
}
/* Üstte küçük ok (mimari detay) */
.alt-menu::before {
    content: '';
    position: absolute;
    top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px; background: var(--ana-renk);
}
.menu-oge.acilir:hover .alt-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(10px); }
.alt-menu li { position: relative; }
.alt-menu li a {
    display: flex; align-items: center;
    padding: 12px 16px 12px 18px;
    border-radius: 3px;
    color: var(--lacivert);
    font-weight: 600;
    font-size: 14.5px;
    border-left: 2px solid transparent;
    transition: var(--gecis);
}
.alt-menu li a::before {
    content: ''; width: 0; height: 2px; background: var(--ana-renk);
    margin-right: 0; transition: width .25s ease, margin .25s ease; flex-shrink: 0;
}
.alt-menu li a:hover {
    background: var(--arka); color: var(--ana-koyu); border-left-color: var(--ana-renk);
}
.alt-menu li a:hover::before { width: 12px; margin-right: 10px; }

.menu-ac { display: none; background: none; border: none; font-size: 30px; color: var(--ana-koyu); cursor: pointer; z-index: 1200; position: relative; }

/* Mobil menü karartma katmanı */
.menu-ortu { position: fixed; inset: 0; background: rgba(32,36,54,.5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; z-index: 1090; }
.menu-ortu.acik { opacity: 1; visibility: visible; }
/* Menü açıkken sayfa kaymasın */
body.menu-kilit { overflow: hidden; }

/* ------------------------------- Slider ---------------------------------- */
.slider { position: relative; overflow: hidden; }

.slider-oge {
    display: none;
    min-height: 560px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.slider-oge.aktif { display: block; }

/* Zarif, dengeli karartma (metin her zaman okunur) */
.slider-oge::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(41,61,94,.30) 0%, rgba(41,61,94,.15) 40%, rgba(41,61,94,.55) 100%),
        radial-gradient(ellipse at center, rgba(41,61,94,.15) 0%, rgba(41,61,94,.50) 100%);
}

/* Ortalanmış metin */
.slider-metin {
    position: relative; z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 150px 20px 160px;
}
.slider-metin h2 {
    color: #fff; font-size: 54px; line-height: 1.15; margin-bottom: 18px;
    text-shadow: 0 4px 30px rgba(0,0,0,.45);
    letter-spacing: .5px;
}
.slider-metin p {
    font-size: 21px; margin: 0 auto 30px; max-width: 620px; opacity: .96;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
}

/* Aktif slayttaki metne zarif giriş animasyonu */
.slider-oge.aktif .slider-metin h2 { animation: sliderGir .9s cubic-bezier(.2,.7,.3,1) both; }
.slider-oge.aktif .slider-metin p  { animation: sliderGir .9s .15s cubic-bezier(.2,.7,.3,1) both; }
.slider-oge.aktif .slider-metin .btn-ana { animation: sliderGir .9s .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes sliderGir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* Oklar - modern cam efektli */
.slider-ok {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.5);
    width: 54px; height: 54px; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 3;
    transition: var(--gecis); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
}
.slider-ok:hover { background: var(--ana-renk); border-color: var(--ana-renk); transform: translateY(-50%) scale(1.08); }
.slider-ok.sol { left: 28px; }
.slider-ok.sag { right: 28px; }

/* Göstergeler */
.slider-nokta { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.slider-nokta span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: var(--gecis); }
.slider-nokta span.aktif { background: var(--vurgu); width: 34px; border-radius: 8px; }

/* Slider butonu - mercan, belirgin */
.slider-metin .btn-ana { background: var(--ana-renk); color: #fff; box-shadow: 0 10px 28px rgba(237,94,60,.5); padding: 15px 36px; font-size: 17px; }
.slider-metin .btn-ana:hover { background: var(--ana-koyu); color: #fff; transform: translateY(-3px); }

/* Sık ve küçük scallop (yarım daire dizisi) beyaz kenarlar — referanstaki gibi.
   Resmin üzerine biner, böylece görsel üstten ve alttan taşmaz, tam arasına oturur. */
.slider-dalga {
    position: absolute; left: 0; right: 0; height: 16px; z-index: 5; display: block; pointer-events: none;
    background-repeat: repeat-x;
    background-size: 26px 16px;
}
/* Üst kenar: beyaz yarım daireler aşağı doğru sarkar (menünün hemen altında) */
.slider-dalga-ust {
    top: -1px;
    background-image: radial-gradient(circle at 13px 0px, var(--beyaz) 10px, transparent 11px);
}
/* Alt kenar: beyaz yarım daireler yukarı doğru çıkar (içeriğe geçişte) */
.slider-dalga-alt {
    bottom: -1px;
    background-image: radial-gradient(circle at 13px 16px, var(--arka) 10px, transparent 11px);
}

/* ------------------------------ Butonlar --------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 30px; border-radius: 50px; font-weight: 700;
    border: none; cursor: pointer; font-size: 16px; font-family: 'Nunito';
    transition: var(--gecis);
}
.btn-ana { background: var(--vurgu); color: #5a3d00; box-shadow: 0 8px 20px rgba(255,184,77,.4); }
.btn-ana:hover { background: #ffa827; color: #5a3d00; transform: translateY(-3px); }
.btn-beyaz { background: #fff; color: var(--ana-koyu); }
.btn-beyaz:hover { background: var(--arka); transform: translateY(-3px); color: var(--ana-koyu); }
.btn-cizgi { background: transparent; border: 2px solid var(--ana-renk); color: var(--ana-renk); }
.btn-cizgi:hover { background: var(--ana-renk); color: #fff; }

/* ------------------------------ Bölümler --------------------------------- */
.bolum { padding: 80px 0; }
.bolum-acik { background: var(--beyaz); }
.bolum-baslik { text-align: center; max-width: 900px; margin: 0 auto 50px; }
.bolum-baslik .etiket { display: none; }
.bolum-baslik h2 {
    font-size: 34px; margin-bottom: 14px; line-height: 1.2;
    color: #5a4bd4; /* modern, anaokuluna yakışan tek canlı mor */
    display: inline-block;
}
.bolum-baslik h2 span { color: #ff7a3d; }
.bolum-baslik p { color: var(--metin-acik); }

/* ----------------------------- Hoşgeldin --------------------------------- */
.hosgeldin { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.hosgeldin-gorsel img { border-radius: 24px; box-shadow: var(--golge); }
.hosgeldin h2 { font-size: 34px; margin-bottom: 18px; }
.hosgeldin p { color: var(--metin-acik); margin-bottom: 16px; }

/* Hoşgeldin bölümü süslemeleri (yıldızlar + çimen) */
.hosgeldin-bolum { position: relative; overflow: hidden; padding-bottom: 130px; }
.sus-yildiz { position: absolute; color: var(--vurgu); opacity: .8; z-index: 0; pointer-events: none; }
.sus-yildiz i { font-size: 22px; display: block; animation: yildizDon 6s linear infinite; }
.sus-yildiz.y1 { top: 8%;  left: 5%;  }
.sus-yildiz.y2 { top: 6%;  left: 26%; font-size: 1.3em; }
.sus-yildiz.y3 { top: 14%; left: 38%; opacity: .6; }
.sus-yildiz.y4 { top: 7%;  right: 30%; }
.sus-yildiz.y5 { top: 5%;  right: 7%;  font-size: 1.2em; }
.sus-yildiz.y2 i { animation-duration: 8s; }
.sus-yildiz.y4 i { animation-duration: 7s; animation-direction: reverse; }
@keyframes yildizDon { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Altta kurumsal dalga geçişi (SVG) */
.sus-cimen {
    position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 0; pointer-events: none;
    background-repeat: no-repeat; background-position: bottom center; background-size: 100% 90px;
    background-image: url("../img/dalga.svg");
}
.hosgeldin-bolum .kapsayici { position: relative; z-index: 1; }

/* ------------------------------ Kartlar ---------------------------------- */
.kart-grid { display: grid; gap: 28px; }
.kart-4 { grid-template-columns: repeat(4, 1fr); }
.kart-3 { grid-template-columns: repeat(3, 1fr); }
.kart-2 { grid-template-columns: repeat(2, 1fr); }

.ozellik-kart {
    background: var(--beyaz); border-radius: var(--radius); padding: 36px 26px; text-align: center;
    box-shadow: var(--golge); transition: var(--gecis); border-bottom: 4px solid transparent;
}
.ozellik-kart:hover { transform: translateY(-8px); box-shadow: var(--golge-hover); border-bottom-color: var(--ana-renk); }
.ozellik-ikon {
    width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff;
}
.ozellik-kart:nth-child(4n+1) .ozellik-ikon { background: linear-gradient(135deg, var(--ana-renk), var(--ana-koyu)); }
.ozellik-kart:nth-child(4n+2) .ozellik-ikon { background: linear-gradient(135deg, var(--ikincil), var(--ikincil-koyu)); }
.ozellik-kart:nth-child(4n+3) .ozellik-ikon { background: linear-gradient(135deg, var(--vurgu), #f59f1a); }
.ozellik-kart:nth-child(4n+4) .ozellik-ikon { background: linear-gradient(135deg, var(--mor), #7a5bc8); }
.ozellik-kart h3 { font-size: 21px; margin-bottom: 10px; }
.ozellik-kart p { color: var(--metin-acik); font-size: 15px; }

/* --------------- Daire ikonlu kartlar (Neden Biz / Hizmetler) ------------ */
.daire-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.daire-kart { text-align: center; color: inherit; text-decoration: none; display: block; }

/* Dış dashed (kesik çizgili) halka */
.daire-ikon {
    width: 130px; height: 130px; margin: 0 auto 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 46px; color: #fff;
    position: relative;
    transition: var(--gecis);
}
/* dashed halka: ::after ile dolu dairenin dışında döner */
.daire-ikon::after {
    content: '';
    position: absolute; inset: -12px;
    border-radius: 50%;
    border: 2px dashed currentColor;
    opacity: .55;
    transition: var(--gecis);
}
.daire-kart:hover .daire-ikon { transform: translateY(-6px); }
.daire-kart:hover .daire-ikon::after { inset: -16px; opacity: .9; transform: rotate(35deg); }

/* Daireler referanstaki gibi 4 canlı renk (dolu daire + aynı tonda dashed halka) */
.daire-kart:nth-child(4n+1) .daire-ikon { background: #6c5ce7; color: #6c5ce7; }  /* mor */
.daire-kart:nth-child(4n+2) .daire-ikon { background: #ff7a3d; color: #ff7a3d; }  /* turuncu */
.daire-kart:nth-child(4n+3) .daire-ikon { background: #3fb5c4; color: #3fb5c4; }  /* turkuaz */
.daire-kart:nth-child(4n+4) .daire-ikon { background: #8bc34a; color: #8bc34a; }  /* yeşil */
/* ikon beyaz kalsın (currentColor dashed halkaya gidiyor, ikonu ayrıca beyazlıyoruz) */
.daire-kart .daire-ikon i { color: #fff; }

/* Başlıklar tek modern renk (anaokuluna yakışan canlı mor) */
.daire-kart h3 { font-size: 20px; margin-bottom: 6px; color: #5a4bd4; }
.daire-kart p { color: var(--metin-acik); font-size: 14px; max-width: 230px; margin: 0 auto; }

/* --------- Sade haber kartı (minimal, çerçevesiz) ------------------------ */
.haber-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.haber-sade { display: block; color: inherit; text-decoration: none; }
.haber-sade:hover { color: inherit; }
.haber-sade-gorsel { height: 200px; border-radius: 12px; overflow: hidden; background: var(--acik-gri); margin-bottom: 16px; }
.haber-sade-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.haber-sade:hover .haber-sade-gorsel img { transform: scale(1.05); }
.haber-sade-tarih { display: inline-flex; align-items: center; gap: 6px; color: var(--metin-acik); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.haber-sade-tarih i { color: var(--ana-renk); }
.haber-sade h3 { font-size: 18px; line-height: 1.4; color: var(--lacivert); margin-bottom: 8px; transition: var(--gecis); }
.haber-sade:hover h3 { color: #5a4bd4; }
.haber-sade p { color: var(--metin-acik); font-size: 14px; line-height: 1.6; }

/* resimli kart (haber/etkinlik) */
.icerik-kart {
    background: var(--beyaz); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--golge); transition: var(--gecis); display: flex; flex-direction: column;
    border-top: 5px solid var(--ikincil);
}
.icerik-kart:hover { transform: translateY(-8px); box-shadow: var(--golge-hover); }
/* Tüm kartlarda tek modern renk: canlı mor */
.icerik-kart { border-top-color: #6c5ce7; }
.icerik-kart h3 { color: #5a4bd4; }
.icerik-kart .devam { color: #6c5ce7; }
.icerik-kart-gorsel { height: 210px; overflow: hidden; background: var(--acik-gri); }
.icerik-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.icerik-kart:hover .icerik-kart-gorsel img { transform: scale(1.06); }
.icerik-kart-govde { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.icerik-kart-tarih { color: var(--ikincil-koyu); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.icerik-kart h3 { font-size: 19px; margin-bottom: 10px; }
.icerik-kart p { color: var(--metin-acik); font-size: 14px; flex: 1; }
.icerik-kart .devam { margin-top: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* ----------------------------- CTA şeridi -------------------------------- */
.cta {
    background: linear-gradient(120deg, var(--ikincil), var(--mor));
    color: #fff; text-align: center; padding: 64px 0; border-radius: 0;
}
.cta h2 { color: #fff; font-size: 34px; margin-bottom: 12px; }
.cta p { font-size: 18px; margin-bottom: 26px; opacity: .95; }

/* --------------------------- Sayfa başlığı ------------------------------- */
/* Hero (sayfa üstlüğü) - admin'den yönetilen arka plan resimli */
.sayfa-hero {
    position: relative;
    background: linear-gradient(120deg, var(--mor), var(--lacivert));
    color: #fff;
    padding: 64px 0 56px;
    overflow: hidden;
}
/* Resimli hero: arka plan görseli + okunurluk için koyu katman */
.sayfa-hero.resimli {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sayfa-hero.resimli::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(41,61,94,.88), rgba(61,90,128,.68) 60%, rgba(46,196,182,.42));
}
/* İçerik: solda başlık, sağda breadcrumb */
.sayfa-hero-ic {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.sayfa-hero-yazi h1 {
    color: #fff; font-size: 38px; margin: 0; line-height: 1.1;
    text-shadow: 0 2px 14px rgba(0,0,0,.25);
}
.sayfa-hero-alt { margin: 10px 0 0; font-size: 16px; opacity: .92; max-width: 560px; }
/* Breadcrumb hap */
.sayfa-hero-yol {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
    background: rgba(255,255,255,.14); backdrop-filter: blur(4px);
    padding: 9px 18px; border-radius: 30px; border: 1px solid rgba(255,255,255,.18);
}
.sayfa-hero-yol a { color: #fff; display: inline-flex; align-items: center; gap: 6px; transition: var(--gecis); }
.sayfa-hero-yol a:hover { color: var(--vurgu); }
.sayfa-hero-yol .ayrac { opacity: .6; font-size: 11px; display: inline-flex; }
.sayfa-hero-yol .aktif { color: var(--vurgu); }
/* Üstte bulut/scallop kenar */
.sayfa-hero-bulut { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; }
.sayfa-hero-bulut svg { width: 100%; height: 34px; display: block; }

/* ------------------------------- Kadro ----------------------------------- */
.kadro-kart { background: var(--beyaz); border-radius: var(--radius); overflow: hidden; box-shadow: var(--golge); text-align: center; transition: var(--gecis); }
.kadro-kart:hover { transform: translateY(-8px); box-shadow: var(--golge-hover); }
.kadro-resim { height: 280px; background: var(--acik-gri); }
.kadro-resim img { width: 100%; height: 100%; object-fit: cover; }
.kadro-govde { padding: 20px; }
.kadro-govde h3 { font-size: 20px; }
.kadro-kart { border-top: 5px solid #6c5ce7; }
.kadro-kart .kadro-govde h3 { color: #5a4bd4; }
.kadro-govde .unvan { color: var(--ana-renk); font-weight: 700; font-size: 14px; }

/* --------- Profesyonel kadro kartları (dashed renkli çerçeve) ------------ */
.kadro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.kadro-kart-p {
    background: var(--beyaz);
    border: 2px dashed var(--mor);
    border-radius: 18px;
    padding: 14px 14px 22px;
    text-align: center;
    transition: var(--gecis);
}
.kadro-kart-p:hover { transform: translateY(-8px); box-shadow: var(--golge-hover); }
.kadro-p-resim { border-radius: 12px; overflow: hidden; height: 230px; background: var(--acik-gri); margin-bottom: 18px; }
.kadro-p-resim img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.kadro-kart-p:hover .kadro-p-resim img { transform: scale(1.05); }
.kadro-p-govde h3 { font-size: 19px; margin-bottom: 4px; color: var(--lacivert); }
.kadro-p-unvan { font-size: 13px; color: var(--metin-acik); font-weight: 600; margin-bottom: 14px; }
.kadro-p-sosyal { display: flex; justify-content: center; gap: 14px; }
.kadro-p-sosyal a { color: var(--metin-acik); font-size: 15px; transition: var(--gecis); }

/* Dönüşümlü renkler (çerçeve, isim, sosyal hover) */
.kadro-kart-p:nth-child(4n+1) { border-color: #6c5ce7; }
.kadro-kart-p:nth-child(4n+1) h3 { color: #5a4bd4; }
.kadro-kart-p:nth-child(4n+1) .kadro-p-sosyal a:hover { color: #6c5ce7; }
.kadro-kart-p:nth-child(4n+2) { border-color: #ff7a3d; }
.kadro-kart-p:nth-child(4n+2) h3 { color: #e8601f; }
.kadro-kart-p:nth-child(4n+2) .kadro-p-sosyal a:hover { color: #ff7a3d; }
.kadro-kart-p:nth-child(4n+3) { border-color: #3fb5c4; }
.kadro-kart-p:nth-child(4n+3) h3 { color: #2f8b98; }
.kadro-kart-p:nth-child(4n+3) .kadro-p-sosyal a:hover { color: #3fb5c4; }
.kadro-kart-p:nth-child(4n+4) { border-color: #8bc34a; }
.kadro-kart-p:nth-child(4n+4) h3 { color: #6ca82f; }
.kadro-kart-p:nth-child(4n+4) .kadro-p-sosyal a:hover { color: #8bc34a; }

/* ------------------------------ Galeri ----------------------------------- */
.galeri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.galeri-oge { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; height: 240px; box-shadow: var(--golge); }
.galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.galeri-oge:hover img { transform: scale(1.08); }
.galeri-oge-buyut { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: var(--ana-renk); border-radius: 50%; font-size: 22px; opacity: 0; transform: scale(.7); transition: var(--gecis); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.galeri-oge:hover .galeri-oge-buyut { opacity: 1; transform: scale(1); }

/* Galeri albüm detay açıklaması (kurumsal metin bloğu) */
.galeri-detay-aciklama {
    margin: 0 0 36px;
    padding: 26px 30px;
    background: var(--beyaz);
    border: 1px solid var(--kenar);
    border-left: 5px solid var(--ana-renk);
    border-radius: 14px;
    box-shadow: var(--golge);
}
.galeri-detay-aciklama p {
    color: var(--metin);
    line-height: 1.8;
    font-size: 14px;
    margin: 0 0 14px;
    text-align: left;
}
.galeri-detay-aciklama p:first-child { font-size: 14px; }
.galeri-detay-aciklama p:last-child { margin-bottom: 0; }
@media (max-width: 576px) {
    .galeri-detay-aciklama { padding: 20px 20px; }
    .galeri-detay-aciklama p { font-size: 13.5px; }
}

/* ------------------------------ İçerik ----------------------------------- */
.icerik-metin { max-width: 860px; margin: 0 auto; }
.icerik-metin p { margin-bottom: 16px; color: var(--metin-acik); }
.icerik-metin img { border-radius: 14px; margin: 16px 0; max-width: 100%; height: auto; }
.icerik-metin h2, .icerik-metin h3, .icerik-metin h4 { margin: 24px 0 12px; color: var(--lacivert); }
.icerik-metin ul, .icerik-metin ol { margin: 0 0 16px 22px; color: var(--metin-acik); }
.icerik-metin ul li, .icerik-metin ol li { margin-bottom: 6px; }
/* Quill liste yapısı (data-list) için ön yüz görünümü */
.icerik-metin ol li[data-list="bullet"] { list-style-type: disc; }
.icerik-metin ol li[data-list="ordered"] { list-style-type: decimal; }
.icerik-metin li > .ql-ui { display: none; }
.icerik-metin blockquote {
    border-left: 4px solid var(--ana-renk); background: var(--arka);
    margin: 18px 0; padding: 14px 20px; border-radius: 0 10px 10px 0; color: var(--metin);
}
.icerik-metin a { color: var(--ana-renk); font-weight: 600; text-decoration: underline; }
/* Quill hizalama sınıfları (editörden gelen içerik için) */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* -------------------------------- SSS ------------------------------------ */
.sss-oge { background: var(--beyaz); border-radius: 14px; margin-bottom: 14px; box-shadow: var(--golge); overflow: hidden; }
.sss-soru { padding: 18px 24px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Baloo 2'; }
.sss-soru:hover { color: var(--ana-koyu); }
.sss-cevap { max-height: 0; overflow: hidden; transition: max-height .35s ease; padding: 0 24px; color: var(--metin-acik); }
.sss-oge.acik .sss-cevap { max-height: 600px; padding: 0 24px 20px 62px; }
.sss-oge.acik .sss-soru i { transform: rotate(180deg); }
.sss-soru i { transition: var(--gecis); }

/* SSS profesyonel: üst bilgi + numaralı sorular + iletişim kutusu */
.sss-ustbilgi, .yemek-ustbilgi {
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(135deg, rgba(108,92,231,.1), rgba(167,101,172,.08));
    border: 1px solid var(--kenar); border-radius: 16px; padding: 22px 26px; margin-bottom: 26px;
}
.sss-ustbilgi > i, .yemek-ustbilgi > i { font-size: 40px; color: var(--mor); flex-shrink: 0; }
.sss-ustbilgi h3, .yemek-ustbilgi h3 { font-size: 20px; color: var(--lacivert); margin-bottom: 4px; }
.sss-ustbilgi p, .yemek-ustbilgi p { color: var(--metin-acik); font-size: 14px; }
.sss-oge.acik { border-left: 4px solid var(--mor); }
.sss-soru .sss-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; background: var(--arka); color: var(--mor);
    font-size: 13px; font-weight: 800; margin-right: 14px; flex-shrink: 0;
}
.sss-oge.acik .sss-soru .sss-no { background: var(--mor); color: #fff; }
.sss-soru { gap: 8px; }
.sss-soru > i.bi-chevron-down { margin-left: auto; color: var(--mor); }
.sss-iletisim-kutu {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    margin-top: 26px; padding: 24px 26px;
    background: linear-gradient(135deg, var(--ikincil-koyu), var(--lacivert)); color: #fff;
    border-radius: 16px;
}
.sss-iletisim-kutu h4 { color: #fff; font-size: 18px; margin-bottom: 4px; }
.sss-iletisim-kutu p { opacity: .9; font-size: 14px; }

/* ------------------------------ Tablo ------------------------------------ */
.tablo-sar { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--golge); }
table.menu-tablo { width: 100%; border-collapse: collapse; background: #fff; }
table.menu-tablo th { background: var(--ana-renk); color: #fff; padding: 16px; text-align: left; }
table.menu-tablo td { padding: 14px 16px; border-bottom: 1px solid var(--kenar); }
table.menu-tablo tr:nth-child(even) td { background: var(--arka); }

/* Yemek menüsü profesyonel: günlük kartlar */
.yemek-liste { display: flex; flex-direction: column; gap: 16px; }
.yemek-gun-kart { background: var(--beyaz); border: 1px solid var(--kenar); border-radius: 16px; overflow: hidden; box-shadow: var(--golge); transition: var(--gecis); }
.yemek-gun-kart:hover { box-shadow: var(--golge-hover); }
.yemek-gun-baslik {
    background: #6c5ce7; color: #fff;
    font-family: 'Baloo 2', sans-serif; font-size: 18px; font-weight: 700;
    padding: 12px 22px; display: flex; align-items: center; gap: 8px;
}
.yemek-ogunler { display: grid; grid-template-columns: repeat(3, 1fr); }
.yemek-ogun { padding: 18px 22px; border-right: 1px solid var(--kenar); }
.yemek-ogun:last-child { border-right: none; }
.yemek-ogun-ad { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--ana-koyu); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.yemek-ogun-ad i { color: var(--vurgu); font-size: 15px; }
.yemek-ogun p { color: var(--metin-acik); font-size: 14px; line-height: 1.5; }

/* ------------------------------ Formlar ---------------------------------- */
.form-kart { background: var(--beyaz); border-radius: var(--radius); box-shadow: var(--golge); padding: 36px; max-width: 760px; margin: 0 auto; }
.form-grup { margin-bottom: 18px; }
.form-grup label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.form-grup input, .form-grup textarea, .form-grup select {
    width: 100%; padding: 13px 16px; border: 2px solid var(--kenar); border-radius: 12px;
    font-family: inherit; font-size: 15px; transition: var(--gecis); background: #fff; color: var(--metin);
}
.form-grup input:focus, .form-grup textarea:focus, .form-grup select:focus { outline: none; border-color: var(--ana-renk); box-shadow: 0 0 0 4px rgba(255,107,157,.12); }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Online kayıt formu profesyonel düzen */
.kayit-ustbilgi {
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(135deg, rgba(108,92,231,.1), rgba(167,101,172,.08));
    border: 1px solid var(--kenar); border-radius: 16px; padding: 22px 26px; margin-bottom: 26px;
}
.kayit-ustbilgi > i { font-size: 40px; color: var(--mor); flex-shrink: 0; }
.kayit-ustbilgi h3 { font-size: 20px; color: var(--lacivert); margin-bottom: 4px; }
.kayit-ustbilgi p { color: var(--metin-acik); font-size: 14px; }
.kayit-form .form-bolum {
    background: var(--beyaz); border: 1px solid var(--kenar); border-radius: 16px;
    padding: 24px 26px; margin-bottom: 22px; box-shadow: var(--golge);
}
.form-bolum-baslik {
    font-family: 'Baloo 2', sans-serif; font-size: 18px; font-weight: 700; color: var(--mor);
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 2px dashed var(--kenar);
}
.form-bolum-baslik i { color: var(--ana-renk); }

/* ------------------------------ Uyarılar --------------------------------- */
.uyari { padding: 14px 20px; border-radius: 12px; margin-bottom: 18px; font-weight: 600; transition: opacity .45s ease, transform .45s ease, max-height .45s ease, margin .45s ease, padding .45s ease; max-height: 200px; overflow: hidden; }
.uyari-gizle { opacity: 0; transform: translateY(-8px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.uyari-basari { background: #e6f7ed; color: #1b7a43; border: 1px solid #b6e6c9; }
.uyari-hata { background: #fdecef; color: #c0344d; border: 1px solid #f6c6cf; }
.uyari-bilgi { background: #e8f4fb; color: #1b6fa3; border: 1px solid #bfe0f3; }

/* ----------------------------- Yorumlar ---------------------------------- */
.yorum-kart { background: var(--beyaz); border-radius: var(--radius); padding: 30px; box-shadow: var(--golge); position: relative; }
.yorum-kart::before { content: '\201C'; font-family: Georgia; font-size: 80px; color: var(--ana-renk); opacity: .2; position: absolute; top: 6px; left: 20px; }
.yorum-metin { font-style: italic; color: var(--metin-acik); margin-bottom: 18px; position: relative; z-index: 1; }
.yorum-kisi { display: flex; align-items: center; gap: 12px; }
.yorum-avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--ana-renk), var(--mor)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.yildiz { color: var(--vurgu); }

/* ----------------- Veli Yorumları (arka plan görselli, cam kart) --------- */
.yorum-bolum {
    position: relative;
    padding: 96px 20px 104px;
    background-color: var(--lacivert);
    background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;
    overflow: hidden;
}
/* Okunurluk + derinlik için katmanlı koyu overlay */
.yorum-bolum::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(120deg, rgba(41,61,94,.90), rgba(90,75,212,.80)),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(41,61,94,.45) 100%);
}
.yorum-kapsul { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; text-align: center; }

/* Üst etiket */
.yorum-etiket {
    display: inline-block; color: var(--vurgu); font-weight: 800; letter-spacing: 3px; font-size: 13px;
    margin-bottom: 26px; text-transform: uppercase;
}

/* Cam (glassmorphism) kart */
.yorum-kart-cam {
    position: relative;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    padding: 56px 46px 40px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 30px 60px rgba(0,0,0,.28);
}

/* Tırnak rozeti - kartın üst kenarına oturur */
.yorum-tirnak {
    position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vurgu), #f5a814); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    box-shadow: 0 12px 28px rgba(245,168,20,.45);
}

/* Slayt geçişi */
.yorum-slider { position: relative; min-height: 210px; }
.yorum-slayt { display: none; animation: yorumGir .6s ease; }
.yorum-slayt.aktif { display: block; }
@keyframes yorumGir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.yorum-yildiz { color: var(--vurgu); font-size: 18px; margin-bottom: 20px; letter-spacing: 3px; }
.yorum-soz { font-size: 18px; line-height: 1.85; color: #fff; font-style: italic; margin-bottom: 26px; }

/* İmza (ince çizgi + isim) */
.yorum-imza { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.yorum-cizgi { width: 46px; height: 3px; border-radius: 3px; background: var(--vurgu); }
.yorum-kisi-ad { color: #fff; font-size: 20px; line-height: 1.3; }
.yorum-kisi-ad span { display: block; color: rgba(255,255,255,.72); font-weight: 600; font-size: 14px; font-family: 'Nunito', sans-serif; letter-spacing: 1px; margin-top: 2px; }

/* Nokta göstergeleri */
.yorum-nokta { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.yorum-nokta span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; transition: var(--gecis); }
.yorum-nokta span.aktif { background: var(--vurgu); width: 32px; border-radius: 8px; }

/* ------------------- Okulumuz sayfaları (sol menü + içerik) -------------- */
.okulumuz-duzen { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }

/* Sol yan menü */
.okulumuz-menu { position: sticky; top: 100px; }
.okulumuz-menu-baslik {
    background: #6c5ce7; color: #fff;
    font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 700;
    padding: 18px 22px; border-radius: 14px 14px 0 0;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 10px 24px rgba(108,92,231,.25);
}
.okulumuz-menu-liste {
    background: var(--beyaz); border: 1px solid var(--kenar); border-top: none;
    border-radius: 0 0 14px 14px; overflow: hidden; box-shadow: var(--golge);
}
.okulumuz-menu-liste a {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 22px; color: var(--metin); font-weight: 600; font-size: 15px;
    border-bottom: 1px solid var(--kenar); transition: var(--gecis); position: relative;
}
.okulumuz-menu-liste a:last-child { border-bottom: none; }
.okulumuz-menu-liste a > i:first-child { color: var(--ana-renk); font-size: 17px; width: 20px; text-align: center; transition: var(--gecis); }
.okulumuz-menu-liste a .ok { margin-left: auto; font-size: 12px; color: var(--metin-acik); transition: var(--gecis); }
.okulumuz-menu-liste a:hover { background: var(--arka); color: #5a4bd4; padding-left: 28px; }
.okulumuz-menu-liste a:hover .ok { color: #5a4bd4; transform: translateX(3px); }
.okulumuz-menu-liste a.aktif {
    background: #6c5ce7;
    color: #fff; border-left: 4px solid var(--vurgu); padding-left: 26px; font-weight: 700;
}
.okulumuz-menu-liste a.aktif > i:first-child { color: var(--vurgu); }
.okulumuz-menu-liste a.aktif .ok { color: #fff; transform: translateX(3px); }
.okulumuz-menu-liste a.aktif:hover { color: #fff; padding-left: 28px; }

/* Menü altı iletişim kutusu */
.okulumuz-menu-cta {
    margin-top: 24px; text-align: center; padding: 28px 22px;
    background: linear-gradient(135deg, var(--ikincil-koyu), var(--lacivert)); color: #fff;
    border-radius: 16px; box-shadow: var(--golge);
}
.okulumuz-menu-cta > i { font-size: 32px; color: var(--vurgu); display: block; margin-bottom: 10px; }
.okulumuz-menu-cta h4 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.okulumuz-menu-cta p { font-size: 20px; font-weight: 700; margin-bottom: 16px; font-family: 'Baloo 2', sans-serif; }
.okulumuz-menu-cta .btn { padding: 10px 24px; font-size: 14px; }

/* Sağ içerik alanı */
.okulumuz-icerik { min-width: 0; }
.okulumuz-icerik .icerik-metin { max-width: none; margin: 0; }
/* Dar içerik alanında sınıf yatay kartları tek sütun */
.okulumuz-icerik .sinif-yatay-tek { grid-template-columns: 1fr; }
/* Dar içerik alanında kadro kartları 2 sütun */
.okulumuz-icerik .kadro-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------- Hakkımızda profesyonel içerik ---------------------- */
.hk-kapak { position: relative; border-radius: 18px; overflow: hidden; height: 320px; margin-bottom: 30px; box-shadow: var(--golge); }
.hk-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hk-kapak-yer { width: 100%; height: 100%; background: linear-gradient(135deg, #6c5ce7, #a765ac); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 90px; }
.hk-kapak-rozet {
    position: absolute; left: 20px; bottom: 20px;
    background: rgba(255,255,255,.95); color: var(--mor);
    padding: 10px 18px; border-radius: 30px; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.hk-kapak-rozet i { color: var(--vurgu); font-size: 18px; }

.hk-baslik { margin-bottom: 18px; }
.hk-etiket { display: inline-block; color: var(--ikincil-koyu); font-weight: 800; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; margin-bottom: 6px; }
.hk-baslik h2 { font-size: 30px; color: var(--lacivert); line-height: 1.2; }
.hk-baslik h2 span { color: var(--ana-renk); }

.hk-metin { max-width: none; margin: 0 0 32px; }
.hk-metin p { margin-bottom: 14px; }

/* Değer vurguları */
.hk-ozellik-grid { display: grid; gap: 16px; }
.hk-ozellik {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--beyaz); border: 1px solid var(--kenar); border-radius: 14px;
    padding: 20px 22px; transition: var(--gecis);
}
.hk-ozellik:hover { box-shadow: var(--golge); transform: translateX(4px); border-color: transparent; }
.hk-ozellik-ikon {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff;
}
.hk-ozellik:nth-child(1) .hk-ozellik-ikon { background: linear-gradient(135deg, #6c5ce7, #5a4bd4); }
.hk-ozellik:nth-child(2) .hk-ozellik-ikon { background: linear-gradient(135deg, #ff7a3d, #ed5e3c); }
.hk-ozellik:nth-child(3) .hk-ozellik-ikon { background: linear-gradient(135deg, #3fb5c4, #2f9aa8); }
.hk-ozellik h4 { font-size: 17px; color: var(--lacivert); margin-bottom: 4px; }
.hk-ozellik p { font-size: 14px; color: var(--metin-acik); line-height: 1.6; }

/* --------- Medya kartları (etkinlik / haber liste) ----------------------- */
.icerik-kart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Tam genişlik (yan menüsüz) medya ızgarası - 3 sütun */
.medya-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.medya-kart {
    display: flex; flex-direction: column; color: inherit;
    background: var(--beyaz); border: 1px solid var(--kenar); border-radius: 18px; overflow: hidden;
    transition: var(--gecis);
}
.medya-kart:hover { box-shadow: var(--golge-hover); transform: translateY(-6px); border-color: transparent; color: inherit; }
.medya-kart-gorsel { position: relative; height: 190px; overflow: hidden; background: var(--acik-gri); }
.medya-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.medya-kart:hover .medya-kart-gorsel img { transform: scale(1.07); }
.medya-kart-etiket {
    position: absolute; left: 14px; bottom: 14px;
    background: rgba(90,75,212,.92); color: #fff; padding: 5px 12px; border-radius: 30px;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(3px);
}
.medya-kart-govde { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.medya-kart-govde h3 { font-size: 18px; color: var(--lacivert); margin-bottom: 8px; line-height: 1.35; }
.medya-kart-govde p { font-size: 14px; color: var(--metin-acik); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.medya-kart-devam { font-weight: 700; font-size: 14px; color: var(--mor); display: inline-flex; align-items: center; gap: 6px; transition: var(--gecis); }
.medya-kart:hover .medya-kart-devam { gap: 10px; }

/* Etkinlik/haber menü CTA renk varyasyonları (tek renk) */
.hizmet-cta-etkinlik { background: #2ec4b6; box-shadow: 0 16px 36px rgba(46,196,182,.28); }
.hizmet-cta-haber { background: #ff7a3d; box-shadow: 0 16px 36px rgba(255,122,61,.28); }
.hizmet-cta-sosyal { display: flex; justify-content: center; gap: 10px; margin-top: 16px; position: relative; z-index: 1; }
.hizmet-cta-sosyal a {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; transition: var(--gecis);
}
.hizmet-cta-sosyal a:hover { background: #fff; color: var(--ana-koyu); }

/* Etkinlik detay galeri başlığı */
.etkinlik-galeri-baslik { margin: 40px 0 20px; text-align: center; }
.etkinlik-galeri-baslik h3 { font-size: 24px; color: var(--lacivert); display: inline-flex; align-items: center; gap: 10px; }
.etkinlik-galeri-baslik h3 i { color: var(--mor); }
.etkinlik-galeri-baslik p { color: var(--metin-acik); font-size: 14px; margin-top: 4px; }

/* Hizmet detay: öne çıkan özet */
.hizmet-ozet {
    font-size: 16px; color: var(--lacivert); font-weight: 600; line-height: 1.7;
    background: var(--arka); border-left: 4px solid var(--mor);
    padding: 16px 20px; border-radius: 0 12px 12px 0; margin-bottom: 20px;
}

/* Hizmetlerimiz sayfası - profesyonel kartlar */
.hizmet-kart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hizmet-kart {
    position: relative; display: flex; flex-direction: column; color: inherit;
    background: var(--beyaz); border: 1px solid var(--kenar); border-radius: 20px;
    padding: 34px 28px 28px; overflow: hidden; transition: var(--gecis);
}
/* Üst renkli ince şerit */
.hizmet-kart::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, #6c5ce7, #a765ac); transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.hizmet-kart:hover::before { transform: scaleX(1); }
.hizmet-kart:hover { box-shadow: var(--golge-hover); transform: translateY(-6px); border-color: transparent; color: inherit; }

/* Sıra numarası (soluk, arka planda) */
.hizmet-kart-no {
    position: absolute; top: 18px; right: 22px;
    font-family: 'Baloo 2', sans-serif; font-size: 44px; font-weight: 700; line-height: 1;
    color: var(--arka); z-index: 0; transition: var(--gecis);
}
.hizmet-kart:hover .hizmet-kart-no { color: #eee6fb; }

/* İkon + arkasında yumuşak halka */
.hizmet-kart-ikon {
    position: relative; z-index: 1;
    width: 74px; height: 74px; margin-bottom: 22px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff;
    background: linear-gradient(135deg, #6c5ce7, #a765ac); transition: var(--gecis);
    box-shadow: 0 10px 24px rgba(108,92,231,.3);
}
.hizmet-kart:nth-child(4n+2) .hizmet-kart-ikon { background: linear-gradient(135deg, #ff7a3d, #ed5e3c); box-shadow: 0 10px 24px rgba(237,94,60,.3); }
.hizmet-kart:nth-child(4n+3) .hizmet-kart-ikon { background: linear-gradient(135deg, #3fb5c4, #2f9aa8); box-shadow: 0 10px 24px rgba(47,154,168,.3); }
.hizmet-kart:nth-child(4n+4) .hizmet-kart-ikon { background: linear-gradient(135deg, #8bc34a, #6ca82f); box-shadow: 0 10px 24px rgba(108,168,47,.3); }
.hizmet-kart:hover .hizmet-kart-ikon { transform: translateY(-4px) rotate(-5deg); }

.hizmet-kart h3 { position: relative; z-index: 1; font-size: 21px; color: var(--lacivert); margin-bottom: 10px; }
.hizmet-kart p { position: relative; z-index: 1; font-size: 14px; color: var(--metin-acik); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.hizmet-kart-devam {
    position: relative; z-index: 1; align-self: flex-start;
    font-weight: 700; font-size: 14px; color: var(--mor);
    display: inline-flex; align-items: center; gap: 8px;
    padding-top: 16px; border-top: 1px solid var(--kenar); width: 100%; transition: var(--gecis);
}
.hizmet-kart-devam i { transition: var(--gecis); }
.hizmet-kart:hover .hizmet-kart-devam i { transform: translateX(5px); }
.hizmet-kart:nth-child(4n+2) .hizmet-kart-devam { color: #ed5e3c; }
.hizmet-kart:nth-child(4n+3) .hizmet-kart-devam { color: #2f9aa8; }
.hizmet-kart:nth-child(4n+4) .hizmet-kart-devam { color: #6ca82f; }

/* Hizmet liste kartları (detay yan menüde kullanılır) */
.hizmet-liste-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hizmet-liste-kart {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--beyaz); border: 1px solid var(--kenar); border-radius: 16px;
    padding: 24px 22px; color: inherit; transition: var(--gecis);
}
.hizmet-liste-kart:hover { box-shadow: var(--golge-hover); transform: translateY(-4px); border-color: transparent; color: inherit; }
.hizmet-liste-ikon {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff;
    background: linear-gradient(135deg, #6c5ce7, #a765ac);
}
.hizmet-liste-kart:nth-child(4n+2) .hizmet-liste-ikon { background: linear-gradient(135deg, #ff7a3d, #ed5e3c); }
.hizmet-liste-kart:nth-child(4n+3) .hizmet-liste-ikon { background: linear-gradient(135deg, #3fb5c4, #2f9aa8); }
.hizmet-liste-kart:nth-child(4n+4) .hizmet-liste-ikon { background: linear-gradient(135deg, #8bc34a, #6ca82f); }
.hizmet-liste-metin h3 { font-size: 18px; color: var(--lacivert); margin-bottom: 6px; }
.hizmet-liste-metin p { font-size: 14px; color: var(--metin-acik); line-height: 1.6; margin-bottom: 10px; }
.hizmet-liste-devam { font-weight: 700; font-size: 14px; color: var(--mor); display: inline-flex; align-items: center; gap: 6px; transition: var(--gecis); }
.hizmet-liste-kart:hover .hizmet-liste-devam { gap: 10px; }

/* --------------- Hizmet menüsü kurumsal CTA ------------------------------ */
.hizmet-cta {
    margin-top: 24px; position: relative; overflow: hidden;
    background: #6c5ce7;
    border-radius: 18px; padding: 28px 24px 26px; color: #fff; text-align: center;
    box-shadow: 0 16px 36px rgba(108,92,231,.3);
}
.hizmet-cta::before {
    content: ''; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); border-radius: 50%;
}
.hizmet-cta-ikon {
    width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 16px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--vurgu);
    position: relative; z-index: 1;
}
.hizmet-cta h4 { color: #fff; font-size: 19px; margin-bottom: 8px; position: relative; z-index: 1; }
.hizmet-cta p { color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; position: relative; z-index: 1; }
.hizmet-cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: var(--vurgu); color: #4a3700; font-weight: 700; font-size: 14.5px;
    padding: 13px 18px; border-radius: 12px; transition: var(--gecis);
    box-shadow: 0 8px 20px rgba(255,194,75,.35); position: relative; z-index: 1;
}
.hizmet-cta-btn:hover { background: #ffcf6b; color: #4a3700; transform: translateY(-2px); }
.hizmet-cta-tel {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
    position: relative; z-index: 1;
}
.hizmet-cta-tel > i { font-size: 22px; color: var(--vurgu); }
.hizmet-cta-tel small { display: block; font-size: 11px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: 1px; }
.hizmet-cta-tel a { color: #fff; font-weight: 700; font-size: 17px; font-family: 'Baloo 2', sans-serif; }
.hizmet-cta-tel a:hover { color: var(--vurgu); }

/* ------------------------------ İletişim --------------------------------- */
/* Üst ikonlu bilgi kartları */
.iletisim-kartlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 34px; }
.iletisim-kart {
    background: var(--beyaz); border-radius: 16px; box-shadow: var(--golge); padding: 28px 22px;
    text-align: center; transition: var(--gecis); border-bottom: 3px solid transparent;
}
.iletisim-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-hover); border-bottom-color: var(--ana-renk); }
.iletisim-kart-ikon {
    width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff; margin-bottom: 14px; background: var(--ana-renk); box-shadow: 0 8px 18px rgba(255,122,89,.35);
}
.iletisim-kart:nth-child(2) .iletisim-kart-ikon { background: var(--ikincil); box-shadow: 0 8px 18px rgba(46,196,182,.35); }
.iletisim-kart:nth-child(3) .iletisim-kart-ikon { background: var(--mor); box-shadow: 0 8px 18px rgba(61,90,128,.35); }
.iletisim-kart:nth-child(4) .iletisim-kart-ikon { background: var(--vurgu); color: #5a3d00; box-shadow: 0 8px 18px rgba(255,194,75,.4); }
.iletisim-kart h4 { font-size: 16px; margin: 0 0 6px; color: var(--lacivert); font-family: 'Baloo 2'; }
.iletisim-kart p { font-size: 14px; color: var(--metin-acik); margin: 0; line-height: 1.5; word-break: break-word; }
.iletisim-kart p a { color: var(--metin-acik); }
.iletisim-kart p a:hover { color: var(--ana-renk); }

/* Form + harita iki kolon */
.iletisim-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.iletisim-form-kart { background: var(--beyaz); border-radius: 18px; box-shadow: var(--golge); padding: 34px; }
.iletisim-form-baslik { margin-bottom: 20px; }
.iletisim-form-baslik h3 { font-size: 23px; margin: 0 0 6px; color: var(--lacivert); }
.iletisim-form-baslik p { font-size: 14px; color: var(--metin-acik); margin: 0; }
.iletisim-form-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-whatsapp { background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.btn-whatsapp:hover { background: #1fb155; color: #fff; transform: translateY(-2px); }

.iletisim-harita-kart { border-radius: 18px; overflow: hidden; box-shadow: var(--golge); min-height: 420px; }
.harita, .harita iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.harita-bos {
    width: 100%; height: 100%; min-height: 420px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; background: var(--acik-gri); color: var(--metin-acik);
}
.harita-bos i { font-size: 54px; margin-bottom: 12px; color: var(--kenar); }

/* ------------------------------- Alt bilgi ------------------------------- */
.alt-bilgi { position: relative; background: #202436; color: #b9c0d0; padding-top: 70px; overflow: hidden; }
.alt-bilgi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ana-renk), var(--ikincil), var(--mor)); }
.alt-bilgi::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(circle at 85% 10%, rgba(255,122,89,.10), transparent 40%),
                      radial-gradient(circle at 10% 90%, rgba(46,196,182,.08), transparent 40%);
}
.alt-bilgi-ic { position: relative; z-index: 1; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 46px; }
.alt-bilgi h4 { color: #fff; margin-bottom: 20px; font-size: 17px; font-weight: 700; position: relative; padding-bottom: 12px; letter-spacing: .3px; }
.alt-bilgi h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--ana-renk); }
.alt-bilgi p { color: #9aa2b4; margin-bottom: 10px; font-size: 14.5px; line-height: 1.6; }
.alt-bilgi i { color: var(--ana-renk); }
.alt-bilgi p a { color: #9aa2b4; }
.alt-bilgi p a:hover { color: var(--vurgu); }
.alt-marka { text-align: center; }
.alt-sutun ul { list-style: none; }
.alt-sutun ul li a { color: #9aa2b4; display: inline-flex; align-items: center; padding: 6px 0; font-size: 14.5px; transition: var(--gecis); }
.alt-sutun ul li a::before { content: '\F285'; font-family: 'bootstrap-icons'; font-size: 10px; margin-right: 8px; color: var(--ana-renk); opacity: .7; transition: var(--gecis); }
.alt-sutun ul li a:hover { color: #fff; padding-left: 4px; }
.alt-sutun ul li a:hover::before { opacity: 1; }

.alt-logo { display: inline-block; margin-bottom: 20px; }
/* Logo çerçevesi: beyaz zemin, logo net görünsün */
.alt-logo-cerceve {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 24px; border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
    position: relative;
}
.alt-logo-cerceve::before, .alt-logo-cerceve::after {
    content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--ana-renk);
}
.alt-logo-cerceve::before { top: 7px; left: 7px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.alt-logo-cerceve::after { bottom: 7px; right: 7px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
.alt-logo-cerceve img { height: 96px; width: auto; max-width: 290px; object-fit: contain; display: block; }

/* Açıklama + sosyal ikonları saran ortalı çerçeve */
.alt-marka-kutu {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 24px 22px;
    text-align: center;
}
.alt-marka-kutu p { margin: 0 0 18px; color: #9aa2b4; line-height: 1.7; font-size: 14.5px; }
.alt-sosyal { display: flex; gap: 12px; justify-content: center; margin: 0; }
.alt-sosyal a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; transition: var(--gecis); }
.alt-sosyal a:hover { background: var(--ana-renk); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(255,122,89,.4); }

.telif { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: 14px; color: #8a8a9c; }
.telif-ic { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.telif-tasarim a { color: var(--vurgu); font-weight: 600; }
.telif-tasarim a:hover { color: var(--ana-renk); }

/* --------------------------- Sabit butonlar ------------------------------ */
/* Sol alt: hızlı iletişim kolonu (telefon + whatsapp, üst üste) */
.hizli-iletisim {
    position: fixed; left: 24px; bottom: 24px; z-index: 999;
    display: flex; flex-direction: column; gap: 12px;
}
.hizli-btn {
    width: 44px; height: 44px; border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    transition: transform .2s ease, box-shadow .2s ease; position: relative;
}
.hizli-btn:hover { color: #fff; transform: scale(1.1); }
/* Orijinal marka renkleri */
.hizli-fb { background: #1877f2; box-shadow: 0 6px 16px rgba(24,119,242,.42); }
.hizli-fb:hover { background: #1465d8; }
.hizli-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 6px 16px rgba(214,36,159,.42); }
.hizli-yt { background: #ff0000; box-shadow: 0 6px 16px rgba(255,0,0,.4); }
.hizli-yt:hover { background: #d90000; }
.hizli-tel { background: #2f7de1; box-shadow: 0 6px 16px rgba(47,125,225,.42); }
.hizli-tel:hover { background: #2567bd; }
.hizli-wa { background: #25d366; box-shadow: 0 6px 16px rgba(37,211,102,.42); }
.hizli-wa:hover { background: #1fb155; }
/* WhatsApp'a hafif nabız efekti (dikkat çeksin) */
.hizli-wa::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid #25d366; animation: hizliNabiz 2s ease-out infinite;
}
@keyframes hizliNabiz {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Sağ alt: yukarı çık */
.yukari-git { position: fixed; bottom: 24px; right: 24px; width: 50px; height: 50px; background: var(--ana-renk); color: #fff; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; z-index: 999; box-shadow: 0 8px 22px rgba(255,122,89,.45); }
.yukari-git.goster { display: flex; }
.yukari-git:hover { background: var(--ana-koyu); color: #fff; transform: scale(1.08); }

/* -------------------------------- Lightbox ------------------------------- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 30px; }
.lightbox.acik { display: flex; }
.lightbox img { max-width: 90%; max-height: 90%; border-radius: 10px; }
.lightbox-kapat { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; }

/* Lightbox slider (gezinmeli) */
.lightbox-slider { flex-direction: column; }
.lightbox-ust { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; color: #fff; z-index: 4; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); }
.lightbox-sayac { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.lightbox-araclar { display: flex; align-items: center; gap: 10px; }
.lb-arac { font-size: 18px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: var(--gecis); }
.lb-arac:hover { background: rgba(255,255,255,.26); }
.lb-arac.aktif { background: var(--ana-renk); }
#lbKapat { font-size: 20px; }

/* Görsel alanı: geniş açı yok, kontrollü boyut */
.lightbox-govde { display: flex; align-items: center; justify-content: center; width: auto; max-width: min(1000px, 84vw); max-height: 74vh; transition: max-height .3s ease; }
.lightbox-govde img { max-width: 100%; max-height: 74vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--gecis); z-index: 3; }
.lightbox-ok:hover { background: var(--ana-renk); }
.lightbox-ok.sol { left: 24px; }
.lightbox-ok.sag { right: 24px; }
.lightbox-alt { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 3px; z-index: 3; transition: bottom .3s ease; }
.lb-baslik { font-size: 16px; font-weight: 700; }
.lb-tarih { font-size: 13px; color: rgba(255,255,255,.65); }

/* Küçük resim şeridi (thumbnail) */
.lightbox-kucukler {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; gap: 10px; padding: 16px 20px; overflow-x: auto;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    transform: translateY(100%); transition: transform .3s ease;
}
.lightbox-kucukler.acik { transform: translateY(0); }
.lb-kucuk { flex: 0 0 auto; width: 92px; height: 64px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; background: none; opacity: .55; transition: var(--gecis); }
.lb-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.lb-kucuk:hover { opacity: .85; }
.lb-kucuk.aktif { opacity: 1; border-color: var(--ana-renk); }
/* Şerit açıkken alt bilgi ve görsel yukarı kaysın */
.lightbox.kucukler-acik .lightbox-alt { bottom: 110px; }
.lightbox.kucukler-acik .lightbox-govde { max-height: 60vh; }
.lightbox.kucukler-acik .lightbox-govde img { max-height: 60vh; }

/* -------------------------------- Video galeri --------------------------- */
/* Video albüm kartı oynat ikonu (albom-kart stilini paylaşır) */
.video-ustu { background: rgba(0,0,0,.28); }
.video-ustu .bi-play-fill { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: var(--ana-renk); border-radius: 50%; font-size: 30px; padding-left: 4px; }
.video-albom-kart .albom-ustu { opacity: 1; background: rgba(0,0,0,.12); }
.video-albom-kart:hover .albom-ustu { background: rgba(0,0,0,.3); }
.video-albom-kart .albom-tarih { margin-bottom: 0; }

/* Video oynatıcı lightbox */
.video-lightbox { flex-direction: column; }
.video-lightbox .lightbox-ust { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; color: #fff; }
.video-lightbox .lightbox-kapat { position: static; font-size: 24px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.12); transition: var(--gecis); }
.video-lightbox .lightbox-kapat:hover { background: rgba(255,255,255,.25); }
.video-lightbox-cerceve { position: relative; width: min(960px, 90%); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.video-lightbox-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =================== Veli Yorumları sayfası (form + liste) =============== */
.yorum-duzen { display: grid; grid-template-columns: 340px 1fr; gap: 34px; align-items: start; }

/* Sol: yorum formu (canlı tasarım) */
.yorum-form-kutu { background: var(--beyaz); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(41,61,94,.14); position: sticky; top: 24px; }
.yorum-form-baslik {
    position: relative; color: #fff; padding: 32px 24px 26px; text-align: center;
    background: linear-gradient(135deg, var(--ana-renk) 0%, #ff6a9a 55%, var(--mor) 100%);
    overflow: hidden;
}
/* Başlıkta hafif ışık süsü */
.yorum-form-baslik::before {
    content: ''; position: absolute; top: -40px; right: -30px; width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); border-radius: 50%;
}
.yorum-form-baslik::after {
    content: ''; position: absolute; bottom: -50px; left: -20px; width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(255,194,75,.28), transparent 70%); border-radius: 50%;
}
.yorum-form-baslik i {
    position: relative; z-index: 1; font-size: 30px; display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: 12px; color: var(--mor);
    background: var(--vurgu); border-radius: 50%; box-shadow: 0 8px 20px rgba(255,194,75,.5);
}
.yorum-form-baslik h3 { position: relative; z-index: 1; font-size: 23px; margin: 0; font-family: 'Baloo 2'; color: #fff; }
.yorum-form-baslik p { position: relative; z-index: 1; font-size: 13.5px; margin: 5px 0 0; opacity: .92; }
.yorum-form-govde { padding: 26px 22px 26px; }
.yorum-form .form-grup { position: relative; margin-bottom: 15px; }
.yorum-form .form-grup > i { position: absolute; left: 15px; top: 15px; color: var(--ana-renk); font-size: 15px; pointer-events: none; transition: var(--gecis); }
.yorum-form input, .yorum-form textarea {
    width: 100%; padding: 13px 14px 13px 42px; border: 1.5px solid var(--kenar); border-radius: 13px;
    font-family: inherit; font-size: 14px; color: var(--metin); background: #f7f9fc; transition: var(--gecis); outline: none;
}
.yorum-form textarea { resize: vertical; min-height: 120px; }
.yorum-form input:hover, .yorum-form textarea:hover { border-color: #cfd8e6; }
.yorum-form input:focus, .yorum-form textarea:focus { border-color: var(--ana-renk); background: #fff; box-shadow: 0 0 0 4px rgba(255,122,89,.14); }
.yorum-form .form-grup:focus-within > i { color: var(--mor); }
.yorum-form .btn-blok {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    margin-top: 4px; padding: 15px; font-size: 16px;
    background: var(--vurgu); color: #5a3d00; box-shadow: 0 10px 24px rgba(255,194,75,.45);
}
.yorum-form .btn-blok:hover { background: #ffb02e; color: #5a3d00; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,194,75,.55); }
.yorum-form-not { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--metin-acik); margin: 16px 0 0; }
.yorum-form-not i { color: var(--ikincil); font-size: 14px; }

/* Sağ: yorum listesi */
.yorum-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-content: start; }
.veli-yorum-kart {
    position: relative; background: var(--beyaz); border: 1px solid var(--kenar); border-radius: 16px;
    padding: 28px 26px 24px; box-shadow: var(--golge); transition: var(--gecis); overflow: hidden;
}
.veli-yorum-kart::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ana-renk); }
.veli-yorum-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-hover); }
.veli-yorum-tirnak { position: absolute; top: 14px; right: 18px; font-size: 40px; color: var(--mor); opacity: .1; line-height: 1; }
.veli-yorum-yildiz { color: var(--vurgu); font-size: 14px; margin-bottom: 12px; letter-spacing: 1px; }
.veli-yorum-yildiz .bi-star { color: #d9e0ea; }
.veli-yorum-metin { color: var(--metin-acik); font-size: 14.5px; line-height: 1.75; margin-bottom: 20px; position: relative; z-index: 1; }
.veli-yorum-kisi { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--kenar); padding-top: 16px; }
.veli-yorum-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--mor); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 19px; font-family: 'Baloo 2';
}
.veli-yorum-avatar img { width: 100%; height: 100%; object-fit: cover; }
.veli-yorum-bilgi strong { display: block; font-size: 15px; color: var(--lacivert); }
.veli-yorum-bilgi span { font-size: 13px; color: var(--metin-acik); }
.veli-yorum-bos { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--metin-acik); }
.veli-yorum-bos i { font-size: 54px; color: var(--kenar); display: block; margin-bottom: 14px; }

@media (max-width: 992px) {
    .yorum-duzen { grid-template-columns: 1fr; }
    .yorum-form-kutu { position: static; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 680px) {
    .yorum-liste { grid-template-columns: 1fr; }
}

/* --------------------------- Slogan şeridi ------------------------------- */
.slogan-serit { background: linear-gradient(90deg, var(--ikincil), var(--ikincil-koyu)); color: #fff; padding: 20px 0; }
.slogan-serit .kapsayici { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.slogan-serit i { font-size: 30px; color: var(--vurgu); }
.slogan-serit p { font-size: 18px; font-weight: 600; margin: 0; }

/* --------------------------- Neden biz arka plan ------------------------- */
.neden-biz { background: var(--arka); }

/* Neden Biz: ortada resim, iki yanda ikonlu maddeler */
.neden-duzen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.neden-sutun { display: flex; flex-direction: column; gap: 38px; }
.neden-oge { display: flex; align-items: flex-start; gap: 16px; }
.neden-sol .neden-oge { text-align: right; }
.neden-sol .neden-metin { order: 1; }
.neden-sol .neden-ikon { order: 2; }

.neden-metin h3 { font-size: 18px; margin-bottom: 6px; color: var(--lacivert); }
.neden-metin p { font-size: 14px; color: var(--metin-acik); line-height: 1.6; }

/* Madde başlıkları tek modern renk (diğer kartlarla aynı) */
.neden-metin h3 { color: #5a4bd4; }

/* Scallop (çiçek/dalgalı kenarlı) ikon rozeti */
.neden-ikon {
    flex-shrink: 0; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff; position: relative;
    background: var(--ikincil-koyu);
    /* dalgalı kenar görünümü için mask benzeri radial köşeler */
    border-radius: 42% 58% 54% 46% / 52% 44% 56% 48%;
    transition: var(--gecis);
}
.neden-oge:hover .neden-ikon { transform: rotate(8deg) scale(1.06); }

/* Madde ikonları canlı renk döngüsü (daire ikonlarıyla uyumlu) */
.neden-ikon { background: #6c5ce7; }
.neden-sol .neden-oge:nth-child(4n+1) .neden-ikon { background: #6c5ce7; }
.neden-sol .neden-oge:nth-child(4n+2) .neden-ikon { background: #ff7a3d; }
.neden-sol .neden-oge:nth-child(4n+3) .neden-ikon { background: #3fb5c4; }
.neden-sag .neden-oge:nth-child(4n+1) .neden-ikon { background: #8bc34a; }
.neden-sag .neden-oge:nth-child(4n+2) .neden-ikon { background: #3fb5c4; }
.neden-sag .neden-oge:nth-child(4n+3) .neden-ikon { background: #ff7a3d; }

/* Ortadaki görsel */
.neden-gorsel { width: 320px; max-width: 100%; }
.neden-gorsel img { width: 100%; border-radius: 20px; display: block; }
.neden-gorsel-yer {
    width: 320px; height: 420px; max-width: 100%;
    border-radius: 20px; background: linear-gradient(135deg, var(--ikincil), var(--mor));
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 90px;
}

/* --------------------------- Hoşgeldin görsel yeri ----------------------- */
.hosgeldin-gorsel.gorsel-yer { min-height: 360px; border-radius: 24px; background: linear-gradient(135deg, var(--ikincil), var(--mor)); position: relative; box-shadow: var(--golge); }
.hosgeldin-gorsel.gorsel-yer::after { content: '\F5A2'; font-family: 'bootstrap-icons'; font-size: 120px; color: rgba(255,255,255,.55); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hosgeldin .etiket { display: inline-block; color: var(--ikincil-koyu); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; }

/* a etiketli özellik kartı için */
a.ozellik-kart { color: inherit; text-decoration: none; display: block; }
a.ozellik-kart:hover { color: inherit; }

/* --------------------------- Kayıt CTA bandı ----------------------------- */
.cta-kayit {
    position: relative;
    background: linear-gradient(120deg, var(--lacivert), var(--mor));
    overflow: hidden;
    padding: 34px 0;
}
/* Çokgen (low-poly) doku deseni */
.cta-kayit::before {
    content: ''; position: absolute; inset: 0; opacity: .28; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.25' stroke-width='1'%3E%3Cpath d='M0 40 L70 0 L140 55 L80 120 L0 90 Z'/%3E%3Cpath d='M140 55 L220 10 L300 50 L250 120 L140 130 Z'/%3E%3Cpath d='M70 0 L140 55 L220 10'/%3E%3Cpath d='M80 120 L140 130 L250 120'/%3E%3Cpath d='M0 90 L80 120 L140 160'/%3E%3Cpath d='M250 120 L300 160'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 340px 180px;
}
.cta-ic { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; }
.cta-ic h2 { margin-bottom: 6px; }
.cta-ic p { margin: 0; }
.btn-buyuk { padding: 16px 38px; font-size: 18px; }

/* --------------------------- Galeri albüm kartları ----------------------- */
.albom-kart { display: block; background: transparent; border-radius: 0; overflow: visible; transition: var(--gecis); color: inherit; }
.albom-kart:hover { color: inherit; }
.albom-kapak { position: relative; height: 180px; overflow: hidden; background: var(--acik-gri); border-radius: 10px; }
.albom-kapak img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.albom-kart:hover .albom-kapak img { transform: scale(1.07); }
.albom-adet { position: absolute; left: 14px; bottom: 14px; background: rgba(90,75,212,.9); color: #fff; padding: 5px 12px; border-radius: 30px; font-size: 13px; font-weight: 700; backdrop-filter: blur(3px); }
.albom-ustu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(90,75,212,.45); color: #fff; font-size: 40px; opacity: 0; transition: var(--gecis); }
.albom-ustu .bi-infinity { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: var(--ana-renk); border-radius: 50%; font-size: 24px; }
.albom-kart:hover .albom-ustu { opacity: 1; }
.albom-govde { padding: 12px 2px 0; }
.albom-tarih { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-acik); font-weight: 600; margin-bottom: 8px; }
.albom-tarih i { color: var(--mor); }
.albom-govde h3 { font-size: 19px; margin: 0; color: var(--ana-renk); font-weight: 700; font-family: 'Baloo 2'; transition: var(--gecis); }
.albom-kart:hover .albom-govde h3 { color: var(--ana-koyu); }
.albom-govde p { font-size: 14px; color: var(--metin-acik); margin-top: 4px; }

/* --------------------------- Galeri grid / slider ------------------------ */
/* Tam genişlik galeri şeridi (CTA'ya bitişik) */
.galeri-serit-bolum { overflow: hidden; width: 100%; line-height: 0; }
.galeri-serit-ray { display: flex; }

/* <=4 kategori: eşit genişlikte sabit şerit (tüm genişliği doldurur) */
.galeri-serit-bolum[data-slider="0"] .galeri-serit-ray { width: 100%; }
.galeri-serit-bolum[data-slider="0"] .galeri-serit-oge { flex: 1 1 0; min-width: 0; }

/* >=5 kategori: otomatik kayan sonsuz slider */
.galeri-serit-bolum[data-slider="1"] .galeri-serit-ray {
    width: max-content; animation: galeriKay 30s linear infinite;
}
.galeri-serit-bolum[data-slider="1"]:hover .galeri-serit-ray { animation-play-state: paused; }
.galeri-serit-bolum[data-slider="1"] .galeri-serit-oge { flex: 0 0 25vw; max-width: 340px; }
@keyframes galeriKay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Şerit öğesi */
.galeri-serit-oge { position: relative; height: 300px; overflow: hidden; }
.galeri-serit-oge img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.galeri-serit-oge:hover img { transform: scale(1.06); }
.galeri-serit-ustu {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px;
    background: linear-gradient(0deg, rgba(90,75,212,.55), rgba(108,92,231,.40));
    opacity: 0; transition: var(--gecis);
}
.galeri-serit-oge:hover .galeri-serit-ustu { opacity: 1; }
.galeri-serit-ikon {
    width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--mor);
    display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
    transform: translateY(12px); transition: var(--gecis);
}
.galeri-serit-oge:hover .galeri-serit-ikon { transform: translateY(0); }
.galeri-serit-ikon:hover { background: var(--vurgu); color: #5a3d00; }

/* --------------------------- Sınıf kartları ------------------------------ */
.sinif-kart { background: var(--beyaz); border-radius: var(--radius); overflow: hidden; box-shadow: var(--golge); transition: var(--gecis); border-top: 5px solid #6c5ce7; }
.sinif-kart .sinif-govde h3 { color: #5a4bd4; }
.sinif-kart:hover { transform: translateY(-8px); box-shadow: var(--golge-hover); }
.sinif-resim { position: relative; height: 220px; background: var(--acik-gri); }
.sinif-resim img { width: 100%; height: 100%; object-fit: cover; }
.sinif-saat { position: absolute; left: 16px; bottom: 16px; background: rgba(41,61,94,.85); color: #fff; padding: 6px 14px; border-radius: 30px; font-size: 13px; font-weight: 600; backdrop-filter: blur(3px); }
.sinif-govde { padding: 22px; }
.sinif-govde h3 { font-size: 21px; margin-bottom: 10px; }
.sinif-etiketler { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sinif-etiketler span { background: var(--arka); color: var(--ikincil-koyu); padding: 5px 12px; border-radius: 30px; font-size: 13px; font-weight: 700; }
.sinif-govde p { color: var(--metin-acik); font-size: 14px; }

/* --------------- Yatay sınıf kartları (sol görsel + sağ bilgi) ----------- */
.sinif-yatay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.sinif-yatay-kart {
    display: flex; background: var(--beyaz); border-radius: 18px; overflow: hidden;
    box-shadow: var(--golge); transition: var(--gecis);
    border: 1px solid var(--kenar);
}
.sinif-yatay-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-hover); border-color: transparent; }

/* Sol görsel bölümü */
.sinif-yatay-resim { flex: 0 0 42%; position: relative; background: var(--acik-gri); overflow: hidden; }
.sinif-yatay-resim img { width: 100%; height: 100%; object-fit: cover; transition: var(--gecis); }
.sinif-yatay-kart:hover .sinif-yatay-resim img { transform: scale(1.05); }

/* Sağ bilgi paneli */
.sinif-yatay-govde { flex: 1; padding: 22px 24px; display: flex; flex-direction: column; }
.sinif-saat-rozet {
    display: inline-block; align-self: flex-start;
    background: linear-gradient(135deg, #6c5ce7, #a765ac); color: #fff;
    padding: 6px 16px; border-radius: 30px; font-size: 12.5px; font-weight: 700; margin-bottom: 14px;
    box-shadow: 0 6px 16px rgba(108,92,231,.3);
}
.sinif-saat-rozet i { margin-right: 4px; }
.sinif-yatay-govde h3 { font-size: 22px; color: #5a4bd4; margin-bottom: 12px; }
.sinif-bilgi { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sinif-bilgi span { font-size: 14px; color: var(--metin); }
.sinif-bilgi i { color: var(--ana-renk); margin-right: 6px; }
.sinif-bilgi strong { color: var(--lacivert); }
.sinif-yatay-govde p { color: var(--metin-acik); font-size: 14px; line-height: 1.6; margin-top: auto; }

/* Her karta dönüşümlü renk vurgusu (sol görsel üstüne ince şerit) */
.sinif-yatay-kart:nth-child(3n+1) .sinif-yatay-resim { border-right: 4px solid #6c5ce7; }
.sinif-yatay-kart:nth-child(3n+2) .sinif-yatay-resim { border-right: 4px solid #ff7a3d; }
.sinif-yatay-kart:nth-child(3n+2) .sinif-saat-rozet { background: linear-gradient(135deg, #ff8a3d, #ff6b3d); box-shadow: 0 6px 16px rgba(255,122,61,.3); }
.sinif-yatay-kart:nth-child(3n+2) .sinif-yatay-govde h3 { color: #e8601f; }
.sinif-yatay-kart:nth-child(3n+3) .sinif-yatay-resim { border-right: 4px solid #3fb5c4; }
.sinif-yatay-kart:nth-child(3n+3) .sinif-saat-rozet { background: linear-gradient(135deg, #3fb5c4, #2f9aa8); box-shadow: 0 6px 16px rgba(63,181,196,.3); }
.sinif-yatay-kart:nth-child(3n+3) .sinif-yatay-govde h3 { color: #2f8b98; }

/* --------------------------- Sayaç şeridi -------------------------------- */
.sayac-serit {
    position: relative;
    background: var(--ikincil-koyu);
    color: #fff; padding: 34px 0;
    overflow: hidden;
}
/* Hafif, soluk geometrik arka plan deseni */
.sayac-serit::before {
    content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Crect x='70' y='12' width='18' height='18' rx='3'/%3E%3Cpath d='M15 80 l10 18 l10 -18 Z'/%3E%3Ccircle cx='95' cy='90' r='8'/%3E%3Cpath d='M55 55 q8 -14 16 0 q8 14 16 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 150px 150px;
}
.sayac-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Kesik çizgili kutu + yatay ikon/sayı düzeni */
.sayac-kutu {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    border: 2px dashed rgba(255,255,255,.4);
    border-radius: 10px; padding: 18px 20px;
    transition: var(--gecis);
}
.sayac-kutu:hover { border-color: var(--vurgu); background: rgba(255,255,255,.06); }
.sayac-kutu > i { font-size: 40px; color: rgba(255,255,255,.9); flex-shrink: 0; }
.sayac-metin { text-align: left; }
.sayac-sayi { font-family: 'Baloo 2', sans-serif; font-size: 38px; font-weight: 700; line-height: 1; display: block; }
.sayac-metin p { margin: 2px 0 0; opacity: .9; font-weight: 600; font-size: 14px; }

/* --------------------------- Arama sonuçları ----------------------------- */
.arama-sonuc-form { display: flex; gap: 10px; }
.arama-sonuc-form input { flex: 1; padding: 13px 18px; border: 2px solid var(--kenar); border-radius: 12px; font-size: 16px; font-family: inherit; outline: none; }
.arama-sonuc-form input:focus { border-color: var(--ana-renk); }
.arama-liste { display: flex; flex-direction: column; gap: 14px; }
.arama-oge { display: block; background: var(--beyaz); border-radius: 14px; padding: 20px 22px; box-shadow: var(--golge); border-left: 4px solid var(--ana-renk); transition: var(--gecis); }
.arama-oge:hover { transform: translateX(4px); box-shadow: var(--golge-hover); }
.arama-tur { display: inline-block; background: var(--arka); color: var(--ikincil-koyu); font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.arama-oge h3 { font-size: 19px; margin-bottom: 6px; color: var(--metin); }
.arama-oge p { color: var(--metin-acik); font-size: 14px; }

/* ========================================================================= */
/* ============================= RESPONSIVE ================================ */
/* Büyükten küçüğe sıralı. Breakpoint: 1200 > 992 > 860 > 768 > 576 > 400   */
/* ========================================================================= */

/* ---- ≤1200px: büyük tablet / küçük masaüstü ---- */
@media (max-width: 1200px) {
    .kapsayici { max-width: 100%; }
}

/* ---- ≤992px: tablet (çok sütunlu grid'ler 2 sütun) ---- */
@media (max-width: 992px) {
    .kart-4 { grid-template-columns: repeat(2, 1fr); }
    .kart-3 { grid-template-columns: repeat(2, 1fr); }
    .daire-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .kadro-grid { grid-template-columns: repeat(2, 1fr); }
    .kadro-p-resim { height: 200px; }
    .sayac-grid { grid-template-columns: repeat(2, 1fr); }
    .haber-grid { grid-template-columns: repeat(2, 1fr); }
    .hizmet-kart-grid { grid-template-columns: repeat(2, 1fr); }
    .hizmet-kart { padding: 28px 20px; }
    .hizmet-liste-grid { grid-template-columns: 1fr; }
    .medya-grid { grid-template-columns: repeat(2, 1fr); }
    .icerik-kart-grid { grid-template-columns: 1fr; }
    .galeri-grid { grid-template-columns: repeat(2, 1fr); }
    .iletisim-kartlar { grid-template-columns: repeat(2, 1fr); }
    .iletisim-alt { grid-template-columns: 1fr; }
    .iletisim-harita-kart { min-height: 320px; }
    .harita, .harita iframe, .harita-bos { min-height: 320px; }
    .alt-bilgi-ic { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .sinif-yatay-grid { grid-template-columns: 1fr; }
    /* Hoşgeldin / Neden Biz: resim üstte, metin altta */
    .hosgeldin { grid-template-columns: 1fr; }
    .hosgeldin-gorsel { order: -1; }
    .hosgeldin-bolum { padding-bottom: 90px; }
    .sus-yildiz { display: none; }
    /* Anasayfa galeri şeridi */
    .galeri-kutu[data-slider="0"] .galeri-ray { grid-template-columns: repeat(2, 1fr); }
    .galeri-kutu[data-slider="1"] .galeri-kart-s { flex: 0 0 240px; }
    /* Okulumuz: yan menü üstte, içerik altta */
    .okulumuz-duzen { grid-template-columns: 1fr; }
    .okulumuz-menu { position: static; }
    .okulumuz-menu-cta { display: none; }
    .okulumuz-icerik .kadro-grid-2 { grid-template-columns: 1fr; }
    .hk-kapak { height: 240px; }
}

/* ---- ≤860px: mobil menü devreye girer + header/slider ---- */
@media (max-width: 860px) {
    /* Header, overlay ve panelin üstünde kalsın ki hamburger/X her zaman tıklanabilsin */
    .ana-menu { z-index: 1102; }
    /* Hamburger menü */
    .menu-ac { display: block; order: 3; position: relative; z-index: 1103; }
    .menu-arama { order: 2; }
    .ana-menu-ic { justify-content: space-between; min-height: 76px; }
    .menu-liste {
        position: fixed; top: 0; right: -100%; width: min(320px, 86vw); height: 100vh;
        background: #fff; flex-direction: column; align-items: stretch; padding: 84px 16px 24px;
        box-shadow: -10px 0 40px rgba(0,0,0,.18); transition: right .35s ease; overflow-y: auto; gap: 0;
        margin-left: 0; z-index: 1101;
    }
    .menu-liste.acik { right: 0; }
    .menu-oge > a { padding: 15px 14px; border-bottom: 1px solid var(--kenar); border-radius: 0; font-size: 16px; }
    .menu-oge > a::after { display: none; }
    .menu-oge.acilir:hover > a i { transform: none; }
    .menu-oge.acilir.acik > a i { transform: rotate(180deg); }
    .alt-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: none; border-radius: 0; padding: 0 0 6px 14px; display: none; min-width: 0; }
    .alt-menu::before { display: none; }
    .menu-oge.acilir.acik .alt-menu { display: block; transform: none; }
    .alt-menu li a { padding: 12px 14px; }
    /* Logo mobilde */
    .logo-resim { height: 54px; max-width: 220px; }
    .logo-yazi { font-size: 19px; }
    /* Üst bar ortalı */
    .ust-bar-ic { justify-content: center; }
    .ust-iletisim { text-align: center; gap: 18px; }
    .ust-iletisim a { font-size: 13px; }
    /* Slider */
    .slider-oge { min-height: 420px; }
    .slider-metin { padding: 80px 16px 90px; }
    .slider-metin h2 { font-size: 32px; }
    .slider-metin p { font-size: 16px; }
    .slider-ok { width: 44px; height: 44px; font-size: 18px; }
    .slider-ok.sol { left: 10px; }
    .slider-ok.sag { right: 10px; }
    /* Bölüm ölçekleme */
    .bolum { padding: 54px 0; }
    .bolum-baslik h2 { font-size: 30px; }
}

/* ---- ≤768px: büyük telefon / küçük tablet ---- */
@media (max-width: 768px) {
    .kart-4, .kart-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .daire-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .hizmet-kart-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .medya-grid { grid-template-columns: 1fr; }
    .iletisim-kartlar { grid-template-columns: repeat(2, 1fr); }
    .iletisim-form-kart { padding: 26px 22px; }
    .yorum-liste { grid-template-columns: 1fr; }
    /* Neden Biz tek sütun */
    .neden-duzen { grid-template-columns: 1fr; gap: 36px; }
    .neden-gorsel { order: -1; margin: 0 auto; }
    .neden-sol .neden-oge, .neden-sag .neden-oge { text-align: left; }
    .neden-sol .neden-metin { order: 2; }
    .neden-sol .neden-ikon { order: 1; }
    /* Veli yorumları arka plan */
    .yorum-bolum { background-attachment: scroll; padding: 72px 16px 80px; }
    .yorum-kart-cam { padding: 46px 22px 32px; }
    .yorum-soz { font-size: 16px; line-height: 1.7; }
    .yorum-kisi-ad { font-size: 18px; }
    /* Galeri lightbox: araçlar ve görsel ölçekleme */
    .lightbox-ust { padding: 0 16px; }
    .lightbox-govde, .lightbox-govde img { max-height: 66vh; }
    .lightbox.kucukler-acik .lightbox-govde, .lightbox.kucukler-acik .lightbox-govde img { max-height: 52vh; }
    .lb-kucuk { width: 72px; height: 52px; }
    .lightbox-ok { width: 42px; height: 42px; font-size: 18px; }
    .lightbox-ok.sol { left: 8px; }
    .lightbox-ok.sag { right: 8px; }
    .video-lightbox-cerceve { width: 92%; }
    /* Tipografi */
    .hosgeldin h2 { font-size: 28px; }
    .sayfa-hero { padding: 48px 0 44px; }
    .sayfa-hero-yazi h1 { font-size: 30px; }
    .sayfa-hero-ic { justify-content: flex-start; }
}

/* ---- ≤576px: telefon (her şey tek sütun) ---- */
@media (max-width: 576px) {
    .kapsayici { padding: 0 16px; }
    .bolum { padding: 44px 0; }
    .bolum-baslik { margin-bottom: 30px; }
    .bolum-baslik h2 { font-size: 25px; }
    .bolum-baslik p { font-size: 14px; }

    /* Tüm kart ızgaraları tek sütun */
    .kart-4, .kart-3, .kart-2 { grid-template-columns: 1fr; gap: 20px; }
    .ozellik-kart { padding: 30px 22px; }
    .ozellik-ikon { width: 70px; height: 70px; font-size: 32px; }
    .daire-grid { grid-template-columns: 1fr; gap: 28px; }
    .daire-ikon { width: 116px; height: 116px; font-size: 42px; }
    .kadro-grid { grid-template-columns: 1fr; }
    .sayac-grid { grid-template-columns: 1fr; gap: 16px; }
    .haber-grid { grid-template-columns: 1fr; }
    /* Hizmet kartları: mobilde kompakt yatay liste (ikon solda, metin sağda) */
    .hizmet-kart-grid { grid-template-columns: 1fr; gap: 14px; }
    .hizmet-kart {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "ikon baslik" "ikon metin" "devam devam";
        align-items: center; column-gap: 16px; row-gap: 2px;
        padding: 18px 18px 16px; border-radius: 16px;
    }
    .hizmet-kart::before { height: 4px; transform: scaleX(1); } /* mobilde şerit her zaman görünür, sade */
    .hizmet-kart-no { display: none; }
    .hizmet-kart-ikon {
        grid-area: ikon; width: 54px; height: 54px; margin-bottom: 0; border-radius: 14px;
        font-size: 24px; align-self: start;
    }
    .hizmet-kart h3 { grid-area: baslik; font-size: 17px; margin-bottom: 2px; }
    .hizmet-kart p { grid-area: metin; font-size: 13px; line-height: 1.55; margin-bottom: 0; }
    .hizmet-kart-devam {
        grid-area: devam; width: 100%; margin-top: 12px; padding-top: 12px; font-size: 13px;
    }
    .hizmet-kart:hover { transform: none; } /* mobilde kalkma efekti kapalı */
    .hizmet-liste-grid { grid-template-columns: 1fr; }
    .medya-grid { grid-template-columns: 1fr; }
    .galeri-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .galeri-oge { height: 150px; }
    .iletisim-kartlar { grid-template-columns: 1fr; }
    .iletisim-form-kart { padding: 22px 18px; }
    .iletisim-form-dugmeler { flex-direction: column; }
    .iletisim-form-dugmeler .btn { width: 100%; justify-content: center; }

    /* Formlar tek sütun */
    .form-ikili, .form-uclu { grid-template-columns: 1fr; gap: 0; }
    .form-kart { padding: 24px 20px; }

    /* Yemek menüsü öğünleri alt alta */
    .yemek-ogunler { grid-template-columns: 1fr; }
    .yemek-ogun { border-right: none; border-bottom: 1px solid var(--kenar); }
    .yemek-ogun:last-child { border-bottom: none; }

    /* Anasayfa galeri şeridi tek sütun */
    .galeri-kutu[data-slider="0"] .galeri-ray { grid-template-columns: 1fr; }
    .galeri-kutu[data-slider="1"] .galeri-kart-s { flex: 0 0 200px; }

    /* Yatay sınıf kartı: görsel üstte, bilgi altta */
    .sinif-yatay-kart { flex-direction: column; }
    .sinif-yatay-resim { flex: none; height: 200px; border-right: none !important; }

    /* Footer tek sütun + telif ortalı */
    .alt-bilgi { padding-top: 54px; }
    .alt-bilgi-ic { grid-template-columns: 1fr; gap: 30px; }
    .telif-ic { flex-direction: column; text-align: center; gap: 6px; }
    .alt-logo-cerceve img { height: 72px; }

    /* Logo & üst bar */
    .logo-amblem { width: 44px; height: 44px; }
    .logo-resim { height: 48px; max-width: 200px; }
    .logo-yazi { font-size: 17px; }
    /* Üst bar: telefon + e-posta tek satır, küçük punto */
    .ust-iletisim { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 12px; }
    .ust-iletisim a { font-size: 11px; gap: 5px; }
    .ust-iletisim a i { width: 18px; height: 18px; font-size: 10px; }
    .ust-sag { display: none; }

    /* Slider */
    .slider-oge { min-height: 360px; }
    .slider-metin { padding: 64px 14px 72px; }
    .slider-metin h2 { font-size: 26px; }
    .slider-metin p { font-size: 15px; }
    .slider-metin .btn-ana { padding: 12px 26px; font-size: 15px; }

    /* Hero (breadcrumb) */
    .sayfa-hero { padding: 38px 0 40px; }
    .sayfa-hero-ic { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sayfa-hero-yazi h1 { font-size: 25px; }
    .sayfa-hero-alt { font-size: 14px; }
    .sayfa-hero-yol { font-size: 13px; padding: 8px 14px; }
    .sayfa-hero-bulut svg { height: 22px; }

    /* Galeri lightbox telefonda */
    .lightbox { padding: 16px; }
    .lightbox-govde, .lightbox-govde img { max-height: 60vh; }
    .lightbox-araclar { gap: 6px; }
    .lb-arac { width: 38px; height: 38px; font-size: 16px; }
    .lb-baslik { font-size: 14px; }

    /* Sabit butonlar biraz küçül (mobil) */
    .hizli-iletisim { left: 16px; bottom: 16px; gap: 9px; }
    .hizli-btn { width: 42px; height: 42px; font-size: 19px; }
    .yukari-git { width: 44px; height: 44px; right: 16px; bottom: 16px; }
}

/* ---- ≤400px: küçük telefon ---- */
@media (max-width: 400px) {
    .bolum-baslik h2 { font-size: 23px; }
    .slider-metin h2 { font-size: 23px; }
    .galeri-grid { grid-template-columns: 1fr; }
    .galeri-oge { height: 220px; }
    .daire-ikon { width: 104px; height: 104px; font-size: 38px; }
    .iletisim-kart { padding: 24px 18px; }
    .hizmet-kart-ikon { width: 48px; height: 48px; font-size: 21px; border-radius: 12px; }
    .hizmet-kart { column-gap: 13px; padding: 16px 15px 14px; }
    .hizmet-kart h3 { font-size: 16px; }
    /* Üst bar çok dar ekranda da tek satır kalsın */
    .ust-iletisim { gap: 10px; }
    .ust-iletisim a { font-size: 10px; gap: 4px; }
    .ust-iletisim a i { width: 16px; height: 16px; font-size: 9px; }
}