/* ==========================================================================
   Natsom — component layer

   Loaded after custom.css and after Lagom's theme.css, so these rules win
   without !important. Colour arrives through the bridge; this file carries
   only what a custom property cannot express: shape, rhythm, weight, mono
   assignment, and the places Lagom hard-codes a value.

   RULES
   - Colour values are ALWAYS var(--…) from the site layer. No literals.
   - Scope to `.natsom` (style.php bodyClass, lands on <body>).
   - Lagom's own rules are frequently `.lagom:not(.ticket-table) .x` = (0,3,0).
     A plain `.natsom .x` is (0,2,0) and loses SILENTLY. Where we must beat
     Lagom, the selector mirrors its shape and adds `.natsom` -> (0,4,0).
   - No !important. If a rule will not win, the selector is wrong.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Dark mode is off — belt and braces.
   The switcher is disabled in rsthemes_settings, so Lagom stops rendering it.
   These rules mean that even if the setting is flipped back by accident, no
   toggle appears.
   -------------------------------------------------------------------------- */
.natsom .theme-switcher,
.natsom .theme-switcher-box,
.natsom .dark-mode-switcher,
.natsom .switch--dark-mode,
.natsom [data-toggle="dark-mode"] {
    display: none;
}


/* --------------------------------------------------------------------------
   2. Base rhythm — the site's type treatment
   -------------------------------------------------------------------------- */
.natsom {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: var(--font-family-base);
    line-height: 1.6;
}

.natsom h1, .natsom .h1 {
    letter-spacing: -0.03em;   /* the site's display tracking */
    line-height: 1.02;
    font-weight: 700;
}

.natsom h2, .natsom h3, .natsom .h2, .natsom .h3,
.natsom .card-title, .natsom .panel-title {
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-weight: 600;
}

.natsom .card-title,
.natsom .panel-title {
    font-size: var(--type-25);
    color: var(--text-primary);
}


/* ==========================================================================
   3. MONO — labels, eyebrows and machine values

   The site uses mono for two jobs: the small uppercase eyebrow that names a
   block, and any value a machine produced (a price, a date, a hostname, an
   IP, a nameserver, an order number). Prose is never mono.

   `tnum` is on for every mono context so figures line up in a column; without
   it a table of prices wobbles.
   ========================================================================== */

/* -- 3a. Eyebrows: uppercase, tracked, mono, muted ------------------------ */
.natsom .eyebrow,
.natsom .section-subtitle,
.natsom .breadcrumb,
.natsom .page-header-subtitle {
    font-family: var(--font-mono);
    font-size: var(--type-13);
    text-transform: uppercase;
    letter-spacing: 0.16em;      /* the site's eyebrow tracking */
    font-weight: 400;
    color: var(--text-muted);
}

/* -- 3b. Labels: definition terms, form labels ------------------------------ */
.natsom dt,
.natsom .label-mono {
    font-family: var(--font-mono);
    font-size: var(--type-13);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 400;
    color: var(--text-muted);
}

/* -- 3b'. Table headers (T051 P0) ---------------------------------------------
   The site's table head is sans 13.5/600 --text-secondary, sentence case, on
   the canvas (natsom-store fiyatlar/page.tsx:135). Mono uppercase made every
   list read as a terminal; mono stays for the values in the cells. */
.natsom .table > thead > tr > th,
.natsom table.table > thead > tr > th {
    font-family: var(--font-family-base);
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-canvas);
}

/* -- 3c. Values: anything a machine produced ------------------------------ */
.natsom .mono,
.natsom .amount,
.natsom .price,
.natsom .invoice-amount,
.natsom .domain-name,
.natsom .hostname,
.natsom .dedicated-ip,
.natsom .nameserver,
.natsom .order-number,
.natsom .service-id,
.natsom code,
.natsom kbd,
.natsom samp,
.natsom .table td .amount,
.natsom td.numeric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

/* Every mono context gets lining, tabular figures. */
.natsom .eyebrow,
.natsom dt,
.natsom .table > thead > tr > th,
.natsom .status {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   4. Buttons — the site's metrics (src/components/ui/button.tsx)
      base: inline-flex, rounded-xl (12px), font-semibold
      lg: px-8 py-3.5   md: px-5 py-2.5   sm: px-4 py-2
   ========================================================================== */
.natsom .btn {
    font-family: var(--font-family-base);
    font-weight: 600;
    border-radius: 12px;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.natsom .btn:active { transform: scale(0.99); }

.natsom .btn-xs   { padding: 6px 12px;  border-radius: 10px; font-size: var(--type-13); }
.natsom .btn-sm   { padding: 8px 16px;  font-size: var(--type-13); }
.natsom .btn-lg   { padding: 14px 32px; font-size: var(--type-20); }

/* The one loud action. Copper is its only home besides the focus ring. */
.natsom .btn-primary {
    background-color: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
}
.natsom .btn-primary:hover,
.natsom .btn-primary:focus,
.natsom .btn-primary:active {
    background-color: var(--action-primary-bg-hover);
    border-color: var(--action-primary-bg-hover);
    color: var(--action-primary-fg);
}

/* Secondary / default = ghost outline. Never a second fill. */
.natsom .btn-default,
.natsom .btn-secondary,
.natsom .btn-outline {
    background-color: transparent;
    border: 1px solid var(--action-secondary-border);
    color: var(--action-secondary-fg);
}
.natsom .btn-default:hover,
.natsom .btn-secondary:hover,
.natsom .btn-outline:hover {
    background-color: var(--action-ghost-bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* No focus ring, anywhere.
 *
 * The copper halo was 4px of brand colour thrown around whatever had focus. On
 * a bordered field it landed outside a box that already darkens its own border,
 * so an input wore two rings at once and read as an error state on a field the
 * customer had merely tapped. Removed from inputs first, then from everything,
 * by decision.
 *
 * ⚠ THE COST, STATED PLAINLY: keyboard and screen-reader users now have no
 * visible focus indicator on links and buttons. Inputs and selects still show
 * Lagom's focus border (--input-focus-border-color), so forms remain navigable;
 * links and buttons do not. If that is ever revisited, the fix is a restrained
 * indicator — a 2px outline in --border-strong — not the copper ring again. */
.natsom :where(a, button, input, textarea, select, summary, [tabindex], [role="button"]):focus,
.natsom :where(a, button, input, textarea, select, summary, [tabindex], [role="button"]):focus-visible {
    outline: none;
    box-shadow: none;
}

/* Bootstrap routes button focus through its own token, which this theme had
   pointed back at the copper ring — so clearing the rule above without this
   would have left buttons ringed anyway. */
.natsom {
    --btn-focus-box-shadow: none;
    --input-btn-focus-box-shadow: none;
}


/* ==========================================================================
   5. Ink surfaces — flat, zero gradient

   `.on-ink` re-points the semantic layer (site-tokens.css), so text, borders
   and the action triad inside an Ink panel are already correct. These rules
   only paint the ground and kill any gradient Lagom would draw.
   ========================================================================== */
.natsom .on-ink,
.natsom .main-footer,
.natsom .primary-block,
.natsom .panel-summary-primary,
.natsom .banner-primary,
.natsom .banner-secondary {
    background: var(--canvas-dark);
    background-image: none;
    color: var(--text-primary);
}

.natsom .on-ink a:not(.btn),
.natsom .main-footer a:not(.btn) { color: var(--text-link); }

/* Light popovers inside an ink surface.

   `.on-ink` — and .main-footer, .utility-strip, .service-card,
   .panel-summary-primary — redefines the WHOLE token block for dark grounds.
   Lagom's dropdown panels paint themselves white but render inside that
   subtree, so they inherit the dark values and paint them onto white. Live
   symptoms in the footer language switcher: links resolve --text-link to
   #9DCFDF (1.67:1 on white, WCAG AA wants 4.5), plain text resolves
   --text-primary to #EFECE9 (invisible), and the search box's focus ring
   resolves --focus-ring to a dark 2px halo ringed by accent-400 orange.

   Values mirror the light block in site-tokens.css. They are restated rather
   than reused because that file is GENERATED from the marketing site's tokens
   and must not be hand-edited — keep the two in step if the mapping changes.

   `color` and --focus-ring are re-declared alongside the tokens, not just the
   tokens they read: the ink block declares both ON the ink host, where their
   var()s resolve against the dark values, and what inherits down here is the
   already-resolved result. Redefining --bg-surface/--border-focus alone moves
   nothing; the declaration has to be repeated so it re-resolves in this scope.

   Scoped to every .dropdown-menu/.popover rather than to the ink hosts: on a
   light ground these are the values already in force, so it is a no-op there,
   and no dropdown in this theme is dark by design. */
.natsom .dropdown-menu,
.natsom .popover {
    /* T051 P0: mirrors the re-synced light block (natsom-store 37e55b2). White
       is the light block's own literal: the ink block redefines every semantic
       alias, so no var() still holds the light surface inside it. The --copy-*
       anchors are not redefined there, so they can be read. */
    --bg-surface:      #FFFFFF;
    --text-primary:    var(--brand-950);
    --text-secondary:  var(--copy-secondary);
    --text-muted:      var(--copy-muted);
    --text-link:       var(--brand-700);
    --text-link-hover: var(--brand-900);
    --border-focus:    var(--accent-600);

    /* Repeated verbatim from site-tokens.css so it re-resolves against the
       light --bg-surface/--border-focus set just above. */
    --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--border-focus);

    color: var(--text-primary);
}

/* Language switcher: no search box.

   Two languages. A filter over a two-item list is furniture, and it was the
   source of every visual defect in this panel — an autofocused field painting
   a heavy focus box on open, its halo clipped square by the panel's
   `overflow: hidden` + 16px radius, and an icon column that did not line up
   with the flags below it.

   Lagom has no setting for this: of the 72 rows in rsthemes_settings the only
   language-related ones are enable_hreflang_links, custom_language_list and
   custom_available_languages, and the search header in
   includes/common/language-chooser-dropdown.tpl is rendered unconditionally.

   CSS rather than the overwrite hook that file offers on its first line
   (includes/common/overwrites/language-chooser-dropdown.tpl, the same device
   as the ordersummary overwrite): hiding two elements does not justify forking
   a 70-line vendor partial that would then go stale silently on a Lagom
   update. Nothing in the DOM needs the input to exist either — lagom-app.js
   reaches it only through jQuery collections (`.on`, `.focus`, `.val`,
   `.trigger`), every one of which is a safe no-op on an empty set, and the
   keyup handler cannot fire without the field. Verified: no JS errors on open,
   and focus stays on the toggle rather than landing in a hidden input. */
.natsom .dropdown-language-search .dropdown-header,
.natsom .dropdown-language-search .nav-divider {
    display: none;
}

/* Anything Lagom paints with a gradient literal, flattened. */
.natsom [class*="gradient"],
.natsom .main-header-banner,
.natsom .site-banner { background-image: none; }


/* --------------------------------------------------------------------------
   6. Global shell — utility strip, navbar, footer
   -------------------------------------------------------------------------- */
.natsom .utility-strip {
    background: var(--canvas-dark);
    color: var(--text-muted);   /* an ink host: resolves to the dark muted ink */
    font-family: var(--font-mono);
    font-size: var(--type-13);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--brand-900);
}
.natsom .utility-strip-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 9px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.natsom .utility-strip a { color: var(--text-muted); text-decoration: none; }
.natsom .utility-strip a:hover { color: var(--brand-200); }

.natsom .app-nav {
    border-bottom: 1px solid var(--ns-line);
    box-shadow: none;
    background: var(--ns-card);
}

/* ---- Primary nav -----------------------------------------------------------
   SIZED BY VARIABLE, NOT BY SELECTOR. Lagom drives the nav link entirely from
   custom properties —

     .lagom-layout-condensed .app-nav-menu .menu>li>a:not(.btn) {
         padding: var(--app-nav-top-condensed-menu-link-padding-v)
                  var(--app-nav-top-condensed-menu-link-padding-h);
         height:  var(--app-nav-header-height);
     }

   — at (0,4,2). A rule of ours written against the same element loses on class
   count, and winning the specificity race would mean restating Lagom's whole
   link geometry. Re-pointing the variables is the same move custom.css already
   makes for Lagom's roots: set the input, let the vendor cascade carry it.

   Worth recording: the rules here previously read `.app-nav-menu > li > a`,
   which matches NOTHING — Lagom nests the list as
   .app-nav-menu > .container > ul.menu-primary > li > a — so the whole nav
   block was dead and the bar rendered Lagom defaults (17px type, 16px padding,
   a 74px link). Verified in the browser: `.app-nav-menu > li` returns 0 nodes.

   Proportions follow the reference: a 36px control at 14px rather than a 74px
   one at 17px, so the bar reads as application chrome, not a website header. */
/* Load marker. configureproduct.js refuses to run unless it can read this,
   because every enhancement it makes assumes this stylesheet is present: it
   builds the OS radio cards and lets CSS hide the vendor <select>, and it fills
   the root password and lets CSS remove the field. With the JS live and this
   file absent, both halves show at once — which is exactly what production
   rendered on 2026-08-22, because the hook loads the script on cart pages
   regardless of which style is active while Lagom only serves a style's CSS
   when that style IS active. */
:root { --natsom-css: 1; }

.natsom .app-nav {
    /* 8px rhythm. A 36px control in a 52px row leaves 8px above and below; the
       logo at 28px leaves 12px. The utility row is deliberately half the nav
       row's height — it is subordinate chrome, and giving it equal weight was
       what made the header read as two competing bars. */
    --app-nav-header-height: 36px;                       /* nav control height */
    --app-nav-logo-height: 28px;
    --app-nav-top-condensed-logo-spacing: 24px;
    --app-nav-top-condensed-menu-link-padding-v: 0px;
    --app-nav-top-condensed-menu-link-padding-h: 12px;
    --app-nav-top-menu-link-padding-v: 0px;
    --app-nav-top-menu-link-padding-h: 12px;
    --app-nav-top-menu-link-font-size: 14px;
    --app-nav-top-menu-link-font-weight: 500;
    --app-nav-top-menu-link-line-height: 20px;
    --app-nav-top-menu-link-color: var(--ns-text-2);
    --app-nav-top-menu-link-hover-color: var(--ns-text);
    --app-nav-top-bg: var(--ns-card);
    --app-nav-top-border-bottom: 1px solid var(--ns-line);
}

/* ---- Header rows -----------------------------------------------------------
   Two rows, deliberately unequal. Lagom gives both the same weight, which is
   why the bar read as two stacked navs rather than as chrome above content. */
@media (min-width: 992px) {
    .natsom .app-nav-menu > .container { min-height: 52px; }

    /* The utility row's height follows its controls, so shrinking the row means
       shrinking the targets: 32px there against 36px in the nav row. Combined
       with the smaller type below, that is what makes it read as chrome above
       the navigation rather than as a second nav. */
    .natsom .app-nav { --top-nav-link-height: 32px; }
    .natsom ul.top-nav > li > a:not(.btn) { height: var(--top-nav-link-height); }

    /* The nav belongs NEXT TO the logo, not at the far end of the bar. Lagom
       lays this container out as `space-between` with exactly two children, so
       the list is thrown against the right edge — at 1920 that opened a 354px
       void between the wordmark and "Panel", and the whole header read as
       right-weighted. Pack from the start and let the CTA claim the right on
       its own. */
    .natsom.lagom-layout-condensed .app-nav-menu > .container {
        justify-content: flex-start;
    }
    .natsom.lagom-layout-condensed .app-nav-menu > .container > ul.menu-primary {
        margin-left: 0;
        /* Must GROW, not just start at the left. Lagom leaves the list at
           `flex: 0 1 auto`, so it is only as wide as its items and the CTA's
           `margin-left: auto` has nothing to push against — the button stopped
           370px short of the container edge. */
        flex: 1 1 auto;
    }

    /* A hairline after the wordmark, as in the reference: it separates identity
       from navigation without spending a whole column of empty space on it. */
    .natsom.lagom-layout-condensed .app-nav-menu > .container > .logo {
        padding-right: 24px;
        border-right: 1px solid var(--ns-line-soft);
    }

    /* Items sit on a 2px gap so the hover grounds read as separate targets
       rather than one continuous strip. */
    .natsom .app-nav-menu ul.menu-primary {
        gap: 2px;
        align-items: center;
    }

    /* The primary action is the only thing that belongs at the far right.
       Lagom hands `margin-left: auto` to the first `.is-right` item after a
       normal one — here that is Store, not the button. With the list at content
       width that rule had nothing to act on; now that the list grows it does,
       and it stranded "Ürünler" beside the CTA as if it were a second action.
       Cancel the margin only: the separate `.is-right` rules that make the mega
       dropdown open leftwards are left alone. */
    .natsom.lagom-layout-top .app-nav-menu .menu > li:not(.is-right) + .is-right:not(.nav-item-btn) {
        margin-left: 0;
    }
    /* Mirrors the rule that actually sets this — Lagom's
       `li:not(.nav-item-btn)+li.nav-item-btn` at (0,5,2), which hands the
       button a flat 12px and beat a plainer rule of ours. */
    .natsom.lagom-layout-condensed .app-nav-menu .menu li:not(.nav-item-btn) + li.nav-item-btn {
        margin-left: auto;
        padding-left: 24px;
    }
}

/* The hover GROUND is ours — Lagom only exposes a link colour, not a hover
   background, and the reference's nav buttons fill on hover. */
.natsom .app-nav-menu ul.menu-primary > li > a {
    border-radius: var(--ns-r-sm);
    transition: color .12s ease, background-color .12s ease;
}
.natsom .app-nav-menu ul.menu-primary > li > a:hover,
.natsom .app-nav-menu ul.menu-primary > li.open > a {
    background-color: var(--ns-paper);
    color: var(--ns-text);
}

/* Active is the ink underline from the reference, not a colour change alone.
   It sits on the item rather than the link so it clears the link's own
   padding box and lines up with the bar's baseline. */
.natsom .app-nav-menu ul.menu-primary > li.active > a {
    color: var(--ns-text);
    position: relative;
}
/* Desktop only. Below Lagom's 992px nav breakpoint the same list becomes a
   vertical drawer, where a full-width bar under the active row reads as a
   divider rather than as an indicator — and Lagom already marks the active row
   there with a ground of its own. */
@media (min-width: 992px) {
    .natsom .app-nav-menu ul.menu-primary > li.active > a::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -10px;
        height: 2px;
        border-radius: 2px;
        background: var(--ns-ink);
    }
}

/* Tabs keep the ice underline — they are page-level, not chrome. */
.natsom .nav-tabs > li.active > a,
.natsom .nav-tabs .nav-link.active {
    color: var(--text-brand);
    font-weight: 600;
    border-bottom: 2px solid var(--text-brand);
}

/* ---- Live counts -----------------------------------------------------------
   Markup comes from includes/hooks/natsom_navbar.php via the MenuItem badge
   API, so there is no template fork behind this. Suppressed at zero by the
   hook, so a pill on screen always means there is something to act on. ------- */
.natsom .natsom-nav-count {
    /* The label and the count are separate boxes in a flex link, and Lagom sets
       no gap between them — they rendered edge to edge, the digit touching the
       last letter. Spaced on the badge itself rather than with a `gap` on the
       link, because the link also holds the dropdown caret and Lagom already
       gives that its own 6px; a gap would have doubled it. */
    margin-left: 6px;
    font-family: var(--ns-font-mono);
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 99px;
    background: var(--ns-paper);
    color: var(--ns-text-2);
    border: 1px solid var(--ns-line);
}
.natsom .natsom-nav-count.is-due {
    background: var(--ns-copper-soft);
    color: var(--ns-copper);
    border-color: var(--ns-copper-line);
}

/* ---- Dropdown panels -------------------------------------------------------
   The reference treats these as application menus: a tight card with padded
   rows that highlight on their own radius, not a bordered list. --------------- */
/* Selector mirrors Lagom's own and adds .natsom, the pattern already recorded
   for the status badges. Lagom sets the panel inset as a literal here —
   `.lagom-layout-top .app-nav-menu .menu>li .dropdown-menu { padding: 6px 0 }`
   at (0,4,1) — so there is no variable to re-point and (0,3,0) of our own
   loses. Without the horizontal inset the row hover runs edge to edge and the
   panel's 14px radius clips that highlight square at the corners. */
.natsom.lagom-layout-top .app-nav-menu .menu > li .dropdown-menu {
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r-lg);
    box-shadow: var(--elev-2);
    padding: 6px;
}
.natsom .app-nav .dropdown-menu > li > a,
.natsom .app-nav .dropdown-menu .dropdown-menu-item > a {
    border-radius: var(--ns-r-sm);
    padding: 9px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ns-text);
}
.natsom .app-nav .dropdown-menu > li > a:hover,
.natsom .app-nav .dropdown-menu .dropdown-menu-item > a:hover {
    background: var(--ns-paper);
}
.natsom .app-nav .dropdown-menu .nav-divider {
    height: 1px;
    background: var(--ns-line-soft);
    margin: 6px 4px;
}

/* ---- Primary action --------------------------------------------------------
   Kept as whatever WHMCS has configured for the button slot (today: Yeni
   Destek Bildirimi). The reference puts "Yeni sipariş" here, but which action
   is primary is a product decision and not a style one, so the slot is styled
   and its content left alone. ------------------------------------------------ */
.natsom .app-nav-menu ul.menu-primary > li.nav-item-btn > a {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--ns-r-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.natsom .app-nav-menu ul.menu-primary > li.nav-item-btn > a::after { content: none; }

/* ---- Utility row: cart, notifications, account -----------------------------
   Same split as the primary nav. Colour and padding come from Lagom's own
   variables; the hover GROUND does not, because Lagom hard-sets
   `background: transparent` on these links — the reference fills them instead.

   The account chip is a deliberate simplification. The reference draws an
   avatar with the customer's initials; Lagom renders a user glyph, and
   inventing an initials system would mean new markup for what is a purely
   decorative difference. The glyph keeps the reference's WEIGHT — an ice
   ground at 30px with the brand colour on it — without a component behind it
   that has to derive, cache and fall back on names. -------------------------- */
.natsom .app-nav {
    --top-nav-link-padding-v: 0px;
    --top-nav-link-padding-h: 8px;
    --top-nav-link-color: var(--ns-text-2);
    --top-nav-link-hover-color: var(--ns-text);
    --top-nav-link-active-color: var(--ns-text);
    --top-nav-link-icon-color: var(--ns-text-3);
    --top-nav-link-icon-hover-color: var(--ns-text);
}

/* :not(.btn) mirrors Lagom's own guard so this lands at (0,4,3) and clears its
   transparent-background rule rather than tying with it. */
/* Cosmetics apply at every width; SIZE does not. On mobile this same list is
   the main bar's icon row, where Lagom sets its own touch targets — and the
   badges are absolutely positioned against them, so shrinking the links there
   pushed the cart's "1" four pixels into the bell beside it. */
.natsom ul.top-nav > li > a:not(.btn) {
    border-radius: var(--ns-r-sm);
    font-weight: 500;
    transition: color .12s ease, background-color .12s ease;
}

/* A hair of separation so an absolutely-positioned badge never lands on its
   neighbour. Cheap at both breakpoints and it fixes the collision at source. */
.natsom ul.top-nav {
    gap: 8px;
}

@media (min-width: 992px) {
    .natsom ul.top-nav > li > a:not(.btn) {
        height: var(--top-nav-link-height, 36px);
        font-size: 13px;
    }
}
.natsom ul.top-nav > li > a:not(.btn):hover,
.natsom ul.top-nav > li.show > a:not(.btn) {
    background: var(--ns-paper);
}

/* Account: the glyph becomes the chip. */
.natsom ul.top-nav li.my-account > a:not(.btn) > i {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--ns-ice-soft);
    color: var(--ns-ice-deep);
    margin-right: 8px;
}
.natsom ul.top-nav li.my-account .active-client .item-text {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ns-text);
}

/* Counts on the utility row read as the reference's copper marker rather than
   Lagom's default badge palette. */
.natsom ul.top-nav .nav-badge.badge {
    font-family: var(--ns-font-mono);
    font-size: 10px;
    font-weight: 600;
    background: var(--ns-copper);
    color: var(--ns-card);
}
.natsom ul.top-nav .notification-icon-container > .badge-dot {
    background: var(--ns-copper);
}

