/* ==========================================================================
   Rampa Takip — Tanıtım Sitesi
   Renk paleti: Ana Yeşil #0B6B4F · Destek Yeşil #55B947 · Koyu Ton #073B32
                Gri #667085 · Açık Arka Plan #F5F8F6
   ========================================================================== */

:root {
    --green: #0B6B4F;
    --green-hover: #095A42;
    --green-2: #55B947;
    --dark: #073B32;
    --gray: #667085;
    --bg: #F5F8F6;

    --ink: #0F1D19;
    --text: #3E4A46;
    --line: #E3E9E6;
    --tint: #EDF4F0;
    --white: #FFFFFF;

    --s-green: #22C55E;
    --s-blue: #3B82F6;
    --s-orange: #F59E0B;

    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --header-h: 66px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(16, 40, 32, .06), 0 2px 8px rgba(16, 40, 32, .05);
    --shadow: 0 10px 30px rgba(7, 59, 50, .12);
    --container: 2400px;
    --gutter: clamp(20px, 1.8vw, 40px); /* Geniş ekranlarda içerik ekranı doldursun, kenar boşluğu orantılı kalsın */
    --values-h: 107px;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; border-radius: 4px; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.text-green { color: var(--green); display: block; }
.muted { color: var(--gray); font-size: 14px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--green); color: #fff; padding: 8px 14px; border-radius: var(--radius); }
.skip-link:focus { left: 8px; }

.ic {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic--xs { width: 14px; height: 14px; }

.eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
    color: var(--ink); margin-bottom: 14px;
}
.eyebrow--light { color: rgba(255, 255, 255, .85); }
.section-title { font-size: clamp(28px, 2.3vw, 35px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }

/* ---------- Butonlar ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 36px; padding: 0 20px;
    font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap;
    border-radius: var(--radius); border: 1px solid transparent;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.btn .ic { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn--lg { height: 45px; padding: 0 24px; font-size: 14.5px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--green); color: #fff; border-color: #1E8A64; box-shadow: 0 4px 14px rgba(11, 107, 79, .22); }
.btn--primary:hover { background: var(--green-hover); }
.btn--white { background: #fff; color: var(--ink); border-color: #DCE3E0; box-shadow: var(--shadow-sm); }
.btn--white:hover { border-color: var(--green); color: var(--green); }
.btn--outline { background: #fff; color: var(--ink); border: 1.5px solid var(--green); }
.btn--outline:hover { background: var(--tint); }
.btn--light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.btn--light:hover { background: rgba(255, 255, 255, .18); }

.play-dot {
    width: 20px; height: 20px; border-radius: 50%; background: var(--green); position: relative; flex: none;
}
.play-dot::after {
    content: ""; position: absolute; left: 7.5px; top: 5.5px;
    border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}

.icon-btn {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius);
    color: var(--ink); transition: background-color .2s;
}
.icon-btn:hover { background: rgba(11, 107, 79, .08); }
.icon-btn .ic { width: 20px; height: 20px; stroke-width: 1.8; }

/* ---------- Header ---------- */
.site-header {
    position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
    background: rgba(255, 255, 255, .97);
    transition: background-color .25s, box-shadow .25s, backdrop-filter .25s;
}
.site-header.is-scrolled, .site-header:not(.site-header--overlay) { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(7, 59, 50, .06); }
.site-header--overlay { background: transparent; }
.site-header--overlay.is-scrolled { background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 32px; }
main { padding-top: var(--header-h); }
.site-header--overlay ~ main { padding-top: 0; }

.brand img { width: 160px; height: auto; }

.main-nav { margin-left: 68px; }
.main-nav__list { display: flex; align-items: center; gap: 34px; }
.main-nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 500; color: var(--ink); padding: 8px 0; position: relative;
}
.main-nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
    background: var(--green); transform: scaleX(0); transition: transform .2s;
}
.main-nav__link:hover::after, .main-nav__link.is-active::after { transform: scaleX(1); }
.main-nav__mobile-actions { display: none; }

.has-dropdown { position: relative; }
.has-dropdown .ic--xs { transition: transform .2s; }
.has-dropdown.is-open .ic--xs { transform: rotate(180deg); }
.dropdown {
    position: absolute; top: calc(100% + 12px); left: -20px; width: 300px; padding: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 10px 12px; border-radius: var(--radius); }
.dropdown a:hover { background: var(--bg); }
.dropdown strong { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.dropdown span { display: block; font-size: 12px; color: var(--gray); line-height: 1.45; margin-top: 2px; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-actions .icon-btn { margin-right: 6px; }
.header-actions__login { height: 36px; padding: 0 26px; }
.header-actions__demo { height: 36px; padding: 0 20px; }
.nav-toggle { display: none; }
.nav-toggle__close { display: none; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    min-height: max(452px, 29.5vw);
    padding: calc(var(--header-h) + 32px) 0 20px;
    background: #fff;
}
.hero__bg {
    position: absolute; top: 0; bottom: 0; left: 34%; right: 0;
    background: url("../img/hero-lojistik-merkezi.jpg") 62% 58% / cover no-repeat;
}
.hero__bg::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .82) 9%, rgba(255, 255, 255, .25) 20%, rgba(255, 255, 255, 0) 30%);
}
.hero::before { /* Sol taraftaki yumuşak sabah ışığı */
    content: ""; position: absolute; inset: 0 auto 0 0; width: 45%; pointer-events: none;
    background:
        radial-gradient(60% 50% at 0% 70%, rgba(85, 185, 71, .10), transparent 70%),
        radial-gradient(50% 45% at 85% 45%, rgba(255, 214, 153, .18), transparent 70%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 470px) 1fr; gap: 40px; }

