/* CleanMyRatings — visuals preview (2026-10-27, owner: "biraz görsel eklemek lazım"; "çerez kurmuyoruz, o kısım için
   komik keyifli bir şey yap"). 1) hero: text left, a live example of a Google profile being checked on the right;
   2) "What you receive": the written report as a document; 3) the cookie note as a cookie that gets eaten.
   Everything is HTML/CSS (translatable, sharp, light); no stock photos, no invented customers. */

/* ---------- 1. hero in two columns ---------- */
.hm.hm2{ text-align:left; padding:72px 0 96px }
.hm2-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; max-width:var(--wrap) }
.hm2 .hm-eyebrow{ letter-spacing:.12em }
.hm.hm2 h1{ margin:16px 0 0; max-width:13ch; font-size:clamp(2.5rem,4.4vw,4rem); line-height:1.03; letter-spacing:-.04em; text-align:left }
.hm2 .hm-dek{ margin:22px 0 0; max-width:520px }
.hm2 .hm-actions{ justify-content:flex-start; margin-top:30px }
.hm2 .hm-trust{ justify-content:flex-start; gap:8px 20px; margin-top:26px; font-size:.86rem }
.hm2 .hm-for{ justify-content:flex-start; margin:22px 0 0 }
.hm2 .hm-for > b{ text-align:left }

.hm2-vis{ position:relative }
.gp, .gp-toast{ text-align:left }
.gp{ position:relative; background:#fff; color:var(--ink); border-radius:22px; padding:20px 20px 16px; box-shadow:0 40px 80px -40px rgba(11,37,69,.55), 0 2px 0 rgba(255,255,255,.6) inset; transform:rotate(-1.2deg); transition:transform .5s }
.gp:hover{ transform:rotate(0) }
.gp-top{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.gp-av{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; font:800 1.15rem/1 "Manrope",sans-serif; color:#fff; background:linear-gradient(135deg,#e26d5a,#c2410c) }
.gp-id{ min-width:0; flex:1 } .gp-id b{ display:block; font:800 1rem/1.25 "Manrope",sans-serif; color:var(--ink) }
.gp-id > span{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); margin-top:2px }
.gp-score{ font-weight:800; color:var(--ink) }
.gp-stars, .gp-s{ color:#f5a800; letter-spacing:1px } .gp-stars i, .gp-s i{ font-style:normal; color:#d5dce6 }
.gp-tag{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 9px }
.gp-scan{ position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; margin:12px 0 4px; padding:7px 10px; border-radius:10px; background:var(--accent-soft); color:var(--accent); font-size:.76rem; font-weight:700 }
.gp-scan::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(43,196,138,.22); animation:gpPulse 1.2s infinite }
.gp-scan i{ position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); transform:translateX(-100%) }
.gp.is-run .gp-scan i{ animation:gpSweep 1.3s ease-in-out infinite }
.gp.is-done .gp-scan{ background:var(--ok-soft); color:var(--ok) } .gp.is-done .gp-scan::before{ animation:none; background:var(--ok) }
@keyframes gpPulse{ 50%{ box-shadow:0 0 0 7px rgba(43,196,138,.06) } }
@keyframes gpSweep{ to{ transform:translateX(100%) } }
.gp-list{ list-style:none; margin:0; padding:0 }
.gp-r{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:12px 2px; border-bottom:1px solid var(--line-soft); transition:background .3s }
.gp-r:last-child{ border-bottom:0 }
.gp-r.is-now{ background:linear-gradient(90deg,rgba(43,196,138,.08),transparent) }
.gp-ra{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:700 .85rem/1 "Manrope",sans-serif; color:#0b2545; background:var(--navy-soft) }
.gp-rh{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:.8rem } .gp-rh b{ color:var(--ink) } .gp-rh small{ color:var(--muted) }
.gp-rb p{ margin:3px 0 6px; font-size:.88rem; line-height:1.45; color:var(--ink-2) }
.gp-v{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.74rem; font-weight:700; background:var(--bg-alt); color:var(--muted); min-width:118px }
.gp-v .w{ display:inline-flex; gap:3px } .gp-v .w i{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.35; animation:gpDots 1s infinite } .gp-v .w i:nth-child(2){ animation-delay:.15s } .gp-v .w i:nth-child(3){ animation-delay:.3s }
@keyframes gpDots{ 50%{ opacity:1 } }
.gp-v .t{ display:none }
.gp-r.is-shown .gp-v .w{ display:none } .gp-r.is-shown .gp-v .t{ display:inline }
.gp-r.is-shown .gp-v.ok{ background:var(--ok-soft); color:var(--ok); animation:gpPop .35s cubic-bezier(.2,1.4,.4,1) }
.gp-r.is-shown .gp-v.no{ background:#fff4e0; color:#9a6210; animation:gpPop .35s cubic-bezier(.2,1.4,.4,1) }
@keyframes gpPop{ from{ transform:scale(.85); opacity:.4 } }
.gp-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted) }
.gp-foot b{ color:var(--ink); font-size:.92rem }
.gp-toast{ position:absolute; left:-22px; bottom:-62px; display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:14px; background:var(--navy); color:#fff; font-size:.82rem; font-weight:600; box-shadow:0 20px 40px -20px rgba(11,37,69,.8);
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .45s, transform .45s cubic-bezier(.2,1.2,.4,1) }
.gp-toast span:first-child{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--mint); color:var(--navy); font-weight:800 }
.gp.is-done + .gp-toast{ opacity:1; transform:none }
@media (max-width:1020px){
  .hm.hm2{ text-align:center; padding:72px 0 96px }
  .hm2-grid{ grid-template-columns:minmax(0,1fr); gap:40px }
  .hm.hm2 h1, .hm2 .hm-dek{ margin-left:auto; margin-right:auto; text-align:center }
  .hm2 .hm-actions, .hm2 .hm-trust, .hm2 .hm-for{ justify-content:center }
  .hm2 .hm-for > b{ text-align:center }
  .hm2-vis{ max-width:560px; margin:0 auto; width:100% }
  .gp-toast{ left:8px }
}
@media (max-width:560px){ .gp{ padding:16px 14px 12px; transform:none } .gp-id > span{ flex-wrap:wrap; gap:2px 6px } .gp-rb p{ font-size:.84rem } .gp-toast{ position:relative; left:auto; bottom:auto; margin:14px auto 0; width:fit-content; max-width:100% } }

