.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.6rem;padding:.6rem 1.1rem;font-weight:600;font-size:.9rem;transition:.15s;cursor:pointer;white-space:nowrap}
.btn-primary{background:#1f2ff0;color:#fff}.btn-primary:hover{background:#1624c9}
.btn-dark{background:#0f172a;color:#fff}.btn-dark:hover{background:#1e293b}
.btn-light{background:#fff;color:#0f172a;border:1px solid #e2e8f0}.btn-light:hover{background:#f8fafc}
.btn-danger{background:#e11d48;color:#fff}.btn-danger:hover{background:#be123c}
.btn-success{background:#059669;color:#fff}.btn-success:hover{background:#047857}
.btn-sm{padding:.35rem .7rem;font-size:.8rem;border-radius:.5rem}
.input{width:100%;border:1px solid #dbe2ea;border-radius:.6rem;padding:.6rem .8rem;font-size:.9rem;background:#fff;outline:none;transition:.15s}
.input:focus{border-color:#1f2ff0;box-shadow:0 0 0 3px rgba(31,47,240,.12)}
.label{display:block;font-size:.8rem;font-weight:600;color:#334155;margin-bottom:.35rem}
.card{background-color:#fff;border:1px solid #e6ebf1;border-radius:1rem}
.badge{display:inline-flex;align-items:center;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.tbl{width:100%;font-size:.86rem}.tbl th{text-align:left;font-weight:600;color:#64748b;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;padding:.7rem .9rem;border-bottom:1px solid #eef2f6;background:#fafbfd}
.tbl td{padding:.75rem .9rem;border-bottom:1px solid #f1f4f8;vertical-align:middle}.tbl tr:last-child td{border-bottom:0}
.side-link{display:flex;align-items:center;gap:1rem;padding:.55rem 1.5rem;color:#64748b;font-weight:500;font-size:1.02rem;position:relative;transition:.15s}
.side-link .ic{width:2.6rem;height:2.6rem;display:grid;place-items:center;border:1px solid #e2e8f0;border-radius:.6rem;background:#fff;color:#475569;flex-shrink:0}
.side-link:hover{color:#0f172a}
.side-link.active{background:#f8fbfd;color:#0f172a;border-top:1px solid #e6edf3;border-bottom:1px solid #e6edf3}
.side-link.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#1f2ff0}
.side-link .count{margin-left:auto;background:#1f2ff0;color:#fff;font-size:.7rem;font-weight:700;border-radius:999px;padding:.05rem .45rem}
.prose-case p{margin:.35rem 0}.prose-case h3{font-weight:700;margin-top:1rem}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Ana sayfa: CSS ile çizilen telefon kılıfı (tasarım kılıf yüzeyine yerleşir; kamera için kılıfta boşluk açılır) */
.phone-w{position:relative;width:100%;filter:drop-shadow(0 26px 22px rgba(15,23,42,.28)) drop-shadow(0 4px 6px rgba(15,23,42,.18))}
.phone-w::after{content:"";position:absolute;left:8%;right:8%;bottom:-3%;height:5%;background:radial-gradient(ellipse at center,rgba(15,23,42,.35),transparent 70%);filter:blur(6px);z-index:-1}
.phone{position:relative;aspect-ratio:9/18.6;border-radius:2.7rem;background:var(--art,linear-gradient(135deg,#c7d2fe,#e0e7ff)) center/cover no-repeat;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),inset 0 0 0 4px rgba(15,23,42,.10),inset 0 0 26px rgba(15,23,42,.18)}
/* cam yansıması ve kenar parlaklığı */
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 40%),linear-gradient(to right,rgba(255,255,255,.28),rgba(255,255,255,0) 7%,rgba(255,255,255,0) 93%,rgba(0,0,0,.14))}
/* kamera: kılıftaki boşluk + telefonun kamera adası + lensler */
.phone .cam{position:absolute;top:3.6%;left:7%;width:41%;aspect-ratio:1;border-radius:27%;
  background:linear-gradient(145deg,#2c2f38,#14161b);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.7),0 0 0 4.5px rgba(15,23,42,.28),0 7px 12px rgba(0,0,0,.45),inset 0 1px 2px rgba(255,255,255,.18)}
.phone .cam i{position:absolute;width:41%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#04050a 0 26%,#16294a 28% 36%,#07080d 38% 50%,#9aa0ad 52% 56%,#2d313b 58% 76%,#0d0f14 78%);
  box-shadow:0 2px 3px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.14)}
.phone .cam i::after{content:"";position:absolute;width:22%;aspect-ratio:1;top:20%;left:24%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(1px)}
.phone .cam i:nth-child(1){top:9%;left:9%}.phone .cam i:nth-child(2){bottom:9%;left:9%}.phone .cam i:nth-child(3){top:30%;right:9%}
.phone .cam u{position:absolute;top:11%;right:14%;width:15%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6d6 0 35%,#cfc7a8 70%);box-shadow:0 0 0 1.5px #3b3e48;text-decoration:none}
/* yan tuşlar */
.phone-w .sb{position:absolute;width:2.2%;background:linear-gradient(to right,#1d2028,#5b6070);border-radius:2px;z-index:-1}
.phone-w .sb1{left:-1.4%;top:19%;height:5%}.phone-w .sb2{left:-1.4%;top:27%;height:9%}.phone-w .sb3{left:-1.4%;top:38%;height:9%}
.phone-w .sb4{right:-1.4%;top:30%;height:14%;background:linear-gradient(to left,#1d2028,#5b6070)}
.float-slow{animation:floaty 6s ease-in-out infinite}.float-slower{animation:floaty 8s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion:reduce){.float-slow,.float-slower{animation:none}}
details.faq summary{cursor:pointer;list-style:none}details.faq summary::-webkit-details-marker{display:none}
details.faq[open] .faq-plus{transform:rotate(45deg)}

/* Izgara öğeleri içeriğine göre genişleyip sayfayı yatay taşırmasın (geniş tablolar kendi kaydırma alanında kalır) */
.grid>*{min-width:0}