/* Sidebar active — ice-blue at a ~9% tint. */
.natsom .sidebar .list-group-item.active,
.natsom .sidebar-nav .active > a,
.natsom .list-group-item.active {
    background-color: color-mix(in srgb, var(--text-brand) 9%, transparent);
    color: var(--text-brand);
    border-left: 2px solid var(--text-brand);
}

.natsom .footer-nav a,
.natsom .footer-site-map a { font-weight: 400; transition: color .15s ease; }
/* T051 P0: the site's legal row is 13.5px sans, not mono (mono is for
   amounts, IDs and codes). The footer is light (end of file), so the alias
   reads the light muted ink. */
.natsom .footer-copyright {
    font-family: var(--font-family-base);
    font-size: 13.5px;
    color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   7. Cards, tables, pagination
   -------------------------------------------------------------------------- */
.natsom .card,
.natsom .panel,
.natsom .table-container { border-radius: 16px; }
.natsom .table-container { overflow: hidden; }

.natsom .table > thead > tr > th { border-bottom: 1px solid var(--border-subtle); }
.natsom .table > tbody > tr > td {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--type-14);
}
.natsom .table > tbody > tr:hover > td { background-color: var(--bg-canvas); }
.natsom .table > tbody > tr[data-url] { cursor: pointer; }

.natsom .pagination > li > a,
.natsom .pagination > li > span {
    border-radius: 10px;
    border-color: var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-family-base);   /* T051 P0: controls are sans; digits stay tabular */
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.natsom .pagination > li > a:hover {
    background-color: var(--action-ghost-bg-hover);
    color: var(--text-link);
}
.natsom .pagination > .active > a,
.natsom .pagination > .active > span,
.natsom .pagination > .active > a:hover {
    background-color: color-mix(in srgb, var(--text-brand) 9%, transparent);
    border-color: var(--text-brand);
    color: var(--text-brand);
}

.natsom .no-data-table { padding: 64px 24px; }
.natsom .no-data-table-title { color: var(--text-primary); font-weight: 600; }
.natsom .no-data-table-description { color: var(--text-muted); }


/* ==========================================================================
   8. Status badges

   Grouped by MEANING, not by Lagom's default colour: an ended service is not
   an error, and colouring it red trains people to ignore red.

   T051 P0 — the site's Badge (natsom-store ui/badge.tsx): pill, sans
   11.5/600, dot + text + colour (never colour alone). Five meanings:
     success  doing its job            paid, active, answered, delivered
     warning  waiting on the customer  unpaid, overdue, payment pending
     info     waiting on us            open, customer-reply, pending, in progress
     danger   wrong, customer can act  suspended, fraud, collections
     neutral  over, not broken         cancelled, closed, terminated, expired
   Info is the brand tint (the site has no info ramp, deliberately).

   Selector mirrors Lagom's `.lagom:not(.ticket-table) .status-x` and adds
   `.natsom` so it wins on specificity, keeping the ticket-table exclusion.
   ========================================================================== */
.lagom.natsom:not(.ticket-table) .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-family-base);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    white-space: nowrap;
    background-color: var(--bg-sunken);
    color: var(--text-secondary);
}
.lagom.natsom:not(.ticket-table) .status:before {
    width: 6px; height: 6px;
    border-radius: 999px;
    background-color: currentColor;
    flex: 0 0 auto;
}

/* success: doing its job */
.lagom.natsom:not(.ticket-table) .status-active,
.lagom.natsom:not(.ticket-table) .status-paid,
.lagom.natsom:not(.ticket-table) .status-completed,
.lagom.natsom:not(.ticket-table) .status-accepted,
.lagom.natsom:not(.ticket-table) .status-delivered,
.lagom.natsom:not(.ticket-table) .status-answered {
    background-color: var(--bg-success-tint);
    color: var(--text-success);
}
/* warning: waiting on the customer */
.lagom.natsom:not(.ticket-table) .status-unpaid,
.lagom.natsom:not(.ticket-table) .status-overdue,
.lagom.natsom:not(.ticket-table) .status-payment-pending,
.lagom.natsom:not(.ticket-table) .status-grace,
.lagom.natsom:not(.ticket-table) .status-draft,
.lagom.natsom:not(.ticket-table) .status-on-hold,
.lagom.natsom:not(.ticket-table) .status-onhold {
    background-color: var(--bg-warning-tint);
    color: var(--text-warning);
}
/* info: waiting on us */
.lagom.natsom:not(.ticket-table) .status-open,
.lagom.natsom:not(.ticket-table) .status-customer-reply,
.lagom.natsom:not(.ticket-table) .status-pending,
.lagom.natsom:not(.ticket-table) .status-pendingtransfer,
.lagom.natsom:not(.ticket-table) .status-pending-transfer,
.lagom.natsom:not(.ticket-table) .status-pending-registration,
.lagom.natsom:not(.ticket-table) .status-inprogress,
.lagom.natsom:not(.ticket-table) .status-in-progress {
    background-color: var(--bg-brand-tint);
    color: var(--text-brand);
}
/* danger: wrong, and the customer can act */
.lagom.natsom:not(.ticket-table) .status-suspended,
.lagom.natsom:not(.ticket-table) .status-fraud,
.lagom.natsom:not(.ticket-table) .status-collections {
    background-color: var(--bg-danger-tint);
    color: var(--text-danger);
}
/* neutral: over, not broken */
.lagom.natsom:not(.ticket-table) .status-terminated,
.lagom.natsom:not(.ticket-table) .status-cancelled,
.lagom.natsom:not(.ticket-table) .status-refunded,
.lagom.natsom:not(.ticket-table) .status-expired,
.lagom.natsom:not(.ticket-table) .status-transferred-away,
.lagom.natsom:not(.ticket-table) .status-transferredaway,
.lagom.natsom:not(.ticket-table) .status-closed,
.lagom.natsom:not(.ticket-table) .status-lost,
.lagom.natsom:not(.ticket-table) .status-dead {
    background-color: var(--bg-sunken);
    color: var(--text-secondary);
}

/* Ticket rows carry no status class: Lagom rewrites WHMCS's
   `<span style="color:#hex">` into `<span class="status" style="--status-color:#hex">`
   (supportticketslist.tpl:180-190, clientareahome), and the hex is the
   per-status colour in Setup > Support > Ticket Statuses (written with and
   without a space after the colon: list vs dashboard widget). The meaning is
   recovered from those WHMCS default colours (checked read-only on prod
   before release; the handoff carries the query). An unknown colour falls
   back to the neutral base above, never to the admin hex. */
.lagom.natsom .status[style*="--status-color:#779500"],
.lagom.natsom .status[style*="--status-color: #779500"],
.lagom.natsom .status[style*="--status-color:#ff6600"],
.lagom.natsom .status[style*="--status-color: #ff6600"],
.lagom.natsom .status[style*="--status-color:#cc0000"],
.lagom.natsom .status[style*="--status-color: #cc0000"] {
    background-color: var(--bg-brand-tint);
    color: var(--text-brand);
}
.lagom.natsom .status[style*="--status-color:#000000"],
.lagom.natsom .status[style*="--status-color: #000000"] {
    background-color: var(--bg-success-tint);
    color: var(--text-success);
}
.lagom.natsom .status[style*="--status-color:#224488"],
.lagom.natsom .status[style*="--status-color: #224488"] {
    background-color: var(--bg-warning-tint);
    color: var(--text-warning);
}
.lagom.natsom .status[style*="--status-color:#888888"],
.lagom.natsom .status[style*="--status-color: #888888"] {
    background-color: var(--bg-sunken);
    color: var(--text-secondary);
}


/* ==========================================================================
   9. Login — left panel mirrors the site hero
      eyebrow (mono, uppercase) + two-line heading + metric rail, flat Ink,
      vertically centred. Markup: core/pages/login/natsom/login.tpl
   ========================================================================== */
.natsom .login-ink-panel {
    background: var(--canvas-dark);
    background-image: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 56px;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.natsom .login-ink-panel .hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--type-13);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-brand);
    margin-bottom: 24px;
}
.natsom .login-ink-panel .hero-title {
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0 0 32px;
}
.natsom .login-ink-panel .hero-title .line-2 {
    display: block;
    color: var(--text-brand);          /* ice-blue second line, as on the site */
}
.natsom .login-ink-panel .hero-stats {
    display: grid;
    gap: 14px;
    border-left: 1px solid var(--border-default);
    padding-left: 32px;
    margin: 0;
}
.natsom .login-ink-panel .hero-stats dt {
    font-family: var(--font-mono);
    font-size: var(--type-16);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primary);
}
.natsom .login-ink-panel .hero-stats dd {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 2px 0 0;
}
/* The ghost wordmark, exactly as the site's hero carries it. */
.natsom .login-ink-panel .hero-ghost {
    position: absolute;
    right: -4rem; top: -3rem;
    font-size: clamp(220px, 30vw, 420px);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: var(--text-primary);
    opacity: 0.028;
    pointer-events: none;
    user-select: none;
}


/* ==========================================================================
   10. Service card — flat Ink, mono hostname, spec row, no icon
   ========================================================================== */
.natsom .service-card {
    background: var(--canvas-dark);
    background-image: none;
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 24px;
    display: grid;
    gap: 14px;
}
.natsom .service-card .service-name {
    font-size: var(--type-20);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.natsom .service-card .service-host {
    font-family: var(--font-mono);
    font-size: var(--type-14);
    color: var(--text-brand);
    word-break: break-all;
}
.natsom .service-card .service-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-default);
}
.natsom .service-card .service-specs div { display: grid; gap: 2px; }
.natsom .service-card .service-specs dt {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.natsom .service-card .service-specs dd {
    font-family: var(--font-mono);
    font-size: var(--type-14);
    color: var(--text-primary);
    margin: 0;
}
.natsom .service-card .service-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-default);
}


/* --------------------------------------------------------------------------
   11. UA defaults
   Elements the browser paints with its own colours when no author rule
   applies. <hr> is the common one — it renders at the UA grey (#808080) and
   shows up as an off-palette colour on any page that uses a rule.
   -------------------------------------------------------------------------- */
.natsom hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--border-subtle);
    background-color: transparent;
    opacity: 1;
}

.natsom mark {
    background-color: var(--bg-accent-tint);
    color: var(--text-accent);
}

.natsom fieldset { border-color: var(--border-subtle); }
.natsom legend   { color: var(--text-muted); }

.natsom ::placeholder { color: var(--text-disabled); opacity: 1; }

.natsom :is(th, td) { border-color: var(--border-subtle); }


/* ==========================================================================
   12. configureproduct — order form

   Paired with core/styles/natsom/assets/js/configureproduct.js. Every selector
   here styles markup that script creates, so if the script no-ops (a Lagom
   selector changed) none of this applies and the page falls back to stock —
   which is the intended failure mode, not a bug.
   ========================================================================== */

/* -- Spec grid ------------------------------------------------------------
   Superseded by §14, which rebuilt the strip as a bordered single row. The
   rules that lived here are gone rather than overridden: the one property §14
   had no reason to restate — a 2px border-left, from when each spec was a
   rule-marked item rather than a table cell — kept painting a second divider
   down every cell. Tabular figures moved to §14 with it. -------------- */

/* -- Advanced disclosure --------------------------------------------------- */
.natsom .natsom-advanced {
    margin-top: var(--spacing-2x);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--spacing-2x);
}

.natsom .natsom-advanced > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1x);
    font-family: var(--font-mono);
    font-size: var(--type-13);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    transition: color .15s ease;
}

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

.natsom .natsom-advanced > summary::before {
    content: "";
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.natsom .natsom-advanced[open] > summary::before { transform: rotate(90deg); }
.natsom .natsom-advanced > summary:hover        { color: var(--text-link); }

.natsom .natsom-advanced-body { margin-top: var(--spacing-2x); }

/* -- Billing cycle: the per-month equivalent ------------------------------- */
.natsom .natsom-permonth {
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: var(--type-13);
    font-weight: 400;
    color: var(--text-muted);
}

/* -- Order summary: subtotal / KDV / gross -------------------------------- */
.natsom .summary-item-subtotal .name,
.natsom .summary-item-tax .name {
    font-family: var(--font-mono);
    font-size: var(--type-13);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.natsom .summary-item-subtotal .item-value,
.natsom .summary-item-tax .item-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* -- Trust markers -------------------------------------------------------
   Removed. The static "14 gün / %99,9 / ≤1 saat" rail was hard-coded copy in
   the summary and has been taken out of ordersummary.tpl, so the rules that
   styled it matched nothing. ------------------------------------------- */


/* ==========================================================================
   13. OS field — radio cards grouped by distribution family

   Built by configureproduct.js. The original <select> is clipped, not removed:
   order.js binds recalctotals() to every select in the form, and removing it
   kills the summary refresh silently.

   The selected state reuses Lagom's OWN panel variables rather than
   re-deriving a colour, so these chips and the billing-cycle cards can never
   drift apart:
       --panel-active-border-color  ->  --input-focus-border-color
       --panel-active-bg            ->  --ui-block-bg-form
   ========================================================================== */

/* Clipped, not hidden: display:none would drop the select from the form's
   serialisation path in some browsers and removes it from a11y tooling. */
.natsom .natsom-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.natsom .natsom-os {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;   /* fieldset defaults to min-content and breaks grid children */
}

.natsom .natsom-os > legend {
    display: block;
    width: auto;
    padding: 0;
    margin-bottom: var(--spacing-1x);
    border: 0;
    font-size: var(--font-size-base);
    color: var(--text-body-color);
    line-height: 1.4;
}

.natsom .natsom-os-grid {
    display: grid;
    /* 180px fits all four families on one row at the form's width; below that
       auto-fit wraps rather than squeezing the version chips. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-1x);
}

.natsom .natsom-os-family {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--spacing-2x);
    background: var(--bg-elevated);
    display: grid;
    gap: var(--spacing-1x);
    align-content: start;
}

.natsom .natsom-os-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-1x);
    min-width: 0;
}

.natsom .natsom-os-logo {
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.natsom .natsom-os-logo svg { width: 100%; height: 100%; display: block; }

.natsom .natsom-os-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-heading-color);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.natsom .natsom-os-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* The chip. Mono, because a version number is a machine value. */
.natsom .natsom-os-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: var(--font-size-sm);
    color: var(--text-body-color);
    background: transparent;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* The native input stays in the accessibility tree and keeps arrow-key
   navigation; it is only visually replaced by the chip itself. */
.natsom .natsom-os-chip input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
    pointer-events: none;
}

.natsom .natsom-os-chip::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    flex: 0 0 auto;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.natsom .natsom-os-chip:hover {
    border-color: var(--border-strong);
    background: var(--action-ghost-bg-hover);
}

.natsom .natsom-os-chip.is-selected {
    border-color: var(--panel-active-border-color);
    background: color-mix(in srgb, var(--text-brand) 9%, transparent);
    color: var(--text-heading-color);
}

.natsom .natsom-os-chip.is-selected::before {
    border-color: var(--panel-active-border-color);
    background: var(--panel-active-border-color);
    box-shadow: inset 0 0 0 2px var(--bg-elevated);
}

/* Keyboard focus lands on the hidden input; surface it on the chip. */
.natsom .natsom-os-chip:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

/* Flat fallback — used when no family holds more than one version, i.e. when
   grouping would communicate nothing. */
.natsom .natsom-os-flat .natsom-os-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.natsom .natsom-os-flat .natsom-os-family {
    border: 0;
    padding: 0;
    background: none;
}

@media (max-width: 480px) {
    .natsom .natsom-os-grid { grid-template-columns: 1fr; }
}

/* The OS field ships in a .col-sm-6; four family cards need the whole row. */
.natsom .natsom-os-col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* ==========================================================================
   14. confproduct — v2

   Rebuilt against the RENDERED reference rather than its stylesheet. Reading
   the CSS produced a page that used the right colours at the wrong scale; the
   reference's quality is not in its rules, it is in restraint:

     · one row of curated facts, not every fact that exists
     · 26px page title, 30px total — a third smaller than the first attempt
     · a fixed 360px rail, so the form column never sprawls
     · one accent. Copper appears on the CTA and nowhere else
     · no decorative iconography anywhere (0 <img>, 0 icon-font glyphs in the
       reference; the only SVGs are 12px checkmarks)

   Every colour resolves through the --ns-* aliases to the real site tokens.
   ========================================================================== */

/* -- Page rhythm ----------------------------------------------------------- */
.natsom.page-configureproduct .main-header-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 22px;
    color: var(--ns-text);
}

/* Fixed rail: the reference pins the summary at 360px so the form column has a
   settled measure instead of stretching with the viewport. */
@media (min-width: 992px) {
    .natsom.page-configureproduct .main-content > .row { display: block; }
    .natsom.page-configureproduct .main-sidebar-lg { width: 360px; max-width: 360px; }
}

/* -- Sections are cards ---------------------------------------------------
   Each step of the form is one card carrying its own header row, so the page
   reads as three discrete decisions rather than one sheet with headings
   floating above it. The card is .section — the vendor's own step wrapper —
   and the panel inside loses its border so there is never a box in a box. -- */
.natsom.page-configureproduct .section {
    background: var(--ns-card);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r-lg);
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
}

.natsom.page-configureproduct .section > .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    margin: 0;
    border-bottom: 1px solid var(--ns-line-soft);
    background: transparent;
}

/* Exactly one element pads the card body. The vendor nests the form panel one
   level deeper in some sections than in others, so the padding goes on the
   innermost body and every wrapper above it is flattened. */
.natsom.page-configureproduct .section > .panel-check-group,
.natsom.page-configureproduct .section .panel-form > .panel-body { padding: 20px; }
.natsom.page-configureproduct .section > .section-body { padding: 0; }

.natsom.page-configureproduct .panel-form {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.natsom.page-configureproduct .section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ns-text);
    margin: 0;
}

/* WHMCS folds the "required fields are marked *" note into the heading with a
   <br>. In a header row it belongs at the right of the same line. */
.natsom.page-configureproduct .section-title br { display: none; }
.natsom.page-configureproduct .section-title i,
.natsom.page-configureproduct .section-title small {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ns-text-3);
    white-space: nowrap;
}

/* The reference pairs every section title with a muted note on the right. It is
   interface copy, not data, so it is safe to carry. */
.natsom .natsom-hint {
    font-size: 13px;
    color: var(--ns-text-3);
    font-weight: 400;
    text-align: right;
}

/* -- Product card ---------------------------------------------------------- */
.natsom.page-configureproduct .product-config-info {
    background: var(--ns-card);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r-lg);
    box-shadow: none;
    margin-bottom: 20px;
}

.natsom .product-config-info h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
    color: var(--ns-text);
}

.natsom .natsom-product-sub {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ns-text-2);
    margin: 2px 0 12px;
}

/* -- Spec strip: one row, quantified facts only ----------------------------
   The unit rides on the value line: "8 GB" is one measurement and splitting it
   put "GB" on the caption row beside real captions like "DDR4 ECC", as though
   the two were the same kind of thing. Cells whose whole fact is the number and
   its unit carry no caption at all and centre instead. -------------------- */
.natsom .natsom-specs {
    display: grid;
    grid-template-columns: repeat(var(--spec-cols, 5), minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--ns-line-soft);
    border-radius: var(--ns-r);
    overflow: hidden;
    background: var(--ns-paper);
    margin: 0;
    padding: 0;
    list-style: none;
}

.natsom .natsom-specs li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 14px;
    border-right: 1px solid var(--ns-line-soft);
    border-bottom: 0;
    min-width: 0;
}

.natsom .natsom-specs li:last-child { border-right: 0; }

.natsom .natsom-specs .spec-value {
    display: block;
    font-family: var(--ns-font-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ns-text);
}

.natsom .natsom-specs .spec-label {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ns-text-3);
    margin-top: 2px;
}

/* -- Billing cycle: one anatomy, repeated ---------------------------------
   The cycles are the only comparison on this page — three prices weighed
   against each other — so every card is built from the same three rows and the
   eye compares by moving sideways:

       term                    [saving badge]      .natsom-cycle-head
       PRICE                                       .natsom-cycle-price
       per-month                                   .natsom-cycle-meta

   configureproduct.js §3b builds those rows; it splits the vendor's run-on
   heading ("Aylık ₺1,890.00 TRY") into term and price, moves the vendor's saving
   badge into row 1, and removes the vendor's struck original (see below).
   Without the script the vendor's heading renders as it always did.

   WHAT WAS WRONG BEFORE, measured 2026-09-24. The cards were vertically
   CENTRED, and monthly carried one line where annual carried three. Three
   equal boxes, three prices at three different heights, and the cheapest
   option reading as the empty one. Row 3 is now held open on the card that has
   nothing to put in it, so the prices sit on a common baseline.

   Vendor markup is otherwise untouched: Lagom renders these from 904 lines of
   price-string logic, so the columns are re-flowed with grid and the widget
   chrome is clipped. auto-fit means a fourth cycle divides the row again
   rather than breaking it.
   ------------------------------------------------------------------------ */
.natsom.page-configureproduct #sectionCycles .panel-check-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 0;
    /* theme.css: `.panel-check-group{margin-bottom:-24px!important}`. It cancels
       the 24px bottom margin each .panel-check carries in the vendor's flow
       layout. This is a grid with gap, the cards have no margin, so the
       compensation has nothing to cancel — it just dragged the group 24px past
       the section's box, where overflow:hidden clipped the cards. An
       !important declaration can only be answered with one. */
    margin-bottom: 0 !important;
}

.natsom.page-configureproduct #sectionCycles .panel-check-group > [class*="col-"] {
    width: auto;
    max-width: none;
    float: none;   /* Bootstrap floats these; inside a grid they must not */
    padding: 0;
    margin: 0;
    order: 0;      /* neutralise .order-6 — the grid is ordered by DOM */
    display: flex;
}

/* The chain down to the content, flattened. Each level is a flex row that
   hands its full height to the next, so the card's border is the height of the
   tallest card in the row and the content inside it starts at the top. A
   percentage-height chain was tried first and did not resolve through the
   vendor's wrappers. */
.natsom.page-configureproduct #sectionCycles .panel-check {
    display: flex;
    width: 100%;
    margin: 0;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r);
    box-shadow: none;
    background: var(--ns-card);
    transition: border-color .15s ease, background-color .15s ease;
}

.natsom.page-configureproduct #sectionCycles .check { flex: 1 1 auto; display: flex; padding: 0; margin: 0; }
.natsom.page-configureproduct #sectionCycles label  { flex: 1 1 auto; display: flex; padding: 0; margin: 0; cursor: pointer; }

.natsom.page-configureproduct #sectionCycles .check-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Top, not centre. See the note above — centring is what put three prices
       at three heights. */
    justify-content: flex-start;
    gap: 6px;
    padding: 15px 16px;
    height: auto;
}

.natsom.page-configureproduct #sectionCycles .panel-check:not(.checked):hover {
    border-color: var(--ns-text-3);
}

/* Row 1 + row 2 live inside the vendor's <h3>, which stops being a line of
   text and becomes a two-row stack. */
.natsom.page-configureproduct #sectionCycles .check-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 400;
    letter-spacing: normal;
}

/* <br> would split the price away from its term. */
.natsom.page-configureproduct #sectionCycles .check-title br { display: none; }

.natsom.page-configureproduct #sectionCycles .natsom-cycle-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    /* Held open so the price below it starts at the same height on the card
       with no badge as on the cards with one. */
    min-height: 20px;
}

/* The term is prose and reads in the sans face; the price is a machine value
   and reads in mono. They were both mono before, which made "Aylık" look like
   a token rather than a word. */
.natsom.page-configureproduct #sectionCycles .natsom-cycle-name {
    font-family: var(--ns-font-sans);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--ns-text-2);
}

.natsom.page-configureproduct #sectionCycles .natsom-cycle-price {
    font-family: var(--ns-font-mono);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ns-text);
    /* The figure changes under AJAX and sits in a column beside two others;
       proportional digits make both jitter. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

/* Right-aligned rather than trailing the term, so the badge is in the same
   place on every card that has one. */
.natsom.page-configureproduct #sectionCycles .label-save {
    margin: 0 0 0 auto;
    font-family: var(--ns-font-mono);
    font-size: 11px;
    line-height: 1.6;
    font-weight: 500;
    background: var(--ns-ok-soft);
    color: var(--ns-ok);
    padding: 1px 7px;
    border-radius: 99px;
    white-space: nowrap;
}

