/* ==========================================================================
   Scraper Arşivi — panel
   Koyu, editoryal arayüz. Gradyan/glass yok; hairline çizgiler + tipografi.
   ========================================================================== */

:root{
    --bg:#0a0a0a;
    --bg-soft:#0f0f0f;
    --bg-raise:#121212;
    --line:#232323;
    --line-soft:#1a1a1a;
    --text:#eeedea;
    --muted:#a5a49d;
    --faint:#83827c;
    --accent:#ff6b35;
    --green:#4fd18b;
    --c-currency:#ff6b35;
    --c-euro:#8fb3a1;
    --c-gold:#d9b23c;
    --c-fuel:#6b8fa3;
    --c-news:#7a6f9b;
    --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --pad:28px;
    --max:1240px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    background:var(--bg);color:var(--text);
    font-family:var(--sans);font-size:15px;line-height:1.6;font-weight:400;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:#0a0a0a}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}

.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------------------------------------------------------------- buttons */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    padding:9px 14px;border:1px solid var(--line);color:var(--text);
    transition:border-color .18s ease,color .18s ease,background .18s ease;
    white-space:nowrap;
}
.btn:hover{border-color:#3a3a3a;background:var(--bg-soft)}
.btn-ghost{background:transparent}
.btn-solid{background:var(--text);color:#0a0a0a;border-color:var(--text)}
.btn-solid:hover{background:#fff;color:#000}
.btn-sm{padding:7px 11px;font-size:10px}
.btn-block{width:100%;margin-top:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn{width:30px;height:30px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.icon-btn:hover{color:var(--text);border-color:#3a3a3a}

/* ---------------------------------------------------------------- login */
.gate{min-height:100vh;display:grid;place-items:center start;padding:56px 20px}
.gate-inner{width:100%;max-width:760px;margin:0 auto}
.gate-brand h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.5vw,86px);line-height:.98;letter-spacing:-.025em;margin:16px 0 18px}
.gate-brand p{color:var(--muted);font-weight:300;max-width:44ch;font-size:15.5px;line-height:1.7}
.gate-form{display:grid;gap:14px;margin-top:34px;max-width:340px}
.gate-form label{display:grid;gap:6px}
.gate-form input{
    background:var(--bg-soft);border:1px solid #303030;padding:11px 12px;color:var(--text);
    transition:border-color .18s ease;
}
.gate-form input:focus{outline:none;border-color:var(--accent)}
.gate-form .btn{margin-top:6px;padding:12px;font-size:11px}
.gate-foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line-soft);max-width:340px}
.form-error{color:#ff7a5c;font-size:12.5px;min-height:18px}
@media (max-width:760px){
    .gate{padding:36px 20px;place-items:start center}
    .gate-form{max-width:none}
}

/* ---------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.96);border-bottom:1px solid var(--line-soft);backdrop-filter:none}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:62px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand-mark{font-family:var(--serif);font-size:21px;letter-spacing:-.01em}
.brand-sub{color:#5f5e59}
.topnav{display:flex;gap:24px;margin-left:auto}
.topnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:5px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.topnav a:hover{color:var(--text);border-bottom-color:var(--accent)}
.topnav a.on{color:var(--text);border-bottom-color:var(--accent)}
.topbar-right{display:flex;align-items:center;gap:14px}
.status-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.status-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block}
.status-pill.stale .dot{background:var(--accent)}
@media (max-width:900px){
    .topnav{display:none}
    .topbar-right{margin-left:auto}
}
@media (max-width:620px){
    .topbar-in{gap:12px;height:58px}
    .brand-sub{display:none}
    #status-text{display:none}
    .status-pill .dot{width:6px;height:6px}
    .btn{padding:8px 10px;font-size:9.5px}
}

/* ---------------------------------------------------------------- hero */
.hero{padding:clamp(44px,6vw,76px) var(--pad) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::after{content:'';height:1px;background:var(--line);flex:0 0 90px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,64px);line-height:1.02;letter-spacing:-.022em;max-width:18ch}
.lede{margin-top:18px;max-width:56ch;color:var(--muted);font-weight:300;font-size:16px;line-height:1.7}
.hero-meta{display:grid;gap:0;border-top:1px solid var(--line)}
.hero-meta>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.hero-meta dt{color:var(--faint)}
.hero-meta dd{font-size:13px;text-align:right}
.hero-meta dd.live{color:var(--green)}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(36px,5vw,60px)}
.stat{padding:20px 22px 20px 0;border-right:1px solid var(--line-soft);display:grid;gap:2px}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,38px);line-height:1.1;letter-spacing:-.02em;display:block;margin-top:6px}
.stat .num small{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em}
.stat .sub{font-size:11.5px;color:var(--faint)}
.skeleton{opacity:.35}

