/* =============================================================================
   ANKADORM - Daire secim zinciri (Etap -> Blok -> Daire)

   Ayri dosya: .cshtml icine gomulmuyor cunku Razor'da "@media" kacis
   gerektiriyor ve tema CSS'i ile cakisma burada tek yerden yonetiliyor.
   Sinif oneki: ds- (daire secim). Tema siniflarina dokunulmaz.

   RENK KARARI (2026-08-13): marka vurgusu kurumsal palet (mint / zeytin /
   turuncu), durum renkleri anlam tasidigi icin yesil / amber / kirmizi.
   Mint ve zeytin zemin uzerine BEYAZ YAZILMAZ - olculen kontrast 2:1'in
   altinda kaliyor, koyu murekkep kullaniliyor.
   ============================================================================= */

/* Tema zaten global box-sizing veriyor; yine de kendi bilesenlerimizde
   varsayima dayanmiyoruz. Aksi halde width:100% + padding olan panel dar
   ekranda yatay tasma yapiyor. */
[class^="ds-"],
[class*=" ds-"] {
    box-sizing: border-box;
}

:root {
    /* Kurumsal palet - ankadorm.com.tr'den olculdu */
    --ds-marka: #8DC9A4;
    --ds-marka-2: #A9DCC0;
    --ds-marka-murekkep: #08131C;
    --ds-vurgu: #C3BC2E;
    --ds-vurgu-2: #F9A609;

    /* Yuzeyler */
    --ds-zemin: #F6F7F9;
    --ds-kart: #FFFFFF;
    --ds-cizgi: #E4E6EB;
    --ds-cizgi-2: #EFF1F4;
    --ds-yazi: #23262D;
    --ds-yazi-2: #6B7280;
    --ds-yazi-3: #9AA1AC;

    /* Durum: bos / kismi dolu / dolu */
    --ds-bos-nokta: #2E9E63;
    --ds-bos-zemin: #EAF6EF;
    --ds-bos-cizgi: #BFE3CE;
    --ds-bos-koyu: #1E6B44;

    --ds-kismi-nokta: #D99B12;
    --ds-kismi-zemin: #FDF4E3;
    --ds-kismi-cizgi: #F2DFB4;
    --ds-kismi-koyu: #855800;

    --ds-dolu-nokta: #D1495B;
    --ds-dolu-zemin: #FBECEE;
    --ds-dolu-cizgi: #F0CBD1;
    --ds-dolu-koyu: #8E2433;

    --ds-bos-yatak: #DDE1E6;
}

html[data-theme-mode="dark"] {
    --ds-zemin: #1A1D24;
    --ds-kart: #22262F;
    --ds-cizgi: #333844;
    --ds-cizgi-2: #2B303A;
    --ds-yazi: #E7EAEF;
    --ds-yazi-2: #A6ADBA;
    --ds-yazi-3: #7C8494;

    --ds-bos-zemin: #172C21;
    --ds-bos-cizgi: #2C5340;
    --ds-bos-koyu: #7FD3A6;

    --ds-kismi-zemin: #2E2410;
    --ds-kismi-cizgi: #574318;
    --ds-kismi-koyu: #EFC167;

    --ds-dolu-zemin: #2E1519;
    --ds-dolu-cizgi: #57292F;
    --ds-dolu-koyu: #F09AA6;

    --ds-bos-yatak: #3A4049;
}

/* -----------------------------------------------------------------------------
   BASLIK SERIDI + SAYAC KUTULARI
   ----------------------------------------------------------------------------- */

.ds-baslik {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 16px;
}

.ds-baslik h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ds-yazi);
}

.ds-baslik p {
    margin: 0;
    font-size: 13px;
    color: var(--ds-yazi-2);
}

.ds-bosluk {
    flex: 1 1 40px;
}

.ds-sayaclar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ds-sayac {
    min-width: 104px;
    padding: 9px 13px;
    background: var(--ds-kart);
    border: 1px solid var(--ds-cizgi);
    border-radius: 12px;
}

.ds-sayac-baslik {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ds-yazi-2);
}

.ds-sayac-deger {
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: -.02em;
    color: var(--ds-yazi);
}

.ds-nokta {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    flex: none;
    display: inline-block;
}

