/* Serçe Ödeme Sistemi — tema (serce.com.tr markasıyla uyumlu, mobil öncelikli) */

@font-face { font-family:"Science Gothic"; src:url("/assets/fonts/ScienceGothic-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Elms Sans"; src:url("/assets/fonts/ElmsSans-Variable.ttf") format("truetype"); font-weight:100 900; font-display:swap; }

:root{
  --brand:#ff681e; --brand-hover:#ff7a3a; --brand-soft:rgba(255,104,30,.10); --brand-border:rgba(255,104,30,.45);
  --bg:#0b0d10; --surface:#111419; --raised:#171b21; --inset:#0f1216;
  --text:#f4f6f8; --text-2:#b1b7bf; --muted:#7f8791; --inverse:#090b0d;
  --border:#252a31; --border-strong:#353c45;
  --ok:#2fa66a; --warn:#c98722; --danger:#e05a5a; --info:#3d78c5;
  --radius:12px; --radius-sm:8px; --shadow:0 12px 30px rgba(0,0,0,.22);
  --font-head:"Science Gothic","Arial Black",Arial,sans-serif;
  --font-body:"Elms Sans",Inter,"Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em;overflow-wrap:anywhere}
h1{font-size:clamp(1.6rem,5vw,2.3rem)} h2{font-size:clamp(1.3rem,4vw,1.7rem)} h3{font-size:1.15rem}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
p{margin:0 0 1rem} img{max-width:100%}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.container--narrow{max-width:560px}

/* Header */
.appbar{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.appbar__inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:var(--brand);text-decoration:none;letter-spacing:.3px;white-space:nowrap}
.brand small{display:block;font-family:var(--font-body);font-weight:400;font-size:.62rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:-2px}

/* Layout blocks */
.section{padding:clamp(24px,5vw,44px) 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(18px,4vw,28px)}
.card + .card{margin-top:18px}
.card--raised{background:var(--raised);box-shadow:var(--shadow)}
.muted{color:var(--muted)} .text-2{color:var(--text-2)}
.center{text-align:center}
.stack>*+*{margin-top:14px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grid{display:grid;gap:16px}
@media(min-width:720px){ .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} }

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:.98rem;
  padding:12px 22px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:.15s;min-height:46px;line-height:1}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--primary:hover{background:var(--brand-hover)}
.btn--block{display:flex;width:100%}
.btn--lg{padding:15px 26px;font-size:1.05rem;min-height:54px}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--danger{background:transparent;color:var(--danger);border-color:rgba(224,90,90,.5)}
.btn--danger:hover{background:rgba(224,90,90,.12)}
.btn--sm{padding:8px 14px;min-height:38px;font-size:.86rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Forms */
label{display:block;font-size:.86rem;color:var(--text-2);margin:0 0 6px;font-weight:600}
.field{margin-bottom:16px}
input,select,textarea{width:100%;background:var(--inset);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:var(--font-body);font-size:1rem;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
input::placeholder{color:var(--muted)}
textarea{min-height:96px;resize:vertical}
.field--inline{display:grid;gap:12px}
@media(min-width:520px){ .field--2{grid-template-columns:1fr 1fr} .field--3{grid-template-columns:2fr 1fr 1fr} }
.field-hint{font-size:.78rem;color:var(--muted);margin-top:5px}
.field-error{color:var(--danger);font-size:.82rem;margin-top:5px}
.has-error input,.has-error select{border-color:var(--danger)}

/* Alerts */
.notice{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-sm);padding:12px 16px;font-size:.92rem;margin-bottom:16px}
.notice--ok{border-left-color:var(--ok);background:rgba(47,166,106,.08)}
.notice--warn{border-left-color:var(--warn);background:rgba(201,135,34,.08)}
.notice--danger{border-left-color:var(--danger);background:rgba(224,90,90,.08)}
.notice--info{border-left-color:var(--info);background:rgba(61,120,197,.08)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.badge--paid{color:var(--ok);border-color:rgba(47,166,106,.4);background:rgba(47,166,106,.08)}
.badge--sent{color:var(--info);border-color:rgba(61,120,197,.4);background:rgba(61,120,197,.08)}
.badge--draft{color:var(--muted)}
.badge--failed{color:var(--danger);border-color:rgba(224,90,90,.4);background:rgba(224,90,90,.08)}
.badge--cancelled{color:var(--muted);text-decoration:line-through}

/* Tables (admin) → mobil kart */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th,table.data td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
table.data thead th{background:var(--inset);color:var(--text-2);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:rgba(255,255,255,.02)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:719px){
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data thead{display:none}
  table.data tr{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px;padding:6px 4px}
  table.data td{border:none;display:flex;justify-content:space-between;gap:16px;padding:8px 14px;text-align:right}
  table.data td::before{content:attr(data-label);color:var(--muted);font-size:.78rem;font-weight:600;text-align:left}
  .num{text-align:right}
}

/* Payment page */
.pay-wrap{max-width:520px;margin:0 auto}
.pay-summary{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}
.pay-summary__amt{font-family:var(--font-head);font-size:2.1rem;color:var(--brand);line-height:1;margin:6px 0 2px}
.pay-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.92rem;border-top:1px solid var(--border)}
.pay-line:first-of-type{border-top:none}
.inst-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.inst{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;cursor:pointer;transition:.15s}
.inst:hover{border-color:var(--brand-border)}
.inst--active{border-color:var(--brand);background:var(--brand-soft)}
.inst input{width:auto;margin:0}
.inst__label{font-weight:700}
.inst__sub{font-size:.78rem;color:var(--muted)}
.inst__total{font-family:var(--font-head);font-size:1.05rem}
.card-input-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pay-secure{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--muted);font-size:.8rem;margin-top:14px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border-strong);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-busy{position:relative;color:transparent!important}
.btn.is-busy::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}

/* Sonuç sayfası */
.result{max-width:480px;margin:0 auto}
.result__icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:2rem;font-weight:800;font-family:var(--font-head)}
.result--ok .result__icon{background:rgba(47,166,106,.14);color:var(--ok);border:2px solid rgba(47,166,106,.5)}
.result--fail .result__icon{background:rgba(224,90,90,.14);color:var(--danger);border:2px solid rgba(224,90,90,.5)}
.result .btn{margin-top:18px}
.result--pending .spinner{width:40px;height:40px;border-width:3px;margin:4px auto 2px}

/* Admin nav */
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.admin-nav a{color:var(--text-2);font-size:.9rem;font-weight:600;padding:8px 12px;border-radius:var(--radius-sm)}
.admin-nav a:hover{color:var(--text);background:var(--raised);text-decoration:none}
.admin-nav a.active{color:var(--brand);background:var(--brand-soft)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.stat__label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat__value{font-family:var(--font-head);font-size:1.8rem;margin-top:4px}
.stat__value--brand{color:var(--brand)}

.appfoot{border-top:1px solid var(--border);color:var(--muted);font-size:.8rem;padding:22px 0;margin-top:40px;text-align:center}
.hide{display:none!important}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}