/* anneliq PHP — tasarım tokenları + bileşen stilleri (globals.css'ten taşındı) */

:root {
  --background:#f5f7fb; --surface:#fff; --surface-alt:#eef1f7;
  --foreground:#1e2a3a; --muted:#5a6b7e; --label:#3a4a5e;
  --border:#e2e8f0; --hairline:#e9edf3;
  --primary:#5b80be; --primary-fg:#fff; --accent:#d98aa1; --accent-fg:#fff;
  --success:#3fae82; --warning:#e0a458; --danger:#d96a6a; --sale:#d9657a;
  --gradient-from:#5b80be; --gradient-to:#d98aa1;
  --tint-expert:#f1faf5; --tint-saved:#fdf2f6; --tint-normal:#f2f6fc;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px;
}
.dark {
  --background:#0f1621; --surface:#172030; --surface-alt:#1e2838;
  --foreground:#e8edf4; --muted:#9aa7b8; --label:#c2ccd9;
  --border:#283447; --hairline:#222c3c;
  --primary:#6e97d6; --primary-fg:#0b1220; --accent:#d98aa1; --accent-fg:#1a1016;
  --success:#4cbf90; --warning:#e6b06a; --danger:#e07d7d; --sale:#e07d92;
  --gradient-from:#4a6aa6; --gradient-to:#b46d84;
  --tint-expert:#16261f; --tint-saved:#251820; --tint-normal:#141f30;
}

*{box-sizing:border-box;border-color:var(--border);}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--background);color:var(--foreground);min-height:100dvh;
  font-family:'Nunito',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ---- Layout ---- */
.app{min-height:100dvh;}
@media(min-width:768px){.app{display:flex;}}
.sidebar{display:none;}
@media(min-width:768px){
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:256px;display:flex;flex-direction:column;
    border-right:1px solid var(--hairline);background:var(--surface);padding:24px 16px;}
  .main{margin-left:256px;flex:1;width:100%;}
}
.main{width:100%;}
.container{max-width:672px;margin:0 auto;padding:16px 16px 112px;}
@media(min-width:768px){.container{padding:32px;}}

.brand-logo{display:flex;justify-content:center;}
.brand-logo img{height:84px;width:auto;}
.nav{margin-top:32px;display:flex;flex-direction:column;gap:4px;flex:1;}
.nav a{display:flex;align-items:center;gap:12px;border-radius:var(--radius-md);padding:10px 12px;
  font-size:15px;font-weight:600;color:var(--label);}
.nav a:hover{background:var(--surface-alt);}
.nav a.active{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}
.sidebar-foot{margin-top:16px;border-top:1px solid var(--hairline);padding-top:16px;display:flex;
  align-items:center;justify-content:space-between;}

/* Mobil üst başlık */
.mheader{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--hairline);background:color-mix(in srgb,var(--surface) 90%,transparent);
  padding:10px 16px;backdrop-filter:blur(8px);}
@media(min-width:768px){.mheader{display:none;}}
.mheader .brand img{height:48px;width:auto;}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;
  border-radius:999px;color:var(--muted);background:none;border:none;position:relative;}
.iconbtn:hover{background:var(--surface-alt);}

/* Mobil alt tab */
.tabbar{position:fixed;inset:auto 0 0 0;z-index:30;display:flex;border-top:1px solid var(--hairline);
  background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(8px);
  padding-bottom:env(safe-area-inset-bottom);}
@media(min-width:768px){.tabbar{display:none;}}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:10px 0;font-size:11px;font-weight:600;color:var(--muted);}
.tabbar a.active{color:var(--primary);}
.tabbar .fab{position:relative;}
.tabbar .fab span{margin-top:-20px;display:flex;height:56px;width:56px;align-items:center;justify-content:center;
  border-radius:999px;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18);
  background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));}

/* ---- Tipografi ---- */
h1.page{font-size:24px;font-weight:900;margin:0;}
.muted{color:var(--muted);}
.sub{color:var(--muted);font-size:14px;}
.stack{display:flex;flex-direction:column;gap:20px;}
.stack-sm{display:flex;flex-direction:column;gap:14px;}
.stack-xs{display:flex;flex-direction:column;gap:8px;}

