/* Reset & Temalar */
* { box-sizing: border-box }
:root{
  --bg:#0b0c1000;
  --card:#121318;
  --text:#e8e8ea;
  --muted:#a7a7ad;
  --accent:#5bbad5;
  --accent-2:#9ad5ff;
  --border:#23242b;
  --ring:#2b94bd;
}
html,body{
  margin:0; padding:0;
  background:#0b0c1000; color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Üst Bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(11,12,16,.9);
  backdrop-filter:saturate(150%) blur(6px);
}
.topbar h1{ margin:0; font-size:18px; letter-spacing:.3px }
.token-wrap{ display:flex; gap:8px; align-items:center }
.token-wrap input{
  background:#0f1116; border:1px solid var(--border); color:var(--text);
  padding:6px 8px; border-radius:8px; min-width:180px;
}

/* Kart */
.card{
  max-width:900px; margin:32px auto; padding:20px;
  border:1px solid var(--border); border-radius:16px; background:var(--card);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* Form */
.row{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.row label{ font-weight:600 }

.row textarea{
  resize:vertical; min-height:120px;
}

/* Input & Textarea temel görünüm */
.row textarea,
.row input[type='file']{
  background:#0f1116; border:1px solid var(--border); color:var(--text);
  padding:10px; border-radius:8px;
  /* Tipografi: result ile aynı */
  font-family:inherit; font-size:16px; line-height:1.45; letter-spacing:.2px;
}

/* Odak (focus) görünümü */
.row textarea:focus,
.token-wrap input:focus,
button:focus{
  outline:none;
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent);
}

/* Aksiyon satırı */
.actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }

/* Butonlar */
button{
  all:unset; cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#051018; padding:10px 18px; border-radius:999px; font-weight:700;
  box-shadow:0 4px 18px rgba(91,186,213,.3);
  transition:transform .06s ease, filter .15s ease, opacity .15s ease;
}
button:hover{ filter:brightness(1.06) }
button:active{ transform:translateY(1px) scale(0.99) }
button.busy{ opacity:.7; cursor:progress }



/* Sonuç kutusu */
.result{
  white-space:pre-wrap;
  background:#0f1116; border:1px solid var(--border);
  padding:12px; border-radius:10px; min-height:80px;
  font-family:inherit; font-size:16px; line-height:1.6; letter-spacing:.2px;
}

/* Metin yardımcı sınıfı (istersen prompt/result’a birlikte ekleyebilirsin) */
.text-like{
  font-family:inherit; font-size:16px; line-height:1.45; letter-spacing:.2px;
}

/* Yardımcı */
.muted{ color:var(--muted) }
.center{ text-align:center; margin:20px auto }

/* Küçük ekran uyumu */
@media (max-width:600px){
  .card{ margin:20px 12px; padding:16px }
  .token-wrap input{ min-width:140px }
}

/* İsteğe bağlı: scroll bar inceltme (webkit) */
::-webkit-scrollbar{ height:10px; width:10px }
::-webkit-scrollbar-thumb{ background:#2a2c34; border-radius:8px }
::-webkit-scrollbar-track{ background:#121318 }