/* Karmin Lastik — mağaza teması (mobil öncelikli) */

/* ---------- Üst şerit (yalnız masaüstü; mobilde mobile.css gizler) ---------- */
.topbar { background: var(--g-50); color: var(--g-600); font-size: 12.5px; font-weight: 500; border-bottom: 1px solid var(--g-200); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.topbar__usp { display: flex; gap: 24px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.topbar__usp li, .topbar__links a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar .ic { width: 15px; height: 15px; color: var(--red); }
.topbar__links { display: flex; gap: 20px; }
.topbar__links a:hover { color: var(--ink); }
.topbar__phone { font-weight: 700; color: var(--ink); }
@media (max-width: 767px) { .topbar__usp li:nth-child(n+2) { display: none; } .topbar__links a:first-child { display: none; } }

/* ---------- Başlık ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: #fff; transition: box-shadow .25s; }
.hdr.is-stuck { box-shadow: 0 10px 30px -18px rgba(14, 15, 18, .45); }
.hdr__in { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.hdr__logo img { width: 150px; height: auto; }
.hdr__burger { margin-left: -8px; }
.hdr__search {
    flex: 1; display: none; align-items: center; gap: 10px;
    height: 50px; padding: 0 5px 0 16px; max-width: 620px; margin: 0 auto;
    background: #fff; border: 2px solid var(--g-200); border-radius: 14px;
    color: var(--g-500); font-size: 14.5px; text-align: left;
    transition: border-color .2s, box-shadow .2s;
}
.hdr__search > .ic { color: var(--ink); }
.hdr__search:hover { border-color: var(--ink); box-shadow: 0 6px 18px -10px rgba(14, 15, 18, .35); }
.hdr__search span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hdr__search em { font-style: normal; color: var(--g-400); margin-left: 4px; }
.hdr__go {
    display: inline-flex; align-items: center; height: 38px; padding: 0 22px; border-radius: 10px;
    background: var(--red); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .2px;
    transition: background .2s;
}
.hdr__search:hover .hdr__go { background: var(--red-600); }
.hdr__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 1024px) {
    .hdr__in { min-height: 84px; gap: 32px; }
    .hdr__logo img { width: 190px; }
    .hdr__burger { display: none; }
    .hdr__search { display: flex; }
    .hdr__actions { margin-left: 0; }
    .hdr__actions .icon-btn { font-weight: 600; }
    .hdr__actions .icon-btn--cart { background: var(--ink); color: #fff; padding: 0 16px 0 14px; min-height: 44px; border-radius: 12px; margin-left: 6px; }
    .hdr__actions .icon-btn--cart:hover { background: var(--red); }
    .hdr__actions .icon-btn--cart .badge { top: -6px; left: auto; right: -6px; }
}

/* ---------- Kategori menüsü + mega menü ---------- */
.nav { display: none; background: var(--ink); }
@media (min-width: 1024px) { .nav { display: block; } }
.nav__in { display: flex; align-items: stretch; gap: 2px; }
.nav__item { position: static; }
.nav__item--end { margin-left: auto; }
.nav__link {
    display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px;
    font-weight: 600; font-size: 14.5px; color: #D5D8DD; position: relative;
    transition: color .2s;
}
.nav__item:first-child .nav__link { padding-left: 0; }
.nav__item:first-child .nav__link::after { left: 0; }
.nav__link .ic { width: 18px; height: 18px; transition: color .2s, transform .2s; }
.nav__link .ic--xs { width: 14px; height: 14px; opacity: .7; }
.nav__link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--red); transform: scaleX(0); transition: transform .25s var(--ease); }
.nav__item:hover .nav__link, .nav__item:focus-within .nav__link, .nav__link.is-active { color: #fff; }
.nav__item:hover .nav__link::after, .nav__item:focus-within .nav__link::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__item.has-mega:hover .nav__link .ic--xs { transform: rotate(180deg); }
.nav__link--cta { color: #fff; }
.nav__link--cta .ic { color: var(--red); }
.nav__item--end .nav__link { padding-right: 0; }
.nav__item--end .nav__link::after { right: 0; }

.mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--g-200);
    box-shadow: 0 30px 60px -30px rgba(14, 15, 18, .35);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__grid { display: grid; grid-template-columns: 1.1fr 1.3fr 1.3fr 1.1fr; gap: 32px; padding-top: 28px; padding-bottom: 32px; }
.mega h4 { font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); margin-bottom: 14px; }
.mega__season { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: var(--r); font-weight: 600; }
.mega__season:hover { background: var(--g-50); }
.chip-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.chip-ic .ic { width: 20px; height: 20px; }
.chip-ic--sun { background: #FFF6E5; color: var(--sun); }
.chip-ic--snow { background: #E6F6FE; color: var(--snow); }
.chip-ic--all { background: #E7F8F1; color: var(--all); }
.mega__sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mega__sizes a { padding: 8px 10px; border-radius: var(--r-sm); background: var(--g-50); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.mega__sizes a:hover { background: var(--ink); color: #fff; }
.mega__brands { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.mega__brands a { padding: 7px 0; font-weight: 500; color: var(--g-700); }
.mega__brands a:hover { color: var(--red); }
.mega__col--tech a { display: grid; padding: 9px 12px; margin: 0 -12px; border-radius: var(--r); }
.mega__col--tech a:hover { background: var(--g-50); }
.mega__col--tech small { color: var(--g-500); font-size: 13px; }

/* ---------- Mobil çekmece ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; background: rgba(14, 15, 18, .5); backdrop-filter: blur(3px); animation: fade .2s; }
.drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(340px, 88vw); background: #fff; display: flex; flex-direction: column; animation: slide-in .3s var(--ease); overflow-y: auto; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--g-100); }
.drawer__nav { padding: 10px 12px 24px; display: grid; }
.drawer__nav > a { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: var(--r); font-weight: 600; }
.drawer__nav > a:hover { background: var(--g-50); }
.drawer__nav > a > .ic:first-child { color: var(--red); }
.drawer__sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px 8px; }
.drawer__sub a { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--r); background: var(--g-50); font-size: 13px; font-weight: 600; }
.drawer__sub .ic { width: 18px; height: 18px; color: var(--g-600); }
@keyframes slide-in { from { transform: translateX(-100%); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Tam ekran arama ---------- */
.search { position: fixed; inset: 0; z-index: 90; background: rgba(14, 15, 18, .55); backdrop-filter: blur(6px); animation: fade .2s; display: flex; justify-content: center; align-items: flex-start; padding: 0; }
.search__panel { width: 100%; max-width: 760px; background: #fff; min-height: 100%; animation: drop .3s var(--ease); }
@media (min-width: 768px) { .search { padding: 8vh 16px; } .search__panel { min-height: 0; border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; } }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
.search__bar { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--g-200); }
.search__bar > .ic { color: var(--red); width: 22px; height: 22px; }
.search__bar input { flex: 1; min-width: 0; border: 0; outline: 0; height: 52px; font-size: 18px; font-weight: 500; background: transparent; }
.search__body { padding: 22px; display: grid; gap: 22px; }
.search__body h4 { font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); margin-bottom: 12px; }
.search__tip { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--g-600); background: var(--g-50); padding: 12px 14px; border-radius: var(--r); }
.search__tip .ic { width: 16px; height: 16px; color: var(--red); }

/* ---------- Hero (açık zemin + logo amblemi + arama çubuğu) ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F4F5F7 0%, #FFFFFF 100%); padding-bottom: 36px; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(48% 70% at 78% 40%, rgba(227, 20, 27, .10), transparent 70%),
        repeating-linear-gradient(115deg, rgba(14, 15, 18, .035) 0 1px, transparent 1px 26px);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.hero__in { display: grid; align-items: center; gap: 12px; padding-top: 36px; }
@media (min-width: 1024px) { .hero__in { grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 56px; min-height: 440px; } }

.hero__copy { max-width: 590px; }
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(227, 20, 27, .15); }
.hero h1 { margin: 16px 0 18px; font: 800 clamp(38px, 5.4vw, 70px)/.98 var(--display); letter-spacing: -.012em; color: var(--ink); }
.hero h1 em { display: block; font-style: italic; color: var(--red); }
.hero__copy > p { color: var(--g-600); font-size: 17.5px; line-height: 1.6; max-width: 520px; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hero__ticks li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border-radius: 99px; background: #fff; border: 1px solid var(--g-200); font-weight: 600; font-size: 14px; color: var(--g-900); box-shadow: var(--sh-1); }
.hero__ticks .ic { width: 18px; height: 18px; color: var(--red); }

/* Amblem: logodaki lastik + kırmızı halka; halkanın içinde canlı ebat göstergesi */
.hero__visual { position: relative; justify-self: center; width: min(100%, 560px); aspect-ratio: 900 / 691; }
.hero__visual img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(14, 15, 18, .18)); animation: hero-in .9s var(--ease) both; }
@keyframes hero-in { from { opacity: 0; transform: translateX(-30px) rotate(-6deg); } }
.hero__dial { position: absolute; left: 66.5%; top: 52%; translate: -50% -50%; width: 50%; display: grid; justify-items: center; text-align: center; gap: 6px; }
.hero__dial small { font: 700 11.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--g-500); }
.hero__dial b { font: 800 italic clamp(30px, 4.2vw, 50px)/1 var(--display); color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .25s, transform .25s var(--ease); }
.hero__dial b.is-swap { opacity: 0; transform: translateY(8px); }
.hero__dial-season { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: var(--ink); color: #fff; }

/* Arama çubuğu (dock) */
.dock { position: relative; z-index: 2; margin-top: 18px; }
.dock__tabs { display: inline-flex; gap: 4px; padding: 4px; margin-left: 10px; border-radius: 14px 14px 0 0; background: #fff; border: 1px solid var(--g-200); border-bottom: 0; }
.dock__tabs button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--g-500); transition: background .2s, color .2s; }
.dock__tabs .ic { width: 17px; height: 17px; }
.dock__tabs .is-active { background: var(--ink); color: #fff; }
.dock__tabs .is-active .ic { color: #FF5A5F; }
.dock__bar { display: flex; align-items: stretch; gap: 8px; padding: 8px; background: #fff; border: 1px solid var(--g-200); border-radius: 22px; box-shadow: 0 30px 60px -28px rgba(14, 15, 18, .35), 0 6px 16px -8px rgba(14, 15, 18, .10); }
.dock__fields { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); min-width: 0; }
.dock__fields[data-pane="text"] { grid-template-columns: 1fr; }
.dock__cell { position: relative; display: grid; align-content: center; gap: 2px; padding: 8px 18px; border-radius: 16px; cursor: pointer; transition: background .2s; min-width: 0; }
.dock__cell + .dock__cell::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--g-200); }
.dock__cell:hover, .dock__cell:focus-within { background: var(--g-50); }
.dock__cell:hover::before, .dock__cell:focus-within::before, .dock__cell:hover + .dock__cell::before, .dock__cell:focus-within + .dock__cell::before { opacity: 0; }
.dock__cell > span { font: 700 11.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--g-500); }
.dock__cell select, .dock__cell input { width: 100%; border: 0; outline: 0; background: transparent; padding: 4px 22px 0 0; height: 32px; font: 700 18px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; appearance: none; cursor: pointer; }
.dock__cell input { cursor: text; font-weight: 600; font-size: 17px; padding-right: 0; }
.dock__cell input::placeholder { color: var(--g-400); font-weight: 500; }
.dock__cell select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A2A8B1' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 bottom 7px; }
.dock__cell select:invalid { color: var(--g-400); font-weight: 600; }
.dock__go { min-height: 66px; padding: 0 30px; border-radius: 16px; font-size: 16.5px; }
.dock__go .ic { width: 20px; height: 20px; }
.dock__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 0 10px; font-size: 13.5px; }
.dock__foot > span { color: var(--g-500); font-weight: 600; }
.dock__foot a { padding: 5px 11px; border-radius: 99px; background: #fff; border: 1px solid var(--g-200); font-weight: 600; color: var(--g-700); font-variant-numeric: tabular-nums; transition: all .2s; }
.dock__foot a:hover { border-color: var(--ink); color: var(--ink); }
.dock__foot .dock__help { margin-left: auto; border: 0; background: none; padding: 0; color: var(--g-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g-300); }
.dock__foot .dock__help:hover { color: var(--red); }

/* Katalog filtresinde kullanılan ortak parçalar */
.finder__selects { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; gap: 6px; }
.finder__sep { font: 800 22px/48px var(--display); color: var(--g-300); text-align: center; }
.finder__selects select { font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 12px; }

.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border: 1.5px solid var(--g-200); border-radius: var(--r); font-weight: 600; font-size: 13.5px; color: var(--g-700); cursor: pointer; transition: all .2s; }
.seg .ic { width: 16px; height: 16px; }
.seg label:nth-child(2) .ic { color: var(--sun); }
.seg label:nth-child(3) .ic { color: var(--snow); }
.seg label:nth-child(4) .ic { color: var(--all); }
.seg span:hover { border-color: var(--g-300); }
.seg input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg input:checked + span .ic { color: #fff; }
.seg input:focus-visible + span { box-shadow: var(--ring); }

/* ---------- Güven şeridi ---------- */
.usp { border-bottom: 1px solid var(--g-200); background: #fff; }
.usp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding-top: 18px; padding-bottom: 18px; }
@media (min-width: 900px) { .usp__grid { grid-template-columns: repeat(4, 1fr); padding-top: 26px; padding-bottom: 26px; } }
.usp__item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.usp__item > span { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--red-50); color: var(--red); }
.usp__item b { display: block; font-size: 14.5px; color: var(--ink); }
.usp__item small { display: block; color: var(--g-500); font-size: 12.5px; line-height: 1.35; }
@media (max-width: 480px) { .usp__item > span { width: 38px; height: 38px; } .usp__item b { font-size: 13.5px; } }

