/* =========================================================
   SETUP.TR
   DASHBOARD / SKETCH WIREFRAME
========================================================= */

.dashboard-wireframe {

    /*
        Faz 5.3.4 - PAYLASILAN DEGISKEN TEKRARINI KALDIR.

        `--ink / --line / --paper / --white / --shadow` burada ikinci
        kez tanimlaniyordu ve `user-flow.css`in `:root` degerlerinden
        FARKLIYDI (`--paper: #f8f8f5` vs `#f7f7f3`,
        `--shadow: #d5d5d0` vs `#d2d2cc`). Yerel tanim kazandigi icin
        dashboard'un kagit / golge tonu diger sayfalardan ayrisiyordu
        ve ayni bilesen (kategori listesi, arama, kart, footer)
        sayfa degistirince ton degistiriyordu.

        Artik TUM uygulama sayfalari `user-flow.css`in `:root`
        degerlerini kullanir. Yalnizca dashboard'a ozgu uc degisken
        (`--pencil`, `--ink-soft`, `--light-pencil`) o dosyanin
        `:root` bloguna tasindi; dosya disi bagimlilik kalmaz.
    */

    min-height: 100vh;

    color: var(--ink);

    background-color: var(--paper);

    font-family:
        "Trebuchet MS",
        Arial,
        Helvetica,
        sans-serif;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.04) 1px,
            transparent 1px);

    background-size: 24px 24px;
}


/* =========================================================
   RESET
========================================================= */

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


.dashboard-wireframe a {
    color: inherit;
}


/* =========================================================
   HEADER
========================================================= */

/*
    DASHBOARD ARAÇ ÇUBUĞU

    Menü navbar'ı artık bileşenin (`components/nav-bar`) TAM
    KENDİSİDİR — ana sayfa navbar'ıyla aynı dosyalar — ve
    `.site-header`/`.container.header-content` kullanır.
    Bu yüzden dashboard'ın kendi başlığı ve markası YOKTUR.

    Burada kalan, SADECE dashboard'a özgü iki öğedir:
        · "Benim Setup'ım" düğmesi + seçim sayacı (`.header-manager-button`)
        · program arama kutusu (`.dashboard-search`)

    Bunlar navbar'ın ALTINDA kendi satırında durur ve
    `position: sticky` DEĞİLDİR — yapışkan olan navbar'dır; iki
    ayrı yapışkan çubuk istemiyoruz.

    Önceden bu satır `.setup-flow-header.dashboard-header` idi ve
    marka + menü + bu iki öğe için BEŞ MANTIKSAL ÇOCUKLU bir ızgara
    (`grid-template-areas`) taşıyordu. Marka ve menü bileşene
    geçtiği için ızgarada iki alan kaldı.
*/

.dashboard-wireframe .dashboard-widgets {

    /* Sayfa içeriğiyle aynı kabuk: 1200px (bkz. `.dashboard-main`). */
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;

    padding: 18px 0 4px;

    display: grid;

    /* Eşit yan kolonlar, buton hover boyutu değişse de aramayı merkezde tutar. */
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);

    grid-template-areas:
        "manager search .";

    align-items: center;

    column-gap: 28px;
}



/*
    İKİ ÇOCUĞUN YERLEŞİMİ

    Marka (`brand`) ve menü (`nav`) alanları SİLİNDİ: bu ikisi artık
    bileşenin (`components/nav-bar`) `<header class="site-header">`
    bloğu içinde geliyor. Geriye dashboard'a özgü iki öğe kaldı:

        manager (Benim Setup'ım + sayaç) | search

    `min-width: 0` yalnızca esnemesi gereken öğeye (arama) verilir;
    uzun içerik kolonu sıkıştırıp YATAY KAYDIRMA üretmez.
*/

.dashboard-wireframe .dashboard-widgets>.header-manager-button {

    grid-area: manager;
}


.dashboard-wireframe .dashboard-widgets>.dashboard-search {

    grid-area: search;

    justify-self: center;

    width: 100%;

    /* `width: 100%` korunur; yalnızca üst sınır eklenir, böylece
       arama ne sıkışır ne de devasa bir alan kaplar. */
    max-width: 640px;

    min-width: 0;
}


.header-sketch-button {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    min-height: 46px;

    padding: 8px 18px;

    background: var(--white);

    border: 2px solid var(--ink);

    text-decoration: none;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-weight: 500;

    box-shadow:
        4px 4px 0 var(--shadow);

    transform: rotate(-1deg);

    transition: 0.2s ease;

    clip-path: polygon(3% 5%,
            97% 0,
            100% 91%,
            4% 97%);
}


.header-sketch-button:hover {

    transform:
        translateY(-2px) rotate(-2deg);

    box-shadow:
        6px 6px 0 var(--shadow);
}


/* =========================================================
   SEARCH
========================================================= */

.dashboard-wireframe .dashboard-search {

    position: relative;

    width: 100%;

    margin: 0;

    display: flex;

    align-items: center;
}


.dashboard-wireframe .dashboard-search input {

    width: 100%;

    height: 50px;

    padding:
        0 16px 0 48px;

    border: 2px solid var(--ink);

    border-radius: 12px;

    background: var(--white);

    color: var(--ink);

    font-size: 0.95rem;

    box-shadow:
        4px 4px 0 var(--shadow);

    outline: none;
    color: white;
    
}


.dashboard-wireframe .dashboard-search input::placeholder {

    color: #7a7a7a;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;
}


.dashboard-wireframe .dashboard-search input:focus {

    box-shadow:
        6px 6px 0 #c9c9c5;
}


/* büyüteç */

.search-symbol {

    position: absolute;

    left: 15px;

    z-index: 2;

    font-size: 1.45rem;

    transform: rotate(-15deg);
}


/* =========================================================
   MAIN
========================================================= */

.dashboard-wireframe .dashboard-main {

    width: min(1200px,
            calc(100% - 40px));

    margin: 0 auto;

    padding: 32px 0 50px;
}


/* =========================================================
   ÜÇ KOLON
========================================================= */

.dashboard-layout {

    display: grid;

    grid-template-columns:
        190px minmax(0, 1fr) 285px;

    /* Satır yüksekliği içeriğe göre olsun; `align-items: start` ile
       birlikte yan sütunlar kart uzunluğunca esnemez. */
    grid-auto-rows: min-content;

    gap: 25px;

    align-items: start;
}


