/* OnyQR — sayfa düzeyi düzen kuralları. Yalnızca token değişkenleri kullanılır.
   Bileşen stilleri components.css'te; burada yalnız ekran yerleşimi vardır. */

.ony-minimal-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-page);
    padding: var(--space-6);
}

.ony-error-page {
    text-align: center;
    max-width: 28rem;
}

.ony-error-page__code {
    font-family: var(--font-display);
    font-weight: var(--weight-extrabold);
    font-size: var(--size-4xl);
    letter-spacing: var(--tracking-display);
    color: var(--text-brand);
    margin: 0 0 var(--space-2);
}

.ony-error-page__title {
    font-size: var(--size-xl);
    margin: 0 0 var(--space-3);
}

.ony-error-page__text {
    color: var(--text-secondary);
    margin: 0 0 var(--space-6);
}

/* ---------- Uygulama paneli iskeleti (layouts/app.php — AppShell) ----------
   AppShell.jsx'teki satır içi düzen stillerinin sınıf karşılıkları.
   Yalnızca token değişkenleri; ham renk yok. */

.ony-app {
    position: relative;
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--surface-page);
}

.ony-app__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ony-app__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-8);
}

/* Üst bar ekleri: hamburger yalnızca ≤768px'te görünür; başlık taşarsa kırpılır. */
.ony-topbar__menubtn {
    display: none;
}

.ony-topbar__title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kullanıcı menüsü — avatar altında açılan popover
   (ui.js: .ony-topbar__avatar tıklaması [data-ony-user-menu] hidden'ını çevirir). */
.ony-usermenu {
    position: absolute;
    top: calc(var(--topbar-height) + var(--space-2));
    right: var(--space-7);
    z-index: 45;
    min-width: 240px;
    max-width: 320px;
    background: var(--surface-card);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    padding: var(--space-3);
}

.ony-usermenu[hidden] {
    display: none;
}

.ony-usermenu__head {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-subtle);
    margin-bottom: var(--space-3);
}

.ony-usermenu__name {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.ony-usermenu__mail {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ony-usermenu__ws {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-usermenu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-control);
}

.ony-usermenu__item:hover {
    background: var(--action-ghost-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.ony-usermenu form {
    margin: 0;
}

/* ≤768px: hamburger görünür, üst bar sıkışır. Sidebar'ın çekmeceye dönüşmesi
   dosya sonundaki ortak kurallardadır (.ony-sidebar--mobile-open + .ony-sidebar-scrim);
   ui.js [data-ony-sidebar-open] tıklanınca sınıfı ekler ve scrim'in hidden'ını kaldırır. */
@media (max-width: 768px) {
    .ony-topbar__menubtn {
        display: inline-flex;
    }

    .ony-app .ony-topbar {
        padding: 0 var(--space-5);
        gap: var(--space-3);
    }

    /* Dar üst barda arama ve plan rozeti gizlenir; başlık + zil + avatar kalır. */
    .ony-app .ony-topbar__search {
        display: none;
    }

    .ony-app .ony-topbar .ony-plan {
        display: none;
    }

    .ony-app__content {
        padding: var(--space-5);
    }

    .ony-usermenu {
        right: var(--space-5);
    }
}

/* ---------- Kimlik doğrulama yüzeyi (layouts/auth.php) ----------
   Auth.jsx AuthLayout birebir: solda 480px lacivert panel, sağda ortalanmış 420px alan. */

.ony-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background: var(--surface-page);
}

.ony-auth__aside {
    width: 480px;
    flex: none;
    background: var(--ony-navy-900);
    color: var(--ony-white);
    padding: var(--space-10) 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
}

.ony-auth__headline {
    color: var(--ony-white);
    font-size: var(--size-2xl);
    line-height: 1.2;
    letter-spacing: var(--tracking-display);
}

.ony-auth__lead {
    color: var(--text-inverse-secondary);
    font-size: var(--size-sm);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-5);
    max-width: 34ch;
}

.ony-auth__qr-row {
    margin-top: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.ony-auth__qr-note {
    font-size: 13px;
    color: var(--text-inverse-secondary);
    line-height: var(--leading-relaxed);
}

.ony-auth__trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ony-auth__trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-inverse-secondary);
}

.ony-auth__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-9);
}

.ony-auth__panel {
    width: 100%;
    max-width: 420px;
}

.ony-auth__mobile-brand {
    display: none;
}

@media (max-width: 1023px) {
    .ony-auth__aside { display: none; }
    .ony-auth__main { padding: var(--space-8) var(--gutter); }
    .ony-auth__mobile-brand {
        display: flex;
        justify-content: center;
        margin-bottom: var(--space-8);
    }
}

/* ---------- QR genel yüzeyi (layouts/public.php) ----------
   Public.jsx Shell birebir: dar, mobil öncelikli dikey akış; masaüstünde 480px ortalanır. */

.ony-public {
    background: var(--surface-sunken);
}

.ony-public__frame {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-page);
    display: flex;
    flex-direction: column;
}

.ony-public__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--space-5) var(--space-6);
}

.ony-public__brand-logo {
    height: 28px;
    width: auto;
}

.ony-public__brand-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--size-sm);
    color: var(--text-primary);
}

.ony-public__main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.ony-public__main > * {
    min-width: 0;
}

.ony-public__watermark {
    margin-top: auto;
    padding: var(--space-6) var(--space-5) 28px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}

.ony-public__watermark a {
    color: inherit;
    text-decoration: none;
}

.ony-public__watermark a:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* ---------- Yasal sayfa düzeni (layouts/legal.php) ----------
   Legal.jsx LegalDoc birebir: 260px yapışkan içindekiler + içerik; 1024 altı tek kolon.
   Gövde tipografisi --text-legal-* token'larından gelir (17px / 1.7 / 72ch). */

.ony-legal__wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-10) var(--gutter) var(--space-13);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
}

.ony-legal__wrap--no-toc {
    grid-template-columns: 1fr;
}

.ony-legal__aside {
    position: sticky;
    top: var(--space-7);
    align-self: start;
}

.ony-legal__toc-label {
    font-size: var(--size-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.ony-legal__toc {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-left: var(--border-width-strong) solid var(--border-subtle);
}

.ony-legal__toc-link {
    font-size: var(--size-xs);
    padding: 7px 14px;
    margin-left: calc(-1 * var(--border-width-strong));
    text-decoration: none;
    line-height: 1.4;
    border-left: var(--border-width-strong) solid transparent;
    color: var(--text-secondary);
}

.ony-legal__toc-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.ony-legal__toc-link.is-active {
    border-left-color: var(--action-primary);
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.ony-legal__article {
    min-width: 0;
}

.ony-legal__article p {
    font-size: var(--text-legal-size);
    line-height: var(--text-legal-leading);
    max-width: var(--text-legal-measure);
    margin: 0 0 var(--space-5);
}

.ony-legal__article ul,
.ony-legal__article ol {
    margin: 0 0 var(--space-5);
    padding-left: 22px;
    max-width: var(--text-legal-measure);
}

.ony-legal__article li {
    font-size: var(--text-legal-size);
    line-height: var(--text-legal-leading);
    margin-bottom: 6px;
}

.ony-legal__article section {
    margin-bottom: var(--space-9);
}

.ony-legal__article h2 {
    font-size: var(--size-xl);
    margin-bottom: var(--space-5);
}

.ony-legal__table-scroll {
    overflow-x: auto;
    margin-bottom: var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.ony-legal__draft {
    margin-top: var(--space-9);
}

@media (max-width: 1023px) {
    .ony-legal__wrap {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .ony-legal__aside {
        position: static;
    }
}

/* --- Pazarlama kabuğu (ui_kits/marketing/Chrome.jsx karşılığı) --------------
   Header / Footer / CookieBanner sayfa düzeyi sınıfları. Ölçüler Chrome.jsx'ten
   birebir (72px bar, 22px nav aralığı, 1.4fr 1fr 1fr 1.3fr footer grid'i);
   renkler yalnız token değişkenleridir. Footer metin tonu olarak
   --text-inverse-secondary yerine sabit rampa tonu --ony-gray-400 kullanılır:
   açık temada değer birebir aynıdır, koyu temada semantik takma ad zemine göre
   ters döndüğü için navy-900 zeminde okunmaz olurdu. Sosyal ikon kutusunun
   rgba(255,255,255,.08) zemini ham renk yerine --ony-white'tan color-mix ile
   türetilir. */

/* Header — sticky; ui.js, kaydırma > 8px olunca [data-ony-sticky-header]
   öğesine .ony-mkt-header--scrolled sınıfını ekler (bkz. tasarım readme,
   "Sabit ve yapışkan öğeler"). */
.ony-mkt-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface-card);
    border-bottom: var(--border-width) solid transparent;
    transition: all var(--duration-base) var(--ease-standard);
}

.ony-mkt-header--scrolled {
    border-bottom-color: var(--border-subtle);
    box-shadow: var(--shadow-1);
}

.ony-mkt-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 72px;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ony-mkt-header__brand {
    display: flex;
}

.ony-mkt-header__nav {
    display: flex;
    gap: 22px;
    flex: 1;
    min-width: 0;
}

.ony-mkt-header__link {
    font-size: var(--size-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.ony-mkt-header__link:hover {
    color: var(--text-link);
    text-decoration: none;
}

.ony-mkt-header__link--active {
    font-weight: var(--weight-semibold);
    color: var(--text-link);
}

.ony-mkt-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ony-mkt-header__hamburger {
    display: none;
}

/* Mobil açılan panel — 768px altında hamburger ile açılır (ui.js
   [data-ony-menu-toggle] tıklanınca [data-ony-mobile-menu] üstündeki
   hidden niteliğini ve aria-expanded değerini değiştirir). */
.ony-mkt-menu {
    display: none;
}

@media (max-width: 768px) {
    .ony-mkt-header__nav,
    .ony-mkt-header__actions {
        display: none;
    }

    .ony-mkt-header__theme {
        margin-left: auto;
    }

    .ony-mkt-header__hamburger {
        display: inline-flex;
    }

    .ony-mkt-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface-card);
        border-bottom: var(--border-width) solid var(--border-subtle);
        box-shadow: var(--shadow-3);
        padding: var(--space-5) var(--gutter) var(--space-6);
    }

    .ony-mkt-menu[hidden] {
        display: none;
    }

    .ony-mkt-menu__nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-bottom: var(--space-5);
    }

    .ony-mkt-menu__link {
        display: flex;
        align-items: center;
        min-height: var(--touch-target);
        padding: 0 var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--size-sm);
        font-weight: var(--weight-medium);
        color: var(--text-primary);
        text-decoration: none;
    }

    .ony-mkt-menu__link:hover {
        background: var(--action-ghost-hover);
        color: var(--text-primary);
        text-decoration: none;
    }

    .ony-mkt-menu__link--active {
        color: var(--text-link);
        font-weight: var(--weight-semibold);
    }

    .ony-mkt-menu__actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        border-top: var(--border-width) solid var(--border-subtle);
        padding-top: var(--space-5);
    }
}

/* Footer — Chrome.jsx: navy-900 zemin, 64px üst / 32px alt dolgu. */
.ony-mkt-footer {
    background: var(--ony-navy-900);
    color: var(--ony-gray-400);
    padding: var(--space-11) var(--gutter) var(--space-8);
}

.ony-mkt-footer__grid {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: var(--space-9);
}

.ony-mkt-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-mkt-footer__desc {
    font-size: var(--size-xs);
    line-height: var(--leading-relaxed);
    max-width: 34ch;
    margin: 0;
}

.ony-mkt-footer__social {
    display: flex;
    gap: var(--space-3);
}

/* Artık <span> değil <a>: tıklanabilir olduğu belli olsun, altı çizilmesin
   ve dokunma hedefi mobilde eşiğin altına düşmesin. */
.ony-mkt-footer__social-item {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--ony-white) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ony-white);
    text-decoration: none;
    transition: background var(--dur-fast, .15s) ease;
}

.ony-mkt-footer__social-item:hover,
.ony-mkt-footer__social-item:focus-visible {
    background: color-mix(in srgb, var(--ony-white) 18%, transparent);
    color: var(--ony-white);
}

@media (max-width: 768px) {
    .ony-mkt-footer__social-item {
        width: var(--touch-target);
        height: var(--touch-target);
    }
}

.ony-mkt-footer__title {
    color: var(--ony-white);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--size-xs);
    margin: 0 0 14px;
    letter-spacing: var(--tracking-tight);
}

.ony-mkt-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ony-mkt-footer__link {
    font-size: 13px;
    color: var(--ony-gray-400);
    text-decoration: none;
}

.ony-mkt-footer__link:hover {
    color: var(--ony-white);
    text-decoration: none;
}

.ony-mkt-footer__bottom {
    max-width: var(--container-max);
    margin: var(--space-9) auto 0;
    padding-top: var(--space-7);
    border-top: var(--border-width) solid var(--ony-navy-600);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-7);
    flex-wrap: wrap;
}

.ony-mkt-footer__legal {
    font-size: var(--size-2xs);
    line-height: 1.7;
}

.ony-mkt-footer__pay {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.ony-mkt-footer__pay-item {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--ony-gray-400);
    border: var(--border-width) solid var(--ony-navy-600);
    border-radius: var(--radius-xs);
    padding: 5px 9px;
}

@media (max-width: 1024px) {
    .ony-mkt-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .ony-mkt-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* Çerez bandı — Chrome.jsx CookieBanner; sayfaya sabitlenir (JSX'te kaydırma
   kabına absolute'tı, gerçek sitede fixed karşılığıdır). */
.ony-cookiebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--surface-card);
    border-top: var(--border-width) solid var(--border-subtle);
    box-shadow: var(--shadow-3);
    padding: var(--space-6) var(--gutter);
}

.ony-cookiebar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    gap: var(--space-7);
    align-items: center;
    flex-wrap: wrap;
}

.ony-cookiebar__text {
    flex: 1;
    min-width: min(320px, 100%);
    font-size: var(--size-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: 0;
}

.ony-cookiebar__form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Davranış güvencesi: hidden niteliği her zaman gizler. components.css'te
   display atayan sınıflar (ör. .ony-dialog__scrim display:flex) UA kuralını
   ezdiği için ui.js'in hidden toggle'ları bu kurala muhtaçtır. */
[hidden] {
    display: none !important;
}

/* Mobil sidebar çekmecesi — ui.js [data-ony-sidebar-open] ile açar,
   scrim'e tıklayınca kapatır. Yalnızca token değişkenleri kullanılır. */
.ony-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: var(--surface-overlay);
    backdrop-filter: var(--blur-overlay);
}

@media (max-width: 768px) {
    .ony-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--duration-base) var(--ease-standard);
    }

    .ony-sidebar--mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-modal);
    }
}

/* ---------- QR genel sayfalar: ortak icerik bloklari (password/expired) ---------- */

.ony-public-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
}

.ony-public-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
    margin-bottom: var(--space-6);
}

.ony-public-icon--muted {
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.ony-public-heading {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-3);
}

.ony-public-text {
    color: var(--text-secondary);
    margin: 0 0 var(--space-7);
    max-width: 36ch;
}

.ony-public-form {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    text-align: left;
}

/* ==========================================================================
   Pazarlama sayfaları: ana sayfa + fiyatlandırma
   (marketing/home.php, marketing/pricing.php — Home.jsx / Hero.jsx / Pricing.jsx)
   Yalnızca token değişkenleri; ham renk yok.
   ========================================================================== */

/* --- Ortak bölüm iskeleti --- */
.ony-mkt-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.ony-mkt-container--narrow {
    max-width: 860px;
}

.ony-mkt-section {
    padding: var(--section-y) 0;
}

.ony-mkt-section--compact {
    padding: var(--section-y-compact) 0;
}

.ony-mkt-section--band {
    background: var(--surface-card);
    border-top: var(--border-width) solid var(--border-subtle);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.ony-mkt-h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2-size);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
    margin: 0;
}

.ony-mkt-h2--center {
    text-align: center;
}

.ony-mkt-h2--inverse {
    color: var(--ony-white);
}

.ony-mkt-lead {
    font-size: var(--text-body-lg-size);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 58ch;
    margin: var(--space-4) 0 0;
}

.ony-mkt-tabular {
    font-variant-numeric: var(--numeric-figures);
}

.ony-mkt-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
    margin-top: var(--space-9);
}

.ony-mkt-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
}

/* --- Hero (canlı QR üretici) --- */
.ony-hero {
    padding: var(--space-12) 0 72px;
}

