/* =========================================================
   Kapalı Özel Portföy (/ozel-portfoy) — sitenin geri kalanından bilinçli olarak ayrışan karanlık sayfa.
   Yön: gece sahnesi (neredeyse siyah zemin, 400 ağırlıklı ince serif vaat, Inter destek metni),
   altın yalnızca metalik rakamlar, ince maket çizgileri ve odak halkasında. Birincil buton açık (sıcak beyaz),
   altın dolgu değil. Bölümler renk bandıyla değil boşluk ve yazı ölçeğiyle ayrılır; form "sıcak ufuk" bandında.
   Tüm kurallar body.op altında; style.css'in token'ları burada karanlık değerlere eşlenir.
   ========================================================= */

.op {
  --op-canvas: #070706;
  --op-panel: #14130f;
  --op-panel-deep: #0b0b0a;
  --op-edge: #34312b;        /* form kenarı */
  --op-rule: #201e1a;        /* ayırıcı çizgi */
  --op-ink: #f4f1ea;         /* başlık, önemli etiket, birincil buton metni zemini */
  --op-body: #b5b1a8;        /* destek metni (~9:1) */
  --op-muted: #918d84;       /* ikincil metin (~5.9:1) */
  --op-champagne: #f1dfb3;   /* etiket, odak, seçili durum */
  --op-gold: #b78927;        /* marka altını: metalik rakam, maket çizgisi */
  --op-horizon: #2b241a;     /* form bandının sıcak dibi */
  --op-serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --op-ease: cubic-bezier(.25, .46, .45, .94);
  --op-metal: linear-gradient(103deg, #b78927 0%, #f6e7bf 42%, #cfa24a 72%, #a8812c 100%);

  /* style.css token'ları karanlıkta (header, menü, footer, toast kendiliğinden uyar) */
  --canvas: #1b1a17;
  --surface: #0d0c0b;
  --ink: #f4f1ea;
  --slate: #918d84;
  --mist: #23211d;
  --placeholder: #1b1a17;

  background: var(--op-canvas);
  color: var(--op-body);
  color-scheme: dark;
}
.op ::selection { background: rgba(241, 223, 179, .28); color: #fff; }
.op :focus-visible { outline: 2px solid var(--op-champagne); outline-offset: 3px; }

/* Çok ince film greni (sabit, tıklanmaz) */
.op::before {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Site çerçevesi (karanlık) ---------- */
.op .topbar { background: #000; color: var(--op-muted); border-bottom: 1px solid var(--op-rule); }
.op .header { background: rgba(7, 7, 6, .94); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); border-bottom-color: var(--op-rule); }
/* logo PNG'si beyaz zeminli: ters çevirip renk tonunu geri döndür (altın çatı kalır), siyah zemini ekranla karışımda yok et */
.op .logo-img { filter: invert(1) hue-rotate(180deg) saturate(1.2); mix-blend-mode: screen; }
.op .nav a:hover, .op .nav-drop-btn:hover, .op .icon-btn:hover, .op .btn-ghost:hover { background: rgba(255, 255, 255, .06); }
.op .nav a.nav-private, .op .mobile-nav a.nav-private { color: var(--op-champagne); }
.op .nav-private .ico { color: var(--op-champagne); }
.op .nav a[aria-current="page"]::after, .op .nav-drop-btn[aria-current="page"]::after { background: var(--op-champagne); }
.op .nav-menu { background: #121110; border: 1px solid var(--op-rule); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7); }
.op .nav-menu a:hover { background: rgba(255, 255, 255, .05); }
.op .mobile-nav { background: #0b0b0a; }
.op .footer { background: #050504; margin-top: 0; border-top-color: var(--op-rule); }
.op .office { border: 1px solid var(--op-rule); }
.op .wa-float { background: #16150f; color: var(--op-ink); border: 1px solid var(--op-edge); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); }
.op .wa-float:hover { background: #201e17; }
.op .toast { background: var(--op-ink); color: #111; }

/* ---------- Ortak ---------- */
.op-main { position: relative; overflow-x: clip; }
.op-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } /* menüyle aynı genişlik */
.op-label { font: 600 11.5px/1.3 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--op-champagne); }
.op-display, .op-h2 { font-family: var(--op-serif); font-weight: 400; color: var(--op-ink); letter-spacing: .004em; font-optical-sizing: auto; text-wrap: balance; }
.op-display { font-size: clamp(52px, 6.4vw, 94px); line-height: 1; margin: 22px 0 28px; }
.op-h2 { font-size: clamp(36px, 4.9vw, 66px); line-height: 1.04; margin: 18px 0 18px; }
.op-sub { font-size: 17px; line-height: 1.6; letter-spacing: -.012em; color: var(--op-body); max-width: 560px; }
.op-sub a, .op-locked a { color: var(--op-ink); text-decoration: underline; text-decoration-color: rgba(241, 223, 179, .5); text-underline-offset: 3px; }
.op-head { max-width: 780px; margin-bottom: clamp(36px, 4.4vw, 60px); }
.op-center { text-align: center; margin-inline: auto; }
.op-center .op-sub { margin-inline: auto; }
.op-section { padding-top: clamp(96px, 11vw, 168px); }

.op-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 999px;
  background: linear-gradient(180deg, #fbf8f1, #eae1cd); color: #15130e; font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 36px -16px rgba(241, 223, 179, .45);
  transition: transform .2s var(--op-ease), box-shadow .3s var(--op-ease), filter .2s;
}
.op-btn:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 44px -14px rgba(241, 223, 179, .55); }
.op-btn:active { transform: none; }
.op-btn[disabled] { opacity: .7; cursor: progress; }
.op-btn-block { width: 100%; height: 56px; font-size: 16px; }
.op-link { display: inline-flex; align-items: center; gap: 6px; color: var(--op-ink); font-weight: 500; font-size: 15px; padding: 8px 2px; border-bottom: 1px solid rgba(241, 223, 179, .3); transition: border-color .2s; }
.op-link:hover { border-bottom-color: var(--op-champagne); }

.op-metal { background: var(--op-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Açılış ---------- */
.op-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(880px, calc(100svh - 112px)); padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); }
.op-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(rgba(7, 7, 6, 0), var(--op-canvas)); pointer-events: none; }
.op-hero-light {
  position: absolute; inset: -30% -12% -10% 30%; pointer-events: none; filter: blur(10px);
  background:
    radial-gradient(42% 38% at 62% 46%, rgba(233, 207, 147, .10), rgba(233, 207, 147, 0) 70%),
    linear-gradient(118deg, rgba(0, 0, 0, 0) 34%, rgba(241, 223, 179, .055) 44%, rgba(0, 0, 0, 0) 54%),
    linear-gradient(118deg, rgba(0, 0, 0, 0) 56%, rgba(241, 223, 179, .035) 63%, rgba(0, 0, 0, 0) 70%);
}
.op-hero-grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(16px, 3vw, 48px); align-items: center; }
.op-lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; letter-spacing: -.012em; max-width: 31em; }
.op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }
.op-proof { display: flex; flex-wrap: wrap; gap: 22px clamp(24px, 3.4vw, 48px); margin: 52px 0 0; padding-top: 26px; border-top: 1px solid var(--op-rule); max-width: 600px; }
.op-proof > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.op-proof > div[hidden] { display: none; }
.op-proof dt { font-size: 12.5px; letter-spacing: .02em; color: var(--op-muted); }
.op-proof dd { margin: 0; font: 500 clamp(26px, 2.5vw, 34px)/1 var(--font); letter-spacing: -.035em; }

.op-status, .op-locked { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0 0 26px; font-size: 14px; line-height: 1.45; }
.op-status { padding: 8px 15px 8px 13px; border-radius: 999px; background: rgba(125, 200, 150, .07); border: 1px solid rgba(140, 205, 160, .26); color: #d3ecda; font-weight: 500; font-size: 13.5px; }
.op-status i { width: 8px; height: 8px; border-radius: 50%; background: #86d6a1; box-shadow: 0 0 0 4px rgba(134, 214, 161, .14), 0 0 14px #86d6a1; flex: none; }
.op-locked { padding: 12px 16px; border-radius: 14px; background: rgba(241, 223, 179, .06); border: 1px solid rgba(241, 223, 179, .22); color: var(--op-ink); }
.op-locked .ico { color: var(--op-champagne); }
.op-status[hidden], .op-locked[hidden] { display: none; }

/* Maket */
.op-model { position: relative; margin: 0 -2% 0 0; }
.op-iso { display: block; width: 100%; height: auto; overflow: visible; }
.op-iso .ft { fill: url(#opTop); }
.op-iso .fl { fill: #0e0d0b; }
.op-iso .fr { fill: #090908; }
.op-iso .st { fill: #0e0d0b; }
.op-iso .sl { fill: #0a0908; }
.op-iso .sr { fill: #070706; }
.op-iso .e { fill: none; stroke: rgba(214, 180, 108, .55); stroke-width: 1; stroke-linejoin: round; }
.op-iso .d { stroke: rgba(214, 180, 108, .17); stroke-width: .7; }
.op-iso .g { stroke: rgba(214, 180, 108, .075); stroke-width: .7; }
.op-iso .plot { fill: rgba(183, 137, 39, .12); stroke: rgba(241, 223, 179, .75); stroke-width: 1; stroke-dasharray: 3 3; }
.op-iso .pd { stroke: rgba(241, 223, 179, .22); stroke-width: .7; stroke-dasharray: 2 4; }
.op-iso-shine .e { stroke: #fff3d8; stroke-width: 1.5; }
.op-iso-shine polygon.e { fill: none; }
.op-sweep { animation: op-sweep 10s cubic-bezier(.45, .05, .25, 1) 1.2s infinite; }
@keyframes op-sweep { from { transform: translateX(0) skewX(-18deg); } 62%, to { transform: translateX(1240px) skewX(-18deg); } }
.op-pin-core { fill: #f6e7bf; filter: drop-shadow(0 0 6px rgba(233, 196, 106, .9)); }
.op-pin-ring { fill: none; stroke: #f1dfb3; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: op-ping 2.8s var(--op-ease) infinite; }
@keyframes op-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.op-model-cap { position: absolute; left: 8%; bottom: 3%; font: 500 10.5px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--op-muted); }

/* Açılış girişi (hareket azaltılmışsa yok) */
.op-rise { animation: op-rise .9s var(--op-ease) both; }
.op-label.op-rise { animation-delay: .05s; } .op-display.op-rise { animation-delay: .13s; } .op-lead.op-rise { animation-delay: .21s; }
.op-actions.op-rise { animation-delay: .29s; } .op-proof.op-rise { animation-delay: .37s; }
.op-model { animation: op-fade 1.6s var(--op-ease) .2s both; }
@keyframes op-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes op-fade { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* Kaydırınca beliren bölümler (yalnızca JS varsa) */
.op-js .op-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--op-ease), transform .9s var(--op-ease); transition-delay: var(--d, 0s); }
.op-js .op-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Vitrin kasaları (portföy kartları, sınıflar) ---------- */
.op-case {
  position: relative; isolation: isolate; border-radius: 14px; overflow: hidden;
  background: linear-gradient(201deg, #161510 14%, #0b0b0a);
}
.op-case::after { /* üstten ışık alan, aşağı doğru sönen ince kenar */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  border: 1px solid rgba(255, 255, 255, .55); mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(#fff, rgba(0, 0, 0, 0) 75%); mask-image: linear-gradient(#fff, rgba(0, 0, 0, 0) 75%);
}

.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.op-card { display: flex; flex-direction: column; color: inherit; transition: transform .5s var(--op-ease); }
a.op-card:hover { transform: translateY(-3px); }
.op-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0f0e0c; }
.op-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); transition: transform 1.2s var(--op-ease); }
a.op-card:hover .op-card-media img { transform: scale(1.035); }
.op-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(11, 11, 10, .85)); pointer-events: none; }

/* Bulanık vitrin: fotoğraf yerine ışıkta bulanıklaşmış bina siluetleri */
.op-veil { position: absolute; inset: -24px; filter: blur(16px) saturate(1.1);
  background:
    radial-gradient(60% 50% at var(--lx, 70%) var(--ly, 30%), var(--lc, rgba(233, 196, 120, .55)), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #2a2620 0%, #14120e 58%, #0c0b09 100%); }
.op-veil i { position: absolute; bottom: 22%; background: linear-gradient(180deg, var(--bc, #3b342a), #15130f); border-radius: 2px; }
.op-veil i::after { content: ""; position: absolute; inset: 18% 22% auto; height: 46%; background: repeating-linear-gradient(180deg, rgba(255, 214, 140, .5) 0 3px, rgba(0, 0, 0, 0) 3px 9px); opacity: var(--win, .5); }
.op-veil b { position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(180deg, #1e1b16, #0c0b09); }
.op-lock { position: absolute; z-index: 2; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; color: var(--op-ink); }
.op-lock span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 10, 9, .45); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.op-lock small { font: 600 10.5px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--op-champagne); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

.op-card-body { position: relative; z-index: 2; display: grid; gap: 8px; padding: 18px 22px 22px; }
.op-card-kicker { display: flex; justify-content: space-between; gap: 12px; font: 600 10.5px/1.3 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--op-muted); }
.op-card-kicker b { color: var(--op-champagne); font-weight: 600; }
.op-card-type { font-family: var(--op-serif); font-size: 28px; line-height: 1.1; color: var(--op-ink); }
.op-card-title { font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--op-ink); letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-card-meta { font-size: 14px; color: var(--op-muted); }
.op-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--op-rule); }
.op-card-price { font: 500 21px/1 var(--font); letter-spacing: -.03em; white-space: nowrap; min-width: 0; }
.op-card-price small { font-size: 13px; color: var(--op-muted); -webkit-text-fill-color: var(--op-muted); }
.op-card-go { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--op-ink); }
.op-card-go .ico { transition: transform .3s var(--op-ease); }
a.op-card:hover .op-card-go .ico { transform: translateX(3px); }
.op-card-hint { font-size: 13px; color: var(--op-muted); display: flex; align-items: center; gap: 8px; }
.op-card-hint .ico { color: var(--op-champagne); }

/* Erişim açılınca kartlar bulanıktan netleşir */
.op-js .op-unveil .op-card-media > * { filter: blur(18px) brightness(.55); transform: scale(1.08); }
.op-js .op-unveil.is-in .op-card-media > * { animation: op-unblur 1.3s var(--op-ease) both; animation-delay: var(--d, 0s); }
@keyframes op-unblur { from { filter: blur(18px) brightness(.55); transform: scale(1.08); } to { filter: saturate(.92) contrast(1.04); transform: none; } }

.op-empty, .op-ssr { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--op-edge); border-radius: 14px; color: var(--op-muted); }
.op-ssr { list-style: none; margin: 0; display: grid; gap: 8px; }
.op-ssr a { color: var(--op-ink); }

/* Varlık sınıfları: 2 geniş + 3 dar kasa */
.op-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.op-cat { grid-column: span 2; min-height: 236px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.op-cat:nth-child(-n+2) { grid-column: span 3; min-height: 280px; }
.op-cat::before { /* her kasada tek, sönük şampanya ışığı */
  content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -18%; top: -38%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 207, 147, .16), rgba(233, 207, 147, 0)); transition: transform 1.2s var(--op-ease), opacity .6s;
}
.op-cat:hover::before { transform: translate(-6%, 8%); }
.op-cat-top { display: flex; justify-content: space-between; align-items: flex-start; }
.op-cat-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--op-champagne); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.op-cat-ico .ico { width: 21px; height: 21px; stroke-width: 1.4; }
.op-cat-n { font: 600 10.5px/1 var(--font); letter-spacing: .2em; color: var(--op-muted); }
.op-cat p { font-size: 16px; line-height: 1.5; font-weight: 300; color: var(--op-body); max-width: 34em; }
.op-cat p b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 18px; color: var(--op-ink); letter-spacing: -.015em; }

/* Süreç */
.op-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); }
.op-steps li { position: relative; padding-top: 30px; border-top: 1px solid var(--op-rule); }
.op-steps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--op-metal); }
.op-step-n { display: block; font-family: var(--op-serif); font-size: clamp(54px, 5.4vw, 76px); line-height: 1; background: var(--op-metal); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 26px; }
.op-steps h3 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--op-ink); margin-bottom: 10px; }
.op-steps p { font-size: 16px; line-height: 1.6; max-width: 30em; }

/* Gizlilik: solda başlık, sağda çizgili ilkeler */
.op-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.op-rules { list-style: none; margin: 0; padding: 0; }
.op-rules li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid var(--op-rule); }
.op-rules li:first-child { border-top: 1px solid var(--op-rule); }
.op-rules b { font-size: 19px; font-weight: 500; color: var(--op-ink); letter-spacing: -.02em; }
.op-rules span { font-size: 16px; line-height: 1.6; }

