/* ==========================================================================
   Sizin Kareniz — Albümlerim paneli ve etkinlik sihirbazı (site.css üzerine)
   Büyük dokunma alanları (≥ 48 px), 18 px gövde yazısı, AA kontrast
   ========================================================================== */

body.panel {
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(60% 40% at 0% 0%, rgba(243,226,196,.85), transparent 70%),
              radial-gradient(50% 35% at 100% 10%, rgba(246,228,222,.8), transparent 70%), var(--fildisi);
  background-attachment: fixed;
}
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Üst şerit */
.p-ust { position: sticky; top: 0; z-index: 30; background: rgba(251,248,243,.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(230,222,210,.7); }
.p-ust .kap { display: flex; align-items: center; justify-content: space-between; gap: var(--b2); height: 72px; }
.p-kisi { display: flex; align-items: center; gap: 12px; }
.p-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 1rem; color: #1A1410;
  background: var(--altin-metal); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px -8px rgba(122,86,40,.7); }
.p-kisi-ad { font-weight: 700; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-cikis { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cizgi); background: rgba(255,255,255,.7); font: 600 1rem var(--sans); color: var(--murekkep-2); cursor: pointer; }
.p-cikis:hover { border-color: var(--murekkep); color: var(--murekkep); }
@media (max-width: 599px) { .p-kisi-ad { display: none; } .logo { font-size: 1.5rem; } .logo svg { width: 34px; height: 34px; } }

.p-ana { padding-block: var(--b5) var(--b7); }
.p-yuklen { min-height: 50vh; display: grid; place-items: center; color: var(--soluk); }
.p-yuklen svg { width: 40px; height: 40px; }

