/* Atlas.

   Mobile first, and 380 pixels is the width it was checked at: every rule below
   starts from one column and adds columns when there is room, never the other
   way round (T12).

   **There is not a colour, a font stack or a size in this file.** Every value is
   a custom property the store's design tokens fill in, so changing the palette
   in Settings restyles Atlas and a merchant's choice is never overwritten by a
   theme's opinion (F7A P6). The properties come from `layouts/base.twig`, which
   prints the resolved tokens into `:root`.

   Nothing here fetches anything from anybody else's server: no webfont
   declaration, no stylesheet pulled in from elsewhere, no image address
   (docs/06-guvenlik.md §8). A test asserts it by looking for the words, which is
   why they are described here rather than written. */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--theme-font, var(--font-body));
    font-size: var(--text-base);
    line-height: 1.65;
    /* A long word in a narrow column is the other way a phone ends up scrolling
       sideways, and it is the one no grid rule catches. */
    overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
/* A picture linked from another site (I-943): the box keeps its size and shows this tint if that site fails to answer. */
img[data-external] { background: rgba(127, 127, 127, .12); }
img[data-unsized] { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: contain; }
img[data-broken] { color: transparent; }
/* `<picture>` is inline by default, which leaves a text baseline gap under every
   image and makes the element ignore the block layout its `<img>` is sitting in.
   Every picture on this storefront is wrapped in one now (F7D K4), so the wrapper
   has to behave like the image it wraps. */
picture { display: block; }
picture > img { max-width: 100%; height: auto; display: block; }


h1, h2, h3 { font-family: var(--theme-font, var(--font-heading)); line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: var(--text-h1); letter-spacing: -.02em; }
h2 { font-size: var(--text-h3); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.muted { color: var(--color-muted); }
.small { font-size: var(--text-small); }

/* One container, one padding, everywhere. A page whose gutters disagree with
   each other reads as two pages stitched together. */
.wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}
.wrap--narrow { max-width: 70ch; }

.band { padding-block: var(--space-normal); }
.band--hero { padding-block: var(--space-loose); }
.band--hero .lede { font-size: var(--text-h4); color: var(--color-muted); max-width: 46ch; }

.eyebrow {
    margin: 0 0 .6em;
    font-size: var(--text-small);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* The top bar. It wraps rather than shrinking, because a shop name squeezed to
   three letters on a phone is worse than a shop name on its own line. */
.top { border-bottom: 1px solid var(--color-surface); }
.top__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .8em;
    padding-block: var(--space-tight);
}
.brand {
    font-family: var(--theme-font, var(--font-heading));
    font-size: var(--text-h4);
    font-weight: 650;
    text-decoration: none;
}
.top__nav a { text-decoration: none; font-size: var(--text-small); }
.top__nav a:hover { text-decoration: underline; }

.bottom {
    border-top: 1px solid var(--color-surface);
    padding-block: var(--space-normal);
    color: var(--color-muted);
    font-size: var(--text-small);
}

/* `min(..., 100%)` on every track floor: without it a 240px minimum is 240px on
   a 200px screen, and the page scrolls sideways. */
.grid {
    display: grid;
    gap: var(--space-tight);
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Left unscoped on purpose (B78, ADR-0237).

   The platform's `feature_grid` and `testimonials` sections carry `.card` too,
   so this rule does reach them -- but every declaration in it is the one the
   platform's own `.card` already makes, down to the token, so it cannot change
   a pixel of a section it was not written for. Scoping it would be three edits
   that move nothing. `CardScopeTest` holds that claim: the day the platform's
   card stops saying exactly this, the test goes red and the scope gets added
   then, for a reason rather than for symmetry. */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: var(--space-tight);
}
.card--product a { text-decoration: none; display: block; }
.card--product img,
.card--product .card__shade { border-radius: var(--radius); margin-bottom: .6em; }

.split {
    display: grid;
    gap: var(--space-normal);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    align-items: start;
}
.split__media img { border-radius: var(--radius); margin-bottom: var(--space-tight); }

.button {
    display: inline-block;
    padding: .7em 1.4em;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.button--quiet {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-muted);
}
/* The keyboard gets its own state, on every interactive thing and not only on
   links. `:focus-visible` rather than `:focus` so a mouse click leaves no ring
   behind. */
a:focus-visible, .button:focus-visible, input:focus-visible, button:focus-visible,
select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

