/**
 * EmlakDron kurumsal kimlik — docs/BRAND.md
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --brand-night: #22132B;
    --brand-plum: #5A2A66;
    --brand-coral: #FF5C68;
    --brand-coral-hover: #e84a56;
    --brand-ice: #F8F5FA;
    --brand-lilac: #AFA3B7;

    --brand-text: var(--brand-night);
    --brand-text-muted: var(--brand-lilac);
    --brand-surface: var(--brand-ice);
    --brand-header-bg: var(--brand-night);
    --brand-header-text: var(--brand-ice);
    --brand-cta-bg: var(--brand-coral);
    --brand-cta-text: var(--brand-night);
    --brand-border: rgba(175, 163, 183, 0.35);

    --font-display: 'Manrope', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 999px;

    --layout-max: 1240px;
    --layout-gutter: clamp(1rem, 3vw, 2rem);
}

body {
    font-family: var(--font-body);
    color: var(--brand-text);
    background: var(--brand-surface);
}

h1, h2, h3, .logo, .script-review-title, .appearance-title {
    font-family: var(--font-display);
}

.site-header {
    background: var(--brand-header-bg);
    border-bottom: none;
    margin-bottom: 2rem;
    padding-top: env(safe-area-inset-top, 0px);
}

.site-header nav a {
    color: rgba(248, 245, 250, 0.88);
}

.site-header nav a:hover {
    color: var(--brand-coral);
}

.logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--brand-ice);
}

.logo-emlak { color: var(--brand-ice); }
.logo-dron { color: var(--brand-coral); }

.credits {
    background: rgba(255, 92, 104, 0.18);
    color: var(--brand-coral);
}

/* ── Butonlar (tek sistem — tüm sayfalar) ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.25rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

button.btn {
    appearance: none;
    margin: 0;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-sm {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Primary (cta) */
.btn:not(.btn-outline):not(.btn-secondary) {
    background: var(--brand-coral);
    color: var(--brand-night);
}

.btn:not(.btn-outline):not(.btn-secondary):hover,
.btn:not(.btn-outline):not(.btn-secondary):focus-visible {
    background: var(--brand-night);
    color: var(--brand-ice);
}

.site-header .btn:not(.btn-outline):not(.btn-secondary):hover,
.site-header .btn:not(.btn-outline):not(.btn-secondary):focus-visible {
    background: var(--brand-ice);
    color: var(--brand-night);
}

/* Secondary — içe aktar vb. */
.btn-secondary {
    background: var(--brand-plum);
    color: var(--brand-ice);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--brand-coral);
    color: var(--brand-night);
    border-color: var(--brand-coral);
}

/* Outline */
.btn-outline {
    background: transparent;
    color: var(--brand-plum);
    border-color: var(--brand-plum);
}

.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--brand-plum);
    color: var(--brand-ice);
    border-color: var(--brand-plum);
}

/* Harita overlay — birincil + gölge */
.btn--map {
    box-shadow: 0 8px 24px rgba(255, 92, 104, 0.35);
    border-radius: var(--radius-md);
}

a.btn,
button.btn {
    text-decoration: none;
}

a.btn:hover,
a.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible {
    text-decoration: none;
}

.card {
    border-color: var(--brand-border);
    background: #fff;
}

.site-footer {
    color: var(--brand-text-muted);
}

a {
    color: var(--brand-plum);
}

a:hover {
    color: var(--brand-coral);
}

.site-header a.logo,
.site-header a.logo:hover {
    color: var(--brand-ice);
}

/* Skip link — keyboard first focus */
.skip-link {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    z-index: 10060;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--brand-coral);
    color: var(--brand-night);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--brand-night);
    outline-offset: 2px;
}

#main-content {
    scroll-margin-top: 1rem;
}

#main-content:focus {
    outline: none;
}

#main-content:focus-visible {
    outline: 2px solid var(--brand-coral);
    outline-offset: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}