@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --bg: #f0faf4;
    --surface: #ffffff;
    --text: #1a2e22;
    --text2: #3d5c47;
    --text3: #5a7a65;
    --border: #d4edda;
    --green: #2ecc71;
    --green-dark: #27ae60;
    --navbar-bg: rgba(10,20,14,0.93);
    --shadow: 0 8px 30px rgba(0,0,0,0.07);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.13);
}

[data-theme="dark"] {
    --bg: #0d1f14;
    --surface: #182a1f;
    --text: #e8f5ec;
    --text2: #a8cdb5;
    --text3: #7aaa8a;
    --border: #2a4a35;
    --navbar-bg: rgba(5,12,8,0.97);
    --shadow: 0 8px 30px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.55);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background-color 0.4s, color 0.4s;
}

/* ---- SCROLL ANİMASYONLARI ---- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-left { opacity:0; transform:translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right { opacity:0; transform:translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-stagger > * { opacity:0; transform:translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.05s; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.2s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.35s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.5s; }

/* ---- NAVBAR ---- */
.navbar {
    position: sticky; top:0; z-index:1000;
    background: var(--navbar-bg);
    backdrop-filter: blur(16px);
    display: flex; justify-content:space-between; align-items:center;
    padding: 14px 50px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.navbar .logo {
    color: var(--green); font-size:22px; font-weight:800;
    font-family:'Nunito',sans-serif; text-decoration:none; flex-shrink:0;
}

.nav-menu { display:flex; align-items:center; gap:4px; }

.nav-menu ul { list-style:none; display:flex; gap:4px; align-items:center; }

.nav-menu ul li a {
    color:#cde8d8; text-decoration:none; font-size:14px; font-weight:600;
    padding:8px 15px; border-radius:25px; transition:all 0.25s; display:block;
}
.nav-menu ul li a:hover,
.nav-menu ul li a.active { background:var(--green); color:#0f1e14; }

.dark-toggle {
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    color:white; width:38px; height:38px; border-radius:50%; cursor:pointer;
    font-size:16px; transition:all 0.25s; margin-left:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.dark-toggle:hover { background:var(--green); color:#0f1e14; border-color:var(--green); }

.hamburger {
    display:none; flex-direction:column; gap:5px; cursor:pointer;
    padding:6px; background:none; border:none; flex-shrink:0;
}
.hamburger span {
    display:block; width:26px; height:2.5px; background:white;
    border-radius:3px; transition:all 0.35s; transform-origin:center;
}
.hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ---- HERO ---- */
.hero {
    min-height: 90vh;
    background: linear-gradient(135deg,rgba(10,30,18,0.88),rgba(20,60,35,0.82)),
                url("https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1600") center/cover no-repeat;
    display:flex; flex-direction:column; justify-content:center;
    align-items:center; color:white; text-align:center; padding:40px 20px;
    position:relative; overflow:hidden;
}
.hero::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:80px;
    background:var(--bg); clip-path:ellipse(55% 100% at 50% 100%);
    transition:background-color 0.4s;
}

.hero-badge {
    background:rgba(46,204,113,0.18); border:1px solid rgba(46,204,113,0.5);
    color:#2ecc71; padding:6px 22px; border-radius:30px; font-size:13px;
    font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:22px;
    display:inline-block; animation:fadeDown 0.8s ease both;
}
.hero h1 {
    font-family:'Nunito',sans-serif; font-size:clamp(38px,6vw,74px);
    font-weight:800; line-height:1.1; margin-bottom:20px;
    text-shadow:0 2px 20px rgba(0,0,0,0.4); animation:fadeUp 0.8s 0.15s ease both;
}
.hero h1 span { color:var(--green); }
.hero p {
    font-size:clamp(15px,2vw,19px); opacity:0.85; max-width:550px;
    margin:0 auto 35px; line-height:1.8; animation:fadeUp 0.8s 0.28s ease both;
}
.hero-buttons { display:flex; gap:15px; flex-wrap:wrap; justify-content:center; animation:fadeUp 0.8s 0.4s ease both; }

.hero-btn {
    background:var(--green); padding:14px 36px; color:#0f1e14;
    text-decoration:none; border-radius:40px; font-weight:700; font-size:15px;
    transition:all 0.3s; box-shadow:0 8px 25px rgba(46,204,113,0.4);
}
.hero-btn:hover { transform:translateY(-3px); box-shadow:0 14px 35px rgba(46,204,113,0.55); }
.hero-btn.outline {
    background:transparent; border:2px solid rgba(255,255,255,0.5);
    color:white; box-shadow:none;
}
.hero-btn.outline:hover { border-color:var(--green); color:var(--green); }

/* ---- CARDS SECTION ---- */
.cards-section { padding:90px 40px 70px; text-align:center; background:var(--bg); }
.section-title { font-family:'Nunito',sans-serif; font-size:clamp(26px,4vw,34px); font-weight:800; color:var(--text); margin-bottom:10px; }
.section-sub { color:var(--text3); font-size:16px; margin-bottom:55px; }

.cards { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; max-width:1100px; margin:0 auto; }

.card {
    background:var(--surface); padding:42px 32px; width:290px; border-radius:26px;
    text-align:center; box-shadow:var(--shadow); transition:all 0.35s;
    text-decoration:none; color:inherit; display:block; border:2px solid transparent;
}
.card:hover { transform:translateY(-14px); box-shadow:0 24px 50px rgba(46,204,113,0.18); border-color:var(--green); }
.card-icon { font-size:54px; margin-bottom:18px; display:block; }
.card h3 { font-family:'Nunito',sans-serif; font-size:21px; font-weight:800; margin-bottom:10px; color:var(--text); }
.card p { font-size:14px; color:var(--text3); line-height:1.7; }

/* ---- STATS ---- */
.stats {
    background:linear-gradient(135deg,#1a2e22,#0f3d22);
    padding:80px 40px; display:flex; justify-content:center;
    gap:70px; flex-wrap:wrap; text-align:center; color:white;
}
.stat-item h2 { font-family:'Nunito',sans-serif; font-size:52px; font-weight:800; color:var(--green); line-height:1; }
.stat-item p { font-size:13px; opacity:0.65; margin-top:8px; text-transform:uppercase; letter-spacing:1.5px; }

/* ---- PAGE HERO ---- */
.page-hero {
    background:linear-gradient(135deg,#1a2e22,#0a3020);
    padding:80px 40px 100px; text-align:center; color:white; position:relative;
}
.page-hero::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:60px;
    background:var(--bg); clip-path:ellipse(55% 100% at 50% 100%); transition:background-color 0.4s;
}
.page-hero h1 { font-family:'Nunito',sans-serif; font-size:clamp(32px,5vw,56px); font-weight:800; margin-bottom:14px; animation:fadeDown 0.7s ease both; }
.page-hero p { font-size:17px; opacity:0.8; max-width:500px; margin:0 auto; animation:fadeUp 0.7s 0.15s ease both; }

/* ---- CONTENT ---- */
.content { max-width:900px; margin:60px auto; padding:0 24px 80px; }
.content-img { width:100%; border-radius:22px; margin:30px 0; box-shadow:var(--shadow-lg); object-fit:cover; max-height:420px; }

.tabs { display:flex; gap:10px; margin:35px 0; flex-wrap:wrap; }
.tabs a {
    text-decoration:none; color:var(--text3); font-weight:600; font-size:14px;
    padding:10px 24px; border-radius:30px; border:2px solid var(--border);
    background:var(--surface); transition:all 0.25s;
}
.tabs a:hover { background:var(--green); color:#0f1e14; border-color:var(--green); }

.content h2 { font-family:'Nunito',sans-serif; font-size:25px; font-weight:800; color:var(--text); margin:44px 0 16px; padding-bottom:10px; border-bottom:3px solid var(--border); }
.content > p, .content section > p { line-height:1.85; color:var(--text2); font-size:15px; margin-bottom:16px; }

.content ul { padding-left:0; list-style:none; margin:15px 0; }
.content ul li {
    padding:12px 16px 12px 44px; position:relative; font-size:15px; color:var(--text2);
    background:var(--surface); border-radius:12px; margin-bottom:9px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05); transition:transform 0.2s;
}
.content ul li:hover { transform:translateX(5px); }
.content ul li::before { content:'✓'; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--green); font-weight:700; font-size:16px; }

.info-box {
    background:linear-gradient(135deg,#eafaf1,#d5f5e3);
    padding:25px 30px; border-left:5px solid var(--green); border-radius:18px; margin:30px 0;
}
[data-theme="dark"] .info-box { background:linear-gradient(135deg,#1a3d28,#163320); }
.info-box h3 { font-family:'Nunito',sans-serif; font-weight:800; margin-bottom:8px; color:var(--text); font-size:18px; }
.info-box p { color:var(--text2); margin:0; font-size:14px; line-height:1.7; }

.video-wrapper { border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); margin:20px 0; }
.video-wrapper iframe { display:block; width:100%; height:370px; border:none; }

/* ---- UYKU HESAPLAYICI ---- */
.sleep-calc { background:var(--surface); border-radius:22px; padding:35px; box-shadow:var(--shadow); margin:30px 0; border:2px solid var(--border); }
.sleep-calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.sleep-input-group { margin-bottom:16px; }
.sleep-input-group label { display:block; font-weight:600; font-size:14px; color:var(--text3); margin-bottom:8px; }
.sleep-input-group input[type="time"] {
    width:100%; padding:12px 16px; border-radius:12px; border:2px solid var(--border);
    background:var(--bg); color:var(--text); font-size:20px;
    font-family:'Nunito',sans-serif; font-weight:700; outline:none; transition:border-color 0.2s;
}
.sleep-input-group input[type="time"]:focus { border-color:var(--green); }
.sleep-btn {
    width:100%; padding:13px; background:linear-gradient(135deg,var(--green),var(--green-dark));
    border:none; color:#0f1e14; font-size:15px; font-weight:700; border-radius:14px;
    cursor:pointer; font-family:'Poppins',sans-serif; margin-top:10px;
    transition:all 0.3s; box-shadow:0 6px 20px rgba(46,204,113,0.35);
}
.sleep-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(46,204,113,0.45); }
.sleep-result {
    background:var(--bg); border-radius:14px; padding:20px; min-height:100px;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:8px; text-align:center; flex-wrap:wrap;
}
.sleep-result p { font-size:13px; color:var(--text3); margin:0; }
.sleep-time-badge {
    display:inline-block; background:linear-gradient(135deg,var(--green),var(--green-dark));
    color:#0f1e14; padding:6px 18px; border-radius:20px;
    font-size:18px; font-weight:800; font-family:'Nunito',sans-serif; margin:3px;
}

/* ---- EGZERSİZ SAYACI ---- */
.exercise-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:20px; }
.exercise-card {
    background:var(--surface); border-radius:18px; padding:28px 22px; text-align:center;
    box-shadow:var(--shadow); border:2px solid var(--border); transition:all 0.3s;
}
.exercise-card:hover { border-color:var(--green); transform:translateY(-4px); }
.exercise-icon { font-size:42px; margin-bottom:12px; display:block; }
.exercise-card h4 { font-family:'Nunito',sans-serif; font-size:16px; font-weight:800; color:var(--text); margin-bottom:6px; }
.exercise-card > p { font-size:12px; color:var(--text3); margin-bottom:16px; }
.timer-display { font-family:'Nunito',sans-serif; font-size:42px; font-weight:800; color:var(--green); margin:10px 0; line-height:1; }
.timer-bar { width:100%; height:6px; background:var(--border); border-radius:4px; margin:10px 0; overflow:hidden; }
.timer-bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--green-dark)); border-radius:4px; width:100%; transition:width 1s linear; }
.timer-btn {
    padding:9px 22px; border-radius:25px; border:none; background:var(--green);
    color:#0f1e14; font-weight:700; font-size:13px; cursor:pointer;
    font-family:'Poppins',sans-serif; transition:all 0.25s; margin:3px;
}
.timer-btn:hover { transform:scale(1.05); }
.timer-btn.reset { background:var(--border); color:var(--text2); }

