/* ═══════════════════════════════════════════════════════════
   PUREMEA — Marka CSS Değişkenleri & Font Tanımları
   JSF resources sistemi:  yerine
   relative path kullanılır — JSF, library="css" ile serve ettiğinde
   ../fonts/ geçerli çalışır.
   ═══════════════════════════════════════════════════════════ */

/* ── SURGENA FONT AİLESİ ── */
@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-SemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Surgena';
    src: url('/beautyshop/resources/fonts/Surgena-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ── CSS DEĞIŞKENLERI ── */
:root {

    /* ANA MARKA RENKLERİ */
    --pm-primary:          #F57C00;
    --pm-primary-light:    #FF9A3C;
    --pm-primary-dark:     #C96500;
    --pm-primary-soft:     #FFF0E0;

    /* ÜRÜN / SEZON VARYASYON RENKLERİ */
    --pm-rose:             #D4708A;
    --pm-rose-soft:        #FAF0F3;
    --pm-purple:           #8B6BB1;
    --pm-purple-soft:      #F3EFFA;
    --pm-teal:             #6BAED6;
    --pm-teal-soft:        #EEF7FC;
    --pm-terracotta:       #C97D7D;
    --pm-terracotta-soft:  #FAF0F0;
    --pm-sage:             #B5D484;
    --pm-sage-soft:        #F4FAF0;
    --pm-sky:              #87C5D6;
    --pm-sky-soft:         #EEF7FA;
    --pm-mauve:            #C48B9F;
    --pm-mauve-soft:       #FAF2F5;

    /* ARKAPLAN & YÜZEY */
    --pm-bg:               #FDFAF7;
    --pm-bg-secondary:     #F9F4EF;
    --pm-bg-tertiary:      #F2EBE3;
    --pm-white:            #FFFFFF;

    /* METİN */
    --pm-text-primary:     #1A1A1A;
    --pm-text-secondary:   #4A4A4A;
    --pm-text-muted:       #8A8A8A;
    --pm-text-light:       #FFFFFF;

    /* SINIR */
    --pm-border:           #E8E0D8;
    --pm-border-dark:      #D4C8BC;

    /* DURUM */
    --pm-success:          #5BA85A;
    --pm-success-soft:     #EEF7EE;
    --pm-warning:          #E8A020;
    --pm-warning-soft:     #FEF8EC;
    --pm-error:            #D94F4F;
    --pm-error-soft:       #FDEEEE;
    --pm-info:             #4A90D9;
    --pm-info-soft:        #EEF5FD;

    /* FONTLAR */
    --pm-font-brand:       'Surgena', Georgia, serif;
    --pm-font-body:        'Surgena', Georgia, serif;
    --pm-font-mono:        'Courier New', monospace;

    /* FONT BOYUTLARI */
    --pm-text-xs:          0.75rem;
    --pm-text-sm:          0.875rem;
    --pm-text-base:        1rem;
    --pm-text-lg:          1.125rem;
    --pm-text-xl:          1.25rem;
    --pm-text-2xl:         1.5rem;
    --pm-text-3xl:         1.875rem;
    --pm-text-4xl:         2.25rem;
    --pm-text-5xl:         3rem;

    /* SPACING */
    --pm-radius-sm:        6px;
    --pm-radius:           12px;
    --pm-radius-lg:        20px;
    --pm-radius-xl:        32px;
    --pm-radius-full:      9999px;

    --pm-shadow-sm:        0 1px 3px rgba(245, 124, 0, 0.08);
    --pm-shadow:           0 4px 16px rgba(245, 124, 0, 0.12);
    --pm-shadow-lg:        0 8px 32px rgba(245, 124, 0, 0.16);
    --pm-shadow-card:      0 2px 12px rgba(0, 0, 0, 0.06);

    --pm-transition:       all 0.25s ease;
    --pm-transition-slow:  all 0.4s ease;

    --pm-container:        1280px;
    --pm-container-sm:     960px;
    --pm-header-height:    72px;
}

/* ── GLOBAL RESET ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--pm-font-body);
    font-size: var(--pm-text-base);
    line-height: 1.7;
    color: var(--pm-text-secondary);
    background-color: var(--pm-bg);
    -webkit-font-smoothing: antialiased;
}

/* ── PrimeFaces RESET — Tema "none" olsa bile bazı inline stiller kalır ── */
.ui-widget,
.ui-widget *,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--pm-font-body) !important;
    font-size: var(--pm-text-base) !important;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right {
    border-radius: var(--pm-radius) !important;
}

/* PrimeFaces messages override */
.ui-messages,
.ui-messages-error,
.ui-messages-info,
.ui-messages-warn {
    font-family: var(--pm-font-body) !important;
    border-radius: var(--pm-radius) !important;
}

