/*
AldebaraN® Web Dünyası
Diren SERİN
www.aldebaranbilisim.com
*/
/* One continuous gift composition, with a touch-friendly layout. */
.gift-area { background: #f4ecdf url('../img/bg/pattern-oksuzler.svg') center / 520px; overflow: hidden; }
.gift-heading { max-width: 880px; margin: 0 auto 36px; }
.gift-heading .title { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.12; letter-spacing: -.04em; }
.gift-heading .title span { color: #9b0911; }
.gift-heading p { max-width: 570px; margin: 24px auto 16px; }
.gift-instruction { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #78634e; }
.gift-collage { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.22fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px 24px; padding: 20px 0 35px; }
.gift-collage::before { content: ''; position: absolute; inset: 7% 0 4%; border-radius: 48% 52% 45% 55%; background: radial-gradient(ellipse, #e8d7be99, #f4ecdf00 70%); z-index: -1; }
.gift-piece { min-width: 0; text-align: center; align-self: center; }
.gift-piece-1 { grid-row: 1 / 3; }
.gift-piece-2 { grid-column: 2 / 4; max-width: 430px; justify-self: center; width: 100%; }
.gift-piece-3, .gift-piece-4 { margin-top: -24px; }
.gift-reveal { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.gift-photo { position: relative; display: block; aspect-ratio: 1.15; mix-blend-mode: multiply; }
.gift-piece-1 .gift-photo { aspect-ratio: .96; transform: rotate(-9deg); }
.gift-piece-2 .gift-photo { aspect-ratio: 1.7; transform: rotate(5deg); }
.gift-piece-3 .gift-photo { transform: rotate(-7deg); }
.gift-piece-4 .gift-photo { transform: rotate(7deg); }
.gift-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease, transform .65s cubic-bezier(.2,.65,.3,1); }
.gift-photo .gift-open { opacity: 0; transform: scale(.94) translateY(6px); }
.gift-reveal.is-open .gift-closed { opacity: 0; transform: scale(1.04) translateY(-8px); }
.gift-reveal.is-open .gift-open { opacity: 1; transform: scale(1) translateY(0); }
.gift-cue { position: absolute; bottom: 12%; right: 10%; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #9b091130; border-radius: 50%; background: #fffaf0; color: #9b0911; box-shadow: 0 3px 12px #3824140c; transition: transform .35s; }
.gift-reveal.is-open .gift-cue { transform: rotate(45deg); }
.gift-reveal:focus-visible { outline: 2px solid #9b0911; outline-offset: 5px; border-radius: 20px; }
.gift-caption { position: relative; z-index: 1; padding: 5px 8px 14px; }
.gift-caption h3 { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.2; margin-bottom: 6px; }
.gift-caption p { font-size: 12px; letter-spacing: .025em; color: #78634e; margin: 0 0 10px; }
.gift-caption a { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #9b0911; border-bottom: 1px solid #9b091133; padding-bottom: 3px; }
.gift-caption a:focus-visible { outline: 2px solid #9b0911; outline-offset: 4px; }
.gift-stamp { position: absolute; left: 23%; top: 0; font-size: 15px; color: #9b0911; width: 100px; height: 100px; border: 1px solid #9b091144; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: rotate(-13deg); }
.gift-stamp span { font-size: 10px; margin-top: 5px; }
.gift-shop-link { margin-top: 10px; }
@media (max-width: 767px) {
 .gift-area { padding: 75px 0; }
 .gift-heading { margin-bottom: 16px; }
 .gift-heading .title { font-size: clamp(32px, 8.4vw, 48px); }
 .gift-heading p { font-size: 14px; margin-top: 18px; }
 .gift-instruction { font-size: 11px; gap: 6px; }
 .gift-collage { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 22px 12px; padding-top: 18px; }
 .gift-piece-1 { grid-row: auto; }
 .gift-piece-2 { grid-column: auto; }
 .gift-piece-3, .gift-piece-4 { margin-top: 0; }
 .gift-piece .gift-photo { aspect-ratio: 1; transform: rotate(-4deg); }
 .gift-piece:nth-of-type(even) .gift-photo { transform: rotate(4deg); }
 .gift-caption { padding: 8px 0; }
 .gift-caption h3 { font-size: 17px; }
 .gift-caption p { font-size: 10px; line-height: 1.5; min-height: 30px; }
 .gift-caption a { min-height: 38px; font-size: 11px; }
 .gift-cue { width: 28px; height: 28px; bottom: 5%; right: 4%; font-size: 11px; }
 .gift-stamp { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gift-photo img, .gift-cue { transition: none; } }

/* Compact gift composition with a soft change of background. */
.gift-area { padding: 74px 0 70px; background: #eee3d3; border-top: 1px solid #d8c5ac66; border-radius: 44px 44px 0 0; }
.gift-heading { max-width: 820px; margin-bottom: 24px; }
.gift-heading .title { font-size: clamp(32px, 3.7vw, 52px); }
.gift-heading p { margin: 16px auto 10px; }
.gift-collage { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; gap: 22px; max-width: 1140px; margin: 0 auto; padding: 18px 8px 28px; }
.gift-piece-1 { grid-row: auto; }
.gift-piece-2 { grid-column: auto; max-width: none; }
.gift-piece-3, .gift-piece-4 { margin-top: 0; }
.gift-piece:nth-of-type(even) { padding-top: 24px; }
.gift-piece .gift-photo { aspect-ratio: 1; transform: rotate(-4deg); border-radius: 28px; overflow: hidden; background: #fffdf9; mix-blend-mode: normal; box-shadow: 0 7px 22px #6543240b; border: 1px solid #fff9; }
.gift-piece:nth-of-type(even) .gift-photo { transform: rotate(4deg); }
.gift-photo img { border-radius: 28px; }
.gift-caption { padding: 17px 2px 6px; }
.gift-caption h3 { font-size: clamp(17px, 1.5vw, 22px); }
.gift-caption p { font-size: 11px; }
.gift-stamp { display: none; }
.gift-cue { bottom: 5%; right: 5%; }
.gift-shop-link { margin-top: 8px; }
@media (max-width: 991px) {
 .gift-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 650px; gap: 14px 22px; }
 .gift-piece:nth-of-type(even) { padding-top: 0; }
}
@media (max-width: 767px) {
 .gift-area { padding: 50px 0 46px; border-radius: 28px 28px 0 0; }
 .gift-heading { margin-bottom: 12px; }
 .gift-heading .title { font-size: clamp(29px, 7.4vw, 40px); }
 .gift-heading p { margin: 12px auto 8px; }
 .gift-collage { gap: 8px 14px; padding: 14px 4px 16px; }
 .gift-piece .gift-photo { aspect-ratio: 1.12; border-radius: 22px; }
 .gift-photo img { border-radius: 22px; }
 .gift-caption { padding-top: 12px; }
 .gift-caption h3 { font-size: 16px; }
 .gift-caption p { min-height: 0; margin-bottom: 4px; }
 .gift-caption a { min-height: 32px; }
}