.ds-nokta.ds-bos { background: var(--ds-bos-nokta); }
.ds-nokta.ds-kismi { background: var(--ds-kismi-nokta); }
.ds-nokta.ds-dolu { background: var(--ds-dolu-nokta); }
.ds-nokta.ds-yatak { background: var(--ds-yazi-3); }

/* -----------------------------------------------------------------------------
   UYARI KUTUSU (kayan yazinin yerine)
   ----------------------------------------------------------------------------- */

.ds-uyari {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #FDF6E3;
    border: 1px solid #EBD9A8;
    color: #6B4E00;
    font-size: 13px;
    line-height: 1.5;
}

html[data-theme-mode="dark"] .ds-uyari {
    background: #2E2712;
    border-color: #55491F;
    color: #E7CE86;
}

.ds-uyari i {
    margin-top: 2px;
    flex: none;
}

/* -----------------------------------------------------------------------------
   SUZGEC CUBUGU
   ----------------------------------------------------------------------------- */

.ds-suzgec {
    background: var(--ds-kart);
    border: 1px solid var(--ds-cizgi);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
}

.ds-ayirac {
    width: 1px;
    height: 24px;
    background: var(--ds-cizgi);
}

.ds-gorunum {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--ds-zemin);
    border-radius: 10px;
    padding: 3px;
}

.ds-gorunum a {
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-yazi-2);
    text-decoration: none;
}

.ds-gorunum a.ds-secili {
    background: var(--ds-kart);
    color: var(--ds-yazi);
    box-shadow: 0 1px 3px rgba(20, 25, 35, .12);
}

.ds-cip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--ds-cizgi);
    background: var(--ds-kart);
    color: var(--ds-yazi);
    user-select: none;
}

.ds-cip .ds-adet {
    font-weight: 500;
    opacity: .62;
}

.ds-cip.ds-acik {
    border-color: var(--ds-marka);
    background: #EDF7F1;
    color: var(--ds-marka-murekkep);
}

html[data-theme-mode="dark"] .ds-cip.ds-acik {
    background: #1D2E26;
    color: var(--ds-marka-2);
}

.ds-cip.ds-acik.ds-durum-bos { border-color: var(--ds-bos-nokta); background: var(--ds-bos-zemin); color: var(--ds-bos-koyu); }
.ds-cip.ds-acik.ds-durum-kismi { border-color: var(--ds-kismi-nokta); background: var(--ds-kismi-zemin); color: var(--ds-kismi-koyu); }
.ds-cip.ds-acik.ds-durum-dolu { border-color: var(--ds-dolu-nokta); background: var(--ds-dolu-zemin); color: var(--ds-dolu-koyu); }

.ds-temizle {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-yazi-2);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0 6px;
}

.ds-temizle:hover { color: var(--ds-marka-murekkep); }

.ds-sonuc {
    font-size: 12.5px;
    color: var(--ds-yazi-2);
}

/* -----------------------------------------------------------------------------
   KART IZGARASI (etap ve blok kartlari)
   ----------------------------------------------------------------------------- */

.ds-kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px;
}

.ds-kart {
    display: block;
    background: var(--ds-kart);
    border: 1px solid var(--ds-cizgi);
    border-radius: 14px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, border-color .12s ease;
}

a.ds-kart:hover {
    transform: translateY(-1px);
    border-color: var(--ds-marka);
    color: inherit;
}

.ds-kart.ds-kapali {
    opacity: .55;
    cursor: not-allowed;
}

.ds-kart-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ds-kart-ad {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ds-yazi);
}

.ds-kart-alt {
    font-size: 12px;
    color: var(--ds-yazi-2);
    margin-top: 3px;
}

.ds-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--ds-zemin);
    color: var(--ds-yazi-2);
    white-space: nowrap;
}

