:root {
    --primary-color: #0f8743; /* İslami yeşil tonu */
    --secondary-color: #4db6ac;
    --accent-color: #fbbc04;
    --google-blue: #1a73e8;
    --google-red: #d93025;
    --google-green: #188038;
    --text-color: #202124;
    --text-secondary: #5f6368;
    --light-gray: #f1f3f4;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --header-height: 200px;
    --islamic-dark-green: #0c6832;
    --islamic-light-green: #25a55f;
    --islamic-gold: #d4af37;
    --islamic-dark-gold: #aa8c2c;
    --islamic-purple: #673ab7;
    --primary-dark: #1a5e1a;  /* İslami yeşil tonu */
    --primary: #2e7d32;
    --primary-light: #4caf50;
    --secondary: #ffc107;
    --gold: #d4af37;  /* Altın rengi */
    --light: #f8f9fa;
    --dark: #343a40;
    --text-primary: #212529;
    --border-color: #e9ecef;
    --border-radius: 8px;
    --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: #f8f9fa;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H40V40H80V80H40V40H0V0Z" fill="rgba(15, 135, 67, 0.03)"/></svg>');
    background-repeat: repeat;
    line-height: 1.6;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

/* Ramazan lanterns decoration at the top corners */
.app-container::before,
.app-container::after {
    content: '';
    display: none;
}

/* AI Disclaimer styling with Islamic pattern background */
.ai-disclaimer {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    background-color: rgba(245, 245, 245, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin: 0.5rem 1rem 1rem 1rem;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ai-disclaimer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0L20 10L10 20L0 10L10 0Z" fill="rgba(15, 135, 67, 0.03)"/></svg>');
    opacity: 0.5;
    z-index: 0;
}

.ai-icon {
    margin-right: 10px;
    position: relative;
    z-index: 1;
}

.ai-text {
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

/* Search container with Islamic style */
.search-container.google-like {
    display: flex;
    align-items: center;
    max-width: 650px;
    margin: 0 auto;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    padding: 0 15px;
    height: 44px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    transition: all 0.3s;
    background: white;
    position: relative;
}

.search-container.google-like::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="M40 0C17.909 0 0 17.909 0 40s17.909 40 40 40 40-17.909 40-40S62.091 0 40 0zM25 20h30v40H25V20z" fill="rgba(15, 135, 67, 0.03)"/></svg>');
    background-size: 80px;
    opacity: 0.1;
    pointer-events: none;
}

.search-container.google-like:focus-within {
    box-shadow: 0 1px 10px rgba(15, 135, 67, 0.3);
    border-color: var(--islamic-light-green);
}

.search-icon {
    color: var(--islamic-dark-green);
    margin-right: 10px;
}

/* Question chips with Islamic style */
.question-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1rem;
}

.question-chip {
    background-color: #f1f3f4;
    border: none;
    color: var(--text-color);
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.question-chip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="M40 0C17.909 0 0 17.909 0 40s17.909 40 40 40 40-17.909 40-40S62.091 0 40 0zM25 20h30v40H25V20z" fill="rgba(15, 135, 67, 0.03)"/></svg>');
    background-size: 30px;
    opacity: 0.1;
    pointer-events: none;
}

.question-chip:hover, .question-chip:focus {
    background-color: var(--islamic-light-green);
    color: white;
    box-shadow: 0 2px 5px rgba(15, 135, 67, 0.3);
}

/* Loading animation styled like crescent */
.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--islamic-dark-green);
    border-right: 3px solid var(--islamic-light-green);
    border-bottom: 3px solid var(--islamic-dark-gold);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

/* Stats container with Ramazan style */
.stats-container {
    text-align: center;
    margin: 1.5rem auto;
    padding: 10px;
    border-radius: 8px;
    position: relative;
}

.stats-container::before {
    content: "";
    display: none;
}

.stats-container::after {
    content: "";
    display: none;
}

.stats-container strong {
    color: var(--islamic-dark-green);
    font-weight: 700;
}

/* Footer with Islamic patterns */
footer {
    background-color: #f8f9fa;
    color: var(--text-secondary);
    text-align: center;
    padding: 1.5rem;
    margin-top: auto;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0L40 20L20 40L0 20L20 0Z" fill="rgba(15, 135, 67, 0.05)"/></svg>');
    opacity: 0.5;
    z-index: 0;
}

