/* Kirpik — cesur tırnak & kirpik stüdyosu: fuşya, elektrik mavisi, limon; Syne başlıklar, kalın siyah çerçeveler ve ofset gölgeler */
:root {
    --ink: #17141f; --text: #3d3847; --muted: #736d7d;
    --bg: #fffdf8; --bg-alt: #fff0f5; --line: #17141f; --card: #fff;
    --r: 22px; --r-sm: 14px; --r-lg: 30px; --btn-r: 999px;
    --shadow: 5px 5px 0 #17141f; --shadow-lg: 8px 8px 0 #17141f;
    --head: 'Syne', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; --head-w: 800; --header: 84px;
    --lime: #d9f24a; --soft: #e7e3ec;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.03em; }
h2, .h2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.025em; line-height: 1.06; }
h3, .h3 { letter-spacing: -.01em; }
.kicker { display: inline-block; padding: 5px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: .74rem; letter-spacing: .08em; margin-bottom: 14px; }
.btn { font-weight: 700; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .2s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn-accent { background: var(--primary); color: #fff; }
.btn-accent:hover { background: var(--primary); color: #fff; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-outline, .btn-soft { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover, .btn-soft:hover { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.btn-ghost { box-shadow: none; }

/* Menü */
.site-header { background: var(--bg); border-bottom: 2px solid var(--ink); }
.brand-mark { border-radius: 14px; background: var(--primary); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.brand-text strong { font-family: var(--head); font-weight: 800; font-size: 1.65rem; letter-spacing: -.03em; }
.brand-text small { color: var(--accent); letter-spacing: .12em; }
.nav-list > li > a { font-weight: 700; font-size: .92rem; border-radius: 999px; }
.nav-list > li > a.on { background: var(--lime); color: var(--ink); }
.nav-list > li > a:hover { color: var(--primary); }
.drop { border: 2px solid var(--ink); box-shadow: var(--shadow); }
.drop-ic { border-radius: 10px; background: var(--bg-alt); color: var(--primary); }
.phone-chip .ic { color: var(--primary); }
.nav-toggle { border: 2px solid var(--ink); background: var(--lime); }

/* Hero: asimetrik kolaj + yüzen rozetler */
.hero { position: relative; padding: 56px 0 80px; background: radial-gradient(600px 400px at 90% 10%, #ffd6e6, transparent 70%), radial-gradient(500px 360px at 0% 100%, #e3e6ff, transparent 70%), var(--bg); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 700; font-size: .86rem; }
.hero-eyebrow .ic { color: var(--primary); }
.hero h1 { margin-bottom: 20px; }
.hero .lead { color: var(--text); font-size: 1.1rem; }
.hero-hours { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 600; color: var(--muted); font-size: .92rem; }
.collage { position: relative; height: 560px; }
.cl { position: absolute; object-fit: cover; border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow-lg); background: var(--soft); }
.cl-1 { left: 18%; top: 0; width: 52%; height: 78%; border-radius: 200px 200px var(--r) var(--r); z-index: 1; }
.cl-2 { right: 0; top: 30px; width: 30%; height: 44%; transform: rotate(4deg); z-index: 2; }
.cl-3 { left: 0; bottom: 20px; width: 36%; height: 34%; transform: rotate(-5deg); z-index: 2; }
.cl-4 { right: 4%; bottom: 0; width: 44%; height: 34%; z-index: 3; }
.badge { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.badge b { font-family: var(--head); font-size: 1.2rem; }
.b-1 { left: 4%; top: 40px; background: var(--lime); color: var(--ink); transform: rotate(-6deg); }
.b-2 { right: -8px; top: 49%; background: var(--accent); color: #fff; }
.b-3 { left: 12%; bottom: -6px; background: #fff; color: var(--ink); transform: rotate(2deg); }

/* Kayan şerit */
.ticker { overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--primary); color: #fff; }
.tk-track { display: flex; align-items: center; gap: 26px; width: max-content; padding: 16px 0; animation: tk 38s linear infinite; }
.tk-track span { font-family: var(--head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; white-space: nowrap; }
.tk-track i { color: var(--lime); display: inline-flex; }
@keyframes tk { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } }

/* Kartlar */
.card { border: 2px solid var(--ink); box-shadow: var(--shadow); border-radius: var(--r); }
.card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.svc-card .c-media { border-bottom: 2px solid var(--ink); }
.c-body h3 { font-weight: 800; }
.c-ic { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; }
.svc-card.has-img .c-ic { background: var(--lime); }
.c-meta { background: var(--bg-alt); color: var(--ink); border-radius: 999px; }
.c-price { color: var(--primary); font-weight: 800; }
.c-more { color: var(--accent); font-weight: 800; }
.c-role { color: var(--primary); font-weight: 700; }
.c-tags li { border: 1.5px solid var(--ink); background: #fff; }
.team-card .c-media { border-bottom: 2px solid var(--ink); }
@media (min-width: 961px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card .c-date { color: var(--primary); }

/* Renk paleti */
.pal-sec { background: var(--ink); color: rgba(255, 255, 255, .78); }
.pal-in { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.pal-head h2 { color: #fff; }
.pal-head .btn { margin-top: 10px; box-shadow: 3px 3px 0 var(--lime); border-color: var(--lime); }
.pal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pal li { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; border-radius: 18px; background: #fff; color: var(--ink); border: 2px solid #fff; }
.sw { display: block; aspect-ratio: 1 / 1.15; border-radius: 60px 60px 12px 12px; border: 2px solid var(--ink); margin-bottom: 8px; }
.pal b { font-size: .92rem; line-height: 1.2; }
.pal small { font-size: .74rem; color: var(--muted); font-weight: 600; letter-spacing: .06em; }
.pal li:nth-child(even) { transform: translateY(18px); }

/* Adımlar, galeri, diğer */
.steps li { border: 2px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.st-ic { background: var(--bg-alt); color: var(--primary); border-radius: 12px; }
.st-no { color: var(--soft); }
.g-mosaic .g-item, .gallery-grid .g-item { border: 2px solid var(--ink); border-radius: var(--r); }
.g-item figcaption { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); font-weight: 700; }
.about-media img { border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); aspect-ratio: 10 / 11; object-fit: cover; }
.about-badge { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: var(--r-sm); }
.about-badge strong { font-family: var(--head); display: block; font-size: 1.6rem; line-height: 1; }
.tick-list li > span { background: var(--primary); color: #fff; border-radius: 8px; }
.quote-card { border: 2px solid var(--ink); box-shadow: var(--shadow); background: #fff; }
.quote-card:nth-child(2) { background: var(--lime); }
.q-stars { color: var(--primary); }
.faq { border: 2px solid var(--ink); border-radius: var(--r-sm); background: #fff; }
.faq summary { font-weight: 700; }
.faq[open] summary i { background: var(--primary); }
.form-card { border: 2px solid var(--ink); box-shadow: var(--shadow-lg); border-radius: var(--r-lg); }
.field input, .field select, .field textarea { border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.page-hero { background: var(--bg-alt); border-bottom: 2px solid var(--ink); }
.ph-deco { color: rgba(209, 35, 107, .14); }
.filter-pills a { border: 2px solid var(--ink); border-radius: 999px; }
.spec-box, .fact { border: 2px solid var(--ink); background: #fff; }
.cta-band { background: var(--accent); border-top: 2px solid var(--ink); }
.cta-band.has-img::before { background: linear-gradient(90deg, rgba(23, 20, 31, .9), rgba(45, 54, 201, .7)); }
.site-footer { background: var(--ink); }
.site-footer .brand-mark { box-shadow: 3px 3px 0 var(--lime); }
.float-bar { border: 2px solid var(--ink); }
.float-bar .fb-main { background: var(--primary); }

@media (max-width: 1100px) {
    .pal { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .b-2 { right: 0; }
}
@media (max-width: 960px) {
    .hero-grid, .pal-in { grid-template-columns: 1fr; gap: 44px; }
    .collage { height: 500px; max-width: 600px; }
}
@media (max-width: 640px) {
    .hero { padding: 36px 0 56px; }
    .hero-actions .btn { width: 100%; }
    .collage { height: 380px; }
    .cl-1 { left: 14%; width: 58%; }
    .badge { font-size: .76rem; padding: 7px 11px; }
    .badge b { font-size: 1rem; }
    .b-1 { left: 0; top: 16px; }
    .b-3 { left: 4%; }
    .tk-track span { font-size: 1.1rem; }
    .pal { grid-template-columns: repeat(2, 1fr); }
    .pal li:nth-child(even) { transform: none; }
}