/* Aral Yapı - Custom styles */

[x-cloak] { display: none !important; }

html { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', system-ui, sans-serif; }

.font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* Reveal-on-scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero overlay pattern */
.hero-pattern {
    background-image:
        linear-gradient(135deg, rgba(28,25,23,.55) 0%, rgba(28,25,23,.25) 60%, rgba(28,25,23,.65) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path fill="none" stroke="%238b6f47" stroke-opacity=".08" stroke-width="1" d="M0 0h80v80H0z M0 40h80 M40 0v80"/></svg>');
}

/* Subtle grid background for sections */
.bg-grid {
    background-image:
        linear-gradient(rgba(139,111,71,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,111,71,.06) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Project card image zoom */
.project-card { overflow: hidden; }
.project-card img { transition: transform .8s ease; }
.project-card:hover img { transform: scale(1.08); }

/* Service card hover */
.service-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.service-card:hover { transform: translateY(-4px); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.6rem; border-radius: 9999px; font-weight: 500; font-size: .9rem; letter-spacing: .04em; transition: all .25s ease; }
.btn-primary { background: #1c1917; color: #f5f0eb; }
.btn-primary:hover { background: #8b6f47; }
.dark .btn-primary { background: #8b6f47; color: #fbf8f4; }
.dark .btn-primary:hover { background: #bf8f57; }

.btn-outline { border: 1px solid currentColor; }
.btn-outline:hover { background: #1c1917; color: #f5f0eb; border-color: #1c1917; }
.dark .btn-outline:hover { background: #8b6f47; border-color: #8b6f47; }

/* Decorative section heading line */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #8b6f47;
}
.section-eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: currentColor;
}

/* Image placeholder shimmer */
.img-placeholder {
    background: linear-gradient(110deg, #ebe1d6 8%, #d9c8b3 18%, #ebe1d6 33%);
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}
.dark .img-placeholder {
    background: linear-gradient(110deg, #1c1917 8%, #292524 18%, #1c1917 33%);
    background-size: 200% 100%;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Form */
.field-label { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .4rem; opacity: .8; }
.field-input, .field-textarea {
    width: 100%;
    padding: .85rem 1rem;
    background: transparent;
    border: 1px solid rgba(28,25,23,.18);
    border-radius: .65rem;
    font: inherit;
    color: inherit;
    transition: border-color .2s ease, background .2s ease;
}
.field-input:focus, .field-textarea:focus { outline: none; border-color: #8b6f47; background: rgba(255,255,255,.4); }
.dark .field-input, .dark .field-textarea { border-color: rgba(245,240,235,.16); }
.dark .field-input:focus, .dark .field-textarea:focus { background: rgba(28,25,23,.4); border-color: #bf8f57; }

/* Prose tweaks */
.prose-aral p { line-height: 1.75; }

/* Admin sidebar active */
.admin-link.active { background: rgba(139,111,71,.15); color: #8b6f47; }
.dark .admin-link.active { background: rgba(191,143,87,.15); color: #d4b07b; }

/* CTA section - refined architectural aesthetic */
.cta-grid {
    background-image:
        linear-gradient(rgba(212,176,123,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,176,123,0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center center;
}
.cta-glow {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,111,71,0.18), transparent 70%);
}
.cta-vignette {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
}