/* ============================================================================
   DÜNYA MÜZİK — DESIGN SYSTEM (Utility Layer)
   ----------------------------------------------------------------------------
   Tüm block'lar ÖNCE bu utility'leri kullanır, sonra gerekirse kendi block-specific
   küçük CSS'ini yazar. Bu dosya custom.css'ten SONRA yüklenir (enqueue.php).

   Belge: docs/DESIGN-SYSTEM.md
   ============================================================================ */


/* ==========================================================================
   1. SECTION — bg varyantları + standart vertical padding
   ========================================================================== */
.dm-section {
    position: relative;
    padding: var(--dm-section-py) 0;
    overflow: hidden;
}
.dm-section--sm { padding: var(--dm-section-py-sm) 0; }
.dm-section--lg { padding: var(--dm-section-py-lg) 0; }

.dm-section--white   { background: var(--dm-white); color: var(--dm-dark); }
.dm-section--light   { background: var(--dm-light); color: var(--dm-dark); }
.dm-section--dark    { background: var(--dm-dark); color: var(--dm-white); }
.dm-section--primary { background: var(--dm-primary); color: var(--dm-dark); }

/* Dark section default text tonları */
.dm-section--dark h1, .dm-section--dark h2, .dm-section--dark h3, .dm-section--dark h4 { color: var(--dm-white); }
.dm-section--dark p { color: rgba(255, 255, 255, 0.75); }


/* ==========================================================================
   2. CONTAINER — 1400px + standard padding
   ========================================================================== */
.dm-container,
.dm-wrap {
    position: relative;
    z-index: var(--dm-z-base);
    max-width: var(--dm-container-max);
    margin: 0 auto;
    padding: 0 var(--dm-container-px);
}
.dm-wrap--narrow { max-width: var(--dm-content-max); }
.dm-wrap--wide   { max-width: 1600px; }


/* ==========================================================================
   3. HEADINGS — hero / section / card tipografi scale
   ========================================================================== */
.dm-heading {
    font-family: var(--dm-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: var(--dm-lh-tight);
    color: var(--dm-dark);
    margin: 0;
}
.dm-heading--hero    { font-size: var(--dm-fs-hero); }
.dm-heading--display { font-size: var(--dm-fs-display); }
.dm-heading--xlarge  { font-size: var(--dm-fs-xlarge); }
.dm-heading--large   { font-size: var(--dm-fs-large); line-height: var(--dm-lh-snug); }
.dm-heading--medium  { font-size: var(--dm-fs-medium); font-weight: 600; }

.dm-section--dark    .dm-heading,
.dm-section--primary .dm-heading--onPrimary { color: var(--dm-dark); }
.dm-section--dark    .dm-heading            { color: var(--dm-white); }


/* ==========================================================================
   4. KICKER — section üst küçük label (çizgili veya pill varyant)
   ========================================================================== */
.dm-kicker {
    display: inline-block;
    font-family: var(--dm-font-heading);
    font-size: var(--dm-fs-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dm-primary);
    margin: 0;
}

/* Çizgili kicker — sol tarafta 28px yatay çizgi */
.dm-kicker--line {
    padding-left: 40px;
    position: relative;
}
.dm-kicker--line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 2px;
    background: currentColor;
}

/* Pill kicker — yeşil outline pill */
.dm-kicker--pill {
    padding: 10px 22px;
    border: 1.5px solid var(--dm-primary);
    border-radius: var(--dm-radius-pill);
    background: rgba(var(--dm-primary-rgb), 0.08);
    color: var(--dm-dark);
    letter-spacing: 0.22em;
}


/* ==========================================================================
   5. SECTION HEADER — kicker + heading + optional subtitle üst block
   ========================================================================== */
.dm-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dm-space-3);
    margin-bottom: clamp(32px, 5vh, 64px);
    text-align: center;
}
.dm-section-header--start   { align-items: flex-start; text-align: left; }
.dm-section-header--between { align-items: flex-end; flex-direction: row; justify-content: space-between; }

.dm-section-subtitle {
    font-family: var(--dm-font-body);
    font-size: 17px;
    line-height: var(--dm-lh-relaxed);
    color: var(--dm-muted);
    max-width: 640px;
    margin: 0;
}


/* ==========================================================================
   6. CARD — 6 renk varyantı + hover davranışı
   ========================================================================== */
.dm-card {
    position: relative;
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--dm-radius-xl);
    background: var(--dm-white);
    color: var(--dm-dark);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    overflow: hidden;
}
.dm-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--dm-shadow-hover);
}

.dm-card--primary { background: var(--dm-primary); color: var(--dm-dark); }
.dm-card--orange  { background: var(--dm-accent);  color: var(--dm-dark); }
.dm-card--pink    { background: var(--dm-pink);    color: var(--dm-white); }
.dm-card--dark    { background: var(--dm-dark);    color: var(--dm-white); }
.dm-card--light   { background: var(--dm-light);   color: var(--dm-dark);  border: 1px solid var(--dm-border); }
.dm-card--outline { background: transparent;       color: currentColor;    border: 1px solid var(--dm-border); }

/* Card shadow varyantları */
.dm-card--shadow        { box-shadow: var(--dm-shadow-card); }
.dm-card--shadow-dark   { box-shadow: var(--dm-shadow-dark); }

/* Compact card */
.dm-card--compact { padding: clamp(16px, 2vw, 24px); }


/* ==========================================================================
   7. PILL / TAG / FILTER — dairesel pill butonlar
   ========================================================================== */