/* Row 3: the per-month equivalent. */
.natsom.page-configureproduct #sectionCycles .natsom-cycle-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    font-family: var(--ns-font-mono);
    font-size: 12px;
    line-height: 1.35;
    color: var(--ns-text-3);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    /* The monthly card has no such figure. The row stays, empty, so its price
       lands at the same height as the others'. */
    min-height: 1.35em;
}

.natsom.page-configureproduct #sectionCycles .natsom-permonth {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* The vendor's struck "original" is monthly x 12 NET of KDV, beside prices that
   are paid gross. Annual bills ten months, and 10 x 1.20 = 12, so the struck
   figure equalled the amount due on every annual card (2026-10-07).
   configureproduct.js §3b removes it; this keeps it from flashing before the
   script runs. The saving badge stays — it compares net to net. */
.natsom.page-configureproduct #sectionCycles .cycle-full-price { display: none; }

/* The selected card is filled. */
.natsom.page-configureproduct #sectionCycles .panel-check.checked {
    background: var(--ns-ink);
    border-color: var(--ns-ink);
}

.natsom.page-configureproduct #sectionCycles .panel-check.checked .natsom-cycle-price,
.natsom.page-configureproduct #sectionCycles .panel-check.checked .check-title { color: var(--ns-on-ink); }
.natsom.page-configureproduct #sectionCycles .panel-check.checked .natsom-cycle-name,
.natsom.page-configureproduct #sectionCycles .panel-check.checked .natsom-cycle-meta { color: var(--ns-on-ink-2); }

/* THE CONTROL IS CLIPPED, NOT REMOVED.
   `display: none` on the iCheck chrome is what this rule used to say, and it
   took the keyboard with it: .radio-styled carries tabindex="0" role="radio"
   and wraps the real <input>, so hiding it left the cycle — the one choice on
   this page that changes the price — reachable by mouse only. Clipped instead,
   the input still takes focus and the arrow keys still move between cycles;
   the filled card states the choice, and the ring below states the focus. */
.natsom.page-configureproduct #sectionCycles .radio-styled,
.natsom.page-configureproduct #sectionCycles .check-sign {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
}

/* :focus, not only :focus-visible. The ring is on the card and the focus is on
   a <div tabindex="0">, where the browser's own "was this keyboard?" heuristic
   is the least predictable. It does not have to decide here: measured
   2026-09-24, a mouse click on the card leaves focus on <body> — iCheck never
   moves it — so the proxy only ever holds focus because somebody tabbed to it.

   The real <input> is `visibility: hidden` in Lagom's own CSS, which is what
   makes it unfocusable and why the proxy exists at all; it is matched here too
   in case a future Lagom stops hiding it. */
.natsom.page-configureproduct #sectionCycles .panel-check:has(.icheck-control:focus),
.natsom.page-configureproduct #sectionCycles .panel-check:has(.icheck-control:focus-visible),
.natsom.page-configureproduct #sectionCycles .panel-check:has(.radio-styled:focus),
.natsom.page-configureproduct #sectionCycles .panel-check:has(.radio-styled:focus-visible) {
    box-shadow: var(--focus-ring);
}

/* -- OS tiles --------------------------------------------------------------
   The reference carries NO logos here — family name over version chips, and the
   chosen tile takes an Ink ring. Marks are kept (they were an explicit ask) but
   dropped to 16px and desaturated until chosen, so they read as a quiet aid
   rather than competing with the type. --------------------------------- */
.natsom .natsom-os > legend {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ns-text);
    margin-bottom: 8px;
}

.natsom .natsom-os-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.natsom .natsom-os-family {
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r);
    padding: 12px;
    background: var(--ns-card);
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Seçili aile de petrol. Mürekkep halkayla duruyordu ve sayfadaki dördüncü
   siyah nesneydi — seçim tek bir renk konuşmalı. */
.natsom .natsom-os-family:has(.natsom-os-chip.is-selected) {
    border-color: var(--bg-brand);
    box-shadow: 0 0 0 1px var(--bg-brand);
}

.natsom .natsom-os-head { gap: 7px; }

.natsom .natsom-os-logo { width: 16px; height: 16px; opacity: .55; transition: opacity .15s ease; }
.natsom .natsom-os-family:has(.natsom-os-chip.is-selected) .natsom-os-logo { opacity: 1; }

.natsom .natsom-os-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ns-text);
}

.natsom .natsom-os-chip {
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid var(--ns-line);
    font-family: var(--ns-font-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--ns-text-2);
    background: var(--ns-card);
    gap: 0;
}

.natsom .natsom-os-chip::before { display: none; }

.natsom .natsom-os-chip.is-selected {
    background: var(--ns-ink);
    border-color: var(--ns-ink);
    color: var(--ns-on-ink);
    box-shadow: none;
}

/* -- Fields ---------------------------------------------------------------- */
.natsom.page-configureproduct .form-group { margin-bottom: 18px; }

.natsom.page-configureproduct .form-group > label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ns-text);
    margin-bottom: 6px;
}

.natsom.page-configureproduct .form-group .required { color: var(--ns-copper); }

.natsom.page-configureproduct .form-control {
    border-radius: var(--ns-r-sm);
    border-color: var(--ns-line);
    font-size: 14px;
}

.natsom .natsom-mono-input { font-family: var(--ns-font-mono); font-size: 13.5px; }

.natsom.page-configureproduct .help-block {
    font-size: 12.5px;
    color: var(--ns-text-3);
    margin-top: 6px;
}

/* Help text and the password affordances share one row under the control: the
   constraint on the left, the actions on the right. Below the input rather than
   inside an .input-group, so the field itself is never re-wrapped. */
.natsom .natsom-field-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    min-height: 18px;
}

.natsom .natsom-help {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ns-text-3);
    flex: 1 1 auto;
    min-width: 0;
}

/* Advanced reads as a quiet link with a chevron, not a boxed control. */
.natsom .natsom-advanced {
    border-top: 1px solid var(--ns-line-soft);
    margin-top: 4px;
    padding-top: 14px;
}

.natsom .natsom-advanced > summary {
    font-family: var(--ns-font-sans);
    font-size: 13.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ns-text-2);
    gap: 6px;
}

.natsom .natsom-advanced > summary::before {
    border-left-color: currentColor;
    order: 2;
    border-width: 3px 0 3px 4px;
}

.natsom .natsom-advanced > summary:hover { color: var(--ns-text); }

/* -- Summary rail ---------------------------------------------------------- */
.natsom.page-configureproduct .panel-summary-primary {
    background: var(--ns-ink);
    border: 0;
    border-radius: var(--ns-r-lg);
    padding: 20px 22px;
}

.natsom.page-configureproduct .panel-summary-primary .panel-heading,
.natsom.page-configureproduct .panel-summary-primary .panel-body,
.natsom.page-configureproduct .panel-summary-primary .panel-footer {
    padding: 0;
    background: transparent;
    border: 0;
}

.natsom.page-configureproduct .panel-summary-primary .panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ns-on-ink-2);
    margin-bottom: 12px;
}

.natsom.page-configureproduct .summary-item,
.natsom.page-configureproduct .summary-item-subtotal,
.natsom.page-configureproduct .summary-item-tax {
    padding: 9px 0;
    border-bottom: 1px solid var(--ns-ink-line);
    font-size: 13.5px;
    align-items: baseline;
}

.natsom.page-configureproduct .summary-item .item-value,
.natsom.page-configureproduct .summary-item-subtotal .item-value,
.natsom.page-configureproduct .summary-item-tax .item-value {
    font-family: var(--ns-font-mono);
    font-size: 13.5px;
    white-space: nowrap;
    color: var(--ns-on-ink);
}

.natsom.page-configureproduct .summary-item-subtotal .name,
.natsom.page-configureproduct .summary-item-tax .name {
    font-family: var(--ns-font-sans);
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ns-on-ink-2);
}

/* The total. 30px in the reference — large enough to land, small enough to
   stay part of the card rather than shouting over it. */
.natsom.page-configureproduct .price-total {
    font-size: 13px;
    color: var(--ns-on-ink-2);
    font-family: var(--ns-font-sans);
    letter-spacing: 0;
    text-transform: none;
}

.natsom.page-configureproduct .price-amount-total {
    font-family: var(--ns-font-mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 2px;
    color: var(--ns-on-ink);
}

.natsom.page-configureproduct .summary-actions { margin-top: 18px; }

/* Tek eylem, iki ekranda aynı. Ölçüsü burada, rengi §4'te — ve rengin neden
   orada olduğu önemli: bu kural önce koyu zeminde solan düğmeye tam güçlü
   bakırla (--ns-copper) cevap veriyordu, checkout ise aynı sorunu sistemin
   koyu-zemin eylem jetonlarıyla çözüyordu. Aynı akışın iki adımında iki farklı
   CTA rengi. Karar jetonlardan yana: accent-400 dolgu, accent-950 yazı,
   ölçülen kontrast 7.4:1 — bakır-600 + açık yazının 4.6:1'ine karşı. Üstelik
   koyu yüzeyde eylem renginin açılması site-tokens.css'in kendi kuralı. */
.natsom .panel-summary-primary .btn-checkout {
    width: 100%;
    padding: 13px 20px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: var(--ns-r-sm);
}

@media (max-width: 767px) {
    .natsom .natsom-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .natsom .natsom-specs li:nth-child(3n) { border-right: 0; }
    .natsom .natsom-specs li:nth-child(-n+3) { border-bottom: 1px solid var(--ns-line-soft); }
    .natsom.page-configureproduct .panel-summary-primary { padding: 18px; }
    .natsom.page-configureproduct .section > .section-header { padding: 12px 16px; }
    .natsom.page-configureproduct .section > .panel-check-group,
    .natsom.page-configureproduct .section .panel-form > .panel-body { padding: 16px; }
}

/* -- §14 corrections -------------------------------------------------------
   A section with no header is not a step, it is a wrapper — the product card
   lives in one, and left as a card it drew a box around a box. Only sections
   that actually carry a header row get the card treatment. */
.natsom.page-configureproduct .section:not(:has(> .section-header)) {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0;
}

/* The vendor's subtitle <p> held the saving badge and the struck original;
   §3b empties it and removes it. Kept as a row for the case where the script
   does not run — there it still costs one line instead of two. */
.natsom.page-configureproduct #sectionCycles .check-subtitle {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* Machine values are mono in CSS, not only via the JS class. The nameserver
   prefixes were relying on the deferred script, which meant they rendered in
   the sans face for the first frames — and the palette audit, running before
   deferred scripts, reported them as off-face every time. The ids are WHMCS's
   own and stable; monoFields() stays as a belt-and-braces no-op. */
.natsom.page-configureproduct #inputHostname,
.natsom.page-configureproduct #inputNs1prefix,
.natsom.page-configureproduct #inputNs2prefix {
    font-family: var(--ns-font-mono);
    font-size: 13.5px;
}

/* Root password: the field is filled and removed by configureproduct.js, which
   also promotes the hostname to the full row width. Both classes are applied by
   that script and never by the vendor — with no JS the row renders unchanged and
   the buyer fills the password themselves, which is the point. `display: none`
   rather than the `hidden` attribute so the input keeps submitting its value. */
.natsom.page-configureproduct .natsom-field-gone { display: none; }

.natsom.page-configureproduct .natsom-col-full {
    flex: 0 0 100%;
    max-width: 100%;
}

.natsom.page-configureproduct .natsom-rootpw-note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ns-text-3);
    margin: 2px 0 0;
}

@media (max-width: 480px) {
    /* §13 already sets this, but §14's grid rule is later in the file and a
       media query adds no specificity — so the narrow-screen rule was being
       overridden by the wide-screen one. Restated here, after it. */
    .natsom .natsom-os-grid { grid-template-columns: 1fr; }

    /* Help text and actions stop sharing a line when there is no line to
       share: the constraint wraps to several lines at this width and the
       buttons were being squeezed against it. */
    .natsom .natsom-field-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Tabular figures for every mono value on this page. §12's spec grid carried
   these and was removed with it; the page is full of numbers that sit in
   columns or change under AJAX, and proportional digits make them jitter. */
.natsom .natsom-specs .spec-value,
.natsom.page-configureproduct .check-title,
.natsom.page-configureproduct .label-save,
.natsom.page-configureproduct .natsom-os-chip,
.natsom.page-configureproduct .item-value,
.natsom.page-configureproduct .price-amount-total {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   Anonymous checkout — the order summary is readable, the order is not payable
   ---------------------------------------------------------------------------

   A logged-out visitor now reaches cart.php?a=checkout and sees what they are
   buying: product, term, price, VAT, total. Everything that collects input
   toward placing the order is removed for them, leaving the summary and the two
   CTAs rendered by
   orderforms/lagom2/includes/viewcart/overwrites/form-billing.tpl.

   display:none rather than a template fork for these four: hiding them properly
   would mean owning 429 lines of vendor partials (payment gateways, promo,
   notes/terms) to achieve, for the customer, exactly what this achieves.
   display:none also takes an element out of the focus order and the
   accessibility tree, so nothing here is a hidden-but-tabbable trap.

   Ordering is refused server-side regardless of what is on screen —
   ShoppingCartValidateCheckout in includes/hooks/natsom_checkout_gate.php. This
   is presentation, not a gate.

   Scope: body.lagom-not-portal is Lagom's own logged-out marker
   (templates/lagom2/header.tpl:47); page-viewcart is the cart/checkout page.
*/
body.lagom-not-portal.page-viewcart #frmCheckout > .section:not(.natsom-anon-cta),
body.lagom-not-portal.page-viewcart .section:has(input[name="promocode"]),
body.lagom-not-portal.page-viewcart .btn-checkout,
body.lagom-not-portal.page-viewcart .order-summary-mob,
body.lagom-not-portal.page-viewcart .order-checkbox,
/* Onayları taşıyan kutu da: içindekiler gizlenince geriye alt çizgisiyle
   birlikte 31px'lik boş bir blok kalıyor ve toplamın altında sebepsiz bir
   ayırıcı çizgi görünüyordu (orderflow.js §2 bu kutuyu CTA'nın üstüne taşıyor;
   anonim ziyaretçide CTA da yok). */
body.lagom-not-portal.page-viewcart .natsom-consents {
    display: none;
}

.natsom-anon-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Side by side where there is room, stacked and full width where there is not.
   The primary action keeps its weight either way. */
.natsom-anon-cta-actions .btn {
    flex: 1 1 14rem;
    justify-content: center;
}

/* The VAT line, shown rather than withheld.

   Lagom keeps the tax breakdown in a `hidden` list for logged-out visitors and
   reveals it through its "estimate taxes" flow — sensible when the customer's
   country is unknown. Ours is not unknown: registration fixes country=TR and the
   total on this page ALREADY carries 20% KDV (subtotal x 1.20). Withholding the
   line while charging the tax shows a visitor a number they cannot account for.

   The second tax level is rendered by the vendor at 0% whether it is configured
   or not; an "@ 0%  0,00" row explains nothing, so it stays hidden.

   Both rules are scoped to the anonymous checkout — nothing changes for a
   signed-in customer, who gets Lagom's own behaviour. */
/* !important is required, not decorative: the vendor hides this with
   Bootstrap's `.hidden { display: none !important }`, which no amount of
   specificity beats. */
body.lagom-not-portal.page-viewcart ul.summary-list:has(#taxTotal1) {
    display: block !important;
}

body.lagom-not-portal.page-viewcart ul.summary-list:has(#taxTotal1) li:has(#taxTotal2) {
    display: none;
}

/* Anonymous checkout on narrow screens: price first, wall second.

   The whole point of showing an anonymous visitor an order summary is that they
   see what they are buying before they are asked for an account. On mobile that
   ordering inverted: Lagom stacks .main-content above .main-sidebar (order 2),
   so the CTA block landed at y=813 against an 844px viewport while the summary
   sat at y=1121 — action above the fold, information below it.

   Pulling the sidebar up restores the intended reading order. Scoped to the
   anonymous checkout, so a signed-in customer's layout is untouched.

   The breakpoint is Lagom's own, measured rather than assumed: at 992px the grid
   is `row` with the sidebar at order 0, at 991px it is `column` with the sidebar
   at order 2. */
/* T030 (F7) REVERSES the rule above for phones. Measured on prod at 390px
   (T027): with the summary pulled up, "Hesap oluştur / Giriş yap" sat ~1,230px
   down, below the summary AND the cart table; the anonymous /domain visitor left
   there and whmcs-13 reached checkout twice before finding it. The account block
   now comes first and names the order in one line, with a link down to the full
   summary (form-billing.tpl), so the price is still on the first screen.

   Lagom's own order is kept for the sidebar (after the content, order 2); inside
   .main-content the checkout form — which for an anonymous visitor holds only
   the account block — moves above the cart table. */
@media (max-width: 991.98px) {
    body.lagom-not-portal.page-viewcart .main-content {
        display: flex;
        flex-direction: column;
    }

    body.lagom-not-portal.page-viewcart .main-content > #frmCheckout {
        order: -1;
    }
}

.natsom-anon-cta-summary {
    margin: .5rem 0 0;
    font-variant-numeric: tabular-nums;
}

.natsom-anon-cta-summary-link {
    white-space: nowrap;
    margin-left: .25rem;
}

/* The three steps ahead, on the anonymous checkout CTA. Numbered, compact, and
   quiet — it is orientation, not an instruction the customer has to act on. */
.natsom-anon-cta-steps {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}

.natsom-anon-cta-steps li {
    margin-bottom: .25rem;
    opacity: .85;
}

/* The attribution pair on the registration form. `hidden` needs the !important
   because Bootstrap gives form columns `display: block`, which outranks the
   attribute's own UA rule. */
.natsom-referral-other[hidden] {
    display: none !important;
}

/* The password generator is off.
 *
 * It lives inside includes/pwstrength.tpl, which is 129 lines and also carries
 * the strength meter we keep — forking the whole partial to delete one button
 * would be a permanent merge cost for a one-line outcome. display:none takes it
 * out of the focus order and the accessibility tree as well, so it is gone for
 * everyone rather than merely invisible. */
.natsom .generate-password {
    display: none !important;
}

/* ===========================================================================
   AUTHENTICATION SCREENS — login, register, password reset (v6.4)
   ===========================================================================

   One centred column, no card, on a living ground. This replaces the card
   generation wholesale; none of that CSS is left, and the `.nsa-card*` class
   names are gone with it.

   SCOPE. Every rule below is a descendant of `.nsa`, which exists only inside
   the three `natsom` page variants. Petrol gets the primary-button role on
   these screens and nowhere else — the client area's own button rules are
   copper and are untouched, which is only true because nothing here escapes
   `.nsa`. Keep it that way: an unscoped selector in this block is a bug even
   when it looks harmless.

   COLOUR. No hex, ever. Petrol resolves through --ns-petrol to --brand-700 in
   the generated site token file; the atmosphere's alphas are color-mix over
   that same variable rather than rgba() literals. The v6.4 reference's own hex
   values are deliberately not reproduced — see custom.css.

   MOTION. No blur filter anywhere. Four large gradients behind a form is
   already the most expensive thing on the page, and a filtered element is
   recomposited every frame; these animate transform only, which the compositor
   handles without touching layout or paint. Everything stops under
   prefers-reduced-motion.

   TYPE. The theme's families and the theme's scale. Mono appears in exactly
   two places, both of them data: the step counter and the resend countdown.
   =========================================================================== */

/* --- the ground's density, tuned from one place ---------------------------
   These are the reference's --i-* controls, namespaced and re-calibrated for
   our petrol, which sits a little greyer than the reference's and therefore
   reads weaker at the same alpha. Adjust ONLY these when the ground needs to
   come up or down; the layer structure below is not the tuning surface. */
.nsa {
    /* CALIBRATED AGAINST MEASURED CONTRAST, not by eye.
       The ground is petrol composited onto the surface, and the text on it is
       --ns-text-2 (5.78:1 on bare surface) and petrol itself (5.80:1). Both
       cross 4.5:1 when the composited ground passes roughly 22% effective
       alpha, so that is the ceiling for the DARKEST point of the layer stack
       anywhere text sits — which is the top-left corner, where cloud 1 is
       densest and the "back to natsom.com" link happens to live.

       Measured at 34/28/25/21 the corner reached 31% alpha and that link fell
       to 3.99:1. The values below hold the worst case under the ceiling with
       margin. They land within a point or two of the reference's own numbers,
       which is the useful result of the exercise: our petrol did NOT need a
       different density. What needed changing was the clouds' geometry — see
       .nsa-blob — and reading the reference's alphas as the answer while the
       geometry was wrong is what made the first pass look washed out. */
    --nsa-i-blob1: 27%;
    --nsa-i-blob2: 18%;
    --nsa-i-blob2b: 7%;
    --nsa-i-blob3: 21%;
    --nsa-i-blob4: 14%;
    --nsa-i-grid: 12%;
    --nsa-i-dust: 24%;
    --nsa-i-clear: 88%;
    --nsa-i-clear2: 42%;

    /* Shape and rhythm, from the theme's own component values. Nothing here is
       invented for these screens: the radii are --border-radius-*, and the
       control height is the one the client area's inputs already use. */
    --nsa-radius: var(--border-radius-sm);
    --nsa-radius-lg: var(--border-radius-lg);
    --nsa-control: 46px;
    --nsa-gap: 16px;
}

/* Deliberately NOT position:relative/z-index:0, and deliberately not clipping.
   Either one makes .nsa a stacking context, and the fixed .nsa-atmo inside it
   is then confined to .nsa's own box — which leaves the strip WHMCS renders
   below us (the "Powered by" line, which is a licence matter and stays) sitting
   on flat surface under a tinted page, as a hard horizontal seam across the
   bottom of every auth screen. Left alone, the atmosphere is positioned against
   the viewport and the ground is continuous. The clouds cannot overflow the
   page: they live inside .nsa-atmo, which is fixed and clips them. */
.nsa {
    display: flex;
    flex-direction: column;
    /* dvh, not vh: on mobile browsers vh is the tallest the viewport ever gets,
       not the height it currently has, and the address bar eats the difference
       out of the bottom — which is where the submit button is. */
    min-height: 100dvh;
    /* The near-white end of the neutral ramp rather than Paper. The column has
       no card under it any more, so the ground IS the reading surface, and at
       Paper the muted hint text lands at 4.05:1 against it. This is the same
       surface the theme puts under its own cards. */
    background: var(--bg-surface);
    color: var(--ns-text);
}

/* ---------------------------------------------------------------------------
   1. THE GROUND
   ------------------------------------------------------------------------ */

.nsa-atmo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The dot grid, masked away from the middle so it thins out behind the form
   instead of running under the text. */
.nsa-atmo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--ns-petrol) var(--nsa-i-grid), transparent) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, transparent 18%, #000 92%);
            mask-image: radial-gradient(ellipse 85% 70% at 50% 42%, transparent 18%, #000 92%);
}

/* closest-side, centred, and no border-radius.

   The reference sizes these gradients farthest-corner (the default) inside a
   border-radius:50% box, and relies on its `transparent 70%` stop landing more
   or less exactly on the round clip. That holds while the gradient's origin is
   near the middle of its box; push the origin off-centre and the clip cuts the
   gradient while it is still carrying colour. It showed as a hard arc several
   hundred pixels long across the top right — invisible at the reference's alpha
   and the first thing you saw at ours.

   closest-side from the centre puts the transparent stop exactly on the
   inscribed circle, so the cloud has faded out before any edge, round or
   square, can cut it. What that costs is the reference's off-centre highlight;
   what it buys is a layer that cannot produce an edge at any viewport ratio.
   The sizes below are scaled up to compensate — closest-side describes a
   smaller circle than farthest-corner does — so the clouds cover the same
   ground they do in the reference. */
.nsa-blob {
    position: absolute;
    will-change: transform;
    background: radial-gradient(circle closest-side at 50% 50%,
        color-mix(in srgb, var(--ns-petrol) var(--nsa-i-blob1), transparent),
        color-mix(in srgb, var(--ns-petrol) calc(var(--nsa-i-blob1) * 0.45), transparent) 46%,
        transparent 100%);
}

/* Cloud 1 and cloud 3 are positioned so their CORES fall outside the viewport.
   Measured: with cloud 1 centred at roughly (11vmax, 5vmax) its densest point
   sat exactly under the top bar, and "natsom.com'a don" — petrol text on the
   darkest ground on the page — came in at 4.18:1 on every screen at 1440. The
   same happened to the footer over cloud 3. Lowering the density further would
   have washed out the whole layer to fix two 30px-tall rows; moving the cores
   off-screen keeps the ground and takes the hot spot out from under the chrome.
   The alphas are a few points higher to compensate for the viewport now seeing
   the falloff rather than the core. */