.pill {
    display: inline-flex; align-items: center; gap: 10px;
    height: 29px; padding: 0 16px 0 8px; border-radius: 99px;
    background: #E6F2EA; color: var(--ink); font-size: 12.5px; font-weight: 500;
}
.pill__icon {
    width: 18px; height: 18px; border-radius: 50%; background: var(--green-2); color: #fff;
    display: grid; place-items: center;
}
.pill__icon .ic { width: 11px; height: 11px; stroke-width: 2.4; }

.hero__title {
    margin-top: 18px;
    font-size: clamp(36px, 3.1vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
}
.hero__lead { margin-top: 18px; max-width: 420px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; }
.hero__actions .btn--primary { padding: 0 22px; }
.hero__actions .btn--outline { padding: 0 22px 0 20px; }
.hero__checks { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; font-size: 12.5px; color: var(--ink); }
.hero__checks li { display: inline-flex; align-items: center; gap: 8px; }
.hero__checks .ic {
    width: 16px; height: 16px; padding: 3px; border-radius: 50%;
    background: var(--green); color: #fff; stroke-width: 3.2;
}

.hero__widgets { justify-self: end; width: 470px; margin-top: -15px; }

/* Masaüstü: hero + değerler şeridi ilk ekranı tam doldurur */
@media (min-width: 1141px) {
    .hero {
        display: flex; flex-direction: column; justify-content: center;
        min-height: max(560px, calc(100svh - var(--values-h)));
        padding-bottom: 40px;
    }
    .hero__inner { align-items: center; }
    .hero__widgets { margin-top: 0; }
}
/* Büyük ekranlar: tipografi ve kartlar ekranla birlikte büyür */
@media (min-width: 1600px) {
    .hero__inner { grid-template-columns: minmax(0, 820px) 1fr; }
    .hero__title { font-size: clamp(56px, 4.1vw, 82px); }
    .hero__lead { max-width: 680px; font-size: 19px; }
    .pill { height: 34px; font-size: 14px; }
    .hero__actions .btn--lg { height: 54px; font-size: 16.5px; }
    .hero__checks { font-size: 14px; }
    .hero__widgets { zoom: 1.18; }
}
@media (min-width: 2200px) {
    .hero__widgets { zoom: 1.35; }
}

/* Canlı rampa kartı */
.live-card {
    width: 385px; margin-left: 50px;
    background: rgba(13, 34, 33, .93); color: #fff;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    backdrop-filter: blur(6px);
    padding: 12px 16px 14px;
}
.live-card__head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; }
.live-card__head h2 { color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.live-card__head a { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: rgba(255, 255, 255, .8); }
.live-card__head a:hover { color: #fff; }
.live-card__list { border-radius: 6px; overflow: hidden; }

.live-row {
    display: grid; grid-template-columns: 22px 66px 1fr 92px 34px; align-items: center; gap: 10px;
    height: 38.5px; padding: 0 10px;
    font-size: 10.5px; color: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.live-row:first-child { background: rgba(255, 255, 255, .05); }
.live-row:last-child { border-bottom: 0; }
.live-row__truck { width: 19px; height: 19px; color: #fff; fill: rgba(255, 255, 255, .95); stroke: rgba(13, 34, 33, 1); stroke-width: 1.4; }
.live-row__time { text-align: right; font-variant-numeric: tabular-nums; }

.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.status--loading .status__dot, .status--done .status__dot { background: var(--s-green); }
.status--unloading .status__dot, .status--routing .status__dot { background: var(--s-blue); }
.status--waiting .status__dot { background: var(--s-orange); }
.status__check { width: 11px; height: 11px; fill: var(--s-green); stroke: #0D2221; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.status__check circle { stroke: none; }
.status--loading .status__dot { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: pulse 2s infinite; }

.bar { height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; transition: width .8s ease; }
[data-status="loading"] .bar i, [data-status="done"] .bar i { background: var(--s-green); }
[data-status="unloading"] .bar i, [data-status="routing"] .bar i { background: var(--s-blue); }
[data-status="waiting"] .bar i { width: 0 !important; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Mini kartlar */
.hero__mini { display: grid; grid-template-columns: 263px 1fr; gap: 9px; margin-top: 8px; }
.co2-card {
    display: flex; align-items: center; gap: 14px; height: 92px; padding: 0 16px;
    background: #fff; border-radius: 4px; box-shadow: var(--shadow);
}
.co2-card__icon {
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    display: grid; place-items: center; background: #E8F4EA; color: var(--green);
    border: 1.5px solid #CFE6D5;
}
.co2-card__icon .ic { width: 25px; height: 25px; stroke-width: 1.6; }
.co2-card__text { display: flex; flex-direction: column; line-height: 1.25; }
.co2-card__text small { font-size: 12px; color: var(--text); }
.co2-card__text strong { font-size: 17px; font-weight: 700; color: var(--ink); margin: 3px 0 2px; letter-spacing: -.01em; }
.co2-card__text span { font-size: 12px; color: var(--text); }
.co2-card__bars { margin-left: auto; display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.co2-card__bars i { width: 7px; border-radius: 2px; background: var(--green-2); }
.co2-card__bars i:nth-child(1) { height: 30%; }
.co2-card__bars i:nth-child(2) { height: 48%; }
.co2-card__bars i:nth-child(3) { height: 62%; background: #3FA64A; }
.co2-card__bars i:nth-child(4) { height: 80%; background: #24924A; }
.co2-card__bars i:nth-child(5) { height: 100%; background: var(--green); }

.future-card {
    display: flex; align-items: center; gap: 12px; height: 92px; padding: 0 14px;
    border-radius: 4px; color: #fff; font-size: 12.5px; line-height: 1.5; white-space: nowrap;
    background: linear-gradient(135deg, rgba(11, 107, 79, .96), rgba(7, 59, 50, .96));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--shadow);
}
.future-card__icon {
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255, 255, 255, .12);
}
.future-card__icon .ic { width: 26px; height: 26px; fill: #fff; stroke: #fff; stroke-width: 1; }

/* ---------- Değerler şeridi ---------- */
.values { background: #fff; border-bottom: 1px solid #EEF2F0; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 18px 0; }
.value { display: flex; align-items: center; gap: 24px; padding: 0 0 0 0; position: relative; }
.value + .value { padding-left: 30px; }
.value + .value::before {
    content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 1px; background: var(--line);
}
.value:nth-child(2) { padding-left: 34px; }
.value__icon {
    width: 70px; height: 70px; flex: none; border-radius: 50%;
    display: grid; place-items: center; background: var(--tint); color: var(--green);
}
.value__icon .ic { width: 34px; height: 34px; stroke-width: 1.5; }
.value h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.value p { font-size: 13.5px; color: var(--gray); line-height: 1.45; }

/* ---------- Rampa Takip Nedir? ---------- */
.about { position: relative; overflow: hidden; background: #F3F6F5; padding: 28px 0 22px; }
.about__bg {
    position: absolute; inset: 0 0 0 38%;
    background: url("../img/hero-lojistik-merkezi.jpg") 70% 60% / cover no-repeat;
    filter: blur(14px) saturate(.75) brightness(1.15);
    opacity: .45; transform: scale(1.08);
}
.about::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, #F3F6F5 0%, #F3F6F5 38%, rgba(243, 246, 245, .55) 55%, rgba(243, 246, 245, .2) 100%);
}
.about__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 20px; align-items: center; }
.about__content .eyebrow { margin-bottom: 12px; }
.about__lead { margin-top: 18px; max-width: 400px; font-size: 15px; line-height: 1.6; }
.about__content .btn { margin-top: 24px; height: 34px; padding: 0 18px; }
.about__features { display: flex; margin-top: 22px; }
.about__features li {
    flex: none; white-space: nowrap;
    display: flex; flex-direction: column; gap: 10px;
    font-size: 12.5px; color: var(--ink); line-height: 1.3; font-weight: 500;
    padding-right: 22px; margin-right: 22px; border-right: 1px solid #D9E1DD;
}
.about__features li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.about__features .ic { width: 30px; height: 30px; color: var(--green); stroke-width: 1.7; }

/* Cihaz önizlemeleri */
.devices { position: relative; height: 340px; }
.scaler { width: 100%; height: 100%; overflow: hidden; position: relative; }
.scaler > * { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--s, .5)); }

.laptop { position: absolute; left: 0; top: 4px; width: 640px; }
.laptop__screen {
    position: relative; margin: 0 auto; width: 87%;
    aspect-ratio: 1000 / 580; padding: 0; overflow: hidden;
    border: 9px solid #1C1F22; border-bottom-width: 12px; border-radius: 14px 14px 0 0;
    background: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.laptop__base {
    height: 14px; border-radius: 0 0 14px 14px;
    background: linear-gradient(#D7DBDE, #A8AEB2);
    box-shadow: 0 14px 20px rgba(0, 0, 0, .18);
    position: relative;
}
.laptop__base::before {
    content: ""; position: absolute; left: 50%; top: 0; width: 110px; height: 6px; transform: translateX(-50%);
    background: #9AA0A4; border-radius: 0 0 8px 8px;
}

.phone {
    position: absolute; right: 14px; top: 12px; width: 178px;
    border-radius: 28px; padding: 7px; background: #15181B;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .25), inset 0 0 0 2px #3A3F44;
}
.phone__screen { border-radius: 22px; overflow: hidden; background: #fff; aspect-ratio: 280 / 560; }

/* Laptop içi uygulama (1000×580 tasarım boyutu) */
.app { width: 1000px; height: 580px; display: flex; font-size: 11px; color: var(--ink); background: #F6F8F7; }
.app__side { width: 168px; background: var(--dark); color: rgba(255, 255, 255, .8); padding: 18px 12px; }
.app__brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 22px; padding-left: 6px; }
.app__brand img { border-radius: 5px; }
.app__side li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 5px; margin-bottom: 4px; font-size: 11px; }
.app__side li .ic { width: 14px; height: 14px; }
.app__side li.is-active { background: var(--green); color: #fff; }
.app__main { flex: 1; padding: 0 0 16px; display: flex; flex-direction: column; }
.app__top { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 0 20px; background: #fff; border-bottom: 1px solid #EEF1F0; }
.app__search { display: flex; align-items: center; gap: 8px; width: 260px; height: 30px; padding: 0 10px; border: 1px solid #E6EBE9; border-radius: 6px; color: #9AA5A1; font-size: 10.5px; }
.app__search .ic { width: 13px; height: 13px; }
.app__user { display: flex; align-items: center; gap: 12px; }
.app__user > .ic { width: 16px; height: 16px; }
.app__user span:last-of-type { display: flex; flex-direction: column; line-height: 1.25; }
.app__user strong { font-size: 10.5px; }
.app__user small { font-size: 9px; color: var(--gray); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.avatar--sm { width: 24px; height: 24px; font-size: 9px; }
.app__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px 12px; }
.app__kpis div { background: #fff; border: 1px solid #EDF1EF; border-radius: 8px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.app__kpis small { display: block; font-size: 9.5px; color: var(--gray); }
.app__kpis strong { font-size: 20px; font-weight: 700; }
.c-green { color: var(--green); }
.c-orange { color: var(--s-orange); }
.app__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; padding: 0 20px; flex: 1; }
.panel { background: #fff; border: 1px solid #EDF1EF; border-radius: 8px; padding: 14px 16px; }
.panel h4 { font-size: 11px; font-weight: 700; letter-spacing: 0; margin-bottom: 10px; }
.panel h4.mt { margin-top: 6px; margin-bottom: 4px; }
.mini-table__head, .mini-table__row { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr .5fr; align-items: center; gap: 10px; }
.mini-table__head { font-size: 9px; color: #A0AAA6; padding: 6px 0; border-bottom: 1px solid #F0F3F2; }
.mini-table__row { height: 50px; font-size: 10px; border-bottom: 1px solid #F3F5F4; }
.mini-table__row:last-child { border-bottom: 0; }
.mini-table__row > span:first-child { display: flex; align-items: center; gap: 8px; }
.mini-table__row .ic { width: 16px; height: 16px; fill: var(--ink); stroke: #fff; stroke-width: 1.3; }
.mini-table__row > span:last-child { text-align: right; color: var(--text); }
.bar--light { background: #EDF1EF; }
.mini-table .status { font-size: 9.5px; }
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut { width: 112px; height: 112px; transform: rotate(0deg); }
.donut circle { fill: none; stroke-width: 5; }
.donut text { font-size: 9px; font-weight: 800; fill: var(--ink); font-family: var(--font); }
.legend { flex: 1; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 9.5px; padding: 4px 0; }
.legend i { width: 7px; height: 7px; border-radius: 50%; }
.legend b { margin-left: auto; font-weight: 600; }
.area { width: 100%; height: 92px; }
.area__grid path { stroke: #EEF2F0; stroke-width: 1; }
.area__x { display: flex; justify-content: space-between; font-size: 8.5px; color: #A0AAA6; padding: 2px 4px 0; }

/* Telefon içi uygulama (280×560 tasarım boyutu) */
.papp { width: 280px; height: 560px; background: #fff; font-size: 11px; color: var(--ink); padding: 0 14px; display: flex; flex-direction: column; }
.papp__status { display: flex; justify-content: space-between; padding: 12px 8px 6px; font-size: 10px; font-weight: 700; }
.papp__sys { display: flex; gap: 3px; align-items: flex-end; }
.papp__sys i { width: 3px; background: var(--ink); border-radius: 1px; }
.papp__sys i:nth-child(1) { height: 5px; }
.papp__sys i:nth-child(2) { height: 7px; }
.papp__sys i:nth-child(3) { height: 9px; }
.papp__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 14px; }
.papp__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; }
.papp__brand img { border-radius: 4px; }
.papp__tabs { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--gray); border-bottom: 1px solid #EEF1F0; padding: 0 6px; }
.papp__tabs span { padding: 8px 4px; }
.papp__tabs .is-active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--green); }
.papp__list li { display: flex; align-items: center; gap: 12px; height: 63px; border-bottom: 1px solid #F1F4F3; padding: 0 4px; }
.papp__list .ic { width: 20px; height: 20px; fill: var(--ink); stroke: #fff; stroke-width: 1.3; }
.papp__list li > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.papp__list strong { font-size: 11px; }
.papp__list em { font-style: normal; font-size: 9.5px; color: var(--green); }
.papp__list .status--unloading, .papp__list .status--routing { color: var(--s-blue); }
.papp__list .status--waiting { color: var(--s-orange); }
.papp__list .status__dot { width: 6px; height: 6px; }
.papp__time { margin-left: auto; font-size: 10px; color: var(--text); }
.papp__cta { margin: auto 0 22px; height: 40px; border-radius: 8px; background: var(--green-2); background: linear-gradient(#2DA14C, #1F8F43); color: #fff; font-weight: 600; display: grid; place-items: center; font-size: 11.5px; }

/* ---------- Sürdürülebilir lojistik bandı ---------- */
.green-band { position: relative; overflow: hidden; background: var(--dark); color: #fff; padding: 14px 0 26px; }
.green-band__bg {
    position: absolute; inset: -12px;
    background: url("../img/rampa-takip-tir.jpg") 85% 75% / cover no-repeat;
    filter: blur(3px) saturate(.9);
}
.green-band__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(5, 44, 36, .97) 0%, rgba(6, 50, 41, .93) 45%, rgba(7, 59, 50, .72) 100%);
}
.green-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.green-band__content { max-width: 420px; }
.green-band .eyebrow { font-size: 9.5px; margin-bottom: 10px; }
.green-band h2 { color: #fff; font-size: clamp(20px, 1.45vw, 22px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.green-band__content > p:last-child { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.eco-cards { display: flex; gap: 9px; margin-top: 18px; }
.eco-cards li {
    display: flex; align-items: center; gap: 16px; width: 176px; min-height: 67px; padding: 12px 18px;
    background: #fff; color: var(--ink); border-radius: 6px; box-shadow: var(--shadow);
    font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.eco-cards li:nth-child(2) { width: 200px; }
.eco-cards .ic { width: 30px; height: 30px; color: var(--green); stroke-width: 1.6; }
.co2-icon { position: relative; display: grid; place-items: center; color: var(--green); }
.co2-icon .ic { width: 36px; height: 36px; stroke: var(--green-2); }
.co2-icon b { position: absolute; font-size: 9px; font-weight: 800; top: 13px; color: var(--green); }
.co2-icon sub { font-size: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: rgba(255, 255, 255, .78); font-size: 14px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding: 64px 0 48px; }
.site-footer__brand img { width: 180px; }
.site-footer__brand p { margin: 18px 0 22px; max-width: 320px; line-height: 1.65; }
.site-footer__title { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; margin-bottom: 16px; }
.site-footer__links li + li, .site-footer__contact li + li { margin-top: 10px; }
.site-footer__links a:hover, .site-footer__contact a:hover, .site-footer__bottom a:hover { color: #fff; }
.site-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.site-footer__contact .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--green-2); }
.site-footer__bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px;
}
.site-footer__bottom ul { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Modal / Dialog ---------- */
.modal {
    width: min(480px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3); color: var(--text);
}
.modal::backdrop { background: rgba(7, 30, 25, .55); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in .2s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal__close { position: absolute; top: 10px; right: 10px; }
.modal__body { padding: 40px 36px 34px; }
.modal__body--center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.modal__body h2 { font-size: 22px; font-weight: 800; }
.modal__body p { font-size: 15px; }
.modal__body .btn { margin-top: 8px; }
.modal__icon {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: var(--tint); color: var(--green);
}
.modal__icon .ic { width: 30px; height: 30px; stroke-width: 1.7; }

.modal--search { width: min(620px, calc(100% - 32px)); margin-top: 10vh; }
.search-box { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.search-box > .ic { color: var(--gray); }
.search-box input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--ink); padding: 8px 0; background: transparent; }
.search-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.search-results a { display: block; padding: 10px 12px; border-radius: 8px; }
.search-results a:hover, .search-results a:focus-visible { background: var(--bg); }
.search-results strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.search-results span { display: block; font-size: 12.5px; color: var(--gray); }
.search-empty { padding: 20px; text-align: center; color: var(--gray); font-size: 14px; }

/* ---------- İç sayfalar ---------- */
.section { padding: 72px 0; background: var(--bg); }
.page-hero { padding: 56px 0 44px; background: linear-gradient(180deg, #fff, var(--bg)); border-bottom: 1px solid var(--line); }
.page-hero__lead { margin-top: 12px; max-width: 640px; font-size: 17px; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--gray); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

.soon-card {
    max-width: 620px; margin: 0 auto; text-align: center; background: #fff;
    border: 1px solid var(--line); border-radius: 14px; padding: 48px 40px; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.soon-card h1, .soon-card h2 { font-size: 24px; font-weight: 800; }
.soon-card__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.error-code { font-size: 64px; font-weight: 800; color: var(--green); line-height: 1; letter-spacing: -.04em; }

/* Giriş */
.auth { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 48px 16px; background: var(--bg); }
.auth__card {
    width: min(420px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 40px 36px; text-align: center; box-shadow: var(--shadow);
}
.auth__logo { width: 140px; margin: 0 auto 18px; }
.auth h1 { font-size: 24px; font-weight: 800; }
.auth p { margin: 8px 0 20px; }
.auth__info { display: flex; gap: 10px; text-align: left; font-size: 13.5px; background: var(--tint); border-radius: 8px; padding: 12px 14px; margin-bottom: 20px; }
.auth__info .ic { color: var(--green); margin-top: 2px; }
.auth__back { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--gray); }
.auth__back:hover { color: var(--green); }

/* Demo formu */
.demo { padding: 64px 0 80px; background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
.demo__grid { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: 64px; align-items: start; }
.demo__lead { margin-top: 16px; font-size: 16.5px; max-width: 480px; }
.demo__list { margin-top: 24px; display: grid; gap: 12px; }
.demo__list li { display: flex; gap: 12px; align-items: center; color: var(--ink); font-weight: 500; }
.demo__list .ic { color: var(--green); width: 20px; height: 20px; }
.demo__img { margin-top: 32px; border-radius: 12px; box-shadow: var(--shadow); aspect-ratio: 16 / 9; object-fit: cover; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.form { padding: 32px; display: grid; gap: 16px; }
.form h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__alert:empty, .form__alert.validation-summary-valid { display: none; }
.form__alert { background: #FEF2F2; color: #B42318; border: 1px solid #FECACA; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.form__alert ul { margin: 0; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--ink);
    background: #fff; border: 1px solid #D5DDD9; border-radius: 8px; padding: 10px 12px;
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 107, 79, .12); }
.field .input-validation-error, .field [aria-invalid="true"] { border-color: #F04438; }
.field__error { font-size: 12.5px; color: #D92D20; }
.field__error:empty { display: none; }
.field--check { grid-template-columns: 20px 1fr; align-items: start; column-gap: 10px; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); padding: 0; }
.field--check label { font-weight: 400; font-size: 13.5px; color: var(--text); }
.field--check label a { color: var(--green); font-weight: 600; text-decoration: underline; }
.field--check .field__error { grid-column: 2; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Görünüm animasyonları ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
    .main-nav { margin-left: 24px; }
    .main-nav__list { gap: 24px; }
    .devices { transform: scale(.92); transform-origin: left center; }
}

@media (max-width: 1140px) {
    .header-actions__login { display: none; }
    .hero__inner { grid-template-columns: minmax(0, 440px) 1fr; }
    .hero__widgets { width: 420px; }
    .live-card { margin-left: 18px; width: 380px; }
    .hero__mini { grid-template-columns: 1fr 1fr; }
    .co2-card { padding: 0 12px; gap: 10px; }
    .co2-card__bars { display: none; }
    .about__inner { grid-template-columns: minmax(0, 1fr); }
    .about__content { max-width: 620px; }
    .devices { transform: none; height: auto; aspect-ratio: 820 / 360; max-width: 820px; width: 100%; margin: 24px auto 0; }
    .laptop { width: 78%; }
    .phone { width: 22%; right: 0; }
    .eco-cards li { width: auto; }
}

@media (max-width: 960px) {
    :root { --header-h: 62px; }
    .nav-toggle { display: inline-grid; }
    .header-actions .icon-btn[data-search-open] { margin-right: 0; }
    .header-actions__demo { display: none; }
    .main-nav {
        position: fixed; inset: var(--header-h) 0 0; margin: 0; padding: 16px 24px 32px;
        background: #fff; overflow-y: auto;
        transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s;
    }
    .main-nav.is-open { transform: none; visibility: visible; }
    .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav__list > li { border-bottom: 1px solid var(--line); }
    .main-nav__link { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 16px; }
    .main-nav__link::after { display: none; }
    .dropdown { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 12px; display: none; opacity: 1; visibility: visible; transform: none; }
    .has-dropdown.is-open .dropdown { display: block; }
    .main-nav__mobile-actions { display: grid; gap: 12px; margin-top: 24px; }
    .main-nav__mobile-actions .btn { height: 46px; }
    body.nav-open { overflow: hidden; }
    body.nav-open .site-header { background: #fff; }
    body.nav-open .nav-toggle__open { display: none; }
    body.nav-open .nav-toggle__close { display: block; }

    .hero { padding-top: calc(var(--header-h) + 28px); padding-bottom: 36px; }
    .hero__bg { left: 0; }
    .hero__bg::before { background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .92) 48%, rgba(255, 255, 255, .35) 75%, rgba(255, 255, 255, .1) 100%); }
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hero__widgets { justify-self: start; width: 100%; max-width: 520px; margin: 0; }
    .live-card { width: 100%; margin: 0; }
    .hero__mini { grid-template-columns: 1.4fr 1fr; }
    .co2-card__bars { display: flex; }

    .values__grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 0; }
    .value + .value, .value:nth-child(2) { padding-left: 0; }
    .value + .value::before { display: none; }

    .green-band { padding: 40px 0; }
    .green-band__inner { flex-direction: column; align-items: flex-start; }
    .eco-cards { margin-top: 0; flex-wrap: wrap; }

    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }

    .demo__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .demo__img { display: none; }
}

@media (max-width: 640px) {
    .container { width: min(var(--container), 100% - 32px); }
    .brand img { width: 136px; }
    .hero__title { font-size: 36px; }
    .hero__actions { gap: 12px; }
    .hero__actions .btn { flex: 1 1 100%; }
    .hero__mini { grid-template-columns: 1fr; }
    .live-row { grid-template-columns: 20px 58px 1fr 54px 34px; gap: 8px; padding: 0 6px; }
    .values__grid { grid-template-columns: 1fr; }
    .value__icon { width: 58px; height: 58px; }
    .value__icon .ic { width: 28px; height: 28px; }
    .about { padding: 40px 0; }
    .about__features { flex-wrap: wrap; gap: 20px 0; }
    .about__features li { width: 50%; margin: 0; padding: 0 12px 0 0; border: 0; }
    .devices { aspect-ratio: 820 / 420; }
    .laptop { width: 82%; }
    .phone { width: 26%; }
    .eco-cards { flex-direction: column; width: 100%; }
    .eco-cards li, .eco-cards li:nth-child(2) { width: 100%; }
    .site-footer__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
    .form { padding: 24px 20px; }
    .form__row { grid-template-columns: 1fr; }
    .soon-card { padding: 36px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- Faz 10c-1: kendi kaydı, fiyatlandırma, yasal metinler ---------- */
.field__hint { font-size: 12.5px; color: var(--gray); }
.signup__alt { margin-top: 28px; font-size: 14px; }
.signup__login { text-align: center; font-size: 14px; color: var(--gray); }
.link { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.muted { color: var(--gray); }
.plan-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.plan-pick legend { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; padding: 0; }
.plan-pick__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #D5DDD9; border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s; }
.plan-pick__item:hover { border-color: var(--green); }
.plan-pick__item:has(input:checked) { border-color: var(--green); background: var(--tint); box-shadow: 0 0 0 3px rgba(11, 107, 79, .1); }
.plan-pick__item input { margin-top: 3px; accent-color: var(--green); width: 18px; height: 18px; flex: none; }
.plan-pick__body { display: grid; gap: 2px; }
.plan-pick__body strong { color: var(--ink); display: flex; gap: 8px; align-items: center; }
.plan-pick__body small { font-size: 12.5px; color: var(--gray); }
.plan-pick__tag { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--green-2); padding: 1px 8px; border-radius: 99px; }
.plan-pick .plan-pick__price { color: var(--ink); font-weight: 600; }

.pricing__period { position: absolute; opacity: 0; pointer-events: none; }
.pricing__toggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto 36px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--shadow-sm); }
.pricing__toggle label { padding: 8px 20px; border-radius: 99px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--gray); white-space: nowrap; }
.pricing__toggle em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--green-2); margin-left: 4px; }
#donem-aylik:checked ~ .pricing__toggle label[for="donem-aylik"],
#donem-yillik:checked ~ .pricing__toggle label[for="donem-yillik"] { background: var(--green); color: #fff; }
#donem-yillik:checked ~ .pricing__toggle label[for="donem-yillik"] em { color: #CDEFC6; }
#donem-aylik:focus-visible ~ .pricing__toggle label[for="donem-aylik"],
#donem-yillik:focus-visible ~ .pricing__toggle label[for="donem-yillik"] { outline: 2px solid var(--green-2); outline-offset: 2px; }
.pricing .price--y { display: none; }
#donem-yillik:checked ~ .pricing__grid .price--y { display: block; }
#donem-yillik:checked ~ .pricing__grid .price--m { display: none; }
.pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.price-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-sm); }
.price-card--featured { border: 2px solid var(--green); box-shadow: var(--shadow); }
.price-card__badge { position: absolute; top: -13px; left: 28px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 99px; }
.price-card h2 { font-size: 22px; font-weight: 800; color: var(--ink); }
.price-card__desc { font-size: 14px; color: var(--gray); min-height: 42px; }
.price-card__price strong { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.price-card__price span > span { color: var(--gray); margin-left: 4px; }
.price-card__price small { display: block; font-size: 12.5px; color: var(--gray); margin-top: 4px; }
.price-card__list { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.price-card__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.price-card__list .ic { color: var(--green); width: 18px; height: 18px; margin-top: 2px; }
.pricing__compare, .pricing__faq { margin-top: 56px; }
.pricing__compare h2, .pricing__faq h2 { font-size: 22px; font-weight: 800; margin-bottom: 16px; color: var(--ink); }
.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.table-scroll table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; }
.table-scroll th, .table-scroll td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.table-scroll th[scope="row"], .table-scroll thead th:first-child { text-align: left; font-weight: 600; color: var(--ink); }
.table-scroll thead th { background: var(--bg); color: var(--ink); }
.table-scroll tr:last-child th, .table-scroll tr:last-child td { border-bottom: 0; }
.ic--yes { color: var(--green); margin: 0 auto; }
.pricing__note { margin-top: 12px; font-size: 13px; color: var(--gray); }
.pricing__faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.pricing__faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.pricing__faq details p { margin-top: 10px; }

.legal { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: start; }
.legal__body { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px 40px; line-height: 1.7; }
.legal__body h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 24px 0 8px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin-bottom: 10px; }
.legal__body ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; margin-bottom: 10px; }
.legal__body a { color: var(--green); text-decoration: underline; }
.legal__body table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; display: block; overflow-x: auto; }
.legal__body th, .legal__body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal__body th { background: #F5F8F6; color: var(--ink); font-weight: 700; }
.site-footer__legal { white-space: nowrap; }
.kvkk-form__note { font-size: 14px; color: var(--gray); margin-top: 6px; }
.legal__nav { position: sticky; top: calc(var(--header-h) + 24px); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.legal__nav h2 { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.legal__nav ul { display: grid; gap: 8px; font-size: 14px; }
.legal__nav a:hover { color: var(--green); }
@media (max-width: 900px) {
    .legal { grid-template-columns: minmax(0, 1fr); }
    .legal__nav { position: static; }
    .legal__body { padding: 24px 20px; }
}
@media (max-width: 640px) {
    .price-card { padding: 28px 20px; }
    .pricing__toggle label { padding: 8px 14px; }
}

/* Sistem durumu (Faz 11f) */
.sysstatus { max-width: 820px; }
.sysstatus__overall { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 14px; font-size: 18px; border: 1px solid var(--line); background: #fff; }
.sysstatus__overall .ic { width: 26px; height: 26px; }
.sysstatus__overall--ok { border-color: #BFE3CB; background: #EEF8F1; color: #0B6B4F; }
.sysstatus__overall--warn { border-color: #FAD9A7; background: #FFF7EA; color: #92400E; }
.sysstatus__overall--down { border-color: #F6C7C7; background: #FDF0F0; color: #991B1B; }
.sysstatus__group { font-size: 16px; font-weight: 800; color: var(--ink); margin: 28px 0 10px; }
.sysstatus__item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; }
.sysstatus__item h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 6px 0; }
.sysstatus__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--gray); align-items: center; }
.sysstatus__kind { font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #EEF2F6; color: var(--ink); }
.sysstatus__kind--maintenance { background: #FFF2DC; color: #92400E; }
.sysstatus__kind--incident { background: #FDE4E4; color: #991B1B; }
.sysstatus__note { margin-top: 24px; }
.pre-line { white-space: pre-line; }

/* İçerik sayfaları: ürün, çözümler, sektörler, yardım, SSS, kurumsal (Faz 11f) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.info-card__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #EEF8F1; color: var(--green); margin-bottom: 12px; }
.info-card__icon .ic { width: 22px; height: 22px; }
.info-card h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.info-card p { font-size: 15px; line-height: 1.6; }
.info-card ul { list-style: disc; padding-left: 20px; display: grid; gap: 5px; margin-top: 10px; font-size: 14.5px; }
.info-card__tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.content-block + .content-block { margin-top: 56px; }
.content-block > h2 { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.content-block > p.lead { font-size: 16px; max-width: 760px; margin-bottom: 22px; }
.help { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.help__nav { position: sticky; top: calc(var(--header-h) + 24px); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; font-size: 14px; }
.help__nav ul { display: grid; gap: 8px; }
.help__nav a:hover { color: var(--green); }
.help__body { display: grid; gap: 22px; }
.help__body article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px; line-height: 1.7; scroll-margin-top: calc(var(--header-h) + 16px); }
.help__body h2 { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.help__body h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 16px 0 6px; }
.help__body ol { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; }
.help__body ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.help__body code { background: #F1F4F2; border-radius: 6px; padding: 1px 6px; font-size: 13.5px; }
.cta-band { margin-top: 56px; background: var(--green-dark, #073B32); color: #fff; border-radius: 18px; padding: 32px 36px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-band h2 { font-size: 22px; font-weight: 800; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .85); margin-top: 6px; }
.cta-band__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 960px) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help { grid-template-columns: minmax(0, 1fr); }
    .help__nav { position: static; }
}
@media (max-width: 640px) {
    .cards, .cards--2 { grid-template-columns: minmax(0, 1fr); }
    .help__body article { padding: 20px 18px; }
    .cta-band { padding: 24px 20px; }
}
.cards + .content-block { margin-top: 56px; }

/* Tüm seçim kutularında el imleci; devre dışı olanda "izin yok" imleci */
select { cursor: pointer; }
select:disabled { cursor: not-allowed; }

/* Tarih / saat alanlarında el imleci (alan ve takvim simgesi); devre dışı ya da salt okunurda "izin yok" imleci */
input:is([type=date], [type=datetime-local], [type=time], [type=month], [type=week]) { cursor: pointer; }
input:is([type=date], [type=datetime-local], [type=time], [type=month], [type=week])::-webkit-calendar-picker-indicator { cursor: pointer; }
input:is([type=date], [type=datetime-local], [type=time], [type=month], [type=week]):is(:disabled, [readonly]) { cursor: not-allowed; }