.ony-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-11);
    align-items: center;
}

.ony-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-hero-size);
    font-weight: var(--text-hero-weight);
    letter-spacing: var(--tracking-display);
    line-height: var(--text-hero-leading);
    margin: var(--space-6) 0 var(--space-5);
}

.ony-hero__lead {
    font-size: var(--size-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 58ch;
    margin: 0;
}

.ony-hero__cta {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.ony-hero__trust {
    display: flex;
    gap: var(--space-7);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.ony-hero__trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.ony-hero__demo {
    box-shadow: var(--shadow-2);
}

.ony-hero__demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.ony-hero__demo-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--size-md);
    letter-spacing: var(--tracking-display);
}

.ony-hero__demo-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: start;
}

.ony-hero__demo-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ony-hero__demo-dl {
    display: flex;
    gap: var(--space-3);
}

.ony-hero__demo-dl .ony-btn {
    flex: 1;
}

.ony-hero__demo-note {
    font-size: var(--size-2xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    margin: 0;
}

.ony-hero__demo-qr {
    min-width: 202px;
    min-height: 202px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* --- Sosyal kanıt bandı --- */
.ony-mkt-proof {
    background: var(--surface-card);
    border-top: var(--border-width) solid var(--border-subtle);
    border-bottom: var(--border-width) solid var(--border-subtle);
    padding: 28px 0;
}

.ony-mkt-proof__inner {
    display: flex;
    align-items: center;
    gap: var(--space-9);
    flex-wrap: wrap;
}

.ony-mkt-proof__stats {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.ony-mkt-proof__num {
    font-family: var(--font-display);
    font-weight: var(--weight-extrabold);
    font-size: var(--size-xl);
    letter-spacing: var(--tracking-display);
    font-variant-numeric: var(--numeric-figures);
}

.ony-mkt-proof__label {
    font-size: 13px;
    color: var(--text-secondary);
}

.ony-mkt-proof__logos {
    flex: 1;
    display: flex;
    gap: var(--space-4);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.ony-mkt-proof__logo {
    width: 108px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Üç adım kartları --- */
.ony-mkt-step__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: 14px;
}

.ony-mkt-step__no {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--action-secondary);
    color: var(--ony-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    font-size: var(--size-xs);
    font-variant-numeric: var(--numeric-figures);
}

.ony-mkt-step__title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-3);
}

.ony-mkt-step__text {
    font-size: var(--size-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: 0;
}

/* --- QR tipleri vitrini --- */
.ony-mkt-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-9);
}

.ony-mkt-type {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    font-size: var(--size-xs);
    font-weight: var(--weight-medium);
}

/* --- QR aynı kalır, hedef değişir --- */
.ony-mkt-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-11);
    align-items: center;
}

.ony-mkt-split__opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--space-8);
}

.ony-mkt-split__opt {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 14px var(--space-5);
    text-align: left;
    cursor: pointer;
    border: var(--border-width) solid var(--border-subtle);
    background: var(--surface-card);
    border-radius: var(--radius-md);
    font-size: var(--size-xs);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    transition: var(--transition-control);
}

.ony-mkt-split__opt .ony-icon {
    color: var(--text-muted);
}

.ony-mkt-split__opt--active {
    border-color: var(--action-primary);
    background: var(--surface-accent-soft);
}

.ony-mkt-split__opt--active .ony-icon {
    color: var(--text-accent);
}

.ony-mkt-split__vis {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    justify-content: center;
    flex-wrap: wrap;
}

.ony-mkt-split__caption {
    font-family: var(--font-mono);
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--space-3);
}

.ony-mkt-split__target {
    width: 220px;
}

.ony-mkt-split__target-label {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.ony-mkt-split__target-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--size-sm);
    letter-spacing: var(--tracking-tight);
    line-height: 1.35;
}

.ony-mkt-split__target-foot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: var(--border-width) solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

/* --- Analitik önizleme --- */
.ony-mkt-analytics {
    margin-top: var(--space-9);
}

.ony-mkt-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.ony-mkt-charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.ony-mkt-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 148px;
}

.ony-mkt-bars__bar {
    flex: 1;
    background: var(--ony-accent-200);
    border-radius: 4px 4px 0 0;
}

.ony-mkt-bars__bar--hot {
    background: var(--ony-accent-500);
}

.ony-mkt-cities {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-mkt-city__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

.ony-mkt-city__track {
    height: 6px;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

.ony-mkt-city__fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-pill);
}

/* --- Baskı merkezi --- */
.ony-mkt-print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-7);
    flex-wrap: wrap;
}

.ony-mkt-print-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-9);
}

.ony-mkt-print-card {
    text-align: center;
}

.ony-mkt-print-thumb {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: var(--space-6) 0;
    margin-bottom: var(--space-4);
    display: flex;
    justify-content: center;
}

.ony-mkt-print-name {
    font-size: 13px;
    font-weight: var(--weight-semibold);
}

.ony-mkt-print-size {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* --- Plan kartları ızgarası (ana sayfa özeti + fiyat sayfası) --- */
.ony-mkt-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
    align-items: stretch;
    margin-top: var(--space-10);
}

.ony-mkt-plans > div {
    display: flex;
    flex-direction: column;
}

.ony-mkt-plans .ony-card {
    flex: 1;
}

.ony-mkt-plans__more {
    text-align: center;
    margin-top: var(--space-8);
}

/* --- Kullanım senaryoları --- */
.ony-mkt-case__tabs {
    margin-top: var(--space-8);
    overflow-x: auto;
}

.ony-mkt-case {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-10);
    align-items: center;
    margin-top: var(--space-8);
}

.ony-mkt-case__title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-mkt-case__lead {
    font-size: var(--size-sm);
}

.ony-mkt-case__badges {
    display: flex;
    gap: 10px;
    margin-top: var(--space-7);
    flex-wrap: wrap;
}

.ony-mkt-case__qr {
    display: flex;
    justify-content: center;
}

/* --- SSS --- */
.ony-mkt-faq {
    margin-top: var(--space-8);
}

/* --- Kapanış CTA bandı --- */
.ony-mkt-cta {
    background: var(--ony-navy-900);
    padding: 72px 0;
}

.ony-mkt-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-9);
    flex-wrap: wrap;
}

.ony-mkt-cta__text {
    font-size: var(--size-md);
    color: var(--ony-gray-400);
    margin: var(--space-4) 0 0;
    max-width: 52ch;
    line-height: var(--leading-relaxed);
}

.ony-mkt-cta__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* --- Fiyatlandırma sayfası --- */
.ony-pricing-head {
    padding: var(--section-y-compact) 0 0;
    text-align: center;
}

.ony-pricing-head__title {
    font-family: var(--font-display);
    font-size: var(--text-h1-size);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
    margin: 0;
}

.ony-pricing-head__lead {
    margin: 14px auto 0;
}

.ony-pricing-head__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: 28px;
}

.ony-pricing-cards {
    padding: var(--space-10) 0 0;
}

.ony-pricing-cards .ony-mkt-plans {
    margin-top: 0;
    padding-top: var(--space-6); /* rozet taşması için yer */
}

.ony-pricing-alert {
    margin-top: var(--space-7);
}

.ony-pricing-extra {
    padding-bottom: var(--section-y-compact);
}

.ony-pricing-faq {
    padding-bottom: var(--section-y);
}

/* Karşılaştırma tablosu — mobilde yatay, dikeyde 620px kaydırma kabı */
.ony-compare-card {
    margin-top: var(--space-7);
}

.ony-compare-scroll {
    max-height: 620px;
    overflow: auto;
}

.ony-compare {
    min-width: 640px;
}

.ony-compare__feature-col {
    width: 40%;
}

.ony-compare__feature {
    font-size: var(--size-xs);
}

.ony-compare__cell {
    text-align: center;
}

.ony-compare__val {
    font-size: 13px;
}

.ony-compare__group td {
    background: var(--surface-sunken);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 13px;
    letter-spacing: var(--tracking-tight);
}

.ony-table td.ony-compare__hl,
.ony-table th.ony-compare__hl {
    background: var(--surface-accent-soft);
}

.ony-table tbody tr:hover td.ony-compare__hl {
    background: var(--surface-accent-soft);
}

.ony-mkt-enterprise__title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    letter-spacing: var(--tracking-display);
    color: var(--ony-white);
    margin: 0;
}

.ony-mkt-enterprise__text {
    color: var(--ony-gray-400);
    font-size: 15px;
    line-height: var(--leading-relaxed);
    margin: var(--space-4) 0 0;
}

.ony-mkt-enterprise__actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-7);
    flex-wrap: wrap;
}

.ony-mkt-paylist__head {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-mkt-paylist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: var(--space-5);
}

.ony-mkt-paylist__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.ony-mkt-paylist__t {
    font-size: var(--size-xs);
    font-weight: var(--weight-semibold);
}

.ony-mkt-paylist__d {
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- Duyarlılık: pazarlama sayfaları --- */
@media (max-width: 1024px) {
    .ony-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--space-9);
    }

    .ony-hero__title {
        font-size: var(--text-h1-size);
    }

    .ony-mkt-grid3 {
        grid-template-columns: 1fr;
    }

    .ony-mkt-types {
        grid-template-columns: repeat(3, 1fr);
    }

    .ony-mkt-split {
        grid-template-columns: 1fr;
        gap: var(--space-9);
    }

    .ony-mkt-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ony-mkt-charts {
        grid-template-columns: 1fr;
    }

    .ony-mkt-print-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ony-mkt-plans {
        grid-template-columns: 1fr;
        gap: var(--space-9);
    }

    .ony-mkt-case {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .ony-mkt-grid2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ony-hero {
        padding: var(--space-10) 0 var(--space-10);
    }

    .ony-hero__title {
        font-size: var(--text-h2-size);
    }

    .ony-hero__demo-grid {
        grid-template-columns: 1fr;
    }

    .ony-hero__demo-qr {
        justify-content: center;
        align-items: center;
    }

    .ony-mkt-types {
        grid-template-columns: repeat(2, 1fr);
    }

    .ony-mkt-print-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ony-mkt-proof__logos {
        justify-content: flex-start;
    }

    .ony-mkt-cta {
        padding: var(--section-y-compact) 0;
    }
}

@media (max-width: 480px) {
    .ony-mkt-types {
        grid-template-columns: 1fr;
    }

    .ony-mkt-stats {
        grid-template-columns: 1fr;
    }

    .ony-pricing-head__toggle {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ---------- Panel Dashboard (Views/app/dashboard.php — Dashboard.jsx karşılığı) ----------
   Bu blok Dashboard ekranına aittir; başka ajan bloklarıyla karışmaması için
   ayrı tutulur. Yalnızca token değişkenleri kullanılır. */

.ony-dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-7);
}

.ony-dash-head__title {
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-dash-head__sub {
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    margin: var(--space-2) 0 0;
}

.ony-dash-head__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-dash-alert {
    margin-bottom: var(--space-6);
}

.ony-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.ony-dash-stats > * {
    min-width: 0;
}

/* Grafik (2.2fr) + hızlı işlem (1fr) — Dashboard.jsx satırı birebir. */
.ony-dash-cols {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.ony-dash-cols > * {
    min-width: 0;
}

/* Chart.js responsive modu konumlu ve yüksekliği belli bir kap ister. */
.ony-dash-chart {
    position: relative;
    height: 220px;
}

.ony-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ony-quick-action {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 12px 14px;
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-control);
}

.ony-quick-action:hover {
    background: var(--surface-sunken);
    border-color: var(--border-accent);
    color: var(--text-primary);
    text-decoration: none;
}

.ony-quick-action__chev {
    margin-left: auto;
}

/* pad="none" kart içinde tablo başlığı — JSX'teki 20/24px dolgulu üst şerit. */
.ony-dash-card {
    margin-top: var(--space-5);
}

.ony-dash-tablehead {
    padding: var(--space-6) var(--space-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Dar ekranda tablo kart içinde yatay kayar; sayfa gövdesi asla kaymaz. */
.ony-dash-scroll {
    overflow-x: auto;
}

.ony-dash-scroll .ony-table {
    min-width: 560px;
}

.ony-dash-strong {
    font-weight: var(--weight-semibold);
}

.ony-dash-muted {
    color: var(--text-secondary);
}

.ony-dash-empty-note {
    padding: var(--space-7);
    color: var(--text-muted);
    font-size: var(--text-ui-size);
}

@media (max-width: 1024px) {
    .ony-dash-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ony-dash-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .ony-dash-stats {
        grid-template-columns: 1fr;
    }
}

/* ---------- Kimlik doğrulama ekran içi düzen (Views/auth/*) ----------
   [auth-views ajanı ekledi — bu bloğa yalnız auth ekranı kuralları girer.]
   Auth.jsx ekranlarının panel içi karşılıkları: başlık, alt metin, dikey form
   akışı, alt bağlantı, ad-soyad ızgarası, 6 haneli kod kutuları, 2FA kurulum
   QR bloğu. Yalnızca token değişkenleri; ham renk yok. */

.ony-auth__title {
    font-size: var(--size-2xl);
    margin: 0;
}

.ony-auth__sub {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: var(--space-3) 0 0;
}

/* JSX: children kabı — marginTop 28, kolon akış, 16px boşluk */
.ony-auth__stack {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-auth__foot {
    margin-top: var(--space-7);
    font-size: var(--size-xs);
    color: var(--text-secondary);
    text-align: center;
}

/* "Beni hatırla" + "Şifremi unuttum" satırı */
.ony-auth__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.ony-auth__row a {
    font-size: var(--size-xs);
}

/* Kayıt: Ad / Soyad ızgarası (JSX: 1fr 1fr, 12px boşluk) */
.ony-auth__grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* 6 haneli doğrulama kodu kutuları (JSX: 56x64, 24px, display fontu) */
.ony-auth__code {
    display: flex;
    gap: 10px;
}

.ony-auth__code .ony-auth__code-input {
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    height: 64px;
    padding: 0;
    text-align: center;
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    font-family: var(--font-display);
}

@media (max-width: 400px) {
    .ony-auth__code {
        gap: var(--space-3);
    }

    .ony-auth__code .ony-auth__code-input {
        height: 56px;
    }
}

/* "Bu cihazı 30 gün hatırla" — ortalanmış küçük onay satırı */
.ony-auth__remember {
    display: flex;
    justify-content: center;
}

.ony-auth__remember .ony-check__text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Bilgi kartı içeriği: ikon + metin yan yana (Verify ekranı kartı) */
.ony-auth__card-row {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.ony-auth__card-text {
    font-size: var(--size-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* 2FA kurulum kartı: ortalanmış QR + anahtar alanı */
.ony-auth__setup-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-auth__setup-qr {
    display: flex;
    justify-content: center;
}

/* Bağlantı görünümlü form butonu ("Tekrar gönder") */
.ony-auth__inline-form {
    display: inline;
    margin: 0;
}

.ony-auth__linkbtn {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-link);
    font: inherit;
    cursor: pointer;
}

.ony-auth__linkbtn:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* ============================================================
   QR yonetimi ekranlari (liste, detay, klasorler) — QR paneli ajani
   Kaynak: ui_kits/app/QrList.jsx + QrDetail.jsx duzenleri.
   ============================================================ */

.ony-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-7);
}

.ony-pagehead__title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-pagehead__sub {
    color: var(--text-secondary);
    font-size: var(--size-2xs);
    margin-top: var(--space-2);
}

.ony-pagehead__actions {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.ony-filterbar {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.ony-filterbar__right {
    margin-left: auto;
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .ony-filterbar__right {
        margin-left: 0;
    }
}

/* Genis tablolar kendi kabinde yatay kayar; sayfa govdesi kaymaz */
.ony-table-scroll {
    overflow-x: auto;
}

.ony-qr-cardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-6);
}

.ony-detail-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 1023px) {
    .ony-detail-grid {
        grid-template-columns: 1fr;
    }
}

.ony-breadcrumb {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}

.ony-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.ony-breadcrumb a:hover {
    color: var(--text-primary);
}

.ony-code-input input {
    font-family: var(--font-mono);
    font-size: var(--size-2xs);
}

.ony-dl-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--duration-base) var(--ease-standard);
}

.ony-dl-link:hover {
    border-color: var(--border-strong);
}

.ony-dl-link__name {
    display: block;
    font-size: var(--size-xs);
    font-weight: var(--weight-semibold);
}

.ony-dl-link__desc {
    display: block;
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-6);
}