.nsa-blob--1 { width: 90vmax; height: 90vmax; left: -51vmax; top: -57vmax; }

/* The reference puts a mint trace in this one. That green is in no part of our
   palette, so the variation comes from further up our own ramp instead — the
   cloud still has an inside, and the page still has one hue. */
.nsa-blob--2 {
    width: 76vmax; height: 76vmax; right: -30vmax; top: -12vmax;
    background: radial-gradient(circle closest-side at 50% 50%,
        color-mix(in srgb, var(--ns-petrol) var(--nsa-i-blob2), transparent),
        color-mix(in srgb, var(--ns-petrol-lift) var(--nsa-i-blob2b), transparent) 48%,
        transparent 100%);
}

.nsa-blob--3 {
    width: 72vmax; height: 72vmax; left: -20vmax; bottom: -52vmax;
    background: radial-gradient(circle closest-side at 50% 50%,
        color-mix(in srgb, var(--ns-petrol) var(--nsa-i-blob3), transparent),
        color-mix(in srgb, var(--ns-petrol) calc(var(--nsa-i-blob3) * 0.4), transparent) 52%,
        transparent 100%);
}

.nsa-blob--4 {
    width: 40vmax; height: 40vmax; right: 0; bottom: -16vmax;
    background: radial-gradient(circle closest-side at 50% 50%,
        color-mix(in srgb, var(--ns-petrol) var(--nsa-i-blob4), transparent), transparent 100%);
}

@media (prefers-reduced-motion: no-preference) {
    .nsa-blob--1 { animation: nsa-drift1 56s ease-in-out infinite alternate; }
    .nsa-blob--2 { animation: nsa-drift2 70s ease-in-out infinite alternate; }
    .nsa-blob--3 { animation: nsa-drift3 62s ease-in-out infinite alternate; }
    .nsa-blob--4 { animation: nsa-drift4 48s ease-in-out infinite alternate; }
}

/* Slow enough that the movement is felt rather than watched, and small enough
   that nothing crosses the column while you are reading it. */
@keyframes nsa-drift1 { from { transform: translate(0, 0) scale(1); }    to { transform: translate(9vmax, 5vmax) scale(1.09); } }
@keyframes nsa-drift2 { from { transform: translate(0, 0) scale(1.06); } to { transform: translate(-8vmax, 7vmax) scale(.95); } }
@keyframes nsa-drift3 { from { transform: translate(0, 0) scale(1); }    to { transform: translate(7vmax, -6vmax) scale(1.08); } }
@keyframes nsa-drift4 { from { transform: translate(0, 0); }             to { transform: translate(-6vmax, -4vmax) scale(1.12); } }

.nsa-dust {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ns-petrol) var(--nsa-i-dust), transparent);
    will-change: transform;
}

/* Positions in the stylesheet rather than inline on nine spans, so the whole
   layer is tuned in one file. */
.nsa-dust--1 { left: 12%; top: 22%; }
.nsa-dust--2 { left: 26%; top: 64%; }
.nsa-dust--3 { left: 8%;  top: 81%; }
.nsa-dust--4 { left: 71%; top: 18%; }
.nsa-dust--5 { left: 88%; top: 44%; }
.nsa-dust--6 { left: 79%; top: 76%; }
.nsa-dust--7 { left: 44%; top: 12%; }
.nsa-dust--8 { left: 58%; top: 88%; }
.nsa-dust--9 { left: 34%; top: 38%; }

/* THE CLEARING. Do not remove this, and do not lower it without re-measuring
   the label and hint contrasts. It is the only thing between the form's text
   and a tinted ground, and the whole colour budget of the clouds is spent on
   the assumption that this is over them. */
.nsa-clear {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 740px;
    height: 540px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--bg-surface) var(--nsa-i-clear), transparent),
        color-mix(in srgb, var(--bg-surface) var(--nsa-i-clear2), transparent) 52%,
        transparent 72%);
}

/* Registration is the tall screen; the clearing grows with it rather than
   letting the ground close back over the consents at the bottom. */
.nsa--wide .nsa-clear { height: 760px; top: 46%; }

/* Somebody who has asked for more contrast has asked for less of this. */
@media (prefers-contrast: more) {
    .nsa-atmo { display: none; }
}

/* ---------------------------------------------------------------------------
   2. TOP BAR — the ONE place login and register link to each other
   ------------------------------------------------------------------------ */

.nsa-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 12px 24px;
    font-size: 13.5px;
    color: var(--ns-text-2);
}

.nsa-top__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 3px;
    margin: -5px -3px;
    color: var(--ns-text-2);
}

.nsa-top__back svg { display: block; }

.nsa-top__back:hover,
.nsa-top__back:focus { color: var(--ns-text); }

.nsa-top__alt { text-align: right; }

.nsa-top__alt a {
    color: var(--ns-petrol);
    font-weight: 600;
}

.nsa-top__alt a:hover,
.nsa-top__alt a:focus { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   3. STAGE AND COLUMN
   ------------------------------------------------------------------------ */

.nsa-stage {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vh 20px 10vh;
}

.nsa-col {
    width: 100%;
    max-width: 400px;
}

/* Registration carries roughly twice the fields. 440px rather than a second
   column: two columns at this width put a 200px input beside another 200px
   input, which reads as a table rather than a form. */
.nsa--wide .nsa-col { max-width: 440px; }

/* --- head ---------------------------------------------------------------- */

.nsa-head {
    text-align: center;
    margin-bottom: 30px;
}

/* The real logo, where the reference draws a placeholder tile. logo.tpl brings
   its own anchor and a .login-header wrapper carrying a 48px bottom margin for
   the layout it was written for; both are neutralised here. */
.nsa-head__mark { margin: 0 auto 18px; }

.nsa-head__mark .login-header,
.nsa-head__mark .logo,
.nsa-head__mark .logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    margin: 0;
    padding: 0;
}

.nsa-head__mark img,
.nsa-head__mark .logo img,
.nsa-head__mark .logo-login-img {
    display: block;
    max-height: 34px;
    width: auto;
    height: auto;
    margin: 0;
}

.nsa-head__title {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ns-text);
}

.nsa-head__steps[hidden] { display: none; }

.nsa-head__stepline {
    margin: 12px 0 0;
    font-family: var(--ns-font-mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    /* --ns-text-3 is 4.05:1 on this ground. Secondary is the muted tone these
       screens use; text-3 is reserved for placeholders. */
    color: var(--ns-text-2);
}

.nsa-head__stepline b {
    color: var(--ns-text);
    font-weight: 600;
}

.nsa-head__bar {
    width: 120px;
    height: 2px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--ns-line-soft);
    overflow: hidden;
}

.nsa-head__bar i {
    display: block;
    height: 100%;
    width: 50%;
    background: var(--ns-petrol);
    transition: width .45s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .nsa-head__bar i { transition: none; }
}

/* The waiting order — ours, not the reference's. Mono, because it is data. */
.nsa-order {
    margin: -14px 0 22px;
    text-align: center;
    font-family: var(--ns-font-mono);
    font-size: 12px;
    color: var(--ns-text-2);
}

.nsa-order__label {
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-right: 8px;
}

.nsa-order__items { color: var(--ns-text); }

.nsa-order__items span + span::before {
    content: " · ";
    opacity: .45;
}

/* T087 (F): the checkout's count and today-total, on its own line under the items. */
.nsa-order__summary {
    display: block;
    margin-top: 4px;
    color: var(--ns-text);
}

/* ---------------------------------------------------------------------------
   4. FORM ANATOMY
   ------------------------------------------------------------------------ */

/* Vendor markup arrives with Bootstrap form-groups; both shapes get the same
   field rhythm so a forked partial and ours cannot drift apart. */
.nsa .nsa-f,
.nsa .form-group {
    display: block;
    margin: 0 0 var(--nsa-gap);
}

.nsa .nsa-f > label,
.nsa .form-group > label,
.nsa .control-label {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ns-text-2);
}

/* Label and its aside link are siblings, not parent and child: nested, the link
   became part of the field's accessible name and screen readers announced
   "Şifre Şifremi unuttum" as the label. */
.nsa-f__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.nsa-f__row > label { margin-bottom: 0; }

.nsa-f__row,
.nsa .nsa-f > label,
.nsa .form-group > label { margin-bottom: 7px; }

.nsa-f__aside {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ns-petrol);
}

.nsa-f__aside:hover,
.nsa-f__aside:focus { text-decoration: underline; }

.nsa-inp { position: relative; }

.nsa .form-control,
.nsa select.form-control {
    height: var(--nsa-control);
    width: 100%;
    padding: 0 13px;
    border: 1px solid var(--ns-line);
    border-radius: var(--nsa-radius);
    background: var(--bg-elevated);
    color: var(--ns-text);
    font-family: inherit;
    font-size: 15px;
    /* The theme's own field lift. Not a shadow invented here. */
    box-shadow: var(--elev-1);
    transition: border-color .15s, box-shadow .15s;
}

.nsa select.form-control { padding-right: 34px; }

.nsa .form-control::placeholder { color: var(--ns-text-3); }

/* Field focus is the theme's own --input-focus-border-color, which already
   resolves to petrol. The soft ring is the reference's anatomy carried over. */
.nsa .form-control:focus {
    outline: 0;
    border-color: var(--ns-petrol);
    box-shadow: 0 0 0 3px var(--ns-petrol-ring);
}

/* Keyboard focus on everything that is not a field keeps the theme's focus
   ring, so these screens and the client area behind them agree about what
   "focused" looks like. */
.nsa a:focus-visible,
.nsa button:focus-visible,
.nsa input[type="checkbox"]:focus-visible,
.nsa summary:focus-visible {
    outline: 2px solid var(--ns-petrol);
    outline-offset: 2px;
    border-radius: 4px;
}

.nsa .nsa-mono,
.nsa input.nsa-mono {
    font-family: var(--ns-font-mono);
    font-size: 14px;
}

/* --- the chip row inside a field ---------------------------------------- */

.nsa-tail {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}

.nsa-mini {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--ns-line);
    border-radius: var(--border-radius-xs);
    background: var(--bg-elevated);
    color: var(--ns-text-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

.nsa-mini:hover,
.nsa-mini:focus { border-color: var(--ns-text-3); color: var(--ns-text); }

.nsa-mini[hidden] { display: none !important; }

/* The chips overlay the field, so the text has to stop before them. Two chips
   need more room than one; :has keeps the two cases from needing two classes,
   and where it is unsupported the single-chip padding applies and a very long
   password scrolls under the generator — visibly imperfect, never broken. */
.nsa-inp:has(.nsa-tail) .form-control { padding-right: 76px; }
.nsa-inp:has(.nsa-tail .nsa-mini + .nsa-mini) .form-control { padding-right: 136px; }

/* --- the hint line ------------------------------------------------------- */

/* Empty at rest. It carries a validation error, the Caps Lock warning or the
   address-typo offer, and nothing else — a standing sentence under a field is
   read once and becomes furniture. The min-height reserves the row so a message
   arriving does not push the rest of the form down. */
.nsa-hint {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ns-text-2);
}

/* Scoped with .nsa so these outrank `.nsa .nsa-hint--rule` further down, which
   is the same specificity and later in the file. Without it the password field's
   rule hint kept its resting colour while its TEXT changed to the Caps Lock
   warning — the message arrived in the tone of an ordinary hint, which is the
   one thing a warning must not do. */
.nsa .nsa-hint[data-nsa-hint-state="warn"]  { color: var(--text-warning); }
.nsa .nsa-hint[data-nsa-hint-state="error"] { color: var(--text-danger); }

.nsa-hint__fix {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--ns-petrol);
    cursor: pointer;
}

.nsa-hint__fix:hover,
.nsa-hint__fix:focus { text-decoration: underline; }

.nsa-f.is-error .form-control { border-color: var(--ns-danger); }

/* Lagom's own mismatch message lands in this slot. */
.nsa #inputNewPassword2Msg p,
.nsa .help-block {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-danger);
}

.nsa #inputNewPassword2Msg:empty { display: none; }

/* --- rows ---------------------------------------------------------------- */

.nsa-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 13px;
}

/* auto-fit so the pair collapses to one full-width field when its second cell
   is hidden — which is exactly what the attribution row does until "Diğer" is
   chosen. A fixed two-track grid left a half-width select beside a gap. */
.nsa-rowfit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0 13px;
}

@media (max-width: 460px) {
    .nsa-row2 { grid-template-columns: 1fr; }
}

.natsom-referral-other[hidden] { display: none !important; }

/* --- checkboxes ---------------------------------------------------------- */

/* Native checkboxes, not Lagom's icheck or a switch. A switch reads as a
   setting being adjusted; these are permissions being granted. */
.nsa-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 24px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ns-text-2);
    cursor: pointer;
}

.nsa-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    /* Top-aligned with a nudge, not centred: the terms consent runs to two
       lines and centring put its box halfway down the paragraph. */
    margin: 3px 0 0;
    flex-shrink: 0;
    accent-color: var(--ns-petrol);
}

.nsa-check a {
    color: var(--ns-petrol);
    font-weight: 500;
}

.nsa-check a:hover,
.nsa-check a:focus { text-decoration: underline; }

/* --- required marker ------------------------------------------------------
   Lagom positions its asterisk `absolute; right: -9px`, which puts it where the
   label's BOX ends rather than where its text does — on a full-width label that
   is a lone * two hundred pixels from the word it qualifies. Static and inline
   it sits against the text. Petrol rather than red, because a required field is
   a house rule; red is what the form says when something has already gone
   wrong. */
.nsa .label-required::after,
.nsa .nsa-req::after {
    content: "*";
    position: static;
    top: auto;
    right: auto;
    margin-left: 3px;
    color: var(--ns-petrol);
    font-weight: 600;
}

/* --- the strength meter ---------------------------------------------------
   WHMCS's score, the reference's four segments. The score and the threshold
   behind it are a server setting (RequiredPWStrength), so the bar is not
   re-computed here — only cut into quarters by a mask, so what it reports is
   still the server's opinion and not a second, disagreeing one. */
.nsa .nsa-strength {
    height: 4px;
    margin: 8px 0 0;
    border-radius: 2px;
    background: var(--ns-line-soft);
    box-shadow: none;
    overflow: hidden;
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 calc(25% - 3px), transparent calc(25% - 3px) 25%);
            mask-image: repeating-linear-gradient(to right, #000 0 calc(25% - 3px), transparent calc(25% - 3px) 25%);
}

.nsa .nsa-strength .progress-bar {
    height: 100%;
    box-shadow: none;
    background: var(--ns-petrol);
    transition: width .2s;
}

/* Lagom sets these three classes from its own thresholds. */
.nsa .nsa-strength .progress-bar-danger  { background: var(--danger-600); }
.nsa .nsa-strength .progress-bar-warning { background: var(--warning-600); }
.nsa .nsa-strength .progress-bar-success { background: var(--success-600); }

/* The one standing hint on these screens, and it earns the space: it states the
   rule the server enforces before the customer is rejected by it. */
.nsa .nsa-hint--rule { color: var(--ns-text-2); }

/* pwstrength.tpl paints this label by writing an INLINE colour on it — three
   hard-coded hexes (#be0f1a, #c59301, #198810) that belong to no palette in this
   system and that no ordinary rule can outrank. The state is readable from the
   bar's own class, so the label is re-pointed at our status tokens from there.
   !important is the only lever against an inline style and is used for nothing
   else in this file. */
.nsa .nsa-f:has(.progress-bar-danger) #passwordStrengthTextLabel  { color: var(--text-danger) !important; }
.nsa .nsa-f:has(.progress-bar-warning) #passwordStrengthTextLabel { color: var(--text-warning) !important; }
.nsa .nsa-f:has(.progress-bar-success) #passwordStrengthTextLabel { color: var(--text-success) !important; }

/* Lagom's generator opens a modal with length settings. Ours is one chip in the
   field that fills both boxes and reveals them, so the modal is the second of
   two generators and goes. display:none takes it out of the focus order and the
   accessibility tree too, rather than merely hiding it. */
.nsa .generate-password,
.nsa .password-content-group:empty { display: none !important; }

/* ---------------------------------------------------------------------------
   5. ACTIONS
   ------------------------------------------------------------------------ */

/* T051 P0: copper, like every other primary (the site's Button `primary`:
   --action-primary-*, --action-shadow; one primary per view). Petrol used to be
   the fill here only. Selector names the position inside
   .nsa, not a class combination, because the vendor partials arrive carrying
   .btn-lg and .btn-block in different combinations and each one used to render
   a differently sized button. */
.nsa .nsa-cta,
.nsa .btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 47px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--nsa-radius);
    background: var(--action-primary-bg);
    color: var(--action-primary-fg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--action-shadow);
    transition: background-color .15s, box-shadow .15s, transform .06s;
}

.nsa .nsa-cta:hover,
.nsa .nsa-cta:focus,
.nsa .btn-primary:hover,
.nsa .btn-primary:focus {
    background: var(--action-primary-bg-hover);
    color: var(--action-primary-fg);
    box-shadow: var(--action-shadow);
}

.nsa .nsa-cta:active,
.nsa .btn-primary:active { transform: translateY(1px); }

.nsa .nsa-cta[hidden] { display: none !important; }

/* The spinner. Loading only — there is deliberately no "done" state on any of
   these three CTAs: all of them do a full-page POST, so the success belongs to
   the page that comes back, and a tick drawn here would be the button claiming
   an outcome nothing has told it. */
.nsa-cta__sp {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / .35);
    border-top-color: var(--action-primary-fg);
    border-radius: 50%;
}

.nsa .nsa-cta.is-loading { pointer-events: none; }
.nsa .nsa-cta.is-loading .nsa-cta__sp { display: block; animation: nsa-spin .7s linear infinite; }

@keyframes nsa-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .nsa .nsa-cta.is-loading .nsa-cta__sp { animation-duration: 2s; }
}

/* Lagom's own loader lives inside the same button and would be a second
   spinner next to ours. */
.nsa .nsa-cta .loader { display: none !important; }

.nsa-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 47px;
    padding: 0 18px;
    border: 1px solid var(--ns-line);
    border-radius: var(--nsa-radius);
    background: var(--bg-elevated);
    color: var(--ns-text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

.nsa-ghost:hover,
.nsa-ghost:focus { border-color: var(--ns-text-3); color: var(--ns-text); }

.nsa-ghost[hidden] { display: none !important; }

.nsa-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.nsa-actions .nsa-cta { flex: 1; }

.nsa-below {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--ns-text-2);
}

.nsa-below a {
    color: var(--ns-petrol);
    font-weight: 600;
}

.nsa-below a:hover,
.nsa-below a:focus { text-decoration: underline; }

/* Inline links here are 13-14px text, which gives a tap target around 17-20px
   tall — under the 24px WCAG 2.5.8 asks for. The padding buys the height and
   the equal negative margin gives the space back, so nothing moves. */
/* .nsa-top__back is NOT in this list: it is inline-flex so its chevron sits on
   the text's line, and inline-block here put the icon on a line of its own.
   It gets the same height from its own padding below. */
.nsa-f__aside,
.nsa-below a,
.nsa-top__alt a,
.nsa-foot a,
.nsa-check a {
    display: inline-block;
    padding: 5px 3px;
    margin: -5px -3px;
}

.nsa-divider { margin: 18px 0; }
.nsa-captcha { margin-bottom: 16px; }
.nsa-alert { margin-bottom: 16px; }
.nsa .alert { font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   6. THE TWO-STEP REGISTRATION
   ---------------------------------------------------------------------------
   One form, one POST. The steps are a view of the same markup and the class
   that switches them is only ever added by the script — with JavaScript off,
   .nsa-form--stepped is never set, both steps are visible and the form is an
   ordinary long form. */

.nsa-form--stepped .nsa-step { display: none; }
.nsa-form--stepped .nsa-step.is-on { display: block; }

@media (prefers-reduced-motion: no-preference) {
    .nsa-form--stepped .nsa-step { transition: opacity .25s, transform .25s; }
    .nsa-form--stepped .nsa-step.is-leaving { opacity: 0; transform: translateX(-14px); }
    .nsa-form--stepped .nsa-step.is-entering { opacity: 0; transform: translateX(14px); }
}

/* Vendor section wrappers, sized for a full-width page rather than a column. */
.nsa .section,
.nsa .section-sm {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.nsa .section-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ns-text);
}

/* --- the arrival animation ------------------------------------------------
   Each block of the column fades up a beat after the one above it. Purely
   decorative, so it is inside the reduced-motion query in its entirety — with
   motion off the elements are simply there, with no opacity to recover from. */
@media (prefers-reduced-motion: no-preference) {
    .nsa-rv {
        opacity: 0;
        transform: translateY(10px);
        animation: nsa-rv .5s cubic-bezier(.2, .7, .3, 1) forwards;
    }
    .nsa-rv:nth-child(1) { animation-delay: .02s; }
    .nsa-rv:nth-child(2) { animation-delay: .08s; }
    .nsa-rv:nth-child(3) { animation-delay: .14s; }
    .nsa-rv:nth-child(4) { animation-delay: .20s; }
    .nsa-rv:nth-child(5) { animation-delay: .26s; }
    .nsa-rv:nth-child(6) { animation-delay: .32s; }
    .nsa-rv:nth-child(n+7) { animation-delay: .38s; }

    @keyframes nsa-rv { to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------------------
   7. RESET — the success screen
   ------------------------------------------------------------------------ */

.nsa-success { text-align: center; }

.nsa-success__ic {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--bg-success-tint);
    color: var(--text-success);
}

.nsa-success__ic svg { display: block; width: 24px; height: 24px; }

.nsa-success__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ns-text);
}

.nsa-success__text {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--ns-text-2);
}

/* The address the visitor typed, echoed from their own browser. Mono because it
   is a value, not prose. */
.nsa-success__mail {
    display: block;
    margin: 10px 0 0;
    font-family: var(--ns-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ns-text);
    word-break: break-all;
}

.nsa-success__mail[hidden] { display: none; }

.nsa-resend[hidden] { display: none; }

.nsa-success__re {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--ns-text-2);
}

/* Resend: the theme's secondary button under the sentence (walkthrough 9/9);
   the countdown sits inside it while it is disabled. */
.nsa-resend__btn { margin-top: 12px; }
.nsa-resend__btn [data-nsa-cooldown]:not(:empty) { margin-left: 6px; font-weight: 400; }

.nsa-linkbtn {
    padding: 5px 3px;
    margin: -5px -3px;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--ns-petrol);
    cursor: pointer;
}

.nsa-linkbtn:hover:not(:disabled),
.nsa-linkbtn:focus:not(:disabled) { text-decoration: underline; }

.nsa-linkbtn:disabled { opacity: .5; cursor: default; }

.nsa-mono { font-family: var(--ns-font-mono); }

/* The vendor reset partials keep their own markup; they only need the column's
   type. The lead arrives centred from Lagom while everything under it is left
   aligned, which reads as two panels stacked rather than one column. */
.nsa .login-desc {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ns-text-2);
    text-align: left;
}

/* ---------------------------------------------------------------------------
   8. FOOTER — one legal line
   ------------------------------------------------------------------------ */

.nsa-foot {
    position: relative;
    z-index: 1;
    padding: 16px 20px 26px;
    text-align: center;
}

.nsa-foot__legal {
    max-width: 72ch;
    margin: 0 auto;
    font-size: 12.5px;
    color: var(--ns-text-2);
}

.nsa-foot__legal a { color: var(--ns-text-2); }

.nsa-foot__legal a:hover,
.nsa-foot__legal a:focus { color: var(--ns-text); }

.nsa-foot__sep {
    opacity: .55;
    margin: 0 6px;
}

/* ---------------------------------------------------------------------------
   9. NARROW SCREENS
   ------------------------------------------------------------------------ */

@media (max-width: 575.98px) {
    .nsa-top {
        min-height: 0;
        padding: 12px 16px;
        font-size: 12.5px;
    }

    .nsa-stage { padding: 3vh 16px 6vh; }

    .nsa-head { margin-bottom: 24px; }
    .nsa-head__title { font-size: 24px; }

    /* The clearing is a fixed pixel ellipse; on a 390px screen it is wider than
       the viewport, which is correct — the whole column is inside it. */
    .nsa-clear { width: 120vw; }

    .nsa-foot { padding: 12px 16px 22px; }
}