input[type="number"] {
    width: 5em;
    padding: .5em;
    border: 1px solid var(--color-muted);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}

/* The search page's own box. The label sits on its own line above the field
   rather than beside it: beside it, a phone pushed the button onto a row of its
   own and left the field a sliver between two words. */
.search-form { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: var(--space-normal); }
.search-form__label { display: block; width: 100%; font-size: var(--text-small); color: var(--color-muted); }
.search-form input {
    font: inherit;
    padding: .6em .8em;
    border: 1px solid var(--color-muted);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    flex: 1 1 14em;
    min-width: 0;
}

/* The box in the top bar (`layouts/base.twig`). Below the breakpoint it takes a
   row of its own under the name, because a field squeezed between the name and
   the basket link is a field nobody can read what they typed in. */
.top__search { display: flex; gap: .4em; }
.top__search input {
    font: inherit;
    padding: .45em .7em;
    border: 1px solid var(--color-muted);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    min-width: 0;
}
@media (max-width: 640px) {
    .top__search { order: 3; width: 100%; }
    .top__search input { flex: 1 1 auto; }
}

/* Read by a screen reader, drawn for nobody: the top bar's field already says
   what it is in its placeholder, and a second visible "Search" beside it is
   the same word twice. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.actions { display: flex; flex-wrap: wrap; gap: .6em; margin-top: var(--space-tight); }

.crumbs { font-size: var(--text-small); color: var(--color-muted); margin-bottom: var(--space-tight); }
.crumbs span { margin-inline: .4em; }

.price { font-size: var(--text-h4); margin: 0 0 .4em; }
.price--small { font-size: var(--text-base); }

.note { color: var(--color-muted); font-size: var(--text-small); }
.note--good { color: var(--color-accent); }

.variants { list-style: none; margin: var(--space-tight) 0 0; padding: 0; }
.variants li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8em;
    padding-block: .6em;
    border-top: 1px solid var(--color-surface);
}
.variants form { display: flex; gap: .5em; }

.preview {
    margin: 0;
    padding: .7em 20px;
    text-align: center;
    font-size: var(--text-small);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.pager { display: flex; gap: 1em; margin-top: var(--space-normal); font-size: var(--text-small); }

/* ⚠ **`.pagination` BESIDE `.pager` and not instead of it** (vitrin D3-4b).
   ADR-1384 pinned `pagination` as the listing pager's permanent name and the
   listing templates write it now -- but ⚠ **`.pager` is also the product grid
   band's own nav** (`Catalog/resources/sections/product-grid.twig` writes
   `class="pager product-grid__pager"`), so a rename that *deleted* the rule
   above would have unstyled a control on the home page in order to restyle one
   on the listing. Two controls were sharing one class name; each has its own
   now, and the band's is untouched.

   ⚠ **It wraps, because the number of pages is the catalogue's.** The window's
   ceiling is eleven entries whatever the shop does (`PageWindow::AROUND`), and a
   row that scrolled sideways would hide the number a shopper is reaching for. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    margin-top: var(--space-normal);
    font-size: var(--text-small);
}

/* ⚠ **44 pixels, like the panel's own controls and the price form's button**: a
   page number on a phone is a thumb target, and a bare digit is the smallest one
   a listing has. */
.pagination__step,
.pagination__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .5em;
    border-radius: var(--radius);
}

/* ⚠ **Selected through the attribute rather than a second class** (vitrin
   D3-4b): the markup already carries `aria-current="page"` because E1 asks for
   it, and a `.pagination__current` beside it would be a second answer to one
   question -- the kind that goes out of step the day one of the two is
   forgotten. */