/* ---------------------------------------------------------------- blocks */
.block{padding:clamp(40px,5vw,64px) var(--pad) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sec-kicker{color:var(--accent);margin-bottom:8px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);line-height:1.1;letter-spacing:-.012em}
.sec-note{color:var(--faint)}
.block-note{margin:12px 0 0;color:var(--faint);font-size:12.5px;max-width:70ch}
@media (max-width:760px){
    .hero-grid{grid-template-columns:1fr;gap:26px}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat{padding:16px 16px 16px 0}
    .stat:nth-child(2){border-right:0}
    .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line-soft)}
}

/* ---------------------------------------------------------------- retention */
.retention{margin-top:2px}
.ret-row{
    display:grid;grid-template-columns:minmax(180px,1.4fr) 120px minmax(160px,1.6fr) 110px 100px;
    gap:18px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--line-soft);
    transition:background .16s ease;
}
.ret-row:hover{background:var(--bg-soft)}
.ret-row.head{color:var(--faint);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom-color:var(--line)}
.ret-name{font-size:14px;color:var(--text)}
.ret-name small{display:block;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.06em;margin-top:3px}
.ret-policy{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ret-policy.auto{color:var(--muted)}
.ret-policy.keep{color:var(--accent)}
.ret-bar{position:relative;height:14px;border-left:1px solid var(--line)}
.ret-bar i{position:absolute;left:0;top:5px;height:4px;background:var(--accent);opacity:.85}
.ret-bar span{position:absolute;left:0;top:-1px;width:100%;height:14px;border-right:1px solid var(--line)}
.ret-days{font-family:var(--mono);font-size:12px;color:var(--text)}
.ret-rows{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right}
@media (max-width:820px){
    .ret-row{grid-template-columns:1fr 90px 72px;gap:10px}
    .ret-row .ret-bar{display:none}
    .ret-row.head{display:none}
    .ret-days{text-align:right}
    .ret-rows{display:none}
}

/* ---------------------------------------------------------------- charts */
.chart-card{margin-top:18px;border:1px solid var(--line);background:var(--bg-soft);padding:16px 18px 10px}
.chart-legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:6px}
.chart-legend .item{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.chart-legend .item i{width:14px;height:2px;display:inline-block}
.chart-legend .item b{color:var(--text);font-weight:500;font-family:var(--mono);font-size:11px}
.chart-legend .item.muted{color:var(--faint)}
.chart{position:relative;width:100%;height:250px;margin-top:6px}
.chart-tall{height:230px}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart .grid-line{stroke:#1f1f1f;stroke-width:1}
.chart .axis-label{fill:#93928b;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em}
.chart .line{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{stroke:var(--bg-soft);stroke-width:2}
.chart .hover-line{stroke:#3a3a3a;stroke-width:1;stroke-dasharray:2 3}
.chart .bar{stroke:none}
.chart-empty{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

.chart-tip{
    position:fixed;z-index:90;pointer-events:none;background:#141414;border:1px solid #2b2b2b;
    padding:8px 10px;font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--text);
    min-width:120px;box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.chart-tip .t-date{color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-size:9.5px;margin-bottom:4px}
.chart-tip .t-row{display:flex;justify-content:space-between;gap:14px}
.chart-tip .t-row i{width:7px;height:7px;display:inline-block;margin-right:6px}
.chart-tip .t-row b{font-weight:500}

.seg{display:inline-flex;border:1px solid var(--line)}
.seg button{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:7px 11px;border-right:1px solid var(--line);transition:color .16s,background .16s}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--text)}
.seg button.on{color:#0a0a0a;background:var(--text)}

select,.search{
    background:var(--bg-soft);border:1px solid var(--line);padding:7px 10px;color:var(--text);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;min-width:130px;
}
select:focus,.search:focus{outline:none;border-color:var(--accent)}
.select-wrap{display:flex;align-items:center;gap:10px}
.select-wrap .mono{color:var(--faint)}

/* ---------------------------------------------------------------- sources */
.sources{margin-top:2px}
.src-row.head{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);border-bottom-color:var(--line);padding:8px 2px}
.src-row.head>span{text-align:left}
.src-row.head .src-num,.src-row.head .src-days,.src-row.head .src-last{text-align:right}
.src-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px 92px;gap:16px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.src-row:hover{background:var(--bg-soft)}
.src-name{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-bar{height:3px;background:var(--line);position:relative;margin-top:6px}
.src-bar i{position:absolute;left:0;top:0;height:3px;background:var(--accent);opacity:.8}
.src-num{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}
.src-days{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right}
.src-last{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-align:right}
@media (max-width:760px){
    .src-row{grid-template-columns:minmax(0,1fr) 80px;gap:12px}
    .src-days,.src-last{display:none}
}

/* ---------------------------------------------------------------- records */
.records-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.table-wrap{margin-top:2px;overflow-x:auto}
table.records{width:100%;border-collapse:collapse;font-size:13px}
table.records th{
    text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--faint);font-weight:400;padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.records td{padding:11px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.records tr:hover td{background:var(--bg-soft)}
.c-id{width:64px}
.c-date{width:130px}
.c-type{width:96px}
.c-site{width:26%}
.c-detail{width:26%}
td.c-id,td.c-date{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}
td.c-value{font-family:var(--mono);font-size:12.5px;color:var(--text);white-space:nowrap}
td.c-site{color:var(--muted)}
td.c-detail{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.currency{color:var(--c-currency);border-color:rgba(255,107,53,.3)}
.badge.fuel{color:var(--c-fuel);border-color:rgba(107,143,163,.35)}
.badge.other{color:var(--faint)}
.empty{text-align:center;padding:32px;color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.pager-btns{display:flex;gap:8px}
@media (max-width:760px){
    .c-id,.c-type{display:none}
    .c-detail{display:none}
}

/* ---------------------------------------------------------------- footer */
.site-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;padding-bottom:44px;margin-top:40px;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60}
.drawer{
    position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:70;
    background:#0c0c0c;border-left:1px solid var(--line);
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 16px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;margin-top:2px}
.drawer-tabs{display:flex;padding:0 20px;border-bottom:1px solid var(--line);gap:4px;overflow-x:auto}
.drawer-tabs button{
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
    padding:11px 10px;border-bottom:1px solid transparent;white-space:nowrap;
}
.drawer-tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.drawer-body{padding:18px 20px 28px;overflow-y:auto;flex:1}
.kv{display:grid;gap:0;border-top:1px solid var(--line-soft);margin-bottom:16px}
.kv>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.kv dt,.kv .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.kv dd,.kv .v{color:var(--text);text-align:right}
.kv .v.warn{color:#ff8a5c}
.kv .v.ok{color:var(--green)}
.drawer-actions{display:flex;gap:8px;margin:4px 0 10px}
.drawer-note{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.6}
.mini-list{display:grid;gap:0;margin-bottom:20px}
.mini-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.mini-item .t{font-size:13px}
.mini-item .s{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:3px;word-break:break-all}
.mini-item .x{color:var(--faint);font-size:12px;border:1px solid var(--line);width:22px;height:22px;display:grid;place-items:center;flex:none}
.mini-item .x:hover{color:var(--accent);border-color:rgba(255,107,53,.4)}
.mini-form{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.mini-form-title{color:var(--faint);margin-bottom:2px}
.mini-form input,.mini-form select{
    background:var(--bg-soft);border:1px solid var(--line);padding:9px 10px;font-family:var(--sans);font-size:13px;color:var(--text);
}
.mini-form input:focus,.mini-form select:focus{outline:none;border-color:var(--accent)}
.mini-form-row{display:flex;gap:8px;margin-top:2px}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none !important;animation:none !important}
}