/* ===== Motto Kids Oyun ve Sanat Evi ===== */
:root{
  --cream:#FAF5EC; --cream2:#F3ECDD; --ink:#43403C; --ink2:#6B655E;
  --orange:#F0994B; --green:#84C25A; --yellow:#F4CE4B; --purple:#C79BD6; --teal:#6FCBDD; --red:#EF5C5C;
  --maxw:1160px; --gut:22px;
  --shadow:0 22px 50px -26px rgba(90,70,40,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);font-size:16.5px;line-height:1.65;overflow-x:hidden}
h1,h2,h3,.brandfont{font-family:'Baloo 2',Nunito,sans-serif;font-weight:600;line-height:1.15;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.eyebrow{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 40px}
.sec-head h2{font-size:clamp(28px,4.4vw,42px);margin:10px 0 8px}
.sec-head p{color:var(--ink2);margin:0}
section{position:relative}
.pad{padding:78px 0}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:16px;padding:13px 26px;border-radius:999px;cursor:pointer;border:2.5px solid transparent;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 24px -10px rgba(240,153,75,.75)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.03)}
.btn-ghost{background:#fff;color:var(--ink);border-color:#efe6d4}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-wa{background:var(--green);color:#fff;box-shadow:0 12px 24px -10px rgba(132,194,90,.7)}
.btn-wa:hover{transform:translateY(-2px)}
/* header */
.hdr{position:sticky;top:0;z-index:40;background:rgba(250,245,236,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid #efe6d4}
.hdr-in{display:flex;align-items:center;gap:20px;height:96px}
.brand img{height:70px;width:auto}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{font-weight:700;color:var(--ink2);transition:.15s}
.nav a:hover{color:var(--orange)}
.hdr .btn{padding:10px 20px;font-size:15px}
.navtog{display:none;font-size:26px;background:none;border:0;color:var(--ink);cursor:pointer}
/* blobs */
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;z-index:0;pointer-events:none}
/* hero */
.hero{padding:64px 0 90px;background:
  radial-gradient(60% 55% at 12% 20%, rgba(111,203,221,.20), transparent 60%),
  radial-gradient(50% 50% at 92% 12%, rgba(244,206,75,.28), transparent 60%),
  radial-gradient(55% 55% at 88% 90%, rgba(199,155,214,.22), transparent 60%);}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;position:relative;z-index:2}
.hero-text h1{font-size:clamp(34px,5.4vw,58px);margin:14px 0 16px}
.hero-text h1 .hl{color:var(--orange);position:relative;white-space:nowrap}
.hero-text h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 C30 2 90 2 118 7' stroke='%23F4CE4B' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-text .lead{font-size:18.5px;color:var(--ink2);margin:0 0 24px;max-width:520px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-tags{margin-top:22px;font-weight:700;color:var(--ink2);font-size:15.5px}
.hero-media{position:relative}
.hero-photo{border-radius:34px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;transform:rotate(2deg);aspect-ratio:4/4.4;object-fit:cover;width:100%}
.hero-badge{position:absolute;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:12px 16px;font-family:'Baloo 2',sans-serif;font-weight:600;display:flex;align-items:center;gap:9px;font-size:15px}
.hero-badge.b1{left:-16px;top:34px;transform:rotate(-5deg)}
.hero-badge.b2{right:-10px;bottom:38px;transform:rotate(4deg)}
.hero-badge .dot{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px}
/* about */
.about{background:var(--cream)}
.about-in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.about-in h2{font-size:clamp(26px,4vw,38px);margin:8px 0 14px}
.about-in p{color:var(--ink2);margin:0 0 14px}
.about-photo{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;transform:rotate(-2deg)}
.sign{font-family:'Caveat',cursive;font-size:30px;color:var(--orange);margin-top:6px}
/* services */
.services{background:linear-gradient(180deg,var(--cream),var(--cream2))}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.svc{background:#fff;border-radius:26px;padding:26px 22px;box-shadow:0 18px 40px -30px rgba(90,70,40,.5);border:2px solid #fff;transition:.2s}
.svc:hover{transform:translateY(-5px);border-color:var(--kolor,#efe6d4)}
.svc .ic{width:60px;height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:14px;background:var(--soft)}
.svc h3{font-size:20px;margin:0 0 6px}
.svc p{color:var(--ink2);margin:0;font-size:15px}
/* gallery */
.gallery{background:var(--cream2)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gal-item{border-radius:24px;overflow:hidden;box-shadow:0 16px 36px -26px rgba(90,70,40,.55);border:5px solid #fff;aspect-ratio:1/1}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gal-item:hover img{transform:scale(1.06)}
.gal-item.wide{grid-column:span 2;aspect-ratio:auto}
/* features */
.feat{background:var(--cream)}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:56px}
.feat-row:last-child{margin-bottom:0}
.feat-row.rev .feat-media{order:2}
.feat-media img{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff}
.feat-txt h2{font-size:clamp(24px,3.4vw,34px);margin:6px 0 12px}
.feat-txt p{color:var(--ink2);margin:0}
.feat-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid #efe6d4;border-radius:999px;padding:6px 14px;font-weight:800;font-size:13px;color:var(--ink2)}
/* motto farkı (renkli band) */
.diff{background:linear-gradient(120deg,var(--teal),var(--purple));color:#fff;text-align:center;border-radius:40px;margin:0 var(--gut);padding:64px 24px;box-shadow:var(--shadow)}
.diff h2{font-size:clamp(28px,4.4vw,42px);margin:8px 0 14px;color:#fff}
.diff p{max-width:640px;margin:0 auto 22px;font-size:18px;opacity:.96}
.diff .btn-primary{background:#fff;color:var(--purple)}
/* contact */
.contact{background:var(--cream2)}
.contact-card{background:#fff;border-radius:32px;box-shadow:var(--shadow);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.contact-card h2{font-size:clamp(26px,4vw,36px);margin:6px 0 10px}
.contact-card p{color:var(--ink2)}
.ci{display:flex;align-items:center;gap:13px;margin:14px 0;font-weight:700}
.ci .ic{width:46px;height:46px;border-radius:14px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.ci small{display:block;font-weight:600;color:var(--ink2);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
/* footer */
.ft{background:var(--ink);color:#e8e2d8;padding:44px 0 26px;text-align:center}

.ft img{height:66px;margin:0 auto 14px;filter:saturate(1.05)}
.ft .fsoc{display:flex;gap:14px;justify-content:center;margin:16px 0}
.ft .fsoc a{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:19px;transition:.15s}
.ft .fsoc a:hover{background:var(--orange)}
.ft-bot{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:18px;font-size:13.5px;color:#b6ad9f}
.ft-bot a{color:#d8d0c4}
/* wave divider */
.wave{display:block;width:100%;height:auto;margin-bottom:-6px}
/* responsive */
@media(max-width:860px){
  .nav,.hdr .btn-primary{display:none}.navtog{display:block;margin-left:auto}
  .hdr.open .nav{display:flex;flex-direction:column;position:absolute;top:96px;left:0;right:0;background:var(--cream);padding:16px 22px;gap:14px;border-bottom:2px solid #efe6d4;box-shadow:var(--shadow);margin:0}
  .hero-in,.about-in,.feat-row,.feat-row.rev .feat-media,.contact-card{grid-template-columns:1fr}
  .feat-row.rev .feat-media{order:0}
  .hero-media{max-width:420px;margin:0 auto}
  .gal-item.wide{grid-column:span 1}
}