/* ── TİPOGRAFİ ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--pm-font-brand);
    color: var(--pm-text-primary);
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: var(--pm-text-4xl); }
h2 { font-size: var(--pm-text-3xl); }
h3 { font-size: var(--pm-text-2xl); }
h4 { font-size: var(--pm-text-xl); }
h5 { font-size: var(--pm-text-lg); }
h6 { font-size: var(--pm-text-base); }

p { margin-bottom: 1rem; }

a {
    color: var(--pm-primary);
    text-decoration: none;
    transition: var(--pm-transition);
}

a:hover { color: var(--pm-primary-dark); }

/* ── BUTONLAR ── */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--pm-radius-full);
    font-family: var(--pm-font-brand);
    font-size: var(--pm-text-sm);
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--pm-transition);
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
}

.pm-btn-primary {
    background: var(--pm-primary) !important;
    color: var(--pm-white) !important;
    box-shadow: var(--pm-shadow);
    border-color: var(--pm-primary) !important;
}

.pm-btn-primary:hover {
    background: var(--pm-primary-dark) !important;
    color: var(--pm-white) !important;
    box-shadow: var(--pm-shadow-lg);
    transform: translateY(-1px);
}

.pm-btn-outline {
    background: transparent !important;
    color: var(--pm-primary) !important;
    border-color: var(--pm-primary) !important;
}

.pm-btn-outline:hover {
    background: var(--pm-primary) !important;
    color: var(--pm-white) !important;
}

.pm-btn-ghost {
    background: var(--pm-primary-soft) !important;
    color: var(--pm-primary-dark) !important;
    border-color: transparent !important;
}

.pm-btn-ghost:hover {
    background: var(--pm-primary) !important;
    color: var(--pm-white) !important;
}

.pm-btn-sm { padding: 8px 20px; font-size: var(--pm-text-xs); }
.pm-btn-lg { padding: 16px 40px; font-size: var(--pm-text-base); }

/* JSF commandButton override */
input[type="submit"].pm-btn,
button.pm-btn {
    appearance: none;
    -webkit-appearance: none;
}

/* ── KARTLAR ── */
.pm-card {
    background: var(--pm-white);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-card);
    border: 1px solid var(--pm-border);
    overflow: hidden;
    transition: var(--pm-transition);
}

.pm-card:hover {
    box-shadow: var(--pm-shadow);
    transform: translateY(-2px);
}

/* ── LOGO ── */
.pm-logo {
    font-family: var(--pm-font-brand);
    font-weight: 800;
    font-size: var(--pm-text-2xl);
    color: var(--pm-primary);
    letter-spacing: -0.5px;
    text-decoration: none;
}

.pm-logo:hover { color: var(--pm-primary-dark); }

/* ── BADGE ── */
.pm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--pm-radius-full);
    font-size: var(--pm-text-xs);
    font-weight: 700;
    font-family: var(--pm-font-brand);
}

.pm-badge-primary  { background: var(--pm-primary-soft);  color: var(--pm-primary-dark); }
.pm-badge-success  { background: var(--pm-success-soft);  color: var(--pm-success); }
.pm-badge-warning  { background: var(--pm-warning-soft);  color: var(--pm-warning); }
.pm-badge-error    { background: var(--pm-error-soft);    color: var(--pm-error); }
.pm-badge-new      { background: var(--pm-primary);       color: var(--pm-white); }

/* ── CONTAINER ── */
.pm-container {
    width: 100%;
    max-width: var(--pm-container);
    margin: 0 auto;
    padding: 0 24px;
}

.pm-container-sm {
    max-width: var(--pm-container-sm);
}

/* ── SECTION BAŞLIKLARI ── */
.pm-section-title {
    font-family: var(--pm-font-brand);
    font-size: var(--pm-text-3xl);
    font-weight: 800;
    color: var(--pm-text-primary);
    margin-bottom: 8px;
}

.pm-section-title em {
    color: var(--pm-primary);
    font-style: italic;
}

.pm-section-subtitle {
    font-size: var(--pm-text-base);
    color: var(--pm-text-muted);
    margin-bottom: 48px;
}

/* ── FORM ELEMENTLERİ ── */
.pm-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius);
    font-family: var(--pm-font-body);
    font-size: var(--pm-text-base);
    color: var(--pm-text-primary);
    background: var(--pm-white);
    transition: var(--pm-transition);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.pm-input:focus {
    border-color: var(--pm-primary);
    box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.12);
}

.pm-input::placeholder {
    color: var(--pm-text-muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    h1 { font-size: var(--pm-text-3xl); }
    h2 { font-size: var(--pm-text-2xl); }
    h3 { font-size: var(--pm-text-xl); }
    .pm-container { padding: 0 16px; }
    .pm-btn-lg { padding: 14px 28px; }
}

@media (max-width: 480px) {
    h1 { font-size: var(--pm-text-2xl); }
    .pm-section-title { font-size: var(--pm-text-2xl); }
}