/* =====================================================================
   Dosya Adı : assets/css/t-siparis.css
   Amacı     : Sipariş sayfasının (siparis-ver.php, dahil/siparis-formu.php)
               görünümü: yapışkan sol sütun (başlık, dönen paket, canlı
               özet), form kartı, adet sayacı, şube kartları, adres onayı,
               hata ve başarı durumları. Ortak form parçaları tasarim.css'te.
   Hazırlayan: Özgür Elibol
   Oluşturma : 2026-09-28
   Güncelleme: 2026-09-28
   ===================================================================== */

/* siparis.js bölümleri hidden ile açıp kapatır; grid/flex kuralları ezmesin */
.sp [hidden] { display: none !important; }

/* =========================================================
   1. Yerleşim ve sol sütun
   ========================================================= */
.sp { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); padding: clamp(7.5rem, 14vw, 9.5rem) var(--kenar) clamp(5rem, 10vw, 7rem); }
.sp-sol { position: sticky; top: 7rem; align-self: start; }
.sp-ust { font-weight: 600; color: var(--saman); margin-bottom: .6rem; }
.sp-baslik { font-size: clamp(2.6rem, 5.5vw, 4.8rem); line-height: 1; margin-bottom: 1rem; }
.sp-sol .giris { opacity: .85; font-size: 1.125rem; max-width: 30rem; margin-bottom: 2rem; }
.paket-kap { perspective: 1100px; width: min(19rem, 70%); }
.paket { position: relative; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .5)); }
.paket img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; display: block; }
.paket .etiket { position: absolute; left: 12%; right: 12%; bottom: 14%; padding: .6rem .7rem .7rem; text-align: center; background: #F5F0E6; color: #1A0F0A; border-top: 6px solid var(--renk, var(--saman)); transform: translateZ(18px); }
.paket .etiket b { display: block; font-family: var(--yazi-baslik); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.paket .etiket small { display: block; font-size: .8rem; opacity: .75; margin-top: .15rem; }
.ozet { margin-top: 2rem; padding: 1.25rem 1.4rem; border-radius: 22px; background: #26170F; box-shadow: inset 0 0 0 1px rgba(241, 228, 207, .12); max-width: 26rem; }
.ozet h2 { font-family: var(--yazi-metin); font-weight: 700; font-size: 1rem; margin-bottom: .6rem; color: var(--saman); }
.ozet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ozet li { display: flex; justify-content: space-between; gap: 1rem; }
.ozet li span:first-child { opacity: .65; }
.ozet li b { font-weight: 600; text-align: right; }

/* =========================================================
   2. Form kartı
   ========================================================= */
.sp-form { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 28px; background: #26170F; }
.sp-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; min-width: 0; }
.sp-form legend { font-weight: 600; font-size: .9375rem; margin-bottom: .6rem; padding: 0; }
.iki { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.istege-bagli { opacity: .6; font-weight: 400; }
.sp-form .not { font-size: .875rem; opacity: .65; margin: -.25rem 0 .25rem; }
.kosullu { display: grid; gap: 1.25rem; }
.iki > .alan { align-content: start; }

/* adet sayacı */
.sayac { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(241, 228, 207, .25); justify-self: start; }
.sayac button { width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1; background: rgba(241, 228, 207, .1); color: var(--kopuk); transition: background-color .25s, color .25s; }
.sayac button:hover { background: var(--saman); color: var(--koyu); }
.sayac input { width: 3.2rem; border: 0; background: none; color: var(--kopuk); text-align: center; font-family: var(--yazi-baslik); font-size: 1.8rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.sayac input::-webkit-outer-spin-button, .sayac input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sayac input:focus { outline: 2px solid var(--saman); outline-offset: 2px; border-radius: 8px; }

/* şube kartları */
.sube-sec { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sube-sec .secenek { display: block; }
.sube-sec .secenek span.sube-yazi { display: block; height: 100%; min-height: 0; padding: 1rem 1.1rem; border-radius: 18px; font-weight: 400; }
.sube-sec .secenek span.sube-yazi b { display: block; font-family: var(--yazi-baslik); font-weight: 400; font-size: 1.5rem; margin-bottom: .25rem; }
.sube-sec .secenek span.sube-yazi small { display: block; opacity: .7; font-size: .8125rem; line-height: 1.4; }
.sube-sec .secenek input:checked + span.sube-yazi { background: rgba(226, 195, 106, .12); color: var(--kopuk); border-color: var(--saman); animation: none; }

/* adres onayı */
.adres-soru, .adres-onaylandi { display: grid; gap: .6rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: rgba(241, 228, 207, .06); box-shadow: inset 0 0 0 1.5px rgba(226, 195, 106, .35); }
.adres-soru-baslik { font-weight: 700; }
.adres-ozet { opacity: .85; }
.adres-soru .dugme { justify-self: start; background: var(--saman); color: var(--koyu); }
.adres-onaylandi { grid-template-columns: auto 1fr auto; align-items: center; outline: none; }
.adres-onaylandi .isaret { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #6BE08A; color: #0E2A18; }
.adres-onaylandi .isaret svg { width: 1.1rem; height: 1.1rem; }
.adres-onaylandi-metin b { display: block; }
.adres-onaylandi-metin span { display: block; font-size: .875rem; opacity: .75; }
.adres-degistir { border: 0; background: none; color: var(--saman); font: 600 .9375rem var(--yazi-metin); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.adres-sube-notu { padding: .75rem 1rem; border-radius: 14px; background: rgba(30, 90, 168, .3); font-weight: 600; }

/* hatalar, gönderim ve başarı */
.alan-hata { font-size: .875rem; color: #FF9E8A; font-weight: 600; margin: 0; }
.sp-form [aria-invalid="true"] { border-color: #FF9E8A !important; }
.gonder-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sp-form .gonder { background: var(--saman); color: var(--koyu); }
.sp-form .gonder::before { background: var(--kopuk); }
.sp-form .gonder:disabled { opacity: .6; cursor: progress; }
.siparis-durum:empty { display: none; }
.siparis-durum.hata { flex-basis: 100%; padding: .85rem 1rem; border-radius: 14px; background: rgba(156, 34, 56, .35); box-shadow: inset 0 0 0 1.5px #FF9E8A; font-weight: 600; }
.siparis-basari { justify-items: start; gap: 1rem; outline: none; }
.siparis-basari .isaret { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #6BE08A; color: #0E2A18; }
.siparis-basari .isaret svg { width: 2rem; height: 2rem; }
.siparis-basari h3 { font-size: clamp(2rem, 3.5vw, 2.8rem); }
.siparis-basari p { opacity: .8; }

@media (max-width: 960px) { .sp { grid-template-columns: 1fr; } .sp-sol { position: static; } .paket-kap { width: min(15rem, 60%); } }
@media (max-width: 560px) { .iki, .sube-sec { grid-template-columns: 1fr; } .adres-onaylandi { grid-template-columns: auto 1fr; } .adres-degistir { grid-column: 1 / -1; justify-self: start; } }