/* --- sharing the viewport with WHMCS ------------------------------------
   WHMCS renders things inside .app-main that we neither control nor may
   remove: the licence banner above, and the "Powered by" line below, whose
   presence is a licence matter rather than a template one. A shell pinned to
   100dvh plus 102px of those made the page scroll by exactly that much.

   So the viewport is claimed one level up and the shell takes what is left.
   flex-shrink is 0 and min-height is auto, so a tall form — registration on a
   short screen — still grows past the frame and the page scrolls normally
   instead of being clipped. The previous generation used overflow:hidden here
   and cut the licence line off the bottom of the page.

   Scoped with :has() to pages that actually carry the shell — .app-main is on
   every page in the client area. Where :has() is unsupported the min-height
   above still applies and the page scrolls by the height of whatever WHMCS
   added, which is the behaviour this replaces rather than a new failure. */
body:has(.nsa) .app-main {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* So the strip below the shell is the same ground the shell is on, and the
       atmosphere passing over both has nothing to reveal a join. */
    background: var(--bg-surface);
}

body:has(.nsa) .nsa {
    flex: 1 0 auto;
    min-height: auto;
}

/* Very short screens — a landscape phone, or a laptop with the licence banner
   above us. Nothing is hidden; the rhythm just tightens. */
@media (max-height: 720px) and (min-width: 576px) {
    .nsa-stage { padding: 2vh 20px 4vh; }
    .nsa-head { margin-bottom: 22px; }
    .nsa { --nsa-gap: 13px; }
}


/* The password tips balloon. NOT auth CSS — the same tooltip carries WHMCS's
   password advice on the client-area password-change page, so these rules stay
   global and outlive the auth screens that first needed them. Bootstrap centres
   tooltip text, which is right for a three-word hint and wrong for a list:
   centred bullets have no shared left edge to scan down. */
.tooltip .tooltip-inner {
    max-width: 300px;
    padding: 10px 12px;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.5;
    border-radius: var(--ns-r-sm);
}

.tooltip .tooltip-inner strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.tooltip .tooltip-inner ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tooltip .tooltip-inner li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 3px;
}

.tooltip .tooltip-inner li:last-child {
    margin-bottom: 0;
}

/* A middot rather than a disc: at this size a bullet glyph is heavier than the
   text it introduces, and the balloon is already a dense object. */
.tooltip .tooltip-inner li::before {
    content: "·";
    position: absolute;
    left: 4px;
    opacity: .7;
}

/* The distance-selling consent no longer borrows Lagom's .order-checkbox class
   (it is a validation hook, not a style), so it needs the spacing that class was
   supplying. */
.natsom-distance-consent {
    margin-top: 4px;
}

/* ==========================================================================
   MOBILE AUDIT — 2026-09-18

   Findings from an instrumented pass over the client area at 320/360/390/414/
   768px. Lagom's own responsive behaviour is sound: no page in the audit
   scrolled horizontally, the off-canvas drawer is correct (270px, 58px rows,
   body scroll locked) and the grid collapses cleanly. What follows are the
   four places it stops short, fixed at the component level so every page
   inherits the repair rather than each page growing its own.
   ========================================================================== */

/* -- 1. Pagination could not be reached ------------------------------------
   THE BUG, not a nicety: at 320px `ul.pagination` measures 327px inside a
   270px `.dataTables_paginate` whose overflow-x is `visible`, and .main-body
   clips the page at overflow-x:hidden. The "İleri" / Next control therefore
   rendered at x=271..324 — past the viewport, in a container that cannot
   scroll, on a page that cannot scroll. It was not reachable by any gesture.
   Measured on /clientarea.php?action=emails (28 pages) and ?action=services.

   Bootstrap 3 builds pagination as one non-wrapping row of floated items, so
   the row can only ever be as narrow as its widest content allows. Letting it
   wrap is the root fix: the control set stops being a single line that must
   fit and becomes a block that reflows, which holds for any page count and any
   label length (Turkish "Önceki"/"İleri" are wider than "Prev"/"Next", which
   is why this bites us and not the vendor's demo).

   The items separate into chips here instead of keeping BS3's shared-border
   strip: once a row wraps, a joined strip reads as broken rather than
   continuous, and discrete chips are also the easier tap target. -- */
@media (max-width: 479px) {
    .natsom .dataTables_paginate .pagination,
    .natsom .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding-left: 0;
    }

    .natsom .dataTables_paginate .pagination > li,
    .natsom .pagination > li {
        float: none;
        display: block;
    }

    /* BS3 joins the strip by zeroing inner radii; wrapped chips need theirs
       back or the middle items render with square corners. */
    .natsom .pagination > li > a,
    .natsom .pagination > li > span {
        border-radius: var(--border-radius-base);
        /* A single digit is only ~25px wide. The row already wraps, so paying
           for square targets here costs a little height, not reachability —
           and these are page navigation, worth the space. The markdown
           editor's toolbar deliberately does NOT get this: 13 buttons at 44px
           is a 570px strip, and its buttons sit in one contiguous group where
           a mis-tap costs a formatting toggle, not a lost page. */
        min-width: 44px;
    }
}

/* -- 2. Touch targets ------------------------------------------------------
   Nothing interactive in the client area met the 44px that iOS HIG and
   Material both ask for, and several sat under the 24px WCAG 2.5.8 floor:
   the drawer toggle at 30x34, the header dropdowns at 30px tall, the email
   verification dismiss at 32x18, every .btn at 36px, .list-group-item service
   nav at 34px, pagination items at 30px. This is one cause with many symptoms
   — no minimum was ever expressed — so it is fixed once, here.

   Two different techniques, deliberately:

   · Controls that SHOULD be bigger (buttons, nav rows, pagination) get a real
     min-height. They are meant to feel substantial under a thumb.
   · Icon controls in the header must NOT grow, or the header height shifts and
     the brand lockup moves. They keep their painted size and get an invisible
     44x44 hit area centred on them via ::after. The pixel stays put; the
     target underneath it is compliant.

   The query carries `(pointer: coarse)` alongside the width so a touch tablet
   at 768px+ is covered too, while a desktop mouse at any width is not. -- */
@media (max-width: 767px), (pointer: coarse) {
    .natsom .btn,
    .natsom .btn-sm,
    .natsom .list-group-item,
    .natsom .pagination > li > a,
    .natsom .pagination > li > span {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The header account menu is primary navigation on a phone — it holds
       Profil, Güvenlik, Ödeme Yöntemleri and Çıkış — but its rows were the
       shortest targets on the page. Left-aligned like the drawer rows they
       mirror, not centred like a button. */
    .natsom .dropdown-menu > li > a,
    .natsom .top-nav .dropdown-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* list-group rows are full-width nav, not centred chips. Icon and label
       start together on the left (T051 P1-b: space-between pushed the label of
       every icon row, "Hızlı Erişim" and "Sorumlular", to the far right). BS3
       right-aligns a trailing .badge with float, and float is ignored once the
       row is a flex container, so the trailing badge takes the free space
       with an auto margin instead. */
    .natsom .list-group-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .natsom .list-group-item > .badge,
    .natsom .list-group-item > .label,
    .natsom .list-group-item > .pull-right {
        margin-left: auto;
    }

    /* Invisible hit expander for icon-only controls that must keep their box.
       Centred on the control, so it grows symmetrically and never pushes a
       sibling: the drawer toggle stays painted at 30x34 and the brand lockup
       beside it does not move, while the target underneath becomes 44x44.

       Safe on all three because none of them builds its glyph from ::after —
       verified in the DOM: .app-nav-toggle draws its hamburger with three
       <span class="icon-bar"> children, and the header dropdown carets are
       their own elements rather than generated content. If a future Lagom
       release moves a glyph into ::after, this rule would erase it. */
    .natsom .app-nav-toggle,
    .natsom .top-nav > li > a,
    .natsom .btn-icon {
        position: relative;
    }

    .natsom .app-nav-toggle::after,
    .natsom .top-nav > li > a::after,
    .natsom .btn-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
        width: 100%;
        height: 100%;
    }
}

/* -- 3. Card padding at phone width ----------------------------------------
   Companion to the gutter step in custom.css. `.invoice` and the block
   components resolve their padding through --ui-block-padding-*, but the
   vendor also hardcodes `.invoice{padding:26px 24px 32px}` further down
   theme.css, so the token alone does not reach it. 16px matches the container
   gutter set in custom.css, which keeps the card edge and the page edge on one
   rhythm instead of two competing ones. -- */
@media (max-width: 479px) {
    :root {
        --ui-block-padding-lg:   16px;
        --ui-block-padding-base: 16px;
    }

    .natsom .invoice,
    .natsom .ui-block,
    .natsom .panel-body {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* -- 4. Horizontally scrolling tables gave no sign they scrolled ------------
   The invoice line-item table is 385px wide and its .table-responsive wrapper
   does scroll, so nothing is lost — but at 320px the Amount column sits fully
   off-screen with no indication it exists. On an invoice that is the one
   column that matters, and a scrollable region with no affordance reads as a
   truncated one.

   The standard two-layer background trick: a pair of shadows painted at the
   edges (background-attachment: scroll, so they stay pinned to the box) and a
   pair of solid covers in the page colour (attachment: local, so they travel
   with the content and slide over the shadow when that end is reached). Net
   effect: a soft edge appears only on the side that has more content. No JS,
   no scroll listener, and it costs nothing when the table already fits. -- */
.natsom .table-responsive {
    background-image:
        linear-gradient(to right,  var(--ns-card) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left,   var(--ns-card) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,  rgba(16, 24, 40, .10), rgba(16, 24, 40, 0)),
        linear-gradient(to left,   rgba(16, 24, 40, .10), rgba(16, 24, 40, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
    -webkit-overflow-scrolling: touch;
}

/* -- 5. Hostnames broke mid-token ------------------------------------------
   `word-break: break-all` splits at whatever character lands on the boundary,
   so 51rjlSUUOY.natsom.com.tr wrapped as "51rjlSUUOY.natsom.com" / ".tr" and
   in a narrower card as "...com" / "com.tr". `anywhere` only breaks when the
   line genuinely cannot fit and still prefers a legitimate boundary, which for
   a hostname means the dots. Same overflow protection, readable result. -- */
.natsom .service-card .service-host,
.nsa-success__mail {
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ── Sipariş özetindeki kampanya kodu notu ─────────────────────────────────
   templates/orderforms/lagom2/overwrites/ordersummary.tpl içindeki bant.
   Toplam ile CTA arasında durur; bir uyarı değil, bir teyit olduğu için
   dikkat çekmeden okunur olmalı — bu yüzden marka rengi yerine yumuşak bir
   vurgu ve küçük punto. Tutar YAZMAZ (nedeni şablonun yorumunda). */
.natsom-promo-note {
  display: block;
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--bg-brand-tint, rgba(0, 0, 0, .04));
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, .08));
}
.natsom-promo-note .item-name,
.natsom-promo-note .name {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  /* Uzun kampanya kodları dar sütunda taşmasın (mobil 390px'te ölçüldü). */
  overflow-wrap: anywhere;
}

/* T020 AC-3: WHMCS indirimi onayladığında (promototal.js) tutar indirimli
   gösteriliyor; liste fiyatı üstü çizili olarak onun hemen üstünde. Not artık
   bir teyit: "KOD uygulandı: …". */
.natsom .natsom-price-was {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  opacity: .65;
  text-decoration: line-through;
}
.natsom-promo-note.is-applied {
  border-color: var(--ns-ok, rgba(0, 0, 0, .08));
}

/* Sarmalamayı geri açan kural, TEMANIN ZİNCİR DERİNLİĞİYLE eşleşmek zorunda.

   Lagom şunu dayatıyor:
       .panel-summary-configuration .summary-item .item-name .name
   — dört sınıf, yani 0,4,0. Yukarıdaki iki sınıflık (0,2,0) blok bu yüzden
   kaybediyordu: kural prod'a indi, doğru değeri taşıyordu ve hesaplanan stil
   yine `nowrap` kaldı. Ölçüldü 2026-09-24, cascade CSSOM'dan okunarak.

   Tema kuralı ürün adı satırları için doğru — onlar tek satırda kalmalı. Burada
   ise bir CÜMLE var ve 390px'te tam da açıklayıcı yarısı kırpılıyordu:
   "…eklendi — indiri…". Kesilen kısım müşterinin sorusunu cevaplayan kısımdı.

   !important yerine aynı derinlikte karşılık veriliyor: eşit özgüllükte, sonra
   yüklenen dosya kazanır (theme-custom.css, theme.css'ten sonra gelir). */
.panel-summary-configuration .summary-item.natsom-promo-note .item-name,
.panel-summary-configuration .summary-item.natsom-promo-note .name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ── Yapılandırılabilir seçenek adedi: segmentli stepper ──────────────────
   configureproduct.js bölüm 8 bu işaretlemeyi üretir ve panele
   .natsom-qty-panel ekler. ion.rangeSlider DOM'da kalır (gizli input hâlâ
   otorite) ama görsel olarak kırpılır — display:none değil, çünkü ion
   gizlenmiş bir elemanın genişliğini ölçemez ve bir daha gösterilmesi
   gerekirse bozuk açılır.

   Neden kırpıldığı: ölçüldü 2026-09-24, ion'un yüzen tooltip'i y=759'da,
   kendi bölüm başlığı 746-766'da — kontrol, kendisini adlandıran etiketin
   üstünü kesiyordu. */
.natsom-qty-panel .irs {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  pointer-events: none;
}

/* Stepper'a çevrilmeyen kaydırıcılar — aynı çarpışma, bitmemiş iş.
   Bölüm 8, adım sayısı STEP_MAX'i aşan seçeneklerde çekiliyor: 0-30 arası bir
   adet için otuz bir düğme okunur bir kontrol değil, orada kaydırıcı doğru
   araç. Ama vazgeçtiği yerde tooltip sorunu olduğu gibi kalıyordu. Ölçüldü
   2026-09-24, E-Posta Esnek 100 ürününde: bölüm başlığı 607-627, ion'un yüzen
   değeri 620-652 — başlığın üstüne biniyor, "E-Posta Arşivi (12 Ay)" yazısının
   alt yarısını örtüyordu.

   Kontrolü aşağı alıyoruz; tooltip'i gizlemiyoruz. O değer, kaydırırken
   nerede olduğunuzu söyleyen tek şey. */
.natsom.page-configureproduct .panel-range-slider:not(.natsom-qty-panel) .irs {
  margin-top: 20px;
}

.natsom-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-default, rgba(0, 0, 0, .14));
  border-radius: 10px;
  overflow: hidden;
  /* Kendi genişliği kadar yer kaplıyor: 0-3 arası bir sayaç, 800px'lik bir
     kartın tamamını hak etmiyor. */
  width: max-content;
}
.natsom-qty-btn {
  /* 44px dokunma hedefi, ikisi de. */
  min-width: 48px;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease;
}
.natsom-qty-btn:hover:not(:disabled) {
  background: var(--bg-brand-tint, rgba(0, 0, 0, .05));
}
.natsom-qty-btn:disabled {
  opacity: .32;
  cursor: default;
}
.natsom-qty-btn:focus-visible {
  outline: 2px solid var(--bg-brand);
  outline-offset: -2px;
}
.natsom-qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0 8px;
  /* Sayı değişirken kutu zıplamasın. */
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  border-left: 1px solid var(--border-default, rgba(0, 0, 0, .14));
  border-right: 1px solid var(--border-default, rgba(0, 0, 0, .14));
}
.natsom-qty-value:focus-visible {
  outline: 2px solid var(--bg-brand);
  outline-offset: -2px;
}

/* ── Sipariş özetinde config option satırı ────────────────────────────────
   İki ayrı sorun, ikisi de ölçüldü 2026-09-24 koyu özet panelinde:

   1. Fiyat GÖRÜNMÜYORDU. Lagom onu hover'a saklıyor:
        .panel-summary-configuration:not(.show-confoption-price)
        .summary-list-configoptions.hoverable .item-value { opacity: 0 }
      Yani "₺135.00 TRY" ancak satırın üstüne gelince beliriyor. Dokunmatik
      cihazda hover yok, ve fiyat zaten okunmak için orada — özetin işi
      müşteriye ne ödeyeceğini söylemek. Efektif opacity 0 ile ölçüldü.
   2. Rengi koyu panelde okunmuyordu: var(--text-body-color) = rgb(94,89,81),
      açık zemin için tanımlı bir token, koyu kartta neredeyse görünmez.

   Yalnızca config option satırı hedefleniyor; ayarın başka yerdeki
   davranışına dokunulmuyor. Temanın zincir derinliğiyle (5 sınıf) eşleşmek
   zorunda — daha sığ bir seçici cascade'i kaybediyor. */
.panel-summary-configuration:not(.show-confoption-price)
.summary-list-configoptions.hoverable .item-value {
  opacity: 1;
  /* Temanın gizleme kuralı üç şey birden yapıyor: opacity:0, width daraltma ve
     transform: translateX(100%). Sonuncusu fiyatı kendi genişliği kadar sağa
     kaydırıyor — ilk ölçümde kutunun satırın sağ kenarında başlayıp (left=1201)
     kartın dışına taşmasının sebebi buydu, gizliyken kimsenin görmediği bir
     taşma. Üçü de burada geri alınıyor; biri eksik kalırsa tutar ya görünmez ya
     da yanlış yerde durur. */
  width: auto;
  transform: none;
}
/* Lagom fiyatı ÜÇ ayrı yolla saklıyor ve üçü de geri alınmalı — ilk ikisini
   açıp durunca tutar DOM'da, opak, ama 0px genişlikte kalıyordu. Üçüncüsü bu:
   iç span'e width:0. `:not(.item-value-free)` temanın kendi seçicisinden
   birebir alındı; "ÜCRETSİZ!" rozeti zaten kapsam dışı olduğu için bu kural
   onu hiç görmüyor. */
.panel-summary-configuration:not(.show-confoption-price)
.summary-list-configoptions.hoverable .item-value :not(.item-value-free) {
  width: auto;
}
.panel-summary-configuration .summary-list-configoptions .list-item .item-name {
  color: rgba(255, 255, 255, .74);
}
.panel-summary-configuration .summary-list-configoptions .list-item .item-value {
  color: rgba(255, 255, 255, .86);
  /* Görünür yapınca ikinci bir kusur ortaya çıktı: fiyat, satırın SAĞ
     KENARINDA başlayıp 233px genişlikle kartın dışına taşıyordu (ölçüldü
     2026-09-24: satır 918-1201, fiyat left=1201). opacity:0 olduğu sürece
     kimsenin görmediği bir taşma. Esnek satırda kendi içeriği kadar yer alıp
     sağa yaslanıyor. */
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
/* Ad tarafı DARALABİLMELİ ama BÜYÜMEMELİ. `1 1 auto` ile denendi ve yanlıştı:
   ad 283px'lik satırın 275px'ini kaplayıp fiyata 8px bıraktı. Uzun bir seçenek
   adı hâlâ kendi ellipsis'ine düşer, fiyat ise her zaman kendi genişliğini
   alır — özette kırpılacak son şey tutardır. */
.panel-summary-configuration .summary-list-configoptions .list-item .item-name {
  min-width: 0;
  flex: 0 1 auto;
}

/* ── Kampanya bandı: yatay iç boşluk ──────────────────────────────────────
   .summary-item yatay padding'i 0'a çekiyor, bant da onun bir örneği olduğu
   için metin kenara yapışıyordu (ölçüldü: padding 9px 0px). Tema zincirinin
   derinliğinde karşılık veriliyor. */
.panel-summary-configuration .summary-item.natsom-promo-note {
  padding: 11px 13px;
  margin-top: 12px;
}



/* ===========================================================================
   SİPARİŞ AKIŞI — tek iskelet
   ===========================================================================

   Kapsam: `cart.php`'nin iki ekranı — `.page-configureproduct` (yapılandırma)
   ve `.page-viewcart` (inceleme ve ödeme). İkisi aynı akışın iki adımı ama
   bugüne kadar iki ayrı sayfa gibi büyüdüler; bu bölüm ikisini tek bir
   iskelete oturtuyor.

   ÖLÇÜLEN DURUM (2026-09-24, 1280px, giriş yapılmış müşteri):

   1. Checkout genişliğin 338px'ini kaybediyordu. `.main-grid` bir flex satır
      ve WHMCS'in "Powered by WHMCompleteSolution" paragrafı o satırın ÜÇÜNCÜ
      öğesi olarak duruyor. Sonuç: içerik sütunu 558px'e, özet rayı 272px'e
      sıkışmış, sağda 338px boş alan. Sayfa yarım görünmesinin sebebi buydu.

   2. Onay kutularının metni OKUNAMIYORDU. "Kullanım Koşullarını okudum" ve
      "Mesafeli Satış Ön Bilgilendirme Formu'nu okudum" satırları mürekkep
      panelin içinde ama yazı rengi neutral-950; ölçülen kontrast 1.03:1.
      Bağlantılar brand-700 ile 2.70:1. Yani müşteriden okuyamadığı bir metni
      onaylaması isteniyordu — hem erişilebilirlik hem mesafeli satış mevzuatı
      açısından kabul edilemez.

   3. Ödenecek tutar rakamın ORTASINDAN bölünüyordu: "₺136,080. 00 TRY".
      272px'lik rayda 31px mono sığmıyor ve WHMCS tutarı tek kelime yapmıyor.

   4. Sayfanın tek eylem düğmesi solgundu. Vendor şablonu birincil özet paneli
      için `btn-primary-faded` sınıfını veriyor; açık zeminde doğru olan bu
      seçim mürekkep zeminde soluk pembe bir dikdörtgene dönüşüyor.

   5. Seçili durum İKİ ayrı renkle anlatılıyordu: işletim sistemi kartı
      brand-800 (--panel-active-border-color), ödeme döngüsü kartı ise
      --ns-ink. Aynı sayfada aynı anlam için iki renk.

   KARAR — üç yüzey, üç rol, fazlası yok:

     Kağıt   sayfa zemini; başlıklar ve açıklamalar doğrudan burada durur
     Kart    yalnızca bir SEÇİM yapılan yerde beyaz yüzey
     Mürekkep sayfa başına bir tane: özet rayı

   Renk rolleri custom.css'teki dağıtımın aynısı, sadece eksik olanı yerine
   koyuyor:

     bakır    sayfa başına tek eylem (CTA). Mürekkep üstünde sistemin kendi
              koyu-zemin jetonlarıyla: accent-400 dolgu, accent-950 yazı.
     petrol   SEÇİM ve İLERLEME. Bugüne kadar boştaydı; siyah dolgunun yerini
              alıyor. Sayfaya ikinci rengi veren ve pazarlama sitesiyle bağı
              kuran hamle bu.
     mürekkep yalnızca yüzey, asla vurgu.
     mono     her makine değeri.
   =========================================================================== */

/* --- 1. Izgara: kayıp 338px geri ---------------------------------------- */

/* WHMCS'in imza paragrafı satırın öğesi olmaktan çıkıyor, kaldırılmıyor:
   lisans şartı olup olmadığı bizim kararımız değil. Tam satır kaplayıp en
   sona düşüyor; ızgara bu yüzden sarmalayabilir olmak zorunda. */
.natsom.page-viewcart .main-grid { flex-wrap: wrap; }

.natsom.page-viewcart .main-grid > p {
    flex: 0 0 100%;
    order: 99;
    margin: 24px 0 0;
}

/* İki ekran aynı omurgayı paylaşıyor: 360px ray, kalanı içerik. Yapılandırma
   ekranı zaten 360'taydı; checkout 272'de kalmıştı ve tutarın satır ortasından
   bölünmesinin sebebi tam olarak o 88px'ti. */
@media (min-width: 992px) {
    .natsom.page-viewcart .main-grid > .main-sidebar { flex: 0 0 360px; width: 360px; max-width: 360px; }
    .natsom.page-viewcart .main-grid > .main-content { max-width: calc(100% - 392px); }
}

/* --- 2. Mürekkep panel: okunur metin ------------------------------------ */

/* site-tokens.css koyu zemin için semantik katmanı zaten yeniden
   işaretliyor (`.on-ink` listesinde `.panel-summary-primary` var), ama
   Lagom'un onay kutusu ve bağlantı kuralları o katmandan geçmiyor — kendi
   değişkenlerini kullanıyorlar ve onlar açık zemin değerlerinde kalıyor.
   Burada semantik katmana geri bağlanıyorlar. */
.natsom .panel-summary-primary .order-checkbox,
.natsom .panel-summary-primary .order-checkbox label,
.natsom .panel-summary-primary .order-checkbox span,
.natsom .panel-summary-primary .checkbox label,
.natsom .panel-summary-primary .checkbox span {
    color: var(--text-secondary);
}

.natsom .panel-summary-primary a:not(.btn) {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.natsom .panel-summary-primary a:not(.btn):hover { color: var(--text-link-hover); }

/* Onaylar tek bir blok. Vendor iki ayrı `.order-checkbox` üretiyor ve
   aralarında yalnızca margin var; hukuki metin olarak birlikte okunmaları
   gerekiyor, o yüzden CTA'dan ince bir çizgiyle ayrılmış tek alan. */
.natsom .panel-summary-primary .order-checkbox {
    margin: 0;
    padding: 0;
}

.natsom .panel-summary-primary .order-checkbox + .order-checkbox { margin-top: 10px; }

.natsom .panel-summary-primary .order-checkbox .checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.natsom .panel-summary-primary .order-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    cursor: pointer;
}

/* --- 3. Tutar satır ortasından bölünmesin ------------------------------- */

/* `white-space: nowrap` tek başına yetmez — dar ekranda bu sefer rayı
   taşırırdı. Yazı boyutu rayın genişliğine bağlanıyor: 360px'te 31px,
   telefonda kendiliğinden küçülüyor, ama rakam her zaman tek parça. */
.natsom .panel-summary-primary .price-amount-total,
.natsom .panel-summary .price-amount-total {
    white-space: nowrap;
    font-size: clamp(22px, 5.2vw, 31px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- 4. Tek eylem, en parlak nesne -------------------------------------- */

/* Vendor `btn-primary-faded` veriyor (şablon: birincil özet panelinde soluk
   varyant). Koyu zeminde doğru cevap solgunluk değil, sistemin kendi koyu-zemin
   eylem jetonları: accent-400 dolgu + accent-950 yazı. Ölçüldü: 8.4:1. */
.natsom .panel-summary-primary .btn-primary,
.natsom .panel-summary-primary .btn-primary-faded,
.natsom .panel-summary-primary .btn-checkout {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
    font-weight: 600;
}

.natsom .panel-summary-primary .btn-primary:hover,
.natsom .panel-summary-primary .btn-primary-faded:hover,
.natsom .panel-summary-primary .btn-checkout:hover {
    background: var(--action-primary-bg-hover);
    border-color: var(--action-primary-bg-hover);
    color: var(--action-primary-fg);
}

/* --- 5. Omurga: bölüm = kağıt üstünde etiket, altında kart --------------- */

/* İki ekran da `.section > .section-header > .section-title` üretiyor, ama
   bugüne kadar iki ayrı şey gibi davranmışlar: yapılandırmada `.section`ın
   KENDİSİ beyaz kart ve başlık onun iç şeridi (15px), checkout'ta `.section`
   şeffaf ve başlık kağıdın üstünde (26px). Aynı akışın iki adımında iki farklı
   bölüm anatomisi.

   Tek kural: BÖLÜM BİR KUTU DEĞİL. Etiket kağıdın üstünde durur, kart yalnızca
   içeriğin altındadır. Kazanç sadece tutarlılık değil — yapılandırma ekranında
   kutu içinde kutu vardı (kart > başlık şeridi > gövde > kartlar), o katman
   gitti.

   Etiket sessiz, içerik yüksek sesli: 12px mono, büyük harf, petrol. Petrol bu
   sayfalarda tek tek kullanıldığında fark edilmiyordu; her bölümün başında
   tekrarlanınca sayfanın ikinci rengi oluyor ve pazarlama sitesiyle bağı
   kuruyor. Ölçüldü: #276272 / #EFECE9 = 5.4:1. */
.natsom.page-order .main-content .section {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    margin: 0 0 28px;
}

.natsom.page-order .main-content .section:last-child { margin-bottom: 0; }

.natsom.page-order .main-content .section > .section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0;
    margin: 0 0 10px;
    background: transparent;
    border: 0;
    min-height: 0;
}

.natsom.page-order .main-content .section-title {
    margin: 0;
    font-family: var(--ns-font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ns-ice-deep);
}

/* Başlığın sağındaki not ("zorunlu alanlar * ile işaretlenmiştir") etiketin
   parçası değil, yanındaki fısıltı. */
.natsom.page-order .main-content .section-header .section-note,
.natsom.page-order .main-content .section-header small {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--ns-text-3);
    text-transform: none;
    letter-spacing: 0;
}

/* Tek kart tanımı, iki ekran. Hangi elemanın kart olduğu şablona göre değişiyor
   (`.section-body`, `.panel`, `.product-configurable-options`) — üçü de aynı
   kabuğu alıyor ki sayfa boyunca tek bir kenarlık, tek bir yarıçap olsun. */
.natsom.page-order .main-content .section:has(> .section-header) > .section-body,
.natsom.page-order .main-content .section:has(> .section-header) > .panel {
    background: var(--ns-card);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r-lg);
    box-shadow: none;
    margin: 0;
    padding: 18px 20px;
    overflow: visible;
}