/* Header Styles */
header {
    background: linear-gradient(135deg, var(--islamic-dark-green) 0%, var(--islamic-light-green) 100%);
    color: white;
    position: relative;
    padding: 2rem;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-bottom: 20px;
    position: relative;
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgba(255, 255, 255, 0.05)"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32c0-17.1 14-32 32-32c17.1 0 32 14 32 32C288 386 274 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57.3-34.5c8.1-4.9 13.7-13.4 13.7-23.5c0-15.2-12.3-27.5-27.5-27.5h-60.3c-16.6 0-30.3 13.4-30.3 30c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-34.1 27.7-62 61.8-62H268c33.2 0 60 26.8 60 60c0 21.8-11.8 41.6-30.9 52z"/></svg>');
    background-repeat: no-repeat;
    background-position: right -50px center;
    background-size: 200px;
    opacity: 0.15;
    z-index: 1;
}

.header-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

header h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-weight: 400;
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
}

.moon-decoration {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1;
    box-shadow: inset -10px 10px 20px rgba(255, 255, 255, 0.2);
}

.moon-decoration::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 5px -5px 10px rgba(255, 255, 255, 0.1);
}

/* Cami minareleri silüeti sol tarafa */
.moon-decoration::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -150px;
    width: 180px;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="rgba(255, 255, 255, 0.1)"><path d="M400 0C405 0 409.8 2.371 412.8 6.4C415.8 10.43 416.8 15.57 415.4 20.4L396.4 84.4C395.3 88.2 392.5 91.26 388.9 92.63C385.2 93.99 381.1 93.65 377.7 91.7L352 76.66V336C352 344.8 344.8 352 336 352H224C215.2 352 208 344.8 208 336V76.66L182.3 91.7C178.9 93.65 174.8 93.99 171.1 92.63C167.5 91.26 164.7 88.2 163.6 84.4L144.6 20.4C143.2 15.57 144.2 10.43 147.2 6.4C150.2 2.371 154.1 0 160 0H400zM288 168C288 181.3 277.3 192 264 192C250.7 192 240 181.3 240 168V96C240 82.75 250.7 72 264 72C277.3 72 288 82.75 288 96V168zM320 96C320 82.75 330.7 72 344 72C357.3 72 368 82.75 368 96V168C368 181.3 357.3 192 344 192C330.7 192 320 181.3 320 168V96zM32 224H96C113.7 224 128 238.3 128 256V352H128.4C155.7 352 178.7 375 178.7 402.3C178.7 410.4 186.5 416 194.7 416H208C216.8 416 224 423.2 224 432C224 440.8 216.8 448 208 448H194.7C168.5 448 146.7 430.4 146.7 402.3C146.7 392.4 138.5 384 128.4 384H0V256C0 238.3 14.33 224 32 224zM96 256H32V352H96V256zM608 224C625.7 224 640 238.3 640 256V384H511.6C501.5 384 493.3 392.4 493.3 402.3C493.3 430.4 471.5 448 445.3 448H432C423.2 448 416 440.8 416 432C416 423.2 423.2 416 432 416H445.3C453.5 416 461.3 410.4 461.3 402.3C461.3 375 484.3 352 511.6 352H512V256C512 238.3 526.3 224 544 224H608zM608 352V256H544V352H608z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.25;
}

/* Main Content */
main {
    flex: 1;
    padding: 0 1rem;
}

section {
    margin-bottom: 2.5rem;
}

h2 {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 500;
}

h3 {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.subtitle {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Search Section */
.search-section {
    margin: 2rem auto;
    max-width: 650px;
}

.search-container {
    display: flex;
    max-width: 700px;
    margin: 0 auto;
}

#soru-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
}

#clear-search {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
}

#clear-search:hover {
    background: var(--light-gray);
}

/* Loading Section */
#loading-section {
    text-align: center;
    padding: 2rem;
    position: relative;
}

#loading-section::before {
    content: '';
    display: none;
}

#loading-section::after {
    content: '';
    display: none;
}

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

/* Answer Section */
#answer-section {
    margin: 0 auto;
    max-width: 650px;
}

.answer-container {
    background-color: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    display: block;
    position: relative;
    overflow: hidden;
}

.answer-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0L40 20L20 40L0 20L20 0Z" fill="rgba(15, 135, 67, 0.02)"/></svg>');
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.answer-container.google-like {
    border-radius: 8px;
    border: 1px solid #dadce0;
    box-shadow: none;
    padding: 20px;
}

.disclaimer {
    display: flex;
    align-items: flex-start;
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.disclaimer i {
    margin-right: 10px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.disclaimer p {
    flex: 1;
    line-height: 1.4;
}

.question-display {
    margin-bottom: 1rem;
}

.question-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-color);
}

.answer-content {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    display: block;
}

.answer-content.google-style {
    display: block;
    border-radius: 8px;
    padding: 5px 0;
    margin-top: 10px;
}

