/* Online Davetiye — panel + 4 davetiye teması. Tek dosya, build yok. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
       color: #1c1a24; background: #f6f4f1; -webkit-font-smoothing: antialiased; }
h1, h2 { line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
a { color: #6b4de6; }
.muted { color: #6f6a7d; }
.small { font-size: .875rem; }

/* ---------- üst menü ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px;
       max-width: 1040px; margin: 0 auto; padding: 16px 20px; }
.brand { font-weight: 800; letter-spacing: -.03em; font-size: 1.15rem; color: #17161c; text-decoration: none; }
.navlinks { display: flex; align-items: center; gap: 16px; font-size: .92rem; }
.navlinks a { color: #3a3548; text-decoration: none; }
.navlinks a:hover { color: #6b4de6; }
.navlinks .btn { color: #fff; }
.inline { display: inline; }
.linkbtn { background: 0; border: 0; padding: 0; font: inherit; color: #3a3548; cursor: pointer; }
.linkbtn:hover { color: #6b4de6; }
.btn-sm { padding: 7px 14px; font-size: .85rem; }

/* ---------- panel / anasayfa ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 40px 20px 80px; }
.wrap-narrow { max-width: 620px; }
.hero { padding: 24px 0 8px; }
.kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: #6b4de6; margin: 0 0 12px; font-weight: 600; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; }
.lead { font-size: 1.05rem; color: #57526a; max-width: 58ch; }

.tpl-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 32px 0; }
.tpl-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
            min-height: 170px; padding: 18px; border-radius: 14px; text-decoration: none; overflow: hidden;
            border: 1px solid rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; }
.tpl-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,15,40,.14); }
.tpl-name { font-size: 1.05rem; font-weight: 600; }
.tpl-note { font-size: .8rem; opacity: .75; }
.tpl-chip { position: absolute; top: 12px; right: 12px; font-size: .68rem; letter-spacing: .1em;
            text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.12); }
.tpl-card.t-zarif  { background: linear-gradient(160deg, #fbf6ea, #f1e3c6); color: #6a5326; }
.tpl-card.t-modern { background: #fff; color: #17161c; }
.tpl-card.t-bahce  { background: linear-gradient(160deg, #eef3ea, #d5e2d2); color: #35513b; }
.tpl-card.t-gece   { background: linear-gradient(160deg, #171a2e, #2b1f2c); color: #e9d5b8; }
.tpl-card.t-gece .tpl-chip { background: rgba(255,255,255,.16); }

/* ---------- adımlar / planlar / listeler ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 34px 0 10px; }
.step { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e8e4de;
        border-radius: 14px; padding: 16px 18px; font-size: .92rem; }
.step b { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #6b4de6; color: #fff;
          display: grid; place-items: center; font-size: .82rem; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 22px 0; }
.plan { background: #fff; border: 1px solid #e8e4de; border-radius: 18px; padding: 26px; }
.plan-pro { border-color: #cfc4f5; background: linear-gradient(180deg, #fbf9ff, #fff); }
.plan-tag { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: #8a8499; }
.plan-price { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 14px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; font-size: .93rem; }
.plan li, .ticks li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.plan li::before, .ticks li::before { content: "✓"; position: absolute; left: 0; color: #6b4de6; font-weight: 600; }
.ticks { list-style: none; padding: 0; margin: 18px 0 26px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 20px; }
.minicard { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #e8e4de;
            border-radius: 14px; padding: 18px; }
.minicard strong { font-size: 1.1rem; }
.mc-type { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: #8a8499; }
.mc-stat { font-size: .88rem; color: #6b4de6; font-weight: 600; margin-top: 4px; }
.foot { margin-top: 60px; padding-top: 20px; border-top: 1px solid #e8e4de; font-size: .88rem; }
.legal h2 { font-size: 1.05rem; margin-top: 26px; }
.legal p { font-size: .94rem; }

.card { background: #fff; border: 1px solid #e8e4de; border-radius: 16px; padding: 26px; margin: 26px 0; }
.form label { display: block; margin: 0 0 16px; font-size: .9rem; font-weight: 600; color: #3a3548; }
.form label small { display: block; font-weight: 400; color: #8a8499; margin-top: 2px; }
.form input, .form select, .form textarea {
    width: 100%; margin-top: 6px; padding: 11px 13px; font: inherit; font-weight: 400;
    border: 1px solid #d8d3cc; border-radius: 10px; background: #fdfcfb; color: inherit; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid #6b4de6; outline-offset: 1px; border-color: transparent; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

/* onay + robot kutuları; honeypot ekran dışında ama gizlenmiş değil (botlar display:none'ı atlar) */
.check { display: flex !important; align-items: flex-start; gap: 9px; font-weight: 400 !important;
         font-size: .88rem !important; line-height: 1.45; margin-bottom: 14px; }