/* Karşılama */
.p-karsilama { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--b3) var(--b4); margin-bottom: var(--b5); }
.p-karsilama h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem); }
.p-karsilama h1 em { font-style: italic; font-weight: 500; background: linear-gradient(100deg, #7A5C2E, #A67C3F 45%, #7A5C2E 90%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .05em; }
.p-alt { margin-top: var(--b2); font-size: var(--y-giris); color: var(--murekkep-2); max-width: 46ch; }
@media (max-width: 599px) { .p-karsilama .btn { width: 100%; } }

.p-duyuru { margin-bottom: var(--b3); padding: 14px 18px; border-radius: var(--r2); font-weight: 600; background: #FFF6E5; border: 1px solid #F0DDB8; color: #5E4617; }
.p-duyuru.iyi { background: #EAF4EE; border-color: #BFD9C9; color: var(--basari); }
.p-hata { color: #A1261B; font-weight: 600; margin-top: 8px; }

/* Hediye bandı */
.p-hediye { display: flex; align-items: center; gap: var(--b2); margin-bottom: var(--b4); padding: var(--b2) var(--b3); border-radius: var(--r2);
  border: 1.5px solid transparent; background: linear-gradient(#FFFBF3, #FFFBF3) padding-box, var(--altin-metal) border-box; box-shadow: 0 16px 40px -28px rgba(122,92,46,.6); }
.p-hediye-ikon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--altin-metal); color: #1A1410; }
.p-hediye-ikon svg { width: 26px; height: 26px; }
.p-hediye b { display: block; font-size: 1.125rem; }
.p-hediye span { color: var(--murekkep-2); }
/* Kişiye özel sınırsız hediye: kadife zemin, altın yazı */
.p-hediye small { display: block; margin-bottom: 2px; font: 700 .8125rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--altin-yazi); }
.p-hediye.ozel { position: relative; overflow: hidden; padding: var(--b3); border-color: transparent;
  background: radial-gradient(120% 160% at 0% 0%, #3A2A1F 0%, #1E1A17 65%) padding-box, var(--altin-metal) border-box; color: #F6EFE3; box-shadow: 0 24px 60px -30px rgba(30,26,23,.8); }
.p-hediye.ozel::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,205,143,.22), transparent); pointer-events: none; }
.p-hediye.ozel small { color: #E8CD8F; }
.p-hediye.ozel b { font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.2 var(--serif); color: #fff; margin-bottom: 6px; }
.p-hediye.ozel span { color: #D9CCB6; }
.p-hediye.ozel .p-hediye-ikon { width: 60px; height: 60px; border-radius: 50%; align-self: flex-start; }
@media (max-width: 479px) { .p-hediye.ozel { flex-direction: column; align-items: flex-start; } }

.kart-yuzey { background: rgba(255,255,255,.92); border: 1px solid var(--cizgi); border-radius: var(--r3); box-shadow: 0 24px 50px -36px rgba(30,26,23,.45); }
.p-ad { padding: var(--b4); margin-bottom: var(--b4); }
.p-ad h2 { font-size: 2rem; }
.p-ad p { color: var(--soluk); margin-top: 6px; }
.p-ad form { display: flex; flex-wrap: wrap; gap: var(--b1); margin-top: var(--b3); }
.p-ad input { flex: 1 1 260px; }

/* Ortak giriş kutuları */
.panel input[type=text], .panel input[type=date], .panel input[type=number] {
  min-height: 60px; border: 2px solid var(--cizgi); border-radius: 16px; padding: 12px 16px; width: 100%;
  font: 500 1.1875rem/1.3 var(--sans); color: var(--murekkep); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.panel input:focus { outline: none; border-color: var(--murekkep); box-shadow: 0 0 0 4px rgba(221,187,127,.3); }
.panel input[aria-invalid=true] { border-color: #A1261B; }

/* ---------- Etkinlik kartları ---------- */
.p-liste { display: grid; gap: var(--b3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.e-kart { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r3);
  box-shadow: 0 30px 60px -44px rgba(30,26,23,.55); transition: transform .5s var(--yay), box-shadow .5s var(--yay); }
.e-kart:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(30,26,23,.55); }
.e-kapak { position: relative; height: 150px; display: flex; align-items: flex-end; justify-content: space-between; padding: var(--b2) var(--b3); color: #fff; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, var(--k1), var(--k2)); }
.e-kapak::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kum); opacity: .05; }
.e-kapak-ikon { position: absolute; right: -14px; top: -18px; width: 150px; height: 150px; opacity: .22; z-index: -1; }
.e-tur { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .9375rem; font-weight: 700; letter-spacing: .02em; }
.e-tur svg { width: 18px; height: 18px; }
.e-geri-sayim { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; text-align: right; line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.e-geri-sayim small { display: block; font-family: var(--sans); font-size: .8125rem; font-weight: 600; opacity: .9; }
/* Tür paletleri */
.k-dugun { --k1: #B48C50; --k2: #5A4020; }
.k-nisan { --k1: #C98B86; --k2: #6E3B40; }
.k-soz { --k1: #D6A79B; --k2: #7D4A45; }
.k-kina { --k1: #A3263A; --k2: #4A0E1A; }
.k-sunnet { --k1: #2F4A8A; --k2: #16224A; }
.k-mezuniyet { --k1: #34465E; --k2: #141B28; }
.k-dogumgunu { --k1: #E08E6D; --k2: #9A4A32; }
.k-babyshower { --k1: #8FB5A8; --k2: #3F6B61; }
.k-kurumsal { --k1: #55606E; --k2: #1F2630; }
.k-diger { --k1: #9C8466; --k2: #4A3D2E; }

.e-govde { padding: var(--b3); display: flex; flex-direction: column; gap: var(--b2); flex: 1; container: e-govde / inline-size; }
@media (max-width: 399px) { .e-govde { padding: var(--b3) var(--b2); } }
.e-govde h2 { font-size: 1.875rem; line-height: 1.1; }
.e-bilgi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--murekkep-2); }
.e-bilgi li { display: flex; align-items: center; gap: 10px; }
.e-bilgi svg { width: 20px; height: 20px; color: var(--altin-yazi); flex: none; }
.e-durum { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 1rem; line-height: 1.45; }
.e-durum b { display: block; }
.e-durum i { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 7px; }
.e-durum.taslak { background: #FFF6E5; color: #5E4617; }
.e-durum.taslak i { background: #D29A2E; box-shadow: 0 0 0 4px rgba(210,154,46,.2); }
.e-durum.aktif { background: #EAF4EE; color: #1F5A40; }
.e-durum.aktif i { background: #2F9A63; box-shadow: 0 0 0 4px rgba(47,154,99,.2); animation: nabiz 2s ease-in-out infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 7px rgba(47,154,99,.05); } }
.e-durum.bitti { background: #F2EFEA; color: var(--soluk); }
.e-durum.bitti i { background: #A89F94; }
.e-eylem { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: var(--b1); }
.e-eylem .btn { min-width: 0; min-height: 52px; padding: 0 18px; font-size: 1rem; }
.e-eylem .btn:first-child { grid-column: 1 / -1; }
/* Kart daraldığında (çok sütunlu ızgara, büyütülmüş ekran, telefon) düğmeler alt alta dizilir; hiçbiri taşmaz */
@container e-govde (max-width: 359px) { .e-eylem { grid-template-columns: 1fr; } }
.e-kucuk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--b2); }
.e-kucuk button, .e-kucuk a { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font: 600 1rem var(--sans); color: var(--soluk); text-decoration: none; }
.e-kucuk button:hover, .e-kucuk a:hover { color: var(--murekkep); }
.e-kucuk svg { width: 18px; height: 18px; }
.e-kucuk .sil:hover { color: #A1261B; }

/* Yeni etkinlik kutusu (listenin sonunda) */
.e-yeni { min-height: 320px; display: grid; place-items: center; align-content: center; gap: var(--b2); text-align: center; padding: var(--b4); cursor: pointer;
  border-radius: var(--r3); border: 2px dashed rgba(180,140,80,.55); background: rgba(255,255,255,.45); font: inherit; color: var(--murekkep); transition: background .3s, border-color .3s, transform .5s var(--yay); }
.e-yeni:hover { background: rgba(255,255,255,.85); border-color: #B48C50; transform: translateY(-4px); }
.e-yeni-ikon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--altin-metal); color: #1A1410; box-shadow: 0 14px 30px -12px rgba(196,154,92,.8); transition: transform .5s var(--yay); }
.e-yeni:hover .e-yeni-ikon { transform: rotate(90deg); }
.e-yeni-ikon svg { width: 30px; height: 30px; }
.e-yeni b { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; }
.e-yeni span { color: var(--soluk); max-width: 26ch; }

/* Boş durum */
.p-bos { text-align: center; padding: var(--b6) var(--b3); max-width: 640px; margin: 0 auto; }
.p-bos h2 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); margin-top: var(--b4); }
.p-bos p { margin: var(--b3) auto var(--b4); color: var(--murekkep-2); font-size: var(--y-giris); }
.p-bos-kartlar { position: relative; height: 210px; }
.p-bos-kartlar img { position: absolute; left: 50%; top: 10px; width: 120px; height: auto; margin-left: -60px; border-radius: 8px; box-shadow: 0 24px 40px -18px rgba(30,26,23,.5); transform-origin: 50% 120%; animation: yelpaze 1s var(--yay) both; }
.p-bos-kartlar img:nth-child(1) { --a: -16deg; --x: -58%; }
.p-bos-kartlar img:nth-child(2) { --a: 0deg; --x: 0; z-index: 1; top: 0; }
.p-bos-kartlar img:nth-child(3) { --a: 16deg; --x: 58%; }
@keyframes yelpaze { from { transform: rotate(0) translateX(0); opacity: 0; } to { transform: rotate(var(--a)) translateX(var(--x)); opacity: 1; } }

/* ==========================================================================
   Sihirbaz
   ========================================================================== */
.sihirbaz { padding: 0; border: 0; width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); border-radius: 28px; background: var(--fildisi); color: var(--murekkep);
  box-shadow: 0 50px 120px -30px rgba(15,12,10,.6); overflow: hidden; }
.sihirbaz::backdrop { background: rgba(15,12,10,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sihirbaz[open] { animation: acil .45s var(--yay); }
@keyframes acil { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@media (max-width: 639px) {
  .sihirbaz { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .sihirbaz[open] { animation-name: yukari; }
  @keyframes yukari { from { transform: translateY(40px); opacity: 0; } }
}
.s-kap { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.s-ust { display: flex; align-items: center; gap: var(--b2); padding: 14px var(--b2); border-bottom: 1px solid var(--cizgi); background: rgba(255,255,255,.6); }
.s-simge { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; border: 1px solid var(--cizgi); color: var(--murekkep); cursor: pointer; }
.s-simge:hover { border-color: var(--murekkep); }
.s-simge svg { width: 22px; height: 22px; }
#s-geri svg { transform: scaleX(-1); }
#s-geri[hidden] { display: grid !important; visibility: hidden; }
.s-cizgi { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.s-cizgi li { position: relative; padding-top: 12px; font-size: .875rem; font-weight: 700; color: var(--soluk); text-align: center; }
.s-cizgi li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 5px; background: var(--cizgi); transition: background .4s; }
.s-cizgi li.yapildi::before, .s-cizgi li.simdi::before { background: var(--altin-metal); }
.s-cizgi li.simdi { color: var(--murekkep); }
@media (max-width: 420px) { .s-cizgi span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .s-cizgi li { padding-top: 5px; } }

.s-govde { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--b4) var(--b3) var(--b3); }
@media (min-width: 640px) { .s-govde { padding: var(--b5) var(--b5) var(--b4); } }
.s-adim { animation: adimGir .45s var(--yay); }
@keyframes adimGir { from { opacity: 0; transform: translateX(18px); } }
.s-adim.geri { animation-name: adimGeri; }
@keyframes adimGeri { from { opacity: 0; transform: translateX(-18px); } }
.s-adim h2 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); outline: none; }
.s-acik { margin: 8px 0 var(--b4); color: var(--soluk); font-size: 1.125rem; }

.s-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--b2); padding: 14px var(--b3) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); background: rgba(255,255,255,.75); }
.s-sayac { color: var(--soluk); font-weight: 600; }
.s-alt .btn { min-width: 200px; }
@media (max-width: 479px) { .s-alt .btn { flex: 1; min-width: 0; } .s-sayac { display: none; } }

/* 1: tür kutuları */
.tur-izgara { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .tur-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .tur-izgara { grid-template-columns: repeat(4, 1fr); } }
.tur { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; min-height: 132px; cursor: pointer;
  border-radius: 20px; background: #fff; border: 1.5px solid var(--cizgi); transition: border-color .25s, box-shadow .3s, transform .4s var(--yay); }
.tur:hover { border-color: rgba(180,140,80,.6); transform: translateY(-2px); }
.tur input { position: absolute; opacity: 0; pointer-events: none; }
.tur-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--k1), var(--k2)); box-shadow: 0 10px 20px -12px var(--k2); }
.tur-ikon svg { width: 26px; height: 26px; }
.tur b { font-size: 1.0625rem; line-height: 1.25; }
.tur small { color: var(--soluk); font-size: .875rem; line-height: 1.35; }
.tur:has(input:checked) { border-color: #B48C50; box-shadow: 0 0 0 3px rgba(221,187,127,.35), 0 18px 30px -20px rgba(122,92,46,.6); background: #FFFBF3; }
.tur:has(input:checked)::after { content: ""; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--altin-metal) center / 16px no-repeat, var(--altin-metal);
  -webkit-mask: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.tur:has(input:checked)::before { content: ""; position: absolute; top: 20px; right: 20px; width: 10px; height: 6px; border: solid #1A1410; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); z-index: 1; }
.tur:has(input:focus-visible) { outline: 3px solid var(--altin-yazi); outline-offset: 3px; }

/* 2: bilgiler */
.s-alan { margin-bottom: var(--b3); }
.s-alan label { display: block; font-weight: 700; margin-bottom: 8px; }
.s-alan label small { font-weight: 500; color: var(--soluk); font-size: .9375rem; margin-left: 4px; }
.s-iki { display: grid; gap: 0 var(--b2); }
@media (min-width: 560px) { .s-iki { grid-template-columns: 1fr 1.4fr; } }

/* 3: misafir sayısı */
.sayac { display: flex; align-items: center; justify-content: center; gap: var(--b2); }
.sayac-dugme { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; background: #fff; border: 1.5px solid var(--cizgi); color: var(--murekkep);
  box-shadow: 0 10px 20px -14px rgba(30,26,23,.5); transition: transform .3s var(--yay), border-color .2s; }
.sayac-dugme:hover { border-color: var(--murekkep); transform: scale(1.06); }
.sayac-dugme:active { transform: scale(.95); }
.sayac-dugme svg { width: 24px; height: 24px; }
.panel .sayac input[type=number] { width: 160px; min-height: 76px; text-align: center; font: 600 3rem/1 var(--serif); font-variant-numeric: lining-nums; border-radius: 20px; padding: 6px; -moz-appearance: textfield; }
.sayac input::-webkit-outer-spin-button, .sayac input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sayac-birim { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#s-kaydir { width: 100%; margin: var(--b3) 0 var(--b2); height: 28px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; --dolu: 14%; }
#s-kaydir::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #C49A5C var(--dolu), var(--cizgi) var(--dolu)); }
#s-kaydir::-moz-range-track { height: 8px; border-radius: 8px; background: var(--cizgi); }
#s-kaydir::-moz-range-progress { height: 8px; border-radius: 8px; background: #C49A5C; }
#s-kaydir::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--altin-metal); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(122,86,40,.5); }
#s-kaydir::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #C49A5C; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(122,86,40,.5); }
.hizli { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hizli button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--cizgi); background: #fff; font: 700 1rem var(--sans); color: var(--murekkep-2); cursor: pointer; transition: all .2s; }
.hizli button:hover { border-color: var(--murekkep); }
.hizli button[aria-pressed=true] { background: var(--murekkep); color: #FBF3E6; border-color: var(--murekkep); }

.tahmin { display: flex; gap: var(--b2); align-items: flex-start; margin: var(--b4) 0 var(--b3); padding: var(--b2) var(--b3); border-radius: var(--r2);
  background: linear-gradient(135deg, #2A221C, #15110E); color: #F3ECE2; }
.tahmin-ikon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(221,187,127,.16); color: #E3C893; }
.tahmin-ikon svg { width: 24px; height: 24px; }
.tahmin b { color: #F3DFB5; }
.tahmin small { display: block; color: rgba(243,236,226,.65); font-size: .875rem; margin-top: 2px; }

.paketler { display: grid; gap: 10px; }
.paket-sec { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px var(--b2); align-items: center; padding: 16px 18px; border-radius: 18px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--cizgi); transition: border-color .25s, box-shadow .3s, background .3s; }
.paket-sec:hover { border-color: rgba(180,140,80,.6); }
.paket-sec input { position: absolute; opacity: 0; pointer-events: none; }
.paket-sec:has(input:checked) { border-color: #B48C50; background: #FFFBF3; box-shadow: 0 0 0 3px rgba(221,187,127,.35); }
.paket-sec:has(input:focus-visible) { outline: 3px solid var(--altin-yazi); outline-offset: 3px; }
.ps-ad { font-weight: 800; font-size: 1.125rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-rozet { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #1A1410; background: var(--altin-metal); }
.ps-fiyat { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1; text-align: right; font-variant-numeric: lining-nums; }
.ps-alt { grid-column: 1 / -1; color: var(--soluk); font-size: .9375rem; }
.ps-cubuk { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: var(--krem); overflow: hidden; margin-top: 6px; }
.ps-cubuk i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2F9A63, #7CC49C); transform-origin: 0 50%; transition: transform .6s var(--yay); }
.ps-cubuk.dar i { background: linear-gradient(90deg, #D29A2E, #E8C074); }
.ps-cubuk.yetmez i { background: linear-gradient(90deg, #B8452F, #E08A6E); }
.ps-uyari { grid-column: 1 / -1; font-size: .9375rem; font-weight: 700; color: #8A3A22; }
.aile-oneri { margin-top: 12px; padding: 14px 18px; border-radius: 18px; border: 1.5px dashed rgba(180,140,80,.6); background: rgba(255,255,255,.6); font-size: 1rem; }
.aile-oneri button { background: none; border: 0; padding: 0; font: 700 1rem var(--sans); color: var(--altin-yazi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.hediye-not { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: #FFFBF3; border: 1.5px solid #E3C893; }
.hediye-not svg { width: 28px; height: 28px; color: var(--altin-yazi); flex: none; }

/* 4: özet */
.ozet { margin: 0; border-radius: var(--r2); background: #fff; border: 1px solid var(--cizgi); overflow: hidden; }
.ozet > div { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: var(--b2); align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
.ozet > div:last-child { border-bottom: 0; }
.ozet dt { color: var(--soluk); font-weight: 600; }
.ozet dd { margin: 0; font-weight: 700; }
.ozet button { background: none; border: 0; cursor: pointer; font: 600 .9375rem var(--sans); color: var(--altin-yazi); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 4px; }
@media (max-width: 479px) { .ozet > div { grid-template-columns: 1fr auto; gap: 2px 12px; } .ozet dt { grid-column: 1; font-size: .9375rem; } .ozet dd { grid-column: 1; } .ozet button { grid-row: 1 / span 2; grid-column: 2; } }
.bilgi-notu { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--b3); padding: 16px 18px; border-radius: 18px; background: #F3EFE8; color: var(--murekkep-2); }
.bilgi-notu svg { width: 24px; height: 24px; flex: none; color: var(--altin-yazi); margin-top: 2px; }

/* 5: tamam */
.s-tamam { text-align: center; padding-top: var(--b3); }
.tamam-rozet { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto var(--b3); display: grid; place-items: center; background: var(--altin-metal); color: #1A1410;
  box-shadow: 0 20px 40px -14px rgba(196,154,92,.8), inset 0 1px 0 rgba(255,255,255,.6); animation: rozet .7s cubic-bezier(.2,1.5,.4,1) both; }
.tamam-rozet svg { width: 46px; height: 46px; }
@keyframes rozet { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
.s-tamam .s-acik { max-width: 44ch; margin-inline: auto; }
.tamam-eylem { display: grid; gap: 10px; max-width: 420px; margin: 0 auto; }
.tamam-eylem .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) { .s-adim, .sihirbaz[open], .tamam-rozet, .p-bos-kartlar img { animation: none !important; } }

/* ---------- Görev düzenleyici ---------- */
.gd-bas { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.gd-sayac { font-size: .9375rem; font-weight: 700; color: var(--soluk); }
.gd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd-oge { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 16px; background: #fff; border: 1.5px solid var(--cizgi);
  box-shadow: 0 8px 18px -16px rgba(30,26,23,.5); animation: gdGir .35s var(--yay); }
@keyframes gdGir { from { opacity: 0; transform: translateY(6px); } }
.gd-no { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: #1A1410; background: var(--altin-metal); }
.panel input.gd-metin { min-height: 48px; border: 1.5px solid transparent; border-radius: 12px; padding: 8px 10px; font-size: 1.0625rem; font-weight: 600; background: transparent; box-shadow: none; }
.panel input.gd-metin:hover { border-color: var(--cizgi); }
.panel input.gd-metin:focus { background: #fff; border-color: var(--murekkep); box-shadow: 0 0 0 4px rgba(221,187,127,.3); }
.gd-dugmeler { display: flex; gap: 2px; }
.gd-dugmeler button { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 0; background: transparent; color: var(--soluk); cursor: pointer; }
.gd-dugmeler button:hover:not(:disabled) { background: var(--krem); color: var(--murekkep); }
.gd-dugmeler button:disabled { opacity: .3; cursor: default; }
.gd-dugmeler .gd-sil:hover { background: #FBEAE8; color: #A1261B; }
.gd-dugmeler svg { width: 20px; height: 20px; }
@media (max-width: 479px) { .gd-oge { grid-template-columns: 32px 1fr; } .gd-no { width: 30px; height: 30px; font-size: 1rem; } .gd-dugmeler { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; } }
.gd-bos { padding: 18px; border-radius: 16px; border: 1.5px dashed var(--cizgi); color: var(--soluk); text-align: center; }
.gd-ekle { display: flex; gap: 8px; margin-top: 12px; }
.gd-ekle input { flex: 1; }
.gd-ekle-dugme { display: inline-flex; align-items: center; gap: 6px; min-height: 60px; padding: 0 20px; border-radius: 16px; border: 0; cursor: pointer; font: 700 1.0625rem var(--sans); color: #FBF3E6;
  background: linear-gradient(180deg, #2E2723, #15110E); }
.gd-ekle-dugme:disabled { opacity: .4; cursor: default; }
.gd-ekle-dugme svg { width: 20px; height: 20px; }
@media (max-width: 419px) { .gd-ekle-dugme span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gd-ekle-dugme { padding: 0 18px; } }
.gd-oneri-baslik { margin: 22px 0 10px; font-weight: 800; }
.gd-oneri-baslik small { font-weight: 500; color: var(--soluk); margin-left: 6px; }
.gd-oneriler { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-oneri { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 600 .9375rem var(--sans); color: var(--murekkep-2);
  background: #fff; border: 1.5px solid var(--cizgi); transition: border-color .2s, transform .3s var(--yay); }
.gd-oneri:hover:not(:disabled) { border-color: #B48C50; transform: translateY(-1px); }
.gd-oneri svg { width: 16px; height: 16px; color: var(--altin-yazi); }
.gd-oneri.eklendi { background: #EAF4EE; border-color: #BFD9C9; color: var(--basari); }
.gd-oneri.eklendi svg { color: var(--basari); }
.gd-oneri:disabled:not(.eklendi) { opacity: .45; }