.ony-folder-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ony-folder-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
    flex-shrink: 0;
}

.ony-folder-card__icon--muted {
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.ony-folder-card__name {
    display: block;
    font-weight: var(--weight-semibold);
    font-size: var(--size-xs);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ony-folder-card__name:hover {
    color: var(--text-accent);
}

.ony-folder-card__meta {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* ============================================================
   QR olusturma sihirbazi (Views/app/qr-wizard.php + js/qr-wizard.js)
   [qr-wizard ajani ekledi — bu bloga yalniz sihirbaz kurallari girer.]
   Kaynak: ui_kits/app/Wizard.jsx. Yalnizca token degiskenleri; ham renk yok.
   ============================================================ */

.ony-wizhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.ony-wizhead__title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-wizhead__sub {
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
    margin: var(--space-2) 0 0;
}

.ony-wizalert {
    margin-bottom: var(--space-6);
}

.ony-wizard-step-card {
    margin-bottom: var(--space-6);
    overflow-x: auto;
}

.ony-wizard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-6);
    align-items: start;
}

.ony-wizard-preview {
    position: sticky;
    top: var(--space-6);
}

.ony-wizard-preview__title {
    font-family: var(--font-display);
    font-size: var(--size-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
}

.ony-wizard-preview__sub {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}

.ony-wizard-preview__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.ony-wizard-preview__link {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    text-align: center;
    word-break: break-all;
}

/* --- Adım panelleri --- */
.ony-wstep {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ony-wstep__title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-2);
}

.ony-wstep__sub {
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
    margin: 0;
}

/* --- Adım 1: tip kartları --- */
.ony-wtypes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.ony-wtype {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-control);
}

.ony-wtype:hover {
    border-color: var(--border-accent);
}

.ony-wtype--selected {
    border-color: var(--action-primary);
    background: var(--surface-accent-soft);
    box-shadow: inset 0 0 0 1px var(--action-primary);
}

.ony-wtype--selected .ony-icon {
    color: var(--text-accent);
}

.ony-wtype--locked {
    cursor: not-allowed;
    color: var(--text-muted);
}

.ony-wtype--locked:hover {
    border-color: var(--border-subtle);
}

.ony-wtype--locked .ony-icon {
    color: var(--text-muted);
}

.ony-wtype__lock {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* --- Adım 2: içerik --- */
.ony-wcontent {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 560px;
}

.ony-wmode {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-wlabel {
    font-size: var(--size-2xs);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
}

.ony-wgrid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.ony-wgrid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.ony-wprot {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-wprot__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ony-wprot__field {
    max-width: 280px;
}

/* Kapasite çubuğu (statik mod) — Wizard.jsx bayt sayacı */
.ony-capbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ony-capbar__track {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}

.ony-capbar__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--action-primary);
    transition: width var(--duration-base) var(--ease-standard);
}

.ony-capbar__fill--warn {
    background: var(--status-warning);
}

.ony-capbar__fill--over {
    background: var(--status-danger);
}

.ony-capbar__text {
    font-size: var(--size-2xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    font-variant-numeric: var(--numeric-figures);
    white-space: nowrap;
}

.ony-capbar__text--warn {
    color: var(--status-warning-text);
}

.ony-capbar__text--over {
    color: var(--status-danger-text);
}

.ony-capbar__ver {
    font-size: var(--size-2xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Adım 3: tasarım --- */
.ony-swatches {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-swatch {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
}

.ony-swatch--selected {
    border-color: var(--action-primary);
    outline: 2px solid var(--surface-card);
    outline-offset: -4px;
}

.ony-swatch--custom {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    border-color: var(--border-strong);
    background: var(--surface-sunken);
}

.ony-swatch--custom input[type="color"] {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}

.ony-colorinput {
    width: 56px;
    height: var(--control-height);
    padding: 2px;
    border: var(--border-control);
    border-radius: var(--radius-control);
    background: var(--surface-card);
    cursor: pointer;
}

.ony-wframe-tags {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-wframe-text {
    margin-top: var(--space-4);
    max-width: 320px;
}

/* --- Adım 4: özet --- */
.ony-wsummary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.ony-wsummary__item {
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ony-wsummary__key {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-wsummary__val {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    margin-top: 2px;
    word-break: break-all;
}

.ony-wnote {
    font-size: var(--size-2xs);
    color: var(--text-muted);
    margin: 0;
}

/* --- Alt gezinme --- */
.ony-wfooter {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--border-subtle);
}

.ony-wfooter__right {
    display: flex;
    gap: var(--space-4);
}

/* --- Duyarlılık: sihirbaz --- */
@media (max-width: 1024px) {
    .ony-wizard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-wizard-preview {
        position: static;
    }

    .ony-wtypes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ony-wtypes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ony-wgrid2,
    .ony-wgrid3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-wsummary {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-capbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 400px) {
    .ony-wtypes {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-wfooter {
        flex-wrap: wrap;
    }
}

/* ---------- Analitik ekranı (app/analytics.php — Analytics.jsx) ---------- */

.ony-an__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.ony-an__title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-an__sub {
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    margin: var(--space-1) 0 0;
}

.ony-an__filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-an__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.ony-an__card {
    margin-top: var(--space-5);
}

/* align-items KALDIRILDI: aynı satırdaki kartlar eşit yükseklikte olmalı.
   Tasarım kaynağı da hizalama vermiyor (Analytics.jsx). align-items:start bu kod
   tabanında yalnızca asimetrik ana+kenar ızgaralarında kullanılır. */
.ony-an__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.ony-an__grid--wide {
    grid-template-columns: 1.3fr 1fr;
}

.ony-an__empty {
    color: var(--text-muted);
    font-size: var(--text-ui-size);
    margin: 0;
    padding: var(--space-6) 0;
    text-align: center;
}

/* Zaman serisi sütun grafiği */
.ony-an__chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 190px;
}

.ony-an__chart-bar {
    flex: 1;
    min-width: 2px;
    background: var(--ony-accent-200);
    border-radius: 4px 4px 0 0;
    transition: background var(--duration-fast) var(--ease-standard);
}

.ony-an__chart-bar:hover,
.ony-an__chart-bar--last {
    background: var(--ony-accent-500);
}

.ony-an__chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

/* Yüzde çubukları */
.ony-an__bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-an__bar-head {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

.ony-an__bar-track {
    height: 6px;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.ony-an__bar-fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-pill);
}

.ony-an__divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 18px 0;
}

/* Saat / gün ısı matrisi */
.ony-an__heat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ony-an__heat-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ony-an__heat-day {
    width: 30px;
    flex: none;
    font-size: 11px;
    color: var(--text-secondary);
}

.ony-an__heat-cell {
    flex: 1;
    height: 18px;
    border-radius: 3px;
    background: var(--ony-accent-500);
}

.ony-an__heat-axis {
    display: flex;
    gap: 4px;
    margin-left: 34px;
    margin-top: 4px;
}

.ony-an__heat-axis span {
    flex: 1;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}

/* Panel tabloları — yatay kaydırma mobilde zorunlu */
.ony-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ony-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-ui-size);
}

.ony-table th {
    text-align: left;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom: var(--border-width) solid var(--border-subtle);
    white-space: nowrap;
}

.ony-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--border-subtle);
    vertical-align: middle;
}

.ony-table tr:last-child td {
    border-bottom: 0;
}

.ony-table__num {
    text-align: right;
    font-variant-numeric: var(--numeric-figures);
}

.ony-table__meta {
    display: block;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    margin-top: 2px;
}

.ony-table code {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    background: var(--surface-sunken);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

.ony-link {
    color: var(--text-link);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.ony-link:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1024px) {
    .ony-an__stats { grid-template-columns: repeat(2, 1fr); }
    .ony-an__grid,
    .ony-an__grid--wide { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .ony-an__stats { grid-template-columns: 1fr; }
    .ony-an__head { flex-direction: column; }
    .ony-an__filters { width: 100%; }
    .ony-an__chart { height: 150px; }
    .ony-table th,
    .ony-table td { padding: var(--space-3) var(--space-4); }
}

/* ============================================================
   Gelistirici (API + webhook), denetim kaydi ve bildirim merkezi
   [api-webhook ajani ekledi — bu bloga yalniz bu uc ekranin kurallari girer.]
   Kaynak: ui_kits/app/Developer.jsx (ApiScreen + AuditLog).
   Yalnizca token degiskenleri; ham renk yok.
   ============================================================ */

/* ---- Gelistirici: duzen ---- */

.ony-dev__notice {
    margin-bottom: var(--space-6);
}

.ony-dev__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-6);
    align-items: start;
}

.ony-dev__main {
    min-width: 0;
}

.ony-dev__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.ony-dev__panel {
    margin-top: var(--space-6);
}

.ony-dev__panelactions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-5);
}

.ony-dev__card {
    margin-top: var(--space-5);
}

.ony-dev__docs {
    margin-top: var(--space-7);
    scroll-margin-top: var(--space-8);
}

/* ---- Gelistirici: tablo icerigi ---- */

.ony-dev__keyname {
    font-weight: var(--weight-semibold);
}

.ony-dev__keycode,
.ony-dev__url,
.ony-dev__eventcode {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    word-break: break-all;
}

.ony-dev__url {
    display: inline-block;
    max-width: 320px;
}

.ony-dev__muted {
    color: var(--text-secondary);
    font-size: var(--size-2xs);
}

.ony-dev__badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---- Gelistirici: tek seferlik sir gosterimi ---- */

.ony-dev__once {
    margin: 0 0 var(--space-3);
}

.ony-dev__secret {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    word-break: break-all;
    user-select: all;
}

/* ---- Gelistirici: yan sutun ---- */

.ony-dev__quotafoot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border-subtle);
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-dev__aside-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.ony-dev__aside-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Kod blogu zemini ve metni tema ile donmeyen sabit rampa tonlarina baglanir:
   --surface-inverse ile --text-inverse koyu temada birlikte koyulasip blogu
   okunmaz hale getiriyordu. */
.ony-dev__pre {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    line-height: var(--leading-relaxed);
    background: var(--ony-navy-900);
    color: var(--ony-gray-100);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 0;
}

.ony-dev__docnote {
    margin-top: var(--space-5);
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-dev__docnote p {
    margin: 0 0 var(--space-3);
}

.ony-dev__docnote p:last-child {
    margin-bottom: 0;
}

.ony-dev__docnote code {
    font-family: var(--font-mono);
    background: var(--surface-sunken);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    word-break: break-all;
}

/* ---- Gelistirici: dialog formlari ---- */

.ony-dev__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-3);
}

.ony-dev__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-dev__checks,
.ony-dev__events {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-dev__confirm {
    margin: 0;
}

.ony-dev__inlineform {
    display: inline;
}

/* ---- Denetim kaydi ---- */

.ony-audit__filtercard {
    margin-bottom: var(--space-6);
}

.ony-audit__filters {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.ony-audit__resource {
    color: var(--text-secondary);
    word-break: break-word;
}

.ony-audit__ip {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-audit__pager {
    padding: var(--space-5) var(--space-6);
    border-top: var(--border-width) solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
}

/* ---- Bildirim merkezi ---- */

.ony-notif__notice {
    margin-bottom: var(--space-6);
}

.ony-notif__form {
    display: inline;
}

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

.ony-notif__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.ony-notif__item:last-child {
    border-bottom: 0;
}

.ony-notif__item--unread {
    background: var(--surface-sunken);
}

.ony-notif__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--radius-sm);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
}

.ony-notif__body {
    flex: 1;
    min-width: 0;
}

.ony-notif__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-notif__title {
    font-weight: var(--weight-semibold);
    word-break: break-word;
}

.ony-notif__text {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--size-2xs);
    word-break: break-word;
}

.ony-notif__meta {
    margin-top: var(--space-3);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-notif__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--action-primary);
}

.ony-notif__pager {
    margin-top: var(--space-6);
    display: flex;
    justify-content: flex-end;
}

/* ---- Dar ekran: 360px'e kadar yatay tasma yok ---- */

@media (max-width: 1024px) {
    .ony-dev__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-dev__url {
        max-width: 220px;
    }
}

@media (max-width: 560px) {
    .ony-audit__filters {
        width: 100%;
    }

    .ony-audit__filters > * {
        flex: 1 1 100%;
    }

    .ony-dev__panelactions {
        justify-content: stretch;
    }

    .ony-dev__url {
        max-width: 160px;
    }

    .ony-notif__item {
        padding: var(--space-4);
    }

    .ony-notif__icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .ony-audit__pager {
        padding: var(--space-4);
        justify-content: center;
    }

    .ony-notif__pager {
        justify-content: center;
    }
}

/* ==========================================================================
   QR genel icerik sayfalari (app/Views/public/: menu, vcard, bio, coupon,
   event, gallery, text, wifi, product) — Public.jsx MenuPage / VCardPage /
   BioPage / CouponPage / TicketPage karsiligi.
   Mobil oncelikli: 480px'lik .ony-public__frame icinde akar, 360px'te yatay
   tasma yok. Yalnizca token degiskenleri; ham renk yok.
   ========================================================================== */

/* --- Ortak iskelet --- */

.ony-pub {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ony-pub-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.ony-pub-head {
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--surface-card);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.ony-pub-title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
    margin: 0;
    overflow-wrap: anywhere;
}

.ony-pub-subtitle {
    font-family: var(--font-display);
    font-size: var(--size-sm);
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-4);
}

.ony-pub-lead {
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    margin: var(--space-3) 0 0;
    overflow-wrap: anywhere;
}

.ony-pub-note {
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    margin: 0;
    overflow-wrap: anywhere;
}

.ony-pub-fineprint {
    padding: 0 var(--space-5) var(--space-5);
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-caption-size);
    line-height: var(--leading-relaxed);
}

.ony-pub-body .ony-pub-fineprint {
    padding: 0;
}

.ony-pub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: var(--space-4) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-caption-size);
}

.ony-pub-meta__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.ony-pub-actions {
    padding: 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-pub-body .ony-pub-actions {
    padding: 0;
}

.ony-pub-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Kapak gorseli / yer tutucu --- */

.ony-pub-cover {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--surface-sunken);
}

.ony-pub-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* --- Kopyalama: ui.js'in [data-ony-suffix-action="copy"] kancasi kullanilir.
       Dugme, kaynak alanla ayni .ony-input-wrap icinde durmak zorundadir. --- */

.ony-pub-copy {
    display: block;
    position: relative;
}

.ony-pub-copy__src {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    resize: none;
    pointer-events: none;
}

.ony-pub-copy__btn.ony-input__affix {
    position: static;
    width: 100%;
    justify-content: center;
    color: inherit;
}

.ony-pub-mono {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wide);
}

/* --- Etiketli alan listesi (wifi) --- */

.ony-pub-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-pub-field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}

.ony-pub-field__value {
    margin: 0;
    font-size: var(--text-ui-size);
    color: var(--text-primary);
}

.ony-pub-steps {
    margin: 0;
    padding-left: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
}

.ony-pub-steps strong {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.ony-pub-icon-head {
    text-align: center;
}

.ony-pub-icon-head__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
    margin-bottom: var(--space-5);
}

/* --- Canli cizilen QR (vcard, event, wifi) --- */

.ony-pub-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0;
}

.ony-pub-qr__frame {
    max-width: 100%;
    line-height: 0;
}

.ony-pub-qr__caption {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-caption-size);
    text-align: center;
}

/* --- Fiyat: KDV haric buyuk, altinda KDV dahil kucuk --- */

.ony-pub-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    text-align: right;
}

.ony-pub-price--block {
    align-items: flex-start;
    text-align: left;
    margin: 0;
}

.ony-pub-price__main {
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: var(--numeric-figures);
    white-space: nowrap;
}

.ony-pub-price--block .ony-pub-price__main {
    font-family: var(--font-display);
    font-size: var(--size-xl);
}

.ony-pub-price__vat {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    font-variant-numeric: var(--numeric-figures);
    white-space: nowrap;
}

/* --- Dijital menu --- */

.ony-pub-menu__nav {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-card);
    border-bottom: var(--border-width) solid var(--border-subtle);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ony-pub-menu__nav::-webkit-scrollbar {
    display: none;
}

.ony-pub-chip {
    flex: none;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    border: var(--border-width) solid var(--border-subtle);
    background: var(--surface-page);
    color: var(--text-primary);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    line-height: 30px;
}

.ony-pub-chip:hover {
    border-color: var(--border-accent);
    color: var(--text-accent);
}