.check input { width: auto !important; margin: 3px 0 0 !important; flex: 0 0 auto; }
/* sr-only deseni: ekran dışına taşırmadan gizler (left:-9999px mobilde yatay kayma yapıyordu) */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.errbox { background: #fdecec; border: 1px solid #f3c2c2; color: #9b2c2c; padding: 11px 14px;
          border-radius: 10px; margin: 0 0 18px; font-size: .9rem; }

/* ---------- sosyal giriş ---------- */
.oauth-box { margin: 24px 0 0; }
.oauth { display: block; text-align: center; padding: 12px 18px; margin-bottom: 10px;
         border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .95rem;
         border: 1px solid #d8d3cc; background: #fff; color: #17161c; }
.oauth:hover { background: #f7f5f2; }
.oauth-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.oauth-facebook:hover { background: #1466d2; }
.or { position: relative; text-align: center; margin: 22px 0 -6px; }
.or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e2ded8; }
.or span { position: relative; background: #f6f4f1; padding: 0 12px; font-size: .82rem; color: #8a8499; }

.btn { display: inline-block; padding: 11px 20px; border: 0; border-radius: 10px; background: #6b4de6; color: #fff;
       font: 600 .95rem/1 Inter, sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { background: #5a3ed4; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-ghost { background: transparent; color: #6b4de6; border: 1px solid #cfc4f5; }
.btn-ghost:hover { background: #f1ecff; }
.lnk { color: #6b4de6; text-decoration: underline; text-underline-offset: 3px; }

.banner { background: #eafaf0; border: 1px solid #b7e6c9; color: #17603a; padding: 14px 16px; border-radius: 12px; margin-bottom: 22px; }
.links { display: grid; gap: 14px; margin: 22px 0; }
.linkbox { background: #fff; border: 1px solid #e8e4de; border-radius: 14px; padding: 16px; }
.linkbox.warn { border-color: #f0d9a8; background: #fffaf0; }
.linkbox .lbl { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #8a8499; margin-bottom: 8px; }
.linkbox input { width: 100%; padding: 10px 12px; border: 1px solid #ddd8d1; border-radius: 9px; font: 400 .9rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #faf9f7; }
.lrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.stat { background: #fff; border: 1px solid #e8e4de; border-radius: 14px; padding: 18px; text-align: center; }
.stat b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.stat span { font-size: .8rem; color: #8a8499; }

.tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e8e4de; border-radius: 14px; overflow: hidden; }
.tbl th, .tbl td { padding: 11px 13px; text-align: left; border-bottom: 1px solid #f0ece6; font-size: .92rem; }
.tbl th { background: #faf8f5; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #8a8499; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .ok { color: #17803d; font-weight: 600; }
.tbl .no { color: #a1462e; }
details summary { cursor: pointer; }
details summary h2 { display: inline-block; margin: 0; }

/* ---------- davetiye: ortak iskelet ---------- */
.inv { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px 56px; }
.inv-card { position: relative; width: 100%; max-width: 620px; padding: 56px 34px 40px; text-align: center; }
.inv-card * { max-width: 100%; }   /* hiçbir çocuk kartı yatayda taşırmasın */
.inv-sub { text-transform: uppercase; letter-spacing: .3em; font-size: .74rem; margin: 0 0 18px; }
.inv-title { font-size: clamp(2.2rem, 8vw, 3.6rem); margin: 0 0 10px; font-weight: 400; }
.inv-type { letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; margin: 0 0 30px; opacity: .7; }
.inv-date { display: flex; flex-direction: column; gap: 4px; margin: 26px 0; }
.inv-date .d { font-size: 1.15rem; letter-spacing: .04em; }
.inv-date .t { font-size: .95rem; opacity: .75; }
/* 42ch serif fontta 390px viewport'u aşıyordu — min() ile kartın içinde kalır */
.inv-msg { margin: 22px auto; max-width: min(42ch, 100%); font-size: 1.02rem; overflow-wrap: break-word; }
.inv-place { margin: 26px 0; display: flex; flex-direction: column; gap: 4px; font-size: .96rem; }
.inv-place strong { font-size: 1.06rem; font-weight: 600; }
.countdown { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin: 18px 0; min-height: 1.2em; }
.inv-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 22px 0 8px; font-size: .9rem; }
.inv-deco { position: absolute; inset: 0; pointer-events: none; }

.rsvp { margin-top: 44px; padding-top: 30px; border-top: 1px solid currentColor; border-image: none; }
.rsvp h2 { font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; }
.rsvp-form { max-width: 380px; margin: 20px auto 0; text-align: left; }
.rsvp-form label { display: block; margin-bottom: 14px; font-size: .85rem; letter-spacing: .04em; }
.rsvp-form input, .rsvp-form textarea { width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit;
    border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; }
.rsvp-form .choice { border: 0; padding: 0; margin: 0 0 14px; display: flex; gap: 18px; font-size: .9rem; }
.rsvp-form .choice label { margin: 0; display: flex; align-items: center; gap: 6px; }
.rsvp-form .choice input { width: auto; margin: 0; }
.rsvp-form .btn { width: 100%; }

/* ---------- tema 1: Zarif Altın ---------- */
.t-zarif { background: #faf5ea; color: #5c4a25; }
.t-zarif .inv-card { background: #fffdf8; border: 1px solid #e0cda0;
    box-shadow: 0 20px 60px rgba(120, 95, 40, .12); }
.t-zarif .inv-deco { border: 1px solid #d8c08a; margin: 12px; }
.t-zarif .inv-sub { font-family: Inter, sans-serif; color: #9c7f3f; }
.t-zarif .inv-title { font-family: "Great Vibes", cursive; font-size: clamp(2.8rem, 11vw, 4.6rem); color: #7a5f22; line-height: 1; }
.t-zarif .inv-date .d, .t-zarif .inv-msg, .t-zarif .inv-place { font-family: "Cormorant Garamond", Georgia, serif; }
.t-zarif .inv-date .d { font-size: 1.35rem; }
.t-zarif .inv-msg { font-size: 1.15rem; font-style: italic; }
.t-zarif .rsvp { border-top-color: #e0cda0; }
.t-zarif .btn { background: #a8862f; }
.t-zarif .btn:hover { background: #8d6f22; }
.t-zarif .lnk, .t-zarif a { color: #8d6f22; }

/* ---------- tema 2: Modern Minimal ---------- */
.t-modern { background: #fff; color: #17161c; }
.t-modern .inv-card { max-width: 560px; text-align: left; padding: 64px 30px 40px; }
.t-modern .inv-deco { border-left: 3px solid #17161c; width: 3px; inset: 64px auto 40px 0; }
.t-modern .inv-card { padding-left: 30px; }
.t-modern .inv-sub { font-size: .7rem; letter-spacing: .34em; color: #8b8896; }
.t-modern .inv-title { font-weight: 800; letter-spacing: -.035em; font-size: clamp(2.4rem, 9vw, 3.8rem); }
.t-modern .inv-date { flex-direction: row; align-items: baseline; gap: 14px; }
.t-modern .inv-date .d { font-weight: 600; }
.t-modern .inv-msg { margin-left: 0; }
.t-modern .inv-place { align-items: flex-start; }
.t-modern .inv-actions { justify-content: flex-start; }
.t-modern .rsvp { border-top-color: #e6e4e9; }
.t-modern .rsvp-form { margin-left: 0; }
.t-modern .btn { background: #17161c; border-radius: 4px; }
.t-modern .btn:hover { background: #3a3844; }
.t-modern .lnk, .t-modern a { color: #17161c; }
.t-modern .rsvp-form input, .t-modern .rsvp-form textarea { border-color: #d5d2da; border-radius: 4px; }

/* ---------- tema 3: Bahçe Yeşili ---------- */
.t-bahce { background: #eef2ea; color: #33513a; }
.t-bahce .inv-card { background: #fbfdfa; border-radius: 300px 300px 22px 22px; padding-top: 74px;
    box-shadow: 0 18px 50px rgba(50, 80, 55, .12); }
.t-bahce .inv-deco { border: 1px solid #bcd0bb; border-radius: 288px 288px 14px 14px; margin: 12px; }
.t-bahce .inv-sub { color: #6f8f73; }
.t-bahce .inv-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; color: #2c4632; }
.t-bahce .inv-msg { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.18rem; }
.t-bahce .inv-date .d { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.3rem; }
.t-bahce .rsvp { border-top-color: #c8d8c6; }
.t-bahce .btn { background: #5c7d5f; border-radius: 999px; }
.t-bahce .btn:hover { background: #47664a; }
.t-bahce .lnk, .t-bahce a { color: #47664a; }
.t-bahce .rsvp-form input, .t-bahce .rsvp-form textarea { border-color: #c2d3c1; border-radius: 10px; }

/* ---------- tema 4: Gece Bordo ---------- */
.t-gece { background: #0f1220; color: #e8dcc8; }
.t-gece .inv-card { background: radial-gradient(120% 80% at 50% 0%, #23203a 0%, #14131f 62%);
    border: 1px solid #3d3350; border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.t-gece .inv-deco { background: radial-gradient(1px 1px at 20% 18%, #d9bf8a 50%, transparent 51%),
                                radial-gradient(1px 1px at 78% 12%, #d9bf8a 50%, transparent 51%),
                                radial-gradient(1px 1px at 62% 30%, #b9a2d8 50%, transparent 51%),
                                radial-gradient(1px 1px at 33% 40%, #d9bf8a 50%, transparent 51%);
                     opacity: .8; }
.t-gece .inv-sub { color: #c9a86a; }
.t-gece .inv-title { font-family: "Playfair Display", Georgia, serif;
    background: linear-gradient(92deg, #e6c98d, #f3e6cd 45%, #c79a5c); -webkit-background-clip: text;
    background-clip: text; color: transparent; }
.t-gece .inv-type { color: #9b8fb5; }
.t-gece .inv-msg { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; color: #d8cdbc; }
.t-gece .rsvp { border-top-color: #3d3350; }
.t-gece .btn { background: linear-gradient(92deg, #b8935a, #d3b47c); color: #191428; }
.t-gece .btn:hover { filter: brightness(1.08); }
.t-gece .lnk, .t-gece a { color: #d9bf8a; }
.t-gece .rsvp-form input, .t-gece .rsvp-form textarea { border-color: #4a3f5e; border-radius: 8px; background: rgba(255,255,255,.03); }

@media (max-width: 520px) {
    .inv-card { padding: 40px 22px 34px; }
    .stats { grid-template-columns: 1fr; }
    .tbl th:nth-child(4), .tbl td:nth-child(4) { display: none; }
}

/* reCAPTCHA widget — form akışına otursun, dar ekranda taşmasın */
.g-recaptcha { margin: 4px 0 16px; }
.g-recaptcha > div { max-width: 100%; }
.rsvp-form .g-recaptcha { display: flex; justify-content: center; }
@media (max-width: 380px) {
    .g-recaptcha { transform: scale(.88); transform-origin: left top; }
    .rsvp-form .g-recaptcha { transform-origin: center top; }
}

/* ---------- SEO sayfaları ---------- */
.wrap h2 { margin-top: 34px; font-size: 1.35rem; }
.wrap p { max-width: 68ch; }
.linkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
.linkgrid a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: #fff;
              border: 1px solid #e8e4de; border-radius: 14px; text-decoration: none; color: #17161c; }
.linkgrid a:hover { border-color: #cfc4f5; background: #fbf9ff; }
.linkgrid span { font-size: .85rem; color: #8a8499; }
.faq { background: #fff; border: 1px solid #e8e4de; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: .96rem; }
.faq p { margin: 10px 0 0; font-size: .94rem; color: #4a4557; }
.cta-band { background: linear-gradient(120deg, #f3efff, #fff); border: 1px solid #ddd2fb;
            border-radius: 16px; padding: 22px 24px; margin: 34px 0 0; max-width: none !important; }
.cta-band .btn { margin-left: 10px; }
@media (max-width: 520px) { .cta-band .btn { display: block; margin: 14px 0 0; text-align: center; } }