:root{--nav:#172236;--nav-dark:#101827;--line:#dfe4ea;--bg:#f4f6f8;--text:#1c2634;--muted:#667085;--green:#16794d;--red:#b42318;--blue:#155eef;--orange:#b54708;--white:#fff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:#eef1f4}.login-card{width:min(440px,100%);background:#fff;border:1px solid #d9dee5;border-radius:10px;padding:32px;box-shadow:0 12px 30px rgba(16,24,40,.08)}.brand{display:flex;align-items:center;gap:13px;min-width:0}.brand-logo{display:block;width:150px;max-width:42vw;height:52px;object-fit:contain;object-position:left center}.brand-copy{min-width:0;font-weight:800;line-height:1.2}.brand-copy small{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.login-brand{justify-content:center}.login-brand .brand-logo{width:185px;height:68px;max-width:75vw}.login-card h1{font-size:24px;margin:28px 0 6px}.login-card p{color:var(--muted);margin:0 0 24px}.field{margin-bottom:17px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.input,.select,.textarea{width:100%;border:1px solid #cfd6df;border-radius:7px;background:#fff;padding:12px;outline:none}.textarea{min-height:110px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:#667f9f;box-shadow:0 0 0 3px rgba(21,94,239,.08)}.check{display:flex!important;align-items:center;gap:9px;font-size:14px;min-height:42px}.check input{width:19px;height:19px}.btn{border:0;border-radius:7px;padding:11px 16px;min-height:44px;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn-primary{background:var(--nav);color:#fff}.btn-secondary{background:#fff;border:1px solid #cfd6df;color:#344054}.btn-danger{background:#fff1f0;border:1px solid #fecdca;color:#b42318}.btn-block{width:100%}.error{background:#fff1f0;border:1px solid #fecdca;color:#b42318;border-radius:7px;padding:11px 13px;font-size:13px;margin-bottom:15px}.notice{padding:12px 14px;border-radius:7px;background:#ecfdf3;border:1px solid #abefc6;color:#067647;margin-bottom:16px}.app-shell{min-height:100vh}.app-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 3px 12px rgba(16,24,40,.05)}.brand-row{min-height:76px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.header-right{display:flex;align-items:center;gap:14px}.userbox{text-align:right}.userbox strong{display:block;font-size:14px}.userbox span{display:block;font-size:12px;color:var(--muted);margin-top:2px}.logout-inline{background:#fff;border:1px solid #d0d5dd;color:#344054;border-radius:7px;min-height:44px;padding:10px 14px;font-weight:750;cursor:pointer}.nav-toggle{display:none;background:var(--nav);color:#fff;border:0;border-radius:7px;min-height:46px;padding:10px 14px;font-weight:800}.touch-nav{background:var(--nav);display:flex;align-items:stretch;gap:1px;padding:0 16px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}.touch-nav::-webkit-scrollbar{height:6px}.touch-nav::-webkit-scrollbar-thumb{background:#4a5870;border-radius:10px}.nav-link{color:#dbe3ed;min-width:130px;min-height:62px;padding:9px 15px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:760;border-bottom:4px solid transparent;white-space:nowrap}.nav-link:hover,.nav-link.active{background:#26344a;color:#fff;border-bottom-color:#fff}.nav-link.disabled{opacity:.55;cursor:default}.nav-link small{display:block;font-size:10px;font-weight:650;margin-left:5px;color:#aeb9c8}.main-content{padding:24px;max-width:1680px;margin:0 auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.page-head h1{font-size:25px;margin:0 0 5px}.page-head p{margin:0;color:var(--muted);font-size:14px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:17px}.metric-label{color:var(--muted);font-size:13px;font-weight:650}.metric-value{font-size:25px;font-weight:800;margin-top:8px;letter-spacing:-.5px}.metric-note{font-size:12px;color:var(--muted);margin-top:6px}.panel{background:#fff;border:1px solid var(--line);border-radius:9px;margin-top:18px}.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h2{font-size:16px;margin:0}.panel-body{padding:18px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter-link{padding:10px 13px;min-height:42px;border:1px solid #d0d5dd;border-radius:7px;background:#fff;font-size:13px;font-weight:700}.filter-link.active{background:var(--nav);color:#fff;border-color:var(--nav)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid #eaecf0;font-size:13px}.table th{background:#f8fafc;color:#475467;font-size:12px;text-transform:uppercase;letter-spacing:.3px}.badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:750}.badge-green{background:#ecfdf3;color:#027a48}.badge-gray{background:#f2f4f7;color:#344054}.badge-orange{background:#fff6ed;color:#b54708}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.muted{color:var(--muted)}.empty{padding:35px;text-align:center;color:var(--muted)}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}.category-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-height:275px}.category-image-wrap{height:150px;background:#eef1f4;display:grid;place-items:center;overflow:hidden;position:relative}.category-image{width:100%;height:100%;object-fit:cover}.category-placeholder{width:74px;height:74px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:27px;font-weight:900}.category-body{padding:15px;display:flex;flex-direction:column;gap:9px;flex:1}.category-title{font-size:17px;font-weight:800;margin:0}.category-desc{font-size:13px;color:var(--muted);line-height:1.45;min-height:38px}.category-meta{display:flex;gap:6px;flex-wrap:wrap}.category-actions{display:flex;gap:8px;margin-top:auto}.category-actions .btn{flex:1}.image-preview{width:180px;height:130px;border:1px dashed #cfd6df;border-radius:9px;background:#f8fafc;display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:13px}.image-preview img{width:100%;height:100%;object-fit:cover}.color-row{display:flex;align-items:center;gap:10px}.color-input{width:64px;height:46px;padding:4px;border:1px solid #cfd6df;border-radius:7px;background:#fff}.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.danger-form{display:inline-flex}.login-footer{text-align:center;color:var(--muted);font-size:12px;margin-top:18px}@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-link{min-width:122px}}@media(max-width:900px){.brand-row{min-height:68px;padding:8px 14px}.brand-copy{display:none}.brand-logo{width:135px;height:48px}.nav-toggle{display:inline-flex;align-items:center}.touch-nav{display:none;padding:10px;background:var(--nav-dark);grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:70vh;overflow:auto}.touch-nav.open{display:grid}.nav-link{min-width:0;min-height:58px;background:#1d293d;border:1px solid #34445c;border-radius:7px;border-bottom-width:1px;white-space:normal}.nav-link.active{border-color:#fff}.main-content{padding:16px}.header-right .userbox{display:none}}@media(max-width:720px){.cards,.grid-2,.check-grid{grid-template-columns:1fr}.page-head{align-items:stretch;flex-direction:column}.page-head .btn{width:100%}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-image-wrap{height:125px}.category-actions{flex-direction:column}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}}@media(max-width:480px){.login-card{padding:23px}.brand-logo{width:120px}.main-content{padding:12px}.card{padding:14px}.metric-value{font-size:22px}.catalog-grid{grid-template-columns:1fr}.header-right{gap:8px}.logout-inline{padding:9px 11px}.nav-toggle{padding:9px 11px}}


/* =========================================================
   3E İŞLETME - BÜYÜK LOGOLU DOKUNMATİK HEADER
   ========================================================= */

.app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-bottom: 0 !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.10) !important;
}

