:root{
/* Marka paleti — logo paketindeki degerler */
--marka:#3C5F41; /* ana yesil: butonlar, basliklar, koyu zeminler */
--marka-koyu:#2E4B33; /* hover, aktif durum */
--marka-acik:#E8EFE9; /* cok acik yesil: bolum bantlari */
--vurgu:#D9A441; /* hardal: yalnizca kucuk vurgular */
--vurgu-acik:#E9C079;
/* Metin ve zemin */
--metin:#25332A; /* ana metin, krem uzerinde */
--metin-2:#55655A; /* ikincil metin */
--kagit:#F6F1E7; /* krem zemin */
--kagit-2:#E8EFE9; /* ikinci zemin (acik yesil bant) */
--cizgi:#DCD6C6;
--beyaz:#FFFFFF;
--wa:#128C4B; /* WhatsApp dugmesi, marka yesilinden ayirt edilsin */
/* Eski adlar, geriye donuk uyum */
--murekkep:var(--metin);
--murekkep-2:var(--metin-2);
--kehribar:var(--marka);
--kehribar-acik:var(--vurgu-acik);
--yesil:var(--wa);
--d:"Fraunces",Georgia,"Times New Roman",serif;
--b:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--m:"Nunito",system-ui,sans-serif;
--pad:clamp(18px,5vw,64px);
--e:cubic-bezier(.22,.61,.36,1);
--golge:0 8px 30px rgba(37,51,42,.07);
--golge2:0 18px 46px rgba(37,51,42,.13);
--yuvarlak:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--kagit);color:var(--murekkep);
font-family:var(--b);font-size:16.5px;line-height:1.68;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3{font-family:var(--d);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5.6vw,68px)}
h2{font-size:clamp(27px,3.8vw,46px)}
h3{font-size:clamp(19px,1.9vw,23px);line-height:1.25}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.k{font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--kehribar)}
:focus-visible{outline:2.5px solid var(--kehribar);outline-offset:3px;border-radius:6px}
section{padding:clamp(56px,8vw,112px) 0}
/* ── doldurulacak alan isareti ──────────────────────────────
Musteriden bilgi gelmeden uydurma yazi koymuyoruz. Bu
isaretli yerler icerik gelince duz metne donusecek. */
.doldur{border-bottom:1.5px dotted var(--kehribar);color:var(--murekkep-2);
font-style:italic;white-space:nowrap}
/* ── ust bar ─────────────────────────────────────────────── */
.ust{position:sticky;top:0;z-index:60;background:rgba(246,241,231,.88);
backdrop-filter:blur(12px);border-bottom:1px solid transparent;
transition:border-color .3s var(--e),box-shadow .3s var(--e)}
.ust.kaydi{border-bottom-color:var(--cizgi);box-shadow:0 4px 20px rgba(37,51,42,.05)}
.ust .wrap{display:flex;align-items:center;gap:18px;height:76px}
.marka{font-family:var(--d);font-size:20px;letter-spacing:-.01em;margin-right:auto}
.marka span{color:var(--kehribar)}
.menu{display:flex;gap:26px;font-size:14.5px;font-weight:500}
.menu a{position:relative;padding:4px 0;color:var(--murekkep-2)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
background:var(--kehribar);transition:width .28s var(--e)}
.menu a:hover{color:var(--murekkep)}
.menu a:hover::after{width:100%}
.dugme{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;
font-weight:600;font-size:14.5px;transition:transform .22s var(--e),box-shadow .22s var(--e)}
.dugme-dolu{background:var(--murekkep);color:var(--kagit)}
.dugme-dolu:hover{transform:translateY(-2px);box-shadow:var(--golge2)}
.dugme-cizgi{border:1.5px solid var(--cizgi);color:var(--murekkep)}
.dugme-cizgi:hover{border-color:var(--murekkep);transform:translateY(-2px)}
.dugme-wa{background:var(--yesil);color:#fff}
.dugme-wa:hover{transform:translateY(-2px);box-shadow:var(--golge2)}
@media(max-width:860px){.menu{display:none}}
/* ── hero ────────────────────────────────────────────────── */
.hero{padding:clamp(38px,5vw,74px) 0 clamp(46px,6vw,86px)}
.hero-ic{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);
align-items:center}
.hero h1{margin:16px 0 0}
/* Okuma cizgisi: baslikta bir satirin uzerinden gecen vurgu.
Hizli okumada goz takibini cagristiriyor. */
.vurgu{position:relative;display:inline-block}
.vurgu::before{content:"";position:absolute;left:-4px;right:-4px;bottom:.1em;height:.42em;
background:var(--vurgu);opacity:.5;border-radius:3px;transform-origin:left;
transform:scaleX(0);animation:cizgi 1.1s .45s var(--e) forwards}
@keyframes cizgi{to{transform:scaleX(1)}}
.hero-alt{margin-top:22px;font-size:clamp(16px,1.5vw,18.5px);color:var(--murekkep-2);
max-width:52ch}
.hero-dugmeler{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-not{margin-top:22px;font-size:14px;color:var(--murekkep-2);
display:flex;align-items:center;gap:9px}
.nokta{width:8px;height:8px;border-radius:50%;background:var(--marka);flex:none;
box-shadow:0 0 0 4px rgba(60,95,65,.18)}
.hero-gorsel{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--golge2)}
.hero-gorsel img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11}
.hero-rozet{position:absolute;left:18px;bottom:18px;background:rgba(246,241,231,.94);
border-left:4px solid var(--vurgu);
backdrop-filter:blur(6px);border-radius:14px;padding:13px 17px;box-shadow:var(--golge);
font-size:13.5px;font-weight:600;line-height:1.35}
.hero-rozet b{display:block;font-family:var(--d);font-size:22px;font-weight:400;
color:var(--marka);line-height:1}
@media(max-width:900px){.hero-ic{grid-template-columns:1fr}
.hero-gorsel{order:-1}}
/* ── serit ───────────────────────────────────────────────── */
.serit{background:var(--murekkep);color:var(--kagit);padding:0}
.serit .wrap{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);
padding-top:34px;padding-bottom:34px}
.serit-oge{flex:1 1 200px}
.serit-oge b{display:block;font-family:var(--d);font-size:clamp(21px,2.2vw,29px);
font-weight:400;color:var(--vurgu);line-height:1.16;margin-bottom:4px}
.serit-oge span{font-size:14px;opacity:.82}
/* Koyu zeminde doldurulacak alan isareti okunur kalsin */
.serit .doldur,.hakkimda .doldur,.band .doldur{color:rgba(246,241,231,.78);
border-bottom-color:var(--kehribar-acik)}
/* ── bolum basligi ───────────────────────────────────────── */
.bas{max-width:62ch;margin-bottom:clamp(30px,4vw,52px)}
.bas h2{margin:12px 0 0}
.bas p{margin-top:16px;color:var(--murekkep-2)}
/* ── kazanim kartlari ────────────────────────────────────── */
.izgara-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.izgara-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.izgara-4{grid-template-columns:1fr}}
.kazanim{background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
padding:26px 24px;transition:transform .3s var(--e),box-shadow .3s var(--e),
border-color .3s var(--e)}
.kazanim:hover{transform:translateY(-4px);box-shadow:var(--golge);border-color:var(--kehribar-acik)}
.kazanim .sayi{font-family:var(--m);font-size:12px;color:var(--kehribar);letter-spacing:.1em}
.kazanim h3{margin:14px 0 9px}
.kazanim p{font-size:15px;color:var(--murekkep-2)}
/* ── programlar ──────────────────────────────────────────── */
.programlar{background:var(--kagit-2)}
.izgara-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.izgara-3{grid-template-columns:1fr}}
.program{background:var(--beyaz);border-radius:var(--yuvarlak);overflow:hidden;
border:1px solid var(--cizgi);display:flex;flex-direction:column;
transition:transform .3s var(--e),box-shadow .3s var(--e)}
.program:hover{transform:translateY(-5px);box-shadow:var(--golge2)}
.program-foto{position:relative;overflow:hidden}
.program-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
transition:transform .6s var(--e)}
.program:hover .program-foto img{transform:scale(1.045)}
.program-etiket{position:absolute;top:14px;left:14px;background:rgba(246,241,231,.94);
border-radius:999px;padding:6px 13px;font-family:var(--m);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;color:var(--murekkep)}
.program-ic{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.program-ic p{font-size:15px;color:var(--murekkep-2)}
.satirlar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
font-size:14.5px;margin-top:auto}
.satirlar li{display:flex;justify-content:space-between;gap:14px;
padding-bottom:9px;border-bottom:1px dashed var(--cizgi)}
.satirlar li:last-child{border-bottom:none;padding-bottom:0}
.satirlar span:first-child{color:var(--murekkep-2)}
.satirlar span:last-child{font-weight:600;text-align:right}
/* ── takvim ──────────────────────────────────────────────── */
.panel-not{display:flex;align-items:flex-start;gap:12px;background:var(--beyaz);
border:1px dashed var(--kehribar);border-radius:14px;padding:15px 18px;
font-size:14px;color:var(--murekkep-2);margin-bottom:26px}
.panel-not b{color:var(--murekkep);font-weight:600}
.panel-not svg{flex:none;margin-top:2px}
.takvim{width:100%;border-collapse:collapse;font-size:15px;
background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
overflow:hidden}
.takvim th,.takvim td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--cizgi)}
.takvim th{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--murekkep-2);background:var(--kagit-2);font-weight:500}
.takvim tr:last-child td{border-bottom:none}
.takvim td:first-child{font-weight:600}
.rozet{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12.5px;
font-weight:600}
.rozet-acik{background:rgba(60,95,65,.13);color:var(--yesil)}
.rozet-az{background:rgba(217,164,65,.22);color:#7A5410}
.rozet-dolu{background:rgba(37,51,42,.09);color:var(--murekkep-2)}
.takvim-sarma{overflow-x:auto;-webkit-overflow-scrolling:touch;
border-radius:var(--yuvarlak)}
@media(max-width:640px){.takvim{min-width:560px}}
/* ── band gorsel ─────────────────────────────────────────── */
.band{position:relative;height:clamp(180px,26vw,300px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band-yazi{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
background:linear-gradient(rgba(37,51,42,.66),rgba(37,51,42,.66));color:var(--kagit);
padding:0 var(--pad)}
.band-yazi p{font-family:var(--d);font-size:clamp(20px,3vw,34px);line-height:1.3;
max-width:22ch}
/* ── geri donusler ───────────────────────────────────────── */
.donusler{background:var(--kagit-2)}
.izgara-donus{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.izgara-donus{grid-template-columns:1fr}}
.donus{background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
padding:26px;display:flex;flex-direction:column;gap:16px}
.donus p{font-size:15.5px;line-height:1.7}
.donus .kim{font-size:13.5px;color:var(--murekkep-2);font-weight:600;margin-top:auto;
padding-top:14px;border-top:1px solid var(--cizgi)}
.tirnak{font-family:var(--d);font-size:44px;color:var(--vurgu);line-height:.6;
height:22px}
.altnot{margin-top:22px;font-size:13.5px;color:var(--murekkep-2);font-style:italic}
/* ── instagram ───────────────────────────────────────────── */
.izgara-ig{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.izgara-ig{grid-template-columns:1fr}}
.ig{border:1.5px dashed var(--cizgi);border-radius:var(--yuvarlak);aspect-ratio:4/3;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
text-align:center;padding:24px;color:var(--murekkep-2);background:var(--beyaz);
transition:border-color .3s var(--e),background .3s var(--e)}
.ig:hover{border-color:var(--kehribar);background:#fff}
.ig strong{font-weight:600;color:var(--murekkep);font-size:15px}
.ig span{font-size:13.5px;max-width:26ch}
/* ── hakkimda ────────────────────────────────────────────── */
.hakkimda{background:var(--murekkep);color:var(--kagit)}
.hakkimda .k{color:var(--kehribar-acik)}
.hakkimda-ic{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px)}
@media(max-width:900px){.hakkimda-ic{grid-template-columns:1fr}}
.foto-yeri{aspect-ratio:4/5;border-radius:22px;border:1.5px dashed rgba(246,241,231,.4);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
text-align:center;padding:26px;font-size:14px;color:rgba(246,241,231,.72)}
.ozgecmis{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column}
.ozgecmis li{display:grid;grid-template-columns:132px 1fr;gap:20px;
padding:18px 0;border-top:1px solid rgba(246,241,231,.16)}
.ozgecmis li:last-child{border-bottom:1px solid rgba(246,241,231,.16)}
.ozgecmis .yil{font-family:var(--m);font-size:12.5px;color:var(--kehribar-acik);
letter-spacing:.06em;padding-top:3px}
.ozgecmis h3{font-size:18px;margin-bottom:5px}
.ozgecmis p{font-size:14.5px;color:rgba(246,241,231,.76)}
@media(max-width:560px){.ozgecmis li{grid-template-columns:1fr;gap:6px}}
/* ── kayit formu ─────────────────────────────────────────── */
.form-ic{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);
align-items:start}
@media(max-width:900px){.form-ic{grid-template-columns:1fr}}
form{background:var(--beyaz);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
padding:clamp(24px,3vw,36px);box-shadow:var(--golge)}
.alan{margin-bottom:18px}
.alan label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.alan input,.alan select,.alan textarea{width:100%;padding:13px 15px;font:inherit;
font-size:15px;border:1.5px solid var(--cizgi);border-radius:11px;background:var(--kagit);
color:var(--murekkep);transition:border-color .22s var(--e),background .22s var(--e)}
.alan input:focus,.alan select:focus,.alan textarea:focus{outline:none;
border-color:var(--kehribar);background:#fff}
.alan textarea{resize:vertical;min-height:96px}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.ikili{grid-template-columns:1fr}}
form .dugme{width:100%;justify-content:center;margin-top:6px}
.form-not{font-size:13px;color:var(--murekkep-2);margin-top:14px;text-align:center}
.iletisim-liste{list-style:none;margin:26px 0 0;padding:0;display:flex;
flex-direction:column;gap:18px}
.iletisim-liste li{display:flex;gap:14px;align-items:flex-start}
.iletisim-liste .etiket{font-size:13px;color:var(--murekkep-2);display:block}
.iletisim-liste .deger{font-weight:600}
/* ── alt ─────────────────────────────────────────────────── */
.alt{background:var(--kagit-2);border-top:1px solid var(--cizgi);
padding:38px 0 34px;font-size:14px;color:var(--murekkep-2)}
.alt .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;
justify-content:space-between}
/* ── sabit whatsapp ──────────────────────────────────────── */
.wa-sabit{position:fixed;right:18px;bottom:18px;z-index:70;width:56px;height:56px;
border-radius:50%;background:var(--yesil);display:grid;place-items:center;
box-shadow:0 10px 26px rgba(18,140,75,.38);
transition:transform .25s var(--e)}
.wa-sabit:hover{transform:scale(1.08)}
.wa-sabit svg{width:28px;height:28px;fill:#fff}
/* ── goruntuye girince ─────────────────────────────────────
Gizleme yalnizca JavaScript calisiyorsa devreye giriyor;
betik yuklenmezse butun bolumler normal gorunur kaliyor. */
.js .gir{opacity:0;transform:translateY(22px);
transition:opacity .7s var(--e),transform .7s var(--e)}
.js .gir.gorundu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;
transition-duration:.001ms!important}
.js .gir{opacity:1;transform:none}
.vurgu::before{transform:scaleX(1)}
}
/* ══════════════════════════════════════════════════════════
Uc hizmet sayfasi eklendiginde gelen bolumler
══════════════════════════════════════════════════════════ */
/* ── mobil menu ──────────────────────────────────────────────
Site tek sayfa degil artik; telefonda menuye erisim sart. */
.menu-dugme{display:none;width:42px;height:42px;border-radius:11px;
border:1.5px solid var(--cizgi);align-items:center;justify-content:center}
.menu-dugme span{display:block;width:18px;height:1.6px;background:var(--murekkep);
position:relative;transition:background .2s var(--e)}
.menu-dugme span::before,.menu-dugme span::after{content:"";position:absolute;left:0;
width:18px;height:1.6px;background:var(--murekkep);transition:transform .28s var(--e)}
.menu-dugme span::before{top:-6px}
.menu-dugme span::after{top:6px}
.menu-acik .menu-dugme span{background:transparent}
.menu-acik .menu-dugme span::before{transform:translateY(6px) rotate(45deg)}
.menu-acik .menu-dugme span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:860px){
.menu-dugme{display:flex}
.menu{position:fixed;inset:76px 0 auto;background:var(--kagit);
flex-direction:column;gap:0;padding:8px var(--pad) 22px;
border-bottom:1px solid var(--cizgi);box-shadow:var(--golge);
transform:translateY(-8px);opacity:0;pointer-events:none;
transition:transform .28s var(--e),opacity .28s var(--e)}
.menu-acik .menu{display:flex;transform:none;opacity:1;pointer-events:auto}
.menu a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--cizgi)}
.menu a:last-child{border-bottom:none}
.menu a::after{display:none}
.ust .dugme-dolu{padding:10px 16px;font-size:13.5px}
}
/* ── hizmet sayfasi ust bolumu ───────────────────────────── */
.sayfa-bas{padding:clamp(30px,4vw,54px) 0 0}
.iz{font-size:13.5px;color:var(--murekkep-2);display:flex;gap:8px;flex-wrap:wrap;
align-items:center;margin-bottom:22px}
.iz a:hover{color:var(--kehribar)}
.iz span{opacity:.5}
.sayfa-hero{display:grid;grid-template-columns:1.02fr .98fr;
gap:clamp(26px,4vw,58px);align-items:center}
@media(max-width:900px){.sayfa-hero{grid-template-columns:1fr}
.sayfa-hero .sayfa-hero-gorsel{order:-1}}
.sayfa-hero h1{margin:14px 0 0;font-size:clamp(32px,4.6vw,56px)}
.sayfa-hero p{margin-top:20px;color:var(--murekkep-2);max-width:50ch;
font-size:clamp(15.5px,1.4vw,17.5px)}
.sayfa-hero-gorsel{border-radius:24px;overflow:hidden;box-shadow:var(--golge2)}
.sayfa-hero-gorsel img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sayfa-dugmeler{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* ── adim adim akis ──────────────────────────────────────── */
.adimlar{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:adim}
@media(max-width:900px){.adimlar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.adimlar{grid-template-columns:1fr}}
.adimlar li{counter-increment:adim;position:relative;padding-top:52px}
.adimlar li::before{content:counter(adim);position:absolute;top:0;left:0;
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
font-family:var(--m);font-size:13px;color:var(--kehribar);
border:1.5px solid var(--kehribar-acik);background:var(--beyaz)}
.adimlar h3{margin-bottom:8px}
.adimlar p{font-size:15px;color:var(--murekkep-2)}
/* ── kimler icin ─────────────────────────────────────────── */
.kimler{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:14px 28px}
@media(max-width:700px){.kimler{grid-template-columns:1fr}}
.kimler li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;
padding-bottom:14px;border-bottom:1px solid var(--cizgi)}
.kimler li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
background:var(--kehribar);margin-top:10px}
/* ── video ───────────────────────────────────────────────── */
.video-yeri{position:relative;aspect-ratio:16/9;border-radius:var(--yuvarlak);
border:1.5px dashed var(--cizgi);background:var(--beyaz);display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:14px;
text-align:center;padding:28px;color:var(--murekkep-2)}
.video-yeri strong{color:var(--murekkep);font-size:16px;font-weight:600}
.video-yeri span{font-size:14px;max-width:40ch}
.oynat{width:62px;height:62px;border-radius:50%;background:var(--kehribar);
display:grid;place-items:center;box-shadow:0 8px 24px rgba(60,95,65,.3)}
.oynat svg{fill:#fff;margin-left:4px}
.video-sarma{max-width:880px;margin:0 auto}
/* ── hizmet kartlari (ana sayfa) ───────────────────────────
Not: ![]()
uzerindeki height ozniteligi CSS aspect-ratio'yu
eziyor. Bu yuzden her birinde height:auto yaziyor. */
.hizmet{display:flex;flex-direction:column;background:var(--beyaz);
border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden;
transition:transform .3s var(--e),box-shadow .3s var(--e)}
.hizmet:hover{transform:translateY(-5px);box-shadow:var(--golge2)}
.hizmet img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--e)}
.hizmet:hover img{transform:scale(1.045)}
.hizmet-ic{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.hizmet-ic p{font-size:15px;color:var(--murekkep-2)}
.devam{margin-top:auto;font-weight:600;font-size:14.5px;color:var(--kehribar);
display:inline-flex;align-items:center;gap:8px}
.hizmet:hover .devam{gap:12px}
.devam svg{transition:transform .28s var(--e)}
/* ── iki sutunlu program kartlari ────────────────────────── */
.izgara-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:820px){.izgara-2{grid-template-columns:1fr}}
.ucret{margin-top:18px;padding-top:16px;border-top:1.5px solid var(--cizgi);
font-family:var(--d);font-size:clamp(20px,2.2vw,26px);color:var(--kehribar);
line-height:1.15}
.program .satirlar li span:last-child{max-width:58%}
/* ── hakkimda fotografi ──────────────────────────────────── */
.portre{border-radius:22px;overflow:hidden;box-shadow:var(--golge2);
border:1px solid rgba(246,241,231,.16);align-self:start}
.portre img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
display:block}
/* ── instagram gonderi kartlari ──────────────────────────────
Kapak gorselleri Instagram'dan cekilemiyor (giris duvari),
musteriden gelecek. Gelene kadar kart baglanti olarak calisiyor:
foto/ig/-.webp eklenince .ig-kapak img ile degisecek. */
.ig-kart{display:flex;flex-direction:column;background:var(--beyaz);
border:1px solid var(--cizgi);border-radius:var(--yuvarlak);overflow:hidden;
transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.ig-kart:hover{transform:translateY(-4px);box-shadow:var(--golge2);
border-color:var(--kehribar-acik)}
.ig-kapak{position:relative;aspect-ratio:3/4;background:var(--kagit-2);
display:grid;place-items:center;overflow:hidden}
.ig-kapak img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.ig-kapak.bos-kapak{aspect-ratio:1}
.ig-kapak .bos{display:flex;flex-direction:column;align-items:center;gap:10px;
color:var(--murekkep-2);font-size:13px;text-align:center;padding:18px}
.ig-tur{position:absolute;top:12px;left:12px;background:rgba(246,241,231,.94);
border-radius:999px;padding:5px 12px;font-family:var(--m);font-size:10.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--murekkep)}
.ig-alt{padding:14px 16px;font-size:14px;font-weight:600;color:var(--kehribar);
display:flex;align-items:center;justify-content:space-between;gap:10px}
.ig-kart:hover .ig-alt svg{transform:translateX(3px)}
.ig-alt svg{transition:transform .25s var(--e)}
/* ══════════════════════════════════════════════════════════
Hareket katmani
Kural: bitmis durum varsayilan. Animasyon yalnizca
destekleniyorsa ve kullanici hareket istiyorsa binen katman.
══════════════════════════════════════════════════════════ */
/* ── acilis ekrani ───────────────────────────────────────────
Varsayilan: yok. JS sessionStorage'a bakip 'e
.splash-acik ekleyince goruyor. JS calismazsa hic cikmiyor,
sayfa dogrudan aciliyor. */
.splash{display:none}
.splash-acik .splash{
display:grid;place-items:center;position:fixed;inset:0;z-index:200;
background:var(--kagit);
animation:splash-cik .55s var(--e) 1.45s forwards}
.splash-ic{text-align:center;padding:0 24px}
.splash-ad{display:block;font-family:var(--d);font-weight:400;
font-size:clamp(34px,7vw,72px);line-height:1.05;color:var(--murekkep);
opacity:0;transform:translateY(14px);
animation:splash-ad .62s var(--e) .1s forwards}
.splash-cizgi{display:block;height:clamp(7px,.85vw,11px);
max-width:min(70%,260px);margin:22px auto 0;
border-radius:4px;background:var(--vurgu);opacity:.75;
transform:scaleX(0);transform-origin:left;
animation:splash-cizgi .5s var(--e) .52s forwards}
.splash-alt{display:block;margin-top:18px;font-size:clamp(12px,1.4vw,14px);
font-family:var(--m);letter-spacing:.14em;text-transform:uppercase;
color:var(--murekkep-2);opacity:0;
animation:splash-alt .5s var(--e) 1s forwards}
@keyframes splash-ad{to{opacity:1;transform:none}}
@keyframes splash-cizgi{to{transform:scaleX(1)}}
@keyframes splash-alt{to{opacity:.9}}
@keyframes splash-cik{to{opacity:0;visibility:hidden;pointer-events:none}}
/* ── hero'da suzulen ders sembolleri ─────────────────────────
Sayfanin arkasinda yavasca dolasan matematik isaretleri.
Tiklanamaz, ekran okuyucuya gorunmez. */
.semboller{position:absolute;inset:0;overflow:hidden;pointer-events:none;
z-index:0}
.semboller span{position:absolute;font-family:var(--d);color:var(--kehribar);
opacity:0;font-size:clamp(28px,3.6vw,50px);user-select:none}
.hero{position:relative}
.hero-ic{position:relative;z-index:1}
/* ── baslik altina cekilen kalem cizgisi ─────────────────────
Bolum basligi goruntuye girince altina cekilen vurgu.
h2 inline-block olunca ustundeki kucuk etiket ayni satira
dusuyor; etiketi blok yapip onunu aliyoruz. */
.bas .k,.sayfa-hero .k{display:block}
.bas h2{position:relative;display:inline-block}
.bas h2::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;
height:.17em;border-radius:4px;background:var(--kehribar-acik);
opacity:.45;transform:scaleX(0);transform-origin:left}
/* ── hizmet kartinda kucuk isaret ────────────────────────── */
.hizmet-ic{position:relative}
.hizmet-ic::after{content:"✳";position:absolute;top:18px;right:20px;
font-size:19px;color:var(--kehribar);opacity:0;transform:rotate(-40deg) scale(.6)}
@media (prefers-reduced-motion: no-preference){
.semboller span{animation:suzul var(--sure,19s) linear var(--gecikme,0s) infinite}
@keyframes suzul{
0%{opacity:0;transform:translate3d(0,14px,0) rotate(0deg)}
14%{opacity:.13}
86%{opacity:.13}
100%{opacity:0;transform:translate3d(var(--kay,18px),-88px,0) rotate(var(--don,14deg))}
}
.bas h2::after{transition:transform .62s var(--e) .12s}
.bas.gorundu h2::after{transform:scaleX(1)}
.hizmet-ic::after{transition:opacity .3s var(--e),transform .42s var(--e)}
.hizmet:hover .hizmet-ic::after{opacity:.85;transform:rotate(0deg) scale(1)}
.hero-rozet{animation:rozet-nabiz 3.4s ease-in-out 1.6s infinite}
@keyframes rozet-nabiz{
0%,88%,100%{transform:none}
92%{transform:translateY(-3px) scale(1.03)}
96%{transform:translateY(0) scale(1)}
}
}
/* Hareket istenmiyorsa cizgi ve isaret bitmis halde dursun */
@media (prefers-reduced-motion: reduce){
.bas h2::after{transform:scaleX(1)}
.hizmet-ic::after{opacity:.5;transform:none}
}
/* ── hero: isim ustte, slogan altinda ────────────────────── */
.hero h1{margin:12px 0 0;font-size:clamp(42px,7vw,84px);letter-spacing:-.015em}
.hero-slogan{margin-top:16px;font-family:var(--d);font-weight:400;
font-size:clamp(21px,2.7vw,32px);line-height:1.2;color:var(--murekkep);
max-width:20ch}
/* ── marka logosu ────────────────────────────────────────────
48 px altinda yalnizca ikon kullanilir (logo paketi kurali). */
.marka{display:flex;align-items:center;margin-right:auto;line-height:0}
.marka img{width:auto}
.marka .marka-yatay{height:48px;display:block}
.marka .marka-ikon{height:44px;display:none}
@media(max-width:560px){
.marka .marka-yatay{display:none}
.marka .marka-ikon{display:block}
}
.alt-logo{height:32px;width:auto;display:block;margin-bottom:10px}
/* acilis ekraninda logo */
.splash-logo{display:block;width:min(72vw,360px);height:auto;margin:0 auto;
opacity:0;transform:translateY(14px);
animation:splash-ad .62s var(--e) .1s forwards}
/* ── ucretlendirme kartlari ──────────────────────────────── */
.ucret-izgara{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
max-width:820px}
.ucret-izgara.tek{max-width:420px}
.ucret-kart{background:var(--beyaz);border:1px solid var(--cizgi);
border-radius:var(--yuvarlak);padding:30px 26px 26px;display:flex;
flex-direction:column;position:relative;
transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.ucret-kart:hover{transform:translateY(-4px);box-shadow:var(--golge2)}
.ucret-kart.one-cikan{border-color:var(--marka);box-shadow:var(--golge)}
.ucret-rozet{position:absolute;top:-11px;left:26px;background:var(--marka);
color:var(--kagit);border-radius:999px;padding:4px 13px;font-family:var(--m);
font-size:10.5px;font-weight:700;letter-spacing:.1em}
.ucret-kart h3{font-family:var(--m);font-weight:800;font-size:13px;
letter-spacing:.12em;color:var(--marka);margin-bottom:14px}
.ucret-tutar{font-family:var(--d);font-size:clamp(38px,5vw,54px);line-height:1;
color:var(--metin);display:flex;align-items:baseline;gap:4px}
.ucret-tutar span{font-size:.46em;color:var(--metin-2)}
.ucret-alt{margin-top:10px;font-size:13.5px;color:var(--metin-2);
padding-bottom:20px;border-bottom:1px solid var(--cizgi)}
.ucret-liste{list-style:none;margin:20px 0 24px;padding:0;display:flex;
flex-direction:column;gap:12px;font-size:15px;flex:1}
.ucret-liste li{display:flex;gap:11px;align-items:flex-start;line-height:1.45}
.ucret-liste svg{flex:none;margin-top:3px}
.ucret-liste .yok{color:var(--metin-2);opacity:.72}
.ucret-kart .dugme{justify-content:center}
/* ── sayi vurgusu (hero altindaki kanit satiri) ──────────── */
.hero-not{gap:12px}
.sayi-rozet{display:inline-flex;align-items:baseline;gap:3px;
background:rgba(217,164,65,.22);border-radius:999px;padding:5px 14px;
font-family:var(--d);font-size:22px;line-height:1;color:#7A5410}