.ds-rozet.ds-kiz { background: #FBEDF3; color: #8C2F5C; }
.ds-rozet.ds-erkek { background: #EAF0FB; color: #2B4E8C; }
.ds-rozet.ds-karma { background: #F1EEFA; color: #4B3D8F; }

html[data-theme-mode="dark"] .ds-rozet.ds-kiz { background: #341C28; color: #E79CC1; }
html[data-theme-mode="dark"] .ds-rozet.ds-erkek { background: #1B2434; color: #93B4E8; }
html[data-theme-mode="dark"] .ds-rozet.ds-karma { background: #262238; color: #B3A6E8; }

.ds-cubuk {
    height: 6px;
    border-radius: 99px;
    background: var(--ds-cizgi-2);
    overflow: hidden;
    flex: 1;
}

.ds-cubuk span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ds-marka), var(--ds-vurgu));
}

.ds-cubuk-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.ds-oran {
    font-size: 12px;
    color: var(--ds-yazi-2);
    width: 38px;
    text-align: right;
    flex: none;
}

.ds-cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ds-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 99px;
}

.ds-mini.ds-bos { background: var(--ds-bos-zemin); color: var(--ds-bos-koyu); }
.ds-mini.ds-kismi { background: var(--ds-kismi-zemin); color: var(--ds-kismi-koyu); }
.ds-mini.ds-dolu { background: var(--ds-dolu-zemin); color: var(--ds-dolu-koyu); }

/* -----------------------------------------------------------------------------
   BLOK AKORDEONU + KAT PLANI
   ----------------------------------------------------------------------------- */

.ds-blok {
    background: var(--ds-kart);
    border: 1px solid var(--ds-cizgi);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
}

.ds-blok-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.ds-blok-basi:focus-visible {
    outline: 2px solid var(--ds-marka);
    outline-offset: -2px;
}

.ds-ok {
    font-size: 12px;
    color: var(--ds-yazi-2);
    width: 12px;
    flex: none;
    transition: transform .15s ease;
}

.ds-blok.ds-kapali .ds-ok { transform: rotate(-90deg); }
.ds-blok.ds-kapali .ds-blok-govde { display: none; }

.ds-blok-govde {
    padding: 4px 16px 16px;
    border-top: 1px solid var(--ds-cizgi-2);
}

.ds-kat {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--ds-cizgi-2);
}

.ds-kat:last-child { border-bottom: 0; }

.ds-kat-etiket {
    width: 62px;
    flex: none;
    padding-top: 2px;
}

.ds-kat-no {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ds-yazi);
    line-height: 1.1;
}

.ds-kat-alt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--ds-yazi-3);
}

.ds-kat-uygun {
    font-size: 11.5px;
    color: var(--ds-yazi-2);
    margin-top: 6px;
}

.ds-kat-izgara {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
}

.ds-kat-izgara[data-sutun="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-kat-izgara[data-sutun="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* -----------------------------------------------------------------------------
   KAT PLANI HUCRELERI
   ----------------------------------------------------------------------------- */

.ds-hucre {
    display: flex;
    flex-direction: column;
    min-height: 62px;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1.5px solid var(--ds-cizgi);
    background: var(--ds-kart);
    color: var(--ds-yazi);
    text-decoration: none;
    transition: transform .12s ease;
}

.ds-hucre[data-genislik="2"] { grid-column: span 2; }

a.ds-hucre:hover {
    transform: translateY(-1px);
    color: inherit;
}

.ds-hucre.ds-bos { background: var(--ds-bos-zemin); border-color: var(--ds-bos-cizgi); color: var(--ds-bos-koyu); }
.ds-hucre.ds-kismi { background: var(--ds-kismi-zemin); border-color: var(--ds-kismi-cizgi); color: var(--ds-kismi-koyu); }
.ds-hucre.ds-dolu { background: var(--ds-dolu-zemin); border-color: var(--ds-dolu-cizgi); color: var(--ds-dolu-koyu); }

.ds-hucre.ds-secili {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ds-hucre.ds-sonuk { opacity: .26; }

.ds-hucre-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.ds-hucre-no {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.ds-hucre-oran {
    font-size: 9.5px;
    font-weight: 600;
    opacity: .72;
}

.ds-hucre-alt {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    opacity: .78;
    margin-top: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ds-yataklar {
    display: flex;
    gap: 3px;
    margin-top: auto;
    padding-top: 4px;
}

.ds-yatak-serit {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: var(--ds-bos-yatak);
}

.ds-hucre.ds-bos .ds-yatak-serit.ds-var { background: var(--ds-bos-nokta); }
.ds-hucre.ds-kismi .ds-yatak-serit.ds-var { background: var(--ds-kismi-nokta); }
.ds-hucre.ds-dolu .ds-yatak-serit.ds-var { background: var(--ds-dolu-nokta); }

.ds-cekirdek,
.ds-koridor {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ds-yazi-3);
    border-radius: 9px;
}

.ds-cekirdek {
    min-height: 62px;
    border: 1.5px solid var(--ds-cizgi);
    background: repeating-linear-gradient(45deg, var(--ds-zemin) 0 6px, var(--ds-cizgi-2) 6px 12px);
}

.ds-koridor {
    grid-column: 1 / -1;
    min-height: 20px;
    letter-spacing: .28em;
    background: repeating-linear-gradient(90deg, var(--ds-zemin) 0 16px, var(--ds-cizgi-2) 16px 17px);
}

/* -----------------------------------------------------------------------------
   ETAP / BLOK KUMELERI (Tum Daireler ekrani)
   ----------------------------------------------------------------------------- */

.ds-grup {
    margin-bottom: 22px;
}

.ds-grup-basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ds-cizgi);
}

.ds-grup-ad {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ds-yazi);
}

