/* Hatirlatmalar karti */
#app .reminders-card{
  border:1.5px solid rgba(239,196,92,.4) !important;
  border-radius:15px !important;
  background:radial-gradient(500px 200px at 100% 0,rgba(239,196,92,.09),transparent 70%),linear-gradient(160deg,#0a2436,#04141f) !important;
  padding:18px 20px !important;
}
#app .reminders-card .genel-head-icon.gold{
  background:rgba(239,196,92,.16) !important;
  border-color:rgba(239,196,92,.5) !important;
  color:#ffd970 !important;
  font-size:20px;
  display:grid;place-items:center;
}
#app .reminders-card .card-head h3{font-size:18px !important;color:#f4fbff !important}
#app .reminders-card .card-head small{font-size:12px !important;color:#94b3c4 !important}

.reminder-form{
  display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 16px;
  padding:12px;border:1px solid rgba(239,196,92,.22);border-radius:12px;
  background:rgba(6,26,42,.6);
}
#reminderText{
  flex:1 1 320px;min-width:0;min-height:44px;padding:0 14px;
  border:1px solid rgba(96,170,210,.35);border-radius:10px;
  background:#04182a;color:#eaf7ff;font-size:13.5px;outline:0;
}
#reminderText:focus{border-color:#ffd970;box-shadow:0 0 0 3px rgba(239,196,92,.12)}
#reminderDate,#reminderPriority{
  min-height:44px;padding:0 12px;border:1px solid rgba(96,170,210,.35);border-radius:10px;
  background:#04182a;color:#eaf7ff;font-size:13px;outline:0;
}
#reminderPriority{max-width:140px}
#reminderAdd{
  min-height:44px;padding:0 20px;border:1px solid #e6b73d;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,#ffd970,#e2a72a);color:#332200;
  font-size:13.5px;font-weight:900;white-space:nowrap;
}
#reminderAdd:hover{filter:brightness(1.08)}
#reminderAdd:disabled{opacity:.6;cursor:wait}

.reminder-list{display:flex;flex-direction:column;gap:9px;max-height:420px;overflow-y:auto;scrollbar-width:thin}
.reminder-empty{padding:26px;text-align:center;color:#7e9dae;font-size:13px}

.rem-item{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  border:1px solid rgba(96,170,210,.26);border-radius:11px;
  background:rgba(8,32,50,.72);
  transition:.15s ease;
}
.rem-item:hover{border-color:rgba(96,200,235,.5);background:rgba(10,42,64,.85)}
.rem-item.prio-acil{border-left:3px solid #ff5d6c}
.rem-item.prio-onemli{border-left:3px solid #ffd970}
.rem-item.prio-normal{border-left:3px solid #5fb8f7}
.rem-item.done{opacity:.5}
.rem-item.done .rem-text{text-decoration:line-through;color:#8fa6b3}

.rem-check{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;cursor:pointer;
  border:1.5px solid rgba(96,200,235,.45);background:rgba(6,28,48,.9);
  color:#25e0a6;font-size:14px;font-weight:900;line-height:1;
  display:grid;place-items:center;transition:.15s;
}
.rem-check:hover{border-color:#25e0a6;background:rgba(18,70,70,.8)}
.rem-item.done .rem-check{background:rgba(37,224,166,.25);border-color:#25e0a6}

.rem-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.rem-text{color:#eef9ff;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;font-weight:600}
.rem-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rem-prio{font-size:9.5px;font-weight:900;letter-spacing:.5px;padding:2px 9px;border-radius:999px}
.rem-prio.acil{background:rgba(255,93,108,.18);color:#ff9fb0;border:1px solid rgba(255,93,108,.4)}
.rem-prio.onemli{background:rgba(239,196,92,.16);color:#ffd970;border:1px solid rgba(239,196,92,.4)}
.rem-prio.normal{background:rgba(95,184,247,.14);color:#8ed4ff;border:1px solid rgba(95,184,247,.35)}
.rem-due{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:#9dbccd}
.rem-due.late{background:rgba(255,93,108,.18);color:#ff9fb0}
.rem-due.today{background:rgba(239,196,92,.18);color:#ffd970}
.rem-due.soon{background:rgba(95,184,247,.14);color:#8ed4ff}
.rem-by{font-size:10px;color:#6f8b9b}

.rem-del{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,120,140,.3);background:rgba(120,30,50,.3);
  color:#ffb9c6;font-size:13px;
}
.rem-del:hover{border-color:#ff718d;background:rgba(174,40,68,.45)}

@media(max-width:700px){
  .reminder-form{flex-direction:column}
  #reminderText{flex:1 1 auto;width:100%}
  #reminderDate,#reminderPriority,#reminderAdd{width:100%;max-width:none}
}