:root { --f-red:#ef1836; --f-black:#080808; --f-muted:#b9b9b9; }
.firsatlar-page { background:var(--f-black); color:#fff; }
.firsatlar-main { overflow:hidden; padding-top:0; background:radial-gradient(circle at 85% 15%, #200408 0, transparent 30%), #080808; }
.firsatlar-shell { width:min(1200px, calc(100% - 64px)); margin:0 auto; }
.firsatlar-hero { min-height:452px; position:relative; isolation:isolate; background-image:linear-gradient(180deg,rgba(8,8,8,.82) 0,rgba(8,8,8,.32) 22px,transparent 62px),linear-gradient(90deg,rgba(4,4,4,.98) 0%,rgba(4,4,4,.84) 35%,rgba(4,4,4,.14) 73%,rgba(4,4,4,.2)),url('assets/firsatlar-hero.png'); background-size:100% 100%,100% 100%,cover; background-position:center; border-bottom:1px solid #292929; box-shadow:inset 0 17px 25px rgba(0,0,0,.22); }
.hero-content { position:relative; z-index:1; padding:55px 0 37px; }
.eyebrow { margin:0 0 9px; color:var(--f-red); font-size:10px; font-weight:800; letter-spacing:2.1px; }
.firsatlar-hero h1 { margin:0; color:#fff; font-size:clamp(48px,6.2vw,74px); font-weight:800; letter-spacing:-3.4px; line-height:.94; }
.firsatlar-hero h1 span { color:var(--f-red); }
.hero-copy { max-width:465px; margin:20px 0 26px; color:#d6d6d6; font-size:14px; line-height:1.45; }
.hero-perks { display:flex; gap:29px; }
.hero-perks>div { display:flex; align-items:center; gap:9px; min-width:76px; }
.hero-perks span { color:#dedede; font-size:10px; line-height:1.25; }
.perk-icon { color:var(--f-red); flex:none; display:grid; width:28px; height:28px; place-items:center; font-style:normal; font-size:25px; font-weight:700; }
.perk-icon.gift { border:2px solid var(--f-red); border-radius:3px; height:21px; margin-top:5px; }
.perk-icon.gift::before { content:""; width:2px; height:21px; background:var(--f-red); }
.perk-icon.ticket { width:28px; height:19px; border:2px solid var(--f-red); transform:rotate(-23deg); border-radius:4px; }
.perk-icon.percent { border:2px solid var(--f-red); border-radius:50%; font-size:15px; }
.perk-icon.star { font-size:38px; line-height:20px; }
.firsatlar-content { padding:30px 0 22px; }
.filter-bar { display:flex; align-items:center; gap:11px; margin-bottom:22px; white-space:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.filter-bar::-webkit-scrollbar { display:none; }
.filter-button { flex:none; appearance:none; border:1px solid #2d2d2d; color:#e7e7e7; background:#151515; font:600 11px inherit; padding:10px 21px; border-radius:24px; transition:.2s ease; cursor:pointer; }
.filter-button:hover,.filter-button.active { background:var(--f-red); border-color:var(--f-red); color:#fff; }
.offers-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.offer-card { min-height:300px; position:relative; overflow:hidden; isolation:isolate; border:1px solid #282828; border-radius:15px; background:#111; transition:transform .25s ease,border-color .25s ease,opacity .2s ease; }
.offer-card.is-clickable { cursor:pointer; }
.offer-card:hover { transform:translateY(-4px); border-color:#6c2330; }
.card-image,.ticket-lights,.story-person { position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; transition:transform .6s ease; }
.offer-card:hover .card-image,.offer-card:hover .ticket-lights,.offer-card:hover .story-person { transform:scale(1.045); }
.plane-card .card-image { background-image:url('assets/ucak-bileti.png'); }
.plane-card.international .card-image { transform:scaleX(-1); filter:hue-rotate(315deg) saturate(.9) brightness(.88); }
.flower-card .card-image { background-image:url('assets/cicek.png'); }
.concert-card .card-image { background-image:url('assets/etkinlik.png'); }
.ticket-free-card .ticket-lights { background-image:url('assets/biletinial-ucretsiz-bilet.png?v1.0'); }
.ticket-discount-card .ticket-lights { background-image:url('assets/biletinial-indirim-v2.png?v1.0'); }
.story-person { background-image:url('assets/storytel.png'); }
.card-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,5,5,.98) 0%,rgba(5,5,5,.91) 34%,rgba(5,5,5,.43) 58%,rgba(5,5,5,.08) 100%),linear-gradient(0deg,rgba(4,4,4,.62),transparent 65%); }
.offer-content { position:relative; max-width:69%; padding:18px 20px 19px; display:flex; min-height:300px; flex-direction:column; align-items:flex-start; }
.category { color:#fff; font-size:8px; font-weight:800; letter-spacing:1.15px; line-height:1; background:#8e1424; padding:8px 13px; border-radius:20px; }
.brand-lockup { min-height:35px; margin:14px 0 8px; color:#fff; display:flex; align-items:center; gap:8px; text-shadow:0 2px 10px rgba(0,0,0,.42); }
.brand-lockup i { font-style:normal; flex:none; }
.brand-lockup img { display:block; width:auto; max-width:100%; object-fit:contain; object-position:left center; }
.brand-thy img { width:126px; height:39px; }
.brand-tazecicek img { width:128px; height:36px; filter:brightness(0) invert(1); }
.brand-karnaval img { width:126px; height:33px; }
.brand-biletinial img { width:130px; height:31px; }
.brand-storytel img { width:132px; height:35px; }
.offer-card h2 { margin:6px 0 9px; max-width:320px; color:#fff; font-size:23px; font-weight:800; letter-spacing:-.7px; line-height:1.07; }
.offer-card h2 + p { max-width:336px; margin:0; color:#d6d6d6; font-size:12px; line-height:1.34; }
.round-arrow { position:absolute; right:17px; bottom:17px; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.74); border-radius:50%; color:#fff; text-decoration:none; font-size:25px; line-height:1; transition:.2s; }
.round-arrow:hover { border-color:var(--f-red); background:var(--f-red); color:#fff; }
.offer-card.is-filtered { display:none; }
.opportunity-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.opportunity-modal.is-open { opacity:1; pointer-events:auto; }
.opportunity-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.opportunity-modal__dialog { position:relative; width:min(100%,540px); padding:42px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:18px; color:#fff; background:radial-gradient(circle at 100% 0,rgba(225,24,51,.34),transparent 42%),linear-gradient(135deg,#171010,#080808); box-shadow:0 25px 80px rgba(0,0,0,.58); transform:translateY(12px) scale(.98); transition:transform .2s ease; }
.opportunity-modal.is-open .opportunity-modal__dialog { transform:translateY(0) scale(1); }
.opportunity-modal__dialog h2 { max-width:410px; margin:0 0 13px; font-size:clamp(28px,4vw,40px); font-weight:800; line-height:1.06; letter-spacing:-1.35px; }
.opportunity-modal__dialog>p:not(.eyebrow) { max-width:390px; margin:0 0 25px; color:#c8c8c8; font-size:14px; line-height:1.5; }
.opportunity-modal__button { display:inline-flex; align-items:center; gap:18px; padding:13px 18px; border-radius:8px; color:#fff; background:var(--f-red); font-size:13px; font-weight:800; text-decoration:none; transition:background .2s,transform .2s; }
.opportunity-modal__button:hover { color:#fff; background:#ff3150; transform:translateY(-1px); }
.opportunity-modal__button span { font-size:20px; line-height:1; }
.opportunity-modal__close { position:absolute; top:13px; right:15px; width:34px; height:34px; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.08); font-size:27px; font-weight:300; line-height:30px; cursor:pointer; }
.modal-open { overflow:hidden; }
.firsatlar-page footer { margin-top:70px; }
@media (max-width:767px) { .firsatlar-shell { width:calc(100% - 40px); } .firsatlar-hero { min-height:480px; padding:0; border-bottom:0; background-color:#080808; background-image:radial-gradient(ellipse 72% 34% at 88% 8%,rgba(202,18,46,.25),transparent 72%),radial-gradient(ellipse 54% 28% at 4% 43%,rgba(101,8,23,.3),transparent 74%),linear-gradient(180deg,rgba(4,4,4,.9) 0%,rgba(4,4,4,.76) 54%,rgba(4,4,4,.28) 77%,rgba(4,4,4,.06) 100%),url('assets/firsatlar-hero-mobile-v3.png'); background-position:center,center,center,center 50%; background-size:100% 100%,100% 100%,100% 100%,cover; background-repeat:no-repeat; box-shadow:none; } .hero-content { padding:42px 0 0; } .firsatlar-hero h1 { font-size:45px; letter-spacing:-2.4px; } .hero-copy { max-width:none; margin:18px 0 27px; font-size:14px; line-height:1.55; } .hero-perks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 13px; max-width:none; margin:0; padding:25px 0 0; border-top:1px solid rgba(255,255,255,.12); } .hero-perks>div { width:auto; min-width:0; gap:10px; } .hero-perks span { font-size:10px; line-height:1.3; } .firsatlar-content { padding-top:14px; } .filter-bar { margin-bottom:18px; } .offers-grid { grid-template-columns:1fr; gap:12px; } .offer-card { min-height:284px; } .offer-content { min-height:284px; max-width:72%; padding:17px 19px; } .offer-card h2 { font-size:21px; } .opportunity-modal { padding:16px; } .opportunity-modal__dialog { padding:34px 24px 27px; } .firsatlar-page footer { margin-top:45px; } }
@media (max-width:420px) { .hero-perks { gap:17px 10px; } .hero-perks>div { min-width:0; } .filter-button { padding:9px 17px; } .offer-content { max-width:78%; } }