.ony-pub-menu__cat {
    scroll-margin-top: 56px;
}

.ony-pub-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-pub-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    min-width: 0;
}

.ony-pub-menu__thumb {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-sunken);
}

.ony-pub-menu__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.ony-pub-menu__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ony-pub-menu__name {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.ony-pub-menu__desc {
    flex: 1 0 100%;
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
}

/* --- vCard --- */

.ony-pub-vcard__hero {
    background: var(--surface-inverse);
    padding: var(--space-8) var(--space-6) var(--space-11);
    text-align: center;
}

.ony-pub-vcard__avatar {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    margin: 0 auto var(--space-4);
    background: var(--ony-navy-600);
}

.ony-pub-vcard__avatar--text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    color: var(--ony-white);
}

.ony-pub-vcard__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    color: var(--ony-white);
    overflow-wrap: anywhere;
}

.ony-pub-vcard__role {
    margin: var(--space-2) 0 0;
    color: var(--text-inverse-secondary);
    font-size: var(--text-ui-size);
    overflow-wrap: anywhere;
}

.ony-pub-vcard__body {
    padding: 0 var(--space-5) var(--space-5);
    margin-top: -32px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-pub-vcard__card {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.ony-pub-vcard__row + .ony-pub-vcard__row {
    border-top: var(--border-width) solid var(--border-subtle);
}

.ony-pub-vcard__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    color: var(--text-primary);
    text-decoration: none;
    min-height: var(--touch-target);
    min-width: 0;
}

a.ony-pub-vcard__link:hover {
    background: var(--action-ghost-hover);
}

.ony-pub-vcard__glyph {
    flex: none;
    display: flex;
    color: var(--text-accent);
}

.ony-pub-vcard__text {
    min-width: 0;
}

.ony-pub-vcard__label {
    display: block;
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-pub-vcard__value {
    display: block;
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
}

/* --- Bio (layout 'dark' temayla cagrilir; renkler token'dan doner) --- */

.ony-pub-bio__head {
    padding: var(--space-9) var(--space-6) var(--space-6);
    text-align: center;
}

.ony-pub-bio__avatar {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    margin: 0 auto var(--space-4);
    background: var(--surface-sunken);
}

.ony-pub-bio__avatar--text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.ony-pub-bio__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: var(--weight-bold);
    overflow-wrap: anywhere;
}

.ony-pub-bio__desc {
    margin: var(--space-3) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    overflow-wrap: anywhere;
}

.ony-pub-bio__links {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-pub-bio__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    min-height: var(--touch-target);
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
    text-decoration: none;
    min-width: 0;
}

.ony-pub-bio__link:hover {
    border-color: var(--border-accent);
}

.ony-pub-bio__link > .ony-icon:first-child {
    flex: none;
    color: var(--text-accent);
}

.ony-pub-bio__link-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ony-pub-bio__chevron {
    flex: none;
    color: var(--text-muted);
}

.ony-pub-bio__socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-6) 0;
}

.ony-pub-bio__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    color: var(--text-primary);
    text-decoration: none;
}

.ony-pub-bio__social:hover {
    border-color: var(--border-accent);
    color: var(--text-accent);
}

/* --- Kupon --- */

.ony-pub-ticket {
    border: var(--border-width-strong) dashed var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.ony-pub-ticket__label {
    display: block;
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-pub-ticket__code {
    display: block;
    margin: var(--space-3) 0 var(--space-5);
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-wide);
    overflow-wrap: anywhere;
}

.ony-pub-ticket__hint {
    margin: var(--space-4) 0 0;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-pub-terms__list {
    margin: 0;
    padding-left: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-caption-size);
    line-height: var(--leading-relaxed);
}

/* --- Etkinlik / bilet --- */

.ony-pub-event {
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.ony-pub-event__head {
    background: var(--surface-inverse);
    padding: var(--space-6) var(--space-5);
}

.ony-pub-event__kicker {
    display: block;
    color: var(--ony-accent-400);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}

.ony-pub-event__title {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: var(--weight-bold);
    color: var(--ony-white);
    overflow-wrap: anywhere;
}

.ony-pub-event__when {
    margin: var(--space-3) 0 0;
    color: var(--text-inverse-secondary);
    font-size: var(--text-caption-size);
    overflow-wrap: anywhere;
}

.ony-pub-event__qr {
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.ony-pub-event__code {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-ui-size);
    letter-spacing: var(--tracking-wide);
    overflow-wrap: anywhere;
}

.ony-pub-event__grid {
    margin: 0;
    padding: var(--space-5);
    border-top: var(--border-width) dashed var(--border-strong);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.ony-pub-event__cell dt {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-pub-event__cell dd {
    margin: var(--space-1) 0 0;
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

/* --- Galeri --- */

.ony-pub-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.ony-pub-gallery__link {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-sunken);
}

.ony-pub-gallery__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.ony-pub-gallery__caption {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* --- Metin --- */

.ony-pub-text {
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    font-size: var(--size-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* --- Urun dogrulama --- */

.ony-pub-verify {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.ony-pub-verify--warn {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.ony-pub-verify__glyph {
    flex: none;
    display: flex;
}

.ony-pub-verify__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-caption-size);
    line-height: var(--leading-relaxed);
    min-width: 0;
}

.ony-pub-verify__text strong {
    font-size: var(--text-ui-size);
}

.ony-pub-verify__stamp {
    color: var(--text-secondary);
    font-variant-numeric: var(--numeric-figures);
}

.ony-pub-specs {
    margin: 0;
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ony-pub-specs__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-ui-size);
}

.ony-pub-specs__row + .ony-pub-specs__row {
    border-top: var(--border-width) solid var(--border-subtle);
}

.ony-pub-specs__row dt {
    color: var(--text-secondary);
}

.ony-pub-specs__row dd {
    margin: 0;
    font-weight: var(--weight-medium);
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- 360px ve alti: iki kolonlu izgaralar tek kolona duser --- */

@media (max-width: 380px) {
    .ony-pub-body,
    .ony-pub-head,
    .ony-pub-actions,
    .ony-pub-fineprint {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .ony-pub-body .ony-pub-actions,
    .ony-pub-body .ony-pub-fineprint {
        padding-left: 0;
        padding-right: 0;
    }

    .ony-pub-menu__item {
        gap: var(--space-3);
    }

    .ony-pub-menu__thumb {
        width: 48px;
        height: 48px;
    }

    .ony-pub-event__grid,
    .ony-pub-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-pub-ticket__code {
        font-size: var(--size-xl);
    }
}

/* ============================================================
   Baskı merkezi, toplu üretim ve marka şablonları
   (app/print.php, app/bulk.php, app/brand-templates.php)
   Yalnızca token değişkenleri; ham renk yok.
   Dar ekranda (360px) yatay taşma olmaz.
   ============================================================ */

/* ---------- Baskı merkezi ---------- */

.ony-print__form-card {
    margin-bottom: var(--space-6);
}

/* align-items: end DEĞİL. Sütunlardan birinin ipucu iki satıra sarınca (uzun
   kısa adres) alttan hizalama o sütunun etiketini ve girdisini diğerlerinden
   17px yukarı kaydırıyordu. Üstten hizalama etiketleri ve girdileri aynı Y'de
   tutar; farkı sütunun ALTINA bırakır, orada göze batmaz. */
.ony-print__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    align-items: start;
}

/* "Kısa adres" ipucu, özel slug 60 karaktere kadar tiresiz olabildiği için tek
   parça kırılamaz bir belirtece dönüşüyor; .ony-field bir grid öğesi ve
   varsayılan min-width:auto'su izi bu belirtecin min-content genişliğine
   zorluyordu (360px'te iz 286px yerine 545.7px, içerik alanı yatay kaydırılabilir
   hâle geliyordu). anywhere min-content genişliğini de düşürdüğü için tek başına
   yeter. */
.ony-print__form .ony-field__hint {
    overflow-wrap: anywhere;
}

/* Eylem satırı alan ızgarasının DIŞINDA, kendi satırında ve sola hizalı.
   Bu kod tabanının tek birincil düğme deseni: qr-detail.php:316.
   Üst boşluk ızgara gap'iyle aynı — sahte etiket satırı ya da piksel hesaplı
   margin-top gerekmez. */
.ony-print__form-actions {
    display: flex;
    margin-top: var(--space-5);
}

.ony-print__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ony-print__grid {
    /* Önizleme genişliğinin TEK kaynağı burası; medya alanının yüksekliği
       bundan ve en dar şablon oranından hesaplanır. --print-preview-ratio
       print.php tarafından $templates üzerinden basılır (varsayılan güvenlik ağı). */
    --print-preview-w: 132px;
    --print-preview-ratio: 0.6667;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-5);
}

/* Kartlar ızgarada eşit yükseklikte uzuyor ama içlerindeki tile uzamıyordu;
   bu yüzden .ony-print__cta'daki margin-top:auto'nun tüketeceği boşluk hiç
   oluşmuyor, indirme düğmeleri 66px'e varan farkla hizasız duruyordu. */
.ony-print__grid > .ony-card {
    display: flex;
    /* Sütun yönü bugün fark yaratmaz (kartın tek çocuğu var); karta ileride
       title/action verilirse .ony-card__head gövdenin YANINA değil ÜSTÜNE düşer. */
    flex-direction: column;
}

.ony-print__tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
    min-width: 0;
    flex: 1;
}

/* Önizleme gerçek baskı oranını korur, dolayısıyla yükseklikleri farklıdır.
   Sabit yükseklikli bu alanda ALTA oturur: kutular ortak bir zemin çizgisine
   basar, altındaki ad/ölçü/açıklama tüm kartlarda aynı Y'de başlar. */
.ony-print__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: calc(var(--print-preview-w) / var(--print-preview-ratio));
    margin-bottom: var(--space-4);
}

.ony-print__preview {
    position: relative;
    width: 100%;
    max-width: var(--print-preview-w);
    /* aspect-ratio satır içi verilir (şablon oranı); desteklenmeyen tarayıcıda bu taban yükseklik iş görür */
    min-height: 96px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--surface-sunken);
    border: var(--border-width) dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    overflow: hidden;
}

.ony-print__preview--circle {
    border-radius: var(--radius-pill);
}

.ony-print__preview-cta,
.ony-print__preview-foot {
    display: block;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
}

.ony-print__preview-cta {
    width: 56%;
}

.ony-print__preview-foot {
    width: 38%;
}

.ony-print__preview-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.ony-print__preview-fold {
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    top: 50%;
    border-top: var(--border-width) dashed var(--border-strong);
}

.ony-print__name {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
}

.ony-print__size {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-print__desc {
    margin: 0 0 var(--space-3);
    font-size: var(--text-caption-size);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

.ony-print__cta {
    margin-top: auto;
}

.ony-print__hint {
    margin-top: var(--space-6);
}

/* ---------- Toplu üretim ---------- */

.ony-bulk__limit {
    margin-bottom: var(--space-6);
}

.ony-bulk__report {
    margin-bottom: var(--space-6);
}

.ony-bulk__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.ony-bulk__cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-4);
}

.ony-bulk__col {
    padding: var(--space-4);
    border: var(--border-card);
    border-radius: var(--radius-md);
    min-width: 0;
}

.ony-bulk__col-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
}

.ony-bulk__col-name code {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    background: var(--surface-sunken);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

.ony-bulk__req {
    color: var(--status-danger-text);
    font-weight: var(--weight-bold);
}

.ony-bulk__col-desc {
    margin-top: var(--space-2);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.ony-bulk__types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border-subtle);
}

.ony-bulk__type {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ony-bulk__type-name {
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
}

.ony-bulk__type-sample {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.ony-bulk__sample {
    margin: var(--space-5) 0 0;
    padding: var(--space-4);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ony-bulk__upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-bulk__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    border: var(--border-width-strong) dashed var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.ony-bulk__drop-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--size-md);
    color: var(--text-primary);
}

.ony-bulk__drop-text {
    margin: 0;
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
}

.ony-bulk__file {
    max-width: 100%;
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
}

.ony-bulk__upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* ---------- Marka şablonları ---------- */

.ony-bt__form-card {
    margin-bottom: var(--space-6);
}

.ony-bt__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-bt__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-5);
}

.ony-bt__color {
    padding: var(--space-2);
    min-height: 40px;
    cursor: pointer;
}

.ony-bt__gradient {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}

.ony-bt__form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.ony-bt__list {
    margin-top: var(--space-6);
}

.ony-bt__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-5);
}

.ony-bt__tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ony-bt__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

.ony-bt__preview svg {
    display: block;
    width: 100%;
    max-width: 148px;
    height: auto;
}

.ony-bt__meta {
    min-width: 0;
}

.ony-bt__name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.ony-bt__ozet {
    margin-top: var(--space-2);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-bt__tarih {
    margin-top: 2px;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-bt__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    flex-wrap: wrap;
}

/* ---------- Dar ekran ---------- */

@media (max-width: 900px) {
    .ony-bulk__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .ony-print__form { grid-template-columns: 1fr; }
    .ony-bt__grid { grid-template-columns: 1fr; }
    .ony-bt__row { grid-template-columns: 1fr; }
    .ony-bulk__drop { padding: var(--space-6) var(--space-4); }
}

/* Izgara tabanını 190px'ten 150px'e BURADA düşürüyoruz, 560px'te değil.
   560px'te düşürmek 528px'lik kapta 2 sütunu (256px) 3 sütuna (165px)
   çeviriyordu: ekran 1px daralınca kart bir anda küçülüyor ve sütun genişliği
   önizlemenin 132px'lik --print-preview-w tavanının altına iniyordu. 430px
   sınırında iki taban da 2 sütun verdiği için sınırın iki yanı süreklidir.
   SIRA: bu blok 380px bloğundan ÖNCE durmalı (özgüllükler eşit). */
@media (max-width: 430px) {
    .ony-print__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 380px) {
    .ony-print__grid { grid-template-columns: 1fr; }
    .ony-bulk__cols,
    .ony-bulk__types { grid-template-columns: 1fr; }
    .ony-bt__actions > form,
    .ony-bulk__upload-actions > * { width: 100%; }
}

/* ==========================================================================
   Pazarlama içerik sayfaları: özellikler, QR tipleri, kullanım senaryoları,
   SSS, hakkımızda, iletişim
   (marketing/features.php, qr-types.php, use-cases.php, faq.php, about.php,
    contact.php — Pages.jsx / Content.jsx karşılığı)
   Yalnızca token değişkenleri; ham renk yok. 360px genişliğe kadar yatay taşma olmaz.
   ========================================================================== */

/* --- Ortak sayfa başlığı (Pages.jsx Head) --- */
.ony-mkt-pagehead {
    padding: var(--section-y-compact) 0 0;
    text-align: center;
}

.ony-mkt-pagehead__title {
    font-family: var(--font-display);
    font-size: var(--text-h1-size);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
    margin: 0;
    overflow-wrap: break-word;
}

.ony-mkt-pagehead__title--badged {
    margin-top: var(--space-5);
}

.ony-mkt-pagehead__lead {
    margin: 14px auto 0;
}

/* --- Özellikler sayfası --- */
.ony-feat-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-11);
    align-items: start;
}

.ony-feat-nav {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-left: var(--border-width-strong) solid var(--border-subtle);
    min-width: 0;
}

.ony-feat-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-ui-size);
    padding: 9px 14px;
    margin-left: calc(-1 * var(--border-width-strong));
    text-decoration: none;
    border-left: var(--border-width-strong) solid transparent;
    color: var(--text-secondary);
    transition: var(--transition-control);
}

.ony-feat-nav__link:hover {
    color: var(--text-primary);
}

.ony-feat-nav__link--active {
    border-left-color: var(--action-primary);
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.ony-feat-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    min-width: 0;
}

.ony-feat-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 96px;
}

.ony-feat-card {
    display: grid;
    grid-template-columns: 1.25fr minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
}

.ony-feat-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ony-feat-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--surface-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ony-feat-card__title {
    font-family: var(--font-display);
    font-size: var(--text-h3-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-feat-card__text {
    font-size: var(--text-body-size);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: var(--space-4) 0 0;
}

.ony-feat-items {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ony-feat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-ui-size);
}

.ony-feat-item__label {
    flex: 1;
    min-width: 0;
}

.ony-feat-vis {
    background: var(--surface-sunken);
    border-radius: var(--radius-lg);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
}

.ony-feat-vis__note {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    text-align: center;
}

/* --- QR tipleri sayfası --- */
.ony-types-filter {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8);
    overflow-x: auto;
}