/* ---------- 2. "What you receive": the report as a document ---------- */
.rc-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center }
.rc-txt h2{ margin-bottom:14px } .rc-txt > p{ font-size:1.04rem; color:var(--ink-2) }
.rc-txt .btn{ margin-top:28px }
.rc-doc{ position:relative; padding:18px 18px 22px 8px }
.rc-paper{ position:relative; z-index:2; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 22px 18px; box-shadow:var(--shadow-lg); transform:rotate(.8deg) }
.rc-back{ position:absolute; z-index:1; inset:6px 0 10px 20px; transform:rotate(-2.4deg); background:var(--navy-soft); border:1px solid var(--line); border-radius:16px; box-shadow:none }
.rc-h{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:2px solid var(--ink) }
.rc-h img{ width:120px; height:auto } .rc-h div{ flex:1; min-width:0; text-align:right } .rc-h b{ display:block; font:800 .95rem/1.2 "Manrope",sans-serif; color:var(--ink) } .rc-h span{ font-size:.74rem; color:var(--muted) }
.rc-tag{ position:absolute; top:-11px; right:18px; font-size:.64rem !important; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:var(--mint); color:var(--navy) !important; padding:4px 10px; border-radius:999px }
.rc-t{ width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; margin-top:10px; font-size:.8rem }
.rc-t th:nth-child(1){ width:39% } .rc-t th:nth-child(2){ width:25% } .rc-t th:nth-child(3){ width:20% } .rc-t th:nth-child(4){ width:16% }
.rc-t th{ text-align:left; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:8px 6px; border-bottom:1px solid var(--line); background:none }
.rc-t td{ padding:10px 6px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--ink-2) }
.rc-t td:first-child b{ display:block; color:#f5a800; font-size:.78rem; letter-spacing:1px } .rc-t td:first-child b i{ font-style:normal; color:#d5dce6 }
.rc-chip{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:.68rem; line-height:1.3; font-weight:700 }
.rc-chip.ok{ background:var(--ok-soft); color:var(--ok) } .rc-chip.no{ background:#fff4e0; color:#9a6210 }
.rc-conf{ display:block; width:100%; max-width:64px; height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:6px } .rc-conf i{ display:block; height:100%; border-radius:99px; background:var(--ok) }
.rc-sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px }
.rc-sum div{ padding:10px; border-radius:12px; background:var(--bg-soft); text-align:center } .rc-sum b{ display:block; font:800 1.2rem/1.1 "Manrope",sans-serif; color:var(--ink) } .rc-sum span{ font-size:.72rem; color:var(--muted) }
.rc-sign{ margin-top:12px; font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:8px } .rc-sign::before{ content:"✍"; font-size:1rem }
@media (max-width:1020px){ .rc-grid{ grid-template-columns:minmax(0,1fr); gap:36px } .rc-doc{ max-width:620px } }
@media (max-width:560px){ .rc-t th:nth-child(4), .rc-t td:nth-child(4){ display:none } .rc-t th:nth-child(1){ width:46% } .rc-t th:nth-child(2){ width:28% } .rc-t th:nth-child(3){ width:26% } .rc-paper{ padding:16px 14px; transform:none } .rc-back{ display:none } }

/* ---------- 3. the cookie note: a cookie that gets eaten ---------- */
.ck2{ position:fixed; left:22px; bottom:22px; z-index:60; width:min(372px, calc(100vw - 44px)); }
.ck2[hidden]{ display:none }
.ck2-in{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; align-items:center; padding:14px 16px 14px 12px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(13,27,42,.45);
  animation:ck2In .55s cubic-bezier(.2,1.25,.4,1) both }
@keyframes ck2In{ from{ opacity:0; transform:translateY(24px) scale(.96) } }
.ck2.is-gone .ck2-in{ animation:ck2Out .45s ease-in forwards }
@keyframes ck2Out{ to{ opacity:0; transform:translateY(30px) scale(.94) } }
.ck2-art{ position:relative; width:64px; height:64px; grid-row:span 2 }
.ck2-cookie{ width:64px; height:64px; display:block; animation:ck2Wobble 3.2s ease-in-out infinite; transform-origin:50% 60% }
@keyframes ck2Wobble{ 0%,70%,100%{ transform:rotate(0) } 78%{ transform:rotate(-9deg) } 86%{ transform:rotate(7deg) } 93%{ transform:rotate(-3deg) } }
.ck2-bite{ transform:scale(0); transform-box:fill-box; transform-origin:center; transition:transform .16s cubic-bezier(.3,1.6,.5,1) }
.ck2.b1 .ck2-bite.n1, .ck2.b2 .ck2-bite.n2, .ck2.b3 .ck2-bite.n3{ transform:scale(1) }
.ck2.b1 .ck2-cookie{ animation:ck2Chomp .16s }
.ck2-crumb{ position:absolute; width:6px; height:6px; border-radius:2px; background:#c98a3e; opacity:0; left:42px; top:18px }
.ck2.b1 .ck2-crumb, .ck2.b2 .ck2-crumb, .ck2.b3 .ck2-crumb{ animation:ck2Fall .7s ease-in forwards }
.ck2-crumb.c2{ left:48px; top:30px; width:4px; height:4px; animation-delay:.08s !important } .ck2-crumb.c3{ left:36px; top:10px; width:5px; height:5px; animation-delay:.14s !important } .ck2-crumb.c4{ left:52px; top:22px; width:3px; height:3px; animation-delay:.04s !important }
@keyframes ck2Fall{ 0%{ opacity:1; transform:translate(0,0) rotate(0) } 100%{ opacity:0; transform:translate(14px,46px) rotate(140deg) } }
@keyframes ck2Chomp{ 50%{ transform:scale(.92) rotate(-4deg) } }
.ck2-tx strong{ display:block; font:800 1rem/1.25 "Manrope",sans-serif; color:var(--ink) }
.ck2-tx span{ display:block; margin-top:3px; font-size:.82rem; line-height:1.45; color:var(--ink-2) }
.ck2-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.ck2-row small{ font-size:.72rem; color:var(--muted); line-height:1.4; flex:1; min-width:150px } .ck2-row small a{ color:var(--muted); text-decoration:underline }
.ck2-eat{ appearance:none; border:0; border-radius:999px; padding:10px 18px; background:var(--navy); color:#fff; font:700 .86rem/1 "Manrope",sans-serif; cursor:pointer; white-space:nowrap; transition:transform .12s, background .15s }
.ck2-eat:hover{ background:var(--navy-dark); transform:translateY(-1px) } .ck2-eat:active{ transform:scale(.96) }
@media (max-width:720px){ .ck2{ left:12px; right:12px; bottom:88px; width:auto } }
@media (prefers-reduced-motion:reduce){
  .gp, .ck2-cookie, .ck2-in, .gp-scan::before, .gp.is-run .gp-scan i{ animation:none !important; transform:none !important }
  .ck2-bite{ transition:none } .ck2-crumb{ display:none }
}

/* ---------- 4. photo slots 1-13 (2026-10-27): a calm tinted tile with an icon until the owner's photo is in ---------- */
.ph{ position:relative; margin:0; border-radius:20px; overflow:hidden; display:grid; place-items:center; text-align:center;
  background:linear-gradient(160deg,#eef4fb 0%,#dde8f5 100%); color:#90a5c2 }
.ph > svg{ display:block; width:clamp(30px,24%,58px); height:auto; aspect-ratio:1 }
.ph.r34{ aspect-ratio:3/4 } .ph.r219{ aspect-ratio:21/9 } .ph.r32{ aspect-ratio:3/2 } .ph.sq{ aspect-ratio:1 }
.ph.has-img{ background:var(--bg-alt) } .ph.has-img img{ display:block; width:100%; height:100%; object-fit:cover }
.ind-sec .ind:nth-child(2) .ph:not(.has-img){ background:linear-gradient(160deg,#f6f0e6 0%,#ece1cf 100%); color:#b9a27e }
.ind-sec .ind:nth-child(3) .ph:not(.has-img){ background:linear-gradient(160deg,#eaf4ef 0%,#d8eadf 100%); color:#8db39d }
.ind-sec .ind:nth-child(4) .ph:not(.has-img){ background:linear-gradient(160deg,#f5edf1 0%,#eadbe3 100%); color:#b897a8 }
.ind-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:30px }
.ind{ margin:0 } .ind figcaption{ padding:12px 4px 0; font:800 1.02rem/1.3 "Manrope",sans-serif; color:var(--ink) }
.ind .ph{ box-shadow:0 18px 40px -30px rgba(11,37,69,.45); transition:transform .35s } .ind:hover .ph{ transform:translateY(-4px) }
.pband{ padding:74px 0 } .pband-in{ position:relative }
.pband .ph{ justify-items:end; padding-right:12% } .pband .ph > svg{ width:clamp(36px,7%,64px) }
.pband-card{ position:absolute; left:56px; bottom:30px; max-width:430px; background:#fff; border-radius:18px; padding:22px 24px; box-shadow:var(--shadow-lg) }
.pband-card b{ display:block; font:800 1.3rem/1.25 "Manrope",sans-serif; color:var(--navy) }
.pband-card span{ display:block; margin-top:8px; font-size:.97rem; line-height:1.55; color:var(--ink-2) }
.team-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center }
.team-sec .ph > svg{ width:clamp(36px,14%,64px) }
.team-txt h2{ margin-bottom:12px } .team-txt p{ color:var(--ink-2); font-size:1.04rem } .team-txt .actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap }
@media (max-width:900px){ .ind-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px } .team-grid{ grid-template-columns:minmax(0,1fr); gap:28px } }
@media (max-width:720px){ .pband .ph{ aspect-ratio:4/3; justify-items:center; padding-right:0; align-items:start; padding-top:14% }
  .pband-card{ position:relative; left:auto; bottom:auto; margin:-34px 14px 0; padding:18px } .pband-card b{ font-size:1.12rem } }

/* ---------- 5. small tilted tiles beside three headings (7-9) + round ones in the closing band (10-13) ---------- */
.sprk-wrap{ position:relative }
.sprk{ position:absolute; right:24px; top:-46px; width:clamp(128px,12vw,165px); border:6px solid #fff; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 44px -26px rgba(11,37,69,.55); transition:transform .4s }
.sprk.tr{ transform:rotate(3deg) } .sprk.tl{ transform:rotate(-3deg) } .sprk:hover{ transform:rotate(0) scale(1.03) }
.sprk .ph{ border-radius:12px } .sprk .ph > svg{ width:34% }
.cta-faces{ display:flex; justify-content:center; margin-bottom:22px }
.cta-faces .ph{ width:56px; height:56px; border-radius:50%; border:3px solid var(--navy); box-shadow:0 0 0 2px rgba(255,255,255,.25);
  background:#2a4a75; color:#c9d8ec; overflow:visible }
.cta-faces .ph.has-img{ overflow:hidden } .cta-faces .ph > svg{ width:24px }
.cta-faces .ph + .ph{ margin-left:-12px }
@media (max-width:1020px){ .sprk{ display:none } }

/* ---------- ?gorsel: slot numbers + what to look for (only for the owner; visuals.js adds html.cmr-slots) ---------- */
.cmr-slots .ph:not(.has-img){ outline:2px dashed #9fb2ca; outline-offset:-2px }
.ph-no{ position:absolute; z-index:2; left:10px; top:10px; padding:6px 10px; border-radius:999px; background:#d9480f; color:#fff;
  font:800 .72rem/1 "Manrope",sans-serif; letter-spacing:.04em; box-shadow:0 4px 12px -4px rgba(0,0,0,.4) }
.ph-lab{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:5px; padding:44px 16px 16px; color:#33435c;
  background:rgba(240,245,250,.9) }
.ph-lab b{ font:700 .9rem/1.35 "Manrope",sans-serif; color:var(--ink); max-width:300px }
.ph-lab small{ font-size:.74rem; color:var(--muted) }
.ph-lab span{ font-size:.78rem; color:var(--muted) } .ph-lab a{ color:var(--accent); font-weight:700; text-decoration:underline }
.sprk .ph-lab{ padding:34px 8px 8px } .sprk .ph-lab b{ font-size:.66rem } .sprk .ph-lab small, .sprk .ph-lab span{ display:none }
.sprk .ph-no{ left:6px; top:6px; padding:4px 7px; font-size:.62rem }
.cta-faces .ph-lab{ display:none }
.cta-faces .ph-no{ left:50%; top:-12px; transform:translateX(-50%); padding:3px 6px; font-size:.6rem }
.cmr-slots-bar{ position:fixed; z-index:60; left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:12px; align-items:center;
  padding:10px 16px; border-radius:999px; background:#0b2545; color:#fff; font:600 .82rem/1.3 "Manrope",sans-serif; box-shadow:0 14px 34px -12px rgba(0,0,0,.5) }
.cmr-slots-bar a{ color:#ffd8a8; font-weight:800 }
@media (max-width:480px){ .ph-lab{ padding:38px 10px 10px } .ph-lab b{ font-size:.78rem } .ph-lab small{ font-size:.68rem } .cmr-slots-bar{ left:12px; right:84px; transform:none; border-radius:16px } }

/* ---------- 6. subpages (2026-10-27, subpages.py): hero tile, plain photo band, guide figure; faces as on the home page ---------- */
.hero-sub > .wrap.hs-on{ position:relative }
.sprk.hs{ top:50%; right:24px; width:clamp(150px,13vw,188px) }
.sprk.hs.tr{ transform:translateY(-50%) rotate(3deg) } .sprk.hs.tl{ transform:translateY(-50%) rotate(-3deg) }
.sprk.hs:hover{ transform:translateY(-50%) scale(1.03) }
@media (min-width:1021px){ .hero-sub > .wrap.hs-on > :not(.sprk){ max-width:calc(100% - 250px) } }
.pband-plain{ padding:56px 0 } .pband-plain .ph{ justify-items:center; padding-right:0 } .pband-plain .ph > svg{ width:clamp(36px,6%,60px) }
.ph.r31{ aspect-ratio:3/1 }
.ph.r169{ aspect-ratio:16/9 }
.art-fig{ margin:34px 0 4px } .art-fig .ph{ border-radius:16px } .art-fig .ph > svg{ width:clamp(30px,10%,52px) }
@media (max-width:720px){ .pband-plain{ padding:34px 0 } .pband-plain .ph{ aspect-ratio:16/9 } }