.ds-grup-sayac,
.ds-kume-sayac {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--ds-zemin);
    color: var(--ds-yazi-2);
    white-space: nowrap;
}

.ds-kume .ds-kat-izgara {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

/* Arama kutusu suzgec cubugunda dar kalmasin */
.ds-alan {
    min-width: 170px;
}

/* -----------------------------------------------------------------------------
   LISTE GORUNUMU
   ----------------------------------------------------------------------------- */

.ds-liste {
    background: var(--ds-kart);
    border: 1px solid var(--ds-cizgi);
    border-radius: 16px;
    overflow: hidden;
}

.ds-liste-basi,
.ds-liste-satir {
    display: grid;
    grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr);
    gap: 10px;
    padding: 11px 15px;
    align-items: center;
}

.ds-liste-basi {
    background: var(--ds-zemin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--ds-yazi-2);
    border-bottom: 1px solid var(--ds-cizgi);
}

.ds-liste-satir {
    border-bottom: 1px solid var(--ds-cizgi-2);
    color: inherit;
    text-decoration: none;
}

a.ds-liste-satir:hover { background: var(--ds-zemin); color: inherit; }

.ds-liste-satir.ds-secili { background: var(--ds-zemin); }

.ds-liste-no {
    font-size: 14px;
    font-weight: 700;
}

.ds-liste-hucre {
    font-size: 12.5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ds-yazi-2);
}

.ds-durum-etiket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 99px;
    white-space: nowrap;
}

.ds-durum-etiket.ds-bos { background: var(--ds-bos-zemin); color: var(--ds-bos-koyu); }
.ds-durum-etiket.ds-kismi { background: var(--ds-kismi-zemin); color: var(--ds-kismi-koyu); }
.ds-durum-etiket.ds-dolu { background: var(--ds-dolu-zemin); color: var(--ds-dolu-koyu); }

/* -----------------------------------------------------------------------------
   ODA KARTLARI (daire icindeki oda secimi)
   ----------------------------------------------------------------------------- */

.ds-odalar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
}

.ds-oda {
    position: relative;
    display: block;
    border: 1.5px solid var(--ds-cizgi);
    border-radius: 14px;
    padding: 14px;
    background: var(--ds-kart);
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease;
}

a.ds-oda:hover {
    transform: translateY(-1px);
    border-color: var(--ds-marka);
    color: inherit;
}

.ds-oda.ds-bos { background: var(--ds-bos-zemin); border-color: var(--ds-bos-cizgi); }
.ds-oda.ds-dolu { background: var(--ds-dolu-zemin); border-color: var(--ds-dolu-cizgi); }

.ds-oda.ds-pasif {
    opacity: .62;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, var(--ds-zemin) 0 7px, var(--ds-cizgi-2) 7px 14px);
}

.ds-oda-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.ds-oda-no {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ds-yazi);
}

.ds-oda-no small {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ds-yazi-3);
}

/* Kart bir <a> olabildigi icin dt/dd degil span kullaniliyor: <a> icinde
   blok seviyesi liste ogeleri gecerli HTML degil. */
.ds-oda-sar {
    display: flex;
    flex-direction: column;
}