.dm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dm-font-heading);
    font-size: var(--dm-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: var(--dm-radius-pill);
    background: transparent;
    color: var(--dm-dark);
    border: 1.5px solid var(--dm-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.dm-pill:hover { background: rgba(var(--dm-dark-rgb), 0.08); }

.dm-pill--filled,
.dm-pill.is-active {
    background: var(--dm-dark);
    color: var(--dm-white);
    border-color: var(--dm-dark);
}
.dm-pill--primary  { background: var(--dm-primary); color: var(--dm-dark); border-color: var(--dm-primary); }
.dm-pill--outline  { background: transparent; }
.dm-pill--lg       { padding: 14px 28px; font-size: var(--dm-fs-sm); }


/* ==========================================================================
   8. BUTTON — CTA standart
   ========================================================================== */
.dm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--dm-font-heading);
    font-size: var(--dm-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--dm-radius-pill);
    cursor: pointer;
    transition: all 0.3s ease;
}
.dm-btn:hover { transform: translateY(-2px); }

.dm-btn--primary { background: var(--dm-primary); color: var(--dm-dark); }
.dm-btn--primary:hover { background: var(--dm-white); }

.dm-btn--dark    { background: var(--dm-dark); color: var(--dm-white); }
.dm-btn--dark:hover { background: #0e0e0e; color: var(--dm-primary); }

.dm-btn--ghost   { background: transparent; color: var(--dm-dark); border-color: var(--dm-dark); }
.dm-btn--ghost:hover { background: var(--dm-dark); color: var(--dm-white); }


/* ==========================================================================
   9. SOCIAL ICONS — daire outline (community, footer, about-intro)
   ========================================================================== */
.dm-social {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dm-social__link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: var(--dm-dark);
    transition: all 0.3s ease;
    text-decoration: none;
}
.dm-social__link:hover {
    background: var(--dm-dark);
    color: var(--dm-primary);
    transform: translateY(-2px);
}
.dm-social__link svg { width: 18px; height: 18px; }

.dm-social__link--lg { width: 54px; height: 54px; }
.dm-social__link--lg svg { width: 20px; height: 20px; }

.dm-section--dark .dm-social__link {
    color: var(--dm-white);
    border-color: rgba(255, 255, 255, 0.35);
}
.dm-section--dark .dm-social__link:hover {
    background: var(--dm-primary);
    color: var(--dm-dark);
    border-color: var(--dm-primary);
}


/* ==========================================================================
   10. GRID — responsive column shortcuts
   ========================================================================== */
.dm-grid {
    display: grid;
    gap: clamp(16px, 2vw, 28px);
}
.dm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dm-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dm-grid--5 { grid-template-columns: repeat(5, 1fr); }
.dm-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) {
    .dm-grid--4, .dm-grid--5, .dm-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .dm-grid--3, .dm-grid--4, .dm-grid--5, .dm-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dm-grid--2, .dm-grid--3, .dm-grid--4, .dm-grid--5, .dm-grid--6 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   11. ARROW CIRCLE — dairesel ok buton (hero nav, cta, card arrow)
   ========================================================================== */
.dm-arrow-circle {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: var(--dm-dark);
    transition: all 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
}
.dm-arrow-circle:hover {
    background: currentColor;
    transform: scale(1.05);
}
.dm-arrow-circle:hover svg { color: var(--dm-primary); }
.dm-arrow-circle--sm { width: 44px; height: 44px; }
.dm-arrow-circle--lg { width: 64px; height: 64px; }

.dm-arrow-circle--primary { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-dark); }


/* ==========================================================================
   12. DIVIDER — section separator çizgi
   ========================================================================== */
.dm-divider {
    border: none;
    border-top: 1px solid var(--dm-border);
    margin: clamp(24px, 4vh, 40px) 0;
}
.dm-section--dark .dm-divider { border-color: rgba(255, 255, 255, 0.12); }


/* ==========================================================================
   13. IMG-FRAME — rounded aspect-ratio image container
   ========================================================================== */
.dm-img-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--dm-radius-xl);
    background: var(--dm-light);
}
.dm-img-frame--sq   { aspect-ratio: 1 / 1; }
.dm-img-frame--card { aspect-ratio: 3 / 4; }
.dm-img-frame--wide { aspect-ratio: 16 / 7; }
.dm-img-frame--45   { aspect-ratio: 4 / 5; }
.dm-img-frame--34   { aspect-ratio: 3 / 4; }

.dm-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dm-img-frame--zoom:hover img { transform: scale(1.06); }

/* Alt overlay */
.dm-img-frame__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: var(--dm-white);
}


/* ==========================================================================
   14. ACCENT UTILITIES
   ========================================================================== */
.dm-text-primary   { color: var(--dm-primary) !important; }
.dm-text-accent    { color: var(--dm-accent) !important; }
.dm-text-pink      { color: var(--dm-pink) !important; }
.dm-text-muted     { color: var(--dm-muted) !important; }

.dm-bg-primary     { background: var(--dm-primary) !important; }
.dm-bg-dark        { background: var(--dm-dark) !important; }
.dm-bg-light       { background: var(--dm-light) !important; }


/* ==========================================================================
   15. A11Y & MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .dm-card,
    .dm-pill,
    .dm-btn,
    .dm-social__link,
    .dm-arrow-circle,
    .dm-img-frame img {
        transition: none !important;
    }
    .dm-card:hover,
    .dm-btn:hover,
    .dm-img-frame--zoom:hover img {
        transform: none !important;
    }
}