:root{
  --primary-color:#2e7d32;
  --primary-hover:#1b5e20;
  --bg-color:#f7f8fc;
  --card-bg:#ffffff;
  --text-color:#333;
  --muted:#6c757d;
  --border-radius:12px;
  --code-bg:#272822;
}
*{box-sizing:border-box}
body{
  background-color:var(--bg-color);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  color:var(--text-color);
  font-size:1rem;line-height:1.5;
  padding-top:2rem;padding-bottom:2rem;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:900px;margin:0 auto;padding-left:12px;padding-right:12px}
.py-4{padding-top:1.5rem;padding-bottom:1.5rem}
.mb-5{margin-bottom:3rem}
.mb-4{margin-bottom:1.5rem}
.mb-3{margin-bottom:1rem}
.mt-4{margin-top:1.5rem}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}

.icon{width:1em;height:1em;vertical-align:-.125em;flex:none}
.me-1{margin-right:.25rem}
.me-2{margin-right:.5rem}

.header-icon{color:var(--primary-color);width:3rem;height:3rem;display:block;margin:0 auto 1rem}
h1{font-size:calc(1.375rem + 1.5vw);font-weight:700;color:var(--primary-color);margin:0 0 .5rem;line-height:1.2}
@media (min-width:1200px){h1{font-size:2.5rem}}
.lead{font-size:1.25rem;font-weight:300;margin:0 auto;max-width:44rem}
.sub-note{font-size:.95rem;color:var(--muted);margin:.75rem auto 0;max-width:42rem}

.card{
  background-color:var(--card-bg);border:none;border-radius:var(--border-radius);
  box-shadow:0 8px 25px rgba(0,0,0,.08);padding:1.5rem;
}
.row{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){.row{grid-template-columns:repeat(3,1fr)}}
.col{display:flex;flex-direction:column;min-width:0}
.form-label{display:block;margin-bottom:.5rem;font-weight:600}
.input-group{display:flex;margin-top:auto}
.input-group-text{
  display:flex;align-items:center;justify-content:center;
  padding:.375rem .75rem;background-color:#f8f9fa;color:#212529;
  border:1px solid #dee2e6;border-right:0;border-radius:.375rem 0 0 .375rem;flex:none;
}
.form-control{
  display:block;width:100%;min-width:0;padding:.375rem .75rem;
  font-family:inherit;font-size:1rem;line-height:1.5;color:#212529;
  background-color:#fff;border:1px solid #dee2e6;border-radius:0 .375rem .375rem 0;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus{
  outline:0;border-color:var(--primary-color);
  box-shadow:0 0 0 .25rem rgba(46,125,50,.25);position:relative;z-index:1;
}
.form-control::placeholder{color:#adb5bd}

.form-warning{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin:.75rem 0 0;color:#dc3545;font-weight:600;
}
.form-warning[hidden]{display:none}
.d-grid{display:grid}
.btn-primary{
  display:flex;align-items:center;justify-content:center;
  background-color:var(--primary-color);border:1px solid var(--primary-color);color:#fff;
  font-family:inherit;font-size:1rem;font-weight:600;
  padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;
  transition:background-color .3s ease,transform .2s ease;
}
.btn-primary:hover{background-color:var(--primary-hover);border-color:var(--primary-hover);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.credit{font-size:12px;color:var(--muted);margin:0}

#output{display:none;opacity:0;transition:opacity .5s ease-in-out}
#output.show{display:block;opacity:1}
h3{font-size:1.75rem;font-weight:500;margin:0 0 1.5rem;line-height:1.2}

.accordion-item{
  background-color:var(--card-bg);border:1px solid #e0e0e0;
  margin-bottom:1rem;border-radius:var(--border-radius);overflow:hidden;
}
.accordion-button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;font-family:inherit;font-size:1rem;font-weight:600;
  color:var(--text-color);background-color:transparent;border:0;text-align:left;cursor:pointer;
  transition:background-color .15s ease-in-out,color .15s ease-in-out;
}
.accordion-button strong{font-weight:700;margin-right:.5rem}
.accordion-button .chevron{transition:transform .2s ease-in-out;flex:none;width:1.25rem;height:1.25rem}
.accordion-item.open .accordion-button{background-color:#e8f5e9;color:var(--primary-color)}
.accordion-item.open .chevron{transform:rotate(180deg)}
.accordion-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.accordion-item.open .accordion-collapse{grid-template-rows:1fr}
.accordion-clip{overflow:hidden;min-height:0}
.accordion-body{
  padding:1rem 1.25rem 1.25rem;opacity:0;transform:translateY(-6px);
  transition:opacity .28s ease .05s,transform .28s ease .05s;
}
.accordion-item.open .accordion-body{opacity:1;transform:none}
.accordion-body .small{font-size:.875em;margin:0 0 1rem}

.code-container{position:relative}
pre{
  margin:0;padding:1.5rem 1rem 1rem 1rem;border-radius:8px;overflow:auto;
  background:var(--code-bg);color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);
  font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
  font-size:1em;line-height:1.5;text-align:left;white-space:pre;
  word-spacing:normal;word-break:normal;tab-size:4;hyphens:none;
}
.copy-btn{
  position:absolute;top:12px;right:12px;z-index:2;
  display:flex;align-items:center;
  background-color:#3a3a3a;color:#e0e0e0;border:none;
  padding:6px 10px;border-radius:6px;font-family:inherit;font-size:.9em;
  cursor:pointer;transition:background-color .2s ease;
}
.copy-btn:hover{background-color:#555}
.copy-btn.copied{background-color:#2e7d32;color:#fff}

/* Prism okaidia token renkleri */
.token.comment{color:#8292a2}
.token.punctuation{color:#f8f8f2}
.token.function{color:#e6db74}
.token.keyword{color:#66d9ef}
.token.string{color:#a6e22e}
.token.selector,.token.attr-name{color:#a6e22e}
.token.attr-value{color:#e6db74}
.token.number{color:#ae81ff}

/* Sağ alt köşedeki detaylı yapılandırma butonu */
.page-jump{
  position:fixed;bottom:20px;right:20px;z-index:30;
  display:inline-flex;align-items:center;gap:.5rem;
  background-color:var(--primary-color);color:#fff;text-decoration:none;
  font-size:.95rem;font-weight:600;line-height:1;
  padding:.75rem 1.15rem;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:background-color .3s ease,transform .2s ease,box-shadow .3s ease;
}
.page-jump svg{width:1.05em;height:1.05em;flex:none}
.page-jump:hover{
  background-color:var(--primary-hover);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.page-jump:active{transform:translateY(0)}
@media (max-width:520px){
  .page-jump{bottom:14px;right:14px;padding:.65rem .95rem;font-size:.875rem}
  body{padding-bottom:5rem}
}
@media (prefers-reduced-motion:reduce){
  .page-jump{transition:none}
  .page-jump:hover{transform:none}
}