/*
    Faz 5.3.3 / P0-03 — BEŞ MANTIKSAL ÇOCUK, KASITLI YERLEŞİM.

    `.dashboard-layout`ın beş çocuğu var: sol kenar çubuğu,
    `#collectionsPanel`, `#featuredPanel`, asıl katalog (`#appsGrid`)
    ve sağ kenar çubuğu. Önceden HİÇBİRİ için `grid-column` /
    `grid-row` yazılmamıştı; yerleşim tamamen otomatik
    konumlandırmaya bırakılmıştı. `hidden` paneller `display:none`
    ile akıştan çıktığı için bugün "düzeltilmiş gibi" görünüyordu,
    ama `dashboard.js` onları `hidden = false` yaptığı anda katalog
    ikinci satırın İLK çocuğu oluyor ve 190px'lik sol kenar
    kolonunu alıyordu.

    Çözüm: üç ana bölge birinci satıra sabitlenir; iki panel `1 / -1`
    ile TAM GENİŞLİKTE, otomatik bir satıra düşer. Buralarda
    `grid-row: auto` BİLEREK yazıldı: `1` yazılsaydı birinci
    satırdaki üç ana bölgeyle çakışırdı.
*/

.dashboard-wireframe .dashboard-layout>.dashboard-sidebar {

    grid-column: 1;

    grid-row: 1;
}


.dashboard-wireframe .dashboard-layout>.dashboard-content-area {

    grid-column: 2;

    grid-row: 1;
}


.dashboard-wireframe .dashboard-layout>.right-sidebar {

    grid-column: 3;

    grid-row: 1;
}


.dashboard-wireframe .dashboard-layout>.collections-panel {

    grid-column: 1 / -1;

    grid-row: auto;
}


.dashboard-wireframe .dashboard-layout>.featured-panel {

    grid-column: 1 / -1;

    grid-row: auto;
}


/* =========================================================
   SOL PANEL
========================================================= */

.dashboard-sidebar {

    min-width: 0;
}


.category-panel {

    padding-top: 4px;
}


.category-panel h2 {

    margin: 0 0 15px;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 1.35rem;

    font-weight: 500;

    transform: rotate(-1deg);
}


/* başlık karalaması */

.category-panel h2::after {

    content: "";

    display: block;

    width: 110px;

    height: 8px;

    margin-top: 2px;

    border-bottom: 2px solid var(--ink);

    transform: rotate(-2deg);
}


/* =========================================================
   KATEGORİLER
========================================================= */

.dashboard-wireframe .categories-list {

    list-style: none;

    margin: 20px 0 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0;
}


.dashboard-wireframe .categories-list li {

    margin: 0;
}


.dashboard-wireframe .categories-list a {

    position: relative;

    display: block;

    padding: 7px 9px 8px 18px;

    border-bottom: 2px solid var(--line);

    color: var(--ink);

    background: transparent;

    text-decoration: none;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.96rem;

    transition: 0.2s ease;

    transform: rotate(-0.6deg);
}


/* sol el çizimi */

.dashboard-wireframe .categories-list a::before {

    content: "";

    position: absolute;

    left: 0;

    top: -2px;

    width: 13px;

    height: 26px;

    border-left: 2px solid var(--ink);

    border-bottom: 2px solid var(--ink);

    transform: skewY(-22deg);
}


.dashboard-wireframe .categories-list a:hover {

    padding-left: 23px;
}


.dashboard-wireframe .categories-list a.active {

    font-weight: 700;

    text-decoration: underline;

    text-decoration-thickness: 2px;

    text-underline-offset: 5px;
}


/* =========================================================
   PROGRAM EKLE
========================================================= */

.sidebar-hint {

    margin:
        30px 0 8px;

    color: var(--pencil);

    font-size: 0.72rem;

    font-style: italic;
}


.cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 42px;

    border: 2px solid var(--ink);

    background: var(--white);

    text-decoration: none;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.74rem;

    font-weight: 700;

    box-shadow:
        3px 3px 0 var(--shadow);

    clip-path: polygon(3% 5%,
            97% 0,
            94% 94%,
            2% 90%);

    transition: 0.2s ease;
}


.cta-button:hover {

    transform:
        translateY(-2px) rotate(-1deg);

    box-shadow:
        5px 5px 0 var(--shadow);
}


/* =========================================================
   ORTA İÇERİK
========================================================= */

.dashboard-content-area {

    min-width: 0;
}


.content-intro {

    display: flex;

    align-items: center;

    gap: 10px;

    margin:
        3px 0 19px;

    color: var(--pencil);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.82rem;
}


.intro-search-icon {

    font-size: 1.35rem;

    color:white;

    transform: rotate(-12deg);
}


.content-intro::after {

    content: "";

    flex: 1;

    height: 1px;

    background: var(--line);
}


/* =========================================================
   UYGULAMA GRID
========================================================= */

.dashboard-wireframe .apps-grid {

    display: grid;

    grid-template-columns:
        repeat(3,
            minmax(145px, 1fr));

    gap: 15px;
}


/* =========================================================
   UYGULAMA KARTI
========================================================= */

.dashboard-wireframe .app-card {

    position: relative;

    min-height: 175px;

    padding: 18px 13px 14px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(255, 255, 255, 0.82);

    border: 1.5px solid #888;

    border-radius:
        12px 5px 9px 6px;

    box-shadow:
        3px 4px 0 rgba(0, 0, 0, 0.12);

    transition: 0.2s ease;

    transform: rotate(-0.3deg);
}


.dashboard-wireframe .app-card:nth-child(even) {

    transform: rotate(0.45deg);
}


.dashboard-wireframe .app-card:nth-child(3n) {

    transform: rotate(-0.55deg);
}


.dashboard-wireframe .app-card:hover {

    transform:
        translateY(-4px) rotate(0deg);

    border-color: var(--ink);

    box-shadow:
        6px 7px 0 rgba(0, 0, 0, 0.14);
}


/* =========================================================
   APP ICON
========================================================= */

.dashboard-wireframe .app-card .app-icon {

    width: 62px;

    height: 62px;

    margin: 0 auto 8px;

    object-fit: contain;

    border: 1.5px solid #777;

    border-radius: 50%;

    padding: 8px;

    background: #f6f6f3;

    filter: grayscale(1);
}


/*
 * Faz 3C: `app-icon` artık DAİMA bir kap div'idir; içine ya
 * `<img>` (logo) ya baş harf metni konur. Bu yüzden eski
 * `:not(img)` seçicisi güncellendi ve iç görsel için ayrı bir
 * kural eklendi.
 */
.dashboard-wireframe .app-card .app-icon:not(img) {

    display: flex;

    align-items: center;

    justify-content: center;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 1.4rem;
}