.ony-types-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.ony-types-cell {
    display: flex;
    min-width: 0;
}

.ony-types-cell[hidden] {
    display: none;
}

.ony-types-cell > .ony-card {
    flex: 1;
}

.ony-type-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.ony-type-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--surface-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ony-type-card__title {
    font-family: var(--font-display);
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin: var(--space-5) 0 0;
    overflow-wrap: break-word;
}

.ony-type-card__text {
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
}

.ony-type-card__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: var(--border-width) solid var(--border-subtle);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-types-note {
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: var(--space-8) 0 0;
    max-width: 72ch;
}

/* --- Kullanım senaryoları sayfası --- */
.ony-case-tabs {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.ony-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    margin-top: var(--space-9);
}

.ony-case-text {
    font-size: var(--text-body-lg-size);
    line-height: 1.7;
    margin: 14px 0 0;
}

.ony-case-flow-card {
    margin-top: var(--space-7);
}

.ony-case-flow__head {
    font-family: var(--font-display);
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-7);
}

.ony-case-flow {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.ony-case-flow__step {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.ony-case-flow__no {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--action-primary);
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    margin: 0 auto 10px;
}

.ony-case-flow__label {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
    overflow-wrap: break-word;
}

.ony-case-flow__arrow {
    display: flex;
    align-items: center;
    height: 36px;
    flex: none;
}

.ony-case-types {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: var(--border-width) solid var(--border-subtle);
}

.ony-case-types__label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: var(--space-1);
}

/* --- SSS sayfası --- */
.ony-faq-cats {
    margin-top: var(--space-7);
    overflow-x: auto;
}

.ony-faq-count {
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
    margin: var(--space-6) 0 0;
}

.ony-faq-list {
    margin-top: var(--space-6);
}

.ony-faq-empty {
    text-align: center;
    padding: var(--space-8) 0;
}

.ony-faq-empty__title {
    font-size: var(--text-body-size);
    margin: 0;
}

.ony-faq-empty__text {
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
}

.ony-faq-cta-wrap {
    margin-top: var(--space-10);
}

.ony-faq-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
    flex-wrap: wrap;
}

/* Metin tonu olarak --text-inverse / --text-inverse-secondary yerine sabit
   rampa tonlari kullanilir: kart .ony-card--inverse ile her iki temada da
   lacivert kalirken bu iki takma ad koyu temada ters donup zemine karisiyordu
   (bkz. pazarlama kurumsal karti, .ony-mkt-enterprise__title/__text). */
.ony-faq-cta__title {
    font-family: var(--font-display);
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    color: var(--ony-white);
    margin: 0;
}

.ony-faq-cta__text {
    font-size: var(--text-body-size);
    color: var(--ony-gray-400);
    margin: var(--space-3) 0 0;
}

.ony-faq-cta__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* --- Hakkımızda sayfası --- */
.ony-about-stats-section {
    padding: var(--space-10) 0 0;
}

.ony-about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.ony-about-stat {
    text-align: center;
}

.ony-about-stat__num {
    font-family: var(--font-display);
    font-weight: var(--weight-extrabold);
    font-size: var(--size-2xl);
    letter-spacing: var(--tracking-display);
    overflow-wrap: break-word;
}

.ony-about-stat__label {
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

.ony-about-story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    align-items: center;
}

.ony-about-story__text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: var(--space-5);
}

.ony-about-story__text p {
    font-size: var(--text-body-lg-size);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

.ony-about-photo {
    min-height: 320px;
    border-radius: var(--radius-xl);
    background: var(--surface-sunken);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--space-6);
}

.ony-about-photo__note {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    text-align: center;
}

.ony-about-products {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-9);
}

.ony-about-product__name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-body-size);
    letter-spacing: var(--tracking-tight);
    margin-top: 14px;
    overflow-wrap: break-word;
}

.ony-about-product__desc {
    font-size: 13px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

.ony-about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
    margin-top: var(--space-9);
}

.ony-about-value__title {
    font-family: var(--font-display);
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin: 14px 0 0;
}

.ony-about-value__text {
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
}

/* --- İletişim sayfası --- */
.ony-contact-grid {
    display: grid;
    grid-template-columns: 1.15fr minmax(0, 0.85fr);
    gap: var(--space-8);
    align-items: start;
}

.ony-contact-form__title {
    font-family: var(--font-display);
    font-size: var(--text-h3-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-contact-form__lead {
    font-size: var(--text-body-size);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
}

.ony-contact-alert {
    margin-top: var(--space-6);
}

.ony-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-7);
}

.ony-contact-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

/* Bal küpü alanı: gözden ve ekran okuyucudan gizli, yalnızca botlar doldurur */
.ony-contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ony-contact-kvkk {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ony-contact-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.ony-contact-map {
    height: 180px;
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    text-align: center;
    /* iframe köşeleri kaptan taşmasın */
    overflow: hidden;
}

/* Harita yüklendikten sonra kutu tamamen iframe'e bırakılır: ortalama ve
   dolgu kalkar, yoksa harita kenarlarından kırpılır. */
.ony-contact-map--loaded {
    display: block;
    padding: 0;
    height: 240px;
}

.ony-contact-map__note {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.ony-contact-office__title {
    font-family: var(--font-display);
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin: var(--space-6) 0 0;
}

.ony-contact-office__addr {
    font-size: var(--text-ui-size);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
}

.ony-contact-office__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.ony-contact-channel {
    display: flex;
    gap: 14px;
}

.ony-contact-channel__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--surface-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ony-contact-channel__body {
    flex: 1;
    min-width: 0;
}

.ony-contact-channel__title {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-size);
}

.ony-contact-channel__desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.ony-contact-channel__links {
    font-size: 13px;
    line-height: 1.7;
    margin-top: var(--space-3);
    overflow-wrap: break-word;
}

.ony-contact-channel__hours {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* --- Duyarlılık: pazarlama içerik sayfaları --- */
@media (max-width: 1024px) {
    .ony-feat-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .ony-feat-nav {
        position: static;
        flex-direction: row;
        border-left: 0;
        border-bottom: var(--border-width-strong) solid var(--border-subtle);
        overflow-x: auto;
        gap: var(--space-2);
    }

    .ony-feat-nav__link {
        margin-left: 0;
        margin-bottom: calc(-1 * var(--border-width-strong));
        border-left: 0;
        border-bottom: var(--border-width-strong) solid transparent;
        white-space: nowrap;
    }

    .ony-feat-nav__link--active {
        border-left-color: transparent;
        border-bottom-color: var(--action-primary);
    }

    .ony-feat-card {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
    }

    .ony-types-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ony-about-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ony-about-story {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-9);
    }

    .ony-about-values {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .ony-mkt-pagehead__title {
        font-size: var(--text-h2-size);
    }

    .ony-case-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .ony-case-flow {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-5);
    }

    .ony-case-flow__step {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        text-align: left;
    }

    .ony-case-flow__no {
        margin: 0;
        flex: none;
    }

    .ony-case-flow__arrow {
        display: none;
    }

    .ony-about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ony-about-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ony-about-photo {
        min-height: 220px;
    }

    .ony-feat-vis {
        min-height: 200px;
    }
}

@media (max-width: 560px) {
    .ony-types-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-about-products {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-contact-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ony-about-stat__num {
        font-size: var(--text-h3-size);
    }

    .ony-faq-cta__actions .ony-btn,
    .ony-contact-office__actions .ony-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ---------- Yasal sayfa ekranları (Controllers/Legal/*) --------------------
   Kapsam:
     .ony-legal__head / __title / __meta / __back / __related  -> legal/show.php
     .ony-legal__intro / __num                                 -> tohum gövde HTML'i
     .ony-legal-index__*                                       -> legal/index.php
     .ony-legal-form__*                                        -> legal/data-request.php
     .ony-cookiepref__*                                        -> legal/cookie-preferences.php
   Gövde tipografisi zaten .ony-legal__article altında tanımlı; burada yalnızca
   başlık bloğu, liste kartları, form yerleşimi ve çerez kategorisi satırları var.
   Tüm renk, boşluk ve yarıçap değerleri token değişkenlerinden gelir.
   360px genişliğe kadar yatay taşma olmaz: gridler tek kolona iner ve uzun
   başlıklar sarılır. */

/* Belge başlığı — legal/show.php ve legal/data-request.php ortak kullanır */
.ony-legal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.ony-legal__head-main {
    min-width: 0;
}

.ony-legal__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-xs);
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-4);
}

.ony-legal__back:hover {
    color: var(--text-primary);
}

.ony-legal__title {
    font-size: var(--text-h1-size);
    line-height: var(--leading-tight);
    margin: 0;
    overflow-wrap: break-word;
}

.ony-legal__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    font-size: var(--size-xs);
    color: var(--text-secondary);
}

/* Tohum gövdesindeki giriş paragrafı ve madde numarası */
.ony-legal__article .ony-legal__intro {
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.ony-legal__num {
    color: var(--text-muted);
    font-variant-numeric: var(--numeric-figures);
    margin-right: var(--space-1);
}

/* Çapraz bağlantılar */
.ony-legal__related {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--border-subtle);
}

.ony-legal__related-title {
    font-size: var(--size-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.ony-legal__related-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ony-legal__related-link {
    text-decoration: none;
    max-width: 100%;
}

/* ---------- Yasal metin listesi (legal/index.php) ---------- */

.ony-legal-index {
    padding: var(--section-y-compact) 0;
}

.ony-legal-index__head {
    max-width: var(--container-narrow);
    margin-bottom: var(--space-10);
}

.ony-legal-index__title {
    font-size: var(--text-h1-size);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
}

.ony-legal-index__lead {
    margin-bottom: var(--space-6);
}

.ony-legal-index__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ony-legal-index__group {
    margin-bottom: var(--space-10);
}

.ony-legal-index__group-head {
    margin-bottom: var(--space-5);
}

.ony-legal-index__group-title {
    font-size: var(--text-h3-size);
    margin: 0 0 var(--space-2);
}

.ony-legal-index__group-desc {
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
    margin: 0;
}

.ony-legal-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.ony-legal-index__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--card-pad);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: var(--transition-surface);
}

.ony-legal-index__card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}

.ony-legal-index__card-title {
    font-size: var(--text-h4-size);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.ony-legal-index__card-summary {
    font-size: var(--text-ui-size);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.ony-legal-index__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    font-variant-numeric: var(--numeric-figures);
}

.ony-legal-index__note {
    margin-top: var(--space-4);
}

/* ---------- KVKK başvuru formu (legal/data-request.php) ---------- */

.ony-legal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: var(--text-legal-measure);
    margin-top: var(--space-8);
    padding: var(--card-pad);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.ony-legal-form__alert {
    max-width: var(--text-legal-measure);
    margin-top: var(--space-6);
}

.ony-legal-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.ony-legal-form__set {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.ony-legal-form__set > .ony-field__label {
    margin-bottom: var(--space-4);
    padding: 0;
}

.ony-legal-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
}

.ony-legal-form__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ony-legal-form__half {
    max-width: 340px;
}

.ony-legal-form__consent {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--card-pad-sm);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

.ony-legal-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ---------- Çerez tercih merkezi (legal/cookie-preferences.php) ---------- */

.ony-cookiepref {
    padding: var(--section-y-compact) 0;
}

.ony-cookiepref__head {
    margin-bottom: var(--space-6);
}

.ony-cookiepref__title {
    font-size: var(--text-h1-size);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
}

.ony-cookiepref__alert {
    margin-bottom: var(--space-6);
}

.ony-cookiepref__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ony-cookiepref__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ony-cookiepref__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--card-pad-sm);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.ony-cookiepref__item-text {
    min-width: 0;
}

.ony-cookiepref__item-title {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.ony-cookiepref__item-desc {
    font-size: var(--text-caption-size);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
}

.ony-cookiepref__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ony-cookiepref__foot {
    margin-top: var(--space-6);
    font-size: var(--text-caption-size);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

/* ---------- Dar ekran: tek kolon, taşmasız ---------- */

@media (max-width: 640px) {
    .ony-legal-index__grid {
        grid-template-columns: 1fr;
    }
    .ony-legal-form__grid {
        grid-template-columns: 1fr;
    }
    .ony-legal-form__half {
        max-width: none;
    }
    .ony-legal-form,
    .ony-cookiepref__item {
        padding: var(--card-pad-sm);
    }
    .ony-cookiepref__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .ony-legal-index__actions .ony-btn,
    .ony-legal-form__actions .ony-btn,
    .ony-cookiepref__actions .ony-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ============================================================
   Ekip, faturalandirma ve odeme akisi — ekip/abonelik/odeme ajani
   Kaynak: ui_kits/app/Workspace.jsx (Team), Billing.jsx, Checkout.jsx.
   Yalnizca token degiskenleri kullanilir; 360px'e kadar yatay tasma yok.
   ============================================================ */

/* ---- Ortak: ekran okuyucu metni ---- */
.ony-team__sr,
.ony-bill__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Ekip ---- */
.ony-team__notice,
.ony-bill__notice,
.ony-co__notice {
    margin-bottom: var(--space-6);
}

.ony-team__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-6);
    align-items: start;
}

.ony-team__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.ony-team__cardhead,
.ony-bill__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-6) var(--space-7);
}

.ony-team__user {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

/* Bas harf tonu sabit --ony-white: avatar zemini (--action-secondary) her iki
   temada da koyu kalirken --text-inverse koyu temada koyulasip harfleri
   okunmaz hale getiriyordu. */
.ony-team__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--action-secondary);
    color: var(--ony-white);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-bold);
}

.ony-team__userinfo {
    min-width: 0;
}

.ony-team__name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: var(--weight-semibold);
    flex-wrap: wrap;
}

.ony-team__mail {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    word-break: break-word;
}

.ony-team__rolform {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-team__empty,
.ony-bill__empty {
    padding: 0 var(--space-7) var(--space-7);
}

.ony-team__rolelist {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-team__rolename {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
}

.ony-team__roledesc {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-top: 3px;
}

.ony-team__rolefoot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border-subtle);
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-team__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-team__dialogtext,
.ony-bill__dialogtext {
    margin: 0;
    line-height: var(--leading-normal);
}

.ony-team__dialogform,
.ony-bill__dialogform {
    display: inline;
}

/* ---- Faturalandirma ---- */
.ony-bill__grid {
    display: grid;
    grid-template-columns: 1.2fr minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.ony-bill__history {
    margin-top: var(--space-6);
}

.ony-bill__planhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.ony-bill__planleft,
.ony-bill__planright {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-bill__price {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--size-lg);
    letter-spacing: var(--tracking-display);
}

.ony-bill__usage {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-bill__unlimited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-bill__list,
.ony-co__banklist,
.ony-co__donelist {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
}

.ony-bill__list > div,
.ony-co__banklist > div,
.ony-co__donelist > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.ony-bill__list dt,
.ony-co__banklist dt,
.ony-co__donelist dt {
    color: var(--text-secondary);
    font-size: var(--size-2xs);
}

.ony-bill__list dd,
.ony-co__banklist dd,
.ony-co__donelist dd {
    margin: 0;
    text-align: right;
    font-size: var(--size-2xs);
    font-weight: var(--weight-medium);
    word-break: break-word;
    max-width: 100%;
}

/* ---- Odeme akisi ---- */
.ony-co__stepper {
    margin-bottom: var(--space-6);
}

.ony-co__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
    align-items: start;
}

.ony-co__main,
.ony-co__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.ony-co__title {
    font-family: var(--font-display);
    font-size: var(--size-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.ony-co__lead {
    font-size: var(--size-2xs);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
}

.ony-co__cycles,
.ony-co__types,
.ony-co__methods {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.ony-co__cycle,
.ony-co__type,
.ony-co__method {
    flex: 1 1 200px;
    min-width: 0;
    padding: var(--space-5) var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: var(--transition-surface);
}

.ony-co__cycle:hover,
.ony-co__type:hover {
    border-color: var(--border-strong);
}

.ony-co__cycle--active,
.ony-co__type--active,
.ony-co__method--active {
    border-color: var(--action-primary);
    background: var(--surface-accent-soft);
    box-shadow: inset 0 0 0 1px var(--action-primary);
}

.ony-co__type {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ony-co__typename {
    font-weight: var(--weight-semibold);
}

.ony-co__typedesc {
    font-size: var(--text-caption-size);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}

.ony-co__method {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ony-co__method--disabled {
    opacity: 0.55;
    background: var(--surface-sunken);
}

.ony-co__plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.ony-co__plan {
    display: block;
    min-width: 0;
    padding: var(--space-7);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    box-shadow: var(--shadow-1);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-surface);
}

.ony-co__plan:hover {
    box-shadow: var(--shadow-2);
}

.ony-co__plan--active {
    border-color: var(--action-primary);
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--action-primary);
}

.ony-co__planhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.ony-co__planname {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
}

.ony-co__planprice {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-display);
}

.ony-co__planper {
    font-family: var(--font-body);
    font-size: var(--size-2xs);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}

.ony-co__planvat {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.ony-co__planlist {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ony-co__planlist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-co__plancurrent {
    margin-top: var(--space-5);
}

.ony-co__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-6);
    max-width: 620px;
}

.ony-co__row2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-5);
}

.ony-co__hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-co__bank {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.ony-co__banktitle {
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}

.ony-co__consents {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.ony-co__consenterr {
    font-size: var(--text-caption-size);
    color: var(--status-danger-text);
}

.ony-co__legalnote {
    margin: 0;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.ony-co__submit {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-6);
}

.ony-co__sumhead {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    font-size: var(--size-2xs);
    color: var(--text-secondary);
}

.ony-co__sumlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: var(--size-2xs);
}

.ony-co__sumlist > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
}

.ony-co__sumgift {
    color: var(--status-success-text);
}

.ony-co__sumtotal {
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border-subtle);
    font-weight: var(--weight-bold);
    font-size: var(--size-md);
}

.ony-co__sumnote {
    margin: var(--space-5) 0 0;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* ---- Siparis alindi ---- */
.ony-co__done {
    text-align: center;
    margin-bottom: var(--space-7);
}

.ony-co__doneicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    background: var(--status-success-bg);
}

.ony-co__donetitle {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: var(--space-5) 0 0;
}

.ony-co__donelead {
    max-width: 52ch;
    margin: var(--space-4) auto 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* İki eş kart (Sipariş özeti / Havale bilgileri) aynı sütun genişliğinde durur
   ama satır sayıları farklıdır; align-items:start kalırsa alt kenarlar geniş
   ekranda belirgin şekilde kayar. Varsayılan stretch ikisini eşitler; tek sütuna
   düşen dar ekranda zaten fark etmez. */
.ony-co__donegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-6);
}

