@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#4a2f5c;
  --ink-2:#5c3a70;
  --paper:#fffafd;
  --paper-line:#efdcf2;
  --accent:#2f9e77;   /* dogru / basari */
  --amber:#e2a53a;    /* orta */
  --coral:#e2574c;    /* yanlis / eksik */
  --gold:#c9922c;
  --pembe:#e685a8;     /* romantik ana renk - pembe */
  --pembe-acik:#ffeaf3; /* acik pembe zemin */
  --mor:#b48ee0;       /* romantik ikincil renk - mor */
  --mor-acik:#f1e6fb;  /* acik mor zemin */
  --lavanta:#f3e3f7;
  --muted:#9b81a8;
  --shadow: 0 14px 34px rgba(180,142,224,0.18);
}

@keyframes kalp-atisi{
  0%,100%{ transform:scale(1); }
  25%{ transform:scale(1.18); }
  40%{ transform:scale(0.96); }
  55%{ transform:scale(1.1); }
}
.kalp{ display:inline-block; animation:kalp-atisi 1.4s ease-in-out infinite; }

.sevgi-notu{
  background:linear-gradient(120deg, var(--pembe-acik), var(--mor-acik));
  border:1.5px dashed var(--mor);
  border-radius:16px;
  padding:14px 18px;
  font-family:'Zilla Slab', serif;
  font-style:italic;
  color:#6b3d78;
  font-size:15px;
  margin:14px 0;
}

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