/* Kap div'inin içindeki logo görseli. */
.dashboard-wireframe .app-card .app-icon .app-logo-img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 8px;

    filter: grayscale(1);
}


/* =========================================================
   APP TEXT
========================================================= */

/*
 * Faz 3C: kart artık "yalnızca ad + kategori" değil; ad, öne
 * çıkan rozeti, yayıncı ve kısa özet de taşır. Aşağıdaki kurallar
 * yeni sunum katmanına (`catalog-view.js`) aittir.
 *
 * NOT: `.app-category` kuralı, `statusSection` gibi eski
 * kullanımlar için KORUNMUŞTUR (özgülülük: yalnızca kart içinde
 * geçerli). Yeni kartlar `.app-meta` kullanır.
 */

.dashboard-wireframe .app-card .app-title-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    width: 100%;
}


.dashboard-wireframe .app-card .app-name {

    margin: 0;

    text-align: center;

    font-size: 0.86rem;

    font-weight: 700;

    color: var(--ink);
}


/* Öne çıkan rozeti (yalnızca featured kayıtlarda). */
.dashboard-wireframe .app-featured-badge {
    display: inline-block;
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* Yayıncı · Kategori satırı. */
.dashboard-wireframe .app-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 4px;
    font-size: 0.64rem;
    color: var(--pencil);
    text-align: center;
}

.app-meta__sep {
    opacity: 0.6;
}

.app-meta__item--category {
    font-weight: 700;
    color: var(--ink);
}


/* Kısa özet. */
.dashboard-wireframe .app-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    width: 100%;
    margin: 7px 0 0;
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--pencil);
    text-align: center;
}


/* Kart içi kısa bilgi (kurulabilir olmayan kayıt). */
.app-inline-notice {
    grid-column: 1 / -1;
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 8px 4px 8px 4px;
    background: #fff;
    font-size: 0.72rem;
    line-height: 1.5;
}


/* Detay düğmesi — teknik değer göstermeyen sade eylem. */
.dashboard-wireframe .detail-button {
    width: 76px;
    padding: 7px 8px;
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    background: var(--ink);
    color: #fff;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-wireframe .detail-button:disabled {
    background: #e6e6e1;
    color: #9a9a95;
    border-color: #b5b5b0;
    cursor: not-allowed;
}


/*
 * Yazılım detay paneli (Faz 3C)
 * ----------------------------
 * Kullanıcıya: logo, ad, kategori, yayıncı, özet, açıklama ve
 * (güvenliyse) web sitesi. WinGet bilgisi YOKTUR.
 */

.app-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 15, 15, 0.55);
}

.app-detail-overlay[hidden] {
    display: none;
}

.app-detail-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: 30px 32px 28px;
    border: 2px solid var(--ink);
    border-radius: 14px 7px 12px 6px;
    background: var(--paper);
    box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.28);
}

.app-detail-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 0.9rem;
    cursor: pointer;
}

.app-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 44px;
}

.app-icon--lg {
    width: 74px;
    height: 74px;
    min-width: 74px;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #777;
    border-radius: 50%;
    background: #f6f6f3;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 1.7rem;
    overflow: hidden;
}

.app-icon--lg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    filter: grayscale(1);
}

.app-detail-title {
    margin: 0;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
}

.app-detail-summary {
    margin: 18px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.app-detail-description {
    margin: 14px 0 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--pencil);
    white-space: pre-wrap;
}

.app-detail-website {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: underline;
}

.app-detail-actions {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.app-detail-status {
    margin: 24px 0;
    font-size: 0.82rem;
    color: var(--pencil);
}

.app-detail-status--error {
    color: #a33;
}


.dashboard-wireframe .app-card .app-category {

    margin: 3px 0 8px;

    font-size: 0.68rem;

    color: var(--pencil);

    text-align: center;
}


/* =========================================================
   İNDİR BUTONU
========================================================= */

.dashboard-wireframe .app-card .btn {

    width: 86px;

    padding: 7px 10px;

    border: 1.5px solid var(--ink);

    border-radius: 2px;

    background: #fff;

    color: var(--ink);

    text-align: center;

    text-decoration: none;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.72rem;

    font-weight: 700;

    box-shadow:
        2px 2px 0 var(--shadow);
}


/* =========================================================
   PAGINATION
========================================================= */

.dashboard-wireframe .pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    margin: 22px 0 0;
}


.dashboard-wireframe .pagination .btn {

    padding: 7px 13px;

    border: 1.5px solid var(--ink);

    background: var(--white);

    color: var(--ink);

    cursor: pointer;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.72rem;
}
.dashboard-wireframe .pagination .btn:hover {
    transform: scale(1.03);
    border-color: rgba(0, 0, 0, 0.386);
    background: rgba(255, 255, 255, 0.796);
    color: black;
}


.dashboard-wireframe .pagination span {

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.76rem;
}


.dashboard-wireframe .pagination .disabled {

    opacity: 0.4;

    pointer-events: none;
}


/* =========================================================
   PROJECT PANEL
========================================================= */

.project-panel {

    margin-top: 38px;

    padding-top: 18px;

    border-top: 1.5px solid var(--ink);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 150px;

    gap: 20px;
}


.project-info h2 {

    margin: 0 0 6px;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 1.05rem;

    font-weight: 500;
}


.project-info p {

    margin: 0;

    color: var(--pencil);

    font-size: 0.76rem;
}


.developer-mode {

    display: flex;

    flex-direction: column;

    gap: 7px;

    align-items: flex-start;

    font-size: 0.75rem;
}


.developer-mode small {

    color: var(--pencil);
}


/* =========================================================
   TOGGLE
========================================================= */

.toggle-control input {

    position: absolute;

    opacity: 0;
}


.toggle-track {

    position: relative;

    display: block;

    width: 48px;

    height: 25px;

    border: 2px solid var(--ink);

    border-radius: 20px;

    background: #ededeb;

    cursor: pointer;
}


.toggle-track::after {

    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #777;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.toggle-control input:checked+.toggle-track {

    background: var(--ink);
}


.toggle-control input:checked+.toggle-track::after {

    transform: translateX(22px);

    background: white;
}


/* =========================================================
   SAĞ OPTİMİZASYON ALANI
========================================================= */

.dashboard-wireframe .right-sidebar {

    position: sticky;

    top: 20px;

    padding: 22px 17px 19px;

    border: 1.5px solid #66777d;

    border-radius:
        14px 7px 13px 8px;

    background:
        rgba(255, 255, 255, 0.75);

    box-shadow:
        5px 5px 0 rgba(80, 110, 120, 0.18);

    color: var(--ink);
}