/* ---- BMI ---- */
.bmi-section { max-width:900px; margin:60px auto; padding:0 24px 80px; }
.bmi-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:30px 0; }
.bmi-box { background:var(--surface); padding:40px; border-radius:24px; box-shadow:var(--shadow); border:2px solid var(--border); }
.bmi-box h2 { font-family:'Nunito',sans-serif; font-size:22px; font-weight:800; margin-bottom:25px; color:var(--text); }
.bmi-box input {
    width:100%; padding:14px 18px; margin:8px 0; border-radius:12px;
    border:2px solid var(--border); background:var(--bg); font-family:'Poppins',sans-serif;
    font-size:14px; color:var(--text); transition:border-color 0.2s; outline:none;
}
.bmi-box input:focus { border-color:var(--green); }
.bmi-box button {
    width:100%; padding:14px; margin-top:15px; border:none;
    background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#0f1e14;
    font-weight:700; font-size:15px; border-radius:14px; cursor:pointer;
    font-family:'Poppins',sans-serif; transition:all 0.3s; box-shadow:0 6px 20px rgba(46,204,113,0.35);
}
.bmi-box button:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(46,204,113,0.45); }
#sonuc { margin-top:22px; font-size:34px; font-weight:800; text-align:center; font-family:'Nunito',sans-serif; }
#yorum { margin-top:8px; text-align:center; font-size:14px; color:var(--text3); font-weight:600; }
.zayif { color:#3498db; } .normal { color:#2ecc71; } .fazla { color:#f39c12; } .obez { color:#e74c3c; }

.bmi-table { width:100%; border-collapse:collapse; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); background:var(--surface); }
.bmi-table th { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#0f1e14; padding:15px; text-align:center; font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; }
.bmi-table td { border:none; padding:14px 15px; text-align:center; font-size:15px; border-bottom:1px solid var(--border); color:var(--text2); }
.bmi-table tr:last-child td { border-bottom:none; }
.bmi-table tr:nth-child(even) td { background:var(--bg); }

/* ---- İLETİŞİM ---- */
.contact-section { max-width:900px; margin:60px auto; padding:0 24px 80px; display:grid; grid-template-columns:1.4fr 1fr; gap:30px; }
.contact-form { background:var(--surface); padding:42px; border-radius:24px; box-shadow:var(--shadow); border:2px solid var(--border); }
.contact-form h2 { font-family:'Nunito',sans-serif; font-size:24px; font-weight:800; margin-bottom:25px; color:var(--text); }
.contact-form label { display:block; margin-top:18px; font-weight:600; font-size:14px; color:var(--text3); margin-bottom:6px; }
.contact-form input, .contact-form textarea {
    width:100%; padding:12px 16px; border-radius:12px; border:2px solid var(--border);
    background:var(--bg); font-family:'Poppins',sans-serif; font-size:14px; color:var(--text); outline:none; transition:border-color 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--green); }