/* ---------- Bölümler ---------- */
.sec { padding: 56px 0; }
@media (min-width: 1024px) { .sec { padding: 84px 0; } }
.sec--tint { background: var(--g-50); }
.sec--pt0 { padding-top: 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.sec__head h2 { margin-top: 10px; font: 800 clamp(28px, 4.2vw, 42px)/1.05 var(--display); letter-spacing: -.005em; }
.sec__head p { margin-top: 12px; color: var(--g-600); max-width: 620px; }
.sec__head--center { justify-content: center; text-align: center; }
.sec__head--center p { margin-left: auto; margin-right: auto; }

/* Kategoriler */
.cats { display: grid; gap: 16px; }
@media (min-width: 768px) { .cats { grid-template-columns: 1.4fr 1fr 1fr; } }
.cat {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; min-height: 230px; padding: 26px; border-radius: var(--r-xl);
    background: var(--g-50); border: 1px solid var(--g-200);
    transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--g-300); }
.cat__body { display: flex; flex-direction: column; gap: 10px; max-width: 70%; z-index: 1; }
.cat h3 { font: 800 32px/1 var(--display); }
.cat p { color: var(--g-600); }
.cat .link-arrow { margin-top: auto; }
.cat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat__chips i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #fff; }
.cat__chips .ic { width: 14px; height: 14px; }
.cat__art { position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; color: var(--g-200); z-index: -1; transition: transform .6s var(--ease), color .3s; }
.cat__ic { width: 100%; height: 100%; stroke-width: 1.2; }
.cat:hover .cat__art { transform: rotate(40deg); color: var(--red-100); }
.cat--tire { background: radial-gradient(120% 120% at 100% 100%, #2b0d0f 0%, var(--ink) 55%); border-color: var(--ink); }
.cat--tire h3 { color: #fff; }
.cat--tire p { color: #B9BEC6; }
.cat--tire .link-arrow { color: #FF5A5F; }
.cat--tire .cat__art { color: rgba(255, 255, 255, .08); width: 280px; height: 280px; }
.cat--tire:hover .cat__art { color: rgba(227, 20, 27, .35); }

/* Markalar */
.brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .brands { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .brands { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.brand {
    display: grid; place-items: center; height: 84px; border-radius: var(--r-lg);
    background: #fff; border: 1px solid var(--g-200);
    font: 800 italic 21px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--g-700);
    transition: all .25s var(--ease);
}
.brand:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-2); }

/* Ebat okuma rehberi */
.sizeread { background: radial-gradient(90% 120% at 50% 0%, #22252c 0%, var(--ink) 60%); color: #fff; }
.sizeread .sec__head h2 { color: #fff; }
.sizeread .sec__head p { color: #A9AFB8; }
.sidewall { display: grid; gap: 28px; }
.sidewall__code {
    display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px;
    padding: 28px 16px; border-radius: 200px / 70px;
    background: repeating-linear-gradient(90deg, #17191d 0 3px, #1c1f24 3px 6px);
    border: 1px solid #2A2D34; box-shadow: inset 0 2px 30px rgba(0, 0, 0, .6), 0 20px 50px -30px #000;
    font: 800 clamp(40px, 9vw, 92px)/1 var(--display); letter-spacing: .02em;
}
.sidewall__code > span { color: #4A4E57; }
.sidewall__code button { font: inherit; color: #6B717C; padding: 4px 8px; border-radius: 14px; transition: color .2s, background .2s, text-shadow .2s; }
.sidewall__code button:hover, .sidewall__code button.is-active { color: #fff; text-shadow: 0 0 30px rgba(227, 20, 27, .6); background: rgba(227, 20, 27, .14); }
.sidewall__code button.is-active { color: #FF4B51; }
.sidewall__legend { display: grid; gap: 10px; }
@media (min-width: 900px) { .sidewall__legend { grid-template-columns: repeat(5, 1fr); } }
.sidewall__legend article { padding: 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); transition: background .25s, border-color .25s, transform .25s var(--ease); }
.sidewall__legend article.is-active { background: rgba(227, 20, 27, .12); border-color: rgba(227, 20, 27, .5); transform: translateY(-3px); }
.sidewall__legend b { font: 800 26px/1 var(--display); color: #FF4B51; }
.sidewall__legend h3 { color: #fff; font-size: 15px; margin: 8px 0 6px; }
.sidewall__legend p { color: #A9AFB8; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 899px) { .sidewall__legend article:not(.is-active) { display: none; } }

/* Adımlar */
.steps { display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.steps li { position: relative; padding: 26px 22px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--g-200); transition: box-shadow .3s, transform .3s var(--ease); }
.steps li:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.steps__n { position: absolute; top: 14px; right: 20px; font: 800 italic 64px/1 var(--display); color: var(--g-100); }
.steps__ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--ink); color: #fff; margin-bottom: 18px; position: relative; }
.steps__ic::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 3px solid #fff; }
.steps h3 { font-size: 17px; margin-bottom: 6px; }
.steps p { color: var(--g-600); font-size: 14.5px; }

/* Çift çağrı kartı */
.duo { display: grid; gap: 16px; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__card { position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: 32px; border-radius: var(--r-xl); min-height: 260px; transition: transform .3s var(--ease), box-shadow .3s; }
.duo__card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.duo__card h3 { font: 800 30px/1.05 var(--display); }
.duo__card p { max-width: 460px; }
.duo__card .link-arrow { margin-top: 8px; }
.duo__ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; }
.duo__ic .ic { width: 26px; height: 26px; }
.duo__card--light { background: linear-gradient(135deg, var(--red-50), #fff 70%); border: 1px solid var(--red-100); }
.duo__card--light .duo__ic { background: var(--red); color: #fff; }
.duo__card--light p { color: var(--g-700); }
.duo__card--dark { background: var(--ink); color: #fff; }
.duo__card--dark h3 { color: #fff; }
.duo__card--dark p { color: #B9BEC6; }
.duo__card--dark .duo__ic { background: rgba(255, 255, 255, .08); color: #FF5A5F; }
.duo__card--dark .link-arrow { color: #FF5A5F; }
.duo__card--dark::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; border: 8px solid transparent; border-left-color: var(--red); border-top-color: rgba(227, 20, 27, .4); rotate: 20deg; }

/* ---------- Alt bilgi ---------- */
.ftr { background: var(--g-50); border-top: 1px solid var(--g-200); margin-top: 0; }
.ftr__grid { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 40px; }
@media (min-width: 768px) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; padding-top: 64px; } }
.ftr__logo img { width: 190px; height: auto; }
.ftr__brand p { margin: 14px 0 18px; color: var(--g-600); max-width: 360px; font-size: 14.5px; }
.ftr__contact { display: grid; gap: 8px; font-size: 14.5px; font-weight: 500; }
.ftr__contact li { display: flex; align-items: center; gap: 10px; }
.ftr__contact .ic { width: 18px; height: 18px; color: var(--red); }
.ftr__col { display: grid; align-content: start; gap: 10px; }
.ftr__col h4 { font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--g-500); margin-bottom: 6px; }
.ftr__col a { color: var(--g-700); font-size: 14.5px; }
.ftr__col a:hover { color: var(--red); }
.ftr__bar { background: var(--ink); color: #9AA0A9; font-size: 13px; }
.ftr__bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.ftr__pay { display: inline-flex; align-items: center; gap: 8px; }
.ftr__pay .ic { width: 15px; height: 15px; color: #FF5A5F; }

/* WhatsApp düğmesi */
.wa-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 18px 0 16px; border-radius: 99px; background: #1FAF54; color: #fff; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(31, 175, 84, .8); transition: transform .2s var(--ease); }
.wa-fab:hover { transform: translateY(-2px) scale(1.02); }
.wa-fab .ic { width: 24px; height: 24px; }
@media (max-width: 600px) { .wa-fab span { display: none; } .wa-fab { width: 54px; padding: 0; justify-content: center; } }

/* ---------- Katalog ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--g-500); padding: 18px 0 0; }
.crumbs a:hover { color: var(--red); }
.crumbs .ic { width: 14px; height: 14px; }
.cat-head { padding: 12px 0 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--g-200); }
.cat-head h1 { font: 800 clamp(30px, 5vw, 46px)/1 var(--display); }
.cat-head .size-tag { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 6px 12px; border-radius: 10px; background: var(--ink); color: #fff; font: 700 18px/1 var(--display); vertical-align: middle; }
.cat-layout { display: grid; gap: 24px; padding: 24px 0 72px; }
@media (min-width: 1024px) { .cat-layout { grid-template-columns: 280px 1fr; gap: 32px; } }
.filters { display: grid; gap: 14px; align-content: start; }
.filter-box { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--g-200); background: #fff; display: grid; gap: 12px; }
.filter-box h3 { font-size: 14px; letter-spacing: .02em; }
.filter-box .finder__selects { gap: 4px; }
.filter-box .finder__sep { font-size: 18px; }
.filter-box select { min-height: 42px; font-size: 14px; }
.empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 56px 24px; border-radius: var(--r-xl); border: 1.5px dashed var(--g-300); background: var(--g-50); }
.empty__ic { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--red); box-shadow: var(--sh-2); margin-bottom: 6px; }
.empty__ic .ic { width: 40px; height: 40px; animation: spin 6s linear infinite; }
.empty h2 { font: 800 28px/1.1 var(--display); }
.empty p { color: var(--g-600); max-width: 460px; }
.skeletons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; width: 100%; max-width: 640px; }
@media (min-width: 768px) { .skeletons { grid-template-columns: repeat(3, 1fr); } }
.skel { height: 150px; border-radius: var(--r-lg); background: linear-gradient(100deg, var(--g-100) 40%, #fff 50%, var(--g-100) 60%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Hata / yakında sayfaları ---------- */
.status-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 64px 16px; }
.status-page__code { font: 800 italic clamp(96px, 22vw, 200px)/.9 var(--display); letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: .05em; }
.status-page__code .tire-o { width: .78em; height: .78em; color: var(--red); animation: spin 5s linear infinite; }
.status-page h1 { margin: 18px 0 10px; font: 800 32px/1.1 var(--display); }
.status-page p { color: var(--g-600); max-width: 460px; margin: 0 auto 26px; }
.status-page__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- Ana sayfa slider ---------- */
.slider { padding-top: 20px; }
.slider__frame { position: relative; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: 0 30px 60px -32px rgba(14, 15, 18, .55); aspect-ratio: 2100 / 748; }
.slider__track { display: flex; height: 100%; will-change: transform; touch-action: pan-y; cursor: grab; }
/* Kayma efekti: işletim sisteminde animasyonlar kısılmış olsa da slider kayarak geçer (istenen davranış) */
.slider__track.is-animating { transition: transform .7s cubic-bezier(.65, 0, .25, 1) !important; }
.slider__track.is-dragging { cursor: grabbing; }
.slider__slide { flex: 0 0 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }

.slider__nav {
    position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: var(--sh-2);
    opacity: 0; transition: opacity .25s, transform .2s var(--ease), background .2s;
}
.slider__nav--prev { left: 16px; }
.slider__nav--prev .ic { transform: rotate(180deg); }
.slider__nav--next { right: 16px; }
.slider__frame:hover .slider__nav, .slider__nav:focus-visible { opacity: 1; }
.slider__nav:hover { background: #fff; transform: scale(1.06); }

.slider__dots { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 2; display: flex; gap: 6px; padding: 6px 8px; border-radius: 99px; background: rgba(14, 15, 18, .45); backdrop-filter: blur(6px); }
.slider__dots button { width: 22px; height: 8px; display: grid; }
.slider__dots i { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .45); overflow: hidden; position: relative; transition: background .2s; }
.slider__dots .is-active { width: 40px; }
.slider__dots .is-active i { background: rgba(255, 255, 255, .35); }
/* Etkin noktada otomatik geçiş süresi dolarken ilerleyen çizgi */
.slider__dots .is-active i::after { content: ""; position: absolute; inset: 0; background: #fff; border-radius: inherit; transform-origin: left; animation: slide-progress var(--slide-ms, 6000ms) linear forwards !important; }
.slider.is-paused .slider__dots .is-active i::after { animation-play-state: paused; }
@keyframes slide-progress { from { transform: scaleX(0); } }

/* Slider altındaki arama bandı */
.searchband { padding: 22px 0 8px; }
.searchband .dock { margin-top: 0; }

@media (max-width: 1023px) {
    .slider { padding-top: 0; }
    .slider .wrap { padding: 0 12px; }
    .slider__frame { border-radius: 18px; }
    .slider__nav { display: none; }
    .slider__dots { bottom: 8px; padding: 4px 6px; }
    .slider__dots button { width: 14px; height: 6px; }
    .slider__dots i { height: 6px; }
    .slider__dots .is-active { width: 26px; }
    .searchband { padding-top: 14px; }
}

/* ---------- Hakkımızda ---------- */
.about { padding-bottom: 72px; }
.about__head { max-width: 760px; padding: 18px 0 36px; }
.about__head h1 { margin: 12px 0 16px; font: 800 clamp(32px, 5vw, 52px)/1.02 var(--display); }
.about__head h1 em { font-style: italic; color: var(--red); }
.about__head p { color: var(--g-600); font-size: 17px; }
.about__grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .about__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .about__grid { grid-template-columns: repeat(4, 1fr); } }
.about__grid article { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--g-200); }
.about__grid span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--red-50); color: var(--red); margin-bottom: 14px; }
.about__grid h3 { font-size: 17px; margin-bottom: 6px; }
.about__grid p { color: var(--g-600); font-size: 14.5px; }
.about__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px; border-radius: 24px; background: var(--ink); color: #fff; }
.about__cta h2 { color: #fff; font: 800 28px/1.1 var(--display); }
.about__cta p { color: #B9BEC6; margin-top: 4px; }
.about__cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.about__cta .btn--ghost { --fg: #fff; border-color: rgba(255, 255, 255, .3); }
.about__cta .btn--ghost:hover { border-color: #fff; }

/* ---------- İletişim ---------- */
.contact { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact__card { display: grid; gap: 4px; align-content: start; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--g-200); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.contact__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--g-300); }
.contact__card > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--red-50); color: var(--red); margin-bottom: 12px; }
.contact__card small { font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--g-500); }
.contact__card b { font-size: 18px; color: var(--ink); word-break: break-word; }
.contact__card em { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--red); }
.contact__card em .ic { width: 16px; height: 16px; }
.contact__card--wa > span { background: #E8F8EE; color: #1FAF54; }
.contact__card--wa em { color: #1FAF54; }

/* Başlık: ayırıcı çizgiler yok; satırlar boşlukla ayrılır, altta yalnız yumuşak gölge */
.hdr { border-bottom: 0; box-shadow: 0 10px 30px -24px rgba(14, 15, 18, .28); }
.hdr.is-stuck { box-shadow: 0 12px 30px -18px rgba(14, 15, 18, .32); }
.mega { border-top: 0; }

/* Banner + arama satırı tek kart: banner tam görünür (hiçbir yeri kapanmaz), arama satırı kartın beyaz alt kısmı */
.slider__frame { border-radius: 24px 24px 0 0; box-shadow: none; }
.searchband { position: relative; padding-top: 0; margin-top: 0; }
.searchband .dock__bar {
    border-radius: 0 0 24px 24px; border-top: 0;
    box-shadow: 0 34px 60px -34px rgba(14, 15, 18, .45), 0 8px 18px -12px rgba(14, 15, 18, .12);
}
.searchband .dock__foot { margin-top: 16px; }

/* Güven şeridi: çizgi yok; bölümler arası boşluk dengeli */
.usp { border-bottom: 0; }
.usp__grid { padding-top: 74px; padding-bottom: 8px; }
@media (min-width: 1024px) { .sec { padding: 64px 0; } }

@media (max-width: 1023px) {
    .slider__frame { border-radius: 18px 18px 0 0; }
    .searchband .dock__bar { border-radius: 0 0 18px 18px; box-shadow: 0 18px 40px -24px rgba(14, 15, 18, .4); }
    .searchband .wrap { padding: 0 12px; }
    .usp__grid { padding-top: 14px; }
}

@media (min-width: 1024px) {
    .hdr__logo img {
        width: 130px;
    }
}

/* Masaüstü başlık: logo | arama (tam ortada) | hesap — yan sütunlar eşit genişlikte */
@media (min-width: 1024px) {
    .hdr__in { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; gap: 28px; }
    .hdr__logo { justify-self: start; }
    .hdr__search { width: 100%; max-width: none; margin: 0; }
    .hdr__actions { justify-self: end; }
}

/* ---------- Kategori kartları: fotoğraf arka plan ---------- */
.cat--photo { background: var(--ink) !important; border-color: transparent; color: #fff; }
.cat__photo { position: absolute; inset: 0; z-index: -2; }
.cat__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat--photo:hover .cat__photo img { transform: scale(1.06); }
/* Metin okunsun diye soldan/aşağıdan koyulaşan örtü + hafif kırmızı ton */
.cat--photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(10, 11, 13, .92) 0%, rgba(10, 11, 13, .72) 42%, rgba(10, 11, 13, .18) 100%),
                linear-gradient(0deg, rgba(120, 8, 12, .35), transparent 55%); }
.cat--photo h3 { color: #fff; }
.cat--photo p { color: #D4D7DC !important; display: block !important; }
.cat--photo .link-arrow { color: #FF5A5F; }
.cat--photo .cat__body { max-width: 75%; }
.cat--photo .cat__chips i { background: rgba(255, 255, 255, .14); backdrop-filter: blur(4px); }
.cat--photo:hover { border-color: transparent; box-shadow: 0 24px 50px -24px rgba(14, 15, 18, .6); }
@media (min-width: 768px) { .cats .cat--photo { min-height: 260px; } }
@media (max-width: 1023px) { .cat--photo .cat__body { max-width: 100%; } .cat--photo:not(.cat--tire) p { display: none !important; } }
/* Fotoğraflı kartlar: kenarlık yok (köşede ince çizgi/kırpma izi kalmasın); yuvarlak köşe kırpması GPU katmanında */
.cat--photo { border: 0 !important; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); }
.cat--photo .cat__photo, .cat--photo .cat__photo img { border-radius: inherit; }

/* Marka logoları (orijinal, renkli) */
.brand--logo { padding: 14px 22px; }
.brand--logo img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; transition: transform .25s var(--ease); }
.brand--logo:hover img { transform: scale(1.06); }
@media (max-width: 1023px) { .brand--logo { padding: 10px 16px; } .brand--logo img { max-height: 28px; } }

/* Masaüstünde başlık sayfayla birlikte kaymaz (yapışkan değil). Mobilde uygulama çubuğu gibi yapışkan kalır (mobile.css). */
@media (min-width: 1024px) { .hdr, .hdr.is-stuck { position: relative; top: auto !important; } }

/* ---------- Ebat okuma rehberi (lastik yanağı + açıklama listesi) ---------- */
.sr { background: linear-gradient(180deg, #fff 0%, var(--g-50) 100%); overflow: hidden; }
.sr__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .sr__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.sr__visual { position: relative; }
.sr__visual::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 30px; background: radial-gradient(closest-side, rgba(14, 15, 18, .28), transparent); filter: blur(6px); z-index: -1; }
.sr__tire { width: 100%; height: auto; display: block; }
.sr__code { font: 800 58px/1 var(--display); letter-spacing: 3px; fill: #50545d; }
.sr__code tspan { cursor: pointer; transition: fill .25s; }
.sr__code tspan.sr__sep { fill: #3a3d44; cursor: default; }
.sr__code tspan:hover { fill: #8a9099; }
.sr__code tspan.is-active { fill: #FF3B41; }
.sr__small { font: 700 15px/1 var(--font); letter-spacing: 5px; fill: #3e4148; }

.sr__copy h2 { margin: 10px 0 10px; font: 800 clamp(28px, 4vw, 42px)/1.05 var(--display); }
.sr__lead { color: var(--g-600); margin-bottom: 22px; }
.sr__list { display: grid; gap: 8px; }
.sr__list button {
    position: relative; width: 100%; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 14px;
    padding: 12px 16px 12px 12px; border-radius: 16px; text-align: left; background: #fff; border: 1px solid var(--g-200);
    transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.sr__list button:hover { border-color: var(--g-300); }
.sr__list b { display: grid; place-items: center; height: 50px; border-radius: 12px; background: var(--g-100); font: 800 24px/1 var(--display); color: var(--ink); transition: background .25s, color .25s; }
.sr__list strong { display: block; font-size: 15.5px; color: var(--ink); }
.sr__list small { display: block; color: var(--g-600); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.sr__list button.is-active { border-color: rgba(227, 20, 27, .45); box-shadow: 0 14px 30px -20px rgba(227, 20, 27, .6); transform: translateX(4px); }
.sr__list button.is-active b { background: var(--red); color: #fff; }
@media (max-width: 1023px) {
    .sr { background: transparent; }
    .sr__list button { grid-template-columns: 60px 1fr; padding: 10px 12px 10px 10px; }
    .sr__list b { height: 44px; font-size: 20px; }
    .sr__list button.is-active { transform: none; }
}

/* Rehber: masaüstünde açıklamalar solda, lastik sağda */
@media (min-width: 1024px) {
    .sr__grid { grid-template-columns: 1fr 1.15fr; }
    .sr__visual { order: 2; }
}
.sr__tire { filter: drop-shadow(0 30px 40px rgba(14, 15, 18, .22)); }
/* Fotoğraflı kartlarda görselin önemli kısmı (ürün) sağda: dar kartta sağ taraf korunsun */
.cat__photo img { object-position: right center; }

/* ---------- Montaj / Bayi kartları: gerçek fotoğraf + koyu örtü ---------- */
.duo__card--photo { isolation: isolate; color: #fff; background: var(--ink); min-height: 300px; align-content: end; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.duo__card--photo::after { content: none; }
.duo__photo { position: absolute; inset: 0; z-index: -2; }
.duo__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.duo__card--photo:hover .duo__photo img { transform: scale(1.05); }
.duo__card--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(10, 11, 13, .94) 0%, rgba(10, 11, 13, .70) 45%, rgba(10, 11, 13, .15) 100%); }
.duo__card--photo h3 { color: #fff; }
.duo__card--photo p { color: #D4D7DC; }
.duo__card--photo .link-arrow { color: #FF5A5F; }
.duo__card--photo .duo__ic { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgba(227, 20, 27, .8); }
@media (min-width: 900px) { .duo__card--photo { min-height: 340px; } }

/* =========================================================
   FOOTER (koyu)
   ========================================================= */
.ft { position: relative; overflow: hidden; isolation: isolate; margin-top: 40px; background: #0B0C0E; color: #A9AFB8; }
.ft__glow { position: absolute; z-index: -1; width: 900px; height: 900px; right: -380px; top: -520px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(227, 20, 27, .20), transparent 70%); }
.ft::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .5;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 26px);
    mask-image: linear-gradient(180deg, #000, transparent 70%); }

.ft__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
    padding: 34px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ft__cta h3 { color: #fff; font: 800 clamp(24px, 3vw, 32px)/1.1 var(--display); }
.ft__cta p { margin-top: 6px; font-size: 15px; }
.ft__cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ft__btn-ghost { --bg: rgba(255, 255, 255, .06); --fg: #fff; border-color: rgba(255, 255, 255, .14); }
.ft__btn-ghost:hover { --bg: rgba(255, 255, 255, .12); }

.ft__grid { display: grid; gap: 36px; padding: 44px 0 36px; }
@media (min-width: 768px) { .ft__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.ft__logo img { width: 190px; height: auto; }
.ft__brand p { margin: 16px 0 18px; max-width: 340px; font-size: 14.5px; line-height: 1.65; }
.ft__contact { display: grid; gap: 10px; font-size: 14.5px; color: #E4E7EB; }
.ft__contact li { display: flex; align-items: center; gap: 10px; }
.ft__contact .ic { width: 18px; height: 18px; color: #FF4B51; }
.ft__contact a:hover { color: #fff; }

.ft__col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.ft__col summary::-webkit-details-marker { display: none; }
.ft__col h4 { color: #fff; font: 700 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.ft__col summary .ic { color: #6B717C; transition: transform .2s; }
.ft__col[open] summary .ic { transform: rotate(180deg); }
.ft__links { display: grid; gap: 12px; margin-top: 18px; }
.ft__links a { width: fit-content; font-size: 14.5px; color: #A9AFB8; position: relative; transition: color .2s, transform .2s var(--ease); }
.ft__links a:hover { color: #fff; transform: translateX(3px); }
@media (min-width: 768px) {
    .ft__col summary { pointer-events: none; }
    .ft__col summary .ic { display: none; }
}

.ft__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .07); }
.ft__pay-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ft__pay-note .ic { width: 16px; height: 16px; color: #FF4B51; }
.ft__cards { display: flex; flex-wrap: wrap; gap: 8px; }
.ft__cards li { height: 34px; min-width: 56px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 8px; background: #fff; font: 800 15px/1 var(--font); }
.c-visa { color: #1A1F71; font-style: italic; letter-spacing: .02em; }
.c-mc i { width: 18px; height: 18px; border-radius: 50%; background: #EB001B; }
.c-mc i + i { margin-left: -12px; background: #F79E1B; mix-blend-mode: multiply; }
.c-troy { color: #00A3A6; font-weight: 800; text-transform: lowercase; }
.c-3d { color: var(--ink); font-size: 13px !important; }
.c-3d .ic { width: 16px; height: 16px; color: var(--ok); }

.ft__bar { background: #060708; border-top: 1px solid rgba(255, 255, 255, .05); }
.ft__bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    padding-top: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 13px; color: #7D838D; }
.ft__credit { display: inline-flex; align-items: center; gap: 10px; color: #7D838D; transition: color .2s; }
.ft__credit img { width: 150px; height: auto; opacity: .85; transition: opacity .2s; }
.ft__credit:hover { color: #fff; }
.ft__credit:hover img { opacity: 1; }

@media (max-width: 767px) {
    .ft { margin-top: 24px; }
    .ft__cta { padding: 26px 0; }
    .ft__cta-btns, .ft__cta-btns .btn { width: 100%; }
    .ft__grid { gap: 0; padding: 28px 0 10px; }
    .ft__brand { padding-bottom: 22px; }
    .ft__col { border-top: 1px solid rgba(255, 255, 255, .07); }
    .ft__col summary { padding: 16px 0; }
    .ft__links { margin: 0 0 16px; }
    .ft__pay { justify-content: center; text-align: center; }
    .ft__bar-in { justify-content: center; text-align: center; }
}
/* Ödeme kartı logoları (gerçek logolar) */
.ft__card img { height: 20px; width: auto; display: block; }
.ft__card:nth-child(2) img { height: 24px; }

/* Mobil slider: kare görseller; mobil sürümü olmayan slayt telefonda gösterilmez */
@media (max-width: 767px) {
    .slider__frame { aspect-ratio: 1 / 1; }
    .slider__slide--desktop { display: none; }
}