/*
 * Proje: ACIZANE Portal
 * Modül: HDS
 * Dosya: themes/default/assets/css/hds/components/part/base.css
 * Açıklama: Part (yerleşim parçası örneği kapsayıcısı): çocukları alt alta dizer; mobil davranış sınıfları
 *           (compact · strip · hide); kart ızgarası görünümü (item_grid). Çocuğun görünümü kendi bileşeninin dosyasındadır.
 * Sürüm: 1.1.0
 * Oluşturuldu: 03.11.2026
 * Güncellendi: 03.11.2026 · köşe resmi kırpılmaz (::before, contain) · görünüm kancaları: zemin rengi (ton / serbest), arka plan resmi + yerleşim, iç düzen, iç boşluk, aralık (--hds-part-*)
 */

/* ---> Part */
.hds-part {
    display: flex;
    flex-direction: column;
    gap: var(--hds-layout-gap, 1rem);
    min-width: 0;
}

/* Kart ızgarası (Şerit öğeleri): çocuklar sığdığı kadar sütunda yan yana. */
.hds-part--view-item_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* Hero görünümü: Hero parçanın kalan yüksekliğini doldurur (yanındaki hücre uzunsa boşluk kalmaz). */
.hds-part--view-hero > .hds-hero {
    flex: 1 1 auto;
}

