/* ==========================================================================
   forkliftkiralik.com — "kiralama" niş teması
   Amber Endüstri paleti (rakip mavi denizinden ayrışma) + rental-first bileşenler.
   Temel style.css'ten SONRA yüklenir; :root swap TÜM siteyi yeniden renklendirir.
   ========================================================================== */

:root {
    /* Ana palet — amber + koyu lacivert */
    --navy:        #14213D;   /* header/footer/koyu bölümler */
    --navy-700:    #1b2c4f;
    --navy-600:    #26385f;
    --navy-50:     #eef1f6;
    --accent:      #ff7a00;   /* birincil CTA / vurgu (amber) */
    --accent-600:  #e85d00;   /* hover / koyu vurgu */
    --accent-700:  #a63d00;   /* beyaz zeminde OKUNAKLI amber metin (AA) */
    --ink:         #1a1d23;
    --muted:       #5b6472;
    --line:        #e4e7ec;
    --bg:          #ffffff;
    --bg-soft:     #f5f6f8;
    --bg-softer:   #fafbfc;
    --white:       #ffffff;
    --green:       #1fa971;   /* uygun/başarı rozetleri */
    --wa:          #25d366;   /* WhatsApp */
    --radius:      14px;
    --radius-sm:   9px;
    --radius-lg:   20px;
    --shadow-sm:   0 1px 2px rgba(20,33,61,.05), 0 2px 6px rgba(20,33,61,.06);
    --shadow:      0 4px 16px rgba(20,33,61,.08);
    --shadow-lg:   0 20px 50px rgba(20,33,61,.18);
    --container:   1200px;
    --font:        "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t:           .2s ease;
}

body { color: var(--ink); }

/* Başlıklar biraz daha sıkı/endüstriyel */
h1, h2, h3 { letter-spacing: -.02em; }

/* --- Butonlar --- */
.btn--primary { box-shadow: 0 6px 16px rgba(255,122,0,.28); }
.btn--primary:hover { background: var(--accent-600); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #1fbe5c; color: #fff; }
.btn--outline { background: transparent; color: var(--accent-700); border: 1.5px solid var(--accent); }
.btn--outline:hover { background: var(--accent); color: #fff; }

/* Topbar koyu lacivert */
.topbar { background: var(--navy); }

/* ==========================================================================
   KİRALAMA HERO + ANLIK TEKLİF SEÇİCİ (widget) — asıl ayrıştırıcı
   ========================================================================== */
.krl-hero {
    position: relative;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(255,122,0,.18), transparent 60%),
        linear-gradient(160deg, #0f1830 0%, var(--navy) 55%, #0d1526 100%);
    color: #fff;
    padding: 68px 0 48px;
    overflow: hidden;
}
.krl-hero::after {   /* ince amber taban çizgisi (inşaat şeridi hissi) */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: repeating-linear-gradient(45deg, var(--accent) 0 22px, #0f1830 22px 44px);
    opacity: .9;
}
.krl-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--accent); background: rgba(255,122,0,.12);
    border: 1px solid rgba(255,122,0,.35); padding: 6px 12px; border-radius: 999px;
}
.krl-hero h1 {
    color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.08;
    margin: 18px 0 10px; max-width: 18ch;
}
.krl-hero h1 b { color: var(--accent); }
.krl-hero__sub { color: #c7d2e4; font-size: 1.08rem; max-width: 52ch; margin: 0 0 8px; }
.krl-hero__trust {
    display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 18px 0 8px;
    color: #d7e0ee; font-size: .92rem; font-weight: 500;
}
.krl-hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.krl-hero__trust svg { width: 18px; height: 18px; color: var(--accent); }
.krl-hero__price { margin-top: 14px; color: #9fb0c9; font-size: .92rem; }
.krl-hero__price b { color: #fff; font-size: 1.15rem; }

/* Teklif seçici kartı */
.krl-quote {
    margin-top: 26px; background: rgba(255,255,255,.98); color: var(--ink);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 18px; border-top: 4px solid var(--accent);
}
.krl-quote__title { font-weight: 800; font-size: 1.02rem; margin: 2px 4px 12px; display: flex; align-items: center; gap: 8px; }
.krl-quote__title svg { width: 20px; height: 20px; color: var(--accent-700); }
.krl-quote__grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end; }
.krl-field { display: flex; flex-direction: column; gap: 5px; }
.krl-field > label { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.krl-field select, .krl-field input {
    height: 46px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    font: inherit; font-size: .95rem; background: #fff; color: var(--ink); width: 100%;
    appearance: none; -webkit-appearance: none;
}
.krl-field select:focus, .krl-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,0,.15); }
/* Süre toggle */
.krl-toggle { display: flex; gap: 4px; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 4px; }
.krl-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.krl-toggle label {
    flex: 1; text-align: center; padding: 8px 6px; border-radius: 6px; cursor: pointer;
    font-size: .84rem; font-weight: 700; color: var(--muted); white-space: nowrap; transition: var(--t);
}
.krl-toggle input:checked + label { background: var(--navy); color: #fff; }
.krl-quote__submit { height: 46px; white-space: nowrap; }
.krl-quote__submit svg { width: 18px; height: 18px; }

/* ==========================================================================
   SÜRE BAZLI FİYAT KARTLARI
   ========================================================================== */
.krl-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.krl-price {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 22px; box-shadow: var(--shadow-sm); transition: var(--t);
    border-left: 4px solid var(--accent);
}
.krl-price:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.krl-price--pop { border: 2px solid var(--accent); border-left: 4px solid var(--accent); }
.krl-price__tag { position: absolute; top: -11px; right: 18px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.krl-price__name { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.krl-price__amount { font-size: 2rem; font-weight: 800; color: var(--navy); margin: 6px 0 2px; line-height: 1; }
.krl-price__amount small { font-size: .95rem; font-weight: 600; color: var(--muted); }
.krl-price__desc { color: var(--muted); font-size: .92rem; margin: 10px 0 16px; }
.krl-price ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.krl-price li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.krl-price li svg { width: 17px; height: 17px; color: var(--green); flex: none; margin-top: 2px; }

/* ==========================================================================
   FİLO (tip kartları) + NEDEN BİZ + NASIL ÇALIŞIR + BÖLGELER + SAYAÇLAR
   ========================================================================== */
.krl-fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.krl-tile {
    display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); transition: var(--t); color: inherit;
}
.krl-tile:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.krl-tile__ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,122,0,.1); color: var(--accent-700); }
.krl-tile__ic svg { width: 28px; height: 28px; }
.krl-tile h3 { margin: 0 0 3px; font-size: 1.05rem; }
.krl-tile p { margin: 0; color: var(--muted); font-size: .88rem; }
.krl-tile__arrow { margin-left: auto; color: var(--accent); flex: none; }

.krl-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.krl-why__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.krl-why__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--navy); color: var(--accent); margin-bottom: 12px; }
.krl-why__ic svg { width: 24px; height: 24px; }
.krl-why__card h3 { font-size: 1.02rem; margin: 0 0 6px; }
.krl-why__card p { margin: 0; color: var(--muted); font-size: .9rem; }