.pagination__number[aria-current="page"] {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

/* The gap stands in for pages and leads nowhere, so it is not a target. */
.pagination__gap { padding: 0 .2em; color: var(--color-muted); }

/* The row count, under the heading (E1). ⚠ **Pulled up against the title**,
   because it is part of the heading rather than the first line of the listing. */
.listing__count { margin: calc(0px - var(--space-tight)) 0 var(--space-normal); font-size: var(--text-small); }

/* A table is the right element for basket lines and the wrong shape for a
   phone, so below the breakpoint every row becomes a block and each cell
   carries its own label. No script, and no second markup to keep in sync. */
.lines, .totals { width: 100%; border-collapse: collapse; margin-bottom: var(--space-normal); }
.lines th, .lines td, .totals th, .totals td { text-align: left; padding: .6em 0; vertical-align: top; }
.lines thead th { font-size: var(--text-small); color: var(--color-muted); }
.lines tbody tr { border-top: 1px solid var(--color-surface); }
.totals tr { border-top: 1px solid var(--color-surface); }
.totals .total { font-size: var(--text-h4); }
.totals td { text-align: right; }

@media (max-width: 640px) {
    .lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .lines tr { display: block; padding-block: .6em; }
    .lines td { display: flex; justify-content: space-between; gap: 1em; padding: .3em 0; }
    .lines td::before { content: attr(data-label); color: var(--color-muted); font-size: var(--text-small); }
}

/* The keyboard's first stop, and invisible until it is reached. Off screen
   rather than `display: none`: a hidden element is not focusable at all, which
   would make this a link nobody can reach (F7D K8). */
.skip-link {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 100;
    padding: .6em 1.2em;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* Roughly a fingertip, on the things a finger actually aims at. Not on every
   link: a word inside a paragraph is not a target, and padding it to 44 pixels
   would tear the paragraph apart (WCAG 2.2, K8). */
.button, .top__nav a, .brand, .site-header a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Not a preference about taste. Everything this stylesheet animates is switched
   off for a reader who asked. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* What a reduced price looks like (F7E J4).

   Three parts, and none of them is a colour typed by hand: the badge takes the
   store's accent and the contrast colour that was measured against it (F7D K7),
   so a merchant who changes their palette gets a readable badge without anybody
   editing this file.

   The old price is struck through *and* says "was ..." in words. The line is
   for the eye; the words are for everything else, because a screen reader does
   not reliably announce `<s>` and two numbers side by side with nothing between
   them is a page that lies to a listener. */
.price__was { color: var(--color-muted); font-size: var(--text-small); margin-right: .4em; }
.price__unit { display: block; color: var(--color-muted); font-size: var(--text-small); font-weight: 400; }
.price__now { font-weight: 650; }
.badge {
    display: inline-block;
    margin-left: .4em;
    padding: .1em .5em;
    border-radius: var(--radius);
    font-size: var(--text-small);
    font-weight: 650;
    /* Not a word wrapped away from its number. */
    white-space: nowrap;
}
.badge--sale { background: var(--color-accent); color: var(--color-accent-contrast); }

/* -- the filter panel (vitrin D3/E1) --------------------------------------- */

/* ⚠ **Structure only.** What the panel looks like is this theme's job and the
   §8.2 round's subject; what is here is the part without which the markup would
   be dishonest -- a listing that is one column on a phone and two on a desk, and
   a `<details>` that is a button on the small screen and a heading on the wide
   one. Mobile first, like every rule above it (T12).

   ⚠ **No colour and no font value**: both come from the store's design tokens,
   so a merchant's palette restyles the panel and a test can keep looking for the
   words that must not be here. ⚠ **And no font FAMILY either, not even a
   token:** Loft pins how many times `var(--theme-font, …)` appears in its sheet
   (`ThemeFontTest`), so a seventh would have meant editing a pinned number for
   a declaration the panel does not need -- the summary inherits the page's
   voice, which is the voice E1 drew it in. */

.listing { display: grid; gap: var(--space-normal); align-items: start; }

.filters {
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    padding: var(--space-tight);
    background: var(--color-surface);
}

/* ⚠ **44 pixels, because on a phone this is the one thing a thumb aims at.**
   `display: flex` is what puts the count beside the word -- and it is also what
   takes the browser's triangle away, which is why one is drawn below. */
.filters > summary {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    min-height: 44px;
    cursor: pointer;
    font-size: var(--text-base);
    list-style: none;
}

.filters > summary::-webkit-details-marker { display: none; }

/* ⚠ **A marker drawn from borders, not written as a character** -- the lesson
   `sections/page.twig` already paid for: a glyph in `content:` is a word nobody
   can translate and a font nobody is promised (ADR-0234). Without it an open row
   and a plain heading look identical and nothing says this can be opened. */
.filters > summary::after {
    content: "";
    margin-inline-start: auto;
    width: .5em;
    height: .5em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
}

.filters[open] > summary::after { transform: rotate(-135deg); }

.filters__badge {
    min-width: 1.5em;
    padding: 0 .35em;
    border-radius: 999px;
    text-align: center;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: var(--text-small);
}

.filters__body { padding-block-start: var(--space-tight); }

.filters__clear { font-size: var(--text-small); }

.filters__group + .filters__group {
    margin-block-start: var(--space-tight);
    padding-block-start: var(--space-tight);
    border-block-start: 1px solid var(--theme-line);
}

.filters__group-title {
    margin: 0 0 var(--space-tight);
    font-size: var(--text-small);
    text-transform: uppercase;
}

.filters__options { margin: 0; padding: 0; list-style: none; }

/* 44 pixels again: these are the rows a thumb aims at. */
.filters__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-tight);
    min-height: 44px;
    text-decoration: none;
    color: inherit;
}