.optimization-banner h2 {

    margin: 0;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-weight: 500;

    font-size: 1.28rem;

    line-height: 1.15;

    transform: rotate(-0.7deg);
}


/* =========================================================
   SAĞ BUTON
========================================================= */

.cta-button {

    width: 125px;

    margin-top: 17px;
}


/* =========================================================
   OPTİMİZASYON MADDELERİ
========================================================= */

.optimization-banner ul {

    list-style: none;

    margin: 20px 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 11px;
}


.optimization-banner li {

    position: relative;

    padding-left: 18px;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.79rem;

    line-height: 1.22;
}


.optimization-banner li::before {

    content: "*";

    position: absolute;

    left: 0;

    top: -1px;

    font-family:
        "Trebuchet MS",
        sans-serif;

    font-size: 1rem;

    font-weight: 900;
}


/* =========================================================
   SAĞ KARALEME AYIRICI
========================================================= */

.right-divider {

    width: 100%;

    height: 25px;

    margin: 3px 0 8px;

    border-left: 2px solid #777;

    border-right: 2px solid #777;

    border-radius: 50%;

    transform:
        rotate(3deg) skewX(-4deg);

    opacity: 0.8;
}


/* =========================================================
   %60 METNİ
========================================================= */

.capacity-copy {

    margin: 10px 0 18px;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 1rem;

    line-height: 1.3;
}


/*
    Faz 5.3.4 — ESKİ, KAPSAMSIZ `.dashboard-footer` KURALI SİLİNDİ.

    Burada ESKİ devasa-köy yazısı footer'ı için yazılmış, kapsamsız
    bir `.dashboard-footer` kuralı vardı:

        font-size: 2rem;  letter-spacing: 0.32em;
        text-align: center;  color: #555;  transform: rotate(-1deg);

    `dashboard.css`'i yükleyen HER sayfaya sızıyordu (dashboard,
    collections, my-setup) ve ortak footer'ı bozuyordu:
    örneğin "© 2026 setup.tr" satırı 2rem punto + 0.32em harf aralığıyla,
    ortalanmış ve gri renkte çıkıyordu.

    Artık footer'ın TEK uygulaması bileşenin kendi stil dosyasındadır —
        public/components/footer/footer.css
    — ve beş uygulama sayfasının hepsinde birebir aynı görünür.
*/


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .dashboard-wireframe .dashboard-widgets {

        /*
            Dar masaüstü/tablet: alan şablonu AYNI kalır
            (manager | search); yalnızca yatay boşluk
            daralır, böylece arama daha fazla yer bulur.
        */

        column-gap: 18px;
    }


    .dashboard-wireframe .dashboard-widgets>.dashboard-search {

        max-width: 560px;
    }


    .dashboard-layout {

        grid-template-columns:
            160px minmax(0, 1fr);

        gap: 20px;
    }


    /*
        Faz 5.3.3 / P0-03 — `grid-row: 1` burada YAZILMAZ.

        Ana içerik zaten 2. sütunun 1. satırını işaretler; sağ kenar
        çubuğu da 1. satıra yazılsaydı katalogla AYNI HÜCREYE düşüp
        üstüne binerdi. Otomatik yerleşim önceden onu ikinci satıra
        atıyordu; açık `grid-row: 2` aynı davranışı kasıtlı kılar.
    */

    /*
        Faz 5.3.4 — ÖZGÜLLÜK (specificity) DÜZELTMESİ.

        Bu kural `.right-sidebar` (0,1,0) olarak yazılmıştı ve iki
        TEMEL kuralla ÇAKIŞIYORDU:

          · `.dashboard-wireframe .dashboard-layout > .right-sidebar`
            → `grid-column: 3; grid-row: 1`      (0,3,0)
          · `.dashboard-wireframe .right-sidebar`
            → `position: sticky; top: 20px`     (0,2,0)

        Medya sorgusu kaynak sırası daha sonra geldiği için değil,
        ÖZGÜLLÜĞÜ daha DÜŞÜK olduğu için yenilmiyordu. 721–1100px
        bandındaki gerçek sonuç:

          1) `.dashboard-layout` bu bantta İKİ kolona düşüyor
             (`160px minmax(0,1fr)`), ama sağ kenar çubuğu
             `grid-column: 3` kaldığı için ızgarada üçüncü bir
             İMKÂNÎ sütun oluşuyor ve çubuk katalogdan sağa doğru
             tasıyor; içerik genişliği kabuktan çıkıyor.
          2) `position: sticky` iptal edilmediği için çubuk
             kaydırılırken yapışkan kalıyor (istenen `static`).

        Aşağıdaki seçici (0,3,0) ile temel yerleşim kuralıyla EŞİT
        özgüllüğe gelir ve kaynak sırası daha sonra olduğu için
        KAZANIR; ayrıca (0,2,0) olan `position` kuralını da yener.

        `grid-row: 2` bilerek yazıldı: ana içerik zaten 2. sütunun
        1. satırındadır; çubuk da 1. satıra yazılsaydı katalogla
        AYNI HÜCREYE düşüp üstüne binerdi.
    */

    .dashboard-wireframe .dashboard-layout>.right-sidebar {

        grid-column: 2;

        grid-row: 2;

        position: static;

        margin-top: 10px;
    }


    .dashboard-wireframe .apps-grid {

        grid-template-columns:
            repeat(3,
                minmax(120px, 1fr));
    }

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 720px) {

    .dashboard-wireframe .dashboard-widgets {

        /*
            Mobil: alan şablonu TEK SÜTUN olur ve sıra
            `dashboard.html`deki DOM sırasıyla BİREBİR aynıdır
            (Benim Setup'ım · arama).

            Marka ve menü bu listede YOK: onlar bileşenin kendi
            `.site-header` çubuğunda, bu satırın ÜSTÜNDEDİR.
            `grid-template-areas` yeniden tanımlanmazsa üç kolonlu
            alan şablonu tek sütunla çelişip GİZLİ sütunlar
            üretirdi.
        */

        grid-template-columns: 1fr;

        grid-template-areas:
            "manager"
            "search";

        gap: 15px;

        margin-top: 15px;

        padding-top: 0;

        padding-bottom: 20px;
    }


    .dashboard-wireframe .admin-info-button {

        width: max-content;
    }


    .dashboard-wireframe .dashboard-main {

        width: calc(100% - 24px);

        padding-top: 20px;
    }


    .dashboard-layout {

        display: flex;

        flex-direction: column;

        gap: 24px;
    }


    .dashboard-sidebar,
    .dashboard-content-area,
    .right-sidebar {

        width: 100%;
    }


    .dashboard-sidebar {

        order: 1;
    }


    /*
        Faz 5.3.3 / K.13 — MOBİLDE KATEGORİ LİSTESİNİN DİKEY AYAK İZİ.

        Sorun: liste mobilde de DİKEY sütun; her bağlantı ~35px
        (7+8 dolgu + ~18 satır + 2 alt kenarlık), 12 kategori ≈ 420px.
        `.dashboard-sidebar { order: 1 }` olduğu için bu blok
        katalogdan ÖNCE geliyor; kullanıcı programlara ulaşmak için
        ~420px aşağı kaydırmak zorunda kalıyordu.

        Çözüm: mobilde tek satırlık, yatay KAYDIRILABİLİR bant
        (~420px → ~42px). Masaüstü DOKUNULMAZ; aynı `ul` / `li` /
        `a` / `active` sınıfı kullanılır, yeni bir bileşen kurulmaz,
        kategorilerin SAYISI korunur.

        ERİŞİLEBİLİRLİK: liste `display:none` DEĞİLDİR, tüm
        bağlantılar odaklanabilir kalır. Taşma yalnızca listenin KENDİ
        kapsayıcısındadır (`overflow-x: auto`), sayfada yatay kaydırma
        olmaz; `overflow: hidden` ile MASKELEME YOKTUR — son çip kısmen
        görünerek kaydırılabilirliği belli eder. Klavyeyle kaydırma
        için HTML'de `tabindex="0"` + `aria-label` var (odak tuzağı
        YOKTUR). Dekoratif `a::before` el çizimi gizlenir; metin ve
        `active` durumu korunur.
    */

    .dashboard-wireframe .category-panel h2 {

        margin-bottom: 10px;

        font-size: 1.1rem;
    }


    .dashboard-wireframe .category-panel h2::after {

        width: 84px;

        height: 6px;

        margin-top: 2px;

        margin-bottom: 4px;
    }


    .dashboard-wireframe .categories-list {

        margin: 10px 0 0;

        padding: 0 0 8px;

        flex-direction: row;

        flex-wrap: nowrap;

        gap: 8px;

        overflow-x: auto;

        overflow-y: hidden;

        overscroll-behavior-x: contain;

        scroll-snap-type: x proximity;

        scrollbar-width: thin;
    }


    .dashboard-wireframe .categories-list li {

        flex: 0 0 auto;

        scroll-snap-align: start;
    }


    .dashboard-wireframe .categories-list a {

        display: inline-block;

        padding: 7px 13px;

        border: 1.5px solid var(--line);

        border-bottom-width: 1.5px;

        border-radius: 999px;

        background: var(--white);

        font-size: 0.82rem;

        white-space: nowrap;
    }


    /* Masaüstündeki `padding-left: 23px` hover kaymasını geri al. */

    .dashboard-wireframe .categories-list a:hover {

        padding-left: 13px;
    }


    /* Dikey çizgi dekoru yatay bantta anlamsız. */

    .dashboard-wireframe .categories-list a::before {

        display: none;
    }


    .dashboard-wireframe .categories-list a.active {

        border-color: var(--ink);

        background: var(--white);

        box-shadow: 2px 2px 0 var(--shadow);
    }


    .dashboard-content-area {

        order: 2;
    }


    .right-sidebar {

        order: 3;
    }


    .dashboard-wireframe .apps-grid {

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


    .project-panel {

        grid-template-columns: 1fr;
    }



}


/* =========================================================
   ÇOK KÜÇÜK TELEFON
========================================================= */

@media (max-width: 430px) {

    .dashboard-wireframe .apps-grid {

        grid-template-columns: 1fr;
    }


    .dashboard-wireframe .app-card {

        min-height: 160px;
    }


    .dashboard-wireframe .dashboard-search input {

        height: 46px;

        padding-left: 43px;
    }



}

/* =========================================================
   PROGRAM SEÇİMİ
========================================================= */

.dashboard-wireframe .header-manager-button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;
}