/* ---> Part · görünüm kancaları (varsayılan boş: hiçbir şey değişmez) */
/* Zemin: ton hazır renk, serbest renk satır içi --hds-part-bg-color ile gelir (satır içi tondan üstündür). Kart zemini parçaya uyar. */
.hds-part--surface {
    --hds-card-bg: transparent;
    --hds-card-shadow: none;
    --hds-card-color: var(--hds-part-color, #1d2939);
    padding: var(--hds-part-pad, 1rem);
    border-radius: var(--hds-part-radius, 1rem);
    background-color: var(--hds-part-bg-color, transparent);
    color: var(--hds-part-color, inherit);
}

.hds-part--tone-cream { --hds-part-bg-color: #fbf6ea; }
.hds-part--tone-gold { --hds-part-bg-color: #f3e3b3; }
.hds-part--tone-neutral { --hds-part-bg-color: #f4f5f7; }
.hds-part--tone-dark { --hds-part-bg-color: #1f2630; --hds-card-border-color: #3b4656; }

/* Koyu zemin (koyu ton ya da koyu serbest renk → Renderer `ink-light` ekler): açık yazı; yumuşak kartın yazı kutusu da zemine uyar (beyaz değil, hafif açık tabaka). */
.hds-part--tone-dark, .hds-part--ink-light {
    --hds-part-color: #f4f5f7;
    --hds-card-color: #f4f5f7;
    --hds-card-soft-ink-muted: #c3cad4;
    --hds-card-soft-accent: #9fd3e0;
    --hds-card-soft-glass: rgb(255 255 255 / 0.1);
    --hds-card-soft-glass-border: rgb(255 255 255 / 0.2);
}

/* Arka plan resmi: cover kutunun arkasını kaplar; right / left köşeye oturur ve hiç kırpılmaz (kutunun yüksekliğine sığar, genişliği %38'i geçmez). */
.hds-part--has-image {
    background-image: var(--hds-part-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hds-part--has-image.hds-part--place-right, .hds-part--has-image.hds-part--place-left { background-image: none; position: relative; isolation: isolate; }
.hds-part--has-image.hds-part--place-right { padding-right: 42%; }
.hds-part--has-image.hds-part--place-left { padding-left: 42%; }
.hds-part--has-image.hds-part--place-right::before, .hds-part--has-image.hds-part--place-left::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--hds-part-pad, 1rem);
    bottom: var(--hds-part-pad, 1rem);
    width: 38%;
    background: var(--hds-part-bg-image) no-repeat center / contain;
    pointer-events: none;
}
.hds-part--has-image.hds-part--place-right::before { right: var(--hds-part-pad, 1rem); background-position: right center; }
.hds-part--has-image.hds-part--place-left::before { left: var(--hds-part-pad, 1rem); background-position: left center; }

/* Köşe süsü: tek desen (sol üst köşeye göre çizilmiş) seçilen köşelere çevrilerek konur; içeriğin arkasında kalır, kırpılmaz.
   Boyu csize ile (varsayılan orta). Arka plan resmi (cover) ile birlikte kullanılabilir. */
.hds-part--has-corners { position: relative; isolation: isolate; --hds-part-corner-size: 6rem; }
.hds-part--csize-sm { --hds-part-corner-size: 4rem; }
.hds-part--csize-md { --hds-part-corner-size: 6rem; }
.hds-part--csize-lg { --hds-part-corner-size: 9rem; }
.hds-part__corner {
    position: absolute;
    z-index: -1;
    width: var(--hds-part-corner-size);
    aspect-ratio: 1;
    background: var(--hds-part-corner) no-repeat var(--hds-part-corner-pos, left top) / contain;
    pointer-events: none;
}
.hds-part__corner--tl { top: 0; left: 0; }
.hds-part__corner--tr { top: 0; right: 0; }
.hds-part__corner--bl { bottom: 0; left: 0; }
.hds-part__corner--br { bottom: 0; right: 0; }
.hds-part__corner--flip-x { transform: scaleX(-1); }
.hds-part__corner--flip-y { transform: scaleY(-1); }
.hds-part__corner--flip-x.hds-part__corner--flip-y { transform: scale(-1, -1); }
/* Desenin çizildiği köşe: boş sol üst; kare olmayan desen o köşeye yaslanır. */
.hds-part--cfrom-tr { --hds-part-corner-pos: right top; }
.hds-part--cfrom-bl { --hds-part-corner-pos: left bottom; }
.hds-part--cfrom-br { --hds-part-corner-pos: right bottom; }

/* Köşe payı: yalnız süsün DÜŞTÜĞÜ şeritler içeriden başlar (üstte başlık bloğu, altta "Oku" satırı); ortadaki görsel ve metin tam genişlik kalır.
   Kart kancaları: --hds-card-header-inset / --hds-card-extras-inset (yan boşluk), --hds-card-header-min / --hds-card-extras-min (şerit yüksekliği = süs boyu).
   Hesap: süs kutunun kenarında, kart parça iç boşluğu kadar içeride başlar; bu yüzden süs boyundan parça iç boşluğu düşülür. */
.hds-part--has-corners {
    --hds-card-header-inset: calc(var(--hds-part-corner-size) + 0.25rem - var(--hds-part-pad, 1rem));
    --hds-card-extras-inset: calc(var(--hds-part-corner-size) + 0.25rem - var(--hds-part-pad, 1rem));
    --hds-card-header-min: calc(var(--hds-part-corner-size) - var(--hds-part-pad, 1rem));
    --hds-card-extras-min: calc(var(--hds-part-corner-size) - var(--hds-part-pad, 1rem));
}

/* Başlık hizası: kartın kategori etiketi + başlığı (üstteki başlık bloğu) */
.hds-part--talign-left .hds-card__header, .hds-part--talign-left .hds-card__header-copy { text-align: left; }
.hds-part--talign-center .hds-card__header, .hds-part--talign-center .hds-card__header-copy { text-align: center; }
.hds-part--talign-right .hds-card__header, .hds-part--talign-right .hds-card__header-copy { text-align: right; }

/* Yumuşak kartta başlık hapı: hizaya göre sola / ortaya / sağa oturur. */
.hds-part--talign-left .hds-card.soft .hds-card__header { align-items: flex-start; }
.hds-part--talign-center .hds-card.soft .hds-card__header { align-items: center; }
.hds-part--talign-right .hds-card.soft .hds-card__header { align-items: flex-end; }

/* Kategori adı satırı ayrı hizalanır (ealign); boşsa başlık hizasını (talign) izler. */
.hds-part--ealign-left .hds-card__eyebrow { text-align: left; }
.hds-part--ealign-center .hds-card__eyebrow { text-align: center; }
.hds-part--ealign-right .hds-card__eyebrow { text-align: right; }

/* İç boşluk ve aralık */
.hds-part--pad-sm { --hds-part-pad: 0.5rem; padding: var(--hds-part-pad); }
.hds-part--pad-md { --hds-part-pad: 1rem; padding: var(--hds-part-pad); }
.hds-part--pad-lg { --hds-part-pad: 2rem; padding: var(--hds-part-pad); }
.hds-part--gap-sm { gap: 0.25rem; }
.hds-part--gap-lg { gap: 2rem; }

/* Kapak oranı: içindeki Card kapakları (soft dahil) bu oranı alır */
.hds-part--cover-16-9 { --hds-card-cover-ratio: 16 / 9; }
.hds-part--cover-4-3 { --hds-card-cover-ratio: 4 / 3; }
.hds-part--cover-1-1 { --hds-card-cover-ratio: 1 / 1; }
.hds-part--cover-2-1 { --hds-card-cover-ratio: 2 / 1; }
.hds-part--cover-4-1 { --hds-card-cover-ratio: 4 / 1; }

/* İç düzen kalıpları */
.hds-part--inner-row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.hds-part--inner-row > * { flex: 1 1 12rem; min-width: 0; }
.hds-part--inner-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hds-part--inner-center { align-items: center; text-align: center; }
/* <--- Part · görünüm kancaları */

@media (max-width: 40rem) {
    /* Köşe resmi dar ekranda kutunun arkasına yayılır; iki sütun tek sütuna iner. */
    .hds-part--has-image.hds-part--place-right, .hds-part--has-image.hds-part--place-left { background-image: var(--hds-part-bg-image); background-size: cover; background-position: center; padding-left: var(--hds-part-pad, 1rem); padding-right: var(--hds-part-pad, 1rem); }
    .hds-part--has-image.hds-part--place-right::before, .hds-part--has-image.hds-part--place-left::before { display: none; }
    .hds-part--inner-cols2 { grid-template-columns: minmax(0, 1fr); }

    .hds-part--mobile-hide { display: none; }

    /* Kompakt: kapak ve özet gizlenir, başlık kalır. */
    .hds-part--mobile-compact .hds-card__cover,
    .hds-part--mobile-compact .hds-card__content { display: none; }

    /* Şeride dön: çocuklar yan yana kayar. */
    .hds-part--mobile-strip {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .hds-part--mobile-strip > * {
        flex: 0 0 min(80%, 18rem);
        scroll-snap-align: start;
    }
}
/* <--- Part */