/* Lezzet Eşleş (#/esles). Renkler: logo petrolü ve turuncusu + Ne yesem? kehribarı. Uygulamada da aynı renkte kalsın diye
   uygulama renk dönüştürücüsünden muaftır (scripts/uygulama_renk.py SERBEST). */
.es,.es-esles{--es-koyu:#062B4A;--es-tur:#FF6A00;--es-pembe:#FF2E63;--es-yesil:#10B981;--es-sicak:linear-gradient(120deg,#F59E0B,#FF6A00 45%,#FF2E63);}
.es{padding-bottom:40px}
.es .wrap{max-width:560px}
.es-ust{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--es-tur)}
.es-yuk{display:grid;place-items:center;min-height:60vh}.es-yuk .sk{width:100%;height:420px;border-radius:28px}

/* kurulum */
.es-kur{padding-top:18px}
.es-hero{position:relative;display:grid;gap:18px;padding:22px;border-radius:28px;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(90% 70% at 100% 0%,rgb(255 106 0 / .45),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgb(255 46 99 / .35),transparent 60%),linear-gradient(160deg,#0B4A73,#062B4A 70%)}
.es-hero h1{margin:4px 0 6px;font-size:34px;line-height:1.05;font-weight:850;letter-spacing:-.03em}
.es-hero p{margin:0;color:rgb(255 255 255 / .86);font-size:15px;line-height:1.5}
.es-hero p b{color:#fff}
.es-hero .es-ust{color:#FFC94D}
.es-yigin{position:relative;height:170px}
.es-yk{position:absolute;top:8px;left:50%;width:120px;height:150px;margin-left:-60px;border-radius:18px;overflow:hidden;background:#123;
  box-shadow:0 18px 30px -12px rgb(0 0 0 / .6);border:3px solid #fff}
.es-yk img{width:100%;height:100%;object-fit:cover}
.es-yk b{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;background:linear-gradient(transparent,rgb(0 0 0 / .75));font-size:12px;font-weight:800}
.es-yk0{transform:translateX(-70px) rotate(-12deg)}.es-yk1{transform:translateX(70px) rotate(12deg)}.es-yk2{transform:translateY(-4px);z-index:1}
@media (prefers-reduced-motion:no-preference){
  .es-yk0{animation:es-sol 4s ease-in-out infinite}.es-yk1{animation:es-sag 4s ease-in-out infinite}
  @keyframes es-sol{50%{transform:translateX(-80px) rotate(-16deg)}}
  @keyframes es-sag{50%{transform:translateX(80px) rotate(16deg)}}
}
.es-kalp{position:absolute;z-index:2;left:50%;bottom:-4px;display:grid;place-items:center;width:52px;height:52px;margin-left:-26px;border-radius:50%;
  background:var(--es-sicak);box-shadow:0 10px 24px -6px rgb(255 46 99 / .8),0 0 0 4px rgb(255 255 255 / .9)}
.es-kalp .ic{width:24px;height:24px;color:#fff;fill:#fff}
@media (prefers-reduced-motion:no-preference){.es-kalp{animation:es-atis 1.6s ease-in-out infinite}@keyframes es-atis{15%{transform:scale(1.15)}30%{transform:scale(1)}}}
.es-adim{display:flex;gap:8px;margin:14px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.es-adim li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 6px;border-radius:999px;background:rgb(255 255 255 / .12);font-size:13px;font-weight:700}
.es-adim b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--es-koyu);font-size:12px}

.es-form{display:grid;gap:18px;margin-top:20px}
.es-alan{display:grid;gap:9px;margin:0;padding:0;border:0;min-width:0}
.es-alan>span,.es-alan legend{padding:0;font-size:15px;font-weight:800;color:var(--ink)}
.es-alan small{font-weight:500;color:var(--muted)}
.es-alan input,.es-alan select{height:50px;padding:0 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-size:16px;color:var(--ink)}
.es-alan input:focus,.es-alan select:focus{outline:none;border-color:var(--es-tur);box-shadow:0 0 0 4px rgb(255 106 0 / .15)}
.es-cipler{display:flex;flex-wrap:wrap;gap:8px}
.es-cip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px 0 5px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);
  font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.es-cip img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.es-cip:active{transform:scale(.95)}
.es-cip.on{border-color:transparent;background:var(--es-sicak);color:#fff;box-shadow:0 8px 18px -10px rgb(255 46 99 / .8)}
.es-yer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.es-yer button{display:grid;justify-items:center;gap:4px;padding:12px 6px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.es-yer button .ic{width:20px;height:20px;color:var(--muted)}
.es-yer button.on{border-color:var(--es-tur);background:color-mix(in srgb,var(--es-tur) 8%,var(--surface))}
.es-yer button.on .ic{color:var(--es-tur)}
.es-km{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.es-km button{height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.es-km button.on{background:var(--es-sicak);border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px rgb(255 46 99 / .8)}
.es-km small{flex-basis:100%;color:var(--muted);font-size:12.5px}
.es-kur-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;height:58px;border:0;border-radius:18px;background:var(--es-sicak);background-size:160% 100%;
  color:#fff !important;font:inherit;font-size:17px;font-weight:850;letter-spacing:-.01em;text-decoration:none !important;cursor:pointer;
  box-shadow:0 16px 30px -14px rgb(255 46 99 / .9),inset 0 1px 0 rgb(255 255 255 / .3);transition:transform .15s,background-position .4s}
.es-kur-btn .ic{width:20px;height:20px;fill:currentColor}
.es-kur-btn:hover{background-position:100% 0}.es-kur-btn:active{transform:scale(.98)}.es-kur-btn:disabled{opacity:.7}
.es-not{margin:0;color:var(--muted);font-size:12.5px;text-align:center;line-height:1.5}

/* oda */
.es-oda{padding-top:10px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 6px)}
.es-oda-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.es-oda-ust h1{margin:2px 0 0;font-size:19px;font-weight:850;letter-spacing:-.02em;color:var(--ink)}
.es-oda-ust .es-ust b{color:var(--ink);letter-spacing:.12em}
.es-paylas{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;border:0;background:#25D366;color:#fff;box-shadow:0 8px 18px -8px rgb(37 211 102 / .8);font:inherit;font-size:14px;font-weight:750;cursor:pointer}
.es-paylas .ic{width:17px;height:17px}
.es-kisiler{display:flex;gap:10px;margin:10px 0 2px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.es-kisi{flex:none;display:grid;justify-items:center;gap:3px;width:46px;padding:0;border:0;background:none;font:inherit;cursor:default}
.es-kisi i{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;font-size:15px;font-weight:850;color:#fff;
  background:conic-gradient(var(--r) calc(var(--p,0) * 1%),color-mix(in srgb,var(--r) 25%,transparent) 0);padding:3px}
.es-kisi i::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--r);z-index:-1}
.es-kisi i{isolation:isolate}
.es-kisi.bitti i::after{content:"✓";position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--es-yesil);
  color:#fff;font-size:11px;box-shadow:0 0 0 2px var(--bg,#fff)}
.es-kisi small{max-width:52px;font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-kisi.ben small{color:var(--ink);font-weight:800}
.es-davet{cursor:pointer}
.es-davet i{background:none;border:2px dashed color-mix(in srgb,var(--es-tur) 60%,transparent);color:var(--es-tur);padding:0}
.es-davet i::before{display:none}.es-davet .ic{width:20px;height:20px}

.es-deste{position:relative;margin-top:30px !important;height:clamp(230px,calc(100svh - 440px),540px);touch-action:pan-y}
.es-kart{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:#101418;color:#fff;user-select:none;-webkit-user-select:none;
  transform:translateY(calc(var(--i) * -11px)) scale(calc(1 - var(--i) * .05));transform-origin:50% 0;transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 24px 44px -24px rgb(6 43 74 / .8)}
.es-kart.ust{cursor:grab;touch-action:none}
.es-kart.surukleniyor{transition:none;cursor:grabbing}
.es-kart.git-sag{transform:translate(130%,-20px) rotate(24deg) !important;transition:transform .3s ease-in}
.es-kart.git-sol{transform:translate(-130%,-20px) rotate(-24deg) !important;transition:transform .3s ease-in}
.es-kart-f{position:absolute;inset:0}
.es-kart-f img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.es-kart-f::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0 / .15),transparent 30%,transparent 45%,rgb(0 0 0 / .85))}
.es-kart-y{position:absolute;left:0;right:0;bottom:0;display:grid;gap:5px;padding:22px}
.es-kart-kat{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#FFC94D}
.es-kart h2{margin:0;font-size:28px;line-height:1.1;font-weight:850;letter-spacing:-.02em;text-shadow:0 2px 12px rgb(0 0 0 / .4)}
.es-kart-alt{display:flex;align-items:center;gap:6px;margin:0;font-size:14.5px;color:rgb(255 255 255 / .88);flex-wrap:wrap}
.es-kart-alt .ic{width:15px;height:15px}
.es-puan{margin-left:auto;padding:3px 9px;border-radius:999px;background:rgb(255 255 255 / .18);backdrop-filter:blur(6px);font-weight:800}
.es-puan small{font-weight:600;opacity:.8}
.es-temsili{font-size:11px;color:rgb(255 255 255 / .55)}
.es-damga{position:absolute;top:26px;padding:8px 18px;border:5px solid;border-radius:16px;font-size:38px;background:rgb(0 0 0 / .25);font-weight:900;letter-spacing:.04em;opacity:0;z-index:2;pointer-events:none}
.es-damga.evet{left:22px;color:#34D399;border-color:#34D399;transform:rotate(-14deg);opacity:var(--evet,0)}
.es-damga.hayir{right:22px;color:#FB7185;border-color:#FB7185;transform:rotate(14deg);opacity:var(--hayir,0)}
.es-sayac{margin:6px 0 0;text-align:center;font-size:13px;font-weight:750;color:var(--muted);font-variant-numeric:tabular-nums}
.es-dugmeler{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:6px}
.es-d{display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);cursor:pointer;transition:transform .15s;
  box-shadow:0 14px 28px -14px rgb(6 43 74 / .55),inset 0 0 0 1px var(--line)}
.es-d:active{transform:scale(.9)}
.es-d.hayir,.es-d.evet{width:64px;height:64px}
.es-d.bilgi{width:50px;height:50px}
.es-d .ic{width:30px;height:30px}
.es-d.hayir .ic{color:#F43F5E;stroke-width:3}
.es-d.evet{background:var(--es-sicak)}.es-d.evet .ic{color:#fff;fill:#fff}
.es-d.bilgi .ic{width:21px;height:21px;color:var(--ink)}
.es-ipucu{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}

/* bekleme ve sonuç */
.es-bekle{display:grid;justify-items:center;gap:12px;margin-top:20px;padding:28px 20px;border-radius:28px;text-align:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.es-bekle h2{margin:0;font-size:21px;font-weight:850;letter-spacing:-.02em;color:var(--ink)}
.es-bekle p{margin:0;color:var(--muted);line-height:1.5}
.es-bekle-hal{position:relative;display:grid;place-items:center;width:110px;height:110px}
.es-bekle-hal span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--es-tur);opacity:0}
.es-bekle-hal .ic{width:40px;height:40px;color:var(--es-pembe);fill:var(--es-pembe)}
@media (prefers-reduced-motion:no-preference){.es-bekle-hal span{animation:es-dalga 2.4s ease-out infinite}.es-bekle-hal span:nth-child(2){animation-delay:.8s}.es-bekle-hal span:nth-child(3){animation-delay:1.6s}
  @keyframes es-dalga{from{transform:scale(.4);opacity:.8}to{transform:scale(1.1);opacity:0}}}
.es-sonuc{display:grid;gap:12px;width:100%;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.es-mini{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:color-mix(in srgb,var(--es-tur) 7%,var(--surface));text-align:left}
.es-mini img{flex:none;width:72px;height:72px;border-radius:14px;object-fit:cover}
.es-mini div{display:grid;gap:3px;min-width:0}
.es-mini b{font-size:17px;font-weight:850;color:var(--ink)}
.es-mini small{font-size:13px;color:var(--muted)}
.es-eylem{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0;width:100%}
.es-ikincil{display:inline-flex;align-items:center;gap:7px;height:58px;padding:0 18px;border-radius:18px;background:var(--ink);color:var(--surface) !important;font-weight:800;text-decoration:none !important}
.es-ikincil .ic{width:18px;height:18px}
.es-yeni{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-weight:750;color:var(--ink);cursor:pointer}
.es-yeni .ic{width:18px;height:18px}
.es-katil .es-form{width:100%;margin-top:6px}
.es-esles-kisiler{display:flex;justify-content:center}
.es-esles-kisiler i{display:grid;place-items:center;width:40px;height:40px;margin-left:-8px;border-radius:50%;background:var(--r);color:#fff;font-style:normal;font-weight:850;box-shadow:0 0 0 3px #fff}
.es-esles-kisiler i:first-child{margin-left:0}

/* eşleşme ekranı */
.es-esles{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:radial-gradient(80% 60% at 50% 30%,rgb(255 106 0 / .45),transparent 70%),rgb(6 20 36 / .88);
  backdrop-filter:blur(6px);animation:es-gir .3s ease-out}
@keyframes es-gir{from{opacity:0}}
.es-esles-kutu{position:relative;display:grid;gap:12px;justify-items:center;width:min(420px,100%);padding:18px 18px 20px;border-radius:30px;background:var(--surface);text-align:center;
  box-shadow:0 40px 80px -30px #000;animation:es-zipla .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes es-zipla{from{transform:scale(.6) translateY(40px);opacity:0}}
.es-esles-f{position:relative;width:100%;height:190px;border-radius:22px;overflow:hidden}
.es-esles-f img{width:100%;height:100%;object-fit:cover}
.es-esles-f .es-esles-kisiler{position:absolute;left:0;right:0;bottom:-2px;padding-bottom:10px}
.es-esles h2{margin:0;font-size:40px;line-height:1;font-weight:900;letter-spacing:-.04em;background:var(--es-sicak);-webkit-background-clip:text;background-clip:text;color:transparent}
.es-esles .es-mini{width:100%}
.es-kapat{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;cursor:pointer;padding:6px}
.es-konfeti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.es-konfeti i{position:absolute;top:-20px;left:var(--x);width:9px;height:15px;border-radius:2px;animation:es-dus var(--s) var(--d) cubic-bezier(.3,.6,.6,1) forwards}
@keyframes es-dus{to{transform:translateY(110vh) rotate(var(--r))}}

@media (min-width:720px){.es-hero{grid-template-columns:240px 1fr;align-items:center}.es-hero h1{font-size:40px}}

/* Ne yesem? ana sayfasındaki giriş kartı */
.es-giris{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:24px;color:#fff !important;text-decoration:none !important;isolation:isolate;position:relative;overflow:hidden;
  background:radial-gradient(70% 120% at 100% 0%,rgb(255 106 0 / .5),transparent 60%),linear-gradient(150deg,#0B4A73,#062B4A 70%);box-shadow:0 18px 34px -20px rgb(6 43 74 / .9)}
.es-giris::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .18) 50%,transparent 65%);transform:translateX(-120%)}
@media (prefers-reduced-motion:no-preference){.es-giris::after{animation:es-isik 5s ease-in-out infinite}@keyframes es-isik{0%,60%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}}
.es-giris-f{position:relative;flex:none;width:92px;height:70px}
.es-giris-f span{position:absolute;top:4px;left:calc(var(--i) * 22px);width:48px;height:62px;border-radius:11px;overflow:hidden;border:2px solid #fff;box-shadow:0 8px 16px -6px rgb(0 0 0 / .6);
  transform:rotate(calc((var(--i) - 1) * 10deg))}
.es-giris-f img{width:100%;height:100%;object-fit:cover}
.es-giris-y{display:grid;gap:2px;flex:1;min-width:0}
.es-giris-y small{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#FFC94D}
.es-giris-y b{font-size:20px;font-weight:850;letter-spacing:-.02em}
.es-giris-y span{font-size:13.5px;line-height:1.4;color:rgb(255 255 255 / .82)}
.es-giris-ok{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(120deg,#F59E0B,#FF6A00 45%,#FF2E63);box-shadow:0 8px 18px -6px rgb(255 46 99 / .8)}
.es-giris-ok .ic{width:21px;height:21px;color:#fff;fill:#fff}

/* kaydırırken kartın tamamı yeşile / kırmızıya boyanır; oy verilince ortada kısa bir rozet */
.es-kart::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgb(16 185 129 / calc(var(--evet,0) * .55)),transparent 70%),linear-gradient(270deg,rgb(244 63 94 / calc(var(--hayir,0) * .55)),transparent 70%)}
.es-kart.git-sag,.es-kart.git-sol{transition:transform .38s cubic-bezier(.5,0,.75,0) !important}
.es-oda{position:relative}
.es-flas{position:fixed;left:50%;top:48%;z-index:1100;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;color:#fff;
  font-size:22px;font-weight:900;transform:translate(-50%,-50%);pointer-events:none;animation:es-flas .9s ease-out forwards;box-shadow:0 18px 40px -12px rgb(0 0 0 / .6)}
.es-flas .ic{width:26px;height:26px;fill:currentColor}
.es-flas.evet{background:#10B981}.es-flas.hayir{background:#F43F5E}
@keyframes es-flas{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(.95)}}
.es-kisi.pasif{opacity:.35}