#answer-text {
    display: block;
    min-height: 50px;
}

#answer-text p {
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}

#answer-text .citation-link {
    color: var(--google-blue);
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

.source-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding-top: 1rem;
    border-top: 1px solid #dadce0;
}

/* PDF Butonu */
.pdf-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--light-gray);
    color: var(--text-primary);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    margin-right: 8px;
    transition: all 0.2s ease;
}

.pdf-button:hover {
    background-color: #e6f1fe;
    color: var(--google-blue);
}

.pdf-button i {
    margin-right: 6px;
    font-size: 16px;
}

/* Aksiyon Butonları */
.action-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.action-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #5f6368;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.action-btn:hover {
    background-color: #f1f3f4;
}

.action-btn i {
    margin-right: 4px;
}

.action-btn-group {
    display: flex;
    gap: 5px;
}

.related-questions {
    margin-top: 20px;
}

#related-questions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-question-btn {
    text-align: left;
    background-color: #f1f3f4;
    border: none;
    border-radius: 100px;
    padding: 12px 20px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.related-question-btn:hover {
    background-color: #e8eaed;
}

.related-question-btn i {
    margin-right: 12px;
    color: var(--google-blue);
}

/* Example Questions */
.example-questions {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Footer */
footer {
    background-color: #f8f8f8;
    color: #333;
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 3px solid var(--gold);
    position: relative;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-section {
    max-width: 800px;
    margin: 0 auto 2rem;
    text-align: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.about-section h3 {
    color: #1a5e1a; /* İslami yeşil tonu */
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.about-section h3:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 100px;
    height: 3px;
    background-color: var(--gold);
    transform: translateX(-50%);
    border-radius: 2px;
}

.about-section p {
    margin-bottom: 1.2rem;
    line-height: 1.7;
    color: #333;
    text-align: justify;
    font-weight: normal;
    font-size: 1rem;
}

.about-section strong {
    color: #1a5e1a;
    font-weight: 700;
}

.about-section small {
    font-size: 0.85rem;
    color: #666;
    display: block;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.copyright {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .about-section {
        padding: 20px 15px;
        text-align: left;
    }
    
    .about-section p {
        font-size: 0.95rem;
    }
    
    .about-section h3 {
        font-size: 1.4rem;
    }
    
    .about-section h3:after {
        width: 80px;
    }
}

/* Utilities */
.hidden {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    header {
        padding: 1.5rem;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    main {
        padding: 0 1rem;
    }
    
    .search-container.google-like {
        width: 100%;
    }
    
    .question-chips {
        justify-content: center;
    }
    
    .source-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* PDF Alıntı Linkleri (Google Stili) */
.citation-link {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    background-color: rgba(26, 115, 232, 0.1);
    border-radius: 12px;
    padding: 2px 5px;
    text-decoration: none;
    color: #1a73e8;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

.citation-link:hover {
    background-color: rgba(26, 115, 232, 0.2);
}

.citation-icon {
    font-size: 14px;
    line-height: 1;
}

.citation-link .link-preview {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background-color: white;
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    width: 200px;
    z-index: 100;
}

.citation-link:hover .link-preview {
    display: block;
}

/* Kaynak Bilgileri Listesi */
.source-citation {
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #1a73e8;
}

.source-citation p {
    color: #5f6368;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
}

.source-citation ul {
    margin: 0;
    padding-left: 20px;
}

.source-citation li {
    margin-bottom: 5px;
    font-size: 14px;
}

.source-citation a {
    color: #1a73e8;
    text-decoration: none;
}

.source-citation a:hover {
    text-decoration: underline;
}

.error-msg {
    color: #d93025;
    font-size: 12px;
    font-style: italic;
    margin-top: 5px;
}

/* Kısa/Detaylı Özet Butonları */
.summary-controls {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 10px;
}

.summary-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    margin-right: 10px;
    border-radius: 20px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.summary-btn:hover {
    background-color: rgba(26, 115, 232, 0.05);
    color: var(--google-blue);
}

.summary-btn.active {
    background-color: var(--google-blue);
    color: white;
    font-weight: 500;
}

.summary-content {
    display: none;
}

.summary-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* PDF Kaynak Bilgisi Stilleri */
.pdf-source-info {
    background-color: #f0f7ff;
    border: 1px solid #d2e3fc;
    border-radius: 8px;
    padding: 10px 15px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.pdf-icon {
    font-size: 18px;
    margin-right: 8px;
}

.pdf-source-title {
    color: #1a73e8;
}

.pdf-source-title strong {
    font-weight: 600;
}

.pdf-page-info {
    color: #5f6368;
    margin-left: 5px;
}

.source-citation {
    font-size: 13px;
    color: #5f6368;
    margin-top: 8px;
    font-style: italic;
}

/* Google Agent Builder tarzı yanıt stilleri */
.answer-content.google-style .citation-number {
    display: inline-flex;
    align-items: center;
    background-color: #e8f0fe;
    border-radius: 12px;
    padding: 2px 6px;
    margin-left: 2px;
    margin-right: 2px;
    color: #1a73e8;
    font-size: 14px;
    vertical-align: text-bottom;
}

.answer-content.google-style .citation-link {
    display: inline-flex;
    align-items: center;
    background-color: #e8f0fe;
    border-radius: 12px;
    padding: 2px 6px;
    margin-left: 2px;
    margin-right: 2px;
    text-decoration: none;
    color: #1a73e8;
    position: relative;
    vertical-align: text-bottom;
}

.answer-content.google-style .citation-link:hover {
    background-color: #d2e3fc;
}

.answer-content.google-style .citation-icon {
    font-size: 14px;
    line-height: 14px;
}

.answer-content.google-style .citation-link .link-preview {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 6px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: max-content;
    max-width: 200px;
    font-size: 12px;
    color: #5f6368;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10;
}

.answer-content.google-style .citation-link:hover .link-preview {
    opacity: 1;
    visibility: visible;
}

.answer-content.google-style p {
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: 16px;
    color: #202124;
}

.disclaimer {
    display: flex;
    align-items: flex-start;
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #5f6368;
}

.disclaimer i {
    margin-right: 10px;
    color: #5f6368;
    margin-top: 3px;
}

.disclaimer p {
    flex: 1;
    line-height: 1.4;
}

.stats-container {
    text-align: center;
    margin-top: 10px;
    color: #5f6368;
    font-size: 14px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stats-container strong {
    color: #1a73e8;
    font-weight: 500;
}

.stats-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.stat-item:hover {
    background-color: #eef2ff;
    transform: translateY(-2px);
}

.stat-item i {
    color: #1a73e8;
    font-size: 16px;
}

.action-btn.active {
    color: #1a73e8;
    background-color: #e8f0fe;
}

#answer-section.hidden {
    display: none;
}

/* Header decoration */
.header-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.crescent-icon {
    font-size: 1.5rem;
    margin: 0 5px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.star-icon {
    font-size: 1.2rem;
    margin: 0 5px;
    color: var(--islamic-gold);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.header-line {
    height: 1px;
    width: 50px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
    margin: 0 10px;
}

/* Section icons */
.section-icon, .related-icon {
    font-size: 0.9em;
    color: var(--islamic-gold);
    margin-left: 8px;
    opacity: 0.8;
}

/* Footer decoration */
.footer-decoration {
    margin-bottom: 15px;
}

.mosque-icon {
    font-size: 2rem;
    position: relative;
    z-index: 1;
}

/* Answer section styling */
.answer-container {
    background-color: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    display: block;
    position: relative;
    overflow: hidden;
}

.answer-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0L40 20L20 40L0 20L20 0Z" fill="rgba(15, 135, 67, 0.02)"/></svg>');
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.answer-container.google-like {
    border-radius: 8px;
    border: 1px solid #dadce0;
    box-shadow: none;
    padding: 20px;
}

/* Loading section with Islamic style */
#loading-section {
    text-align: center;
    padding: 2rem;
    position: relative;
}

#loading-section::before {
    content: '';
    display: none;
}

#loading-section::after {
    content: '';
    display: none;
}

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

/* Footer Stili */
.footer {
    background-color: #f8f8f8;
    color: #333;
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 3px solid var(--gold);
    position: relative;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-section {
    max-width: 800px;
    margin: 0 auto 2rem;
    text-align: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.about-section h3 {
    color: #1a5e1a; /* İslami yeşil tonu */
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.about-section h3:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 100px;
    height: 3px;
    background-color: var(--gold);
    transform: translateX(-50%);
    border-radius: 2px;
}

.about-section p {
    margin-bottom: 1.2rem;
    line-height: 1.7;
    color: #333;
    text-align: justify;
    font-weight: normal;
    font-size: 1rem;
}

.about-section strong {
    color: #1a5e1a;
    font-weight: 700;
}

.about-section small {
    font-size: 0.85rem;
    color: #666;
    display: block;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.copyright {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .about-section {
        padding: 20px 15px;
        text-align: left;
    }
    
    .about-section p {
        font-size: 0.95rem;
    }
    
    .about-section h3 {
        font-size: 1.4rem;
    }
    
    .about-section h3:after {
        width: 80px;
    }
}