.ds-oda-sar .ds-oda {
    flex: 1;
}

.ds-oda-bilgi {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    font-size: 12.5px;
}

.ds-oda-etiket {
    font-weight: 600;
    color: var(--ds-yazi-2);
}

.ds-oda-deger {
    color: var(--ds-yazi);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-oda-eylem {
    display: block;
    margin-top: 12px;
    height: 38px;
    border-radius: 10px;
    background: var(--ds-marka);
    color: var(--ds-marka-murekkep);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
}

/* Gecmis donem kaydi: gorunur ama one cikmaz. */
.ds-oda.ds-gecmis {
    opacity: .68;
    border-style: dashed;
}

.ds-oda-not {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-yazi-2);
    text-align: center;
}

/* -----------------------------------------------------------------------------
   SAG PANEL
   ----------------------------------------------------------------------------- */

.ds-govde {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.ds-sol {
    flex: 1;
    min-width: 0;
}

.ds-panel {
    width: 340px;
    flex: none;
    background: var(--ds-kart);
    border: 1px solid var(--ds-cizgi);
    border-radius: 16px;
    padding: 18px;
    position: sticky;
    top: 84px;
}

.ds-panel h2 {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ds-yazi);
}

.ds-panel-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ds-panel-yer {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ds-yazi-3);
}

.ds-panel-tip {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-yazi-2);
    line-height: 1.45;
}

.ds-kunye {
    margin-top: 14px;
    border: 1px solid var(--ds-cizgi);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ds-cizgi);
}

.ds-kunye > div {
    background: var(--ds-kart);
    padding: 10px 12px;
}

.ds-kunye dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ds-yazi-3);
    margin: 0;
}

.ds-kunye dd {
    font-size: 14px;
    font-weight: 600;
    margin: 2px 0 0;
    color: var(--ds-yazi);
}

.ds-panel-baslik {
    margin-top: 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ds-yazi-3);
}

.ds-yatak-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 9px;
}

.ds-yatak-satir {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--ds-cizgi);
    border-radius: 12px;
}

.ds-yatak-satir.ds-bos { background: var(--ds-bos-zemin); border-color: var(--ds-bos-cizgi); }

.ds-yatak-kare {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex: none;
    background: var(--ds-zemin);
    color: var(--ds-yazi-2);
}

.ds-yatak-satir.ds-bos .ds-yatak-kare { background: #D8EEE1; color: var(--ds-bos-koyu); }

.ds-yatak-ad {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ds-yazi);
}

.ds-yatak-meta {
    font-size: 11.5px;
    color: var(--ds-yazi-2);
}

.ds-yatak-etiket {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
}

.ds-fiyat {
    margin-top: 18px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--ds-marka);
    color: var(--ds-marka-murekkep);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ds-fiyat-baslik {
    font-size: 11px;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .78;
}

.ds-fiyat-deger {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ds-eylem {
    display: block;
    margin-top: 12px;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--ds-marka);
    color: var(--ds-marka-murekkep);
    font-size: 14px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.ds-eylem:hover { filter: brightness(1.04); color: var(--ds-marka-murekkep); }

.ds-eylem.ds-pasif {
    background: var(--ds-cizgi);
    color: var(--ds-yazi-2);
    cursor: not-allowed;
    pointer-events: none;
}

.ds-panel-bos {
    text-align: center;
    color: var(--ds-yazi-2);
    font-size: 13px;
    padding: 26px 8px;
}

/* -----------------------------------------------------------------------------
   DUYARLILIK
   ----------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .ds-govde { flex-direction: column; }

    .ds-panel {
        width: 100%;
        position: static;
    }
}

@media (max-width: 767.98px) {
    .ds-kat { flex-direction: column; gap: 8px; }
    .ds-kat-etiket { width: auto; display: flex; align-items: baseline; gap: 8px; }
    .ds-kat-uygun { margin-top: 0; }
    .ds-kat-izgara[data-sutun="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-kat-izgara[data-sutun="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-koridor, .ds-cekirdek { display: none; }
    .ds-liste-basi, .ds-liste-satir { grid-template-columns: 56px 1fr 1fr; }
    .ds-liste-basi > :nth-child(n+4), .ds-liste-satir > :nth-child(n+4) { display: none; }
}