/* Ülke · section-specific rules. Shared hc-* carousel rules live in base.css */
/* ---- Her ülkenin yolu · country-specific ---- */
#ulke .hc-panel{padding-bottom:60px}
#ulke .hc-text{padding-right:220px}
#ulke .hc-tile{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 33%,transparent),color-mix(in srgb,var(--accent) 13%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);filter:blur(1px)}
#ulke .hc-bar-label{letter-spacing:0}
#ulke .uk-chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
#ulke .uk-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 8px;border-radius:var(--radius-pill);background:linear-gradient(180deg,#FFFFFF,#F4F6F8);box-shadow:inset 0 0 0 1px rgba(20,40,60,.08),0 1px 2px rgba(20,40,60,.06);font-size:12px;font-weight:600;color:#17202A;white-space:nowrap}
#ulke .uk-chip svg{width:14px;height:14px;display:block;flex:none}
#ulke .uk-list{margin-top:14px;display:flex;flex-direction:column;gap:6px}
#ulke .uk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:linear-gradient(180deg,#FFFFFF,#F8FAFB);box-shadow:inset 0 0 0 1px rgba(20,40,60,.06),0 1px 3px rgba(20,40,60,.05)}
#ulke .uk-num{flex:none;width:22px;height:22px;border-radius:7px;background:linear-gradient(180deg,#F3F5F8,#E9EDF1);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(20,40,60,.06);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#6B7280}
#ulke .uk-item-t{flex:1;font-size:13px;font-weight:600;color:#17202A;line-height:1.3}
#ulke .uk-box{flex:none;width:17px;height:17px;border-radius:5px;background:linear-gradient(180deg,#fff,#F1F3F6);box-shadow:inset 0 0 0 1.5px #C3CAD3}
/* stork at the desk with flag */
#ulke .uk-scene{position:absolute;right:28px;bottom:0;width:300px;height:210px;pointer-events:none}
#ulke .uk-stork{position:absolute;left:18px;bottom:58px;width:190px;height:182px;--halo:#FFFFFF;filter:drop-shadow(0 12px 18px rgba(20,40,60,.18))}
#ulke .uk-laptop{position:absolute;left:150px;bottom:94px;width:78px;height:52px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#2C3A47,#17202A);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 16px -6px rgba(20,40,60,.4)}
#ulke .uk-laptop span{position:absolute;inset:5px;border-radius:3px;background:linear-gradient(160deg,#EAF4F8,#C9DEE8)}
#ulke .uk-laptop-base{position:absolute;left:140px;bottom:86px;width:98px;height:9px;border-radius:2px 2px 5px 5px;background:linear-gradient(180deg,#4A5968,#2C3A47)}
#ulke .uk-pole{position:absolute;left:246px;bottom:88px;width:3px;height:46px;border-radius:2px;background:#8C5A2B}
#ulke .uk-flag{position:absolute;left:249px;bottom:112px;width:30px;height:21px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
#ulke .uk-pole-base{position:absolute;left:236px;bottom:84px;width:24px;height:5px;border-radius:3px;background:#5E3D1C}
#ulke .uk-desk{position:absolute;left:0;right:0;bottom:58px;height:28px;border-radius:8px;background:linear-gradient(180deg,#B9773D,#8C5A2B);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 12px 24px -10px rgba(20,40,60,.4)}
#ulke .uk-leg{position:absolute;bottom:0;width:14px;height:60px;background:linear-gradient(90deg,#6E4420,#8C5A2B)}
#ulke .uk-leg-l{left:18px}
#ulke .uk-leg-r{right:18px}
@media (max-width:899px){
#ulke .hc-panel{padding-bottom:150px}
#ulke .hc-text{padding-right:4px}
#ulke .uk-scene{right:20px;transform:scale(.7);transform-origin:100% 100%}
}

/* ==== motion (ANIM-C) · transform/opacity only, skipped under reduced motion ==== */
#ulke .hc-panels{position:relative}
#ulke .hc-shot{perspective:1200px}
#ulke .uk-flag{transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
/* tab switch: outgoing slides 16px and fades on top, incoming fades in from the opposite side (350 ms) */
#ulke .hc-panel.is-active{animation:none}
#ulke .hc-panel.hc-leave{position:absolute;inset:0;z-index:2;pointer-events:none;animation:hcLeave .35s cubic-bezier(.2,.7,.2,1) both}
#ulke .hc-panel.hc-to-l{--hc-dx:-16px}
#ulke .hc-panel.hc-to-r{--hc-dx:16px}
#ulke .hc-panel.is-active.hc-from-r{--hc-dx:16px;animation:hcEnter .35s cubic-bezier(.2,.7,.2,1) both}
#ulke .hc-panel.is-active.hc-from-l{--hc-dx:-16px;animation:hcEnter .35s cubic-bezier(.2,.7,.2,1) both}
/* 3D tilt of the product screen (JS sets the transform on mouse move; fine pointers only) */
#ulke .hc-win{transition:transform .2s ease-out}
#ulke .hc-win.is-tilting{will-change:transform}
/* product screen on first view: date chips pop, checklist rows slide in */
#ulke .hc-armed .hc-panel:not(.is-played) .uk-chip{opacity:0;transform:scale(.6)}
#ulke .hc-armed .hc-panel:not(.is-played) .uk-item{opacity:0;transform:translateY(8px)}
#ulke .hc-armed .uk-chip{transition:opacity .3s ease-out,transform .45s cubic-bezier(.34,1.56,.64,1)}
#ulke .hc-armed .uk-chip:nth-child(1){transition-delay:.15s}
#ulke .hc-armed .uk-chip:nth-child(2){transition-delay:.29s}
#ulke .hc-armed .uk-item{transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
#ulke .hc-armed .uk-item:nth-child(1){transition-delay:.3s}
#ulke .hc-armed .uk-item:nth-child(2){transition-delay:.37s}
#ulke .hc-armed .uk-item:nth-child(3){transition-delay:.44s}
#ulke .hc-armed .uk-item:nth-child(4){transition-delay:.51s}
#ulke .hc-armed .uk-item:nth-child(5){transition-delay:.58s}
#ulke .hc-armed .uk-item:nth-child(6){transition-delay:.65s}
/* stork at the desk: slides up from behind the desk on first view; the flag waves (the one continuous animation in this section) */
#ulke .hc-armed .hc-panel:not(.is-played) .uk-stork{opacity:0;transform:translate(24px,40px)}
#ulke .hc-armed .hc-panel.is-played .uk-stork{animation:ukStorkIn .7s cubic-bezier(.2,.7,.2,1) .2s backwards}
#ulke .hc-armed .hc-panel.is-played .uk-flag{animation:ukFlagWave 2s ease-in-out infinite;will-change:transform}
@keyframes ukStorkIn{from{opacity:0;transform:translate(24px,40px)}to{opacity:1;transform:translate(0,0)}}
@keyframes ukFlagWave{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
}