.dashboard-wireframe .header-manager-button b {

    min-width: 21px;
    height: 21px;

    display: inline-grid;

    place-items: center;

    padding: 0 5px;

    border:
        1px solid var(--ink);

    border-radius: 50%;

    background:
        var(--ink);

    color: white;

    font-family:
        Arial,
        sans-serif;

    font-size: .62rem;

    line-height: 1;
}


.dashboard-wireframe .header-manager-button.has-items {

    animation:
        managerButtonPulse 1.35s ease-in-out 1;
}


@keyframes managerButtonPulse {

    0%,
    100% {

        transform:
            rotate(-1deg) scale(1);

    }

    45% {

        transform:
            rotate(1deg) scale(1.04);

    }

    75% {

        transform:
            rotate(-.5deg) scale(1.01);

    }

}


/* =========================================================
   KART SEÇİMİ
========================================================= */

.dashboard-wireframe .app-actions {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 10px;
}


.dashboard-wireframe .queue-add-btn {

    width: 100%;

    max-width: 145px;

    min-height: 36px;
}


.dashboard-wireframe .app-card.selected {

    border-color:
        white;

    background:
        #f0f0ec;

    box-shadow:
        6px 7px 0 #c8c8c3;
}


.dashboard-wireframe .app-card.selected .queue-add-btn {

    background:
        white;

    color:
        white;
}


.dashboard-wireframe .card-button {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #f5f5f5;
    cursor: pointer;
    font: 700 .78rem/1.25 "Trebuchet MS", Arial, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    clip-path: none;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}


.dashboard-wireframe .card-button:hover {
    border-color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
}


/* =========================================================
   KART → HEADER ANİMASYONU
========================================================= */

.dashboard-wireframe .queue-fly-clone {

    position:
        fixed;

    z-index:
        2000;

    pointer-events:
        none;

    transform-origin:
        center center;

    transition:
        transform .68s cubic-bezier(.2, .8, .2, 1),

        opacity .68s ease;
}


/*
    Faz 5.3.4 - dashboard'a ozel FOOTER kurallari buradan cikarildi.

    Burada ikinci bir footer UYGULAMASI vardi (yalnizca dashboard'da
    gecerli izgara surumu). Ortak footer`in flex surumu ise
    `components/footer/footer.css` icinden geliyordu; yani footer
    sayfadan sayfaya DEGISIYORDU.

    Artik TEK uygulama vardir ve bes uygulama sayfasinin hepsinde
    birebir ayni gorunur:
        public/components/footer/footer.css
*/
/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 760px) {

    .dashboard-wireframe .header-manager-button {

        width:
            max-content;

    }



}


@media (max-width: 430px) {}