.contact-form textarea { height:130px; resize:none; }
.contact-form button {
    margin-top:22px; width:100%; padding:14px; background:linear-gradient(135deg,var(--green),var(--green-dark));
    border:none; color:#0f1e14; font-size:15px; font-weight:700; border-radius:14px;
    cursor:pointer; font-family:'Poppins',sans-serif; transition:all 0.3s; box-shadow:0 6px 20px rgba(46,204,113,0.35);
}
.contact-form button:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(46,204,113,0.45); }
.contact-info-box { background:linear-gradient(160deg,#1a2e22,#0a3020); padding:42px 32px; border-radius:24px; color:white; }
.contact-info-box h2 { font-family:'Nunito',sans-serif; font-size:22px; font-weight:800; margin-bottom:20px; color:var(--green); }
.contact-info-box p { font-size:14px; line-height:1.75; opacity:0.85; margin-bottom:20px; }
.contact-info-box .info-row { display:flex; gap:12px; align-items:flex-start; margin:14px 0; font-size:14px; opacity:0.9; }
.contact-info-box .info-row span:first-child { font-size:20px; margin-top:1px; flex-shrink:0; }

/* ---- KAYNAKÇA ---- */
.kaynak-list { padding-left:0; list-style:none; margin:20px 0; }
.kaynak-list li {
    padding:18px 20px 18px 58px; position:relative; font-size:15px; color:var(--text2);
    background:var(--surface); border-radius:16px; margin-bottom:12px;
    box-shadow:var(--shadow); border-left:4px solid var(--green); transition:transform 0.2s;
}
.kaynak-list li:hover { transform:translateX(6px); }
.kaynak-list li::before {
    content: attr(data-icon);
    position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:20px;
}

/* ---- KAYNAKÇA ÖZEL ---- */
.kaynak-category {
    font-family:'Nunito',sans-serif; font-size:20px; font-weight:800;
    color:var(--text); margin:40px 0 15px; padding-left:14px; border-left:4px solid var(--green);
}
.kaynak-title { font-weight:700; font-size:15px; color:var(--text); display:block; margin-bottom:4px; }
.kaynak-desc  { font-size:13px; color:var(--text3); display:block; margin-bottom:8px; line-height:1.5; }
.kaynak-link  {
    display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600;
    color:var(--green); text-decoration:none; padding:4px 14px; border-radius:20px;
    border:1.5px solid var(--green); transition:all 0.2s;
}
.kaynak-link:hover { background:var(--green); color:#0f1e14; }

.calisma-kutu { background:var(--surface); border-radius:20px; padding:30px; box-shadow:var(--shadow); border:2px solid var(--border); }
.calisma-adim { display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border); }
.calisma-adim:last-child { border-bottom:none; }
.adim-no {
    background:var(--green); color:#0f1e14; font-family:'Nunito',sans-serif;
    font-weight:900; font-size:16px; width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.adim-content strong { display:block; font-size:15px; color:var(--text); margin-bottom:4px; }
.adim-content span { font-size:13px; color:var(--text3); line-height:1.5; }

.iletisim-tablo { width:100%; border-collapse:collapse; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:var(--surface); }
.iletisim-tablo th { background:linear-gradient(135deg,var(--green),#27ae60); color:white; padding:14px 18px; text-align:left; font-family:'Nunito',sans-serif; font-weight:800; font-size:14px; }
.iletisim-tablo td { padding:13px 18px; font-size:14px; color:var(--text2); border-bottom:1px solid var(--border); }
.iletisim-tablo tr:last-child td { border-bottom:none; }
.iletisim-tablo tr:nth-child(even) td { background:var(--bg); }

/* ---- FOOTER ---- */
footer { background:linear-gradient(135deg,#1a2e22,#0a3020); color:rgba(255,255,255,0.6); text-align:center; padding:45px 20px; font-size:14px; }
.footer-logo { font-family:'Nunito',sans-serif; font-size:24px; font-weight:800; color:var(--green); margin-bottom:10px; }

/* ---- KEYFRAMES ---- */
@keyframes fadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:translateY(0)} }

/* ---- RESPONSIVE ---- */
@media (max-width:768px) {
    .navbar { padding:14px 22px; }
    .hamburger { display:flex; }
    .nav-menu {
        display:none; flex-direction:column; position:fixed;
        top:0; right:-100%; width:260px; height:100vh;
        background:rgba(5,15,8,0.97); backdrop-filter:blur(20px);
        padding:70px 20px 30px; gap:4px; transition:right 0.35s ease;
        box-shadow:-10px 0 40px rgba(0,0,0,0.4); z-index:999;
    }
    .nav-menu.open { display:flex; right:0; }
    .nav-menu ul { flex-direction:column; width:100%; gap:4px; }
    .nav-menu ul li a { display:block; padding:12px 20px; border-radius:12px; font-size:16px; }
    .dark-toggle { align-self:flex-start; margin-left:0; margin-top:10px; }
    .bmi-grid { grid-template-columns:1fr; }
    .contact-section { grid-template-columns:1fr; }
    .sleep-calc-grid { grid-template-columns:1fr; }
    .stats { gap:40px; padding:60px 20px; }
    .cards { gap:18px; }
    .card { width:100%; max-width:340px; }
    .hero-buttons { flex-direction:column; align-items:center; }
    .cards-section { padding:70px 20px 50px; }
}