/* ---- Kart ---- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);}
.card.pad{padding:20px;}
.card.pad-sm{padding:16px;}

/* ---- Buton ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  border-radius:var(--radius-md);font-weight:700;font-size:15px;height:44px;padding:0 18px;
  transition:filter .15s,background .15s;width:100%;}
.btn:disabled{opacity:.55;pointer-events:none;}
.btn-primary{background:var(--primary);color:var(--primary-fg);}
.btn-primary:hover{filter:brightness(.95);}
.btn-accent{background:var(--accent);color:var(--accent-fg);}
.btn-accent:hover{filter:brightness(.95);}
.btn-outline{background:transparent;color:var(--foreground);border:1px solid var(--border);}
.btn-outline:hover{background:var(--surface-alt);}
.btn-danger-outline{background:transparent;border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger);}
.btn-danger-outline:hover{background:color-mix(in srgb,var(--danger) 6%,transparent);}
.btn-lg{height:52px;font-size:16px;}
.btn-auto{width:auto;}
.btn-grad{background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));color:#fff;}

/* ---- Form ---- */
.field{width:100%;}
.field label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--label);}
.input,.textarea,select.input{height:44px;width:100%;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-md);padding:0 14px;font-size:15px;color:var(--foreground);font-family:inherit;}
.textarea{min-height:112px;padding:10px 14px;resize:vertical;line-height:1.5;}
.input:focus,.textarea:focus,select.input:focus{outline:none;border-color:var(--primary);}
.input::placeholder,.textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent);}
.input.err,.textarea.err{border-color:var(--danger);}
.field .hint{margin-top:4px;font-size:12px;color:var(--muted);}
.field .errmsg{margin-top:4px;font-size:12px;font-weight:600;color:var(--danger);}
.check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--label);cursor:pointer;}
.check input{width:18px;height:18px;accent-color:var(--primary);}

/* ---- Chip / Badge ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);
  color:var(--label);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;cursor:pointer;}
.chip:hover{background:var(--surface-alt);}
.chip.sel{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}
.chip-accent.sel{border-color:var(--accent);background:var(--accent);color:var(--accent-fg);}
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;}
.badge-primary{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}
.badge-expert{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success);}

/* ---- Segmented tabs ---- */
.seg{display:flex;background:var(--surface-alt);border-radius:999px;padding:4px;gap:2px;}
.seg a,.seg button{flex:1;text-align:center;border:none;background:none;border-radius:999px;padding:8px 10px;
  font-size:14px;font-weight:700;color:var(--muted);}
.seg a.sel,.seg button.sel{background:var(--surface);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* ---- Avatar ---- */
.avatar{border-radius:999px;background:var(--surface-alt);display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);font-weight:800;overflow:hidden;flex-shrink:0;}
.avatar img{width:100%;height:100%;object-fit:cover;}

/* ---- Hero / banner ---- */
.hero{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:24px;color:#fff;
  background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));}
.hero h1{font-size:24px;font-weight:900;margin:0;line-height:1.15;}
.hero p{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.9);}
.hero .cta{margin-top:16px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--primary);
  border-radius:999px;padding:10px 20px;font-size:14px;font-weight:700;}
.hero .blob{position:absolute;border-radius:999px;background:rgba(255,255,255,.1);pointer-events:none;}
.banner{display:flex;align-items:center;gap:12px;border:1px solid var(--hairline);background:var(--surface);
  border-radius:var(--radius-lg);padding:16px;}
.banner:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);}
.banner .ic-wrap{display:flex;height:44px;width:44px;align-items:center;justify-content:center;border-radius:999px;
  background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}

/* ---- Soru kartı ---- */
.qcard{display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:16px;}
.qcard:hover{box-shadow:0 6px 18px rgba(0,0,0,.07);}
.qcard .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;}
.qcard h3{margin:0;font-size:16px;font-weight:800;line-height:1.3;}
.qcard .excerpt{margin:6px 0 0;color:color-mix(in srgb,var(--foreground) 85%,transparent);font-size:14px;}
.qcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  border-top:1px solid var(--hairline);padding-top:10px;}
.row{display:flex;align-items:center;gap:8px;}
.dim{color:var(--muted);font-size:12px;}
.savebtn{display:inline-flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:999px;
  border:none;background:none;color:var(--muted);}