/* Bu dosyadaki kurallar mevcut dashboard.css dosyanın EN ALTINA eklenebilir. */
.dashboard-wireframe .app-card {
    padding-top: 46px;
}

.queue-select-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
}

.queue-select-wrap label {
    cursor: pointer;
    font-size: .6rem;
    font-weight: 800;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
}

.queue-checkbox {
    width: 15px;
    height: 15px;
    accent-color: #151515;
    cursor: pointer;
}

.dashboard-wireframe .app-card.selected {
    border-color: #151515;
    box-shadow: 6px 7px 0 #c8c8c3;
    background: #f4f4f0;
}

.app-actions {
    display: flex;
    gap: 7px;
    width: 100%;
    justify-content: center;
}

.card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #f5f5f5;
    cursor: pointer;
    text-decoration: none;
    font: 700 .78rem/1.25 "Trebuchet MS", Arial, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.queue-add-btn {
    flex: 1;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-button:hover {
    border-color: rgba(255, 255, 255, .75);
    background: #fff;
    color: #111;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.floating-manager {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 2px solid #151515;
    background: #fff;
    color: #151515;
    text-decoration: none;
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: .68rem;
    font-weight: 800;
    box-shadow: 5px 5px 0 #d2d2cc;
    clip-path: polygon(3% 4%, 97% 0, 95% 94%, 2% 98%);
    transition: transform .2s ease, box-shadow .2s ease;
}

.floating-manager:hover {
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 7px 7px 0 #cecec9;
}

.floating-manager.has-items {
    animation: managerPulse 1.6s ease-in-out infinite;
}

.manager-icon {
    font-size: 1rem;
}

.floating-manager b {
    min-width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #151515;
    border-radius: 50%;
    background: #151515;
    color: #fff;
    font-size: .63rem;
}

.queue-fly-clone {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    transition: transform .68s cubic-bezier(.2, .8, .2, 1), opacity .68s ease;
    transform-origin: center;
}

.manager-inline-link {
    width: auto;
    min-width: 170px;
}

@keyframes managerPulse {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(-1deg) translateY(-2px);
    }
}

@media (max-width: 560px) {
    .floating-manager {
        right: 12px;
        bottom: 12px;
    }

    .app-actions {
        flex-direction: column;
    }

    .card-button {
        width: 100%;
    }

    .manager-inline-link {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   ANA SAYFA İLE ORTAK KOYU / CAM YÜZEY
   Navbar ve footer kendi bileşen stillerini kullanmaya devam eder.
========================================================= */

.dashboard-wireframe .dashboard-widgets {
    row-gap: 14px;
}

.dashboard-wireframe .dashboard-search input {
    border: 1px solid rgb(255, 255, 255);
    border-radius: 12px;
    background: rgba(255, 255, 255, .075);
    color: #f5f5f5;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.479);
    transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease;
}

.dashboard-wireframe .dashboard-search input::placeholder {
    color: #ffffff;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.dashboard-wireframe .dashboard-search input:focus {
    border-color: rgba(255, 255, 255, .68);
    background: rgba(12, 14, 22, .92);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}

.dashboard-wireframe .search-symbol {
    color: #e8e9ee;
}

.dashboard-wireframe .header-sketch-button,
.dashboard-wireframe .cta-button,
.dashboard-wireframe .floating-manager {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .075);
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
    clip-path: none;
    transform: none;
    transition:
        transform .24s cubic-bezier(.2, .75, .25, 1),
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease;
}

.dashboard-wireframe .header-sketch-button:hover,
.dashboard-wireframe .cta-button:hover,
.dashboard-wireframe .floating-manager:hover {
    border-color: rgba(255, 255, 255, .72);
    background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

.dashboard-wireframe .header-sketch-button:focus-visible,
.dashboard-wireframe .cta-button:focus-visible,
.dashboard-wireframe .floating-manager:focus-visible,
.dashboard-wireframe .categories-list a:focus-visible,
.dashboard-wireframe .dashboard-search input:focus-visible,
.dashboard-wireframe .app-card button:focus-visible,
.dashboard-wireframe .app-card a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 3px;
}

.dashboard-wireframe .dashboard-sidebar,
.dashboard-wireframe .right-sidebar {
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .045);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dashboard-wireframe .dashboard-sidebar {
    padding: 18px;
}

.dashboard-wireframe .right-sidebar {
    padding: 18px;
}

.dashboard-wireframe .category-panel h2,
.dashboard-wireframe .categories-list a,
.dashboard-wireframe .content-intro {
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #f5f5f5;
}

.dashboard-wireframe .category-panel h2::after {
    border-color: rgba(255, 255, 255, .38);
}

.dashboard-wireframe .categories-list a {
    border-color: rgba(255, 255, 255, .14);
    transform: none;
    transition: color .2s ease, background-color .2s ease, padding .2s ease;
}

.dashboard-wireframe .categories-list a::before {
    border-color: rgba(255, 255, 255, .4);
}

.dashboard-wireframe .categories-list a:hover,
.dashboard-wireframe .categories-list a.active {
    color: #fff;
}

.dashboard-wireframe .sidebar-hint {
    color: #b3b5bf;
}

.dashboard-wireframe .app-card {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    color: #f5f5f5;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    transform: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dashboard-wireframe .app-card:nth-child(even),
.dashboard-wireframe .app-card:nth-child(3n) {
    transform: none;
}

.dashboard-wireframe .app-card:hover {
    border-color:white;
    background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
    transform: translateY(-4px);
}

.dashboard-wireframe .app-card .app-icon,
.dashboard-wireframe .app-card .app-icon:not(img) {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .09);
    color: #f5f5f5;
    filter: none;
}

.dashboard-wireframe .app-card .app-icon .app-logo-img {
    filter: none;
}

.dashboard-wireframe .app-card .app-name,
.dashboard-wireframe .app-meta__item--category {
    color: #f5f5f5;
}

.dashboard-wireframe .app-meta,
.dashboard-wireframe .app-summary {
    color: #b8bac4;
}

.dashboard-wireframe .app-featured-badge,
.dashboard-wireframe .app-card.selected .app-featured-badge {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .09);
    color: #e8e9ee;
}

.dashboard-wireframe .app-card.selected {
    border-color:white;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, .045));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 10px 26px rgba(0, 0, 0, .28);
}

.dashboard-wireframe .app-inline-notice {
    border-color: rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .075);
    color: #e8e9ee;
}

.dashboard-wireframe .app-detail-overlay {
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.dashboard-wireframe .app-detail-panel {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18, 18, 18, .98), rgba(9, 9, 9, .98));
    color: #f5f5f5;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .52);
}