.ony-co__doneactions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-7);
}

/* ---- Duyarli davranis ---- */
@media (max-width: 1024px) {
    .ony-team__grid,
    .ony-bill__grid,
    .ony-co__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .ony-team__cardhead,
    .ony-bill__cardhead {
        padding: var(--space-5);
    }

    .ony-team__empty,
    .ony-bill__empty {
        padding: 0 var(--space-5) var(--space-5);
    }

    .ony-co__plan {
        padding: var(--space-6);
    }

    .ony-co__cycle,
    .ony-co__type,
    .ony-co__method {
        flex: 1 1 100%;
    }

    .ony-co__submit {
        justify-content: stretch;
    }

    .ony-bill__list > div,
    .ony-co__banklist > div,
    .ony-co__donelist > div {
        flex-direction: column;
        gap: var(--space-1);
    }

    .ony-bill__list dd,
    .ony-co__banklist dd,
    .ony-co__donelist dd {
        text-align: left;
    }
}

/* ---------- Hesap ve güvenlik ayarları (app/settings.php, settings/two-factor-setup.php) ---------- */

.ony-set__card {
    margin-bottom: var(--space-5);
}

.ony-set__list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
}

.ony-set__list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.ony-set__list dt {
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    margin: 0;
}

.ony-set__list dd {
    margin: 0;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    text-align: right;
}

.ony-set__text {
    color: var(--text-secondary);
    margin: 0 0 var(--space-5);
    max-width: 60ch;
}

.ony-set__text--pad {
    padding: var(--space-6) var(--card-pad);
}

.ony-set__inline-form {
    margin: 0;
}

.ony-set__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.ony-set__form {
    margin-top: var(--space-5);
}

.ony-set__foot {
    padding: var(--space-5) var(--card-pad);
    border-top: var(--border-width) solid var(--border-subtle);
}

/* Yedek kodlar — bir kez gösterilir, kopyalanabilir olmalı */
.ony-set__codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.ony-set__codes code {
    font-family: var(--font-mono);
    font-size: var(--size-sm);
    letter-spacing: 0.06em;
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    text-align: center;
    user-select: all;
}

/* 2FA kurulum: solda QR, sağda adımlar */
.ony-set__2fa {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
    flex-wrap: wrap;
}

.ony-set__2fa-qr {
    flex: none;
    padding: var(--space-4);
    background: var(--ony-white);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    line-height: 0;
}

.ony-set__2fa-body {
    flex: 1;
    min-width: 260px;
}

.ony-set__steps {
    margin: 0 0 var(--space-6);
    padding-left: 1.2em;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.ony-set__steps li {
    margin-bottom: var(--space-2);
}

@media (max-width: 560px) {
    .ony-set__2fa { gap: var(--space-6); }
    .ony-set__2fa-qr { margin: 0 auto; }
    .ony-set__list > div { flex-direction: column; gap: var(--space-1); }
    .ony-set__list dd { text-align: left; }
}

/* ---------- Yonetim paneli ---------- */
/* /panel/yonetim ekranlari (layouts/admin.php + Views/admin/*).
   Musteri panelinin gorsel dilini aynen kullanir; buradaki siniflar yalnizca
   yonetim panelinde gecen parcalar icindir. Renkler token degiskenlerinden gelir. */

/* Sidebar'in son grubu "Musteri paneline don" baglantisidir; alta itilir.
   Daraltilmis sidebar'da da gorunur — nav ogesi, footer degil. */
.ony-adm-nav .ony-sidebar__group:last-child {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border-inverse);
}

/* Ust bardaki bildirim dugmesi musteri paneline giderdi; yonetimde basilmaz. */
.ony-adm-topbar [data-ony-notifications] {
    display: none;
}

/* "YONETIM" rozeti — hangi paneldeyiz sorusunun tek cevabi. */
.ony-adm-flag {
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}

.ony-adm-notice {
    margin-bottom: var(--space-6);
}

.ony-adm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.ony-adm-stats > * {
    min-width: 0;
}

.ony-adm-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.ony-adm-cols > * {
    min-width: 0;
}

/* Bekleyen isler — yoneticinin is listesi, her satir bir sayfaya gider. */
.ony-adm-tasks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ony-adm-task {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 12px 14px;
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-control);
}

.ony-adm-task:hover {
    background: var(--surface-sunken);
    border-color: var(--border-accent);
    color: var(--text-primary);
    text-decoration: none;
}

.ony-adm-task__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    margin-right: auto;
}

.ony-adm-task__label {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
}

.ony-adm-task__hint {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-adm-clean {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
}

/* Plan dagilimi — cubuklar en kalabalik plana gore olceklenir. */
.ony-adm-plans {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-adm-plan__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.ony-adm-plan__count {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
}

.ony-adm-plan__bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}

.ony-adm-plan__fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: var(--radius-pill);
    background: var(--ony-accent-500);
}

.ony-adm-plan__hint {
    margin-top: var(--space-2);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .ony-adm-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ony-adm-cols {
        grid-template-columns: 1fr;
    }
}

/* 360px'e kadar yatay tasma olmaz: kartlar tek sutuna iner, tablolar kendi kabinde kayar. */
@media (max-width: 560px) {
    .ony-adm-stats {
        grid-template-columns: 1fr;
    }

    .ony-adm-task {
        flex-wrap: wrap;
    }

    .ony-adm-task__body {
        flex-basis: 100%;
    }
}

/* ---------- Yonetim paneli: musteri yonetimi ---------- */
/* /panel/yonetim/musteriler ve /panel/yonetim/musteriler/{id}
   (Admin\CustomerController + Views/admin/customers.php, customer-detail.php).
   Yalnizca token degiskenleri kullanilir; ham renk yoktur.
   Tablolar .ony-table-scroll kabinda kaydigi icin 360px'te yatay tasma olmaz. */

/* Liste ustundeki filtre satiri — dar ekranda alt alta iner. */
.ony-adm-cust__filters {
    margin-bottom: var(--space-5);
}

.ony-adm-cust__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.ony-adm-cust__search {
    flex: 1 1 260px;
    min-width: 0;
}

.ony-adm-cust__table {
    margin-bottom: var(--space-5);
}

.ony-adm-cust__pager {
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-width) solid var(--border-subtle);
}

/* Tablo hucreleri: ad ustte, ikincil bilgi altta. */
.ony-adm-cust__link {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    text-decoration: none;
}

.ony-adm-cust__link:hover {
    color: var(--ony-accent-600);
    text-decoration: underline;
}

.ony-adm-cust__owner {
    font-weight: var(--weight-medium);
}

.ony-adm-cust__slug {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    word-break: break-word;
}

.ony-adm-cust__muted {
    color: var(--text-muted);
}

.ony-adm-cust__empty {
    padding: var(--space-6) var(--space-5);
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
}

/* Ekran okuyucuya baslik, goze bosluk: islem sutununun basligi. */
.ony-adm-cust__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Detay ---- */
.ony-adm-cust__back {
    margin-bottom: var(--space-2);
    margin-left: calc(var(--space-3) * -1);
}

.ony-adm-cust__notice {
    margin-bottom: var(--space-5);
}

.ony-adm-cust__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.ony-adm-cust__grid > * {
    min-width: 0;
}

.ony-adm-cust__block {
    margin-bottom: var(--space-5);
}

/* pad="none" kartlarda tablo basligi — data-table kendi kenarligini getirir. */
.ony-adm-cust__cardhead {
    padding: var(--space-5) var(--space-5) var(--space-4);
}

/* Etiket/deger listesi — dar ekranda alt alta gecer. */
.ony-adm-def {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.ony-adm-def__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.ony-adm-def__key {
    flex: 0 0 auto;
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-adm-def__val {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-size: var(--text-ui-size);
    color: var(--text-primary);
    word-break: break-word;
}

/* Sahip karti ust bloku. */
.ony-adm-cust__person {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

/* Bas harf tonu sabit --ony-white; gerekcesi .ony-team__avatar ile ayni. */
.ony-adm-cust__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--action-secondary);
    color: var(--ony-white);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-bold);
}

.ony-adm-cust__personbody {
    flex: 1 1 auto;
    min-width: 0;
}

.ony-adm-cust__personname {
    font-weight: var(--weight-semibold);
    word-break: break-word;
}

.ony-adm-cust__actions {
    margin-top: var(--space-5);
}