body{
  background:linear-gradient(160deg, #6b3f85 0%, #7a4a8f 45%, #8a5a9a 100%);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,200,222,0.22), transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(230,197,251,0.20), transparent 50%),
    linear-gradient(160deg, #6b3f85 0%, #7a4a8f 45%, #8a5a9a 100%);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
}

.sayfa{
  max-width:960px;
  margin:0 auto;
  padding:32px 20px 80px;
}

/* Ust baslik seridi - defter cetveli hissi */
.baslik{
  color:#fff5fb;
  padding:18px 4px 26px;
  border-bottom:1px dashed rgba(255,245,251,0.28);
  margin-bottom:28px;
}
.baslik .etiket{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ffd7e8;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.35);
  padding:4px 10px;
  border-radius:100px;
  margin-bottom:12px;
}
.baslik h1{
  font-family:'Zilla Slab', serif;
  font-weight:700;
  font-size:2.2rem;
  margin:0 0 6px;
  line-height:1.15;
}
.baslik p{
  margin:0;
  color:#f0e0f5;
  font-size:15px;
  max-width:640px;
}

/* Kartlar - kagit gorunumu */
.karton{
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:26px 28px;
  margin-bottom:22px;
  position:relative;
}
.karton::before{
  content:"";
  position:absolute;
  left:0; top:18px; bottom:18px;
  width:4px;
  background:linear-gradient(to bottom, var(--pembe), var(--mor));
  opacity:.6;
  border-radius:4px;
}
.karton{ padding-left:34px; }

/* Ders sekmeleri */
.ders-secim{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
  margin:18px 0 6px;
}
.ders-kutu{
  background:#fff;
  border:1.5px solid var(--paper-line);
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;
  transition:.15s ease;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.ders-kutu:hover{ border-color:var(--pembe); box-shadow:0 6px 18px rgba(230,133,168,0.2); transform:translateY(-1px); }
.ders-kutu input{ margin-top:3px; accent-color:var(--pembe); width:16px; height:16px; }
.ders-kutu .ad{ font-weight:600; font-family:'Zilla Slab',serif; font-size:1.02rem; }
.ders-kutu .alt{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }

.eylem-satiri{ display:flex; gap:12px; align-items:center; margin-top:20px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
  padding:12px 22px;
  border-radius:100px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:.18s ease;
}
.btn-ana{ background:linear-gradient(120deg, var(--pembe), var(--mor)); color:#fff; box-shadow:0 8px 20px rgba(180,142,224,0.35); }
.btn-ana:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-ikinci{ background:transparent; color:var(--ink); border:1.5px solid var(--mor); }
.btn-ikinci:hover{ background:var(--mor-acik); }
.btn-kucuk{ font-size:13px; padding:8px 14px; }

/* Soru blogu */
.konu-basligi{
  font-family:'Zilla Slab', serif;
  font-weight:700;
  font-size:1.15rem;
  margin:0 0 4px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
}
.konu-basligi .sayac{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:11px;
  color:var(--mor);
  background:rgba(180,142,224,.12);
  border:1px solid rgba(180,142,224,.35);
  padding:2px 8px;
  border-radius:100px;
}
.ders-blok{ margin-bottom:6px; }
.ders-blok > h2{
  font-family:'Zilla Slab', serif;
  font-size:1.5rem;
  border-bottom:2px solid rgba(255,255,255,0.4);
  padding-bottom:8px;
  margin:38px 0 18px;
  color:#fff5fb;
}
.soru-kart{
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:14px;
}
.soru-metin{ font-weight:600; margin:0 0 10px; line-height:1.5; }
.secenek{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  transition:.12s ease;
}
.secenek:hover{ background:var(--mor-acik); }
.secenek input{ margin-top:3px; accent-color:var(--pembe); }
.harf{ font-weight:700; color:var(--mor); width:18px; flex:0 0 auto; }

/* Sonuc / karne */
.ozet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin:18px 0 8px;
}
.ozet-kutu{
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:16px;
  padding:16px;
  text-align:center;
}
.ozet-kutu .sayi{ font-family:'Zilla Slab',serif; font-size:2rem; font-weight:700; }
.ozet-kutu .etiket2{ font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.dogru-renk{ color:var(--accent); }
.yanlis-renk{ color:var(--coral); }

.konu-satir{
  display:grid;
  grid-template-columns: 1.4fr 90px 2fr;
  gap:14px;
  align-items:center;
  padding:10px 4px;
  border-bottom:1px solid var(--paper-line);
  font-size:14.5px;
}
.konu-satir:last-child{ border-bottom:none; }
.konu-adi{ font-weight:600; }
.konu-ders{ display:block; font-size:12px; color:var(--muted); font-weight:400; }
.bar-arka{ background:var(--mor-acik); border-radius:6px; height:10px; overflow:hidden; }
.bar-dolu{ height:100%; border-radius:6px; }
.durum-etiket{
  font-size:12px; font-weight:700; padding:3px 9px; border-radius:100px; display:inline-block;
}
.durum-iyi{ background:rgba(47,158,119,.14); color:var(--accent); }
.durum-orta{ background:rgba(226,165,58,.16); color:var(--gold); }
.durum-zayif{ background:rgba(226,87,76,.14); color:var(--coral); }

.uyari{
  background:rgba(226,87,76,.08);
  border:1px solid rgba(226,87,76,.3);
  border-radius:10px;
  padding:14px 16px;
  font-size:14.5px;
}

.gecmis-satir{
  display:grid; grid-template-columns:1fr 100px 100px;
  gap:10px; padding:10px 4px; border-bottom:1px solid var(--paper-line); font-size:14.5px;
}

/* Ust izgara - kalori hesaplayici + sevgi notu yan yana */
.ust-izgara{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  align-items:start;
  margin-bottom:6px;
}
.ust-izgara .sevgi-notu{ margin:0; height:100%; }

/* Kalori hesaplayici formu */
.form-grup{ margin-bottom:12px; }
.form-grup label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:5px;
}
.form-grup input[type=number],
.form-grup select{
  width:100%;
  padding:9px 12px;
  border:1.5px solid var(--paper-line);
  border-radius:10px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  background:#fff;
  color:var(--ink);
  transition:.15s ease;
}
.form-grup input[type=number]:focus,
.form-grup select:focus{
  outline:none;
  border-color:var(--pembe);
  box-shadow:0 0 0 3px rgba(230,133,168,0.18);
}
.form-satir-ikili{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.segment-secim{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.segment-secim label{
  flex:1;
  min-width:70px;
  text-align:center;
  padding:8px 6px;
  border:1.5px solid var(--paper-line);
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  color:var(--muted);
  transition:.15s ease;
}
.segment-secim input{ display:none; }
.segment-secim input:checked + label,
.segment-secim label.secili{
  border-color:var(--pembe);
  background:var(--pembe-acik);
  color:#a8386a;
}
.kalori-sonuc{
  margin-top:16px;
  background:linear-gradient(120deg, var(--pembe-acik), var(--mor-acik));
  border:1.5px solid var(--mor);
  border-radius:14px;
  padding:16px 18px;
  display:none;
}
.kalori-sonuc.gorunur{ display:block; }
.kalori-sonuc .buyuk-sayi{
  font-family:'Zilla Slab',serif;
  font-weight:700;
  font-size:1.8rem;
  color:var(--ink);
}
.kalori-sonuc .kucuk-etiket{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.kalori-not{
  font-size:12.5px;
  color:var(--muted);
  margin-top:12px;
  line-height:1.5;
  font-style:italic;
}
.uyari-hafif{
  background:rgba(226,165,58,.12);
  border:1px solid rgba(226,165,58,.35);
  border-radius:10px;
  padding:8px 12px;
  font-size:12.5px;
  color:#8a6a1c;
  margin-top:10px;
}

footer.alt{ text-align:center; color:#e9d9f0; font-size:12.5px; margin-top:30px; }

@media (max-width:780px){
  .ust-izgara{ grid-template-columns:1fr; }
  .form-satir-ikili{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .konu-satir{ grid-template-columns:1fr; }
  .gecmis-satir{ grid-template-columns:1fr; }
}