.filters__option--on { font-weight: 600; }

/* ⚠ **A mark, not only a weight.** A selected row whose only difference is how
   bold it is, is a selection nobody reading at a distance can see -- and the
   `aria-current` beside it is what a listener gets. */
.filters__option--on .filters__option-label::before {
    content: "";
    display: inline-block;
    width: .45em;
    height: .25em;
    margin-inline-end: .5em;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
}

.filters__count { color: var(--color-muted); font-size: var(--text-small); }

/* ⚠ **On a wide screen the panel is a box beside the list and the `<summary>`
   is its heading.** Two overrides rather than one, because browsers hide a
   closed `<details>`' body in two different ways: the old rule sets `display:
   none` on the children (an author rule beats the UA sheet whatever its
   specificity), and the current spec hides `::details-content` with
   `content-visibility`. ⚠ **Opening it with the `open` attribute instead was
   eliminated:** then the phone would start open, and E1 asks for a panel that
   starts closed there. */
@media (min-width: 60em) {
    .listing { grid-template-columns: 16rem 1fr; gap: var(--space-loose); }

    .filters > summary { cursor: default; }
    .filters > summary::after { display: none; }

    .filters > .filters__body { display: block; }

    .filters::details-content {
        content-visibility: visible;
        block-size: auto;
        overflow: visible;
    }
}

/* ⚠ **The one control in the panel that is a form**, and the only one a shopper
   has to confirm: two numbers have no moment at which they are finished. Laid out
   as a two column grid so the labels sit above their fields on a phone and the
   button spans both. */
.filters__price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-tight);
    align-items: end;
}

.filters__price-label { font-size: var(--text-small); }

/* `min-width: 0` because a grid item's default `auto` lets a number field push
   the column wider than the panel and take a horizontal scrollbar with it. */
.filters__price-field {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 0 .5em;
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}

.filters__price-basis {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: var(--text-small);
}

.filters__price-apply {
    grid-column: 1 / -1;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    cursor: pointer;
}

/* ⚠ **The labels keep their own row and the fields theirs**, rather than each
   label sitting beside its field: *Van* and *Tot* are two words of different
   lengths, and a shared row would put the two boxes at two different widths. */
.filters__price-label:nth-of-type(2) { grid-column: 2; }

/* The order, and the filters a shopper has on (vitrin D3-3 / E1)
   ------------------------------------------------------------------------
   ⚠ **No colour and no font value here either**: both come from the store's
   design tokens, so a merchant's palette restyles both controls -- and Loft
   pins how many times `var(--theme-font, …)` appears in its sheet, so a
   declaration neither control needs would have meant editing a pinned number.

   ⚠ **The sort is a sibling of the panel, not a child of it**: a control inside
   the `<details>` is a control a phone hides behind the word *"Filters"*. On a
   phone it therefore sits directly under the panel's own button, and on a wide
   screen it moves to the top of the results column -- which is the heading row
   E1 drew it on. */

.filters__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
}

.filters__sort-label { font-size: var(--text-small); }

/* `min-width: 0` and a flexible basis, because a `<select>` sized by its longest
   option is a control that pushes a phone sideways: *"Prijs: hoog naar laag"* is
   wider than the screen it has to fit on. */
.filters__sort-select {
    min-width: 0;
    flex: 1 1 8rem;
    min-height: 44px;
    padding: 0 .5em;
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}

/* ⚠ **44 pixels, like the price form's button**: with no script at all this is
   what applies the order, so it is a thumb target rather than a hint. */
.filters__sort-apply {
    min-height: 44px;
    padding: 0 .9em;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    cursor: pointer;
}

/* ⚠ **A row that wraps, because the number of chips is the shopper's**: four
   categories and a range is five, and a row that scrolled sideways would hide
   the one a shopper is looking for. */
.filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    margin: 0 0 var(--space-tight);
    padding: 0;
    list-style: none;
}

/* ⚠ **32 pixels and not 44.** These are not the panel: a chip is a shortcut
   beside the rows, and a row of 44 pixel pills on a phone is a second panel
   nobody asked for. The panel's own options stay the thumb targets. */
.filters__chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    min-height: 32px;
    padding: 0 .7em;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    font-size: var(--text-small);
}

.filters__chip-remove { color: var(--color-muted); }

/* ⚠ **The wide screen puts the order on the heading row** (E1), and it takes
   three lines rather than one because the listing is a two column grid: the
   panel keeps the left column over both rows, the order takes the top of the
   right one, and the rows follow underneath it.

   ⚠ **A second `@media` block rather than an edit to the one above**, so the
   panel's own disclosure rules and this placement stay readable apart -- and a
   merchant reading their copy sees one block per decision. */
@media (min-width: 60em) {
    .filters { grid-row: 1 / span 2; }

    .filters__sort {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    .listing__results { grid-column: 2; grid-row: 2; }
}

/* The back-in-stock form (I-715): the platform's markup under permanent class
   names, printed where product.twig puts it or at the end of the content. */
.back-in-stock {
    display: grid;
    gap: .6em;
    max-width: 32rem;
    margin: 1.5rem 0;
}
.back-in-stock__note { margin: 0; color: var(--color-muted); font-size: var(--text-small); }
.back-in-stock select,
.back-in-stock__email {
    padding: .55em .8em;
    border: 1px solid var(--color-muted);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}
.back-in-stock__consent { display: flex; gap: .5em; align-items: flex-start; font-size: var(--text-small); }
.back-in-stock__submit {
    justify-self: start;
    padding: .8em 1.6em;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    cursor: pointer;
}

/* I-1345: the card's own add form takes no room of its own. */
.product-card__add { margin: 0; }

/* I-1513: delivery promise -- the line text quiet, the mixed-basket notice a calm box (information, never an error colour). */
.delivery-text { display: block; color: var(--color-muted); font-size: var(--text-small); }
.delivery-box { border: 1px solid var(--color-muted); border-radius: var(--radius, 4px); padding: .75rem 1rem; margin: 1rem 0; color: var(--color-text); }

@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/fira-sans/fira-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/fira-sans/fira-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/fira-sans/fira-sans-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Hind Vadodara"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/hind-vadodara/hind-vadodara-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Hind Vadodara"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/hind-vadodara/hind-vadodara-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hind Vadodara"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/hind-vadodara/hind-vadodara-latin-500-normal.woff2") format("woff2"); }
/* I-1842 -- 360 Online Marketing, kaynak gorunume yakin; yalniz olculen degerler, kaynaktan kod yok. Dis font yok.
   Platformun satir ici stili bu dosyadan sonra gelir: kurallar `html body` ile baslar. */