.ony-adm-cust__hint {
    margin: 0 0 var(--space-5);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.ony-adm-cust__planform {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

/* Plan kullanimi — sinirsiz olanlar olcer yerine rozet + sayi basar. */
.ony-adm-cust__usage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
}

.ony-adm-cust__usageitem {
    min-width: 0;
}

.ony-adm-cust__usagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.ony-adm-cust__usagelabel {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
}

.ony-adm-cust__usagevalue {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Son taramalarin ozet rozetleri. */
.ony-adm-cust__scansum {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-4);
}

.ony-adm-cust__dialogtext {
    margin: 0;
    line-height: var(--leading-normal);
}

.ony-adm-cust__dialogform {
    display: inline;
}

@media (max-width: 1024px) {
    .ony-adm-cust__grid {
        grid-template-columns: 1fr;
    }

    .ony-adm-cust__usage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 360px'e kadar yatay tasma yok: filtreler tam genislige iner, kolonlar tek sutun olur. */
@media (max-width: 560px) {
    .ony-adm-cust__form > * {
        flex: 1 1 100%;
    }

    .ony-adm-cust__search {
        flex-basis: 100%;
    }

    .ony-adm-cust__usage {
        grid-template-columns: 1fr;
    }

    .ony-adm-def__row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .ony-adm-def__val {
        text-align: left;
    }

    .ony-adm-cust__back {
        margin-left: 0;
    }
}

/* =====================================================================
   YÖNETİM PANELİ — İLETİŞİM MESAJLARI + YASAL METİN SÜRÜMLEME
   (app/Views/admin/messages.php, message-detail.php, legal.php, legal-edit.php)
   Yalnızca token değişkenleri kullanılır; ham renk değeri yoktur.
   360px'e kadar yatay taşma olmaz: filtreler sarar, tablolar .ony-table-scroll
   kabininde kayar, uzun metinler kırılır.
   ===================================================================== */

/* ---- Mesaj listesi ---- */
.ony-msg-warn {
    margin-bottom: var(--space-6);
}

.ony-msg-filtercard {
    margin-bottom: var(--space-6);
}

.ony-msg-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.ony-msg-link {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.ony-msg-link:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.ony-msg-muted {
    color: var(--text-secondary);
}

.ony-msg-mail {
    color: var(--text-secondary);
    word-break: break-all;
}

.ony-msg-subject {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ony-msg-pager {
    padding: var(--space-5) var(--card-pad-sm);
    border-top: var(--border-width) solid var(--border-subtle);
}

/* ---- Mesaj detayı ---- */
.ony-msg-main,
.ony-msg-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

/* Gövde gönderenin yazdığı düz metindir: satır sonları nl2br ile korunur,
   uzun bağlantılar kabı taşırmasın diye kırılır. */
.ony-msg-body {
    margin: 0;
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-size: var(--text-body-size);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ony-msg-status {
    margin-bottom: var(--space-5);
}

.ony-msg-statusform {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-msg-kv {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
}

.ony-msg-kv dt {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-msg-kv dd {
    margin: var(--space-1) 0 0;
    font-size: var(--text-ui-size);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.ony-msg-kv__hint {
    display: inline-block;
    margin-left: var(--space-3);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

/* ---- Yasal metin listesi ---- */
.ony-legal-adm-code {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-legal-adm-link {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.ony-legal-adm-link:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.ony-legal-adm-rowacts {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

.ony-legal-adm-note {
    margin-bottom: var(--space-6);
}

/* ---- Yasal metin sürüm formu ---- */
.ony-legal-adm-main,
.ony-legal-adm-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.ony-legal-adm-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ony-legal-adm-row {
    min-width: 0;
}

.ony-legal-adm-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

/* Gövde HTML kaynağıdır: tek aralıklı yazı tipi. Satırlar sarar (pre-wrap),
   böylece 360px'te bile yatay kaydırma çubuğu çıkmaz. */
.ony-legal-adm-body {
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    line-height: var(--leading-tight);
    min-height: 320px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ony-legal-adm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ony-legal-adm-ro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.ony-legal-adm-ro__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: baseline;
}

.ony-legal-adm-ro__label {
    flex: 0 0 140px;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-legal-adm-ro__value {
    font-size: var(--text-ui-size);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* ---- Sürüm geçmişi ---- */
.ony-legal-adm-empty {
    margin: 0;
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
}

.ony-legal-adm-vlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ony-legal-adm-v__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-control);
}

.ony-legal-adm-v__link:hover {
    border-color: var(--border-accent);
    background: var(--surface-sunken);
    color: var(--text-primary);
    text-decoration: none;
}

.ony-legal-adm-v--on .ony-legal-adm-v__link {
    border-color: var(--border-accent);
    background: var(--surface-accent-soft);
}

.ony-legal-adm-v__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.ony-legal-adm-v__num {
    font-family: var(--font-mono);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
}

.ony-legal-adm-v__meta {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

/* 360px'e kadar taşma yok: iki sütunlu alanlar tek sütuna iner, filtreler
   ve buton grupları tam genişliğe yayılır. */
@media (max-width: 560px) {
    .ony-legal-adm-row--split {
        grid-template-columns: 1fr;
    }

    .ony-msg-filters > * {
        flex: 1 1 100%;
        width: 100%;
    }

    .ony-msg-subject {
        max-width: 180px;
    }

    .ony-legal-adm-ro__label {
        flex-basis: 100%;
    }

    .ony-legal-adm-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Yonetim paneli: faturalar ve havale onayi ---------- */
/* /panel/yonetim/faturalar + /panel/yonetim/faturalar/{id}
   (Views/admin/invoices.php, Views/admin/invoice-detail.php).
   Renkler yalnizca token degiskenlerinden gelir; ham hex yok.
   Tablolar .ony-table-scroll kabinde durur, 360px'e kadar yatay tasma olmaz. */

.ony-adm-inv__notice {
    margin-bottom: var(--space-6);
}

.ony-adm-inv__filtercard {
    margin-bottom: var(--space-6);
}

.ony-adm-inv__filters {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

/* Fatura numarasi listedeki tek birincil eylemdir: detaya gider. */
.ony-adm-inv__no {
    color: var(--text-link);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.ony-adm-inv__no:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.ony-adm-inv__ws {
    font-weight: var(--weight-medium);
    word-break: break-word;
}

.ony-adm-inv__muted {
    color: var(--text-muted);
}

/* Tutar hucresi iki satir: ustte KDV dahil (karar bu), altta KDV haric taban. */
.ony-adm-inv__gross {
    display: block;
    font-weight: var(--weight-semibold);
}

.ony-adm-inv__net {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    white-space: nowrap;
}

.ony-adm-inv__pager {
    padding: var(--space-5) var(--space-6);
    border-top: var(--border-width) solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
}

/* --- Detay --- */

/* Eş ağırlıklı iki kart: grid varsayılanı (stretch) satır arkadaşlarını aynı
   yüksekliğe getirir. align-items:start yalnızca asimetrik ana+kenar
   ızgaralarında doğrudur (bkz. .ony-detail-grid, .ony-team__grid). */
.ony-adm-inv__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.ony-adm-inv__cols > * {
    min-width: 0;
}

.ony-adm-inv__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ony-adm-inv__badges {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ony-adm-inv__items tbody tr:last-child td {
    border-bottom: 0;
}

.ony-adm-inv__total td {
    font-weight: var(--weight-bold);
    font-size: var(--size-sm);
}

/* Etiket/deger listesi — bos alan gizlenmez, tire basilir. */
.ony-adm-inv__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    margin: 0;
}

.ony-adm-inv__row--wide {
    grid-column: 1 / -1;
}

.ony-adm-inv__dt {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.ony-adm-inv__dd {
    margin: 0;
    font-size: var(--text-ui-size);
    color: var(--text-primary);
    word-break: break-word;
    white-space: pre-line;
}

.ony-adm-inv__empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-ui-size);
}

.ony-adm-inv__ref {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    word-break: break-all;
}

.ony-adm-inv__err {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption-size);
    color: var(--status-danger-text);
}

.ony-adm-inv__doc {
    display: block;
    font-weight: var(--weight-medium);
    word-break: break-word;
}

/* Tarayici imzasi kanitin parcasi ama satiri sisirmemeli: kisaltilir, tamami title'da. */
.ony-adm-inv__ua {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    word-break: break-all;
}

.ony-adm-inv__dialogtext {
    margin: 0 0 var(--space-4);
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.ony-adm-inv__dialogtext:last-child {
    margin-bottom: 0;
}

.ony-adm-inv__dialogtext--strong {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}

.ony-adm-inv__dialogform {
    display: inline;
}

@media (max-width: 1024px) {
    .ony-adm-inv__cols {
        grid-template-columns: 1fr;
    }
}

/* 360px'e kadar yatay tasma olmaz: filtreler tam genislige iner,
   etiket/deger listesi tek sutuna duser, tablolar kendi kabinde kayar. */
@media (max-width: 560px) {
    .ony-adm-inv__filters {
        width: 100%;
    }

    .ony-adm-inv__filters > * {
        flex: 1 1 100%;
        width: 100%;
    }

    .ony-adm-inv__list {
        grid-template-columns: 1fr;
    }

    .ony-adm-inv__pager {
        padding: var(--space-4);
        justify-content: center;
    }

    .ony-adm-inv__dialogform {
        display: block;
        width: 100%;
    }
}

/* ==========================================================================
   BLOG — yönetim editörü (.ony-adm-blog*, .ony-adm-blogform*) ve genel blog
   sayfaları (.ony-blog*, .ony-post*).
   Yalnızca token değişkenleri kullanılır; ham renk kodu yoktur.
   Bu blok Blog modülüne aittir; başka ajanların blokları öncesinde/sonrasında sürer.
   ========================================================================== */

/* ---- Yönetim: yazı listesi ---- */
.ony-adm-blog__filtercard {
    margin-bottom: var(--space-5);
}

.ony-adm-blog__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.ony-adm-blog__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ony-adm-blog__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-sm);
    padding: 0 var(--space-4);
    border: var(--border-card);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.ony-adm-blog__tab:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.ony-adm-blog__tab--active {
    border-color: var(--border-accent);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
}

.ony-adm-blog__tabcount {
    font-variant-numeric: var(--numeric-figures);
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-adm-blog__tab--active .ony-adm-blog__tabcount {
    color: var(--text-accent);
}

.ony-adm-blog__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.ony-adm-blog__title {
    display: block;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.ony-adm-blog__title:hover {
    color: var(--text-link);
}

.ony-adm-blog__slug {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-caption-size);
    font-family: var(--font-mono);
    word-break: break-all;
}

.ony-adm-blog__muted {
    color: var(--text-muted);
}

.ony-adm-blog__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}

.ony-adm-blog__pager {
    margin-top: var(--space-5);
}

/* ---- Yönetim: yazı formu ---- */
.ony-adm-blogform__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: var(--space-6);
}

.ony-adm-blogform__main,
.ony-adm-blogform__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.ony-adm-blogform__main .ony-field,
.ony-adm-blogform__side .ony-field {
    margin-bottom: var(--space-5);
}

.ony-adm-blogform__main .ony-field:last-child,
.ony-adm-blogform__side .ony-field:last-child {
    margin-bottom: 0;
}

/* Gövde alanında HTML yazılır: eşit genişlikli yazı tipi, yüksek kutu. */
.ony-adm-blogform__body {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    line-height: var(--leading-normal);
    min-height: 420px;
}

.ony-adm-blogform__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---- Genel: liste ---- */
.ony-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.ony-blog-cat {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-5);
    border: var(--border-card);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.ony-blog-cat:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.ony-blog-cat--active {
    border-color: var(--border-accent);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
}

.ony-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.ony-blog-cell {
    overflow: hidden;
    height: 100%;
}

.ony-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.ony-blog-card__cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-sunken);
}

.ony-blog-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fotoğraf yok kuralı: kapak yoksa sunken zeminde tipografik yer tutucu. */
.ony-blog-card__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ony-blog-card__glyph {
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-display);
    color: var(--text-muted);
    opacity: 0.5;
}

.ony-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--card-pad);
}

.ony-blog-card__cat {
    color: var(--text-accent);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.ony-blog-card__title {
    font-family: var(--font-display);
    font-size: var(--size-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.ony-blog-card__text {
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    line-height: var(--leading-normal);
}

.ony-blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-caption-size);
}

.ony-blog-card__dot {
    color: var(--border-strong);
}

.ony-blog-pager {
    margin-top: var(--space-8);
}

.ony-blog-empty__inner {
    text-align: center;
}

.ony-blog-empty__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-h3-size);
    font-weight: var(--text-heading-weight);
    letter-spacing: var(--text-heading-tracking);
    color: var(--text-primary);
}

.ony-blog-empty__text {
    margin: 0 auto var(--space-6);
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: var(--text-body-size);
    line-height: var(--leading-relaxed);
}

.ony-blog-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* ---- Genel: yazı detayı ---- */
.ony-post {
    padding: var(--space-10) 0 var(--space-8);
}

.ony-post__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    text-decoration: none;
}

.ony-post__back:hover {
    color: var(--text-link);
}

.ony-post__cat {
    display: inline-block;
    margin-bottom: var(--space-4);
    text-decoration: none;
}

.ony-post__title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-h1-size);
    font-weight: var(--text-heading-weight);
    line-height: var(--leading-tight);
    letter-spacing: var(--text-heading-tracking);
    color: var(--text-primary);
}

.ony-post__lead {
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-body-lg-size);
    line-height: var(--leading-relaxed);
}

.ony-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-7);
    border-bottom: var(--border-card);
    color: var(--text-muted);
    font-size: var(--text-ui-size);
}

.ony-post__author {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.ony-post__dot {
    color: var(--border-strong);
}

.ony-post__cover {
    margin: var(--space-8) 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--surface-sunken);
}

.ony-post__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ony-post__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ony-post__glyph {
    font-family: var(--font-display);
    font-size: var(--size-4xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-display);
    color: var(--text-muted);
    opacity: 0.45;
}

/* Gövde HtmlSanitizer beyaz listesinden geçer; burada yalnızca o etiketler biçimlenir. */
.ony-post__body {
    color: var(--text-primary);
    font-size: var(--text-legal-size);
    line-height: var(--text-legal-leading);
}

.ony-post__body > *:first-child {
    margin-top: 0;
}

.ony-post__body p,
.ony-post__body ul,
.ony-post__body ol {
    margin: 0 0 var(--space-6);
}

.ony-post__body h2 {
    margin: var(--space-10) 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-h3-size);
    font-weight: var(--text-heading-weight);
    line-height: var(--leading-snug);
    letter-spacing: var(--text-heading-tracking);
}

.ony-post__body h3 {
    margin: var(--space-8) 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.ony-post__body h4 {
    margin: var(--space-7) 0 var(--space-3);
    font-size: var(--size-sm);
    font-weight: var(--weight-semibold);
}

.ony-post__body ul,
.ony-post__body ol {
    padding-left: var(--space-7);
}

.ony-post__body li {
    margin-bottom: var(--space-3);
}

.ony-post__body a {
    color: var(--text-link);
    text-decoration: underline;
}

.ony-post__body a:hover {
    color: var(--text-link-hover);
}

.ony-post__body blockquote {
    margin: var(--space-7) 0;
    padding: var(--space-5) var(--space-6);
    border-left: var(--border-width-strong) solid var(--border-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.ony-post__body blockquote p:last-child {
    margin-bottom: 0;
}

.ony-post__body pre {
    margin: var(--space-7) 0;
    padding: var(--space-5);
    overflow-x: auto;
    border: var(--border-card);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    line-height: var(--leading-normal);
}

.ony-post__body code {
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-sunken);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.ony-post__body pre code {
    padding: 0;
    background: none;
}

.ony-post__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-7) auto;
    border-radius: var(--radius-lg);
}

.ony-post__body figure {
    margin: var(--space-7) 0;
}

.ony-post__body figcaption {
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-ui-size);
    text-align: center;
}

.ony-post__body hr {
    margin: var(--space-9) 0;
    border: 0;
    border-top: var(--border-card);
}

/* Geniş tablo kendi kabinde kayar; sayfa gövdesi yatay taşmaz. */
.ony-post__body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: var(--space-7) 0;
    border-collapse: collapse;
    font-size: var(--text-ui-size);
}

.ony-post__body th,
.ony-post__body td {
    padding: var(--space-3) var(--space-4);
    border: var(--border-card);
    text-align: left;
    vertical-align: top;
}

.ony-post__body th {
    background: var(--surface-sunken);
    font-weight: var(--weight-semibold);
}

.ony-post__morehead {
    margin: 0 0 var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-h3-size);
    font-weight: var(--text-heading-weight);
    letter-spacing: var(--text-heading-tracking);
    color: var(--text-primary);
}

.ony-post-more {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--surface-card);
}

.ony-post-more__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--border-card);
    color: inherit;
    text-decoration: none;
}

.ony-post-more__item:last-child {
    border-bottom: 0;
}

.ony-post-more__item:hover {
    background: var(--surface-sunken);
}

.ony-post-more__title {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.ony-post-more__meta {
    color: var(--text-muted);
    font-size: var(--text-caption-size);
    white-space: nowrap;
}

/* ---- Duyarlılık: 360px genişlikte yatay taşma yok ---- */
@media (max-width: 1024px) {
    .ony-adm-blogform__grid {
        grid-template-columns: 1fr;
    }

    .ony-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ony-post__title {
        font-size: var(--text-h2-size);
    }

    .ony-post__body {
        font-size: var(--text-body-size);
    }
}

@media (max-width: 560px) {
    .ony-blog-grid {
        grid-template-columns: 1fr;
    }

    .ony-adm-blog__filters,
    .ony-adm-blog__search {
        align-items: stretch;
    }

    .ony-adm-blog__search {
        width: 100%;
    }

    .ony-post-more__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* ==========================================================================
   PDF menü görüntüleyici (app/Views/public/menu-pdf.php) — /m/{code}
   QR okutan kişi telefonla bakar: sayfalar dikey akar, ilk sayfa hemen gelir,
   dokununca tam ekran büyüteç açılır. Yalnızca token değişkeni; ham renk yok.
   360px'e kadar yatay taşma yoktur.
   ========================================================================== */

/* PDF menüde marka satırını ve altyazıyı bu sayfa kendi çubuğunda/bandında
   basar; düzenin genel kopyaları gizlenir. :has() desteklemeyen eski tarayıcıda
   yalnızca ikinci bir marka satırı görünür — işlev bozulmaz. */
.ony-public__frame:has(.ony-pdfmenu) .ony-public__brand,
.ony-public__frame:has(.ony-pdfmenu) .ony-public__watermark {
    display: none;
}

.ony-pdfmenu {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface-sunken);
}

/* ---- Üst yapışkan çubuk: işletme adı + sayfa sayacı + PDF indir ---- */

.ony-pdfmenu__bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-target);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border-bottom: var(--border-width) solid var(--border-subtle);
    box-shadow: var(--shadow-1);
}

.ony-pdfmenu__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
}

.ony-pdfmenu__brand-logo {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--radius-xs);
    object-fit: cover;
}

.ony-pdfmenu__brand-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-ui-size);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ony-pdfmenu__counter {
    flex: none;
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    white-space: nowrap;
}

.ony-pdfmenu__dl {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-control);
    border-radius: var(--radius-pill);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    background: var(--surface-card);
    text-decoration: none;
}

.ony-pdfmenu__dl:hover {
    background: var(--surface-accent-soft);
    text-decoration: none;
}

/* ---- Başlık ve açıklama ---- */

.ony-pdfmenu__intro {
    padding: var(--space-5) var(--space-5) var(--space-4);
    background: var(--surface-card);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.ony-pdfmenu__title {
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    margin: 0;
    overflow-wrap: anywhere;
}

.ony-pdfmenu__lead {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    overflow-wrap: anywhere;
}

/* ---- Sayfa akışı ---- */

.ony-pdfmenu__pages {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ony-pdfmenu__page {
    margin: 0;
    min-width: 0;
    background: var(--surface-card);
}

.ony-pdfmenu__zoom {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--surface-card);
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

/* Genişlik/yükseklik nitelikleri sunucudan gelir: tarayıcı yeri önceden ayırır,
   görsel inince sayfa kaymaz (layout shift yok). */
.ony-pdfmenu__img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface-sunken);
}

.ony-pdfmenu__label {
    padding: var(--space-2) var(--space-4);
    text-align: center;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-top: var(--border-width) solid var(--border-subtle);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.ony-pdfmenu__page:last-child .ony-pdfmenu__label {
    border-bottom: 0;
}

/* ---- Boş durum ---- */

.ony-pdfmenu__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-11) var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

.ony-pdfmenu__empty-title {
    font-family: var(--font-display);
    font-size: var(--text-h4-size);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.ony-pdfmenu__empty-text {
    font-size: var(--text-ui-size);
    line-height: var(--leading-relaxed);
    max-width: 34ch;
}

/* ---- İkincil eylem (Google yorum) ---- */

.ony-pdfmenu__actions {
    padding: var(--space-5);
}

/* ---- Alttaki OnyQR bandı (Free planda zorunlu) ---- */

.ony-pdfmenu__band {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border-top: var(--border-width) solid var(--border-subtle);
    box-shadow: var(--shadow-2);
}

.ony-pdfmenu__band-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-caption-size);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ony-pdfmenu__band-link {
    flex: none;
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    white-space: nowrap;
}

/* ---- Tam ekran büyüteç ---- */

.ony-pdfmenu__lb {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    background: var(--ony-navy-950);
}

.ony-pdfmenu__lb[hidden] {
    display: none;
}

.ony-pdfmenu__lb-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.ony-pdfmenu__lb-count {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    color: var(--text-inverse);
}

.ony-pdfmenu__lb-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: auto;
    padding: var(--space-10) var(--space-2);
    /* Yakınlaştırma tarayıcının doğal pinch-zoom hareketine bırakılır. */
    touch-action: pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

.ony-pdfmenu__lb-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ony-pdfmenu__lb-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-5);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
}

.ony-pdfmenu__lb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-overlay);
    color: var(--text-inverse);
    cursor: pointer;
}

.ony-pdfmenu__lb-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* Büyüteç açıkken arkadaki sayfa kaymaz. */
body.ony-pdfmenu-lock {
    overflow: hidden;
}