.savebtn:hover{background:var(--surface-alt);color:var(--accent);}
.savebtn.on{color:var(--accent);}

/* ---- Reklam ---- */
.adcard{display:block;border:1px dashed var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);}
.adcard .tagline{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;padding:8px 12px 0;}

/* ---- Liste satırı ---- */
.listrow{display:flex;align-items:center;gap:12px;border:1px solid var(--hairline);background:var(--surface);
  border-radius:var(--radius-lg);padding:12px;}
.rank{display:flex;height:32px;width:32px;flex-shrink:0;align-items:center;justify-content:center;border-radius:999px;
  font-size:14px;font-weight:900;background:var(--surface-alt);color:var(--muted);}

/* ---- Bildirim ---- */
.notif{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hairline);background:var(--surface);
  border-radius:var(--radius-lg);padding:16px;width:100%;text-align:left;}
.notif.unread{border-color:color-mix(in srgb,var(--primary) 25%,transparent);background:color-mix(in srgb,var(--primary) 5%,transparent);}
.notif .ic-wrap{display:flex;height:40px;width:40px;flex-shrink:0;align-items:center;justify-content:center;border-radius:999px;}

/* ---- Rozet sayaç ---- */
.count{position:absolute;right:6px;top:6px;display:flex;height:16px;min-width:16px;align-items:center;justify-content:center;
  border-radius:999px;background:var(--accent);color:var(--accent-fg);font-size:10px;font-weight:700;padding:0 4px;}

/* ---- Toggle switch ---- */
.switch{position:relative;height:24px;width:44px;border-radius:999px;border:none;background:var(--surface-alt);transition:background .15s;}
.switch.on{background:var(--primary);}
.switch span{position:absolute;top:2px;left:2px;height:20px;width:20px;border-radius:999px;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s;}
.switch.on span{left:22px;}

/* ---- Grid ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(min-width:640px){.sm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}}

/* ---- Empty / spinner ---- */
.empty{text-align:center;padding:48px 16px;color:var(--muted);}
.empty h3{margin:12px 0 4px;color:var(--foreground);font-size:16px;font-weight:800;}
.spinner{width:28px;height:28px;border:3px solid color-mix(in srgb,var(--primary) 25%,transparent);
  border-top-color:var(--primary);border-radius:999px;animation:spin .7s linear infinite;}
.center-pad{display:flex;justify-content:center;padding:64px 0;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Modal ---- */
.modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.4);}
.modal-backdrop[hidden]{display:none;}
@media(min-width:768px){.modal-backdrop{align-items:center;}}
.modal{width:100%;max-width:448px;background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:20px;}
@media(min-width:768px){.modal{border-radius:var(--radius-xl);}}

/* ---- Alert ---- */
.alert{border-radius:var(--radius-md);padding:12px;font-size:14px;font-weight:500;}
.alert-danger{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);}
.alert-success{background:color-mix(in srgb,var(--success) 10%,transparent);color:var(--success);}
.alert-warning{background:color-mix(in srgb,var(--warning) 12%,transparent);color:var(--warning);font-size:12px;}

/* ---- Yardımcılar ---- */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-2{gap:8px;} .gap-3{gap:12px;} .flex-1{flex:1;} .min-w-0{min-width:0;}
.text-primary{color:var(--primary);} .text-accent{color:var(--accent);} .text-success{color:var(--success);}
.text-warning{color:var(--warning);} .text-danger{color:var(--danger);}
.fw-700{font-weight:700;} .fw-800{font-weight:800;} .fw-900{font-weight:900;}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-4{margin-top:16px;} .mb-3{margin-bottom:12px;}
.scroll-x{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;}
.line2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.line1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.whitespace{white-space:pre-wrap;}
.ic{display:inline-block;vertical-align:middle;}
.link{color:var(--primary);font-weight:600;}
.link:hover{text-decoration:underline;}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted);}
.back:hover{color:var(--foreground);}