/* KARTI YAPAN ŞEY ETİKETTİR. Başlıksız `.section` bir grup değil, sarmalayıcı:
   ürün adı böyle bir sarmalayıcının içinde duruyor ve tek satırlık bir isim
   808x106'lık beyaz bir kutu kazanıyordu. Yapılandırılabilir seçenekler de
   öyle — o sarmalayıcı KENDİ `.section`larını taşıyor, ona da kabuk verilince
   kutu içinde kutu çıkıyordu (ölçüldü: 808x191 kartın içinde 766x126 kart). */
.natsom.page-order .main-content .section:not(:has(> .section-header)) > .section-body,
.natsom.page-order .main-content .product-configurable-options {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* İçerideki panel kendi kabuğunu bırakır — dıştaki kart zaten var. */
.natsom.page-order .main-content .section > .panel > .panel-body,
.natsom.page-order .main-content .section > .section-body > .panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Ödeme döngüsü kartları kendi kabuklarını taşıyor; onların üstünde ikinci bir
   kutu, kutu içinde kutu demek. */
.natsom.page-order .main-content .section > .panel-check-group {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Ürün adı bir kart değil, sayfanın kimlik satırı. Tek satırlık bir isim için
   808x70'lik boş bir kutu duruyordu; VDS ürünlerinin `description` alanı boş
   olduğu için (ölçüldü: 12 üründe de 0 karakter) spec şeridi de hiç
   dolmuyordu. */
.natsom.page-configureproduct .product-config-info {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 24px;
}

.natsom.page-configureproduct .product-config-info > .panel-body { padding: 0; }

.natsom.page-configureproduct .product-config-info h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--ns-text);
}

/* --- 6. Seçim = petrol, siyah değil -------------------------------------- */

/* Sayfada seçili durum iki ayrı renkle anlatılıyordu: işletim sistemi kartı
   --panel-active-border-color (brand-800), ödeme döngüsü kartı --ns-ink
   (neredeyse siyah). İkincisi benim yazdığım kuraldı ve sayfadaki siyah kütleyi
   ikiye katlıyordu — sağdaki mürekkep ray zaten o işi yapıyor.

   Tek cevap: seçim petrol. Mürekkep yalnızca yüzey kalır, sayfa başına bir tane.
   Ölçülen kontrastlar #184855 üzerinde: başlık 8.1:1, ikincil satır 5.9:1. */
.natsom.page-configureproduct #sectionCycles .panel-check.checked {
    background: var(--bg-brand);
    border-color: var(--bg-brand);
}

.natsom.page-configureproduct #sectionCycles .panel-check.checked .natsom-cycle-price,
.natsom.page-configureproduct #sectionCycles .panel-check.checked .check-title { color: var(--text-on-brand); }

.natsom.page-configureproduct #sectionCycles .panel-check.checked .natsom-cycle-name,
.natsom.page-configureproduct #sectionCycles .panel-check.checked .natsom-cycle-meta { color: var(--brand-200); }

/* İşletim sistemi sürüm çipi de seçim — o da petrol. Mürekkep dolguyla
   duruyordu ve sayfadaki üçüncü siyah kütleydi. */
.natsom.page-configureproduct .natsom-os-chip.is-selected {
    background: var(--bg-brand);
    border-color: var(--bg-brand);
    color: var(--text-on-brand);
}

/* --- 7. Adım şeridi ------------------------------------------------------ */

/* orderflow.js §1 üretir. Sayfa başlığının hemen altında, tek satır.
   Petrol burada üçüncü kez görünüyor (bölüm etiketi, seçim, ilerleme) — rengin
   rol kazanması tam olarak bu tekrarla oluyor. */
.natsom .natsom-steps {
    margin: 10px 0 0;
}

.natsom .natsom-steps-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.natsom .natsom-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ns-text-3);
}

/* Adımlar arası bağ. İçerik değil süs olduğu için ::after, ve ilk adımın
   solunda ya da sonuncunun sağında çizgi olmaması gerektiği için :last-child
   hariç tutuluyor. */
.natsom .natsom-step:not(:last-child)::after {
    content: "";
    width: clamp(16px, 4vw, 48px);
    height: 1px;
    margin: 0 12px;
    background: var(--ns-line);
}

.natsom .natsom-step.is-done:not(:last-child)::after { background: var(--ns-ice-deep); }

.natsom .natsom-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid var(--ns-line);
    /* T023: tema yazı tipi (C2 kararı); rakamlar tabular kalıyor. */
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ns-text-3);
    background: transparent;
}

.natsom .natsom-step.is-done .natsom-step-no {
    border-color: var(--ns-ice-deep);
    color: var(--ns-ice-deep);
}

.natsom .natsom-step.is-current .natsom-step-no {
    background: var(--bg-brand);
    border-color: var(--bg-brand);
    color: var(--text-on-brand);
}

.natsom .natsom-step.is-current { color: var(--ns-text); font-weight: 500; }
.natsom .natsom-step.is-done { color: var(--ns-text-2); }

/* Telefonda üç ad yan yana sığmıyor; geçilmiş ve gelecek adımların adı
   düşüyor, rakamları kalıyor. Bulunulan adım her zaman yazılı. */
@media (max-width: 575px) {
    .natsom .natsom-step:not(.is-current) .natsom-step-name { display: none; }
    .natsom .natsom-step:not(:last-child)::after { margin: 0 8px; }
}

/* --- 8. Onay bloğu ------------------------------------------------------- */

/* orderflow.js §2 bunları düğmenin üstüne taşıyor. Burada tek bir alan gibi
   görünmeleri sağlanıyor: hukuki metin parça parça değil, blok hâlinde okunur.
   Bakır düğmeden ince bir çizgiyle ayrılıyor, çünkü onay düğmenin parçası
   değil, ön şartı. */
.natsom .panel-summary-primary .natsom-consents {
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.natsom .panel-summary-primary .natsom-consents .checkbox-styled {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* --- 9. Sepet listesi: tablo değil, kalemler ----------------------------- */

/* Sepet bir tabloyla anlatılıyordu: "Ürün/Seçenek | Fiyat/Dönem" başlık
   satırı, altında satırlar. İki sütunlu ve çoğu zaman tek satırlık bir liste
   için sütun başlığı, doldurulacak bir form gibi okunuyor. Başlık satırı
   kalkıyor; her kalem zaten kendini anlatıyor (ürün adı, sunucu adı, tutar,
   dönem). Mobilde vendor `data-content` ile aynı etiketleri satır içine
   basıyor, yani bilgi kaybı da yok. */
/* KART, BÖLÜM GÖVDESİDİR. Sepet paneli de kendi kabuğunu taşıyordu, sonuç
   çerçeve içinde çerçeve oldu. Kabuk dışarıda kalıyor, iç panel sadece
   satırlarını ayırıyor; kalemler kendi iç boşluklarını taşıdığı için kartın
   dolgusu da onlara bırakılıyor. */
.natsom.page-viewcart .panel-cart {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.natsom.page-viewcart .section-body:has(> .panel-cart) { padding: 0; overflow: hidden; }

.natsom.page-viewcart .panel-cart > .cart-heading { display: none; }

.natsom.page-viewcart .panel-cart > .panel-body { padding: 0; background: transparent; border: 0; }

.natsom.page-viewcart .cart-item {
    padding: 16px 20px;
    gap: 12px;
}

.natsom.page-viewcart .cart-item + .cart-item { border-top: 1px solid var(--border-subtle); }

.natsom.page-viewcart .cart-item-title-main {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ns-text);
}

/* Sunucu adı bir makine değeri — etiket değil, kimlik. */
.natsom.page-viewcart .cart-item-title-small {
    display: block;
    margin-top: 2px;
    font-family: var(--ns-font-mono);
    font-size: 12px;
    line-height: 1.4;
    color: var(--ns-text-3);
}

/* Fiyat bir açılır liste — dönem değiştirmenin yeri burası — ama düğme gibi
   değil, fiyat gibi görünmeli. Kırpılan "₺37,800.00 ..." de buradan geliyordu:
   düğmenin sabit genişliği metni kesiyordu. */
.natsom.page-viewcart .cart-item-pricing-dropdown > .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: none;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ns-text);
    box-shadow: none;
}

.natsom.page-viewcart .cart-item-pricing-dropdown > .btn:hover {
    border-color: var(--ns-line);
    background: var(--bg-surface);
}

/* Kırpılma temanın kendi zincirinden geliyor (`.panel-cart .cart-item .cart-item-price`
   — üç sınıf); iki sınıfla yazılan kural kaybediyordu ve fiyat
   "₺37,800.00 TRY/…" diye görünüyordu. Aynı derinlikte cevap veriliyor. */
.natsom.page-viewcart .panel-cart .cart-item .cart-item-price,
.natsom.page-viewcart .cart-item-price {
    overflow: visible;
    max-width: none;
    text-overflow: clip;
    white-space: nowrap;
    font-family: var(--ns-font-mono);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Yapılandırma satırları: gri kutu değil, fiyatın altındaki sessiz satırlar. */
.natsom.page-viewcart .cart-item-config { margin-top: 10px; }

.natsom.page-viewcart .config-option {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 3px 0;
    gap: 10px;
}

.natsom.page-viewcart .config-option .item-name,
.natsom.page-viewcart .config-option .item-value {
    font-size: 12.5px;
    color: var(--ns-text-2);
}

.natsom.page-viewcart .config-option .item-price {
    font-family: var(--ns-font-mono);
    font-size: 12.5px;
    color: var(--ns-text-2);
    font-variant-numeric: tabular-nums;
}

/* Seçilmemiş seçenekler listelenmez — orderflow.js §3 işaretler. Hepsi
   gizlendiğinde şerit de gitmeli: geriye 660x24'lük boş gri bir çubuk
   kalıyordu, yani kaldırdığımız gürültünün yerinde duran başka bir gürültü. */
.natsom.page-viewcart .config-option[hidden] { display: none !important; }

.natsom.page-viewcart .cart-item-config {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.natsom.page-viewcart .cart-item-config:not(:has(> .config-option:not([hidden]))) { display: none; }

/* Sepet altı eylemleri sessiz: "Alışverişe devam" ve "Sepeti boşalt" birer
   çıkış yolu, çağrı değil. Sayfadaki tek dolu düğme bakır CTA olmalı. */
.natsom.page-viewcart .panel-cart .panel-footer,
.natsom.page-viewcart .cart-actions {
    background: transparent;
    border-top: 1px solid var(--border-subtle);
    padding: 12px 20px;
}

.natsom.page-viewcart .panel-cart .panel-footer .btn,
.natsom.page-viewcart .cart-actions .btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ns-text-2);
    font-size: 13px;
    padding: 6px 8px;
}

.natsom.page-viewcart .panel-cart .panel-footer .btn:hover,
.natsom.page-viewcart .cart-actions .btn:hover {
    background: var(--bg-surface);
    color: var(--ns-text);
}

/* --- 10. Promosyon kutusu: uygulanmış bir kod iyi haberdir ---------------- */

/* Uygulanan kodun açıklaması bakır/kırmızı tonla yazılıyordu — sayfadaki tek
   uyarı rengi, üstelik hiçbir şey yanlış değilken. İndirim iyi haber: sakin
   yeşil, ve kodun kendisi mono bir rozet. */
.natsom.page-viewcart .panel-promo-code {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.natsom.page-viewcart .panel-promo-code .promo-code-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.natsom.page-viewcart .label-savings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--bg-success-tint);
    color: var(--ns-ok);
    font-family: var(--ns-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.natsom.page-viewcart .panel-promo-code .promo-code-description,
.natsom.page-viewcart .panel-promo-code .promo-code-content > span {
    color: var(--ns-text-2);
    font-size: 13px;
    line-height: 1.45;
}

/* --- 11. Son rötuşlar: çerçeve içinde çerçeve kalmasın ------------------- */

/* Fiyat ile satır eylemleri çarpışıyordu: "₺37,800.00 TRY/2 yı⊥". Sebep
   kırpmanın kalkması değil, sütunun sabit genişliği: `.cart-item-pricing`
   140px'e sabitlenmiş — tablo düzeninden kalma — ama içindeki düğme 186px.
   Taşan 46px doğrudan eylem sütununun üstüne biniyordu. Sütun içeriği kadar
   yer kaplıyor, artan genişliği ürün adı alıyor. */
.natsom.page-viewcart .cart-item-pricing {
    flex: 0 0 auto;
    width: auto;
    margin-right: 12px;
}

.natsom.page-viewcart .cart-item-title { flex: 1 1 auto; min-width: 0; }

.natsom.page-viewcart .cart-item-actions .btn-icon {
    color: var(--ns-text-3);
    background: transparent;
    border: 0;
}

.natsom.page-viewcart .cart-item-actions .btn-icon:hover { color: var(--ns-text); }

/* Kart içindeki uyarı kutusu ikinci bir yüzey kurmasın: zemini zaten beyaz,
   geriye sadece sol vurgu çizgisi ve iç boşluk kalıyor. */
.natsom.page-order .main-content .section-body > .alert {
    background: transparent;
    box-shadow: none;
    margin: 0 0 14px;
    padding: 0 0 0 14px;
}

.natsom.page-order .main-content .section-body > .alert .alert-body {
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ns-text-2);
}

/* Uygulanmış bir kampanyanın açıklaması uyarı değil: bakır yerine normal
   ikincil metin. Bakır bu sayfada tek bir işi yapıyor — düğme. */
.natsom.page-viewcart .promo-code-content-desc {
    color: var(--ns-text-2) !important;
    font-size: 13px;
    line-height: 1.5;
}

/* Fatura ve ödeme kartları: seçili olan petrol, seçili olmayan sessiz. İkisi
   de yapılandırma ekranındaki işletim sistemi kartlarıyla aynı dili konuşuyor,
   çünkü üçü de aynı soruyu soruyor: hangisi? */
.natsom.page-viewcart .section-body > .panel-check,
.natsom.page-viewcart .section-body .panel-check {
    box-shadow: none;
    margin: 0;
}

.natsom.page-viewcart .section-body .panel-check + .panel-check { border-top-width: 0; }

/* Mürekkep panelde onay kutusu: parlak beyaz kare yerine ince çerçeve,
   işaretlendiğinde petrol. */
.natsom .panel-summary-primary .checkbox-styled {
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
}

.natsom .panel-summary-primary .checkbox-styled.checked {
    background: var(--bg-brand);
    border-color: var(--bg-brand);
}

/* İndirim satırı: açıklama sarmalansın, tutar sarmalanmasın. "— ₺0.00 TRY"
   iki satıra bölünüyordu ve para "TRY"siz kalıyordu. */
.natsom .panel-summary-primary .list-item-promo { align-items: flex-start; }

.natsom .panel-summary-primary .list-item-promo .item-name {
    flex: 1 1 auto;
    min-width: 0;
}

.natsom .panel-summary-primary .list-item-promo .item-value {
    flex: 0 0 auto;
    margin-left: 12px;
    white-space: nowrap;
}

/* Sayacın altındaki sınır satırı — configureproduct.js §8. Sayaç tek başına
   808px'lik bir kartta yalnız duruyordu; kartı dolduran şey süs değil, bilgi. */
.natsom-qty-note {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ns-text-3);
}

.natsom-qty { flex-wrap: wrap; border: 0; width: auto; }

.natsom-qty > .natsom-qty-btn,
.natsom-qty > .natsom-qty-value { border: 1px solid var(--border-default, rgba(0, 0, 0, .14)); }

.natsom-qty > .natsom-qty-dec { border-radius: 10px 0 0 10px; border-right-width: 0; }
.natsom-qty > .natsom-qty-inc { border-radius: 0 10px 10px 0; border-left-width: 0; }

/* Boş kalan seçenek listesi çizgi bırakmasın: bütün satırları gizlenince
   geriye ayırıcı çizgisiyle birlikte boş bir <ul> kalıyordu. */
.natsom .summary-list-configoptions:not(:has(.list-item)) { display: none; }

/* Sayaç kartı içeriği kadar: 46px'lik bir kontrol için 120px'lik kutu. */
.natsom.page-configureproduct .section-body:has(> .panel-range-slider) { padding: 16px 20px; }

/* Anonim CTA bloğu etiket değil, cümle. "Siparişinizi tamamlamak için
   hesabınıza ihtiyacımız var" bir bölüm adı değil, müşteriye söylenen şeyin
   kendisi — büyük harfli mono etikete çevrilince iki satıra sarıp bağırmaya
   başlıyordu. Bu blok cümle olarak kalıyor. */
.natsom.page-viewcart .natsom-anon-cta > .section-header {
    display: block;
    margin-bottom: 14px;
}

.natsom.page-viewcart .natsom-anon-cta .section-title {
    font-family: var(--ns-font-sans);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    text-transform: none;
    color: var(--ns-text);
}

.natsom.page-viewcart .natsom-anon-cta .section-desc {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ns-text-2);
}

/* --- 12. İlk boyamada eski arayüz görünmesin ----------------------------- */

/* natsom_assets.php'nin ClientAreaHeadOutput kancası <html>'e `natsom-cart-pre`
   koyuyor — ilk boyamadan ÖNCE, çünkü tek çalışabildiği an orası.
   orderflow.js iyileştirmeler yerine oturduğunda sınıfı kaldırıyor.
   Ölçüldü 2026-09-24, yapılandırma sayfası:
   first-contentful-paint 2888ms, DOMContentLoaded 2956ms — arada 68ms, yani
   dört kare boyunca vendor'ın kendi işaretlemesi ekranda: ham ion kaydırıcısı
   ızgarasıyla, bölünmemiş döngü başlıkları, kart olmadan önceki işletim
   sistemi açılır listesi. Sonra hepsi birden değişiyor. Müşterinin her
   yüklemede "bir an eski stil" diye gördüğü şey bu.

   `visibility: hidden`, `display: none` değil: kutu yerinde kalır, sayfanın
   yüksekliği değişmez, kaydırma zıplamaz. Sağdaki özet rayı gizlenmiyor —
   onun içeriğini zaten AJAX dolduruyor ve kendi yükleyicisi var.

   AÇILMAYI KİMSE ENGELLEYEMEZ. Sınıf bir script tarafından konuyor, yani
   JavaScript kapalıyken hiç var olmuyor ve hiçbir şey gizlenmiyor. Script
   yüklenip de işini bitiremezse (404, hata, kayan bir Lagom seçicisi) aşağıdaki
   animasyon 1.5 saniye sonra kimseyi beklemeden gösteriyor. Normal yüklemede
   sınıf ~70ms'de kalktığı için bu animasyonun sırası hiç gelmiyor. */
html.natsom-cart-pre .page-configureproduct #frmConfigureProduct .main-content,
html.natsom-cart-pre .page-viewcart .panel-cart {
    visibility: hidden;
    animation: natsomCartReveal 0s 1500ms forwards;
}

@keyframes natsomCartReveal {
    to { visibility: visible; }
}

/* --- 13. Taşınan yapılandırılabilir seçenekler alan gibi görünür --------- */

