/* ============ TOKENS ============ */
:root{
  --bg:#14181E;
  --steel-900:#1a2028;
  --steel-850:#1f2730;
  --steel-800:#232b35;
  --steel-700:#2b3440;
  --steel-line:#33404e;
  --green:#1E8E3E;
  --green-bright:#34C759;
  --green-deep:#176b2e;
  --copper:#C8742E;
  --copper-light:#E08C45;
  --paper:#F4F6F8;
  --paper-2:#ffffff;
  --ink:#141a20;
  --muted-d:#9aa6b2;
  --muted-dd:#6c7986;
  --muted-l:#5a6772;
  --line-l:#e3e8ec;
  --white:#ffffff;
  --maxw:1180px;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,Arial,sans-serif;
  background:var(--bg);color:#e9edf1;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{scroll-margin-top:96px}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-bright);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green-bright);display:inline-block}
.eyebrow.dark{color:var(--green)}
.eyebrow.dark::before{background:var(--green)}
h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.02em}
h2.title{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:18px 0 14px}
.lead{color:var(--muted-d);font-size:1.05rem;max-width:60ch}
.sec-light h2.title{color:var(--ink)}
.sec-light .lead{color:var(--muted-l)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;
  padding:14px 24px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-green{background:var(--green-bright);color:#06250f;box-shadow:0 8px 22px -8px rgba(52,199,89,.6)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(52,199,89,.7)}
.btn-ghost{border-color:var(--steel-line);color:#fff;background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--green-bright);transform:translateY(-2px)}
.btn-copper{background:var(--copper);color:#1a0f06;box-shadow:0 8px 22px -8px rgba(200,116,46,.6)}
.btn-copper:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:#000}

/* ============ TOPBAR ============ */
.topbar{background:var(--steel-900);border-bottom:1px solid var(--steel-line);font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;gap:16px;color:var(--muted-d)}
.topbar b{color:#cdd5dd;font-weight:600}
.topbar .tb-tag{display:inline-flex;align-items:center;gap:8px}
.topbar .dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 0 3px rgba(52,199,89,.18)}
.topbar a:hover b{color:#fff}
@media(max-width:760px){.topbar .tb-tag{display:none}.topbar .wrap{justify-content:center}}

/* ============ HEADER ============ */
header.site{position:sticky;top:0;z-index:50;background:rgba(20,24,30,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--steel-line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:13px}
.brand .em{width:46px;height:46px;flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .bt .nm{font-weight:800;font-size:1.32rem;letter-spacing:.01em}
.brand .bt .sub{font-size:.6rem;font-weight:700;letter-spacing:.34em;color:var(--green-bright);margin-top:4px}
nav.main{display:flex;align-items:center;gap:6px}
nav.main a{padding:9px 14px;border-radius:9px;font-weight:600;font-size:.92rem;color:#c8d0d8;transition:.18s}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.05)}
.hdr-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:1.5px solid var(--steel-line);border-radius:10px;width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:940px){
  nav.main{position:fixed;inset:74px 0 auto 0;flex-direction:column;background:var(--steel-900);
    border-bottom:1px solid var(--steel-line);padding:14px 24px;gap:4px;transform:translateY(-130%);
    transition:transform .3s ease;align-items:stretch}
  nav.main.open{transform:translateY(0)}
  nav.main a{padding:13px 14px}
  .burger{display:flex}
  .hdr-cta .btn-green{display:none}
}

/* ============ HERO ============ */
.hero{position:relative;background:
  radial-gradient(1100px 600px at 78% -10%,rgba(52,199,89,.14),transparent 60%),
  radial-gradient(800px 500px at 6% 110%,rgba(200,116,46,.12),transparent 60%),
  linear-gradient(100deg,rgba(20,24,30,.96) 38%,rgba(20,24,30,.55) 70%,rgba(20,24,30,.25)),
  url('../img/hero/hero-karton-yigin.jpg');
  background-size:cover;background-position:center 30%;
  overflow:hidden;border-bottom:1px solid var(--steel-line)}
.hero .watermark{position:absolute;right:-120px;top:50%;transform:translateY(-50%);width:620px;height:620px;opacity:.05;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;padding:76px 24px 84px}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin:20px 0}
.hero h1 .hl{color:var(--green-bright)}
.hero .lead{font-size:1.12rem;max-width:54ch}
.hero-cta{display:flex;gap:14px;margin:30px 0 26px;flex-wrap:wrap}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted-d);font-size:.86rem;font-weight:600}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row svg{width:17px;height:17px;color:var(--green-bright)}
@media(max-width:940px){.hero .wrap{grid-template-columns:1fr;gap:38px;padding:54px 24px 64px}.hero .watermark{opacity:.04;right:-200px}}

/* ===== Signature: PRICE BOARD ===== */
.board{
  background:linear-gradient(180deg,var(--steel-800),var(--steel-850));
  border:1px solid var(--steel-line);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);
}
.board-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--steel-line);background:rgba(0,0,0,.18)}
.board-h .bt2{display:flex;align-items:center;gap:11px;font-weight:700;font-size:.95rem}
.board-h .bt2 .live{width:9px;height:9px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 0 0 rgba(52,199,89,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}70%{box-shadow:0 0 0 9px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.board-h .unit{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dd);font-weight:700}
.headline-metal{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;background:
  linear-gradient(120deg,rgba(200,116,46,.16),rgba(200,116,46,0) 70%);border-bottom:1px solid var(--steel-line)}
.headline-metal .hm-l{display:flex;align-items:center;gap:14px}
.swatch{width:38px;height:38px;border-radius:9px;flex:none;box-shadow:inset 0 2px 6px rgba(255,255,255,.25),inset 0 -4px 8px rgba(0,0,0,.3)}
.headline-metal .hm-name{font-weight:800;font-size:1.18rem;letter-spacing:-.01em}
.headline-metal .hm-sub{font-size:.74rem;color:var(--muted-dd);font-weight:600}
.headline-metal .hm-price{font-size:2rem;font-weight:700;color:var(--copper-light)}
.headline-metal .hm-price small{font-size:.9rem;color:var(--muted-d);font-weight:500}
.hm-ask{display:inline-flex;align-items:center;gap:8px;background:var(--green-bright);color:#06250f;font-weight:700;font-size:.88rem;padding:10px 16px;border-radius:10px;white-space:nowrap;transition:transform .15s ease}
.hm-ask svg{width:15px;height:15px}
.hm-ask:hover{transform:translateY(-2px)}
.pr.ask{font-weight:700;color:var(--green-bright);font-size:.88rem;transition:color .15s}
.pr.ask:hover{color:#fff}
.rows{padding:6px 8px 8px}
.prow{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;transition:background .15s}
.prow:hover{background:rgba(255,255,255,.03)}
.prow+.prow{border-top:1px solid rgba(255,255,255,.04)}
.prow .pl{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem}
.prow .pl .sw{width:18px;height:18px;border-radius:5px;flex:none;box-shadow:inset 0 1px 2px rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.3)}
.prow .pr{font-weight:700;color:#dfe6ec}
.prow .pr small{color:var(--muted-dd);font-weight:500;font-size:.78rem}
.board-f{padding:12px 18px;border-top:1px solid var(--steel-line);background:rgba(0,0,0,.18);font-size:.74rem;color:var(--muted-dd);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ============ STATS ============ */
.stats{background:var(--steel-900);border-bottom:1px solid var(--steel-line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.stat{padding:34px 26px;text-align:center;border-right:1px solid var(--steel-line)}
.stat:last-child{border-right:none}
.stat .num{font-weight:700;font-size:2.1rem;color:#fff;display:flex;justify-content:center;align-items:baseline;gap:2px}
.stat .num .suf{color:var(--green-bright)}
.stat .lbl{font-size:.82rem;color:var(--muted-d);font-weight:600;margin-top:4px}
@media(max-width:760px){.stats .wrap{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--steel-line)}}

/* ============ SECTION SHELLS ============ */
.sec{padding:84px 0}
.sec-light{background:var(--paper);color:var(--ink)}
.sec-dark{background:var(--bg)}
.sec-steel{background:linear-gradient(180deg,#171c22,#14181e)}
.sec-head{max-width:62ch}
.sec-head.center{margin:0 auto;text-align:center}

/* ===== METALS GRID ===== */
.group-title{font-size:.95rem;font-weight:700;color:var(--muted-l);text-transform:uppercase;letter-spacing:.06em;margin-top:38px}
.metals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.mcard{background:var(--paper-2);border:1px solid var(--line-l);border-radius:var(--r);padding:20px;
  transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.mcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(20,30,40,.25);border-color:#cfd7dd}
.mcard .chip{width:46px;height:46px;border-radius:11px;box-shadow:inset 0 2px 6px rgba(255,255,255,.4),inset 0 -5px 10px rgba(0,0,0,.22);margin-bottom:14px}
.mcard h3{font-size:1.05rem;color:var(--ink);margin-bottom:4px}
.mcard p{font-size:.85rem;color:var(--muted-l);line-height:1.5}
.card-more{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--green);transition:color .15s}
.card-more:hover{color:var(--ink)}
@media(max-width:940px){.metals{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.metals{grid-template-columns:1fr 1fr}}

/* ===== SERVICES ===== */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.scard{background:var(--steel-850);border:1px solid var(--steel-line);border-radius:var(--r);padding:26px;transition:transform .2s,border-color .2s}
.scard:hover{transform:translateY(-4px);border-color:var(--green)}
.scard .ic{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,rgba(52,199,89,.18),rgba(30,142,62,.06));
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:1px solid rgba(52,199,89,.2)}
.scard .ic svg{width:26px;height:26px;color:var(--green-bright)}
.scard h3{font-size:1.12rem;margin-bottom:8px;color:#fff}
.scard p{color:var(--muted-d);font-size:.9rem}
.scard .card-more{color:var(--green-bright)}
.scard .card-more:hover{color:#fff}
@media(max-width:900px){.svcs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svcs{grid-template-columns:1fr}}

/* ===== PROCESS ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px;position:relative}
.step{position:relative}
.step .no{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--green);background:rgba(30,142,62,.1);
  border:1px solid rgba(30,142,62,.25);width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step h3{font-size:1.18rem;color:var(--ink);margin-bottom:8px}
.step p{color:var(--muted-l);font-size:.94rem}
.step:not(:last-child)::after{content:"";position:absolute;top:27px;left:64px;right:-12px;height:2px;
  background:repeating-linear-gradient(90deg,#cdd6dc 0 8px,transparent 8px 16px)}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:30px}.step:not(:last-child)::after{display:none}}

/* ===== WHY (split) ===== */
.why{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why-list{display:grid;gap:18px;margin-top:30px}
.wrow{display:flex;gap:16px;align-items:flex-start}
.wrow .tick{width:40px;height:40px;border-radius:11px;flex:none;background:rgba(52,199,89,.12);border:1px solid rgba(52,199,89,.25);
  display:flex;align-items:center;justify-content:center}
.wrow .tick svg{width:20px;height:20px;color:var(--green-bright)}
.wrow h3{font-size:1.05rem;color:#fff;margin-bottom:2px}
.wrow p{color:var(--muted-d);font-size:.9rem}
.why-visual{position:relative;aspect-ratio:1;border-radius:24px;background:
  linear-gradient(180deg,rgba(20,24,30,.15),rgba(20,24,30,.55)),url('../img/hero/neden-esay-kis.jpg');
  background-size:cover;background-position:center;
  border:1px solid var(--steel-line);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.why-visual .em-badge{position:absolute;top:20px;left:20px;width:54px;height:54px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
@media(max-width:880px){.why{grid-template-columns:1fr;gap:40px}.why-visual{max-width:380px;margin:0 auto;width:100%}}

/* ===== VEHICLES ===== */
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.vcard{background:var(--steel-850);border:1px solid var(--steel-line);border-radius:var(--r);overflow:hidden;transition:transform .2s,border-color .2s}
.vcard:hover{transform:translateY(-4px);border-color:var(--green)}
.vcard .vimg{aspect-ratio:4/3;overflow:hidden}
.vcard .vimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.vcard:hover .vimg img{transform:scale(1.05)}
.vcard h3{font-size:1.05rem;color:#fff;margin:16px 20px 6px}
.vcard p{color:var(--muted-d);font-size:.88rem;margin:0 20px 20px}
@media(max-width:900px){.vcards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vcards{grid-template-columns:1fr}}

/* ===== GALLERY ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
.gph{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-l);background:#cfd7dd}
.gph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gph:hover img{transform:scale(1.05)}
@media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gallery{grid-template-columns:1fr}}

/* ===== REGION ===== */
.region-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.region-chips span{background:var(--paper-2);border:1px solid var(--line-l);color:var(--ink);font-weight:600;
  font-size:.88rem;padding:9px 16px;border-radius:999px}
.region-chips span.hl{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;margin-top:44px}
.cform{background:var(--steel-850);border:1px solid var(--steel-line);border-radius:18px;padding:30px}
.cform h3{color:#fff;font-size:1.25rem;margin-bottom:6px}
.cform .fsub{color:var(--muted-d);font-size:.9rem;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--muted-d);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;background:#14181e;border:1.5px solid var(--steel-line);border-radius:10px;color:#fff;
  padding:13px 15px;font-family:inherit;font-size:.95rem;transition:border-color .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-bright)}
.field textarea{resize:vertical;min-height:96px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:.78rem;color:var(--muted-dd);margin-top:12px;text-align:center}
.cinfo{display:flex;flex-direction:column;gap:14px}
.ibox{background:var(--steel-850);border:1px solid var(--steel-line);border-radius:14px;padding:20px;display:flex;gap:15px;align-items:flex-start}
.ibox .ic{width:44px;height:44px;border-radius:11px;background:rgba(52,199,89,.12);border:1px solid rgba(52,199,89,.25);flex:none;display:flex;align-items:center;justify-content:center}
.ibox .ic svg{width:21px;height:21px;color:var(--green-bright)}
.ibox .t .k{font-size:.78rem;color:var(--muted-dd);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.ibox .t .v{font-weight:700;color:#fff;font-size:1.02rem;margin-top:2px}
.ibox .t .v small{display:block;font-weight:500;font-size:.84rem;color:var(--muted-d)}
.map{flex:1;min-height:120px;border-radius:14px;border:1px solid var(--steel-line);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#1d242d,#171c22)}
.map .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:26px 26px}
.map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.map .pin svg{width:34px;height:34px;color:var(--green-bright);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.map .pin span{display:block;font-size:.8rem;color:var(--muted-d);font-weight:600;margin-top:4px}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}

/* ===== CTA BAND ===== */
.ctaband{background:linear-gradient(120deg,var(--green-deep),var(--green));position:relative;overflow:hidden}
.ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:48px 24px;position:relative;z-index:2;flex-wrap:wrap}
.ctaband h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);max-width:22ch}
.ctaband p{color:rgba(255,255,255,.85);margin-top:6px;font-weight:500}
.ctaband .em-wm{position:absolute;right:-40px;bottom:-90px;width:340px;opacity:.12;z-index:1}

/* ===== FOOTER ===== */
footer.site{background:var(--steel-900);border-top:1px solid var(--steel-line);padding:56px 0 28px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.fbrand .brand{margin-bottom:16px}
.fbrand p{color:var(--muted-d);font-size:.9rem;max-width:34ch}
.fcol h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dd);margin-bottom:14px;font-weight:700}
.fcol a{display:block;color:#c2cad2;font-size:.92rem;padding:5px 0;transition:.15s}
.fcol a:hover{color:var(--green-bright)}
.fbot{border-top:1px solid var(--steel-line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted-dd);font-size:.84rem}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}