.brand-row {
    min-height: 68px !important;
    padding: 6px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 24px !important;

    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.brand-touch-link {
    min-width: 280px !important;
    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 6px !important;

    padding: 4px 10px 4px 6px !important;

    border: 1px solid transparent !important;
    border-radius: 16px !important;

    color: #0f172a !important;
    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.brand-touch-link:hover {
    background: #f8fafc !important;
    border-color: #dbe3ee !important;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.08) !important;

    transform: translateY(-1px) !important;

    color: #0f172a !important;
    text-decoration: none !important;
}

.brand-touch-link:active {
    transform: scale(.99) !important;
}

.brand-logo-box {
    width: 110px !important;
    height: 42px !important;

    flex: 0 0 110px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.brand-logo {
    display: block !important;

    width: 110px !important;
    max-width: 110px !important;

    height: 40px !important;
    max-height: 40px !important;

    object-fit: contain !important;
    object-position: left center !important;
}

.brand-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0 !important;

    line-height: 1.15 !important;
}

.brand-copy strong {
    display: block !important;

    color: #0f172a !important;

    font-size: 13px !important;
    font-weight: 850 !important;

    letter-spacing: -0.35px !important;
}

.brand-copy small {
    display: block !important;

    margin-top: 2px !important;

    color: #64748b !important;

    font-size: 10px !important;
    font-weight: 650 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 14px !important;
}

.header-business-info {
    min-width: 110px !important;

    padding-right: 6px !important;

    text-align: right !important;
}

.header-business-info strong {
    display: block !important;

    color: #0f172a !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}

.header-business-info span {
    display: block !important;

    margin-top: 2px !important;

    color: #64748b !important;

    font-size: 10px !important;
    font-weight: 600 !important;
}

.logout-inline {
    min-width: 76px !important;
    min-height: 40px !important;

    padding: 0 14px !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #0f172a !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    cursor: pointer !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.logout-inline:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

.logout-inline:active {
    transform: scale(.97) !important;
}

.touch-nav {
    min-height: 40px !important;

    display: flex !important;
    align-items: stretch !important;

    gap: 3px !important;

    padding: 0 22px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    background: #172236 !important;

    scrollbar-width: thin !important;
}

.nav-link {
    min-width: 145px !important;
    min-height: 40px !important;

    padding: 11px 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-direction: row !important;

    color: #dce5f1 !important;

    border: 0 !important;
    border-bottom: 5px solid transparent !important;

    background: transparent !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    text-align: center !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    transition:
        background-color .16s ease,
        color .16s ease,
        border-color .16s ease !important;
}

.nav-link:hover {
    background: #24334a !important;
    color: #ffffff !important;
}

.nav-link.active {
    background: #263750 !important;
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

.nav-link.disabled {
    opacity: .58 !important;
    cursor: default !important;
}

.nav-link.disabled:hover {
    background: transparent !important;
    color: #dce5f1 !important;
}

.nav-main-text {
    display: inline-block !important;
}

.nav-link small {
    display: inline-block !important;

    margin-left: 5px !important;

    color: #9caac0 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}

.nav-toggle {
    display: none !important;

    min-height: 40px !important;

    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: #172236 !important;
    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    cursor: pointer !important;
}


/* Büyük tablet */
@media (max-width: 1150px) {

    .brand-row {
        min-height: 44px !important;
        padding: 6px 14px !important;
    }

    .brand-touch-link {
        min-width: 250px !important;
    }

    .brand-logo-box {
        width: 100px !important;
        flex-basis: 100px !important;
    }

    .brand-logo {
        width: 100px !important;
        max-width: 100px !important;
        height: 38px !important;
    }

    .brand-copy strong {
        font-size: 15px !important;
    }

    .header-business-info {
        display: none !important;
    }

    .nav-link {
        min-width: 138px !important;
    }
}


/* Telefon ve küçük tablet */
@media (max-width: 900px) {

    .brand-row {
        min-height: 36px !important;

        padding:
            8px
            max(12px, env(safe-area-inset-right))
            8px
            max(12px, env(safe-area-inset-left)) !important;

        gap: 6px !important;
    }

    .brand-touch-link {
        min-width: 0 !important;
        min-height: 44px !important;

        flex: 1 1 auto !important;

        gap: 6px !important;

        padding: 2px 6px !important;
    }

    .brand-logo-box {
        width: 92px !important;
        height: 36px !important;

        flex: 0 0 92px !important;
    }

    .brand-logo {
        width: 92px !important;
        max-width: 92px !important;

        height: 34px !important;
        max-height: 34px !important;
    }

    .brand-copy {
        display: flex !important;
    }

    .brand-copy strong {
        font-size: 13px !important;
    }

    .brand-copy small {
        margin-top: 2px !important;
        font-size: 10px !important;
    }

    .header-right {
        flex: 0 0 auto !important;
        gap: 7px !important;
    }

    .nav-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 76px !important;
    }

    .logout-inline {
        min-width: 54px !important;
        min-height: 40px !important;

        padding: 0 11px !important;

        font-size: 10px !important;
    }

    .touch-nav {
        display: none !important;

        min-height: auto !important;
        max-height: calc(100vh - 82px) !important;

        padding: 12px !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 6px !important;

        overflow-y: auto !important;

        background: #101827 !important;
    }

    .touch-nav.open {
        display: grid !important;
    }

    .nav-link {
        min-width: 0 !important;
        min-height: 68px !important;

        padding: 10px !important;

        border: 1px solid #34445c !important;
        border-radius: 12px !important;

        background: #1d293d !important;

        white-space: normal !important;
    }

    .nav-link.active {
        border-color: #ffffff !important;
        background: #263750 !important;
    }

    .nav-link.disabled:hover {
        background: #1d293d !important;
    }
}


/* Dar telefon */
@media (max-width: 580px) {

    .brand-copy {
        display: none !important;
    }

    .brand-touch-link {
        flex: 1 1 auto !important;
    }

    .brand-logo-box {
        width: 128px !important;
        flex-basis: 128px !important;
    }

    .brand-logo {
        width: 128px !important;
        max-width: 128px !important;
    }

    .nav-toggle {
        min-width: 82px !important;
        padding: 0 10px !important;
    }

    .logout-inline {
        min-width: 48px !important;
        padding: 0 8px !important;
    }
}


/* =========================================================
   3E İŞLETME - BÜYÜK LOGOLU ÜST MENÜ KARTLARI
   ========================================================= */

.icon-touch-nav {
    display: flex !important;
    align-items: stretch !important;

    min-height: 138px !important;

    gap: 12px !important;

    padding: 14px 22px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    background: #142037 !important;

    scrollbar-width: thin !important;
}

.nav-icon-card {
    position: relative !important;

    min-width: 152px !important;
    width: 152px !important;
    min-height: 108px !important;

    flex: 0 0 152px !important;

    padding: 11px 10px 9px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    border: 2px solid transparent !important;
    border-radius: 16px !important;

    background: #ffffff !important;
    color: #0f172a !important;

    text-decoration: none !important;
    text-align: center !important;

    cursor: pointer !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.18) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease !important;
}

.nav-icon-card:hover {
    transform: translateY(-3px) !important;

    border-color: #93c5fd !important;

    background: #f8fbff !important;

    box-shadow:
        0 10px 23px rgba(0, 0, 0, 0.24) !important;

    color: #0f172a !important;
    text-decoration: none !important;
}

.nav-icon-card:active {
    transform: scale(.97) !important;
}

.nav-icon-card.active {
    border-color: #2563eb !important;

    background: #eff6ff !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .20),
        0 10px 24px rgba(0, 0, 0, .24) !important;
}

.nav-icon-card.active::after {
    content: "" !important;

    position: absolute !important;
    left: 23px !important;
    right: 23px !important;
    bottom: -2px !important;

    height: 5px !important;

    border-radius: 5px 5px 0 0 !important;

    background: #2563eb !important;
}

.nav-icon-card.disabled {
    opacity: .67 !important;
    cursor: default !important;
}

.nav-icon-card.disabled:hover {
    transform: none !important;

    border-color: transparent !important;
    background: #ffffff !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.18) !important;
}

.nav-icon-picture {
    width: 62px !important;
    height: 62px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 62px !important;
}

.nav-icon-picture img {
    display: block !important;

    width: 62px !important;
    height: 62px !important;

    object-fit: contain !important;
}

.nav-icon-title {
    display: block !important;

    width: 100% !important;

    color: #0f172a !important;

    font-size: 13px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;

    white-space: normal !important;
}

.nav-icon-card small {
    position: absolute !important;
    top: 6px !important;
    right: 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 20px !important;

    padding: 2px 6px !important;

    border-radius: 999px !important;

    background: #e2e8f0 !important;
    color: #64748b !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
}


/* Büyük dokunmatik ekran */
@media (min-width: 1500px) {

    .icon-touch-nav {
        min-height: 156px !important;
        gap: 14px !important;
    }

    .nav-icon-card {
        min-width: 170px !important;
        width: 170px !important;
        min-height: 126px !important;

        flex-basis: 170px !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 72px !important;
        height: 40px !important;
    }

    .nav-icon-title {
        font-size: 13px !important;
    }
}


/* Tablet */
@media (max-width: 1100px) {

    .icon-touch-nav {
        min-height: 128px !important;
        gap: 9px !important;
        padding: 11px 14px !important;
    }

    .nav-icon-card {
        min-width: 138px !important;
        width: 138px !important;
        min-height: 68px !important;

        flex-basis: 138px !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 57px !important;
        height: 57px !important;
    }

    .nav-icon-title {
        font-size: 10px !important;
    }
}


/* Telefon */
@media (max-width: 900px) {

    .icon-touch-nav {
        display: none !important;

        min-height: auto !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        padding: 14px !important;

        max-height: calc(100vh - 82px) !important;

        overflow-y: auto !important;
    }

    .icon-touch-nav.open {
        display: grid !important;
    }

    .nav-icon-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 120px !important;

        flex-basis: auto !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 62px !important;
        height: 62px !important;
    }
}


/* Dar telefon */
@media (max-width: 480px) {

    .icon-touch-nav {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    .nav-icon-card {
        min-height: 109px !important;
        padding: 8px !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 53px !important;
        height: 53px !important;
    }

    .nav-icon-title {
        font-size: 13px !important;
    }
}


/* =========================================================
   3E İŞLETME - BÜYÜK LOGOLU ÜST MENÜ KARTLARI
   ========================================================= */

.icon-touch-nav {
    display: flex !important;
    align-items: stretch !important;

    min-height: 138px !important;

    gap: 12px !important;

    padding: 14px 22px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    background: #142037 !important;

    scrollbar-width: thin !important;
}

.nav-icon-card {
    position: relative !important;

    min-width: 152px !important;
    width: 152px !important;
    min-height: 108px !important;

    flex: 0 0 152px !important;

    padding: 11px 10px 9px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    border: 2px solid transparent !important;
    border-radius: 16px !important;

    background: #ffffff !important;
    color: #0f172a !important;

    text-decoration: none !important;
    text-align: center !important;

    cursor: pointer !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.18) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease !important;
}

.nav-icon-card:hover {
    transform: translateY(-3px) !important;

    border-color: #93c5fd !important;

    background: #f8fbff !important;

    box-shadow:
        0 10px 23px rgba(0, 0, 0, 0.24) !important;

    color: #0f172a !important;
    text-decoration: none !important;
}

.nav-icon-card:active {
    transform: scale(.97) !important;
}

.nav-icon-card.active {
    border-color: #2563eb !important;

    background: #eff6ff !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .20),
        0 10px 24px rgba(0, 0, 0, .24) !important;
}

.nav-icon-card.active::after {
    content: "" !important;

    position: absolute !important;
    left: 23px !important;
    right: 23px !important;
    bottom: -2px !important;

    height: 5px !important;

    border-radius: 5px 5px 0 0 !important;

    background: #2563eb !important;
}

.nav-icon-card.disabled {
    opacity: .67 !important;
    cursor: default !important;
}

.nav-icon-card.disabled:hover {
    transform: none !important;

    border-color: transparent !important;
    background: #ffffff !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.18) !important;
}

.nav-icon-picture {
    width: 62px !important;
    height: 62px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 62px !important;
}

.nav-icon-picture img {
    display: block !important;

    width: 62px !important;
    height: 62px !important;

    object-fit: contain !important;
}

.nav-icon-title {
    display: block !important;

    width: 100% !important;

    color: #0f172a !important;

    font-size: 13px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;

    white-space: normal !important;
}

.nav-icon-card small {
    position: absolute !important;
    top: 6px !important;
    right: 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 20px !important;

    padding: 2px 6px !important;

    border-radius: 999px !important;

    background: #e2e8f0 !important;
    color: #64748b !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
}


/* Büyük dokunmatik ekran */
@media (min-width: 1500px) {

    .icon-touch-nav {
        min-height: 156px !important;
        gap: 14px !important;
    }

    .nav-icon-card {
        min-width: 170px !important;
        width: 170px !important;
        min-height: 126px !important;

        flex-basis: 170px !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 72px !important;
        height: 40px !important;
    }

    .nav-icon-title {
        font-size: 13px !important;
    }
}


/* Tablet */
@media (max-width: 1100px) {

    .icon-touch-nav {
        min-height: 128px !important;
        gap: 9px !important;
        padding: 11px 14px !important;
    }

    .nav-icon-card {
        min-width: 138px !important;
        width: 138px !important;
        min-height: 68px !important;

        flex-basis: 138px !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 57px !important;
        height: 57px !important;
    }

    .nav-icon-title {
        font-size: 10px !important;
    }
}


/* Telefon */
@media (max-width: 900px) {

    .icon-touch-nav {
        display: none !important;

        min-height: auto !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        padding: 14px !important;

        max-height: calc(100vh - 82px) !important;

        overflow-y: auto !important;
    }

    .icon-touch-nav.open {
        display: grid !important;
    }

    .nav-icon-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 120px !important;

        flex-basis: auto !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 62px !important;
        height: 62px !important;
    }
}


/* Dar telefon */
@media (max-width: 480px) {

    .icon-touch-nav {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    .nav-icon-card {
        min-height: 109px !important;
        padding: 8px !important;
    }

    .nav-icon-picture,
    .nav-icon-picture img {
        width: 53px !important;
        height: 53px !important;
    }

    .nav-icon-title {
        font-size: 13px !important;
    }
}


/* 3E header compact patch */
.brand-row {
    align-items: center !important;
}
.brand-touch-link {
    border-radius: 12px !important;
}
.brand-copy {
    gap: 0 !important;
}
.header-right {
    gap: 8px !important;
}
.header-business-info {
    line-height: 1.05 !important;
}
.logout-inline {
    font-size: 13px !important;
}
@media (max-width: 900px) {
    .nav-toggle {
        min-height: 40px !important;
        min-width: 74px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }
    .logout-inline {
        min-height: 40px !important;
        min-width: 42px !important;
        font-size: 11px !important;
    }
}

/* 3E Paket ve modül yönetimi */
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.catalog-card{display:flex;flex-direction:column;min-height:270px;padding:22px;border:1px solid #dbe3ee;border-radius:18px;background:#fff;color:#0f172a;text-decoration:none;box-shadow:0 8px 22px rgba(15,23,42,.06);transition:.18s}.catalog-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.11);color:#0f172a}.catalog-card-top,.catalog-meta,.module-admin-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.catalog-code{font:700 12px/1 monospace;color:#64748b;background:#f1f5f9;padding:7px 9px;border-radius:8px}.catalog-card h2{font-size:22px;margin:18px 0 8px}.catalog-card p{color:#64748b;line-height:1.5;flex:1}.catalog-price{font-size:25px;font-weight:850;margin:15px 0}.catalog-price small{font-size:12px;color:#64748b}.catalog-meta{padding-top:14px;border-top:1px solid #e5e7eb;color:#475569;font-size:13px}.license-group{margin-bottom:24px}.license-group:last-child{margin-bottom:0}.license-group h3{margin:0 0 12px;font-size:17px}.license-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.license-module-card{display:flex;align-items:center;gap:12px;min-height:76px;padding:13px;border:1px solid #dbe3ee;border-radius:14px;background:#fff;cursor:pointer}.license-module-card:has(input:checked){border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 2px rgba(37,99,235,.12)}.license-module-card input{width:21px;height:21px;flex:0 0 auto}.license-module-card span{display:flex;flex-direction:column;gap:5px}.license-module-card strong{font-size:14px}.license-module-card small{font-size:11px;color:#64748b}.license-module-line{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:8px}.module-price-input{height:76px!important}.module-admin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px}.module-admin-card{display:flex;flex-direction:column;min-height:210px;padding:17px;border:1px solid #dbe3ee;border-radius:15px;background:#fff;color:#0f172a;text-decoration:none}.module-admin-card:hover{border-color:#93c5fd;color:#0f172a}.module-admin-card>div:first-child{display:flex;flex-direction:column;gap:5px}.module-admin-card>div:first-child span,.module-admin-card>small{font:600 11px/1.3 monospace;color:#64748b}.module-admin-card p{flex:1;color:#64748b;font-size:13px;line-height:1.45}.module-admin-bottom b{font-size:18px}@media(max-width:1200px){.catalog-grid,.license-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.module-admin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.catalog-grid,.license-module-grid,.module-admin-grid{grid-template-columns:1fr}.license-module-line{grid-template-columns:1fr}.module-price-input{height:48px!important}}

/* 3E LICENSE UI */
.license-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.license-module-card {
    background: #fff;
    border: 1px solid #dfe4ea;
    border-radius: 13px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.license-module-card p,
.tenant-license-row p {
    color: #667085;
    font-size: 13px;
    line-height: 1.4;
    margin: 5px 0;
}

.tenant-license-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tenant-license-row {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        210px
        160px;
    gap: 12px;
    align-items: center;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    padding: 13px;
}

@media (max-width: 1150px) {
    .license-module-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .license-module-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .tenant-license-row {
        grid-template-columns: 1fr;
    }

    .tenant-license-row > div {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .license-module-grid {
        grid-template-columns: 1fr;
    }
}