/* configureproduct.js §8b kapsayıcıyı ana bilgisayar adının satırına taşıyor.
   Burada kalan iş, WHMCS'in "bölüm" işaretlemesini "alan" gibi göstermek:
   başlık alan etiketi olur, gövde kabuğunu bırakır, aralıklar `.form-group`
   ile aynı olur. Ölçülen hedef — label[for=inputHostname]: 13.5px/500,
   --ns-text, 6px alt boşluk; .form-group: 18px alt boşluk. */
/* Kabuğu kaldıran kural §5'in KART kuralıyla aynı derinlikte yazılmak zorunda:
   orası `.section:has(> .section-header) > .section-body` diyor, yani altı
   sınıf. Dört sınıflık bir kural kaybediyordu ve sayaç, alan etiketinin altında
   808x160'lık bir kutunun içinde duruyordu — taşındığı hâlde hâlâ "bölüm" gibi
   görünüyordu. Buradaki zincir bir sınıf daha derin. */
.natsom.page-configureproduct .main-content .natsom-optcol .product-configurable-options,
.natsom.page-configureproduct .main-content .natsom-optcol .section,
.natsom.page-configureproduct .main-content .natsom-optcol .section:has(> .section-header) > .section-body,
.natsom.page-configureproduct .main-content .natsom-optcol .section-body,
.natsom.page-configureproduct .main-content .natsom-optcol .section-body:has(> .panel-range-slider),
.natsom.page-configureproduct .main-content .natsom-optcol .panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.natsom.page-configureproduct .main-content .natsom-optcol .section + .section { margin-top: 18px; }

.natsom.page-configureproduct .main-content .natsom-optcol .section-header {
    display: block;
    margin: 0 0 6px;
}

/* Bölüm eyebrow'u değil, alan etiketi: mono/büyük harf/petrol gidiyor,
   komşusu "Ana bilgisayar adı" ile aynı satır oluyor. */
.natsom.page-configureproduct .main-content .natsom-optcol .section-title {
    font-family: var(--ns-font-sans);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ns-text);
}

/* Alanlar arası boşluk `.form-group`ınkiyle aynı. */
.natsom.page-configureproduct .natsom-optcol { margin-bottom: 18px; }

/* Sayacın altındaki sınır satırı artık alan yardım metni: ana bilgisayar
   adının altındaki `.natsom-help` ile aynı ölçüler. */
.natsom.page-configureproduct .main-content .natsom-optcol .natsom-qty-note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ns-text-3);
}

/* Geride kalan boş bölüm kabuğu yer kaplamasın: içi boşaldı ama `.section`ın
   28px alt boşluğu duruyordu ve ödeme döngüsüyle sunucu ayarları arasında
   sebepsiz bir boşluk bırakıyordu. */
.natsom.page-order .main-content .section.natsom-section-emptied:not(:has(*)),
.natsom.page-order .main-content .section:not(:has(*)) {
    display: none;
    margin: 0;
}

/* İptal ekranı — "Hemen" seçildiğinde beliren bedel satırı
   (cancelrequest.js). Uyarı kutusu değil, alanın yardım metni: kırmızı bir
   panel müşteriyi iptal etmekten caydırmaya çalışıyormuş gibi okunurdu; burada
   amaç caydırmak değil, ne olacağını söylemek. */
.natsom .natsom-cancel-warning {
    margin: 8px 0 0;
    padding: 0 0 0 11px;
    border-left: 2px solid var(--ns-copper);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ns-text-2);
}

.natsom .natsom-cancel-warning[hidden] { display: none; }

/* T060: veri silme onayı (cancelrequest.js). Uyarı satırı, kutu ve iki hata:
   kutunun altında (işaretlenmeden gönderim) ve panelin başında (sunucunun geri
   çevirmesi). Kutu, alan adı kutusuyla aynı iCheck görünümünde. */
.natsom .natsom-cancel-consent__warning {
    margin: 0 0 12px;
    color: var(--ns-text-2);
}

/* Lagom'un .checkbox'ı zaten flex; iki satırlık etikette kutu ortada değil,
   ilk satırın hizasında kalsın. Hata satırı, alan adı notu gibi metnin
   başladığı yerden (34px). */
.natsom .natsom-cancel-consent__label {
    align-items: flex-start;
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
}

.natsom .natsom-cancel-consent__label .checkbox-styled { margin-top: 2px; }

.natsom .natsom-cancel-consent__error { padding-left: 34px; }

.natsom .natsom-cancel-consent__error,
.natsom .natsom-cancel-consent__refused {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ns-danger);
}

.natsom .natsom-cancel-consent__refused { margin: 0 0 12px; font-weight: 600; }

.natsom .natsom-cancel-consent__error[hidden] { display: none; }

/* Onay ekranındaki iki düğme eşit ağırlıkta olmasın: hizmete gitmek birincil,
   panele gitmek ikincil. orderflow.js §5 ikisini .natsom-complete-actions
   satırına alıyor (T023): masaüstünde yan yana, ortalı, aynı yükseklikte;
   telefonda tam genişlik, alt alta, aralarında boşlukla. */
.natsom .message .natsom-complete-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
}

.natsom .message .natsom-complete-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

@media (max-width: 575px) {
    .natsom .message .natsom-complete-actions {
        flex-direction: column;
        align-self: stretch;
    }

    .natsom .message .natsom-complete-actions .btn { width: 100%; }
}

/* T023: faturadaki "İşlemler › İndir" telefonda simgeyi en sola, yazıyı en
   sağa itiyordu (Lagom'un mobil list-group-item'ı space-between). Bu panelde
   rozet yok; simge ile yazı yan yana. Yalnızca fatura sayfası. */
.natsom.page-viewinvoice .panel-sidebar .list-group-item {
    justify-content: flex-start;
    gap: 8px;
}

/* T023: açıklama paragrafı kartın tüm genişliğine (~1800px) yayılmasın. */
.natsom.page-complete .message .message-desc {
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ── T020 (2026-10-11) — ödeme ve fatura ekranları ──────────────────────────
   includes/hooks/natsom_checkout_ux.php, orderflow.js, configureproduct.js,
   invoice.js. */

/* AC-6: bakiye kullanımı, özet kutusunda toplamın altında. */
.natsom .natsom-credit {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--ns-line-soft);
    border-radius: var(--ns-r-sm);
    font-size: 13px;
}
.natsom .natsom-credit[hidden] { display: none; }
.natsom .natsom-credit__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.6;
}
.natsom .natsom-credit__row--faded { opacity: .75; }
.natsom .natsom-credit__skip {
    padding: 4px 0 0;
    font-size: 12.5px;
    color: inherit;
    opacity: .85;
    text-decoration: underline;
}

/* AC-7: nötr güven satırı, düğmenin altında. */
.natsom .natsom-checkout-secure {
    margin: 10px 0 0;
    font-size: 12.5px;
    text-align: center;
    opacity: .8;
}

/* P3: telefonda sabit toplam şeridi (orderflow.js stickyTotal). */
.natsom .natsom-sticky-total {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--ns-ink);
    color: var(--ns-on-ink);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
}
.natsom .natsom-sticky-total[hidden] { display: none; }
.natsom .natsom-sticky-total__text { display: flex; flex-direction: column; line-height: 1.2; }
.natsom .natsom-sticky-total__label { font-size: 12px; color: var(--ns-on-ink-2); }
.natsom .natsom-sticky-total__amount { font-size: 18px; font-weight: 600; }
.natsom .natsom-sticky-total__btn { flex: 0 0 auto; }

/* AC-8: sunucu adı hatası, alanın hemen altında. */
.natsom .natsom-field-error {
    flex: 1 0 100%;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ns-danger);
}
.natsom .natsom-field-foot:has(.natsom-field-error) { flex-wrap: wrap; }
.natsom input[aria-invalid="true"] { border-color: var(--ns-danger); }

/* AC-R: ödeme makbuzu — WHMCS'in tek satırlık yeşil uyarısının yerine. */
.natsom .natsom-receipt {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--ns-ok);
    border-radius: var(--ns-r);
    background: var(--ns-ok-soft);
    color: var(--ns-text);
}
.natsom .natsom-receipt__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ns-ok);
    color: var(--text-on-accent);
    animation: natsom-receipt-pop .35s ease-out both;
}
.natsom .natsom-receipt__body p { margin: 0; }
.natsom .natsom-receipt__title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.natsom .natsom-receipt__line { margin-top: 2px !important; }
.natsom .natsom-receipt__next { margin-top: 6px !important; color: var(--ns-text-2); }
.natsom .natsom-receipt__next a { text-decoration: underline; }
@keyframes natsom-receipt-pop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .natsom .natsom-receipt__icon { animation: none; }
}

/* P3: Bakiye Ekle sonrası kart formunun üstünde belge numarası. */
.natsom .natsom-forward-invoice {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--ns-text-2);
}

/* P3: Havale/EFT bilgilerinde IBAN — okunur boyut, yüksek kontrast, kopyala. */
.natsom .natsom-iban {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.natsom .natsom-iban__value {
    font-family: var(--ns-font-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    color: inherit;
    opacity: 1;
    user-select: all;
}
.natsom .natsom-iban__copy {
    padding: 2px 10px;
    border: 1px solid currentColor;
    border-radius: var(--ns-r-sm);
    background: transparent;
    color: inherit;
    font-size: 12.5px;
    line-height: 1.6;
    cursor: pointer;
}
.natsom .natsom-iban__copy.is-done { border-color: var(--ns-ok); color: var(--ns-ok); }
.natsom .panel-view-invoice .natsom-iban__value,
.natsom .panel-view-invoice .natsom-iban__copy { color: var(--ns-on-ink); }

/* C1 (gezinti 2026-10-11): "Bakiyemi bu siparişte kullanma" koyu özet kartında
   koyu petrol renginde kalıyordu (#276272 / #07161B ≈ 2,9:1). Lagom'un
   .btn-link kuralı (uzun :not() zinciri) her seçiciden ağır bastığı için düğme
   artık .btn/.btn-link taşımıyor; açık zeminli özet varyantında metin rengi. Koyu kartta #EFECE9 / #07161B ≈ 16:1. Görünüşü
   ikincil, çerçeveli bir düğme. */
.natsom .natsom-credit .natsom-credit__skip {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: var(--ns-r-sm);
    background: transparent;
    color: var(--ns-text);
    opacity: 1;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}
.natsom .panel-summary-primary .natsom-credit .btn.natsom-credit__skip,
.natsom .natsom-credit .natsom-credit__skip:is(.panel-summary-primary *) {
    color: var(--ns-on-ink);
}
.natsom .natsom-credit .natsom-credit__skip:hover,
.natsom .natsom-credit .natsom-credit__skip:focus-visible {
    text-decoration: underline;
}

/* C2: ödeme özetinde "Bugün Ödenmesi Gereken (KDV dahil)" ve tutar daktilo
   yazısıyla basılıyordu. Temanın yazısı; rakamlar eşit genişlikte, tutar
   kalın. Yapılandırma sayfasının özeti ve telefon şeridi de aynı kuralla. */
.natsom [data-total] .price-total,
.natsom [data-total] .price-amount-total,
.natsom.page-configureproduct .price-amount-total,
.natsom .natsom-sticky-total__amount {
    font-family: var(--ns-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.natsom [data-total] .price-amount-total,
.natsom.page-configureproduct .price-amount-total {
    font-weight: 700;
}
/* C2, kapsam eki: fatura sayfasındaki ödeme kutusunun "Toplam Tutar" etiketi
   ve tutarı da aynı daktilo yazısıyla basılıyordu. */
.natsom .panel-view-invoice .price-title,
.natsom .panel-view-invoice .price-amount {
    font-family: var(--ns-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}
.natsom .panel-view-invoice .price-amount { font-weight: 700; }

/* C4: Havale / EFT bilgileri — etiket/değer satırları, her değerin yanında
   kopyalama. Koyu ödeme kutusunda (panel-view-invoice) ve açık zeminli banka
   bölümünde aynı yapı; renkler zeminden alınıyor. */
.natsom .natsom-bank { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.natsom .natsom-bank__rows { margin: 0; }
.natsom .natsom-bank__row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid rgba(127, 127, 127, .25);
}
.natsom .natsom-bank__row:last-child { border-bottom: 0; }
.natsom .natsom-bank__row dt {
    /* C5: etiketler de temanın yazısıyla (C2 kararı); küçük, aralıklı. */
    margin: 0;
    font-family: var(--ns-font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}
.natsom .natsom-bank__value { flex: 0 1 auto; }
.natsom .natsom-bank__row dd {
    /* C5: değer ve kopyala simgesi aynı satırda, simge değerin hemen sağında.
       Uzun IBAN dörtlü gruplar hâlinde kendi içinde kırılır; simge alta
       düşmez. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    margin: 0;
    min-width: 0;
}
.natsom .natsom-bank__value { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.natsom .natsom-bank__iban {
    overflow-wrap: normal;
    word-break: normal;
    font-family: var(--ns-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    font-weight: 600;
}
.natsom .natsom-bank .natsom-bank__copy {
    /* C5: yalnızca simge; 40px dokunma alanı, 16px simge. Seçici .natsom-bank
       ile ağırlaştırıldı: Lagom'un ödeme kutusundaki
       ".payment-form.payment-btn-container button { width: 100% }" kuralı
       aksi hâlde düğmeyi tam genişliğe çekiyor. */
    position: relative;
    min-width: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -10px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .8;
    cursor: pointer;
}
.natsom .natsom-bank .natsom-bank__copy:hover,
.natsom .natsom-bank .natsom-bank__copy:focus-visible { opacity: 1; background: rgba(127, 127, 127, .15); }
.natsom .natsom-bank .natsom-bank__copy:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.natsom .natsom-bank__icon--done { display: none; }
.natsom .natsom-bank .natsom-bank__copy.is-done .natsom-bank__icon--copy { display: none; }
.natsom .natsom-bank .natsom-bank__copy.is-done .natsom-bank__icon--done { display: block; color: var(--ns-ok); }
.natsom .natsom-bank .natsom-bank__copy.is-done::after {
    content: attr(data-done-label);
    position: absolute;
    right: 0;
    bottom: calc(100% + 2px);
    padding: 3px 8px;
    border-radius: var(--ns-r-sm);
    background: var(--ns-paper);
    color: var(--ns-text);
    font-family: var(--ns-font-sans);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    pointer-events: none;
}
.natsom .natsom-bank__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.natsom .natsom-bank__hint { margin: 10px 0 0; font-size: 13px; font-weight: 500; }
.natsom .natsom-bank__note { margin: 8px 0 0; font-size: 12.5px; opacity: .8; }
.natsom .panel-view-invoice .natsom-bank,
.natsom .panel-view-invoice .natsom-bank .natsom-bank__copy { color: var(--ns-on-ink); }
.natsom .panel-view-invoice .natsom-bank .natsom-bank__copy.is-done .natsom-bank__icon--done { color: var(--success-300); } /* the site's dark --text-success; this box is not an ink host */

/* ---------------------------------------------------------------------------
   T030 — the profile (billing details) form, set by billingdetails.js
   ---------------------------------------------------------------------------

   Walkthrough round 3, the stakeholder's direction: calm, on-brand, one signal.
   - A field the order still needs: the theme's invalid border and one line of
     text under it ("Fatura için gerekli"). No tint, no side bar, no badge.
   - A rejected value (F17): the same border, the message under the field,
     aria-invalid + aria-describedby.
   - "Fatura kimliği" opens the "Ek Bilgiler" card: Bireysel / Kurumsal as two
     radio cards in the portal's petrol selection style (as the billing-cycle
     cards), then only that type's fields (F11).
*/
.natsom .form-group.natsom-needed .form-control,
.natsom .form-group.natsom-invalid .form-control {
    border-color: var(--ns-danger);
}

.natsom .natsom-needed-help,
.natsom .natsom-details-error {
    display: block;
    margin-top: .375rem;
    color: var(--ns-danger);
    font-size: .8125rem;
}

.natsom .natsom-needed-help[hidden],
.natsom .natsom-details-error:empty,
.natsom .natsom-type-note:empty {
    display: none;
}

.natsom .natsom-identity {
    margin-bottom: 1.25rem;
}

/* The divider sits inside the cell's padding, so it lines up with the fields. */
.natsom .natsom-identity::after {
    content: "";
    display: block;
    margin-top: 1.25rem;
    border-bottom: 1px solid var(--ns-line-soft);
}

.natsom .natsom-identity__title {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ns-text);
}

.natsom .natsom-type-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.natsom .natsom-type-option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r);
    background: var(--ns-card);
    cursor: pointer;
    font-weight: 400;
}

.natsom .natsom-type-option input {
    margin-top: .2rem;
    accent-color: var(--ns-petrol);
    flex: none;
}

.natsom .natsom-type-option__text {
    display: grid;
    gap: .125rem;
    min-width: 0;
}

.natsom .natsom-type-option__text strong {
    color: var(--ns-text);
    font-weight: 600;
}

.natsom .natsom-type-option__text span {
    color: var(--ns-text-2);
    font-size: .8125rem;
    line-height: 1.4;
}

.natsom .natsom-type-option:has(input:checked) {
    border-color: var(--ns-petrol);
    background: var(--ns-petrol-soft);
    box-shadow: 0 0 0 3px var(--ns-petrol-ring);
}

.natsom .natsom-type-option:has(input:focus-visible) {
    outline: 2px solid var(--ns-petrol);
    outline-offset: 2px;
}

.natsom .natsom-identity.natsom-needed .natsom-type-option {
    border-color: var(--ns-danger);
}

.natsom .natsom-identity__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
    margin-top: 1rem;
}

.natsom .natsom-identity__fields:not(:has(> :not([hidden]))) {
    display: none;
}

.natsom .natsom-identity__fields > .natsom-identity__cell {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    min-width: 0;
}

.natsom .natsom-identity__fields > .natsom-identity__cell--wide {
    grid-column: 1 / -1;
}

/* Bootstrap gives grid cells display:block, which outranks [hidden]. */
.natsom .natsom-identity__fields > [hidden],
.natsom .row > [class*="col-"][hidden] {
    display: none !important;
}

@media (max-width: 575.98px) {
    .natsom .natsom-type-choice,
    .natsom .natsom-identity__fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* T030 (F3/F23) — the verification landing page variant. */
.natsom-verify .natsom-verify-hint {
    max-width: 34rem;
    margin: .5rem auto 0;
}

.natsom-verify .natsom-verify-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* T030 (F13) — the sign-in page's "you will return to your order" line. */
.nsa-order-note {
    margin: -.25rem 0 1rem;
    font-size: .875rem;
    opacity: .8;
}

/* T030 (F7) — the anonymous checkout block's header stacks. The order-page rule
   `.natsom.page-order .main-content .section > .section-header { display:flex }`
   (0,5,0) outranked the block's own `display:block` (0,4,0) further up, so title,
   description and the new order line sat in three columns and the title wrapped
   into six lines at 390px. Same selector weight plus the block's class. */
.natsom.page-order .main-content .section.natsom-anon-cta > .section-header {
    display: block;
}


/* ── T035 — Natsom DNS page (natsom_dns addon), UX v2 ─────────────────────
   The markup, its layout CSS and its JS belong to the addon (synced from
   natsom-whmcs-dns-module, never edited here). This layer only skins the
   `ndns-*` classes with the theme's tokens, as the approved v2 mockups
   (BILLING-4-ux-proposal-v2, `dz-*` there): a white card on the page
   background, tinted pills and type badges, a tinted inline form row, the
   copper primary for the one loud action, and on phones a compact header, one
   bottom bar and bottom sheets. `data-ndns-*` attributes are behaviour hooks
   and are never styled. */
.natsom .ndns {
    --ndns-line: var(--ns-line);
    --ndns-card: var(--ns-card);
    --ndns-accent: var(--ns-petrol);
    /* The addon's error tint and text (DNS-15), from the theme's own danger. */
    --ns-danger-bg: color-mix(in srgb, var(--ns-danger) 8%, var(--ns-card));
    --ns-danger-text: var(--text-danger);   /* T051 P0: the site's danger ink, not a black mix */
    color: var(--ns-text);
}

/* Lagom styles every input, select and first table cell globally (44px boxes,
   16px padding, a native select frame, 24px on td:first-child). Inside the
   addon's framed controls the frame is the wrapper's, so the inner control is
   reset to bare. */
.natsom .ndns .ndns-in input,
.natsom .ndns .ndns-in select,
.natsom .ndns .ndns-search input,
.natsom .ndns .ndns-select select {
    height: auto;
    min-height: 38px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}
.natsom .ndns .ndns-select select,
.natsom .ndns .ndns-in select {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 26px 0 10px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 12px center, right 7px center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
.natsom .ndns .ndns-select select { padding-left: 2px; }
.natsom .ndns .ndns-in input { padding: 0 10px; }
.natsom .ndns .ndns-t th:first-child,
.natsom .ndns .ndns-t td:first-child { padding-left: 16px; }
.natsom .ndns .ndns-t th:last-child,
.natsom .ndns .ndns-t td:last-child { padding-right: 16px; }

/* Header: the domain, a live pill, the nameservers */
.natsom .ndns-head { margin: -8px 0 16px; }
.natsom .ndns-domain a { color: var(--ns-text); }
.natsom .ndns-domain a:hover { color: var(--ns-petrol); }
.natsom .ndns-live {
    border: 0;
    background: color-mix(in srgb, var(--ns-ok) 10%, transparent);
}
.natsom .ndns-ns code {
    border: 0;
    color: var(--ns-text-2);
    background: color-mix(in srgb, var(--ns-line) 30%, transparent);
}
.natsom .ndns-copy { font-size: .75rem; color: var(--ns-petrol); }

/* Notices and the read-only (Grace/Redemption) banner: the theme's calm alerts */
.natsom .ndns-notice {
    background: var(--ns-card);
    border-left-width: 4px;
    font-size: .875rem;
}
/* Error notices keep the addon's danger tint (DNS-15): the card background above is for ok/info only. */
.natsom .ndns-notice-error { background: var(--ns-danger-bg); }
.natsom .ndns-ro {
    background: var(--ns-petrol-soft, color-mix(in srgb, var(--ns-petrol) 6%, var(--ns-card)));
    border-color: color-mix(in srgb, var(--ns-petrol) 35%, transparent);
    color: var(--ns-text);
}

/* Card and toolbar */
.natsom .ndns-card { background: var(--ns-card); border-color: var(--ns-line); }
.natsom .ndns-search { background: var(--ns-card); }
.natsom .ndns-search input { color: var(--ns-text); }
.natsom .ndns-select { background: var(--ns-card); font-size: .875rem; }
.natsom .ndns-select select { color: inherit; }
.natsom .ndns-select.on { border-color: var(--ns-petrol); color: var(--ns-petrol); }
.natsom .ndns-search:focus-within,
.natsom .ndns-select:focus-within { border-color: var(--ns-petrol); box-shadow: 0 0 0 3px var(--ns-petrol-ring); }
/* One ring only: the theme's, as on the select and inputs; the addon's own outline is dropped. */
.natsom .ndns-search:focus-within { outline: 0; }
.natsom .ndns-clear { color: var(--ns-petrol); }

/* Buttons: ghost outline by default, copper for the primary action (as .btn) */
.natsom .ndns-btn {
    font-size: .8125rem;
    border-color: var(--action-secondary-border);
    color: var(--action-secondary-fg);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.natsom .ndns-btn-primary {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
}
.natsom .ndns-btn-primary:hover,
.natsom .ndns-btn-primary:focus { background: var(--action-primary-bg-hover); border-color: var(--action-primary-bg-hover); color: var(--action-primary-fg); }
.natsom .ndns-split .ndns-split-more { border-left-color: color-mix(in srgb, var(--action-primary-fg) 35%, transparent); }
.natsom .ndns-btn-danger { background: var(--ns-danger); border-color: var(--ns-danger); color: var(--text-on-accent); }
.natsom .ndns-btn-link,
.natsom .ndns-btn-link:hover { border-color: transparent; color: var(--ns-petrol); }
.natsom .ndns-btn-link-danger,
.natsom .ndns-btn-link-danger:hover { border-color: transparent; color: var(--ns-danger); }

/* Quick-add menu */
.natsom .ndns-pop { background: var(--ns-card); border-color: var(--ns-line); border-radius: var(--ns-r); }
.natsom .ndns-pop-item { color: var(--ns-text); }
.natsom .ndns-pop-item:hover,
.natsom .ndns-pop-item:focus { background: color-mix(in srgb, var(--ns-petrol) 6%, transparent); }

/* Table */
.natsom .ndns-t td { border-bottom-color: var(--ns-line-soft, var(--ns-line)); }
.natsom .ndns-t tbody tr:last-child > td { border-bottom: 0; }
.natsom .ndns-row:hover > td { background: color-mix(in srgb, var(--ns-petrol) 3%, transparent); }
.natsom .ndns-t th a:hover { color: var(--ns-text); }
.natsom .ndns-type {
    border: 0;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-line) 35%, transparent);
}
.natsom .ndns-content { color: var(--ns-text-2); }
.natsom .ndns-state.pub { color: var(--ns-petrol); }
.natsom .ndns-state.ok { color: var(--ns-ok); }

/* Inline form row: tinted, the edit row marked on its left edge */
.natsom .ndns-form > td { background: color-mix(in srgb, var(--ns-petrol) 4%, var(--ns-card)); border-bottom: 1px solid var(--ns-line); }
.natsom .ndns-form.edit > td { box-shadow: inset 3px 0 0 var(--ns-petrol); }
.natsom .ndns-in { background: var(--ns-card); border-color: var(--ns-line); border-radius: var(--ns-r-sm); }
.natsom .ndns-in input,
.natsom .ndns-in select { color: var(--ns-text); box-shadow: none; outline: none; }
.natsom .ndns-in .sfx { background: color-mix(in srgb, var(--ns-line) 22%, transparent); }
.natsom .ndns-in:focus-within { border-color: var(--ns-petrol); box-shadow: 0 0 0 3px var(--ns-petrol-ring); }
/* A wrong field: the addon's 2 px danger edge (border + inset ring, DNS-15), never a faint outer halo. */
.natsom .ndns-in.bad { border-color: var(--ns-danger); box-shadow: inset 0 0 0 1px var(--ns-danger); }
.natsom .ndns-err { color: var(--ns-danger); }
/* The error line keeps its height while empty (the addon reserves it, DNS-6),
   so a blur check that fills it never moves Kaydet under a finger at 390. */
.natsom .ndns .ndns-err { min-height: calc(.8125rem * 1.4); }

.natsom .ndns-empty b { color: var(--ns-text); }
.natsom .ndns-rorecs { color: var(--ns-text-2); }

/* Delete dialog */
.natsom .ndns-dlg { background: var(--ns-card); color: var(--ns-text); }
.natsom .ndns-dlg h2 { color: var(--ns-text); }
.natsom .ndns-dlg-rec { background: color-mix(in srgb, var(--ns-line) 14%, transparent); border-color: var(--ns-line); }
.natsom .ndns-dlg-rec .ndns-content { color: var(--ns-text); }

/* T048 — the state pages (C–H: no editor, why, what to do), the row's
   "Siliniyor", and a failed save's reason inside the open form. Same tokens as
   above: the NS on a state page look like the header's NS chips, the reason
   is the theme's danger like the field errors. Row Düzenle/Sil, the empty
   state's "+ Kayıt ekle" and the state-page buttons are the existing .ndns-btn
   skins. */
.natsom .ndns-state.del { color: var(--ns-danger); }
.natsom .ndns-state-title { color: var(--ns-text); }
.natsom .ndns-state-text { color: var(--ns-text-2); }
.natsom .ndns-state-ns { color: var(--ns-text-3); }
.natsom .ndns-state-ns code {
    border: 0;
    color: var(--ns-text-2);
    background: color-mix(in srgb, var(--ns-line) 30%, transparent);
}

@media (max-width: 767px) {
    /* The domain is the page title on phones (v2 mobile revision). */
    .natsom.page-natsom_dns .main-header { display: none; }
    .natsom .ndns-mback { color: var(--ns-text-2); }
    .natsom .ndns-mtitle { color: var(--ns-text); }
    .natsom .ndns-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-ok) 18%, transparent); }
    .natsom .ndns-icon { border-radius: 10px; color: var(--ns-petrol); font-size: 1rem; }
    .natsom .ndns-select { font-size: .8125rem; font-weight: 600; }
    .natsom .ndns-select.on { background: var(--ns-petrol-soft, color-mix(in srgb, var(--ns-petrol) 8%, var(--ns-card))); }
    .natsom .ndns-row:hover > td { background: transparent; }
    .natsom .ndns .ndns-row > td:first-child,
    .natsom .ndns .ndns-row > td:last-child { padding: 0; }
    .natsom .ndns .ndns-form > td:first-child { padding: 14px; }
    .natsom .ndns-row { border-bottom-color: var(--ns-line-soft, var(--ns-line)); }
    .natsom .ndns-t tbody tr:last-child { border-bottom: 0; }
    .natsom .ndns-mbar { background: var(--ns-card); border-top-color: var(--ns-line); }
    .natsom .ndns-mbar .ndns-btn { font-size: .9375rem; }
    .natsom .ndns-pop,
    .natsom .ndns-dlg { background: var(--ns-card); border: 0; }
    .natsom .ndns-pop h6 { margin: 4px 4px 6px; font-size: .75rem; }
    .natsom .ndns-pop-item { border-top-color: var(--ns-line-soft, var(--ns-line)); }
    .natsom .ndns-pop form:first-of-type .ndns-pop-item { border-top: 0; }
}