/* ---------- Erişim: sıcak ufuk bandı ---------- */
.op-horizon { position: relative; isolation: isolate; margin-top: clamp(96px, 11vw, 168px); padding: clamp(96px, 12vw, 200px) 0 clamp(96px, 10vw, 160px); background: linear-gradient(180deg, rgba(7, 7, 6, 0) 0%, #15120d 45%, var(--op-horizon) 100%); }
.op-horizon::before { /* aşağı doğru belirginleşen gren */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 20%, #000); mask-image: linear-gradient(rgba(0, 0, 0, 0) 20%, #000);
}
.op-horizon::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -10%; width: min(1100px, 120%); aspect-ratio: 2.4; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 196, 120, .16), rgba(233, 196, 120, 0)); }
.op-form-wrap .op-head { margin-bottom: 44px; }

.op-form {
  max-width: 680px; margin: 0 auto; padding: clamp(22px, 4vw, 40px); display: grid; gap: 20px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.op-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.op-field { display: grid; gap: 8px; }
.op-field > span, .op-choice legend { font-size: 13.5px; font-weight: 500; color: var(--op-body); }
.op-field small, .op-choice legend small { font-weight: 400; color: var(--op-muted); }
.op-field input, .op-field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 12px; background: rgba(0, 0, 0, .34); border: 1px solid var(--op-edge);
  color: var(--op-ink); font-size: 16px; letter-spacing: -.01em; transition: border-color .2s, box-shadow .2s, background .2s;
}
.op-field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.op-field input::placeholder, .op-field textarea::placeholder { color: #85817a; }
.op-field input:focus, .op-field textarea:focus { outline: none; border-color: rgba(241, 223, 179, .7); background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 4px rgba(241, 223, 179, .12); }
.op-tried .op-field input:invalid { border-color: #c98b6e; }
.op-hint { margin-top: -10px; font-size: 12.5px; color: var(--op-muted); }

.op-choice { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.op-choice legend { padding: 0; margin-bottom: 10px; }
.op-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.op-pills-sm { display: flex; flex-wrap: wrap; }
.op-pills label { position: relative; cursor: pointer; }
.op-pills input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.op-pills span {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--op-edge);
  background: rgba(0, 0, 0, .22); color: var(--op-body); font-size: 15px; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s, color .2s;
}
.op-pills span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #5a564d; transition: border-color .2s, box-shadow .2s, background .2s; }
.op-pills-sm span { min-height: 42px; border-radius: 999px; padding: 0 16px 0 12px; font-size: 14px; gap: 9px; }
.op-pills-sm span::before { width: 14px; height: 14px; border-radius: 4px; }
.op-pills label:hover span { border-color: #5a564d; color: var(--op-ink); }
.op-pills input:checked + span { border-color: rgba(241, 223, 179, .75); background: rgba(241, 223, 179, .08); color: var(--op-ink); }
.op-pills input[type="radio"]:checked + span::before { border-color: var(--op-champagne); background: radial-gradient(circle, var(--op-champagne) 0 4px, rgba(0, 0, 0, 0) 5px); }
.op-pills input[type="checkbox"]:checked + span::before { border-color: var(--op-champagne); background: var(--op-champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315130e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.op-pills input:focus-visible + span { outline: 2px solid var(--op-champagne); outline-offset: 2px; }
.op-tried .op-choice:has(input:invalid) .op-pills span { border-color: #8a5e49; }

.op-consent { position: relative; display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--op-muted); cursor: pointer; }
.op-consent input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; border: 1px solid #5a564d; background: rgba(0, 0, 0, .3); cursor: pointer; transition: border-color .2s, background .2s; }
.op-consent input:checked { border-color: var(--op-champagne); background: var(--op-champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315130e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.op-tried .op-consent input:invalid { border-color: #c98b6e; }
.op-fine { text-align: center; font-size: 12.5px; color: var(--op-muted); margin-top: -6px; }
.op .form-err { background: rgba(201, 139, 110, .1); color: #f2c2ac; border: 1px solid rgba(201, 139, 110, .32); }

.op-done { max-width: 560px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 4px; }
.op-done[hidden] { display: none; }
.op-done:focus { outline: none; }
.op-done .op-h2 { margin: 18px 0 8px; }
.op-done .op-sub { margin-bottom: 28px; }
.op-done-mark { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(241, 223, 179, .5); box-shadow: 0 0 0 10px rgba(241, 223, 179, .04), 0 0 60px rgba(233, 196, 120, .25); }
.op-done-mark svg { width: 28px; height: 28px; fill: none; stroke: var(--op-champagne); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: op-draw .8s var(--op-ease) .25s forwards; }
@keyframes op-draw { to { stroke-dashoffset: 0; } }

/* ---------- Duyarlı ---------- */
@media (max-width: 960px) {
  .op-hero { min-height: 0; }
  .op-hero-grid { grid-template-columns: 1fr; }
  .op-model { max-width: 560px; width: 100%; margin: 8px auto -72px; }
  .op-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-cat, .op-cat:nth-child(-n+2) { grid-column: span 1; min-height: 220px; }
  .op-cat:last-child { grid-column: 1 / -1; }
  .op-steps { grid-template-columns: 1fr; }
  .op-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .op-display { font-size: clamp(48px, 14vw, 64px); margin: 18px 0 22px; }
  .op-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 40px; }
  .op-actions .op-btn { width: 100%; }
  .op-cats { grid-template-columns: 1fr; }
  .op-cat:last-child { grid-column: auto; }
  .op-rules li { grid-template-columns: 1fr; padding: 22px 0; }
  .op-row, .op-pills { grid-template-columns: 1fr; }
  .op-model-cap { display: none; }
  .op-status, .op-locked { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .op-rise, .op-model, .op-sweep, .op-pin-ring, .op-done-mark svg { animation: none !important; }
  .op-done-mark svg { stroke-dashoffset: 0; }
  .op-js .op-reveal { opacity: 1; transform: none; transition: none; }
  .op-js .op-unveil .op-card-media > *, .op-js .op-unveil.is-in .op-card-media > * { animation: none; filter: none; transform: none; }
  .op-card, .op-card-media img, .op-cat::before, .op-btn { transition: none; }
}