.dashboard-wireframe .app-detail-close {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #f5f5f5;
}

.dashboard-wireframe .app-detail-title,
.dashboard-wireframe .app-detail-summary {
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.dashboard-wireframe .app-detail-description,
.dashboard-wireframe .app-detail-status {
    color: #b8bac4;
}

.dashboard-wireframe .app-detail-website {
    color: #fff;
}

.dashboard-wireframe .app-icon--lg {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .09);
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.dashboard-wireframe .app-icon--lg img {
    filter: none;
}

.dashboard-wireframe .app-detail-close:hover {
    border-color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.dashboard-wireframe .floating-manager b {
    border-color: white;
    background: white;
    color: #111;
}

.dashboard-wireframe .collections-panel,
.dashboard-wireframe .featured-panel {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
    box-shadow: 0 14px 36px rgba(0, 0, 0, .26);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (max-width: 720px) {

    .dashboard-wireframe .dashboard-sidebar,
    .dashboard-wireframe .right-sidebar,
    .dashboard-wireframe .collections-panel,
    .dashboard-wireframe .featured-panel {
        padding: 14px;
    }

    .dashboard-wireframe .dashboard-widgets {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "manager manager"
            "search search";
        row-gap: 12px;
    }

    .dashboard-wireframe .dashboard-search {
        grid-column: 1 / -1;
    }

    .dashboard-wireframe .dashboard-search input {
        font-size: 16px;
    }

    .dashboard-wireframe .apps-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    }
}

@media (max-width: 420px) {
    .dashboard-wireframe .dashboard-widgets {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "manager"
            "search";
    }
}

@media (prefers-reduced-motion: reduce) {

    .dashboard-wireframe .header-sketch-button,
    .dashboard-wireframe .cta-button,
    .dashboard-wireframe .card-button,
    .dashboard-wireframe .floating-manager,
    .dashboard-wireframe .app-card {
        transition: none;
    }
}

/* ---------------------------------------------------------
   YERLEŞİM VE ETKİLEŞİM DÜZELTMELERİ
   --------------------------------------------------------- */

.dashboard-wireframe #navbar-placeholder {
    width: 100%;
    margin-inline-start: 0;
}

.dashboard-wireframe .dashboard-widgets {
    width: min(1360px, calc(100% - 40px));
    padding-top: calc(var(--nav-header-h, 68px) + 12px);
}

.dashboard-wireframe .dashboard-main {
    width: min(1360px, calc(100% - 40px));
}

.dashboard-wireframe .dashboard-layout {
    grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) minmax(220px, 245px);
    gap: clamp(16px, 1.8vw, 24px);
}

.dashboard-wireframe .right-sidebar {
    top: calc(var(--nav-header-h, 68px) + 16px);
    min-width: 0;
}

.dashboard-wireframe .optimization-banner h2 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 1.12rem;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
    transform: none;
}

.dashboard-wireframe .header-sketch-button,
.dashboard-wireframe .cta-button,
.dashboard-wireframe .detail-button,
.dashboard-wireframe .floating-manager {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 7px;
    background: rgba(255, 255, 255, .075);
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    clip-path: none;
    transform: none;
    -webkit-box-reflect: none;
}

.dashboard-wireframe .header-manager-button,
.dashboard-wireframe .cta-button,
.dashboard-wireframe .floating-manager {
    border-color: rgba(255, 255, 255, .26);
    background: rgb(14, 14, 14);
    color: #f5f5f5;
}

.dashboard-wireframe .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    text-decoration: none;
}