/* ==========================================================================
   T049 checkout e-mail code (emailcode.js, natsom_email_code.php; T047)
   Our own card instead of Lagom's .alert-lagom, whose flex row laid the text,
   the field and the status out as thin side-by-side columns (and clipped the
   button at 390). One column: text, then the action; the field and "Doğrula"
   share a row; resend is a quiet text button under it; the status is a tinted
   line, the same states as the DNS page's form alert (T048).
   ========================================================================== */
.natsom .natsom-email-code {
    --nec-danger-bg: color-mix(in srgb, var(--ns-danger) 8%, var(--ns-card));
    --nec-danger-text: var(--text-danger);
    display: block;
    margin: 0;
    padding: 18px 20px;
    background: var(--ns-petrol-soft);
    border: 1px solid var(--ns-petrol-line);
    border-radius: var(--ns-r);
    color: var(--ns-text);
    font-size: .875rem;
    line-height: 1.5;
    text-align: left;
}
.natsom .natsom-email-code [hidden] { display: none !important; }
.natsom .natsom-email-code__intro { margin: 0 0 14px; color: var(--ns-text); overflow-wrap: anywhere; }
.natsom .natsom-email-code__send { min-height: 40px; }
.natsom .natsom-email-code__label {
    display: block;
    margin: 0 0 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ns-text-2);
}
.natsom .natsom-email-code__row { display: flex; align-items: stretch; gap: 8px; }
.natsom .natsom-email-code .natsom-email-code__input {
    width: 11.5rem;
    max-width: 100%;
    height: 44px;
    padding: 0 12px;
    font-family: var(--ns-font-mono);
    font-size: 1.25rem;
    letter-spacing: .4em;
    text-indent: .2em;
    text-align: center;
    color: var(--ns-text);
    background: var(--ns-card);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-r-sm);
    box-shadow: none;
}
.natsom .natsom-email-code .natsom-email-code__input:focus {
    border-color: var(--ns-petrol);
    box-shadow: 0 0 0 3px var(--ns-petrol-ring);
    outline: 0;
}
.natsom .natsom-email-code .natsom-email-code__input.is-invalid {
    border-color: var(--ns-danger);
    box-shadow: inset 0 0 0 1px var(--ns-danger);
}
.natsom .natsom-email-code__verify { min-height: 44px; padding-left: 20px; padding-right: 20px; }
.natsom .natsom-email-code .natsom-email-code__resend {
    display: inline-block;
    margin: 8px 0 0;
    padding: 4px 0;
    min-height: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ns-ice-deep);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.natsom .natsom-email-code .natsom-email-code__resend:disabled {
    color: var(--ns-text-3);
    text-decoration: none;
    opacity: 1;
    cursor: default;
}
.natsom .natsom-email-code__status { margin: 0; }
.natsom .natsom-email-code__status:empty { display: none; }
.natsom .natsom-email-code__status.is-ok,
.natsom .natsom-email-code__status.is-error {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--ns-r-sm);
    font-size: .8125rem;
}
.natsom .natsom-email-code__status.is-ok { background: var(--ns-ok-soft); color: var(--ns-ok); }
.natsom .natsom-email-code__status.is-error {
    background: var(--nec-danger-bg);
    color: var(--nec-danger-text);
    border-left: 3px solid var(--ns-danger);
}
/* Verified: the card itself turns into the confirmation. */
.natsom .natsom-email-code.is-verified { background: var(--ns-ok-soft); border-color: color-mix(in srgb, var(--ns-ok) 30%, transparent); }
.natsom .natsom-email-code.is-verified .natsom-email-code__status { margin: 0; padding: 0; background: none; font-size: .875rem; font-weight: 500; }

/* Inside the checkout refusal (natsom_checkout_gate.php's [data-natsom-email-code] slot): the card sits in the
   white error list, so it keeps the tint as a border only. */
.natsom [data-natsom-email-code].m-t-2x { margin-top: 12px !important; }
.natsom [data-natsom-email-code] .natsom-email-code:not(.is-verified) { background: var(--ns-card); }
/* The link fallback's two actions: one wrapping row with a real gap. */
.natsom .natsom-block-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.natsom .natsom-block-actions .btn { margin: 0 !important; }

@media (max-width: 575.98px) {
    .natsom .natsom-email-code { padding: 16px; }
    .natsom .natsom-email-code__send { width: 100%; min-height: 44px; }
    .natsom .natsom-email-code .natsom-email-code__input { flex: 1 1 0; width: 0; min-width: 0; }
    .natsom .natsom-email-code__verify { flex: 0 0 auto; }
    .natsom .natsom-email-code .natsom-email-code__resend { min-height: 44px; padding: 12px 0; margin-top: 0; }
    .natsom .natsom-block-actions .btn { width: 100%; min-height: 44px; }
}


/* ==========================================================================
   T051 P0 — the store's look, phase 0 (docs/THEME-OVERRIDES.md change log)
   Tokens re-synced from natsom-store (site-tokens.css), Plex Mono self-hosted
   (custom.css), badges in section 8, table heads in 3b'. This block: the one
   CTA hierarchy, the mono scope and the amount nowrap.
   ========================================================================== */

/* One primary per view. The header's "Yeni Destek Bildirimi" is persistent
   chrome, so it takes the site's header-CTA style (secondary, natsom-store
   nav-root.tsx:223-227), and the page's own primary keeps the copper. */
.natsom .app-nav .nav-item-btn .btn-primary {
    background-color: var(--action-secondary-bg);
    border-color: var(--action-secondary-border);
    color: var(--action-secondary-fg);
    box-shadow: none;
}
.natsom .app-nav .nav-item-btn .btn-primary:hover,
.natsom .app-nav .nav-item-btn .btn-primary:focus {
    background-color: var(--action-ghost-bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Secondary actions on dark and brand panels. Two Lagom panels paint their
   own dark ground without being ink hosts: the dashboard's "Yeni Alan Adı
   Kaydet" (Ink) and the sidebar's domain search (petrol, `panel-sidebar-primary`).
   Their buttons read the secondary's light-ground values (resolved on :root),
   i.e. dark text on a dark panel. They take the site's secondary on a dark band
   instead (natsom-store sections.css [data-tone=dark]: brand-500 edge,
   neutral-100 ink). Selectors mirror Lagom's (theme.css `.client-home-panels
   .panel-body .input-group .input-group-btn .btn`) with `.lagom.natsom` added. */
.lagom.natsom .client-home-panels .panel-domain-register .panel-body .input-group .input-group-btn .btn:not(.btn-primary),
.lagom.natsom .panel-sidebar-primary .panel-body .btn.btn-primary-faded {
    background: transparent;
    border-color: var(--brand-500);
    color: var(--neutral-100);
}
.lagom.natsom .client-home-panels .panel-domain-register .panel-body .input-group .input-group-btn .btn:not(.btn-primary):hover,
.lagom.natsom .client-home-panels .panel-domain-register .panel-body .input-group .input-group-btn .btn:not(.btn-primary):focus,
.lagom.natsom .panel-sidebar-primary .panel-body .btn.btn-primary-faded:hover,
.lagom.natsom .panel-sidebar-primary .panel-body .btn.btn-primary-faded:focus {
    background: color-mix(in srgb, var(--neutral-100) 10%, transparent);
    border-color: var(--brand-300);
    color: var(--neutral-100);
}

/* The invoice page's own status label: WHMCS gives Unpaid `label-danger`.
   Unpaid is "waiting on the customer" (warning), not an error. */
.natsom .invoice-status.label-danger {
    background-color: var(--bg-warning-tint);
    border-color: transparent;
    color: var(--text-warning);
}

/* Mono is for amounts, IDs and codes. `.price` is mono (3c), and its sentence
   label inherited it: the copy goes back to sans, the figure stays mono. */
.natsom .price .price-title {
    font-family: var(--font-family-base);
    letter-spacing: 0;
}

/* An amount never breaks inside itself ("₺2,014.5 / 6 TRY" at 390). */
.natsom .amount,
.natsom .price-amount,
.natsom .invoice-amount,
.natsom td.numeric,
.natsom .panel-view-invoice .table td:last-child {
    white-space: nowrap;
}

/* The light footer (FmB, walkthrough step 8). site-tokens.css lists
   `.natsom .main-footer` among the Ink hosts (the generator's INK_SURFACES), so
   the dark semantic block lands on it. It is re-declared light here, after it,
   at the same specificity: the dropdown-mirror pattern (section 5). The --copy-*
   / --line-* anchors are not redefined by the ink block, so they are read. */
.natsom .main-footer {
    --bg-canvas:        var(--canvas-light);
    --bg-surface:       #FFFFFF;
    --bg-elevated:      #FFFFFF;
    --bg-sunken:        var(--canvas-alt);
    --text-primary:     var(--brand-950);
    --text-secondary:   var(--copy-secondary);
    --text-muted:       var(--copy-muted);
    --text-brand:       var(--brand-800);
    --text-link:        var(--brand-700);
    --text-link-hover:  var(--brand-900);
    --border-subtle:    var(--line-subtle);
    --border-default:   var(--line-default);
    --border-strong:    var(--line-strong);
    --border-focus:     var(--accent-600);
    --focus-ring:       0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent-600);
    background-color: var(--canvas-alt);
    border-top: 1px solid var(--line-subtle);
    color: var(--copy-muted);
}

/* ── T051 P1 — mobile hierarchy ──────────────────────────────────────────────
   Vendor markup targeted here is listed in docs/THEME-OVERRIDES.md (T051 P1).

   a. Dashboard tiles. includes/hooks/natsom_mobile.php takes the swiper classes
      off `.tiles` before lagom-app.js runs (so no carousel) and adds
      `.natsom-tiles-grid`. Below 768px the four tiles are a 2×2 grid; from
      768px Lagom's own col-md-3 row is unchanged. */
@media (max-width: 767px) {
    .natsom .tiles.natsom-tiles-grid > .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 24px;
    }

    .natsom .tiles.natsom-tiles-grid > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* The tile keeps Lagom's 24px bottom margin as the row gap below the grid,
       not inside each cell, where height: 100% would push it into the next card. */
    .natsom .tiles.natsom-tiles-grid .tile {
        height: 100%;
        min-height: 88px;
        margin-bottom: 0;
    }
}

/* The unpaid tile when it is above 0 (Lagom marks the stat and the icon
   text-danger then): the warning tone of the badge map, "waiting on the
   customer", not the error red. At every width. Lagom's `.text-danger` is
   `color: var(--text-danger-color) !important`, so the variable is re-pointed
   for the tiles instead of out-ranking the rule. */
.natsom .tiles .tile {
    --text-danger-color: var(--text-warning);
}

.natsom .tile:has(.tile-stat.text-danger) {
    background-color: var(--bg-warning-tint);
    border-color: var(--warning-300);
}

/* c. List rows: the line mobile.js adds to the first cell when the date or
      status column is hidden by DataTables Responsive. */
.natsom .natsom-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
    font-weight: 400;
}

/* d. Ticket view, with Lagom's "collapsible tabs" page setting on (release
      step): the reply box sits behind the "Yanıtla" tab. On a phone the tab
      row wraps instead of scrolling sideways, so "Eklentiler" is not cut. */
@media (max-width: 767px) {
    .natsom .panel-ticket-reply .nav-tabs.nav-tabs-collapse {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    /* A wrapped row keeps the 44px target but drops the 64px desktop tab height. */
    .natsom .panel-ticket-reply .nav-tabs.nav-tabs-collapse > li > a {
        height: auto;
        min-height: 44px;
    }
}

/* ═══ T051 copy-2 (mkt T034 copy-2 row 1) ═══
   The reply editor's footer is one string built in Lagom's scripts.js:
   "lines: N   words: N   <span.markdown-save>…</span>". The counters are bare
   text nodes in English with no lang key, so they are hidden by sizing the line
   to zero and giving the save indicator ("Taslak kaydedildi") its size back. */
.natsom .md-footer .small-font {
    font-size: 0;
}

.natsom .md-footer .small-font .markdown-save {
    font-size: var(--font-size-xxs);
}

/* ═══ T047 BILLING-7 (item 5, mkt ux #4): the mobile sticky "Devam Et" ═══
   Lagom pins #orderSummaryMob (.order-summary-mob.is-fixed) to the bottom of the
   configure step on a phone, but its surface computed to transparent and its
   button is the vendor's `btn-primary-faded`, an outline here: a ghost "Devam
   Et" floating over the billing-cycle cards. The bar gets the elevated surface
   and a top rule, the button the one loud action (the same tokens as the
   desktop summary panel), and the bar keeps clear of the iPhone home indicator.
   Vendor markup targeted: #orderSummaryMob, .btn-checkout. On a Lagom update,
   re-check the configure step at 390. */
.natsom .order-summary-mob.is-fixed {
    background-color: var(--bg-elevated);
    border-top: 1px solid var(--border-default);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}

.natsom .order-summary-mob.is-fixed .btn-checkout {
    width: 100%;
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
    font-weight: 600;
}

.natsom .order-summary-mob.is-fixed .btn-checkout:hover,
.natsom .order-summary-mob.is-fixed .btn-checkout:focus {
    background: var(--action-primary-bg-hover);
    border-color: var(--action-primary-bg-hover);
    color: var(--action-primary-fg);
}

/* T047 BILLING-7 round 2: the domain step's search tabs ("Yapay Zekâ ile Öner" /
   "Klasik Arama") sit on the dark search panel. Lagom's active tab kept the
   petrol text with no surface of its own (rgba(255,255,255,.06) under it), so
   the selected tab was dark on dark and near-invisible. The active tab gets
   the elevated surface with the default text; the other one stays light text
   on the panel. Scoped to the domain step, the only page with this panel. */
.natsom.page-configureproductdomain .btn-tab-group .btn.active,
.natsom.page-configureproductdomain .btn-tab-group .btn.active:hover,
.natsom.page-configureproductdomain .btn-tab-group .btn.active:focus {
    background-color: var(--bg-elevated);
    border-color: var(--bg-elevated);
    color: var(--text-primary);
}

/* T047 BILLING-6: the read-only "Otomatik ödeme: Kapalı" row on the service page, and its note. */
.natsom .natsom-autopay { flex-wrap: wrap; }
.natsom .natsom-autopay__note { flex-basis: 100%; margin-top: 4px; font-size: .8125rem; color: var(--ns-text-2); }
.natsom .natsom-credit-line { margin-bottom: 12px; color: var(--ns-text-2); }
/* The line under the domain auto-renew switch (autopay.js). */
.natsom .natsom-renew-note { margin-top: 12px; font-size: .8125rem; color: var(--ns-text-2); }
/* T065: the belgeli block at checkout (custom-tos.tpl): mkt's S-17 notice, the names, the early-performance box. */
/* The rail can be the dark summary panel: the text takes the panel's own colour, like the two consents above it. */
.natsom .natsom-belgeli-checkout { margin-top: 12px; }
.natsom .natsom-belgeli-notice,
.natsom .natsom-belgeli-domains { margin: 0 0 8px; font-size: .8125rem; line-height: 1.45; color: inherit; }
.natsom .natsom-belgeli-notice { opacity: .85; }
.natsom .natsom-belgeli-domains { font-weight: 600; }
/* T065 W2: the Pending line on a belgeli domain's page (belgeli.js). */
.natsom .natsom-belgeli-pending { margin-bottom: 16px; }
/* T070: the "12 Ay Sabit Fiyat" line, under the product price (configure, S-A) and under the recurring totals
   (cart/checkout, S-B). Its own line, not a footnote to a figure; the dark summary rail sets the colour. */
.natsom .natsom-price-lock-line { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: inherit; opacity: .85; }
.natsom .summary-item.natsom-price-lock-line .name { white-space: normal; font-weight: 400; }
.natsom .natsom-price-lock-line a { color: inherit; text-decoration: underline; }
/* T070: the "default + Değiştir" fold (the domain page's nameservers, the VDS hostname). */
.natsom .natsom-fold-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 12px; }
.natsom .natsom-fold-toggle { padding: 0; min-height: 44px; font-weight: 600; }
.natsom .natsom-fold-hint { margin: 0 0 12px; font-size: .8125rem; color: var(--ns-text-2); }
/* T076 (mkt T054 rev 2): the domain configuration page (orderflow.js confdomOffer / confdomPriceLines / idnDisplay).
   F1, the hosting offer card in place of Lagom's ✕ label: a calm offer, not an error. 1px brand border, card surface,
   12px radius. C2 is an OUTLINE button, so Devam Et stays the only filled CTA on the page. */
.natsom .natsom-offer { margin: 16px 0 0; padding: 16px; border: 1px solid var(--ns-petrol); border-radius: 12px; background: var(--ns-card); }
.natsom .natsom-offer-title { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--ns-text); }
.natsom .natsom-offer-price { margin: 4px 0 0; font-family: var(--ns-font-mono); font-size: .8125rem; color: var(--ns-text-2); }
.natsom .natsom-offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; }
.natsom .natsom-offer-add {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
    border: 1px solid var(--ns-petrol); background: transparent; color: var(--ns-petrol); font-weight: 600;
}
.natsom .natsom-offer-add:hover,
.natsom .natsom-offer-add:focus-visible { background: var(--ns-petrol-soft); color: var(--ns-petrol-hover); border-color: var(--ns-petrol-hover); }
.natsom .natsom-offer-all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* F5: the price line under "Kayıt Süresi" (mono, as on www). F3: the punycode under a Unicode name. */
.natsom .natsom-domain-price { display: block; font-family: var(--ns-font-mono); font-size: .8125rem; color: var(--ns-text-2); }
.natsom .natsom-idn-puny { display: block; font-family: var(--ns-font-mono); font-size: .75rem; color: var(--ns-text-3); word-break: break-all; }
/* F6: the domain card reads top-down, name → period → price, left-aligned (the trash stays top-right); at 1440 the
   period no longer sits ~800px away from its name. */
.natsom.page-configuredomains .domain-info-bottom { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; text-align: left; }
/* Lagom gives the period `order: 1` on mobile; the price line follows it at every width. */
.natsom.page-configuredomains .domain-info-bottom .natsom-domain-price { order: 2; }
/* F6: no empty card around Devam Et and no sticky bar (the page fits one screen): right-aligned from 600px, full
   width below it, as on confproduct. Lagom's data-fixed-actions still toggles `is-fixed`; it no longer moves anything. */
.natsom.page-configuredomains .bottom-action-sticky,
.natsom.page-configuredomains .bottom-action-sticky.is-fixed {
    position: static; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.natsom.page-configuredomains .bottom-action-sticky .container { padding: 0; width: auto; max-width: none; }
.natsom.page-configuredomains .bottom-action-sticky .sticky-content:empty { display: none; }
.natsom.page-configuredomains .bottom-action-sticky .sticky-actions { display: flex; justify-content: flex-end; width: 100%; margin-left: auto; }
@media (max-width: 599px) {
    .natsom.page-configuredomains .bottom-action-sticky .sticky-actions .btn { width: 100%; }
}
/* The curtain (§12): the rebuilt form stays hidden until orderflow.js is done, so the ✕ label and the NS heading
   never flash. Same fail-open reveal as the other cart pages. */
html.natsom-cart-pre .page-configuredomains #frmConfigureDomains {
    visibility: hidden;
    animation: natsomCartReveal 0s 1500ms forwards;
}