/* Premium Dark Theme Color Palette */
 :root {
     --bg-main: #ffffff;
     --bg-card: #76b4cd;
     --primary: #7c3aed;
     --secondary: #8838f8;
     --text-heading: #000000;
     --text-main: #000000;
     --text-muted: #000000;
     --border-color: #000000;
     --font-body: 'Inter', sans-serif;
     --font-heading: 'Outfit', sans-serif;
     --font-code: 'Fira Code', monospace;
     --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
     --shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
     font-size: 16px;
 }

 body {
     font-family: var(--font-body);
     background-color: var(--bg-main);
     color: var(--text-main);
     line-height: 1.8;
     overflow-x: hidden;
 }

 /* Ambient Glows */
 body::before {
     content: '';
     position: absolute;
     top: 0;
     left: 10%;
     width: 40%;
     height: 500px;
     background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
     z-index: -1;
     pointer-events: none;
 }

 body::after {
     content: '';
     position: absolute;
     top: 10%;
     right: 10%;
     width: 40%;
     height: 500px;
     background: radial-gradient(circle, var(--secondary-glow) 0%, transparent 70%);
     z-index: -1;
     pointer-events: none;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: var(--font-heading);
     line-height: 1.2;
     color: var(--text-heading);
 }

 h1 {
     font-size: clamp(2.8rem, 5vw, 4.5rem);
     font-weight: 800;
     letter-spacing: -0.03em;
     margin-bottom: 1.5rem;
 }

 h2 {
     font-size: 2.2rem;
     font-weight: 700;
     margin-top: 5rem;
     margin-bottom: 1.5rem;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 h2::before {
     content: '';
     display: inline-block;
     width: 24px;
     height: 4px;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     border-radius: 4px;
 }

 h3 {
     font-size: 1.5rem;
     color: var(--secondary);
     margin-top: 2rem;
     margin-bottom: 1rem;
 }

 h4 {
     font-size: 1.25rem;
     margin-bottom: 0.5rem;
     font-weight: 700;
 }

 p {
     margin-bottom: 1.5rem;
     font-size: 1.125rem;
     font-weight: 400;
     color: var(--text-main);
 }

 .highlight {
     background: linear-gradient(120deg, var(--primary), #ef4444);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 800;
 }

 /* --- DYNAMIC LAYOUT SYSTEM --- */
 /* Ana Taşıyıcı: Sayfanın genel sınırlarını belirler (Daha geniş) */
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 5%;
 }

 /* Okuma Alanı: Sadece yazılar için göz yormayan dar alan */
 .text-section {
     max-width: 800px;
     margin: 0 auto;
 }

 /* Geniş Alan: Kartlar ve görseller için geniş alan */
 .wide-section {
     width: 100%;
     margin: 3rem 0;
 }

 /* Hero Section (Center Aligned & Wide) */
 .hero {
     padding: 6rem 0 4rem;
     text-align: center;
     max-width: 900px;
     margin: 0 auto;
     position: relative;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     font-family: var(--font-code);
     background: rgba(245, 158, 11, 0.1);
     color: var(--primary);
     padding: 0.5rem 1.2rem;
     border-radius: 50px;
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 2rem;
     border: 1px solid rgba(245, 158, 11, 0.2);
 }

 /* Cards Grid (Wide) */
 .grid {
     display: grid;
     gap: 2rem;
 }

 .grid-3 {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }

 .grid-2 {
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 }

 .info-card {
     background: linear-gradient(180deg, rgba(245, 245, 245, 0.9) 0%, rgb(233, 231, 231) 100%);
     backdrop-filter: blur(10px);
     border: 1px solid var(--border-color);
     border-radius: 20px;
     padding: 2.5rem;
     box-shadow: var(--shadow-card);
     transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     height: 100%;
 }

 .info-card:hover {
     transform: translateY(-5px);
     border-color: rgba(245, 158, 11, 0.3);
     box-shadow: var(--shadow-hover);
     background: rgb(179, 179, 179);
 }

 /* Dark Code Block */
 .code-block {
     background: #ffffff;
     border-radius: 16px;
     padding: 2rem;
     font-family: var(--font-code);
     color: #000000;
     font-size: 0.95rem;
     line-height: 1.7;
     border: 1px solid #214988;
     position: relative;
     overflow: hidden;
 }

 .code-block::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: var(--secondary);
 }

 .code-block strong {
     color: #000000;
     font-family: var(--font-heading);
     font-size: 1.4rem;
 }

 /* Lists */
 .custom-list {
     padding-left: 0;
     list-style: none;
     margin-bottom: 2rem;
 }

 .custom-list li {
     margin-bottom: 1.2rem;
     display: flex;
     gap: 16px;
     font-size: 1.1rem;
     align-items: flex-start;
 }

 .custom-list li::before {
     content: '▹';
     color: var(--primary);
     font-size: 1.5rem;
     line-height: 1.2;
     font-weight: 800;
 }

 /* yeni eklenen claslar */
 /* --- RESPONSIVE VE SEO UYUMLU RESİM GALERİSİ --- */
 .image-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 2rem;
 }

 .gallery-item {
     background: rgba(21, 30, 46, 0.7);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     overflow: hidden;
     margin: 0;
     box-shadow: var(--shadow-card);
     transition: all 0.4s ease;
 }

 .gallery-item:hover {
     border-color: rgba(245, 158, 11, 0.4);
     transform: translateY(-5px);
     box-shadow: var(--shadow-hover);
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     /* Telefon boyutunda resmin taşmamasını sağlar, 16:9 oranında kırpar */
     aspect-ratio: 16 / 9;
     object-fit: cover;
     display: block;
 }

 .gallery-item figcaption {
     padding: 1.2rem;
     text-align: center;
     font-family: var(--font-heading);
     color: var(--secondary);
     font-size: 1rem;
     font-weight: 600;
     background: rgba(15, 23, 42, 0.9);
     border-top: 1px solid var(--border-color);
 }

 /* --- SEO ÖZET (ASIDE) KUTUSU --- */
 .summary-box {
     background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(180, 198, 245) 100%);
     border-left: 4px solid var(--primary);
     padding: 3rem;
     border-radius: 0 20px 20px 0;
     margin-top: 4rem;
     box-shadow: var(--shadow-card);
     position: relative;
 }

 .summary-box::before {
     content: "💚";
     /* Dikkat çekici küçük bir ikon */
     position: absolute;
     top: -15px;
     left: -20px;
     font-size: 2rem;
 }


 /* --- YARDIMCI SINIFLAR --- */
 .text-center {
     text-align: center;
 }

 /* Table (Wide) */
 .table-wrapper {
     overflow-x: auto;
     border-radius: 16px;
     box-shadow: var(--shadow-card);
     border: 1px solid var(--border-color);
     background: rgb(255, 255, 255);
     backdrop-filter: blur(10px);
 }

 table {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
     border-radius: 8px;
 }

 th,
 td {
     padding: 1.5rem;
     text-align: left;
     border-bottom: 1px solid var(--border-color);
 }

 th {
     background: var(--secondary);
     color: rgb(255, 255, 255);
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: 0.95rem;
     letter-spacing: 0.05em;
     text-transform: uppercase;
 }

 tr:last-child td {
     border-bottom: none;
 }

 tr:hover {
     background: rgba(255, 255, 255, 0.03);
 }

 /* Founder Box (Wide) */
 .founder-box {
     background: rgb(255, 255, 255);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     border: 1px solid var(--border-color);
     padding: 3rem;
     display: grid;
     grid-template-columns: 250px 1fr;
     gap: 3rem;
     align-items: center;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
 }

 .founder-box::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 300px;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.03));
     pointer-events: none;
 }

 .founder-box:hover {
     border-color: rgba(56, 189, 248, 0.3);
     box-shadow: var(--shadow-hover);
 }

 .founder-image-container {
     width: 100%;
     aspect-ratio: 1 / 1;
     border-radius: 16px;
     background: #020617;
     overflow: hidden;
     border: 2px dashed rgba(245, 158, 11, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     font-family: var(--font-heading);
     font-size: 0.9rem;
     text-align: center;
     position: relative;
 }

 .founder-image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
 }

 .founder-info h4 {
     font-size: 2.2rem;
     color: var(--text-heading);
     margin-bottom: 0.5rem;
 }

 .founder-info p {
     font-size: 1.1rem;
     color: var(--secondary);
     font-weight: 700;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-family: var(--font-code);
 }

 .founder-info span {
     font-size: 1.15rem;
     color: var(--text-muted);
     line-height: 1.6;
     display: block;
 }

 blockquote {
     background: linear-gradient(180deg, rgba(245, 245, 245, 0.9) 0%, rgb(233, 231, 231) 100%);
     border-left: 4px solid var(--primary);
     border-radius: 0 16px 16px 0;
     padding: 2.5rem 3rem;
     font-family: var(--font-heading);
     font-size: 1.35rem;
     color: #000000;
     font-style: italic;
     margin: 4rem auto;
     max-width: 900px;
     text-align: center;
     border-right: 1px solid var(--border-color);
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
 }

 /* --- BURASI YENİ EKLENDİ (SADECE SÜTUN HATASI İÇİN) --- */
 .responsive-columns {
     column-count: 3;
     column-gap: 3rem;
 }

 .responsive-columns li {
     break-inside: avoid;
     /* İçeriklerin yarım kalmasını önler */
 }

 /* ----------------------------------------------------- */

 @media (max-width: 900px) {

     .grid-2,
     .grid-3 {
         grid-template-columns: 1fr;
     }

     .summary-box {
         padding: 2rem;
     }

     .founder-box {
         grid-template-columns: 1fr;
         text-align: center;
         padding: 2rem;
     }

     .founder-image-container {
         width: 200px;
         margin: 0 auto;
     }

     h1 {
         font-size: 2.5rem;
     }

     .hero {
         padding: 4rem 0 2rem;
     }

     /* Mobilde dar ekranlar için 3 sütundan 1 sütuna düşürdük */
     .responsive-columns {
         column-count: 1;
     }
 }

 .corner-ribbon {
     width: 200px;
     /* Altın sarısı ve bronz arası elit bir degrade */
     background: linear-gradient(135deg, #ff4cf0 0%, #ff67f7 50%, #ff32d3 100%);
     color: rgb(255, 255, 255);
     /* Koyu antrasit yazı, altın üzerinde daha okunaklıdır */
     text-align: center;
     line-height: 40px;
     letter-spacing: 2px;
     font-weight: 800;
     text-transform: uppercase;
     text-decoration: none;
     font-size: 13px;
     position: fixed;
     top: 30px;
     right: -50px;
     transform: rotate(45deg);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     z-index: 9999;
     border: 1px solid rgba(255, 255, 255, 0.2);
     /* Çok ince beyaz bir parlama hattı */
     transition: all 0.3s ease;
 }

 .corner-ribbon:hover {
     background: linear-gradient(135deg, #15d0e9 0%, #0fc8f1 100%);
     color: #ff32d3;
     transform: rotate(45deg) scale(1.08);
     /* Hafifçe öne çıkma efekti */
 }

 /* logo kodu */
 .badge-pro {
     display: inline-block;
     color: var(--primary-accent);
     font-size: 15px;
     font-weight: 600;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     margin-bottom: 16px;
     --bg-dark: #0a0e17;
     --bg-card: #141b2d;
     --primary-accent: #0bff89;
     --secondary-accent: #2962ff;
     --text-light: #f8f9fa;
     --text-muted: #94a3b8;
     --border-color: rgba(255, 255, 255, 0.08);
     --ease: cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* --- EK DÜZELTMELER --- */
 .table-wrapper table {
     display: table;
     width: 100%;
 }

 .responsive-columns ul {
     padding-left: 0;
     list-style-position: inside;
 }

 /* --- GEMINI SMART FEATURES EXTRA CSS --- */

 /* Fütüristik Cam Efektli Ana Panel */
 .glass-panel {
     background: linear-gradient(180deg, rgba(245, 245, 245, 0.9) 0%, rgb(233, 231, 231) 100%);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid rgba(56, 189, 248, 0.2);
     border-radius: 24px;
     padding: 4rem;
     position: relative;
     overflow: hidden;
     box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8);
     margin: 4rem 0;
 }

 /* Dönen Radar/Işık Animasyonu */
 .glass-panel::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: conic-gradient(transparent, rgba(0, 29, 251, 0.05), transparent 30%);
     animation: radar-spin 12s linear infinite;
     z-index: -1;
     pointer-events: none;
 }

 @keyframes radar-spin {
     100% {
         transform: rotate(360deg);
     }
 }

 /* Neon Vurgu Metinleri */
 .neon-text {
     color: var(--secondary);
     text-shadow: 0 0 10px rgba(56, 189, 248, 0.4), 0 0 20px rgba(56, 189, 248, 0.2);
     font-weight: 800;
     letter-spacing: 1px;
 }

 /* Yetenek Kartları Izgarası */
 .capability-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     margin-top: 2rem;
 }

 /* Gelişmiş Yetenek Kartı */
 .cap-card {
     background: linear-gradient(180deg, rgba(245, 245, 245, 0.9) 0%, rgb(233, 231, 231) 100%);
     border-top: 3px solid var(--secondary);
     border-radius: 16px;
     padding: 2.5rem 2rem;
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
     position: relative;
 }

 .cap-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px -10px rgba(56, 189, 248, 0.2);
     border-top-color: var(--primary);
 }

 .cap-icon {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     display: inline-block;
 }

 /* Modern Checklist */
 .smart-list {
     list-style: none;
     padding: 0;
 }

 .smart-list li {
     position: relative;
     padding-left: 2.5rem;
     margin-bottom: 1.5rem;
     font-size: 1.15rem;
     color: var(--text-main);
 }

 .smart-list li::before {
     content: '⚡';
     position: absolute;
     left: 0;
     top: 2px;
     font-size: 1.2rem;
     filter: drop-shadow(0 0 5px var(--secondary));
 }
.mb-4 { 
    margin-bottom: 2rem; 
}

.mt-4 { 
    margin-top: 2rem; 
}