.dashboard-wireframe .cta-button {
    padding: 9px 12px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.dashboard-wireframe .header-sketch-button:hover,
.dashboard-wireframe .cta-button:hover,
.dashboard-wireframe .floating-manager:hover {
    border-color: rgba(255, 255, 255, .72);
    background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

.dashboard-wireframe .header-sketch-button:active,
.dashboard-wireframe .cta-button:active,
.dashboard-wireframe .floating-manager:active {
    transform: translateY(1px);
}

.dashboard-wireframe .floating-manager {
    right: max(16px, calc((100vw - 1360px) / 2));
    bottom: 16px;
    max-width: calc(100vw - 32px);
    animation: none;
}

.dashboard-wireframe .floating-manager.has-items {
    border-color: rgba(255, 255, 255, .58);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}

.dashboard-wireframe .queue-select-wrap {
    min-height: 44px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(9, 9, 9, .72);
}

.dashboard-wireframe .queue-select-wrap label {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: .7rem;
    color: #e8e9ee;
}

.dashboard-wireframe .queue-checkbox {
    width: 18px;
    height: 18px;
    accent-color: black;
}

.dashboard-wireframe .app-card {
    min-width: 0;
    min-height: 205px;
    padding: 54px 16px 16px;
}

.dashboard-wireframe .app-card .app-title-row {
    flex-wrap: wrap;
    min-width: 0;
}

.dashboard-wireframe .app-card .app-name {
    min-width: 0;
    font-family: "LXGW Marker Gothic", "Trebuchet MS", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dashboard-wireframe .app-card .app-actions {
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.dashboard-wireframe .app-card .app-actions>* {
    flex: 1 1 0;
    min-width: 0;
}

.dashboard-wireframe .app-card .detail-button {
    width: auto;
    min-width: 76px;
}

.dashboard-wireframe .app-card .queue-add-btn {
    overflow-wrap: anywhere;
}

.dashboard-wireframe .app-card .app-featured-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-wireframe .app-detail-close {
    transform: none;
}

.dashboard-wireframe .app-detail-close:hover {
    transform: none;
}

.dashboard-wireframe .collections-panel__title,
.dashboard-wireframe .featured-panel__title {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 1.2rem;
}

@media (max-width: 1100px) and (min-width: 721px) {
    .dashboard-wireframe .dashboard-layout {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .dashboard-wireframe .dashboard-layout>.right-sidebar {
        max-width: min(100%, 480px);
        justify-self: end;
        top: auto;
    }
}

@media (max-width: 720px) {
    .dashboard-wireframe .dashboard-widgets {
        width: calc(100% - 24px);
        padding-top: calc(var(--nav-header-h, 60px) + 10px);
    }

    .dashboard-wireframe .dashboard-main {
        width: calc(100% - 24px);
    }

    .dashboard-wireframe .dashboard-layout {
        gap: 18px;
    }

    .dashboard-wireframe .right-sidebar {
        position: static;
        width: 100%;
        max-width: none;
    }

    .dashboard-wireframe .app-card {
        min-height: 195px;
        padding: 54px 14px 14px;
    }

    .dashboard-wireframe .app-card .app-actions {
        flex-direction: row;
    }

    .dashboard-wireframe .floating-manager {
        right: 12px;
        bottom: 12px;
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 430px) {
    .dashboard-wireframe .app-card .app-actions {
        flex-direction: row;
    }

    .dashboard-wireframe .app-card .app-actions>* {
        flex-basis: 0;
    }

    .dashboard-wireframe .dashboard-widgets {
        padding-top: calc(var(--nav-header-h, 60px) + 8px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dashboard-wireframe .app-card .app-actions>*,
    .dashboard-wireframe .floating-manager,
    .dashboard-wireframe .right-sidebar {
        transition: none;
        animation: none;
    }
}

/* KART BUTONLARI — renkleri buradan değiştir. */
.dashboard-wireframe {
    --card-bg: #0e0e0e;
    --card-text: #f5f5f5;
    --card-border: rgba(255, 253, 253, .91);
    --card-hover: #fff;
    --card-hover-text: #101018;
    --card-selected: #fff;
    --card-selected-text: #000;
    --manager-bg: #151515;
    --manager-text: #f5f5f5;
    --manager-hover-text: #fff;
    --manager-hover-shadow: 0 8px 20px rgba(0, 0, 0, .3);
    --manager-badge-border: rgba(255, 255, 255, .3);
    --manager-badge-bg: rgba(255, 255, 255, .13);
    --manager-badge-text: #fff;
    --fps-bg: #111;
    --fps-text: #f5f5f5;
    --fps-border: rgba(254, 255, 255, .45);
    --fps-glow: inset 0 1px 0 rgba(255, 255, 255, .08);
    --fps-hover-glow: 0 8px 20px rgba(0, 0, 0, .24);
}

.dashboard-wireframe .app-card :is(.detail-button, .queue-add-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--card-border);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--card-text);
    font: 700 .82rem/1.25 "Trebuchet MS", Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition: color .2s ease, border-color .2s ease;
}

.dashboard-wireframe .app-card :is(.detail-button, .queue-add-btn):hover:not(:disabled) {
    border-color: var(--card-hover);
    color: var(--card-hover-text);
    background: var(--card-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.dashboard-wireframe .app-card .queue-add-btn[aria-pressed="true"] {
    border-color: var(--card-selected);
    background: var(--card-selected);
    color: var(--card-selected-text);
}

.dashboard-wireframe .app-card .queue-add-btn[aria-pressed="true"]:hover:not(:disabled) {
    background: #fff;
    color: #111;
}

.dashboard-wireframe .app-card :is(.detail-button, .queue-add-btn):disabled {
    cursor: not-allowed;
    opacity: .58;
}

.dashboard-wireframe .header-manager-button {
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.377);
    color: var(--manager-text);
    font: 700 .84rem/1.25 "Trebuchet MS", Arial, sans-serif;
    box-shadow: none;
    clip-path: none;
    transform: none;
}

.dashboard-wireframe .header-manager-button::after {
    content: none;
}

.dashboard-wireframe .header-manager-button:hover {
    background: rgba(255, 255, 255, 0.116);
    color: var(--manager-hover-text);
    transform: translateY(-1px);
    box-shadow: var(--manager-hover-shadow);
}

.dashboard-wireframe .header-manager-button:is(:hover, :focus-visible)::after {
    content: none;
}

.dashboard-wireframe .header-manager-button b {
    border-color: var(--manager-badge-border);
    background: var(--manager-badge-bg);
    color: var(--manager-badge-text);
}

.dashboard-wireframe .header-manager-button.has-items {
    animation: none;
}

.dashboard-wireframe .optimization-banner > .cta-button {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--fps-border);
    border-radius: 8px;
    background: var(--fps-bg);
    color: var(--fps-text);
    box-shadow: var(--fps-glow);
    text-align: center;
    white-space: normal;
}

.dashboard-wireframe .optimization-banner > .cta-button::after {
    content: none;
}

.dashboard-wireframe .optimization-banner > .cta-button:hover {
    border-color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: var(--fps-hover-glow);
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-wireframe .app-card :is(.detail-button, .queue-add-btn),
    .dashboard-wireframe .header-manager-button,
    .dashboard-wireframe #queueBadge,
    .dashboard-wireframe .optimization-banner > .cta-button {
        transition: none;
    }
}

.dashboard-wireframe .header-manager-button {
    border-color: var(--ui-color-border-primary);
    background: var(--ui-color-bg-surface);
    color: var(--ui-color-text-primary);
    font-size: var(--ui-font-size-base);
    box-shadow: var(--manager-hover-shadow);
    transition:
        background-color var(--ui-transition-base),
        border-color var(--ui-transition-base),
        color var(--ui-transition-base),
        font-size var(--ui-transition-base),
        transform var(--ui-transition-base),
        box-shadow var(--ui-transition-base);
}

.dashboard-wireframe .header-manager-button > svg {
    flex: 0 0 auto;
    fill: currentColor;
}

.dashboard-wireframe .header-manager-button:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.178);
    color: var(--ui-color-text-inverse);
    font-size: var(--ui-font-size-md);
    filter: brightness(.92);
}

.dashboard-wireframe .header-manager-button:is(:hover, :focus-visible) {
    font-size: var(--ui-font-size-md);
}

.dashboard-wireframe #queueBadge {
    min-width: 24px;
    height: 24px;
    border-color: var(--ui-color-text-primary);
    background: var(--ui-color-bg-surface);
    color: var(--ui-color-text-primary);
    font-size: var(--ui-font-size-sm);
    font-variant-numeric: tabular-nums;
    transition:
        font-size var(--ui-transition-base),
        transform var(--ui-transition-base);
}

.dashboard-wireframe .header-manager-button:is(:hover, :focus-visible) #queueBadge {
    font-size: var(--ui-font-size-base);
    transform: scale(1.08);
}

.dashboard-wireframe .header-manager-button:focus-visible {
    outline: 2px solid var(--ui-color-text-inverse);
    outline-offset: 3px;
}

.dashboard-wireframe .header-manager-button:active {
    transform: translateY(1px);
    box-shadow: none;
}

@media (max-width: 1200px) {
    .dashboard-wireframe .dashboard-widgets {
        grid-template-columns:
            minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
        column-gap: 18px;
    }
}

@media (max-width: 1080px) {
    .dashboard-wireframe .dashboard-widgets {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "manager"
            "search";
    }

    .dashboard-wireframe .dashboard-widgets > .dashboard-search {
        grid-column: auto;
        width: 100%;
        max-width: 640px;
        justify-self: center;
    }
}