/* Landing'in kendi tasarim sistemi. * * NEDEN AYRI DOSYA VE NEDEN HER KURAL `#landing` ALTINDA: * Bu sayfada iki yuzey var — pazarlama sayfasi (#landing) ve uygulamanin * kendisi (#uygulama). Uygulama ekranlari style.css'e bagli. Tasarim kendi * `:root` degiskenlerini (--card, --line, --ink) ve `body`, `section`, `nav`, * `footer`, `details` gibi JENERIK secicileri tasiyor; kapsamlanmadan * eklenseydi uygulama ekranlarinin rengini ve tipografisini de degistirirdi. * * Kaynak: kullanicinin verdigi tek dosyalik tasarim (son surum). Seciciler * makineyle kapsamlandi; renk, olcu ve duzen degerleri aynen korundu. * `pulse` keyframe adi `tryr-hero-nabiz` olarak onekledi — cok genel bir ad. */ #landing{ --ink:#0e1320; --ink-soft:#3d4457; --muted:#6b7280; --accent:#ff3d17; --accent-dark:#d92b0a; --accent-soft:#fff1ed; --green:#0faf60; --green-soft:#e9f9f0; --red:#e5484d; --red-soft:#fdecec; --gold:#ffb800; --bg:#ffffff; --bg-alt:#f6f7fb; --card:#ffffff; --line:#e7e9f0; --dark:#0e1320; --radius:18px; --shadow:0 8px 30px rgba(14,19,32,.08); --shadow-lg:0 20px 60px rgba(14,19,32,.14); }#landing, #landing *{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}#landing{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}#landing img{max-width:100%;display:block}#landing a{text-decoration:none;color:inherit}#landing .container{max-width:1180px;margin:0 auto;padding:0 24px}body.lang-tr .en{display:none !important}body.lang-en .tr{display:none !important}#landing .offerbar{position:sticky;top:0;z-index:60;background:linear-gradient(90deg,#0e1320,#232b45 55%,#0e1320);color:#fff;font-size:14px;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}#landing .offerbar b{color:var(--gold)}#landing .offerbar .count{display:flex;gap:5px}#landing .offerbar .count span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums;font-weight:700}#landing .offerbar a{background:var(--gold);color:#231a00;font-weight:800;border-radius:99px;padding:5px 16px;font-size:13px;transition:.2s}#landing .offerbar a:hover{transform:translateY(-1px);filter:brightness(1.05)}#landing nav{position:sticky;top:41px;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateZ(0);will-change:transform}#landing .nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}#landing .logo{font-size:26px;font-weight:900;letter-spacing:-1px}#landing .logo i{color:var(--accent);font-style:normal}#landing .nav-links{display:flex;gap:26px;font-size:15px;font-weight:600;color:var(--ink-soft)}#landing .nav-links a:hover{color:var(--ink)}#landing .nav-right{display:flex;align-items:center;gap:14px}#landing .lang-switch{display:flex;border:1.5px solid var(--line);border-radius:99px;overflow:hidden;font-size:12.5px;font-weight:800}#landing .lang-switch button{border:0;background:transparent;padding:6px 12px;cursor:pointer;color:var(--muted);font-weight:800}#landing .lang-switch button.active{background:var(--ink);color:#fff}#landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:800;cursor:pointer;border:0;transition:.2s;white-space:nowrap}#landing .btn-primary{background:var(--accent);color:#fff;padding:13px 26px;font-size:16px;box-shadow:0 8px 24px rgba(255,61,23,.35)}#landing .btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,61,23,.42)}#landing .btn-nav{background:var(--ink);color:#fff;padding:10px 20px;font-size:14.5px}#landing .btn-nav:hover{background:#000}#landing .btn-xl{padding:18px 38px;font-size:19px;border-radius:14px}#landing .btn-ghost{background:#fff;border:2px solid var(--line);color:var(--ink);padding:16px 30px;font-size:17px}#landing .btn-ghost:hover{border-color:var(--ink)}#landing .hero{padding:64px 0 40px;position:relative;background: radial-gradient(1000px 500px at 85% -10%,rgba(255,61,23,.07),transparent 60%), radial-gradient(800px 400px at -10% 30%,rgba(15,175,96,.05),transparent 60%)}#landing .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}#landing .pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent-dark);font-size:13.5px;font-weight:800;padding:7px 16px;border-radius:99px;border:1px solid #ffd9cf;margin-bottom:20px}#landing h1{font-size:clamp(38px,4.6vw,58px);line-height:1.06;letter-spacing:-2px;font-weight:900}#landing h1 .hl{color:var(--accent)}#landing .hero-sub{margin-top:18px;font-size:18.5px;color:var(--ink-soft);max-width:520px}#landing .price-tag{display:inline-flex;align-items:baseline;gap:10px;margin-top:22px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 20px;box-shadow:var(--shadow)}#landing .price-tag .amount{font-size:34px;font-weight:900;color:var(--green);letter-spacing:-1px}#landing .price-tag .small{font-size:13px;color:var(--muted);font-weight:600}#landing .price-tag .sep{width:1px;height:30px;background:var(--line)}#landing .price-tag .speed{font-size:14.5px;font-weight:800}#landing .checks{margin-top:22px;display:flex;flex-direction:column;gap:10px}#landing .checks li{list-style:none;display:flex;align-items:center;gap:11px;font-size:16.5px;font-weight:600}#landing .checks .ok{width:24px;height:24px;border-radius:50%;background:var(--green-soft);color:var(--green);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0}#landing .checks .save{color:var(--muted);font-weight:600;font-size:14.5px}#landing .hero-cta{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}#landing .no-card{font-size:14px;color:var(--muted);font-weight:600}#landing .live-stat{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink-soft)}#landing .live-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(15,175,96,.18);animation:tryr-hero-nabiz 1.8s infinite} @keyframes tryr-hero-nabiz{0%,100%{box-shadow:0 0 0 4px rgba(15,175,96,.18)}50%{box-shadow:0 0 0 8px rgba(15,175,96,.07)}}#landing .hero-visual{position:relative}#landing .hero-visual img{border-radius:22px;box-shadow:var(--shadow-lg)}#landing .tagchip{position:absolute;background:#0e1320;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:1px;padding:7px 14px;border-radius:99px;text-transform:uppercase}#landing .tagchip.tl{top:14px;left:14px;background:#fff;color:var(--ink);border:1px solid var(--line)}#landing .tagchip.br{bottom:14px;right:14px;background:var(--accent)}#landing .rating-badge{position:absolute;top:-16px;right:-10px;background:#fff;border-radius:16px;padding:12px 18px;box-shadow:var(--shadow-lg);text-align:center;border:1px solid var(--line)}#landing .rating-badge .stars{color:var(--gold);font-size:15px;letter-spacing:2px}#landing .rating-badge .lbl{font-size:11.5px;font-weight:800;margin-top:2px}#landing .strip{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt)}#landing .strip .lbl{text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:20px}#landing .strip-logos{display:flex;justify-content:center;align-items:center;gap:44px;flex-wrap:wrap;opacity:.75}#landing .strip-logos img{height:26px;filter:grayscale(1);transition:.2s}#landing .strip-logos img:hover{filter:none;opacity:1}#landing .strip-logos img.press{height:22px}#landing section{padding:84px 0}#landing .sec-head{text-align:center;max-width:760px;margin:0 auto 52px}#landing .kicker{display:inline-block;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:900;color:var(--accent);margin-bottom:14px}#landing h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-1.4px;line-height:1.12;font-weight:900}#landing .sec-sub{margin-top:16px;font-size:17.5px;color:var(--ink-soft)}#landing .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}#landing .ba-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s}#landing .ba-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}#landing .ba-card img{width:100%;height:auto}#landing .ba-card .cap{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}#landing .ba-card .cap .arrow{color:var(--accent)}#landing .duo{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px}#landing .duo .ba-card img{aspect-ratio:4/3;object-fit:cover;object-position:top}#landing .vs-wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:920px;margin:0 auto}#landing .vs-card{border-radius:22px;padding:34px 32px;position:relative}#landing .vs-card.bad{background:var(--red-soft);border:2px solid #f5c2c4}#landing .vs-card.good{background:var(--green-soft);border:2.5px solid var(--green);box-shadow:0 16px 50px rgba(15,175,96,.18)}#landing .vs-title{font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:900;color:var(--muted)}#landing .vs-card.good .vs-title{color:var(--green)}#landing .vs-price{font-size:46px;font-weight:900;letter-spacing:-2px;margin:10px 0 2px}#landing .vs-card.bad .vs-price{color:var(--red)}#landing .vs-card.good .vs-price{color:var(--green)}#landing .vs-note{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:20px}#landing .vs-list{list-style:none;display:flex;flex-direction:column;gap:11px}#landing .vs-list li{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:600}#landing .vs-list .x{color:var(--red);font-weight:900}#landing .vs-list .c{color:var(--green);font-weight:900}#landing .save-banner{max-width:920px;margin:26px auto 0;background:var(--dark);color:#fff;border-radius:18px;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}#landing .save-banner .big{font-size:22px;font-weight:900}#landing .save-banner .big i{color:var(--gold);font-style:normal}#landing .badge-96{position:absolute;top:-16px;right:22px;background:var(--green);color:#fff;font-size:13.5px;font-weight:900;padding:7px 16px;border-radius:99px;box-shadow:0 8px 20px rgba(15,175,96,.4)}#landing .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}#landing .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;box-shadow:var(--shadow)}#landing .step .num{width:42px;height:42px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;margin-bottom:18px;box-shadow:0 8px 18px rgba(255,61,23,.32)}#landing .step h3{font-size:19.5px;font-weight:800;letter-spacing:-.4px;margin-bottom:8px}#landing .step p{color:var(--ink-soft);font-size:15px}#landing .step .t{margin-top:14px;display:inline-block;background:var(--bg-alt);border:1px solid var(--line);font-size:12.5px;font-weight:800;border-radius:99px;padding:4px 12px;color:var(--ink-soft)}#landing .total-time{text-align:center;margin-top:34px;font-size:17px;font-weight:800}#landing .total-time i{color:var(--accent);font-style:normal}#landing .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}#landing .cat-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:4/5;background:#f2f3f7}#landing .cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}#landing .cat-card img.result{opacity:0}#landing .cat-card:hover img.result{opacity:1}#landing .cat-card .cat-lbl{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(14,19,32,.82);color:#fff;font-size:13.5px;font-weight:800;padding:8px 15px;border-radius:99px;backdrop-filter:blur(4px)}#landing .cat-card .hover-hint{position:absolute;top:14px;right:14px;z-index:2;background:#fff;color:var(--ink);font-size:11px;font-weight:800;letter-spacing:1px;padding:6px 12px;border-radius:99px;text-transform:uppercase;border:1px solid var(--line)}#landing .persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}#landing .persona{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1.06;box-shadow:var(--shadow)}#landing .persona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}#landing .persona:hover img{transform:scale(1.05)}#landing .persona .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,13,24,.88) 100%)}#landing .persona .txt{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;z-index:2}#landing .persona .txt h4{font-size:18px;font-weight:800;letter-spacing:-.3px}#landing .persona .txt p{font-size:13.5px;opacity:.85;margin-top:4px}#landing .mkt{background:var(--dark);color:#fff;padding:64px 0}#landing .mkt .lbl{text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:800;opacity:.6;margin-bottom:8px}#landing .mkt h3{text-align:center;font-size:26px;font-weight:900;letter-spacing:-.8px;margin-bottom:30px}#landing .mkt-logos{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}#landing .mkt-logos img{height:26px;filter:brightness(0) invert(1);opacity:.8;transition:.2s}#landing .mkt-logos img:hover{opacity:1}#landing .mkt-logos .txtlogo{font-size:19px;font-weight:800;opacity:.85;letter-spacing:-.3px}#landing .tryon{background:linear-gradient(180deg,#fff, #fff7f4)}#landing .tryon-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}#landing .tryon-imgs{display:grid;grid-template-columns:1fr 1fr;gap:18px}#landing .tryon-imgs figure{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}#landing .tryon-imgs img{aspect-ratio:3/4;object-fit:cover;width:100%}#landing .tryon-imgs figcaption{position:absolute;bottom:12px;left:12px;background:rgba(14,19,32,.85);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:1px;padding:6px 12px;border-radius:99px;text-transform:uppercase}#landing .feature-list{margin-top:24px;display:flex;flex-direction:column;gap:13px}#landing .feature-list li{list-style:none;display:flex;gap:12px;font-size:16px;font-weight:600;align-items:flex-start}#landing .feature-list .ok{width:23px;height:23px;border-radius:50%;background:var(--green-soft);color:var(--green);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;margin-top:2px}#landing .excl{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px dashed var(--accent);color:var(--accent-dark);font-size:13px;font-weight:800;padding:7px 15px;border-radius:99px;margin-bottom:18px}#landing .testi{background:var(--bg-alt)}#landing .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}#landing .t-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}#landing .t-card .stars{color:var(--gold);letter-spacing:3px;font-size:15px;margin-bottom:14px}#landing .t-card p{font-size:15.5px;font-weight:600;color:var(--ink)}#landing .t-card .who{margin-top:16px;font-size:13.5px;color:var(--muted);font-weight:700}#landing .t-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}#landing .metric{background:var(--dark);border-radius:var(--radius);padding:28px;text-align:center;color:#fff}#landing .metric .v{font-size:38px;font-weight:900;letter-spacing:-1.5px;color:var(--gold)}#landing .metric .l{font-size:14px;opacity:.8;font-weight:600;margin-top:6px}#landing .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;max-width:1050px;margin:0 auto}#landing .plan{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:34px 30px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow)}#landing .plan.pop{border:2.5px solid var(--accent);box-shadow:0 24px 60px rgba(255,61,23,.16);transform:scale(1.03)}#landing .plan .flag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12.5px;font-weight:900;letter-spacing:1px;padding:6px 18px;border-radius:99px;text-transform:uppercase;white-space:nowrap}#landing .plan h3{font-size:20px;font-weight:900;letter-spacing:-.4px}#landing .plan .credits{font-size:13.5px;font-weight:700;color:var(--muted);margin-top:4px}#landing .plan .p-price{margin:20px 0 4px;font-size:44px;font-weight:900;letter-spacing:-2px}#landing .plan .p-price span{font-size:16px;font-weight:700;color:var(--muted);letter-spacing:0}#landing .plan .per{font-size:14px;font-weight:800;color:var(--green);background:var(--green-soft);display:inline-block;border-radius:99px;padding:4px 13px;margin-bottom:20px}#landing .plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}#landing .plan ul li{display:flex;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink-soft)}#landing .plan ul .c{color:var(--green);font-weight:900}#landing .plan .btn{width:100%}#landing .plan .btn-outline{background:#fff;border:2px solid var(--ink);color:var(--ink);padding:13px}#landing .plan .btn-outline:hover{background:var(--ink);color:#fff}#landing .rollover{max-width:1050px;margin:26px auto 0;text-align:center;background:var(--green-soft);border:1px solid #bfe9d2;color:#0b7a44;border-radius:14px;padding:14px 20px;font-size:15px;font-weight:700}#landing .credit-table{max-width:660px;margin:40px auto 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:14.5px}#landing .credit-table table{width:100%;border-collapse:collapse}#landing .credit-table th{background:var(--bg-alt);text-align:left;padding:12px 18px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}#landing .credit-table td{padding:12px 18px;border-top:1px solid var(--line);font-weight:600}#landing .credit-table td:last-child{text-align:right;font-weight:800;color:var(--green)} #landing .kredi-dip{padding:11px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:600}#landing .faq-list{max-width:780px;margin:0 auto}#landing details{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden}#landing summary{cursor:pointer;padding:19px 22px;font-weight:800;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}#landing summary::-webkit-details-marker{display:none}#landing summary .chev{transition:.25s;color:var(--accent);font-weight:900;flex-shrink:0}#landing details[open] .chev{transform:rotate(45deg)}#landing details .ans{padding:0 22px 20px;color:var(--ink-soft);font-size:15.5px}#landing .final{background:var(--dark);color:#fff;position:relative;overflow:hidden}#landing .final::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,61,23,.22),transparent 65%);top:-200px;right:-150px}#landing .final-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;z-index:2}#landing .final h2{color:#fff}#landing .final .sec-sub{color:rgba(255,255,255,.75)}#landing .final .risk{margin-top:26px;display:flex;flex-direction:column;gap:10px}#landing .final .risk li{list-style:none;display:flex;gap:11px;font-size:15.5px;font-weight:600;color:rgba(255,255,255,.9)}#landing .final .risk .ok{color:var(--gold);font-weight:900}#landing .final img{border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}#landing .final .zero{margin-top:20px;font-size:14px;color:rgba(255,255,255,.55);font-weight:600}#landing footer{background:#0a0e18;color:rgba(255,255,255,.65);padding:56px 0 90px;font-size:14.5px}#landing .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}#landing footer .logo{color:#fff;margin-bottom:12px}#landing footer h5{color:#fff;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}#landing footer a{display:block;margin-bottom:9px}#landing footer a:hover{color:#fff}#landing .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.4)}#landing .sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:70;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(14,19,32,.1);padding:12px 18px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}#landing .sticky-cta .txt{font-size:14.5px;font-weight:800}#landing .sticky-cta .txt i{color:var(--green);font-style:normal}#landing .sticky-cta .btn{padding:11px 24px;font-size:15px}#landing .video-sec{background:var(--dark);color:#fff;position:relative;overflow:hidden}#landing .video-sec::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,61,23,.16),transparent 65%);bottom:-300px;left:-200px}#landing .video-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative;z-index:2}#landing .video-sec h2{color:#fff}#landing .video-sec .sec-sub{color:rgba(255,255,255,.75)}#landing .new-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,184,0,.14);border:1.5px solid rgba(255,184,0,.5);color:var(--gold);font-size:12.5px;font-weight:900;letter-spacing:1.5px;padding:7px 16px;border-radius:99px;margin-bottom:18px;text-transform:uppercase}#landing .video-feats{margin-top:24px;display:flex;flex-direction:column;gap:13px}#landing .video-feats li{list-style:none;display:flex;gap:12px;font-size:16px;font-weight:600;align-items:flex-start;color:rgba(255,255,255,.92)}#landing .video-feats .ok{width:23px;height:23px;border-radius:50%;background:rgba(15,175,96,.2);color:#3ddb8b;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;margin-top:2px}#landing .vprice-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}#landing .vprice{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px 16px;flex:1 1 0;min-width:0}#landing .vprice .v{font-size:22px;font-weight:900;color:var(--gold)}#landing .vprice .l{font-size:11.5px;color:rgba(255,255,255,.6);font-weight:700;margin-top:2px;white-space:nowrap}#landing .player{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);cursor:pointer}#landing .player .frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.06);transition:opacity 1.1s ease}#landing .player .frame.on{opacity:1;animation:kenburns 4.5s linear forwards} @keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.0)}}#landing .player .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 35%,rgba(0,0,0,.55));z-index:2}#landing .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 12px 40px rgba(0,0,0,.4);transition:.25s}#landing .player:hover .play-btn{transform:translate(-50%,-50%) scale(1.08)}#landing .play-btn::after{content:'';border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent var(--accent);margin-left:6px}#landing .player .chip-tl{position:absolute;top:16px;left:16px;z-index:3;background:var(--accent);color:#fff;font-size:11.5px;font-weight:900;letter-spacing:1.2px;padding:7px 14px;border-radius:99px;text-transform:uppercase;display:flex;align-items:center;gap:7px}#landing .player .chip-tl .rec{width:8px;height:8px;border-radius:50%;background:#fff;animation:tryr-hero-nabiz 1.4s infinite}#landing .player .chip-br{position:absolute;bottom:46px;right:16px;z-index:3;background:rgba(14,19,32,.8);backdrop-filter:blur(4px);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:1px;padding:6px 13px;border-radius:99px;text-transform:uppercase}#landing .player .bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.2);z-index:3}#landing .player .bar i{display:block;height:100%;width:0;background:var(--accent);animation:progress 13.5s linear infinite} @keyframes progress{from{width:0}to{width:100%}} @media(max-width:980px){#landing .hero-grid, #landing .tryon-grid, #landing .final-grid, #landing .video-grid{grid-template-columns:1fr;gap:40px}#landing .ba-grid, #landing .steps, #landing .cat-grid, #landing .persona-grid, #landing .testi-grid, #landing .plans, #landing .t-metrics{grid-template-columns:1fr 1fr}#landing .vs-wrap{grid-template-columns:1fr}#landing .plan.pop{transform:none}#landing .foot-grid{grid-template-columns:1fr 1fr}#landing .nav-links{display:none} } @media(max-width:600px){#landing .ba-grid, #landing .steps, #landing .cat-grid, #landing .persona-grid, #landing .testi-grid, #landing .plans, #landing .duo, #landing .tryon-imgs, #landing .t-metrics{grid-template-columns:1fr}#landing section{padding:60px 0} } /* ── Huninin giris formu ─────────────────────────────────────────────────── * Tasarimda hero'nun eylem cagrisi bir `#pricing` bagiydi. Urunun tek giris * noktasi link kutusu oldugu icin oraya gercek form kondu. `.alan`, `.hata` * ve `.yukle-baglanti` style.css'te GENEL tanimli (uygulama ekranlari da * kullaniyor); asagidakiler yalniz landing icin, yeni palete gore eziyor. */ #landing .hero-form{margin-top:28px} #landing .hero-form .alan{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:7px 7px 7px 18px;box-shadow:var(--shadow)} #landing .hero-form .alan:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,61,23,.12)} #landing .hero-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16.5px;font-weight:600;color:var(--ink);padding:12px 0} #landing .hero-form input::placeholder{color:var(--muted);font-weight:500} #landing #gonder{flex-shrink:0;padding:13px 24px;font-size:16px} #landing #tekrar-eposta-satir{margin-top:10px} #landing .hata{color:var(--accent-dark);font-size:14.5px;font-weight:700;margin-top:10px} #landing .yukle-baglanti{margin-top:14px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:15px;font-weight:700;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px} #landing .yukle-baglanti:hover{color:var(--accent-dark)} #landing .no-card{display:block;margin-top:14px} /* Dil anahtari `.active` sinifi yerine `aria-pressed` ile isaretleniyor: * app.js zaten bunu yaziyor ve ekran okuyucuya da dogru bilgi gidiyor. */ #landing .lang-switch button[aria-pressed="true"]{background:var(--ink);color:#fff} /* style.css `h1, h2, h3`e serif ATIYOR ve bu, `#landing`ten miras alinan * yazi ailesini eziyor (dogrudan secici, miras degil). */ #landing h1, #landing h2, #landing h3, #landing h4, #landing h5{font-family:inherit} /* Hero karesinde SONUC solda, KAYNAK sagda (hero-cift.webp boyle birlesik). * Etiket metinleri buna gore yer degistirdi; vurgu rengi de sonucu * isaretlemeli, kaynagi degil — o yuzden iki cipin RENKLERI de takas edildi. */ #landing .tagchip.tl{background:var(--accent);color:#fff;border:0} #landing .tagchip.br{background:#fff;color:var(--ink);border:1px solid var(--line)} /* ── Logo boyutlari ──────────────────────────────────────────────────────── * Platform logolari simple-icons'tan geliyor ve hepsi 24x24 KARE viewBox; * eBay, WooCommerce ve Wix o karenin icine sikistirilmis kelime-logolar. * 26px'te harfleri okunmuyordu (olculdu: hepsi 26x26 kutuya oturuyor). * Forbes ve Yahoo gercek genis kelime-logolar — ayni yukseklikte cok daha * agir gorunuyorlar, o yuzden bir tik kucuk kaliyorlar. */ #landing .strip-logos img{height:28px} #landing .strip-logos img.press{height:24px} #landing .mkt-logos img{height:32px;width:auto} /* $49 ile /ay arasinda nefes yoktu, tek kelime gibi okunuyordu. */ #landing .vs-price span{margin-left:3px} /* Puan rozeti mobilde kabin disina tasiyordu. */ @media(max-width:600px){ #landing .rating-badge{top:-10px;right:0;padding:9px 14px} } /* ══════════════════════════════════════════════════════════════════════════ MOBIL Tasarim iki kirilma noktasi tasiyor (980 ve 600) ama telefonda olculen sorunlar orada cozulmuyordu. Asagidakilerin hepsi 390x844 ve 360x780'de olculdu, tahmin degil. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Iki yapiskan cubuk ust uste ─────────────────────────────────────── * Teklif cubugu telefonda uc satira sariyor: 390'da 106px, 360'ta 147px. * `nav` ise sabit `top:41px` ile yapisiyor — o sayi masaustundeki tek satirlik * yukseklik. Sonuc: kaydirirken nav yanlis yere cakiliyor ve ikisi birlikte * ekranin ustunden 200px'e yakinini yiyor. Telefonda teklif cubugu artik * yapismiyor (yukari kaydirilinca gidiyor), nav en uste oturuyor. */ @media(max-width:820px){ #landing nav{top:0} } /* ── 2. Dokunma hedefleri ───────────────────────────────────────────────── * Olculen: dil dugmeleri 42x27, teklif cubugu baglantisi 134x30, altbilgi * baglantilari 22px yuksek. Parmak icin 44px isteniyor. */ @media(max-width:820px){ #landing .lang-switch button{padding:11px 16px} #landing .offerbar a{padding:10px 18px} #landing .btn-nav{padding:13px 20px} #landing footer a{padding:7px 0} #landing .yukle-baglanti{padding:8px 0} } /* ── 3. Kategori kartlari dokunmatikte ───────────────────────────────────── * Bolumun butun anlami "onceki -> sonraki" gecisi ve o gecis SADECE `:hover` * ile aciliyordu. Telefonda hover olmadigi icin sonuc karesi hic gorunmuyordu * (olculdu: opacity 0, kalici). Artik karta dokunmak aciyor. */ #landing .hover-hint .dokun{display:none} body.dokunmatik #landing .hover-hint .tr:not(.dokun), body.dokunmatik #landing .hover-hint .en:not(.dokun){display:none} body.dokunmatik #landing .hover-hint .dokun{display:inline} body.dokunmatik #landing .cat-card.acik img.result{opacity:1} body.dokunmatik #landing .cat-card{cursor:pointer} /* ── 4. Alt sabit cubuk ─────────────────────────────────────────────────── * Telefonda iki satira tasiyor ve 102px yer kapliyordu; altbilgi 90px'lik * bosluguyla altinda kaliyordu. Cumlenin kuyrugu gizlenip tek satira iniyor. */ @media(max-width:600px){ #landing .sticky-cta{flex-wrap:nowrap;gap:10px;padding:10px 14px} #landing .sticky-cta .uzun{display:none} #landing .sticky-cta .txt{font-size:13.5px} #landing .sticky-cta .btn{padding:11px 18px;font-size:14.5px} } /* ── 5. Dar ekranda izgara tasmasi ──────────────────────────────────────── * 360px'te hero sutunu 340px olculuyordu, kabin ic genisligi 312. Sebep izgara * hucrelerinin varsayilan `min-width:auto` degeri: icerideki `.price-tag` * sarmadigi icin en dar hali 340px ve hucre onunla birlikte buyuyor. Metin * kirpilmiyordu ama sag kenar bosluguna tasiyordu. */ @media(max-width:600px){ #landing .hero-grid > *, #landing .tryon-grid > *, #landing .final-grid > *, #landing .video-grid > *{min-width:0} #landing .price-tag{flex-wrap:wrap;row-gap:6px} #landing .price-tag .sep{display:none} #landing .checks li{flex-wrap:wrap;row-gap:2px} #landing .mkt-logos{gap:26px} /* UC FIYAT KARTI 390px'te UST USTE BINIYORDU (olculdu 2026-09-15): * `.vprice .l` `white-space:nowrap` tasiyor, `.vprice` ise `flex:1 1 0; * min-width:0`. Dar ekranda etiket kartindan tasip komsusunun uzerine * yaziliyordu ("Hizli - 5 sn'den baslaSinema - 5 sn'den baslayGelenaeksel") * ve ucuncu kart ekran disinda kaliyordu. Alt alta dizilir, etiket sarar. */ #landing .vprice-row{gap:10px} #landing .vprice{flex:1 1 100%} #landing .vprice .l{white-space:normal} } /* ── 6. Uzun eylem cagrilari dar ekranda ────────────────────────────────── * `.btn` `white-space:nowrap` tasiyor; "Linki Yapistir, Ucretsiz Basla →" * 360px'te 358px genislige cikip kabin disina sarkiyordu (olculdu). Telefonda * buyuk butonlar tam genislik aliyor ve satir kirabiliyor. */ @media(max-width:600px){ #landing .btn-xl{width:100%;white-space:normal;text-align:center;padding:16px 22px;font-size:17px;line-height:1.25} #landing .save-banner .btn, #landing .hero-cta .btn{width:100%;white-space:normal} #landing .hero-cta{width:100%} } /* ── 7. Dokunma hedefi 44px ─────────────────────────────────────────────── * Ikinci olcumde 36-39px'e cikmisti; parmak icin kabul edilen alt sinir 44. */ @media(max-width:820px){ #landing .lang-switch button{padding:14px 18px} #landing .nav-links a{padding:11px 0} #landing footer a{padding:11px 0} #landing .offerbar a{padding:12px 20px} } @media(max-width:820px){ #landing .yukle-baglanti{padding:11px 0} #landing .sticky-cta .btn{padding:14px 18px} } /* ── 8. Telefonda "Panelim" kaybolmasin ─────────────────────────────────── * Tasarim 980'in altinda butun nav baglantilarini gizliyor. Digerleri sayfa * ici cipa, kaydirarak da ulasilir; ama "Panelim" ODEMESI YAPILMIS cekimlere * donen tek kapi. Telefonda gizlenirse geri gelen musteri karelerine * ulasamiyor. Yalniz o baglanti aciik kaliyor. */ @media(max-width:980px){ #landing .nav-links{display:flex} #landing .nav-links a:not(#landing-panel){display:none} #landing #landing-panel{font-size:14.5px;font-weight:700} } /* ══════════════════════════════════════════════════════════════════════════ MOBILDE TEKLIF + GERI SAYIM + CTA TEK ALT CUBUKTA Olculdu: bizde ust taraf 153px (teklif cubugu 86 + nav 67) ve AYRICA altta 65px'lik ikinci bir CTA cubugu vardi — toplam 218px ekran, icerik gormeden. tryly.ai ayni ekranda 114px harciyor: ustte tek satir 51px nav, teklif ve geri sayim ALTTA, eylem cagrisiyla ayni cubukta. Ayni semaya geciyoruz. Ikinci bir isaretleme yazilmiyor — mevcut teklif cubugu asagi aliniyor, geri sayim da onun icinde oldugu icin calismaya devam ediyor. ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:820px){ #landing .offerbar{ position:fixed;top:auto;bottom:0;left:0;right:0;z-index:70; display:grid;grid-template-columns:1fr auto;align-items:center; gap:4px 12px;padding:9px 14px 10px;text-align:left; font-size:12.5px;line-height:1.3; box-shadow:0 -10px 30px rgba(14,19,32,.28); } #landing .offerbar > span{grid-column:1;grid-row:1 / span 2;align-self:center} #landing .offerbar button{grid-column:2;grid-row:1;padding:11px 18px;font-size:13.5px} #landing .offerbar .count{grid-column:2;grid-row:2;justify-content:center;font-size:11px} #landing .offerbar .count span{padding:1px 5px} /* Ayni mesaji tasiyan ikinci cubuk artik gereksiz. */ #landing .sticky-cta{display:none} /* Alt cubuk ~78px; altbilgi onun altinda kalmasin. */ #landing footer{padding-bottom:104px} } /* Dil anahtari telefonda tek dugme: secili olan gizleniyor, gorunen dugme * GECILECEK dili gosteriyor. Ust seritte ~50px yer aciyor ve o yer * "Panelim" ile eylem cagrisina gidiyor. */ @media(max-width:820px){ #landing .lang-switch{border-radius:99px} #landing .lang-switch button[aria-pressed="true"]{display:none} #landing .lang-switch button{padding:12px 16px;color:var(--ink)} } /* ── Telefonda hero'yu ilk ekrana sigdir ────────────────────────────────── * Olculdu (390x844): link kutusu 766px'te basliyordu. Nav 67 ve alt cubuk 82 * dusulunce gorunur alan 695px — yani ziyaretci ilk ekranda urunun TEK giris * noktasini hic gormuyordu. Rakip ayni ekranda hero gorselini bile gosteriyor. * Metin kisaltilmadi, yalnizca olcu ve bosluklar sikistirildi. */ @media(max-width:600px){ #landing .hero{padding:26px 0 24px} #landing .pill{margin-bottom:12px;font-size:12.5px;padding:6px 13px} #landing h1{font-size:33px;letter-spacing:-1.2px} #landing .hero-sub{margin-top:12px;font-size:16px} #landing .price-tag{margin-top:16px;padding:10px 14px} #landing .price-tag .amount{font-size:28px} #landing .checks{margin-top:14px;gap:8px} #landing .checks li{font-size:15px} #landing .checks .save{font-size:13.5px} #landing .hero-form{margin-top:18px} } /* Ust serit 390px'te tam doluydu (53+56+221 = 330 / 342) ve "Panelim" logonun * dibine yapisiyordu. Eylem cagrisi biraz daraliyor, acilan yer boslugа gidiyor. */ @media(max-width:820px){ #landing .nav-inner{gap:12px} #landing .btn-nav{padding:12px 15px;font-size:13.5px} #landing #landing-panel{color:var(--muted);font-size:14px} #landing #landing-panel:hover{color:var(--ink)} } /* ── Fiyat dönemi seçici + Enterprise kartı ─────────────────────────────── * Fiyatlar sunucudan geliyor (`/api/funnel/plans`); buradaki tek iş görünüm. */ #landing .plan-donem{ display:flex;gap:6px;max-width:420px;margin:0 auto 30px; background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:5px; } #landing .plan-donem button{ flex:1;font:inherit;font-size:14px;font-weight:800;padding:10px 8px; border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer; white-space:nowrap;transition:.2s; } #landing .plan-donem button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow)} #landing .plan-donem button i{font-style:normal;color:var(--green);margin-left:5px;font-size:12.5px} /* Enterprise dördüncü kart: fiyat yerine davet. Izgara üçlüydü, dördüncü kart eklenince dört sütuna çıkıyor; dar ekranlarda mevcut kırılmalar zaten tek/çift sütuna indiriyor. */ #landing .plans{grid-template-columns:repeat(4,1fr);max-width:1240px} #landing .kurumsal-plan{border-style:dashed} #landing .kurumsal-plan .p-price{font-size:30px;letter-spacing:-1px} #landing .kurumsal-plan .btn-outline{margin-top:auto;text-align:center} @media(max-width:1100px){#landing .plans{grid-template-columns:repeat(2,1fr);max-width:820px}} @media(max-width:600px){ #landing .plans{grid-template-columns:1fr} #landing .plan-donem button{font-size:12.5px;padding:10px 4px} #landing .plan-donem button i{margin-left:3px;font-size:11px} } /* ══════════════════════════════════════════════════════════════════════════ TELEFONDA SAYFA UZUNLUGU Olculdu (390x844, canli): sayfa 22.400px. Sebep tasarimin 600px altinda HER izgarayi tek sutuna indirmesi (satir 53). Tek sutunda bir kategori karti 4/5 oraninda 427px, bir persona 1/1.06 oraninda 410px yer kapliyor; alti kategori + dokuz persona tek basina 6.250px scroll demek. Icerik dogru, dizilim yanlis: bu kartlar RESIM, yan yana ikisi telefonda rahat okunuyor. Ucu izgara, ikisi yatay kaydirmali seride. Metin kisaltilmadi, kart silinmedi — yalnizca yerlesim degisti. ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:600px){ /* ── Resim izgaralari iki sutun ──────────────────────────────────────── * 9 persona: 3690px → 930px. 6 kategori: 2560px → 640px. */ #landing .cat-grid, #landing .persona-grid{grid-template-columns:1fr 1fr;gap:12px} /* Iki sutunda kart yarilandi; ustundeki etiketler de kuculmeli yoksa * rozet kartin yarisini kapatiyor. */ #landing .cat-card .cat-lbl{left:9px;bottom:9px;font-size:11.5px;padding:6px 11px} #landing .cat-card .hover-hint{top:9px;right:9px;font-size:9.5px;padding:4px 8px} #landing .persona .txt{left:11px;right:11px;bottom:11px} #landing .persona .txt h4{font-size:14.5px;letter-spacing:-.2px} #landing .persona .txt p{font-size:11.5px;margin-top:2px;line-height:1.35} /* ── Olcum kartlari tek satir ────────────────────────────────────────── * Icerik bir sayi ve bir etiket; ust uste dizmek 420px yiyordu. */ #landing .t-metrics{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px} #landing .metric{padding:16px 8px} #landing .metric .v{font-size:25px;letter-spacing:-1px} #landing .metric .l{font-size:11px;margin-top:4px;line-height:1.3} /* ── Yorumlar ve paketler: yatay serit ───────────────────────────────── * Ust uste dizilince 3 yorum ~900px, 4 paket ~2.200px. Serit halinde * ikisi de tek kart yuksekligine iniyor ve bir sonraki kartin kenari * gorundugu icin kaydirilacagi anlasiliyor. * Kabin kenara kadar tasiyor (-24px) ki kartlar ekrani doldursun. */ #landing .testi-grid, #landing .plans{ display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; margin-left:-24px;margin-right:-24px;padding:4px 24px 6px; } #landing .testi-grid::-webkit-scrollbar, #landing .plans::-webkit-scrollbar{display:none} #landing .t-card, #landing .plan{flex:0 0 84%;scroll-snap-align:center} /* Vurgulu paketin buyutmesi seritte komsusunu kesiyordu. */ #landing .plan.pop{transform:none} #landing .plan{padding:28px 24px} /* ── Bolum bosluklari ────────────────────────────────────────────────── * 60px ust + 60px alt, on dort bolum: yalniz boslukta 1.680px. Telefonda * 40 yeterli — bolumler zaten arka plan rengiyle ayriliyor. */ #landing section{padding:40px 0} #landing .sec-head{margin-bottom:34px} #landing .sec-sub{font-size:16px;margin-top:12px} } /* ── Alt yapiskan cubuk tek satir ──────────────────────────────────────── * Olculdu: cubuk 390px'te 110px yuksekti — cumle iki satira sariyor, geri * sayim ucuncu satira dusuyordu. Ekranin %13'u, her ekranda. Cumlenin * kuyrugu ("ilk cekim ucretsiz, kart gerekmez") sayfada zaten uc yerde * yaziyor; cubukta baslik + geri sayim + dugme kaliyor. */ #landing .offerbar .kuyruk{font-style:normal} @media(max-width:820px){ #landing .offerbar .kuyruk{display:none} #landing .offerbar{grid-template-columns:auto 1fr auto;gap:10px;padding:8px 12px} #landing .offerbar > span{grid-column:1;grid-row:1;font-size:11.5px;white-space:nowrap} #landing .offerbar .count{grid-column:2;grid-row:1;justify-content:center;font-size:10.5px;gap:3px} #landing .offerbar .count span{padding:1px 4px} #landing .offerbar a{grid-column:3;grid-row:1;padding:10px 12px;font-size:12px;white-space:nowrap} #landing footer{padding-bottom:78px} } /* Cubugu tek satira indirirken eylem cagrisi 36px'e dustu; parmak icin * istenen 44. Dolgu geri veriliyor, cubuk 52 -> 56px. Donem sekmeleri de * 39px'ti — fiyat secimi telefonda en cok dokunulan yer. */ @media(max-width:820px){ #landing .offerbar a{padding:13px 13px} } @media(max-width:600px){ #landing .plan-donem button{padding:14px 4px} } /* ── Gerçek tanıtım filmi ───────────────────────────────────────────────── * Taklit oynatıcının (.player, 16:10) yerini aldı. Film 3:4 DİKEY — reel * zaten dikey; yatay kabına sıkıştırmak yerine kap videoya uyuyor. * Yükseklik sınırlı ki masaüstünde sütunu taşırmasın. */ /* Kutu artik 9:16 bir urun filmi tasiyor (2026-09-11): 3/4 kalsaydi `cover` kadrajin ustunu ve altini kirpardi - modelin basi ve ayaklari giderdi. */ #landing .player-video{position:relative;max-height:640px;aspect-ratio:9/16;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12)} /* KIRPMA YOK (kullanici 2026-09-11): `cover` kutu ile videonun orani birebir tutmadigi anda kadrajin ustunu/altini kesiyor - modelin basi ya da ayaklari gidiyordu. `contain` ne olursa olsun tam kareyi gosterir. */ #landing .player-video video{width:100%;height:100%;object-fit:contain;display:block;background:#0e1320} #landing .player-video .chip-tl{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:1px;padding:7px 14px;border-radius:99px;text-transform:uppercase} #landing .player-video .rec{width:7px;height:7px;border-radius:50%;background:#fff;animation:tryr-rec 1.6s infinite} #landing .player-video .chip-br{position:absolute;bottom:14px;right:14px;background:rgba(14,19,32,.82);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:1px;padding:7px 14px;border-radius:99px;text-transform:uppercase;backdrop-filter:blur(4px)} /* Ses dugmesi bu kutuda SOL ALTTA: sag altta "FILM · 8 SN" rozeti duruyor, ikisi ust uste biniyordu (olculdu 2026-09-11, lab1). */ #landing .player-video .hero-ses-btn{bottom:14px;left:14px;right:auto} @keyframes tryr-rec{0%,100%{opacity:1}50%{opacity:.35}} @media(max-width:980px){#landing .player-video{max-height:520px}} /* ONCE/SONRA SERIDI (examples). Iki katman ust uste akar; ustteki (sonra) yalniz sag yarida gorunur, yani kartlar ortadaki cizgiyi gecerken kaynak halinden uretilmis haline doner. Senkron JS'siz: iki ray ayni keyframe'i ayni surede oynatir. Gorseller mutlak konumlu - grid item uzerinde `height:100%` cozulmuyor, olculdu 2026-08-25: kutu 310px iken gorsel 328.5px cikip alttan kirpiliyordu. */ #landing .ba-serit{position:relative} #landing .ba-etiket{display:flex;max-width:1180px;margin:0 auto 18px;padding:0 24px;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:800;color:var(--muted)} #landing .ba-etiket .sol{flex:1;text-align:center} #landing .ba-etiket .sag{flex:1;text-align:center} #landing .marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} #landing .mq-kat{display:block} #landing .mq-sonra{position:absolute;inset:0;-webkit-clip-path:inset(0 0 0 50%);clip-path:inset(0 0 0 50%)} #landing .mq-ray{display:flex;width:max-content;animation:tryr-akis 60s linear infinite} #landing .ba-serit:hover .mq-ray{animation-play-state:paused} #landing .mq-grp{display:flex;gap:20px;padding-right:20px} /* SOLDAN SAGA: kart ONCE bolgesinde dogar, cizgiyi gecip SONRA bolgesine yurur. Ters yon (sagdan sola) donusumu geriye oynatiyordu. */ @keyframes tryr-akis{from{transform:translateX(-50%)}to{transform:translateX(0)}} #landing .mq-kart{position:relative;width:min(300px,62vw);aspect-ratio:3/4;flex-shrink:0;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)} #landing .mq-kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} #landing .ba-cizgi{position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent);pointer-events:none} @media (prefers-reduced-motion: reduce){#landing .mq-ray{animation:none}} @media (max-width:600px){#landing .mq-kart{width:56vw}#landing .ba-etiket{font-size:11px;letter-spacing:2px}} /* Real Results: mevcut fotoğraf şeridi ile gerçek ürün filmleri aynı yerde. */ #landing .results-tabs{display:flex;width:max-content;max-width:100%;gap:4px;margin:0 auto 30px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--bg-alt)} #landing .results-tabs button{border:0;border-radius:999px;background:transparent;color:var(--muted);padding:10px 28px;font:800 14px/1.2 'Inter',sans-serif;cursor:pointer;min-height:44px} #landing .results-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 3px 12px rgba(14,19,32,.12)} #landing .results-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} #landing .results-video-grid{display:flex;justify-content:flex-start;gap:14px;width:100%;padding:12px 2px 22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch} #landing .results-video-grid::-webkit-scrollbar{display:none} #landing .results-video-card{flex:0 0 clamp(190px,21vw,248px);min-width:0;overflow:hidden;scroll-snap-align:start;border-radius:18px;background:var(--dark);box-shadow:0 12px 32px rgba(14,19,32,.18)} #landing .results-video-grid:has(.results-video-card:only-child){justify-content:center} #landing .results-video-card video{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:var(--dark)} #landing .results-video-controls:not([hidden]){display:flex;align-items:center;justify-content:center;gap:20px;margin-top:8px;font-size:13px;color:var(--muted)} #landing .results-video-controls button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:26px;cursor:pointer;touch-action:manipulation} #landing .results-video-controls button:hover{border-color:var(--accent);color:var(--accent)} @media(max-width:680px){ #landing .results-video-grid{gap:10px;padding:6px 2px 16px} #landing .results-video-card{flex:0 0 min(43vw,180px);scroll-snap-align:start;border-radius:14px} } #landing .hero-main{position:relative} /* Hero gorseli: height niteligi (1375) CSS'siz kutuyu kilitliyordu, gorsel 364x1375 geriliyordu (Lighthouse image-aspect-ratio 0, 2026-09-26). Nitelikler oran icin kalir (CLS 0). */ #landing .hero-main > img:not(.hero-stamp){width:100%;height:auto} #landing .hero-main .hero-stamp{position:absolute;left:-96px;top:22px;width:132px;height:auto;border-radius:0;box-shadow:none;transform:rotate(-12deg);pointer-events:none;z-index:3} @media(max-width:980px){#landing .hero-main .hero-stamp{left:12px;top:14px;width:clamp(72px,22%,105px)}} /* HERO: KAYNAK (satici packshot'i, kucuk) -> SONUC (video, buyuk), arada ok. Mobil-once: tek sutun, sira urun/ok/video (ustte kaynak, altta sonuc). >=640px'te yan yana donuyor, video solda buyuk / packshot sagda kucuk, ok sola donuyor - anlam hep "kaynaktan sonuca" akiyor. */ /* HERO (2026-09-11): film "Video Uretimi" bolumune tasindi, hero yeniden duragan `hero-cift.webp`. Kart / ok / packshot kurallari ve tek hareket animasyonu bu yuzden kalkti. Ses dugmesi o bolumde kullanildigi icin `.hero-ses-btn` KALDI - tek kural, iki yerde degil. */ #landing .hero-visual{position:relative} #landing .rating-badge{z-index:6} #landing .hero-ses-btn{position:absolute;bottom:10px;right:10px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(14,19,32,.72);border:1px solid rgba(255,255,255,.28);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)} #landing .hero-ses-btn:hover{background:rgba(14,19,32,.88)} #landing .hero-ses-btn:focus-visible{outline:2px solid #fff;outline-offset:2px} @media (max-width:640px){ #landing .rating-badge{top:-14px;right:-6px;padding:6px 10px;border-radius:12px} #landing .rating-badge .stars{font-size:11px;letter-spacing:1px} #landing .rating-badge .lbl{font-size:9.5px} } /* Erisilebilirlik (PageSpeed 2026-09-26): turuncu ust baslik beyaz zeminde 4.5:1 alti kaliyordu. */ #landing .kicker{color:var(--accent-dark)}