html body { background: #fff; color: #69798d; font-family: "Hind Vadodara", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 18px; line-height: 30px; }
html body h1, html body h2, html body h3, html body h4, html body .h1, html body .h2, html body .h4 { color: #172b43; font-family: "Fira Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: 0; }
html body .h1 { font-size: 60px; line-height: 84px; }
html body .h2 { font-size: 22px; line-height: 30.8px; }
html body .h4 { font-size: 20px; line-height: 28px; }
html body .section__inner { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
html body .prose, html body .prose p, html body .split__body p { color: #69798d; }
html body a { color: #6245fe; }

/* Ust: logo, acilir menu, son oge CTA */
html body .nav-bar { background: #fff; padding-block: 12px; position: relative; z-index: 20; }
html body .nav-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: nowrap; }
html body .nav-bar__brand img { width: 220px; max-width: 220px; height: auto; display: block; }
html body .nav-bar .menu { list-style: none; margin: 0; padding: 0; }
html body .nav-bar .menu--level-1 { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
html body .nav-bar .menu--level-1 > li { position: relative; }
html body .nav-bar .menu a { color: #172b43; font-size: 13px; font-weight: 600; line-height: 20px; text-decoration: none; text-transform: uppercase; }
html body .nav-bar .menu a:hover { color: #6245fe; }
html body .nav-bar .menu--level-2 { display: none; position: absolute; left: -16px; top: 100%; min-width: 240px; padding: 12px 16px; background: #fff; border-radius: 8px; box-shadow: 0 12px 30px rgba(23, 43, 67, .14); }
html body .nav-bar .menu--level-2 li { padding-block: 6px; }
html body .nav-bar .menu--level-1 > li:hover > .menu--level-2, html body .nav-bar .menu--level-1 > li:focus-within > .menu--level-2 { display: block; }
html body .nav-bar .menu--level-1 > li:last-child > a { display: inline-block; padding: 12px 26px; border-radius: 50px; background: linear-gradient(45deg, #ffa76e, #ff7ea8); color: #fff; }

/* Dugme */
html body .btn, html body .btn--solid { background: linear-gradient(45deg, #9a9fff, #6245fe); border: 0; border-radius: 50px; color: #fff; font-size: 14px; font-weight: 600; padding: 14px 32px; text-transform: uppercase; }

/* Ic sayfa basi */
html body .section--hero { background: linear-gradient(180deg, #b865f5 0%, #d894f7 55%, #fff 100%); padding-block: 72px 96px; }
html body .section--hero .h1 { color: #fff; font-size: 44px; line-height: 60px; }

/* Ana sayfa basi: solda baslik, sagda fotograf */
html body #i1842-hero { background: #fff; padding-block: 48px 72px; }
html body #i1842-hero .section__inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 48px; text-align: left; }
html body #i1842-hero .hero__image { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 520px; object-fit: cover; border-radius: 50% 0 0 50%; }
html body #i1842-hero .h1 { color: #172b43; font-size: 60px; line-height: 84px; grid-column: 1; align-self: end; margin: 0; }
html body #i1842-hero .btn-row { grid-column: 1; align-self: start; margin-top: 24px; }

/* Servis kartlari ve haber kartlari (.card temaya kapali, .feature kullanilir) */
html body .section--grid .grid { gap: 28px; }
html body .section--grid .feature { background: #fff; border-radius: 8px; box-shadow: 0 5px 30px rgba(23, 43, 67, .08); padding: 36px 28px; text-align: center; }
html body .section--grid .feature .h4 { text-transform: uppercase; }
html body #i1842-kartlar .feature p { font-size: 16px; line-height: 26px; }
html body #news .card img, html body #news .feature img { width: 100%; height: 220px; object-fit: cover; }

/* Metin ve gorsel */
html body .split { align-items: center; gap: 48px; }
html body .split__media img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 8px; }
html body .section--logo-strip img { max-height: 72px; width: auto; object-fit: contain; }

/* Alt: tam genislik koyu zemin, dort sutun */
html body footer.page-band { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding: 72px max(24px, calc(50% - 600px)) 48px; background: #172b43; color: #fff; }
html body footer.page-band .section { padding: 0; background: none; }
html body footer.page-band .section__inner { padding: 0; max-width: none; }
html body footer.page-band .h4, html body footer.page-band h2, html body footer.page-band h3 { color: #fff; font-size: 24px; font-weight: 400; line-height: 33.6px; }
html body footer.page-band, html body footer.page-band .prose, html body footer.page-band .muted, html body footer.page-band p { color: #fff; font-size: 16px; line-height: 26px; }
html body footer.page-band a { color: #fff; font-size: 15px; text-decoration: none; min-width: 0; min-height: 24px; justify-content: flex-start; }
html body footer.page-band a:hover { text-decoration: underline; }
html body footer.page-band .menu { display: block; list-style: none; margin: 0; padding: 0; }
html body footer.page-band .menu li { padding-block: 3px; }
html body footer.page-band #i1842-sosyal, html body footer.page-band #i1842-telif { grid-column: 1 / -1; }
html body footer.page-band #i1842-telif { text-align: center; opacity: .65; font-size: 14px; }

@media (max-width: 900px) {
  html body { font-size: 16px; }
  html body .h1, html body #i1842-hero .h1 { font-size: 30px; line-height: 42px; }
  html body .section--hero .h1 { font-size: 30px; line-height: 42px; }
  html body .nav-bar__inner { flex-wrap: wrap; gap: 8px; }
  html body .nav-bar nav { width: 100%; overflow-x: auto; }
  html body .nav-bar__brand img { width: 150px; max-width: 150px; }
  html body .nav-bar .menu--level-1 { gap: 16px; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
  html body .nav-bar .menu--level-2 { display: none !important; }
  html body #i1842-hero .section__inner { grid-template-columns: 1fr; grid-template-rows: none; }
  html body #i1842-hero .hero__image { grid-column: 1; grid-row: auto; height: 260px; border-radius: 8px; margin-bottom: 24px; }
  html body footer.page-band { grid-template-columns: 1fr; padding: 48px 24px; }
}

/* Eski siteye yakinlik (JS acik olcum): buyuk daire hero, dalga zemin, logo boyutu, hamburger */
html body header.page-band { position: relative; z-index: 20; background: transparent; }
html body .nav-bar { background: transparent; }
html body #i1842-mobil { display: none; }
html body #i1842-hero { position: relative; overflow: hidden; margin-top: -110px; padding-block: 150px 210px; }
html body #i1842-hero::before { content: ""; position: absolute; left: -240px; top: 60px; width: 780px; height: 780px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #e6f2fd 0%, #f4faff 62%, rgba(255, 255, 255, 0) 72%); }
html body #i1842-hero .section__inner { position: relative; grid-template-columns: 470px 1fr; }
html body #i1842-hero .h1 { position: relative; z-index: 2; width: 560px; font-size: 42px; line-height: 58px; }
html body #i1842-hero .hero__image { width: 720px; max-width: none; height: 720px; margin-top: -130px; border-radius: 50%; box-shadow: 30px 18px 0 #2f9be0; }
html body #i1842-kartlar { position: relative; z-index: 2; margin-top: -190px; background: none; }
html body #i1842-kartlar .section__inner { max-width: 1000px; margin-inline: max(24px, calc(50% - 630px)) auto; }
html body #i1842-ajans { position: relative; }
html body #i1842-ajans img { border-radius: 0 320px 320px 0; box-shadow: 8px 8px 0 #9a9fff; }
html body #i1842-ajans::after { content: ""; display: block; width: 70%; height: 8px; margin-top: 56px; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, #2f9be0, #9a9fff, #ff8f9e); }
html body #logos .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; }
html body #logos .logos__item img { width: 190px; max-width: 190px; height: auto; max-height: none; }
@media (max-width: 900px) {
  html body #i1842-nav { display: none; }
  html body #i1842-mobil { display: block; background: #fff; }
  html body #i1842-mobil .rich-nav__wide { display: none; }
  html body #i1842-mobil .rich-nav__narrow { display: block; width: auto; overflow: visible; }
  html body #i1842-mobil .rich-nav__disclosure > ul > li:first-child { display: none; }
  html body #i1842-mobil .rich-nav__stack, html body #i1842-mobil .rich-nav__disclosure ul { list-style: none; }
  html body #i1842-mobil .nav-bar__inner { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
  html body #i1842-mobil .rich-nav__brand { order: 1; }
  html body #i1842-mobil .rich-nav__narrow { order: 2; }
  html body #i1842-mobil .rich-nav__stack > li > .rich-nav__disclosure > summary { font-size: 0; list-style: none; cursor: pointer; padding: 8px; }
  html body #i1842-mobil .rich-nav__stack > li > .rich-nav__disclosure > summary::-webkit-details-marker { display: none; }
  html body #i1842-mobil .rich-nav__stack > li > .rich-nav__disclosure > summary::before { content: "\2630"; font-size: 30px; line-height: 30px; color: #6245fe; }
  html body #i1842-mobil .rich-nav__stack > li > .rich-nav__disclosure[open] > ul { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; margin: 0; padding: 16px 24px; box-shadow: 0 12px 24px rgba(23, 43, 67, .15); }
  html body #i1842-mobil a, html body #i1842-mobil .rich-nav__disclosure summary { color: #172b43; font-size: 15px; text-decoration: none; min-width: 0; justify-content: flex-start; }
  html body #i1842-mobil .rich-nav__brand img { width: 150px; max-width: 150px; }
  html body #i1842-hero { margin-top: 0; padding-block: 24px 40px; }
  html body #i1842-hero::before { display: none; }
  html body #i1842-hero .section__inner { grid-template-columns: 1fr; }
  html body #i1842-hero .h1 { width: auto; }
  html body #i1842-hero .hero__image { width: 300px; height: 300px; margin: 0 auto 24px; border-radius: 50%; box-shadow: 14px 8px 0 #2f9be0; }
  html body #i1842-kartlar { margin-top: 0; }
  html body #i1842-kartlar .section__inner { margin-inline: auto; }
  html body #logos .logos__item img { width: 100px; max-width: 100px; }
  html body #i1842-ajans img { border-radius: 0 160px 160px 0; }
}