.krl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.krl-step { position: relative; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px 22px; }
.krl-step::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: -16px; left: 22px; width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 1.1rem; display: grid; place-items: center;
    box-shadow: 0 6px 14px rgba(255,122,0,.3);
}
.krl-step h3 { margin: 10px 0 6px; font-size: 1.08rem; }
.krl-step p { margin: 0; color: var(--muted); font-size: .93rem; }

.krl-regions { display: flex; flex-wrap: wrap; gap: 10px; }
.krl-regions a {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: .9rem; font-weight: 600; transition: var(--t);
}
.krl-regions a:hover { border-color: var(--accent); color: var(--accent-700); background: rgba(255,122,0,.05); }
.krl-regions a svg { width: 15px; height: 15px; color: var(--accent); }

.krl-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.krl-counters .stat__num { color: var(--accent); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.krl-counters .stat__label { color: #c7d2e4; font-size: .9rem; }

/* SEO footer link farmı */
.krl-seofoot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.krl-seofoot h4 { color: #fff; font-size: .95rem; margin: 0 0 12px; }
.krl-seofoot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.krl-seofoot a { color: #aeb9cb; font-size: .88rem; }
.krl-seofoot a:hover { color: var(--accent); }

/* ==========================================================================
   LOGO WORDMARK (markadan bağımsız) + MARKA ŞERİDİ
   ========================================================================== */
.krl-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.krl-logo__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; flex: none; }
.krl-logo__ic svg { width: 23px; height: 23px; }
.krl-logo__txt { font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; color: var(--navy); line-height: 1; white-space: nowrap; }
.krl-logo__txt b { color: var(--accent); font-weight: 800; }
.krl-logo--light .krl-logo__txt { color: #fff; }

.krl-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.krl-brand {
    display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 10px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    font-weight: 800; font-size: 1.02rem; letter-spacing: .02em; color: var(--navy);
    text-transform: uppercase; transition: var(--t);
}
.krl-brand:hover { border-color: var(--accent); color: var(--accent-700); transform: translateY(-2px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 940px) {
    .krl-quote__grid { grid-template-columns: 1fr 1fr; }
    .krl-quote__submit { grid-column: 1 / -1; }
    .krl-prices, .krl-fleet, .krl-why, .krl-steps, .krl-counters, .krl-seofoot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .krl-hero { padding: 44px 0 36px; }
    .krl-quote__grid { grid-template-columns: 1fr; }
    .krl-prices, .krl-fleet, .krl-why, .krl-steps, .krl-counters, .krl-seofoot { grid-template-columns: 1fr; }
}