/* ---- Duyarlılık: 360px genişlikte yatay taşma yok ---- */
@media (max-width: 360px) {
    .ony-pdfmenu__bar,
    .ony-pdfmenu__band {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
        gap: var(--space-2);
    }

    .ony-pdfmenu__dl {
        padding: var(--space-2);
    }

    .ony-pdfmenu__intro,
    .ony-pdfmenu__actions {
        padding: var(--space-4);
    }
}

/* ---------- Menü kaynağı kartı + PDF menü yükleyici (app/qr-detail.php) ----------
   Yalnızca menu tipindeki QR detayında basılır. Yükleyicinin davranışı
   public/assets/js/menu-pdf.js içindedir (ES modülü).
   Yalnızca token değişkenleri kullanılır; ham renk yok.
   Mobil öncelikli: 360px'te tek sütuna iner, hiçbir kutu yatay taşmaz. */

.ony-msrc__opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.ony-msrc__opt {
    min-width: 0;
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    transition: var(--transition-surface);
}

/* Yayında olan seçenek vurgulanır — hangisinin canlı olduğu tek bakışta görünür. */
.ony-msrc__opt--on {
    border-color: var(--border-accent);
    background: var(--surface-accent-soft);
}

.ony-msrc__opt-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    color: var(--text-primary);
}

.ony-msrc__opt-title {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
}

.ony-msrc__opt-desc {
    margin: var(--space-3) 0 0;
    font-size: var(--text-caption-size);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* ---- Yüklü PDF özeti ---- */

.ony-msrc__loaded {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.ony-msrc__preview {
    flex: none;
    display: block;
    width: 108px;
    max-width: 100%;
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-card);
    box-shadow: var(--shadow-1);
    transition: var(--transition-surface);
}

.ony-msrc__preview:hover {
    box-shadow: var(--shadow-2);
    border-color: var(--border-accent);
}

.ony-msrc__preview img {
    display: block;
    width: 100%;
    height: auto;
}

.ony-msrc__meta {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ony-msrc__meta-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-caption-size);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.ony-msrc__meta-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ony-msrc__meta-row dt {
    color: var(--text-secondary);
}

.ony-msrc__meta-row dd {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    text-align: right;
    word-break: break-word;
}

.ony-msrc__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

/* ---- Depolama kullanımı ---- */

.ony-msrc__storage {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border-subtle);
}

.ony-msrc__storage-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}

.ony-msrc__storage-row strong {
    color: var(--text-primary);
}

.ony-msrc__storage-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--size-2xs);
    color: var(--text-muted);
}

/* ---- Yükleyici kabı ---- */

.ony-mpdf {
    margin-top: var(--space-6);
    min-width: 0;
}

.ony-mpdf__drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-5);
    min-height: var(--touch-target);
    border: var(--border-width-strong) dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-surface);
}

.ony-mpdf__drop:hover,
.ony-mpdf__drop--uzerinde {
    border-color: var(--border-accent);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
}

.ony-mpdf__drop:focus-within {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Dosya alanı görünmez ama odaklanabilir kalır; tüm kutu tıklanır ve
   tarayıcının kendi sürükle bırak desteği çalışmaya devam eder. */
.ony-mpdf__file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ony-mpdf__drop-title {
    font-size: var(--text-ui-size);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.ony-mpdf__drop-hint {
    font-size: var(--size-2xs);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    max-width: 42ch;
}

/* İşlem sürerken alan pasifleşir — ikinci dosya seçimi engellenir. */
.ony-mpdf--calisiyor .ony-mpdf__drop {
    opacity: 0.55;
    pointer-events: none;
}

/* ---- Durum satırı ve ilerleme çubuğu ---- */

.ony-mpdf__status {
    margin-top: var(--space-4);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.ony-mpdf__status[hidden] {
    display: none;
}

.ony-mpdf__bar {
    margin-top: var(--space-3);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--border-subtle);
    overflow: hidden;
}

.ony-mpdf__bar[hidden] {
    display: none;
}

.ony-mpdf__bar-fill {
    width: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--action-primary);
    transition: width var(--duration-fast) var(--ease-out);
}

/* ---- Sayfa küçük önizlemeleri ---- */

.ony-mpdf__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.ony-mpdf__thumbs[hidden] {
    display: none;
}

.ony-mpdf__thumb {
    margin: 0;
    min-width: 0;
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--surface-card);
}

.ony-mpdf__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.ony-mpdf__thumb-no {
    padding: var(--space-1) var(--space-2);
    font-size: var(--size-2xs);
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-top: var(--border-width) solid var(--border-subtle);
}

/* ---- Hata kutusu ---- */

.ony-mpdf__err {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--status-danger);
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
    font-size: var(--text-caption-size);
    line-height: var(--leading-relaxed);
}

.ony-mpdf__err[hidden] {
    display: none;
}

/* Dar ekran: iki seçenek alt alta, önizleme ve künye tek sütun. */
@media (max-width: 560px) {
    .ony-msrc__opts {
        grid-template-columns: 1fr;
    }

    .ony-msrc__actions .ony-btn {
        flex: 1 1 100%;
    }

    .ony-mpdf__drop {
        padding: var(--space-6) var(--space-4);
    }

    .ony-mpdf__thumbs {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    }
}

/* ---------- Sidebar daraltma (JS ile de çalışmalı) ----------
   Daraltılmış durum önceden yalnızca sunucuda çiziliyordu: etiketler hiç
   basılmıyordu. JS sınıfı eklediğinde ise etiketler DOM'da kaldığı için
   genişlik daralıyor ama içerik taşıyor, aç/kapa düğmesi dışarı itiliyor
   ve menü bir daha açılamıyordu. Artık daraltma tamamen CSS ile çözülür. */

.ony-sidebar__logo--mark {
    display: none;
}

.ony-sidebar__toggle {
    flex: none;
    margin-left: auto;
}

.ony-sidebar__toggle-icon--open {
    display: none;
}

.ony-sidebar__item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ony-sidebar--collapsed .ony-sidebar__logo--wide {
    display: none;
}

.ony-sidebar--collapsed .ony-sidebar__logo--mark {
    display: inline-flex;
}

.ony-sidebar--collapsed .ony-sidebar__brand {
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

.ony-sidebar--collapsed .ony-sidebar__toggle {
    margin-left: 0;
}

.ony-sidebar--collapsed .ony-sidebar__toggle-icon--close {
    display: none;
}

.ony-sidebar--collapsed .ony-sidebar__toggle-icon--open {
    display: inline-flex;
}

/* Etiket, rozet, grup başlığı ve alt bölüm dar durumda gizlenir; ikon ortalanır.
   Etiket yerine title niteliği devreye girer (markup her zaman basıyor). */
.ony-sidebar--collapsed .ony-sidebar__item-label,
.ony-sidebar--collapsed .ony-sidebar__item-badge,
.ony-sidebar--collapsed .ony-sidebar__grouplabel,
.ony-sidebar--collapsed .ony-sidebar__foot {
    display: none;
}

.ony-sidebar--collapsed .ony-sidebar__item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Mobil çekmecede daraltma anlamsız: menü zaten tam genişlikte açılır. */
@media (max-width: 768px) {
    .ony-sidebar--collapsed {
        width: var(--sidebar-width);
    }

    .ony-sidebar--collapsed .ony-sidebar__logo--wide { display: inline-flex; }
    .ony-sidebar--collapsed .ony-sidebar__logo--mark { display: none; }
    .ony-sidebar--collapsed .ony-sidebar__brand { flex-direction: row; }
    .ony-sidebar--collapsed .ony-sidebar__item-label,
    .ony-sidebar--collapsed .ony-sidebar__grouplabel,
    .ony-sidebar--collapsed .ony-sidebar__foot { display: revert; }
    .ony-sidebar--collapsed .ony-sidebar__item { justify-content: flex-start; }
    .ony-sidebar--collapsed .ony-sidebar__toggle { display: none; }
}

/* ---------- Yonetim paneli: yonetici (staff) tanimlama ---------- */
/* /panel/yonetim/yoneticiler — Admin\StaffController + Views/admin/staff.php.
   Yalnizca token degiskeni kullanilir; ham renk yoktur. Tablolar .ony-table-scroll
   kabinda kaydigi icin 360px'te yatay tasma olmaz. */

/* Uyari serisi ve iki tablo karti arasindaki dikey ritim. */
.ony-adm-staff__notice {
    margin-bottom: var(--space-5);
}

.ony-adm-staff__block {
    margin-bottom: var(--space-5);
}

.ony-adm-staff__searchcard {
    margin-bottom: var(--space-5);
}

/* pad="none" kartlarin kendi basligi: kart govdesiyle ayni ic bosluk. */
.ony-adm-staff__cardhead {
    padding: var(--space-5) var(--space-5) var(--space-4);
}

/* Arama satiri: alan buyur, dugmeler KONTROL satiriyla hizalanir. Dar ekranda
   alt alta iner. align-items: flex-end DEGIL — alttan hizalama .ony-field__hint
   satirini da sayiyor, dugme girdinin ust kenarindan 27.2px asagi kaciyordu.
   Ayni kusur .ony-print__form'da da vardi. */
.ony-adm-staff__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
}

.ony-adm-staff__search {
    flex: 1 1 280px;
    min-width: 0;
}

/* Dugme grubunu tam bir etiket satiri kadar asagi indirir: .ony-field__label
   satir kutusu + .ony-field'in kendi gap'i. Boylece dugmeler .ony-input ile
   ayni Y'de baslar; ipucu hesaba girmez.
   BAGIMLILIK: --text-body-leading degisirse ya da components.css'e
   .ony-field__label{line-height:...} eklenirse bu ofset yeniden olculmeli. */
.ony-adm-staff__formactions {
    display: flex;
    gap: var(--space-3);
    margin-top: calc(var(--size-2xs) * var(--text-body-leading) + var(--space-3));
}

/* Tablo hucreleri: ad ustte, e-posta altta. */
.ony-adm-staff__name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-medium);
}

.ony-adm-staff__mail {
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
    word-break: break-word;
}

/* Eylemin neden kapali oldugunu soyleyen satir ici not. */
.ony-adm-staff__muted {
    font-size: var(--text-caption-size);
    color: var(--text-muted);
}

.ony-adm-staff__empty {
    padding: var(--space-6) var(--space-5);
    font-size: var(--text-ui-size);
    color: var(--text-secondary);
}

.ony-adm-staff__pager {
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-width) solid var(--border-subtle);
}

/* Ekran okuyucuya baslik, goze bosluk: islem sutununun basligi. */
.ony-adm-staff__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Onay kutusu: uyari serisinin altindaki aciklama ve gonderim formu.
   Uyari her dialogda yok; bosluk paragrafa degil uyariya verilir ki
   yalniz paragrafi olan dialogda tepede bosluk kalmasin. */
.ony-adm-staff__dialogalert {
    margin-bottom: var(--space-4);
}

.ony-adm-staff__dialogtext {
    margin: 0;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.ony-adm-staff__dialogform {
    display: inline;
}

@media (max-width: 640px) {
    .ony-adm-staff__form > * {
        width: 100%;
    }

    .ony-adm-staff__search {
        flex: 1 1 100%;
    }

    /* Alanlar alt alta ininince etiket hizasi ofseti anlamsiz kalir; satir
       aralarini zaten .ony-adm-staff__form'un gap'i veriyor. */
    .ony-adm-staff__formactions {
        margin-top: 0;
    }
}

/* --- Tasarim paketi ezmeleri (components.css SALT OKUNUR) ------------------
   Asagidaki kurallar components.css'teki bildirimleri duzeltir. components.css
   dosyasina dokunulmadigi icin ezme burada, app.css'in sonunda durur; app.css
   styles.css'ten (ve dolayisiyla components.css'ten) SONRA yuklendigi icin ayni
   ozgullukteki kurallar bu blok lehine cozulur. */

/* Switch: components.css'te [data-theme="dark"] .ony-switch__track (0-2-0),
   bir sonraki satirdaki .ony-switch__track--on (0-1-0) kuralini eziyordu; koyu
   temada acik ve kapali ray ayni lacivert tonda kaliyordu. Ayni ozgullukte
   (0-2-0) yazilan bu kural durumu geri kazandirir. */
[data-theme="dark"] .ony-switch__track--on {
    background: var(--action-primary);
}

/* Sidebar altindaki kullanim olceri: .ony-sidebar zemini --surface-inverse ile
   her iki temada da lacivert kalir, ama --text-primary / --text-secondary tema
   ile doner. Acik temada olcu degeri lacivert zemine neredeyse ayni tonda
   basiliyordu. Pazarlama footer'indaki cozumun aynisi: sabit rampa tonu. */
.ony-sidebar__foot .ony-meter__value {
    color: var(--ony-white);
}

.ony-sidebar__foot .ony-meter__label {
    color: var(--ony-gray-400);
}

/* Sidebar menu etiketleri ve grup basliklari: --text-inverse-secondary koyu
   temada zeminle ayni yone (koyuya) gittigi icin kontrast 6.85:1'den 2.48:1'e
   dusuyordu. Lacivert zemin her iki temada da koyu oldugundan metin tonu tema
   ile donmemeli. Daralt/genislet dugmesinin rengi sidebar-nav.php'de satir ici
   yazildigi icin yalnizca !important ile ezilebiliyor. */
[data-theme="dark"] .ony-sidebar__item,
[data-theme="dark"] .ony-sidebar__grouplabel {
    color: var(--ony-gray-400);
}

[data-theme="dark"] .ony-sidebar__toggle {
    color: var(--ony-gray-400) !important;
}

/* Form odagi: components.css'teki .ony-input:focus{outline:none} base.css'in
   :focus-visible halkasini iptal ediyor, yerine beyaz zemine karsi 2.46:1'de
   kalan bir kenarlik birakiyordu (WCAG 1.4.11 esigi 3:1). Halkayi klavye
   odaginda geri koy; fare tiklamasinda gorunmez, cunku :focus-visible. Kural
   .ony-input:focus ile ayni ozgullukte (0-2-0) ve daha sonra yuklenir. */
.ony-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Mobil menu / cerez bandi yigin catismasi: .ony-mkt-header z-index:30 ile
   yigin baglami acar, .ony-mkt-menu onun icinde absolute durur ve kendi
   z-index'i yoktur; bu yuzden acilan panelin tamami 30 duzeyinde kalip
   z-index:40 olan .ony-cookiebar'in altinda kaliyordu. Basligi yalnizca menu
   panelinin goruldugu genislikte bandin uzerine cikar. */
@media (max-width: 768px) {
    .ony-mkt-header {
        z-index: 45;
    }
}

/* ---------- Ödeme ekranı seçicileri: <a> değil <button> ----------
   Plan, dönem ve fatura tipi seçicileri artık POST ile çalışıyor (GET bağlantısı
   olduklarında her tıklama kullanıcının yazdığı fatura bilgilerini siliyordu).
   Buton varsayılanları yazı tipini miras almaz, metni ortalar ve imleci ok yapar;
   görünüm birebir korunsun diye sıfırlanır. Yeni renk/token yok. */

button.ony-co__cycle,
button.ony-co__type,
button.ony-co__plan {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

button.ony-co__plan:disabled,
button.ony-co__cycle:disabled,
button.ony-co__type:disabled {
    cursor: default;
}

/* ---------- Mobil dokunma hedefleri (WCAG 2.5.8: en az 44px) ---------- */
@media (max-width: 768px) {
    .ony-topbar__avatar {
        width: var(--touch-target);
        height: var(--touch-target);
    }

    /* Baskı kartındaki "PDF indir" kartın BİRİNCİL eylemi ama sm düğme olduğu
       için mobilde 36px kalıyordu. Galerinin yoğunluğunu bozmadan eşiğe çekilir. */
    .ony-print__cta .ony-btn {
        min-height: var(--touch-target);
    }
}

/* ---------- Renk seçici alanı (marka şablonu formu) ----------
   type="color" girdisi .ony-input ile tam genişlikte basılınca içi boş bir
   kutu gibi görünüyordu: koyu tema + koyu renk seçiminde alan tamamen boş
   sanılıyordu. Artık kare bir örnek + yanında okunur hex değeri var. */

.ony-colorfield {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ony-colorfield input[type="color"] {
    flex: none;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.ony-colorfield input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.ony-colorfield input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: var(--radius-xs);
}

.ony-colorfield input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: var(--radius-xs);
}

.ony-colorfield input[type="color"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.ony-colorfield__hex {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.ony-colorfield input[type="color"]:disabled {
    opacity: .45;
    cursor: not-allowed;
}